From 28df4ae76356e6183b17b95c61045560d35d1512 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Thu, 29 Jan 2026 12:56:58 -0500
Subject: [PATCH 1/4] test: add more e2e tests

---
 biome.json                                    | 10 +++-
 e2e/faucet.test.ts                            | 20 +++++++
 e2e/passkey-accounts.test.ts                  | 47 +++++++++++++++
 e2e/send-a-payment.test.ts                    | 58 +++++++++++++++++++
 .../guides/steps/payments/SendPayment.tsx     |  4 +-
 5 files changed, 137 insertions(+), 2 deletions(-)
 create mode 100644 e2e/faucet.test.ts
 create mode 100644 e2e/passkey-accounts.test.ts
 create mode 100644 e2e/send-a-payment.test.ts

diff --git a/biome.json b/biome.json
index 933e82b6..b1b81b1d 100644
--- a/biome.json
+++ b/biome.json
@@ -40,6 +40,14 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "includes": ["**", "!dist", "!node_modules", "!specs/lib", "!src/snippets/unformatted"]
+    "includes": [
+      "**",
+      "!dist",
+      "!node_modules",
+      "!playwright-report",
+      "!specs/lib",
+      "!src/snippets/unformatted",
+      "!test-results"
+    ]
   }
 }
diff --git a/e2e/faucet.test.ts b/e2e/faucet.test.ts
new file mode 100644
index 00000000..a5e04a6e
--- /dev/null
+++ b/e2e/faucet.test.ts
@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test'
+
+test('fund an address via faucet', async ({ page }) => {
+  await page.goto('/quickstart/faucet')
+
+  // Switch to "Fund an address" tab
+  const tab = page.getByRole('tab', { name: 'Fund an address' })
+  await expect(tab).toBeVisible({ timeout: 60000 })
+  await tab.click()
+
+  // Enter an address
+  const addressInput = page.getByPlaceholder('0x...')
+  await addressInput.fill('0xbeefcafe54750903ac1c8909323af7beb21ea2cb')
+
+  // Click "Add funds" button
+  await page.getByRole('button', { name: 'Add funds' }).click()
+
+  // Confirm "View receipt" link is visible
+  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 60000 })
+})
diff --git a/e2e/passkey-accounts.test.ts b/e2e/passkey-accounts.test.ts
new file mode 100644
index 00000000..9d1b8433
--- /dev/null
+++ b/e2e/passkey-accounts.test.ts
@@ -0,0 +1,47 @@
+import { expect, test } from '@playwright/test'
+
+test('sign up, sign out, then sign in with passkey', async ({ page }) => {
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/use-accounts/embed-passkeys')
+
+  // Wait for the demo to load
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 60000 })
+
+  // Sign up with passkey
+  await signUpButton.click()
+
+  // Wait for sign out button (indicates successful sign up)
+  const signOutButton = page.getByRole('button', { name: 'Sign out' }).first()
+  await expect(signOutButton).toBeVisible({ timeout: 30000 })
+
+  // Sign out
+  await signOutButton.click()
+
+  // Wait for sign in button to reappear
+  const signInButton = page.getByRole('button', { name: 'Sign in' }).first()
+  await expect(signInButton).toBeVisible({ timeout: 10000 })
+
+  // Sign in with the same passkey
+  await signInButton.click()
+
+  // Confirm signed in again (sign out button visible)
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/send-a-payment.test.ts b/e2e/send-a-payment.test.ts
new file mode 100644
index 00000000..d35d6238
--- /dev/null
+++ b/e2e/send-a-payment.test.ts
@@ -0,0 +1,58 @@
+import { expect, test } from '@playwright/test'
+
+test('send a payment', async ({ page }) => {
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/payments/send-a-payment')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 60000 })
+  await signUpButton.click()
+
+  // Wait for sign out button (indicates successful sign up)
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  // Wait for "Add more funds" button (indicates funds were added)
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 60000,
+  })
+
+  // Step 3: Send payment
+  const enterDetailsButton = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(enterDetailsButton).toBeVisible()
+  await enterDetailsButton.click()
+
+  // Fill in optional memo
+  const memoInput = page.getByLabel('Memo (optional)').first()
+  await expect(memoInput).toBeVisible()
+  await memoInput.fill('test-memo')
+
+  // Click send
+  const sendButton = page.getByRole('button', { name: 'Send' }).first()
+  await sendButton.click()
+
+  // Wait for transaction receipt link
+  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 60000 })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/src/components/guides/steps/payments/SendPayment.tsx b/src/components/guides/steps/payments/SendPayment.tsx
index 01b4ba2b..3f64a50e 100644
--- a/src/components/guides/steps/payments/SendPayment.tsx
+++ b/src/components/guides/steps/payments/SendPayment.tsx
@@ -105,6 +105,7 @@ export function SendPayment(props: DemoStepProps) {
                 <input
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
+                  id="recipient"
                   type="text"
                   name="recipient"
                   value={recipient}
@@ -119,11 +120,12 @@ export function SendPayment(props: DemoStepProps) {
                 <input
                   className={`h-[34px] rounded-[50px] border px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white ${memoError ? 'border-red-500' : 'border-gray4'}`}
                   data-1p-ignore
+                  id="memo"
                   type="text"
                   name="memo"
                   value={memo}
                   onChange={handleMemoChange}
-                  placeholder="INV-12345"
+                  placeholder="Optional"
                 />
               </div>
               <Button

From e85b759380c0d6b361828648dd0f7546da727bc3 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Thu, 29 Jan 2026 13:36:47 -0500
Subject: [PATCH 2/4] test: add

---
 e2e/create-a-stablecoin.test.ts               |  58 ++++++++++
 e2e/distribute-rewards.test.ts                | 107 ++++++++++++++++++
 e2e/executing-swaps.test.ts                   |  49 ++++++++
 e2e/faucet.spec.ts                            |  18 ---
 e2e/faucet.test.ts                            |   6 +-
 e2e/manage-stablecoin.test.ts                 |  83 ++++++++++++++
 e2e/mint-stablecoins.test.ts                  |  85 ++++++++++++++
 e2e/passkey-accounts.test.ts                  |   2 +-
 e2e/providing-liquidity.test.ts               |  59 ++++++++++
 e2e/send-a-payment.test.ts                    |   8 +-
 e2e/use-for-fees.test.ts                      | 102 +++++++++++++++++
 playwright.config.ts                          |   3 +-
 .../guides/steps/issuance/BurnToken.tsx       |   1 +
 .../steps/issuance/BurnTokenBlocked.tsx       |   1 +
 .../guides/steps/issuance/CreateToken.tsx     |   2 +
 .../guides/steps/issuance/GrantTokenRoles.tsx |   1 +
 .../guides/steps/issuance/MintToken.tsx       |   2 +
 .../steps/issuance/RevokeTokenRoles.tsx       |   1 +
 .../guides/steps/issuance/SetSupplyCap.tsx    |   1 +
 .../steps/payments/AddFundsToOthers.tsx       |   1 +
 .../guides/steps/payments/PayWithFeeToken.tsx |   2 +
 .../steps/payments/PayWithIssuedToken.tsx     |   2 +
 .../steps/payments/SendParallelPayments.tsx   |   2 +
 .../steps/payments/SendPaymentWithMemo.tsx    |   2 +
 .../guides/steps/payments/SponsorUserFees.tsx |   2 +
 .../guides/steps/wallet/SetFeeToken.tsx       |   1 +
 26 files changed, 576 insertions(+), 25 deletions(-)
 create mode 100644 e2e/create-a-stablecoin.test.ts
 create mode 100644 e2e/distribute-rewards.test.ts
 create mode 100644 e2e/executing-swaps.test.ts
 delete mode 100644 e2e/faucet.spec.ts
 create mode 100644 e2e/manage-stablecoin.test.ts
 create mode 100644 e2e/mint-stablecoins.test.ts
 create mode 100644 e2e/providing-liquidity.test.ts
 create mode 100644 e2e/use-for-fees.test.ts

diff --git a/e2e/create-a-stablecoin.test.ts b/e2e/create-a-stablecoin.test.ts
new file mode 100644
index 00000000..1994eb71
--- /dev/null
+++ b/e2e/create-a-stablecoin.test.ts
@@ -0,0 +1,58 @@
+import { expect, test } from '@playwright/test'
+
+test('create a stablecoin', async ({ page }) => {
+  test.setTimeout(120000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/issuance/create-a-stablecoin')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  // Wait for sign out button (indicates successful sign up)
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  // Wait for "Add more funds" button (indicates funds were added)
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Fill in token details and deploy
+  const nameInput = page.getByPlaceholder('demoUSD').first()
+  await expect(nameInput).toBeVisible()
+  await nameInput.fill('TestUSD')
+
+  const symbolInput = page.getByPlaceholder('DEMO').first()
+  await expect(symbolInput).toBeVisible()
+  await symbolInput.fill('TEST')
+
+  const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await deployButton.click()
+
+  // Wait for success - View receipt link
+  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 90000 })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/distribute-rewards.test.ts b/e2e/distribute-rewards.test.ts
new file mode 100644
index 00000000..dcfcf327
--- /dev/null
+++ b/e2e/distribute-rewards.test.ts
@@ -0,0 +1,107 @@
+import { expect, test } from '@playwright/test'
+
+test('distribute rewards', async ({ page }) => {
+  test.setTimeout(240000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/issuance/distribute-rewards')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Create a token
+  const nameInput = page.getByPlaceholder('demoUSD').first()
+  await expect(nameInput).toBeVisible()
+  await nameInput.fill('RewardTestUSD')
+
+  const symbolInput = page.getByPlaceholder('DEMO').first()
+  await symbolInput.fill('REWARD')
+
+  const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await deployButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 4: Grant issuer role
+  const grantEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(grantEnterDetails).toBeVisible()
+  await grantEnterDetails.click()
+
+  const grantButton = page.getByRole('button', { name: 'Grant' }).first()
+  await grantButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(1)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 5: Mint tokens
+  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).nth(1)
+  await expect(mintEnterDetails).toBeVisible()
+  await mintEnterDetails.click()
+
+  const mintButton = page.getByRole('button', { name: 'Mint' }).first()
+  await mintButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(2)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 6: Opt in to rewards
+  const optInButton = page.getByRole('button', { name: 'Opt In' }).first()
+  await expect(optInButton).toBeVisible()
+  await optInButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(3)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 7: Start reward
+  const startButton = page.getByRole('button', { name: 'Start' }).first()
+  await expect(startButton).toBeVisible()
+  await startButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(4)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 8: Claim reward
+  const claimButton = page.getByRole('button', { name: 'Claim' }).first()
+  await expect(claimButton).toBeVisible()
+  await claimButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(5)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/executing-swaps.test.ts b/e2e/executing-swaps.test.ts
new file mode 100644
index 00000000..25d1d3d7
--- /dev/null
+++ b/e2e/executing-swaps.test.ts
@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test'
+
+test('executing swaps', async ({ page }) => {
+  test.setTimeout(180000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/stablecoin-dex/executing-swaps')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Execute a swap
+  const swapButton = page.getByRole('button', { name: 'Swap' }).first()
+  await expect(swapButton).toBeVisible()
+  await swapButton.click()
+
+  // Wait for swap receipt
+  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 90000 })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/faucet.spec.ts b/e2e/faucet.spec.ts
deleted file mode 100644
index dceb26c4..00000000
--- a/e2e/faucet.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { expect, test } from '@playwright/test'
-
-test('fund an address via faucet', async ({ page }) => {
-  await page.goto('/quickstart/faucet')
-
-  // Switch to "Fund an address" tab
-  await page.getByRole('tab', { name: 'Fund an address' }).click()
-
-  // Enter an address
-  const addressInput = page.getByPlaceholder('0x...')
-  await addressInput.fill('0xbeefcafe54750903ac1c8909323af7beb21ea2cb')
-
-  // Click "Add funds" button
-  await page.getByRole('button', { name: 'Add funds' }).click()
-
-  // Confirm "View receipt" link is visible
-  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 30000 })
-})
diff --git a/e2e/faucet.test.ts b/e2e/faucet.test.ts
index a5e04a6e..b862fc8c 100644
--- a/e2e/faucet.test.ts
+++ b/e2e/faucet.test.ts
@@ -1,11 +1,13 @@
 import { expect, test } from '@playwright/test'
 
 test('fund an address via faucet', async ({ page }) => {
+  test.setTimeout(120000)
+
   await page.goto('/quickstart/faucet')
 
   // Switch to "Fund an address" tab
   const tab = page.getByRole('tab', { name: 'Fund an address' })
-  await expect(tab).toBeVisible({ timeout: 60000 })
+  await expect(tab).toBeVisible({ timeout: 90000 })
   await tab.click()
 
   // Enter an address
@@ -16,5 +18,5 @@ test('fund an address via faucet', async ({ page }) => {
   await page.getByRole('button', { name: 'Add funds' }).click()
 
   // Confirm "View receipt" link is visible
-  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 60000 })
+  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 90000 })
 })
diff --git a/e2e/manage-stablecoin.test.ts b/e2e/manage-stablecoin.test.ts
new file mode 100644
index 00000000..9e1cb3ca
--- /dev/null
+++ b/e2e/manage-stablecoin.test.ts
@@ -0,0 +1,83 @@
+import { expect, test } from '@playwright/test'
+
+test('manage stablecoin - grant and revoke roles', async ({ page }) => {
+  test.setTimeout(180000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/issuance/manage-stablecoin')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Create a token
+  const nameInput = page.getByPlaceholder('demoUSD').first()
+  await expect(nameInput).toBeVisible()
+  await nameInput.fill('ManageTestUSD')
+
+  const symbolInput = page.getByPlaceholder('DEMO').first()
+  await symbolInput.fill('MANAGE')
+
+  const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await deployButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 4: Grant issuer role
+  const grantEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(grantEnterDetails).toBeVisible()
+  await grantEnterDetails.click()
+
+  const grantButton = page.getByRole('button', { name: 'Grant' }).first()
+  await expect(grantButton).toBeVisible()
+  await grantButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(1)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 5: Revoke issuer role
+  const revokeEnterDetails = page.getByRole('button', { name: 'Enter details' }).nth(1)
+  await expect(revokeEnterDetails).toBeVisible()
+  await revokeEnterDetails.click()
+
+  const revokeButton = page.getByRole('button', { name: 'Revoke' }).first()
+  await expect(revokeButton).toBeVisible()
+  await revokeButton.click()
+
+  // Wait for revoke receipt
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(2)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/mint-stablecoins.test.ts b/e2e/mint-stablecoins.test.ts
new file mode 100644
index 00000000..9c322dd9
--- /dev/null
+++ b/e2e/mint-stablecoins.test.ts
@@ -0,0 +1,85 @@
+import { expect, test } from '@playwright/test'
+
+test('mint stablecoins', async ({ page }) => {
+  test.setTimeout(180000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/issuance/mint-stablecoins')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Create a token (fill form and deploy)
+  const nameInput = page.getByPlaceholder('demoUSD').first()
+  await expect(nameInput).toBeVisible()
+  await nameInput.fill('MintTestUSD')
+
+  const symbolInput = page.getByPlaceholder('DEMO').first()
+  await symbolInput.fill('MINT')
+
+  const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await deployButton.click()
+
+  // Wait for token to be created (View receipt appears)
+  await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 4: Grant issuer role - click "Enter details" then "Grant"
+  const grantEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(grantEnterDetails).toBeVisible()
+  await grantEnterDetails.click()
+
+  const grantButton = page.getByRole('button', { name: 'Grant' }).first()
+  await expect(grantButton).toBeVisible()
+  await grantButton.click()
+
+  // Wait for grant receipt
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(1)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 5: Mint tokens - click "Enter details" then "Mint"
+  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).nth(1)
+  await expect(mintEnterDetails).toBeVisible()
+  await mintEnterDetails.click()
+
+  const mintButton = page.getByRole('button', { name: 'Mint' }).first()
+  await expect(mintButton).toBeVisible()
+  await mintButton.click()
+
+  // Wait for mint receipt
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(2)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/passkey-accounts.test.ts b/e2e/passkey-accounts.test.ts
index 9d1b8433..0503f280 100644
--- a/e2e/passkey-accounts.test.ts
+++ b/e2e/passkey-accounts.test.ts
@@ -18,7 +18,7 @@ test('sign up, sign out, then sign in with passkey', async ({ page }) => {
 
   // Wait for the demo to load
   const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
-  await expect(signUpButton).toBeVisible({ timeout: 60000 })
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
 
   // Sign up with passkey
   await signUpButton.click()
diff --git a/e2e/providing-liquidity.test.ts b/e2e/providing-liquidity.test.ts
new file mode 100644
index 00000000..3967c2eb
--- /dev/null
+++ b/e2e/providing-liquidity.test.ts
@@ -0,0 +1,59 @@
+import { expect, test } from '@playwright/test'
+
+test('providing liquidity - place and query order', async ({ page }) => {
+  test.setTimeout(180000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/stablecoin-dex/providing-liquidity')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Place order
+  const placeOrderButton = page.getByRole('button', { name: 'Place order' }).first()
+  await expect(placeOrderButton).toBeVisible()
+  await placeOrderButton.click()
+
+  // Wait for order to be placed - should see View receipt
+  await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 4: Query order - button should become enabled after placing
+  const queryButton = page.getByRole('button', { name: 'Query' }).first()
+  await expect(queryButton).toBeEnabled({ timeout: 30000 })
+  await queryButton.click()
+
+  // Wait for order details to show (order type indicator)
+  await expect(page.getByText('Buy').first()).toBeVisible({ timeout: 30000 })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/e2e/send-a-payment.test.ts b/e2e/send-a-payment.test.ts
index d35d6238..8049bfdd 100644
--- a/e2e/send-a-payment.test.ts
+++ b/e2e/send-a-payment.test.ts
@@ -1,6 +1,8 @@
 import { expect, test } from '@playwright/test'
 
 test('send a payment', async ({ page }) => {
+  test.setTimeout(120000)
+
   // Set up virtual authenticator via CDP
   const client = await page.context().newCDPSession(page)
   await client.send('WebAuthn.enable')
@@ -18,7 +20,7 @@ test('send a payment', async ({ page }) => {
 
   // Step 1: Sign up with passkey
   const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
-  await expect(signUpButton).toBeVisible({ timeout: 60000 })
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
   await signUpButton.click()
 
   // Wait for sign out button (indicates successful sign up)
@@ -33,7 +35,7 @@ test('send a payment', async ({ page }) => {
 
   // Wait for "Add more funds" button (indicates funds were added)
   await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
-    timeout: 60000,
+    timeout: 90000,
   })
 
   // Step 3: Send payment
@@ -51,7 +53,7 @@ test('send a payment', async ({ page }) => {
   await sendButton.click()
 
   // Wait for transaction receipt link
-  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 60000 })
+  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 90000 })
 
   // Clean up
   await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
diff --git a/e2e/use-for-fees.test.ts b/e2e/use-for-fees.test.ts
new file mode 100644
index 00000000..74f64534
--- /dev/null
+++ b/e2e/use-for-fees.test.ts
@@ -0,0 +1,102 @@
+import { expect, test } from '@playwright/test'
+
+test('use stablecoin for fees', async ({ page }) => {
+  test.setTimeout(240000)
+
+  // Set up virtual authenticator via CDP
+  const client = await page.context().newCDPSession(page)
+  await client.send('WebAuthn.enable')
+  const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  })
+
+  await page.goto('/guide/issuance/use-for-fees')
+
+  // Step 1: Sign up with passkey
+  const signUpButton = page.getByRole('button', { name: 'Sign up' }).first()
+  await expect(signUpButton).toBeVisible({ timeout: 90000 })
+  await signUpButton.click()
+
+  await expect(page.getByRole('button', { name: 'Sign out' }).first()).toBeVisible({
+    timeout: 30000,
+  })
+
+  // Step 2: Add funds
+  const addFundsButton = page.getByRole('button', { name: 'Add funds' }).first()
+  await expect(addFundsButton).toBeVisible()
+  await addFundsButton.click()
+
+  await expect(page.getByRole('button', { name: 'Add more funds' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 3: Create a token
+  const nameInput = page.getByPlaceholder('demoUSD').first()
+  await expect(nameInput).toBeVisible()
+  await nameInput.fill('FeeTestUSD')
+
+  const symbolInput = page.getByPlaceholder('DEMO').first()
+  await symbolInput.fill('FEE')
+
+  const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await deployButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 4: Grant issuer role
+  const grantEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
+  await expect(grantEnterDetails).toBeVisible()
+  await grantEnterDetails.click()
+
+  const grantButton = page.getByRole('button', { name: 'Grant' }).first()
+  await grantButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(1)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 5: Mint tokens
+  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).nth(1)
+  await expect(mintEnterDetails).toBeVisible()
+  await mintEnterDetails.click()
+
+  const mintButton = page.getByRole('button', { name: 'Mint' }).first()
+  await mintButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(2)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 6: Mint fee AMM liquidity
+  const mintLiquidityButton = page.getByRole('button', { name: 'Mint liquidity' }).first()
+  await expect(mintLiquidityButton).toBeVisible()
+  await mintLiquidityButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(3)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Step 7: Send payment using token as fee
+  const payEnterDetails = page.getByRole('button', { name: 'Enter details' }).nth(2)
+  await expect(payEnterDetails).toBeVisible()
+  await payEnterDetails.click()
+
+  const sendButton = page.getByRole('button', { name: 'Send' }).first()
+  await expect(sendButton).toBeVisible()
+  await sendButton.click()
+
+  await expect(page.getByRole('link', { name: 'View receipt' }).nth(4)).toBeVisible({
+    timeout: 90000,
+  })
+
+  // Clean up
+  await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId })
+})
diff --git a/playwright.config.ts b/playwright.config.ts
index 3b060a86..b44fe692 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -4,8 +4,9 @@ export default defineConfig({
   testDir: './e2e',
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 2 : 1, // Retry once locally due to testnet flakiness
   workers: process.env.CI ? 1 : undefined,
+  timeout: 180000, // 3 min default timeout for testnet transactions
   reporter: 'html',
   use: {
     baseURL: 'http://localhost:5173',
diff --git a/src/components/guides/steps/issuance/BurnToken.tsx b/src/components/guides/steps/issuance/BurnToken.tsx
index 9ee35caf..0f3de823 100644
--- a/src/components/guides/steps/issuance/BurnToken.tsx
+++ b/src/components/guides/steps/issuance/BurnToken.tsx
@@ -105,6 +105,7 @@ export function BurnToken(props: DemoStepProps) {
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={(e) => setMemo(e.target.value)}
diff --git a/src/components/guides/steps/issuance/BurnTokenBlocked.tsx b/src/components/guides/steps/issuance/BurnTokenBlocked.tsx
index 2949ee63..69eb8dc7 100644
--- a/src/components/guides/steps/issuance/BurnTokenBlocked.tsx
+++ b/src/components/guides/steps/issuance/BurnTokenBlocked.tsx
@@ -112,6 +112,7 @@ export function BurnTokenBlocked(props: DemoStepProps) {
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="blockedAddress"
                   name="blockedAddress"
                   value={FAKE_RECIPIENT}
                   disabled={true}
diff --git a/src/components/guides/steps/issuance/CreateToken.tsx b/src/components/guides/steps/issuance/CreateToken.tsx
index f59b2e1d..e3e7d030 100644
--- a/src/components/guides/steps/issuance/CreateToken.tsx
+++ b/src/components/guides/steps/issuance/CreateToken.tsx
@@ -81,6 +81,7 @@ export function CreateToken(props: DemoStepProps) {
                   className="h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="name"
                   name="name"
                   required
                   spellCheck={false}
@@ -95,6 +96,7 @@ export function CreateToken(props: DemoStepProps) {
                   className="h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="symbol"
                   name="symbol"
                   required
                   spellCheck={false}
diff --git a/src/components/guides/steps/issuance/GrantTokenRoles.tsx b/src/components/guides/steps/issuance/GrantTokenRoles.tsx
index 3f24f093..20f71b1b 100644
--- a/src/components/guides/steps/issuance/GrantTokenRoles.tsx
+++ b/src/components/guides/steps/issuance/GrantTokenRoles.tsx
@@ -110,6 +110,7 @@ export function GrantTokenRoles(
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={address}
                   disabled={true}
diff --git a/src/components/guides/steps/issuance/MintToken.tsx b/src/components/guides/steps/issuance/MintToken.tsx
index 103657ea..73aaa0bf 100644
--- a/src/components/guides/steps/issuance/MintToken.tsx
+++ b/src/components/guides/steps/issuance/MintToken.tsx
@@ -112,6 +112,7 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={recipient || address}
                   disabled={true}
@@ -127,6 +128,7 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={(e) => setMemo(e.target.value)}
diff --git a/src/components/guides/steps/issuance/RevokeTokenRoles.tsx b/src/components/guides/steps/issuance/RevokeTokenRoles.tsx
index a76172b3..4de80272 100644
--- a/src/components/guides/steps/issuance/RevokeTokenRoles.tsx
+++ b/src/components/guides/steps/issuance/RevokeTokenRoles.tsx
@@ -110,6 +110,7 @@ export function RevokeTokenRoles(
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={address}
                   disabled={true}
diff --git a/src/components/guides/steps/issuance/SetSupplyCap.tsx b/src/components/guides/steps/issuance/SetSupplyCap.tsx
index 2f3fd980..3a9e7de6 100644
--- a/src/components/guides/steps/issuance/SetSupplyCap.tsx
+++ b/src/components/guides/steps/issuance/SetSupplyCap.tsx
@@ -92,6 +92,7 @@ export function SetSupplyCap(props: DemoStepProps) {
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="supplyCap"
                   name="supplyCap"
                   value="1,000"
                   disabled={true}
diff --git a/src/components/guides/steps/payments/AddFundsToOthers.tsx b/src/components/guides/steps/payments/AddFundsToOthers.tsx
index e8056ac8..a210add3 100644
--- a/src/components/guides/steps/payments/AddFundsToOthers.tsx
+++ b/src/components/guides/steps/payments/AddFundsToOthers.tsx
@@ -127,6 +127,7 @@ export function AddFundsToOthers(props: DemoStepProps) {
               autoComplete="off"
               autoCorrect="off"
               spellCheck={false}
+              id="fundAddress"
               name="fundAddress"
               placeholder="0x..."
               value={fundAddress ?? ''}
diff --git a/src/components/guides/steps/payments/PayWithFeeToken.tsx b/src/components/guides/steps/payments/PayWithFeeToken.tsx
index 777dddaa..f4b5a896 100644
--- a/src/components/guides/steps/payments/PayWithFeeToken.tsx
+++ b/src/components/guides/steps/payments/PayWithFeeToken.tsx
@@ -154,6 +154,7 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={recipient}
                   onChange={(e) => setRecipient(e.target.value)}
@@ -168,6 +169,7 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={(e) => setMemo(e.target.value)}
diff --git a/src/components/guides/steps/payments/PayWithIssuedToken.tsx b/src/components/guides/steps/payments/PayWithIssuedToken.tsx
index 074227b5..da0020b2 100644
--- a/src/components/guides/steps/payments/PayWithIssuedToken.tsx
+++ b/src/components/guides/steps/payments/PayWithIssuedToken.tsx
@@ -143,6 +143,7 @@ export function PayWithIssuedToken(props: DemoStepProps) {
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={recipient}
                   onChange={(e) => setRecipient(e.target.value)}
@@ -157,6 +158,7 @@ export function PayWithIssuedToken(props: DemoStepProps) {
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={(e) => setMemo(e.target.value)}
diff --git a/src/components/guides/steps/payments/SendParallelPayments.tsx b/src/components/guides/steps/payments/SendParallelPayments.tsx
index 9e83fb3c..d111fd84 100644
--- a/src/components/guides/steps/payments/SendParallelPayments.tsx
+++ b/src/components/guides/steps/payments/SendParallelPayments.tsx
@@ -184,6 +184,7 @@ export function SendParallelPayments(props: DemoStepProps) {
                     className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 disabled:cursor-not-allowed disabled:opacity-60 dark:text-white"
                     data-1p-ignore
                     type="text"
+                    id="recipient1"
                     name="recipient1"
                     value={FAKE_RECIPIENT}
                     disabled
@@ -198,6 +199,7 @@ export function SendParallelPayments(props: DemoStepProps) {
                     className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 disabled:cursor-not-allowed disabled:opacity-60 dark:text-white"
                     data-1p-ignore
                     type="text"
+                    id="recipient2"
                     name="recipient2"
                     value={FAKE_RECIPIENT_2}
                     disabled
diff --git a/src/components/guides/steps/payments/SendPaymentWithMemo.tsx b/src/components/guides/steps/payments/SendPaymentWithMemo.tsx
index c6b6fa54..e9bf0e82 100644
--- a/src/components/guides/steps/payments/SendPaymentWithMemo.tsx
+++ b/src/components/guides/steps/payments/SendPaymentWithMemo.tsx
@@ -147,6 +147,7 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
                   className={`h-[34px] rounded-[50px] border px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white ${memoError ? 'border-red-500' : 'border-gray4'}`}
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={handleMemoChange}
@@ -163,6 +164,7 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
                     className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                     data-1p-ignore
                     type="text"
+                    id="recipient"
                     name="recipient"
                     value={recipient}
                     onChange={(e) => setRecipient(e.target.value)}
diff --git a/src/components/guides/steps/payments/SponsorUserFees.tsx b/src/components/guides/steps/payments/SponsorUserFees.tsx
index 5a97292c..db8e4ec4 100644
--- a/src/components/guides/steps/payments/SponsorUserFees.tsx
+++ b/src/components/guides/steps/payments/SponsorUserFees.tsx
@@ -106,6 +106,7 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="recipient"
                   name="recipient"
                   value={recipient}
                   onChange={(e) => setRecipient(e.target.value)}
@@ -120,6 +121,7 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
                   className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
+                  id="memo"
                   name="memo"
                   value={memo}
                   onChange={(e) => setMemo(e.target.value)}
diff --git a/src/components/guides/steps/wallet/SetFeeToken.tsx b/src/components/guides/steps/wallet/SetFeeToken.tsx
index 30e9c3a5..20d57419 100644
--- a/src/components/guides/steps/wallet/SetFeeToken.tsx
+++ b/src/components/guides/steps/wallet/SetFeeToken.tsx
@@ -181,6 +181,7 @@ export function SetFeeToken(props: DemoStepProps) {
                   autoComplete="off"
                   autoCorrect="off"
                   spellCheck={false}
+                  id="customFeeToken"
                   name="customFeeToken"
                   placeholder="0x..."
                   value={customFeeToken}

From 4a1ebacfc6521a408d5602f68eea908db1548af0 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Wed, 4 Feb 2026 11:52:42 -0500
Subject: [PATCH 3/4] chore: up

---
 .github/workflows/verify.yml                  | 21 ++++++++++++++++---
 playwright.config.ts                          |  8 ++++---
 src/components/ConnectWallet.tsx              |  4 ++--
 src/components/IndexSupplyQuery.tsx           |  4 ++--
 src/components/TokenSelector.tsx              |  2 +-
 src/components/guides/Demo.tsx                | 18 ++++++++--------
 .../guides/steps/amm/BurnFeeAmmLiquidity.tsx  |  2 +-
 .../guides/steps/amm/CheckFeeAmmPool.tsx      |  2 +-
 .../guides/steps/amm/MintFeeAmmLiquidity.tsx  |  2 +-
 .../guides/steps/exchange/ApproveSpend.tsx    |  2 +-
 .../guides/steps/exchange/BuySwap.tsx         |  2 +-
 .../guides/steps/exchange/CancelOrder.tsx     |  2 +-
 .../guides/steps/exchange/PlaceOrder.tsx      |  2 +-
 .../guides/steps/exchange/QueryOrder.tsx      |  2 +-
 .../guides/steps/exchange/SellSwap.tsx        |  2 +-
 .../guides/steps/issuance/BurnToken.tsx       | 10 ++++-----
 .../steps/issuance/BurnTokenBlocked.tsx       | 10 ++++-----
 .../steps/issuance/CreateOrLoadToken.tsx      |  2 +-
 .../guides/steps/issuance/CreateToken.tsx     | 10 ++++-----
 .../steps/issuance/CreateTokenPolicy.tsx      |  8 +++----
 .../guides/steps/issuance/GrantTokenRoles.tsx | 10 ++++-----
 .../guides/steps/issuance/LinkTokenPolicy.tsx |  8 +++----
 .../guides/steps/issuance/MintToken.tsx       | 14 ++++++-------
 .../steps/issuance/PauseUnpauseTransfers.tsx  |  2 +-
 .../steps/issuance/RevokeTokenRoles.tsx       | 10 ++++-----
 .../guides/steps/issuance/SetSupplyCap.tsx    | 10 ++++-----
 .../guides/steps/payments/AddFunds.tsx        |  4 ++--
 .../steps/payments/AddFundsToOthers.tsx       |  8 +++----
 .../guides/steps/payments/PayWithFeeToken.tsx | 16 +++++++-------
 .../steps/payments/PayWithIssuedToken.tsx     | 16 +++++++-------
 .../steps/payments/SendParallelPayments.tsx   | 14 ++++++-------
 .../guides/steps/payments/SendPayment.tsx     | 14 ++++++-------
 .../steps/payments/SendPaymentWithMemo.tsx    | 14 ++++++-------
 .../guides/steps/payments/SponsorUserFees.tsx | 16 +++++++-------
 .../guides/steps/rewards/ClaimReward.tsx      |  4 ++--
 .../guides/steps/rewards/OptInToRewards.tsx   |  4 ++--
 .../guides/steps/rewards/StartReward.tsx      |  4 ++--
 .../guides/steps/wallet/AddFundsToWallet.tsx  |  4 ++--
 .../guides/steps/wallet/ConnectWallet.tsx     |  6 +++---
 .../guides/steps/wallet/SetFeeToken.tsx       |  6 +++---
 40 files changed, 158 insertions(+), 141 deletions(-)

diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index aca18cab..4ff103b9 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -33,11 +33,15 @@ jobs:
         run: pnpm run check:types
 
   e2e:
-    name: E2E Tests
+    name: E2E Tests (${{ matrix.shard }}/${{ strategy.job-total }})
     runs-on: ubuntu-latest
     timeout-minutes: 15
     permissions:
       contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2, 3]
 
     steps:
       - name: Clone repository
@@ -49,6 +53,17 @@ jobs:
       - name: Setup pnpm
         run: corepack enable pnpm
 
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: echo "dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Cache pnpm dependencies
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.dir }}
+          key: pnpm-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: pnpm-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install
 
@@ -72,12 +87,12 @@ jobs:
         run: pnpm exec playwright install-deps chromium
 
       - name: Run Playwright tests
-        run: pnpm run test:e2e
+        run: pnpm run test:e2e --shard=${{ matrix.shard }}/3
 
       - name: Upload test results
         uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
-          name: playwright-report
+          name: playwright-report-${{ matrix.shard }}
           path: playwright-report/
           retention-days: 15
diff --git a/playwright.config.ts b/playwright.config.ts
index b44fe692..8c52ede9 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -4,8 +4,8 @@ export default defineConfig({
   testDir: './e2e',
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 1, // Retry once locally due to testnet flakiness
-  workers: process.env.CI ? 1 : undefined,
+  retries: process.env.CI ? 1 : 1, // Retry once due to testnet flakiness
+  workers: process.env.CI ? 4 : undefined,
   timeout: 180000, // 3 min default timeout for testnet transactions
   reporter: 'html',
   use: {
@@ -19,8 +19,10 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'pnpm run dev',
+    command: 'pnpm run dev 2>/dev/null',
     url: 'http://localhost:5173',
     reuseExistingServer: !process.env.CI,
+    stdout: 'ignore',
+    stderr: 'ignore',
   },
 })
diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
index 93ace37d..3b121866 100644
--- a/src/components/ConnectWallet.tsx
+++ b/src/components/ConnectWallet.tsx
@@ -17,7 +17,7 @@ export function ConnectWallet({ showAddChain = true }: { showAddChain?: boolean
   const isSupported = chains.some((c) => c.id === chain?.id)
   if (!injectedConnectors.length)
     return (
-      <div className="-tracking-[2%] flex items-center text-[14px]">No browser wallets found.</div>
+      <div className="flex items-center text-[14px] -tracking-[2%]">No browser wallets found.</div>
     )
   if (!address || connector?.id === 'webAuthn')
     return (
@@ -64,7 +64,7 @@ export function ConnectWallet({ showAddChain = true }: { showAddChain?: boolean
         </Button>
       )}
       {switchChain.isSuccess && (
-        <div className="-tracking-[2%] flex items-center font-normal text-[14px]">
+        <div className="flex items-center font-normal text-[14px] -tracking-[2%]">
           Added Tempo to {connector?.name ?? 'Wallet'}!
         </div>
       )}
diff --git a/src/components/IndexSupplyQuery.tsx b/src/components/IndexSupplyQuery.tsx
index ac18c85c..ceac85cb 100644
--- a/src/components/IndexSupplyQuery.tsx
+++ b/src/components/IndexSupplyQuery.tsx
@@ -246,7 +246,7 @@ export function IndexSupplyQuery(props: IndexSupplyQueryProps = {}) {
   return (
     <Container
       headerLeft={
-        <h4 className="-tracking-[1%] font-normal text-[14px] text-gray12 leading-none">
+        <h4 className="font-normal text-[14px] text-gray12 leading-none -tracking-[1%]">
           {props.title || 'IndexSupply SQL Query'}
         </h4>
       }
@@ -325,7 +325,7 @@ export function IndexSupplyQuery(props: IndexSupplyQueryProps = {}) {
         </div>
 
         {error && (
-          <div className="-tracking-[2%] rounded bg-destructiveTint px-3 py-2 font-normal text-[14px] text-destructive leading-normal">
+          <div className="rounded bg-destructiveTint px-3 py-2 font-normal text-[14px] text-destructive leading-normal -tracking-[2%]">
             {error}
           </div>
         )}
diff --git a/src/components/TokenSelector.tsx b/src/components/TokenSelector.tsx
index df4fff2b..eca9ac78 100644
--- a/src/components/TokenSelector.tsx
+++ b/src/components/TokenSelector.tsx
@@ -29,7 +29,7 @@ export function TokenSelector(props: TokenSelectorProps) {
       name={name}
       value={value}
       onChange={(e) => onChange(e.target.value as Address)}
-      className="-tracking-[2%] h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black dark:text-white"
+      className="h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] dark:text-white"
     >
       {tokens.map((token) => (
         <TokenOption key={token} token={token} />
diff --git a/src/components/guides/Demo.tsx b/src/components/guides/Demo.tsx
index fc26a485..a0f7c33b 100644
--- a/src/components/guides/Demo.tsx
+++ b/src/components/guides/Demo.tsx
@@ -51,7 +51,7 @@ export function ExplorerLink({ hash }: { hash: string }) {
         href={url}
         target="_blank"
         rel="noreferrer"
-        className="-tracking-[1%] flex items-center gap-1 text-[13px] text-accent hover:underline"
+        className="flex items-center gap-1 text-[13px] text-accent -tracking-[1%] hover:underline"
         onClick={() => trackExternalLinkClick(url, 'View receipt')}
       >
         View receipt
@@ -71,7 +71,7 @@ export function ExplorerAccountLink({ address }: { address: string }) {
         href={url}
         target="_blank"
         rel="noreferrer"
-        className="-tracking-[1%] flex items-center gap-1 text-[13px] text-accent hover:underline"
+        className="flex items-center gap-1 text-[13px] text-accent -tracking-[1%] hover:underline"
         onClick={() => trackExternalLinkClick(url, 'View account')}
       >
         View account
@@ -142,7 +142,7 @@ export function Container(
     <ParentContainer
       headerLeft={
         <div className="flex items-center gap-1.5">
-          <h4 className="-tracking-[1%] font-normal text-[14px] text-gray12 leading-none">
+          <h4 className="font-normal text-[14px] text-gray12 leading-none -tracking-[1%]">
             {name}
           </h4>
           {showBadge && (
@@ -322,7 +322,7 @@ export function Step(
           >
             {completed ? <LucideCheck className="text-green9" /> : number}
           </div>
-          <div className="-tracking-[1%] text-[14px] text-black group-data-[active=false]:opacity-40 dark:text-white">
+          <div className="text-[14px] text-black -tracking-[1%] group-data-[active=false]:opacity-40 dark:text-white">
             {title}
           </div>
         </div>
@@ -334,7 +334,7 @@ export function Step(
       {error && (
         <>
           <div className="h-2" />
-          <div className="-tracking-[2%] rounded bg-destructiveTint px-3 py-2 font-normal text-[14px] text-destructive leading-normal">
+          <div className="rounded bg-destructiveTint px-3 py-2 font-normal text-[14px] text-destructive leading-normal -tracking-[2%]">
             {'shortMessage' in error ? error.shortMessage : error.message}
           </div>
         </>
@@ -376,7 +376,7 @@ export function Login() {
         <div className="flex gap-1">
           <Button
             variant="accent"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             onClick={() => connect.connect({ connector })}
             type="button"
           >
@@ -384,7 +384,7 @@ export function Login() {
           </Button>
           <Button
             variant="default"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             onClick={() =>
               connect.connect({
                 connector,
@@ -432,7 +432,7 @@ export function Logout() {
       </Button>
       <Button
         variant="destructive"
-        className="-tracking-[2%] font-normal text-[14px]"
+        className="font-normal text-[14px] -tracking-[2%]"
         onClick={() => {
           disconnect.disconnect({ connector })
           trackButtonClick('Sign out', 'destructive')
@@ -478,7 +478,7 @@ const buttonClassName = cva({
       true: 'pointer-events-none opacity-50',
     },
     size: {
-      default: '-tracking-[2%] h-[32px] px-[14px] text-[14px]',
+      default: 'h-[32px] px-[14px] text-[14px] -tracking-[2%]',
     },
     static: {
       true: 'pointer-events-none',
diff --git a/src/components/guides/steps/amm/BurnFeeAmmLiquidity.tsx b/src/components/guides/steps/amm/BurnFeeAmmLiquidity.tsx
index 0ec22002..0ab6ac15 100644
--- a/src/components/guides/steps/amm/BurnFeeAmmLiquidity.tsx
+++ b/src/components/guides/steps/amm/BurnFeeAmmLiquidity.tsx
@@ -72,7 +72,7 @@ export function BurnFeeAmmLiquidity(props: DemoStepProps) {
             })
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           Burn Liquidity
         </Button>
diff --git a/src/components/guides/steps/amm/CheckFeeAmmPool.tsx b/src/components/guides/steps/amm/CheckFeeAmmPool.tsx
index f644cd69..050307ff 100644
--- a/src/components/guides/steps/amm/CheckFeeAmmPool.tsx
+++ b/src/components/guides/steps/amm/CheckFeeAmmPool.tsx
@@ -49,7 +49,7 @@ export function CheckFeeAmmPool(props: DemoStepProps) {
       {active && pool && lpBalance && (
         <div className="mx-6 flex flex-col gap-3 pb-4">
           <div className="border-gray4 border-s-2 ps-5">
-            <div className="-tracking-[1%] mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px]">
+            <div className="mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px] -tracking-[1%]">
               <div className="flex flex-col gap-1.5">
                 <div className="flex items-center justify-between">
                   <span className="font-medium text-gray10">Your LP Balance</span>
diff --git a/src/components/guides/steps/amm/MintFeeAmmLiquidity.tsx b/src/components/guides/steps/amm/MintFeeAmmLiquidity.tsx
index 724e3c21..e8cf3b95 100644
--- a/src/components/guides/steps/amm/MintFeeAmmLiquidity.tsx
+++ b/src/components/guides/steps/amm/MintFeeAmmLiquidity.tsx
@@ -115,7 +115,7 @@ export function MintFeeAmmLiquidity(props: DemoStepProps & { waitForBalance?: bo
           disabled={!active || mintFeeLiquidity.isPending}
           onClick={handleMintAll}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {mintFeeLiquidity.isPending
             ? 'Adding...'
diff --git a/src/components/guides/steps/exchange/ApproveSpend.tsx b/src/components/guides/steps/exchange/ApproveSpend.tsx
index a8e60173..3205d9e7 100644
--- a/src/components/guides/steps/exchange/ApproveSpend.tsx
+++ b/src/components/guides/steps/exchange/ApproveSpend.tsx
@@ -43,7 +43,7 @@ export function ApproveSpend(props: DemoStepProps) {
             })
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {approve.isPending ? 'Approving...' : 'Approve Spend'}
         </Button>
diff --git a/src/components/guides/steps/exchange/BuySwap.tsx b/src/components/guides/steps/exchange/BuySwap.tsx
index f02019c3..0648c0b5 100644
--- a/src/components/guides/steps/exchange/BuySwap.tsx
+++ b/src/components/guides/steps/exchange/BuySwap.tsx
@@ -76,7 +76,7 @@ export function BuySwap({ onSuccess }: { onSuccess?: () => void }) {
             })
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {sendCalls.isPending ? 'Buying...' : 'Buy'}
         </Button>
diff --git a/src/components/guides/steps/exchange/CancelOrder.tsx b/src/components/guides/steps/exchange/CancelOrder.tsx
index 37159f2c..19923ad8 100644
--- a/src/components/guides/steps/exchange/CancelOrder.tsx
+++ b/src/components/guides/steps/exchange/CancelOrder.tsx
@@ -45,7 +45,7 @@ export function CancelOrder(props: DemoStepProps) {
             }
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {cancelOrder.isPending ? 'Canceling...' : 'Cancel Order'}
         </Button>
diff --git a/src/components/guides/steps/exchange/PlaceOrder.tsx b/src/components/guides/steps/exchange/PlaceOrder.tsx
index f8ff7378..c372fdda 100644
--- a/src/components/guides/steps/exchange/PlaceOrder.tsx
+++ b/src/components/guides/steps/exchange/PlaceOrder.tsx
@@ -78,7 +78,7 @@ export function PlaceOrder(props: DemoStepProps) {
             })
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {sendCalls.isPending ? 'Placing Order...' : 'Place Order'}
         </Button>
diff --git a/src/components/guides/steps/exchange/QueryOrder.tsx b/src/components/guides/steps/exchange/QueryOrder.tsx
index 6e0255a0..75ae4db9 100644
--- a/src/components/guides/steps/exchange/QueryOrder.tsx
+++ b/src/components/guides/steps/exchange/QueryOrder.tsx
@@ -52,7 +52,7 @@ export function QueryOrder(props: DemoStepProps) {
           disabled={!active || isQuerying}
           onClick={handleQuery}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {isQuerying ? 'Querying...' : hasQueried ? 'Query Again' : 'Query Order'}
         </Button>
diff --git a/src/components/guides/steps/exchange/SellSwap.tsx b/src/components/guides/steps/exchange/SellSwap.tsx
index e705013f..8b52cd6a 100644
--- a/src/components/guides/steps/exchange/SellSwap.tsx
+++ b/src/components/guides/steps/exchange/SellSwap.tsx
@@ -76,7 +76,7 @@ export function SellSwap({ onSuccess }: { onSuccess?: () => void }) {
             })
           }}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {sendCalls.isPending ? 'Selling...' : 'Sell'}
         </Button>
diff --git a/src/components/guides/steps/issuance/BurnToken.tsx b/src/components/guides/steps/issuance/BurnToken.tsx
index 85586540..0f3de823 100644
--- a/src/components/guides/steps/issuance/BurnToken.tsx
+++ b/src/components/guides/steps/issuance/BurnToken.tsx
@@ -73,7 +73,7 @@ export function BurnToken(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -84,7 +84,7 @@ export function BurnToken(props: DemoStepProps) {
             disabled={!canBurn}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -98,11 +98,11 @@ export function BurnToken(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="memo"
@@ -117,7 +117,7 @@ export function BurnToken(props: DemoStepProps) {
                 disabled={!address}
                 onClick={handleBurn}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {burn.isPending ? 'Burning...' : 'Burn'}
               </Button>
diff --git a/src/components/guides/steps/issuance/BurnTokenBlocked.tsx b/src/components/guides/steps/issuance/BurnTokenBlocked.tsx
index 94671424..69eb8dc7 100644
--- a/src/components/guides/steps/issuance/BurnTokenBlocked.tsx
+++ b/src/components/guides/steps/issuance/BurnTokenBlocked.tsx
@@ -80,7 +80,7 @@ export function BurnTokenBlocked(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -91,7 +91,7 @@ export function BurnTokenBlocked(props: DemoStepProps) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -105,11 +105,11 @@ export function BurnTokenBlocked(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="blockedAddress">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="blockedAddress">
                   Blocked address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="blockedAddress"
@@ -125,7 +125,7 @@ export function BurnTokenBlocked(props: DemoStepProps) {
                 disabled={!address}
                 onClick={handleBurnBlocked}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {burnBlocked.isPending ? 'Burning...' : 'Burn'}
               </Button>
diff --git a/src/components/guides/steps/issuance/CreateOrLoadToken.tsx b/src/components/guides/steps/issuance/CreateOrLoadToken.tsx
index 054ef791..310c2d9a 100644
--- a/src/components/guides/steps/issuance/CreateOrLoadToken.tsx
+++ b/src/components/guides/steps/issuance/CreateOrLoadToken.tsx
@@ -41,7 +41,7 @@ export function CreateOrLoadToken(props: DemoStepProps) {
         <div className="ml-6 flex flex-col gap-3 py-4">
           <div
             className={cx(
-              '-tracking-[2%] flex flex-col items-center rounded-[10px] bg-gray2 p-4 text-center font-normal text-[13px] text-gray9 leading-snug',
+              'flex flex-col items-center rounded-[10px] bg-gray2 p-4 text-center font-normal text-[13px] text-gray9 leading-snug -tracking-[2%]',
             )}
           >
             <div>
diff --git a/src/components/guides/steps/issuance/CreateToken.tsx b/src/components/guides/steps/issuance/CreateToken.tsx
index 107fef03..e3e7d030 100644
--- a/src/components/guides/steps/issuance/CreateToken.tsx
+++ b/src/components/guides/steps/issuance/CreateToken.tsx
@@ -74,11 +74,11 @@ export function CreateToken(props: DemoStepProps) {
               className="-mt-2.5 flex flex-col gap-2 md:flex-row md:items-end"
             >
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="name">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="name">
                   Token name
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="name"
@@ -89,11 +89,11 @@ export function CreateToken(props: DemoStepProps) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="symbol">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="symbol">
                   Token symbol
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-lg border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="symbol"
@@ -113,7 +113,7 @@ export function CreateToken(props: DemoStepProps) {
             <div className="relative">
               <div
                 className={cx(
-                  '-tracking-[2%] flex flex-col items-center rounded-[10px] bg-gray2 p-4 text-center font-normal text-[13px] text-gray9 leading-snug',
+                  'flex flex-col items-center rounded-[10px] bg-gray2 p-4 text-center font-normal text-[13px] text-gray9 leading-snug -tracking-[2%]',
                 )}
               >
                 <div>
diff --git a/src/components/guides/steps/issuance/CreateTokenPolicy.tsx b/src/components/guides/steps/issuance/CreateTokenPolicy.tsx
index 48685d68..c3c81397 100644
--- a/src/components/guides/steps/issuance/CreateTokenPolicy.tsx
+++ b/src/components/guides/steps/issuance/CreateTokenPolicy.tsx
@@ -54,7 +54,7 @@ export function CreateTokenPolicy(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -65,7 +65,7 @@ export function CreateTokenPolicy(props: DemoStepProps) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -79,7 +79,7 @@ export function CreateTokenPolicy(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-1 flex-col">
-                <div className="-tracking-[1%] mb-2 text-[13px] text-gray9">
+                <div className="mb-2 text-[13px] text-gray9 -tracking-[1%]">
                   This will create a blacklist policy that blocks {FAKE_RECIPIENT} from sending or
                   receiving tokens.
                 </div>
@@ -92,7 +92,7 @@ export function CreateTokenPolicy(props: DemoStepProps) {
                 onClick={handleCreatePolicy}
                 disabled={isCreating}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {isCreating ? 'Creating...' : 'Create Policy'}
               </Button>
diff --git a/src/components/guides/steps/issuance/GrantTokenRoles.tsx b/src/components/guides/steps/issuance/GrantTokenRoles.tsx
index 93bcdedf..20f71b1b 100644
--- a/src/components/guides/steps/issuance/GrantTokenRoles.tsx
+++ b/src/components/guides/steps/issuance/GrantTokenRoles.tsx
@@ -76,7 +76,7 @@ export function GrantTokenRoles(
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -89,7 +89,7 @@ export function GrantTokenRoles(
             disabled={!tokenAddress || hasAllRoles}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -103,11 +103,11 @@ export function GrantTokenRoles(
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Grant role to yourself
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="recipient"
@@ -123,7 +123,7 @@ export function GrantTokenRoles(
                 disabled={!address}
                 onClick={handleGrant}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {grant.isPending ? 'Granting...' : 'Grant'}
               </Button>
diff --git a/src/components/guides/steps/issuance/LinkTokenPolicy.tsx b/src/components/guides/steps/issuance/LinkTokenPolicy.tsx
index bec1218b..c36b56c4 100644
--- a/src/components/guides/steps/issuance/LinkTokenPolicy.tsx
+++ b/src/components/guides/steps/issuance/LinkTokenPolicy.tsx
@@ -56,7 +56,7 @@ export function LinkTokenPolicy(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -67,7 +67,7 @@ export function LinkTokenPolicy(props: DemoStepProps) {
             disabled={!tokenAddress || !policyId || isComplete}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -81,7 +81,7 @@ export function LinkTokenPolicy(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-1 flex-col">
-                <div className="-tracking-[1%] mb-2 text-[13px] text-gray9">
+                <div className="mb-2 text-[13px] text-gray9 -tracking-[1%]">
                   This will link the transfer policy to {metadata ? metadata.name : 'your token'},
                   enforcing the blacklist.
                 </div>
@@ -94,7 +94,7 @@ export function LinkTokenPolicy(props: DemoStepProps) {
                 onClick={handleLinkPolicy}
                 disabled={isLinking}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {isLinking ? 'Linking...' : 'Link Policy'}
               </Button>
diff --git a/src/components/guides/steps/issuance/MintToken.tsx b/src/components/guides/steps/issuance/MintToken.tsx
index fd280fc0..73aaa0bf 100644
--- a/src/components/guides/steps/issuance/MintToken.tsx
+++ b/src/components/guides/steps/issuance/MintToken.tsx
@@ -74,7 +74,7 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -91,7 +91,7 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
             disabled={Boolean(!tokenAddress || !hasRole || hasSufficientBalance)}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -105,11 +105,11 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Recipient address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="recipient"
@@ -121,11 +121,11 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="memo"
@@ -140,7 +140,7 @@ export function MintToken(props: DemoStepProps & { recipient?: Address }) {
                 disabled={!address}
                 onClick={handleMint}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {mint.isPending ? 'Minting...' : 'Mint'}
               </Button>
diff --git a/src/components/guides/steps/issuance/PauseUnpauseTransfers.tsx b/src/components/guides/steps/issuance/PauseUnpauseTransfers.tsx
index 7cca5510..8ae07bfe 100644
--- a/src/components/guides/steps/issuance/PauseUnpauseTransfers.tsx
+++ b/src/components/guides/steps/issuance/PauseUnpauseTransfers.tsx
@@ -80,7 +80,7 @@ export function PauseUnpauseTransfers(props: DemoStepProps) {
           disabled={!active || isProcessing}
           onClick={handleToggle}
           type="button"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
         >
           {isProcessing ? 'Processing...' : paused ? 'Unpause' : 'Pause'}
         </Button>
diff --git a/src/components/guides/steps/issuance/RevokeTokenRoles.tsx b/src/components/guides/steps/issuance/RevokeTokenRoles.tsx
index a7789d64..4de80272 100644
--- a/src/components/guides/steps/issuance/RevokeTokenRoles.tsx
+++ b/src/components/guides/steps/issuance/RevokeTokenRoles.tsx
@@ -76,7 +76,7 @@ export function RevokeTokenRoles(
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -89,7 +89,7 @@ export function RevokeTokenRoles(
             disabled={!tokenAddress || !hasAnyRole}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -103,11 +103,11 @@ export function RevokeTokenRoles(
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Revoke role from yourself
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="recipient"
@@ -123,7 +123,7 @@ export function RevokeTokenRoles(
                 disabled={!address}
                 onClick={handleRevoke}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {revoke.isPending ? 'Revoking...' : 'Revoke'}
               </Button>
diff --git a/src/components/guides/steps/issuance/SetSupplyCap.tsx b/src/components/guides/steps/issuance/SetSupplyCap.tsx
index 3b123b1e..3a9e7de6 100644
--- a/src/components/guides/steps/issuance/SetSupplyCap.tsx
+++ b/src/components/guides/steps/issuance/SetSupplyCap.tsx
@@ -60,7 +60,7 @@ export function SetSupplyCap(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Hide
@@ -71,7 +71,7 @@ export function SetSupplyCap(props: DemoStepProps) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -85,11 +85,11 @@ export function SetSupplyCap(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="supplyCap">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="supplyCap">
                   Supply cap amount
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="supplyCap"
@@ -104,7 +104,7 @@ export function SetSupplyCap(props: DemoStepProps) {
                 disabled={!active}
                 onClick={handleSetSupplyCap}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {setSupplyCap.isPending ? 'Setting...' : 'Set Cap'}
               </Button>
diff --git a/src/components/guides/steps/payments/AddFunds.tsx b/src/components/guides/steps/payments/AddFunds.tsx
index ba4d0355..60a8129c 100644
--- a/src/components/guides/steps/payments/AddFunds.tsx
+++ b/src/components/guides/steps/payments/AddFunds.tsx
@@ -72,7 +72,7 @@ export function AddFunds(props: DemoStepProps) {
         <Button
           disabled={fundAccount.isPending}
           variant="default"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
           onClick={() => fundAccount.mutate()}
           type="button"
         >
@@ -83,7 +83,7 @@ export function AddFunds(props: DemoStepProps) {
       <Button
         disabled={!address || fundAccount.isPending}
         variant={address ? 'accent' : 'default'}
-        className="-tracking-[2%] font-normal text-[14px]"
+        className="font-normal text-[14px] -tracking-[2%]"
         type="button"
         onClick={() => fundAccount.mutate()}
       >
diff --git a/src/components/guides/steps/payments/AddFundsToOthers.tsx b/src/components/guides/steps/payments/AddFundsToOthers.tsx
index 6984adaf..a210add3 100644
--- a/src/components/guides/steps/payments/AddFundsToOthers.tsx
+++ b/src/components/guides/steps/payments/AddFundsToOthers.tsx
@@ -86,7 +86,7 @@ export function AddFundsToOthers(props: DemoStepProps) {
         <Button
           disabled={!isValidTarget || fundAccount.isPending}
           variant="default"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
           onClick={() => fundAccount.mutate()}
           type="button"
         >
@@ -97,7 +97,7 @@ export function AddFundsToOthers(props: DemoStepProps) {
       <Button
         disabled={!isValidTarget || fundAccount.isPending}
         variant={isValidTarget ? 'accent' : 'default'}
-        className="-tracking-[2%] font-normal text-[14px]"
+        className="font-normal text-[14px] -tracking-[2%]"
         type="button"
         onClick={() => fundAccount.mutate()}
       >
@@ -118,11 +118,11 @@ export function AddFundsToOthers(props: DemoStepProps) {
       <div className="mx-6 flex flex-col gap-3 pb-4">
         <div className="border-gray4 border-s-2 ps-5">
           <div className="mt-2 flex flex-col">
-            <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="fundAddress">
+            <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="fundAddress">
               Address to fund
             </label>
             <input
-              className="-tracking-[2%] h-[34px] rounded-full border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+              className="h-[34px] rounded-full border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
               autoCapitalize="none"
               autoComplete="off"
               autoCorrect="off"
diff --git a/src/components/guides/steps/payments/PayWithFeeToken.tsx b/src/components/guides/steps/payments/PayWithFeeToken.tsx
index ecb50101..f4b5a896 100644
--- a/src/components/guides/steps/payments/PayWithFeeToken.tsx
+++ b/src/components/guides/steps/payments/PayWithFeeToken.tsx
@@ -95,7 +95,7 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -106,7 +106,7 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -119,7 +119,7 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
         <div className="mx-6 flex flex-col gap-3 pb-4">
           <div className="border-gray4 border-s-2 ps-5">
             {/* Token info display */}
-            <div className="-tracking-[1%] mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px]">
+            <div className="mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px] -tracking-[1%]">
               <div className="flex flex-col gap-1.5">
                 <div className="flex items-center justify-between">
                   <span className="font-medium text-gray10">Payment Token: AlphaUSD</span>
@@ -147,11 +147,11 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
 
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Recipient address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="recipient"
@@ -162,11 +162,11 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="memo"
@@ -181,7 +181,7 @@ export function PayWithFeeToken(props: DemoStepProps & { feeToken?: Address }) {
                 disabled={!active}
                 onClick={handleTransfer}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {sendPayment.isPending ? 'Sending...' : 'Send'}
               </Button>
diff --git a/src/components/guides/steps/payments/PayWithIssuedToken.tsx b/src/components/guides/steps/payments/PayWithIssuedToken.tsx
index fce4b099..da0020b2 100644
--- a/src/components/guides/steps/payments/PayWithIssuedToken.tsx
+++ b/src/components/guides/steps/payments/PayWithIssuedToken.tsx
@@ -93,7 +93,7 @@ export function PayWithIssuedToken(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -104,7 +104,7 @@ export function PayWithIssuedToken(props: DemoStepProps) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -117,7 +117,7 @@ export function PayWithIssuedToken(props: DemoStepProps) {
         <div className="mx-6 flex flex-col gap-3 pb-4">
           <div className="border-gray4 border-s-2 ps-5">
             {/* Token info display */}
-            <div className="-tracking-[1%] mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px]">
+            <div className="mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px] -tracking-[1%]">
               <div className="flex flex-col gap-1.5">
                 <div className="flex items-center justify-between">
                   <span className="font-medium text-gray10">Payment Token: AlphaUSD</span>
@@ -136,11 +136,11 @@ export function PayWithIssuedToken(props: DemoStepProps) {
 
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Recipient address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="recipient"
@@ -151,11 +151,11 @@ export function PayWithIssuedToken(props: DemoStepProps) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="memo"
@@ -170,7 +170,7 @@ export function PayWithIssuedToken(props: DemoStepProps) {
                 disabled={!active}
                 onClick={handleTransfer}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {sendPayment.isPending ? 'Sending...' : 'Send'}
               </Button>
diff --git a/src/components/guides/steps/payments/SendParallelPayments.tsx b/src/components/guides/steps/payments/SendParallelPayments.tsx
index 2f0ce8a6..d111fd84 100644
--- a/src/components/guides/steps/payments/SendParallelPayments.tsx
+++ b/src/components/guides/steps/payments/SendParallelPayments.tsx
@@ -145,7 +145,7 @@ export function SendParallelPayments(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -162,7 +162,7 @@ export function SendParallelPayments(props: DemoStepProps) {
             disabled={!(address && balance && balance >= parseUnits('100', 6))}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -177,11 +177,11 @@ export function SendParallelPayments(props: DemoStepProps) {
             <div className="mt-2 flex gap-3">
               <div className="flex flex-1 flex-col gap-2">
                 <div className="flex flex-col">
-                  <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient1">
+                  <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient1">
                     Recipient 1
                   </label>
                   <input
-                    className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 disabled:cursor-not-allowed disabled:opacity-60 dark:text-white"
+                    className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 disabled:cursor-not-allowed disabled:opacity-60 dark:text-white"
                     data-1p-ignore
                     type="text"
                     id="recipient1"
@@ -192,11 +192,11 @@ export function SendParallelPayments(props: DemoStepProps) {
                   />
                 </div>
                 <div className="flex flex-col">
-                  <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient2">
+                  <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient2">
                     Recipient 2
                   </label>
                   <input
-                    className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 disabled:cursor-not-allowed disabled:opacity-60 dark:text-white"
+                    className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 disabled:cursor-not-allowed disabled:opacity-60 dark:text-white"
                     data-1p-ignore
                     type="text"
                     id="recipient2"
@@ -215,7 +215,7 @@ export function SendParallelPayments(props: DemoStepProps) {
                   disabled={!(address && balance && balance >= parseUnits('100', 6)) || isSending}
                   onClick={handleSendParallel}
                   type="button"
-                  className="-tracking-[2%] font-normal text-[14px]"
+                  className="font-normal text-[14px] -tracking-[2%]"
                 >
                   {isSending ? 'Sending both...' : 'Send both payments'}
                 </Button>
diff --git a/src/components/guides/steps/payments/SendPayment.tsx b/src/components/guides/steps/payments/SendPayment.tsx
index bbfc3139..3f64a50e 100644
--- a/src/components/guides/steps/payments/SendPayment.tsx
+++ b/src/components/guides/steps/payments/SendPayment.tsx
@@ -68,7 +68,7 @@ export function SendPayment(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -85,7 +85,7 @@ export function SendPayment(props: DemoStepProps) {
             disabled={!(address && balance && balance > 0n)}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -99,11 +99,11 @@ export function SendPayment(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Recipient address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   id="recipient"
                   type="text"
@@ -114,11 +114,11 @@ export function SendPayment(props: DemoStepProps) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className={`-tracking-[2%] h-[34px] rounded-[50px] border px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white ${memoError ? 'border-red-500' : 'border-gray4'}`}
+                  className={`h-[34px] rounded-[50px] border px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white ${memoError ? 'border-red-500' : 'border-gray4'}`}
                   data-1p-ignore
                   id="memo"
                   type="text"
@@ -137,7 +137,7 @@ export function SendPayment(props: DemoStepProps) {
                 disabled={!(address && balance && balance > 0n && isValidRecipient) || !!memoError}
                 onClick={handleTransfer}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {sendPayment.isPending ? 'Sending...' : 'Send'}
               </Button>
diff --git a/src/components/guides/steps/payments/SendPaymentWithMemo.tsx b/src/components/guides/steps/payments/SendPaymentWithMemo.tsx
index a9a812c1..e9bf0e82 100644
--- a/src/components/guides/steps/payments/SendPaymentWithMemo.tsx
+++ b/src/components/guides/steps/payments/SendPaymentWithMemo.tsx
@@ -109,7 +109,7 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -126,7 +126,7 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
             disabled={!(address && balance && balance > 0n)}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -140,11 +140,11 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             <div className="mt-2 flex flex-col gap-2 pe-8">
               <div className="flex flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (e.g., customer ID, invoice number)
                 </label>
                 <input
-                  className={`-tracking-[2%] h-[34px] rounded-[50px] border px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white ${memoError ? 'border-red-500' : 'border-gray4'}`}
+                  className={`h-[34px] rounded-[50px] border px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white ${memoError ? 'border-red-500' : 'border-gray4'}`}
                   data-1p-ignore
                   type="text"
                   id="memo"
@@ -157,11 +157,11 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
               </div>
               <div className="flex flex-col gap-2 md:flex-row md:items-end">
                 <div className="flex flex-1 flex-col">
-                  <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                  <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                     Recipient address
                   </label>
                   <input
-                    className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                    className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                     data-1p-ignore
                     type="text"
                     id="recipient"
@@ -188,7 +188,7 @@ export function SendPaymentWithMemo(props: DemoStepProps) {
                   }
                   onClick={handleTransfer}
                   type="button"
-                  className="-tracking-[2%] font-normal text-[14px]"
+                  className="font-normal text-[14px] -tracking-[2%]"
                 >
                   {sendPayment.isPending ? 'Sending...' : 'Send with Memo'}
                 </Button>
diff --git a/src/components/guides/steps/payments/SponsorUserFees.tsx b/src/components/guides/steps/payments/SponsorUserFees.tsx
index 456aa636..db8e4ec4 100644
--- a/src/components/guides/steps/payments/SponsorUserFees.tsx
+++ b/src/components/guides/steps/payments/SponsorUserFees.tsx
@@ -61,7 +61,7 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(false)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             Cancel
@@ -72,7 +72,7 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
             disabled={!active}
             onClick={() => setExpanded(true)}
             type="button"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
           >
             Enter details
           </Button>
@@ -84,7 +84,7 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
       {expanded && (
         <div className="mx-6 flex flex-col gap-3 pb-4">
           <div className="border-gray4 border-s-2 ps-5">
-            <div className="-tracking-[1%] mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px]">
+            <div className="mt-2 mb-3 rounded-lg bg-gray2 p-3 text-[13px] -tracking-[1%]">
               <div className="flex flex-col gap-1.5">
                 <div className="flex items-center justify-between">
                   <span className="font-medium text-gray10">Payment Token: AlphaUSD</span>
@@ -99,11 +99,11 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
 
             <div className="mt-2 flex flex-col gap-2 pe-8 md:flex-row md:items-end">
               <div className="flex flex-2 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="recipient">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="recipient">
                   Recipient address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="recipient"
@@ -114,11 +114,11 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
                 />
               </div>
               <div className="flex flex-1 flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="memo">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="memo">
                   Memo (optional)
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-[50px] border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   data-1p-ignore
                   type="text"
                   id="memo"
@@ -133,7 +133,7 @@ export function SendRelayerSponsoredPayment(props: DemoStepProps) {
                 disabled={!(active && isValidRecipient)}
                 onClick={handleTransfer}
                 type="button"
-                className="-tracking-[2%] font-normal text-[14px]"
+                className="font-normal text-[14px] -tracking-[2%]"
               >
                 {sendPayment.isPending ? 'Sending...' : 'Send'}
               </Button>
diff --git a/src/components/guides/steps/rewards/ClaimReward.tsx b/src/components/guides/steps/rewards/ClaimReward.tsx
index b224c7c8..028c8727 100644
--- a/src/components/guides/steps/rewards/ClaimReward.tsx
+++ b/src/components/guides/steps/rewards/ClaimReward.tsx
@@ -64,7 +64,7 @@ export function ClaimReward(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(!expanded)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             {expanded ? 'Hide' : 'Show'}
@@ -89,7 +89,7 @@ export function ClaimReward(props: DemoStepProps) {
       {claim.data && expanded && (
         <div className="ml-6 flex flex-col gap-3 py-4">
           <div className="border-gray4 border-s-2 ps-5">
-            <div className="-tracking-[2%] text-[13px] text-gray9">
+            <div className="text-[13px] text-gray9 -tracking-[2%]">
               Successfully claimed {REWARD_AMOUNT} {metadata?.name ?? 'token'}.
             </div>
             <ExplorerLink hash={claim.data.receipt.transactionHash} />
diff --git a/src/components/guides/steps/rewards/OptInToRewards.tsx b/src/components/guides/steps/rewards/OptInToRewards.tsx
index 7cff0ce3..3104349d 100644
--- a/src/components/guides/steps/rewards/OptInToRewards.tsx
+++ b/src/components/guides/steps/rewards/OptInToRewards.tsx
@@ -59,7 +59,7 @@ export function OptInToRewards(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(!expanded)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             {expanded ? 'Hide' : 'Show'}
@@ -85,7 +85,7 @@ export function OptInToRewards(props: DemoStepProps) {
       {setRecipient.data && expanded && (
         <div className="ml-6 flex flex-col gap-3 py-4">
           <div className="border-gray4 border-s-2 ps-5">
-            <div className="-tracking-[2%] text-[13px] text-gray9">
+            <div className="text-[13px] text-gray9 -tracking-[2%]">
               Successfully opted in to rewards.
             </div>
             <ExplorerLink hash={setRecipient.data.receipt.transactionHash} />
diff --git a/src/components/guides/steps/rewards/StartReward.tsx b/src/components/guides/steps/rewards/StartReward.tsx
index 4c64fb7f..c462de1c 100644
--- a/src/components/guides/steps/rewards/StartReward.tsx
+++ b/src/components/guides/steps/rewards/StartReward.tsx
@@ -75,7 +75,7 @@ export function StartReward(props: DemoStepProps) {
           <Button
             variant="default"
             onClick={() => setExpanded(!expanded)}
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             type="button"
           >
             {expanded ? 'Hide' : 'Show'}
@@ -101,7 +101,7 @@ export function StartReward(props: DemoStepProps) {
       {start.data && expanded && (
         <div className="ml-6 flex flex-col gap-3 py-4">
           <div className="border-gray4 border-s-2 ps-5">
-            <div className="-tracking-[2%] text-[13px] text-gray9">
+            <div className="text-[13px] text-gray9 -tracking-[2%]">
               Successfully started reward distribution.
             </div>
             <ExplorerLink hash={start.data.receipt.transactionHash} />
diff --git a/src/components/guides/steps/wallet/AddFundsToWallet.tsx b/src/components/guides/steps/wallet/AddFundsToWallet.tsx
index b6867192..00d0b9fa 100644
--- a/src/components/guides/steps/wallet/AddFundsToWallet.tsx
+++ b/src/components/guides/steps/wallet/AddFundsToWallet.tsx
@@ -71,7 +71,7 @@ export function AddFundsToWallet(props: DemoStepProps) {
         <Button
           disabled={!hasNonWebAuthnWallet || fundAccount.isPending}
           variant="default"
-          className="-tracking-[2%] font-normal text-[14px]"
+          className="font-normal text-[14px] -tracking-[2%]"
           onClick={() => fundAccount.mutate()}
           type="button"
         >
@@ -82,7 +82,7 @@ export function AddFundsToWallet(props: DemoStepProps) {
       <Button
         disabled={!hasNonWebAuthnWallet || fundAccount.isPending}
         variant={hasNonWebAuthnWallet ? 'accent' : 'default'}
-        className="-tracking-[2%] font-normal text-[14px]"
+        className="font-normal text-[14px] -tracking-[2%]"
         type="button"
         onClick={() => fundAccount.mutate()}
       >
diff --git a/src/components/guides/steps/wallet/ConnectWallet.tsx b/src/components/guides/steps/wallet/ConnectWallet.tsx
index a13b57e0..4567db6c 100644
--- a/src/components/guides/steps/wallet/ConnectWallet.tsx
+++ b/src/components/guides/steps/wallet/ConnectWallet.tsx
@@ -41,7 +41,7 @@ export function ConnectWallet(props: DemoStepProps) {
   const actions = React.useMemo(() => {
     if (!injectedConnectors.length) {
       return (
-        <div className="-tracking-[2%] flex items-center text-[14px]">
+        <div className="flex items-center text-[14px] -tracking-[2%]">
           No browser wallets found.
         </div>
       )
@@ -83,7 +83,7 @@ export function ConnectWallet(props: DemoStepProps) {
           </Button>
           <Button
             variant="destructive"
-            className="-tracking-[2%] font-normal text-[14px]"
+            className="font-normal text-[14px] -tracking-[2%]"
             onClick={() => disconnect.disconnect({ connector: walletConnector })}
             type="button"
           >
@@ -112,7 +112,7 @@ export function ConnectWallet(props: DemoStepProps) {
           </Button>
         )}
         {switchChain.isSuccess && (
-          <div className="-tracking-[2%] flex items-center font-normal text-[14px]">
+          <div className="flex items-center font-normal text-[14px] -tracking-[2%]">
             Added Tempo to {connector?.name ?? 'Wallet'}!
           </div>
         )}
diff --git a/src/components/guides/steps/wallet/SetFeeToken.tsx b/src/components/guides/steps/wallet/SetFeeToken.tsx
index 7eb89941..20d57419 100644
--- a/src/components/guides/steps/wallet/SetFeeToken.tsx
+++ b/src/components/guides/steps/wallet/SetFeeToken.tsx
@@ -131,7 +131,7 @@ export function SetFeeToken(props: DemoStepProps) {
     return (
       <div className="flex flex-wrap items-center gap-2">
         <select
-          className="-tracking-[2%] h-[32px] rounded-full border border-gray4 bg-white px-3 font-medium text-[14px] text-black dark:bg-transparent dark:text-white"
+          className="h-[32px] rounded-full border border-gray4 bg-white px-3 font-medium text-[14px] text-black -tracking-[2%] dark:bg-transparent dark:text-white"
           value={selectedFeeToken}
           onChange={(event) => {
             const value = event.target.value as FeeTokenOption['value']
@@ -172,11 +172,11 @@ export function SetFeeToken(props: DemoStepProps) {
           <div className="border-gray4 border-s-2 ps-5">
             {selectedOption.value === 'other' && (
               <div className="mt-2 flex flex-col">
-                <label className="-tracking-[1%] text-[11px] text-gray9" htmlFor="customFeeToken">
+                <label className="text-[11px] text-gray9 -tracking-[1%]" htmlFor="customFeeToken">
                   Custom fee token address
                 </label>
                 <input
-                  className="-tracking-[2%] h-[34px] rounded-full border border-gray4 px-3.25 font-normal text-[14px] text-black placeholder-gray9 dark:text-white"
+                  className="h-[34px] rounded-full border border-gray4 px-3.25 font-normal text-[14px] text-black -tracking-[2%] placeholder-gray9 dark:text-white"
                   autoCapitalize="none"
                   autoComplete="off"
                   autoCorrect="off"

From b03ec98ccab7a0b509831fd4096f4c9c69cd7fd1 Mon Sep 17 00:00:00 2001
From: tmm <tmm@tmm.dev>
Date: Wed, 4 Feb 2026 14:03:20 -0500
Subject: [PATCH 4/4] test: up

---
 e2e/create-a-stablecoin.test.ts               |  6 +++--
 e2e/distribute-rewards.test.ts                | 13 +++++++----
 e2e/executing-swaps.test.ts                   |  8 +++----
 e2e/manage-stablecoin.test.ts                 | 11 +++++----
 e2e/mint-stablecoins.test.ts                  | 11 +++++----
 e2e/use-for-fees.test.ts                      | 23 +++++++++++--------
 .../guides/steps/rewards/StartReward.tsx      |  5 +++-
 7 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/e2e/create-a-stablecoin.test.ts b/e2e/create-a-stablecoin.test.ts
index 1994eb71..de36c52f 100644
--- a/e2e/create-a-stablecoin.test.ts
+++ b/e2e/create-a-stablecoin.test.ts
@@ -39,15 +39,17 @@ test('create a stablecoin', async ({ page }) => {
   })
 
   // Step 3: Fill in token details and deploy
-  const nameInput = page.getByPlaceholder('demoUSD').first()
+  // Use label-based selectors to ensure we're filling the right inputs in the demo form
+  const nameInput = page.getByLabel('Token name').first()
   await expect(nameInput).toBeVisible()
   await nameInput.fill('TestUSD')
 
-  const symbolInput = page.getByPlaceholder('DEMO').first()
+  const symbolInput = page.getByLabel('Token symbol').first()
   await expect(symbolInput).toBeVisible()
   await symbolInput.fill('TEST')
 
   const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await expect(deployButton).toBeVisible()
   await deployButton.click()
 
   // Wait for success - View receipt link
diff --git a/e2e/distribute-rewards.test.ts b/e2e/distribute-rewards.test.ts
index dcfcf327..39ae4275 100644
--- a/e2e/distribute-rewards.test.ts
+++ b/e2e/distribute-rewards.test.ts
@@ -37,14 +37,17 @@ test('distribute rewards', async ({ page }) => {
   })
 
   // Step 3: Create a token
-  const nameInput = page.getByPlaceholder('demoUSD').first()
+  // Use label-based selectors to ensure we're filling the right inputs in the demo form
+  const nameInput = page.getByLabel('Token name').first()
   await expect(nameInput).toBeVisible()
   await nameInput.fill('RewardTestUSD')
 
-  const symbolInput = page.getByPlaceholder('DEMO').first()
+  const symbolInput = page.getByLabel('Token symbol').first()
+  await expect(symbolInput).toBeVisible()
   await symbolInput.fill('REWARD')
 
   const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await expect(deployButton).toBeVisible()
   await deployButton.click()
 
   await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
@@ -63,8 +66,8 @@ test('distribute rewards', async ({ page }) => {
     timeout: 90000,
   })
 
-  // Step 5: Mint tokens
-  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).nth(1)
+  // Step 5: Mint tokens (after grant completes, Enter details button is the first visible one)
+  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
   await expect(mintEnterDetails).toBeVisible()
   await mintEnterDetails.click()
 
@@ -85,7 +88,7 @@ test('distribute rewards', async ({ page }) => {
   })
 
   // Step 7: Start reward
-  const startButton = page.getByRole('button', { name: 'Start' }).first()
+  const startButton = page.getByRole('button', { name: 'Start Reward' }).first()
   await expect(startButton).toBeVisible()
   await startButton.click()
 
diff --git a/e2e/executing-swaps.test.ts b/e2e/executing-swaps.test.ts
index 25d1d3d7..264d02d2 100644
--- a/e2e/executing-swaps.test.ts
+++ b/e2e/executing-swaps.test.ts
@@ -36,10 +36,10 @@ test('executing swaps', async ({ page }) => {
     timeout: 90000,
   })
 
-  // Step 3: Execute a swap
-  const swapButton = page.getByRole('button', { name: 'Swap' }).first()
-  await expect(swapButton).toBeVisible()
-  await swapButton.click()
+  // Step 3: Execute a swap (Buy AlphaUSD with BetaUSD)
+  const buyButton = page.getByRole('button', { name: 'Buy' }).first()
+  await expect(buyButton).toBeVisible()
+  await buyButton.click()
 
   // Wait for swap receipt
   await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 90000 })
diff --git a/e2e/manage-stablecoin.test.ts b/e2e/manage-stablecoin.test.ts
index 9e1cb3ca..8aa13c4d 100644
--- a/e2e/manage-stablecoin.test.ts
+++ b/e2e/manage-stablecoin.test.ts
@@ -37,14 +37,17 @@ test('manage stablecoin - grant and revoke roles', async ({ page }) => {
   })
 
   // Step 3: Create a token
-  const nameInput = page.getByPlaceholder('demoUSD').first()
+  // Use label-based selectors to ensure we're filling the right inputs in the demo form
+  const nameInput = page.getByLabel('Token name').first()
   await expect(nameInput).toBeVisible()
   await nameInput.fill('ManageTestUSD')
 
-  const symbolInput = page.getByPlaceholder('DEMO').first()
+  const symbolInput = page.getByLabel('Token symbol').first()
+  await expect(symbolInput).toBeVisible()
   await symbolInput.fill('MANAGE')
 
   const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await expect(deployButton).toBeVisible()
   await deployButton.click()
 
   await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
@@ -64,8 +67,8 @@ test('manage stablecoin - grant and revoke roles', async ({ page }) => {
     timeout: 90000,
   })
 
-  // Step 5: Revoke issuer role
-  const revokeEnterDetails = page.getByRole('button', { name: 'Enter details' }).nth(1)
+  // Step 5: Revoke issuer role (now the first visible Enter details)
+  const revokeEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
   await expect(revokeEnterDetails).toBeVisible()
   await revokeEnterDetails.click()
 
diff --git a/e2e/mint-stablecoins.test.ts b/e2e/mint-stablecoins.test.ts
index 9c322dd9..05c2ac98 100644
--- a/e2e/mint-stablecoins.test.ts
+++ b/e2e/mint-stablecoins.test.ts
@@ -37,14 +37,17 @@ test('mint stablecoins', async ({ page }) => {
   })
 
   // Step 3: Create a token (fill form and deploy)
-  const nameInput = page.getByPlaceholder('demoUSD').first()
+  // Use label-based selectors to ensure we're filling the right inputs in the demo form
+  const nameInput = page.getByLabel('Token name').first()
   await expect(nameInput).toBeVisible()
   await nameInput.fill('MintTestUSD')
 
-  const symbolInput = page.getByPlaceholder('DEMO').first()
+  const symbolInput = page.getByLabel('Token symbol').first()
+  await expect(symbolInput).toBeVisible()
   await symbolInput.fill('MINT')
 
   const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await expect(deployButton).toBeVisible()
   await deployButton.click()
 
   // Wait for token to be created (View receipt appears)
@@ -66,8 +69,8 @@ test('mint stablecoins', async ({ page }) => {
     timeout: 90000,
   })
 
-  // Step 5: Mint tokens - click "Enter details" then "Mint"
-  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).nth(1)
+  // Step 5: Mint tokens - click "Enter details" then "Mint" (now the first visible Enter details)
+  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
   await expect(mintEnterDetails).toBeVisible()
   await mintEnterDetails.click()
 
diff --git a/e2e/use-for-fees.test.ts b/e2e/use-for-fees.test.ts
index 74f64534..5a6df28d 100644
--- a/e2e/use-for-fees.test.ts
+++ b/e2e/use-for-fees.test.ts
@@ -37,14 +37,17 @@ test('use stablecoin for fees', async ({ page }) => {
   })
 
   // Step 3: Create a token
-  const nameInput = page.getByPlaceholder('demoUSD').first()
+  // Use label-based selectors to ensure we're filling the right inputs in the demo form
+  const nameInput = page.getByLabel('Token name').first()
   await expect(nameInput).toBeVisible()
   await nameInput.fill('FeeTestUSD')
 
-  const symbolInput = page.getByPlaceholder('DEMO').first()
+  const symbolInput = page.getByLabel('Token symbol').first()
+  await expect(symbolInput).toBeVisible()
   await symbolInput.fill('FEE')
 
   const deployButton = page.getByRole('button', { name: 'Deploy' }).first()
+  await expect(deployButton).toBeVisible()
   await deployButton.click()
 
   await expect(page.getByRole('link', { name: 'View receipt' }).first()).toBeVisible({
@@ -63,8 +66,8 @@ test('use stablecoin for fees', async ({ page }) => {
     timeout: 90000,
   })
 
-  // Step 5: Mint tokens
-  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).nth(1)
+  // Step 5: Mint tokens (after grant completes, Enter details button is the first visible one)
+  const mintEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
   await expect(mintEnterDetails).toBeVisible()
   await mintEnterDetails.click()
 
@@ -75,17 +78,17 @@ test('use stablecoin for fees', async ({ page }) => {
     timeout: 90000,
   })
 
-  // Step 6: Mint fee AMM liquidity
-  const mintLiquidityButton = page.getByRole('button', { name: 'Mint liquidity' }).first()
-  await expect(mintLiquidityButton).toBeVisible()
-  await mintLiquidityButton.click()
+  // Step 6: Add fee AMM liquidity
+  const addLiquidityButton = page.getByRole('button', { name: 'Add Liquidity' }).first()
+  await expect(addLiquidityButton).toBeVisible()
+  await addLiquidityButton.click()
 
   await expect(page.getByRole('link', { name: 'View receipt' }).nth(3)).toBeVisible({
     timeout: 90000,
   })
 
-  // Step 7: Send payment using token as fee
-  const payEnterDetails = page.getByRole('button', { name: 'Enter details' }).nth(2)
+  // Step 7: Send payment using token as fee (now the only Enter details button visible)
+  const payEnterDetails = page.getByRole('button', { name: 'Enter details' }).first()
   await expect(payEnterDetails).toBeVisible()
   await payEnterDetails.click()
 
diff --git a/src/components/guides/steps/rewards/StartReward.tsx b/src/components/guides/steps/rewards/StartReward.tsx
index c462de1c..cc596e44 100644
--- a/src/components/guides/steps/rewards/StartReward.tsx
+++ b/src/components/guides/steps/rewards/StartReward.tsx
@@ -13,7 +13,7 @@ import { REWARD_AMOUNT, REWARD_RECIPIENT_UNSET } from './Constants'
 export function StartReward(props: DemoStepProps) {
   const { stepNumber, last = false } = props
   const { address } = useConnection()
-  const { getData } = useDemoContext()
+  const { getData, setData } = useDemoContext()
   const queryClient = useQueryClient()
   const tokenAddress = getData('tokenAddress')
 
@@ -35,6 +35,9 @@ export function StartReward(props: DemoStepProps) {
 
   const start = Hooks.reward.useDistributeSync({
     mutation: {
+      onSuccess() {
+        setData('rewardId', 1n)
+      },
       onSettled() {
         queryClient.refetchQueries({ queryKey: ['getUserRewardInfo'] })
         queryClient.refetchQueries({ queryKey: ['getBalance'] })