diff --git a/e2e/specs/stateless/extendNames.spec.ts b/e2e/specs/stateless/extendNames.spec.ts
index fb2e7f9d8..745ce4b69 100644
--- a/e2e/specs/stateless/extendNames.spec.ts
+++ b/e2e/specs/stateless/extendNames.spec.ts
@@ -82,12 +82,16 @@ test('should be able to extend multiple names on the address page', async ({
   await page.waitForLoadState('networkidle')
   await expect(page.getByTestId('invoice-item-0-amount')).not.toBeEmpty()
   await expect(page.getByTestId('invoice-item-1-amount')).not.toBeEmpty()
-  await expect(page.getByTestId('invoice-total')).not.toBeEmpty()
+  await expect(page.getByTestId('invoice-total')).not.toHaveText('0.0000 ETH')
 
-  page.locator('button:has-text("Next")').waitFor({ state: 'visible' })
-  await page.locator('button:has-text("Next")').click()
-  await page.waitForLoadState('networkidle')
+  console.log(await page.getByTestId('invoice-total').textContent())
 
+  // await page.locator('button:has-text("Next")').waitFor({ state: 'visible' })
+  // await page.locator('button:has-text("Next")').click()
+  // await page.waitForLoadState('networkidle')
+  await page.getByTestId('extend-names-confirm').click()
+
+  await expect(transactionModal.transactionModal).toBeVisible({ timeout: 10000 })
   await transactionModal.autoComplete()
   await page.waitForLoadState('networkidle')
 
@@ -109,6 +113,105 @@ test('should be able to extend multiple names on the address page', async ({
   }
 })
 
+test('should be able to extend multiple names in grace period on the address page', async ({
+  page,
+  accounts,
+  login,
+  subgraph,
+  makePageObject,
+  makeName,
+  time,
+}) => {
+  // Generating names in not neccessary but we want to make sure that there are names to extend
+  await makeName([
+    {
+      label: 'extend-legacy',
+      type: 'legacy',
+      owner: 'user2',
+      duration: -24 * 60 * 60,
+    },
+    {
+      label: 'wrapped',
+      type: 'wrapped',
+      owner: 'user2',
+      duration: -24 * 60 * 60,
+    },
+  ])
+
+  const address = accounts.getAddress('user2')
+  const addresPage = makePageObject('AddressPage')
+  const transactionModal = makePageObject('TransactionModal')
+
+  await addresPage.goto(address)
+  await login.connect()
+
+  await addresPage.selectToggle.click()
+
+  // await page.pause()
+  await expect(await page.locator('.name-detail-item').count()).toBeGreaterThan(0)
+  const nameItems = await page.locator('.name-detail-item').all()
+  const nameItemTestIds = await Promise.all(
+    nameItems.map((item) => item.getAttribute('data-testid')),
+  )
+  const extendableNameItems = nameItemTestIds
+    .filter((testid): testid is string => !!testid)
+    .map((testid) => testid.replace('name-item-', ''))
+    .filter((name) => {
+      const nameParts = name?.split('.') ?? []
+      return nameParts.length === 2 && nameParts[1] === 'eth'
+    })
+
+  const timestampDict: { [key: string]: number } = {}
+  for (const name of extendableNameItems) {
+    const timestamp = await addresPage.getTimestamp(name)
+    timestampDict[name] = timestamp
+  }
+  await addresPage.extendNamesButton.click()
+
+  // warning message
+  await expect(page.getByText('You do not own all these names')).toBeVisible()
+  await page.getByTestId('extend-names-confirm').click()
+
+  // name list
+  await expect(page.getByText(`Extend ${extendableNameItems.length} Names`)).toBeVisible()
+  await page.locator('button:has-text("Next")').waitFor({ state: 'visible' })
+  await page.locator('button:has-text("Next")').click()
+
+  // check the invoice details
+  // TODO: Reimplement when date duration bug is fixed
+  // await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
+  await expect(page.getByTestId('plus-minus-control-label')).toHaveText('1 year')
+  await page.getByTestId('plus-minus-control-plus').click()
+  await expect(page.getByTestId('plus-minus-control-label')).toHaveText('2 years')
+  await page.getByTestId('plus-minus-control-plus').click()
+  await expect(page.getByTestId('plus-minus-control-label')).toHaveText('3 years')
+  await expect(page.getByTestId('invoice-item-0-amount')).not.toBeEmpty()
+  await expect(page.getByTestId('invoice-item-1-amount')).not.toBeEmpty()
+  await expect(page.getByTestId('invoice-total')).not.toHaveText('0.0000 ETH')
+
+  // increment and save
+  await page.getByTestId('extend-names-confirm').click()
+  await expect(transactionModal.transactionModal).toBeVisible({ timeout: 10000 })
+  await transactionModal.autoComplete()
+
+  await expect(page.getByText('Your "Extend names" transaction was successful')).toBeVisible({
+    timeout: 10000,
+  })
+  await subgraph.sync()
+
+  // Should be able to remove this after useQuery is fixed. Using to force a refetch.
+  await time.increaseTime({ seconds: 15 })
+  await page.reload()
+  await page.waitForLoadState('networkidle')
+  for (const name of extendableNameItems) {
+    const label = name.replace('.eth', '')
+    await addresPage.search(label)
+    await expect(addresPage.getNameRow(name)).toBeVisible({ timeout: 5000 })
+    await expect(await addresPage.getTimestamp(name)).not.toBe(timestampDict[name])
+    await expect(await addresPage.getTimestamp(name)).toBe(timestampDict[name] + 31536000000 * 3)
+  }
+})
+
 test('should be able to extend a single unwrapped name from profile', async ({
   page,
   login,
diff --git a/package.json b/package.json
index d223d48ec..f7556d335 100644
--- a/package.json
+++ b/package.json
@@ -116,7 +116,7 @@
     "@nomiclabs/hardhat-ethers": "npm:hardhat-deploy-ethers@^0.3.0-beta.13",
     "@openzeppelin/contracts": "^4.7.3",
     "@openzeppelin/test-helpers": "^0.5.16",
-    "@playwright/test": "^1.48.0",
+    "@playwright/test": "^1.48.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8bd38f822..aafa93edd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -205,8 +205,8 @@ importers:
         specifier: ^0.5.16
         version: 0.5.16(bufferutil@4.0.8)(encoding@0.1.13)(utf-8-validate@5.0.10)
       '@playwright/test':
-        specifier: ^1.48.0
-        version: 1.48.0
+        specifier: ^1.48.2
+        version: 1.48.2
       '@testing-library/jest-dom':
         specifier: ^6.4.2
         version: 6.4.5(@types/jest@29.5.12)(vitest@2.0.5(@types/node@18.19.33)(jsdom@24.1.0(bufferutil@4.0.8)(canvas@2.11.2(encoding@0.1.13))(utf-8-validate@5.0.10))(terser@5.31.5))
@@ -296,7 +296,7 @@ importers:
         version: 0.3.9
       eslint-plugin-import:
         specifier: ^2.28.1
-        version: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0)
+        version: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0)
       eslint-plugin-jsx-a11y:
         specifier: ^6.7.1
         version: 6.8.0(eslint@8.50.0)
@@ -424,6 +424,48 @@ importers:
         specifier: ^1.0.0-pre.53
         version: 1.0.0-pre.53
 
+  .yalc/@ensdomains/ens-test-env:
+    dependencies:
+      '@ethersproject/wallet':
+        specifier: ^5.6.0
+        version: 5.7.0
+      ansi-colors:
+        specifier: ^4.1.1
+        version: 4.1.3
+      cli-progress:
+        specifier: ^3.10.0
+        version: 3.12.0
+      commander:
+        specifier: ^9.3.0
+        version: 9.5.0
+      concurrently:
+        specifier: ^7.1.0
+        version: 7.6.0
+      docker-compose:
+        specifier: ^0.24.7
+        version: 0.24.8
+      dotenv:
+        specifier: ^16.0.1
+        version: 16.4.5
+      js-yaml:
+        specifier: ^4.1.0
+        version: 4.1.0
+      lz4:
+        specifier: ^0.6.5
+        version: 0.6.5
+      progress-stream:
+        specifier: ^2.0.0
+        version: 2.0.0
+      tar-fs:
+        specifier: ^2.1.1
+        version: 2.1.1
+      viem:
+        specifier: ^2.21.37
+        version: 2.21.40(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8)
+      wait-on:
+        specifier: ^6.0.1
+        version: 6.0.1
+
 packages:
 
   '@adobe/css-tools@4.3.3':
@@ -435,6 +477,9 @@ packages:
   '@adraffy/ens-normalize@1.10.1':
     resolution: {integrity: sha512-96Z2IP3mYmF1Xg2cDm8f1gWGf/HUVedQ3FMifV4kG/PQ4yEP51xDtRAEfhVNt5f/uzpNkZHwWQuUcu6D6K+Ekw==}
 
+  '@adraffy/ens-normalize@1.11.0':
+    resolution: {integrity: sha512-/3DDPKHqqIqxUULp8yP4zODUY1i+2xvVWsv8A79xGWdCAG+8sb0hRh0Rk2QyOJUnnbyPUAZYcpBuRe3nS2OIUg==}
+
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -2327,6 +2372,10 @@ packages:
   '@noble/curves@1.4.0':
     resolution: {integrity: sha512-p+4cb332SFCrReJkCYe8Xzm0OWi4Jji5jVdIZRL/PmacmDkFNw6MrrV+gGpiPxLHbV+zKFRywUWbaseT+tZRXg==}
 
+  '@noble/curves@1.6.0':
+    resolution: {integrity: sha512-TlaHRXDehJuRNR9TfZDNQ45mMEd5dwUwmicsafcIX4SsNiqnCHKjE/1alYPd/lDRVhxdhUAlv8uEhMCI5zjIJQ==}
+    engines: {node: ^14.21.3 || >=16}
+
   '@noble/hashes@1.2.0':
     resolution: {integrity: sha512-FZfhjEDbT5GRswV3C6uvLPHMiVD6lQBmpoX5+eSiPaMTXte/IKqI5dykDxzZB/WBeK/CDuQRBWarPdi3FNY2zQ==}
 
@@ -2338,6 +2387,10 @@ packages:
     resolution: {integrity: sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==}
     engines: {node: '>= 16'}
 
+  '@noble/hashes@1.5.0':
+    resolution: {integrity: sha512-1j6kQFb7QRru7eKN3ZDvRcP13rugwdxZqCjbiAVZfIJwgj2A65UmT4TgARXGlXgnRkORLTDTrO19ZErt7+QXgA==}
+    engines: {node: ^14.21.3 || >=16}
+
   '@noble/secp256k1@1.7.1':
     resolution: {integrity: sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==}
 
@@ -2577,8 +2630,8 @@ packages:
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
-  '@playwright/test@1.48.0':
-    resolution: {integrity: sha512-W5lhqPUVPqhtc/ySvZI5Q8X2ztBOUgZ8LbAFy0JQgrXZs2xaILrUcNO3rQjwbLPfGK13+rZsDa1FpG+tqYkT5w==}
+  '@playwright/test@1.48.2':
+    resolution: {integrity: sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -2816,6 +2869,9 @@ packages:
   '@scure/base@1.1.6':
     resolution: {integrity: sha512-ok9AWwhcgYuGG3Zfhyqg+zwl+Wn5uE+dwC0NV/2qQkx4dABbb/bx96vWu8NSj+BNjjSjno+JRYRjle1jV08k3g==}
 
+  '@scure/base@1.1.9':
+    resolution: {integrity: sha512-8YKhl8GHiNI/pU2VMaofa2Tor7PJRAjwQLBBuilkJ9L5+13yVbC7JO/wS7piioAvPSwR3JKM1IJ/u4xQzbcXKg==}
+
   '@scure/bip32@1.1.5':
     resolution: {integrity: sha512-XyNh1rB0SkEqd3tXcXMi+Xe1fvg+kUIcoRIEujP1Jgv7DqW2r9lg3Ah0NkFaCs9sTkQAQA8kw7xiRXzENi9Rtw==}
 
@@ -2825,6 +2881,9 @@ packages:
   '@scure/bip32@1.4.0':
     resolution: {integrity: sha512-sVUpc0Vq3tXCkDGYVWGIZTRfnvu8LoTDaev7vbwh0omSvVORONr960MQWdKqJDCReIEmTj3PAr73O3aoxz7OPg==}
 
+  '@scure/bip32@1.5.0':
+    resolution: {integrity: sha512-8EnFYkqEQdnkuGBVpCzKxyIwDCBLDVj3oiX0EKUFre/tOjL/Hqba1D6n/8RcmaQy4f95qQFrO2A8Sr6ybh4NRw==}
+
   '@scure/bip39@1.1.1':
     resolution: {integrity: sha512-t+wDck2rVkh65Hmv280fYdVdY25J9YeEUIgn2LG1WM6gxFkGzcksoDiUkWVpVp3Oex9xGC68JU2dSbUfwZ2jPg==}
 
@@ -2834,6 +2893,9 @@ packages:
   '@scure/bip39@1.3.0':
     resolution: {integrity: sha512-disdg7gHuTDZtY+ZdkmLpPCk7fxZSu3gBiEGuoC1XYxv9cGx3Z6cpTggCgW6odSOOIXCiDjuGejW+aJKCY/pIQ==}
 
+  '@scure/bip39@1.4.0':
+    resolution: {integrity: sha512-BEEm6p8IueV/ZTfQLp/0vhw4NPnT9oWf5+28nvmeUICjP99f4vr2d+qc7AVGDDtwRep6ifR43Yed9ERVmiITzw==}
+
   '@sentry/browser@7.43.0':
     resolution: {integrity: sha512-NlRkBYKb9o5IQdGY8Ktps19Hz9RdSuqS1tlLC7Sjr+MqZqSHmhKq8MWJKciRynxBeMbeGt0smExi9BqpVQdCEg==}
     engines: {node: '>=8'}
@@ -3768,6 +3830,17 @@ packages:
       zod:
         optional: true
 
+  abitype@1.0.6:
+    resolution: {integrity: sha512-MMSqYh4+C/aVqI2RQaWqbvI4Kxo5cQV40WQ4QFtDnNzCkqChm8MuENhElmynZlO0qUy/ObkEUaXtKqYnx1Kp3A==}
+    peerDependencies:
+      typescript: '>=5.0.4'
+      zod: ^3 >=3.22.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      zod:
+        optional: true
+
   abort-controller@3.0.0:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
@@ -6547,6 +6620,11 @@ packages:
     peerDependencies:
       ws: '*'
 
+  isows@1.0.6:
+    resolution: {integrity: sha512-lPHCayd40oW98/I0uvgaHKWCSvkzY27LjWLbtzOm64yQ+G3Q5npjjbdppU65iZXkK1Zt+kH9pfegli0AYfwYYw==}
+    peerDependencies:
+      ws: '*'
+
   isstream@0.1.2:
     resolution: {integrity: sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==}
 
@@ -7909,13 +7987,13 @@ packages:
   pkg-types@1.1.1:
     resolution: {integrity: sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==}
 
-  playwright-core@1.48.0:
-    resolution: {integrity: sha512-RBvzjM9rdpP7UUFrQzRwR8L/xR4HyC1QXMzGYTbf1vjw25/ya9NRAVnXi/0fvFopjebvyPzsmoK58xxeEOaVvA==}
+  playwright-core@1.48.2:
+    resolution: {integrity: sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.48.0:
-    resolution: {integrity: sha512-qPqFaMEHuY/ug8o0uteYJSRfMGFikhUysk8ZvAtfKmUK3kc/6oNl/y3EczF8OFGYIi/Ex2HspMfzYArk6+XQSA==}
+  playwright@1.48.2:
+    resolution: {integrity: sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -9706,6 +9784,14 @@ packages:
       typescript:
         optional: true
 
+  viem@2.21.40:
+    resolution: {integrity: sha512-no/mE3l7B0mdUTtvO7z/cTLENttQ/M7+ombqFGXJqsQrxv9wrYsTIGpS3za+FA5a447hY+x9D8Wxny84q1zAaA==}
+    peerDependencies:
+      typescript: '>=5.0.4'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   vite-node@2.0.5:
     resolution: {integrity: sha512-LdsW4pxj0Ot69FAoXZ1yTnA9bjGohr2yNBU7QKRxpz8ITSkhuDl6h3zS/tvgz4qrNjeRnvrWeXQ8ZF7Um4W00Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -10012,6 +10098,9 @@ packages:
     resolution: {integrity: sha512-kgJvQZjkmjOEKimx/tJQsqWfRDPTTcBfYPa9XletxuHLpHcXdx67w8EFn5AW3eVxCutE9dTVHgGa9VYe8vgsEA==}
     engines: {node: '>=8.0.0'}
 
+  webauthn-p256@0.0.10:
+    resolution: {integrity: sha512-EeYD+gmIT80YkSIDb2iWq0lq2zbHo1CxHlQTeJ+KkCILWpVy3zASH3ByD4bopzfk0uCwXxLqKGLqp2W4O28VFA==}
+
   webauthn-p256@0.0.5:
     resolution: {integrity: sha512-drMGNWKdaixZNobeORVIqq7k5DsRC9FnG201K2QjeOoQLmtSDaSsVZdkg6n5jUALJKcAG++zBPJXmv6hy0nWFg==}
 
@@ -10255,6 +10344,18 @@ packages:
       utf-8-validate:
         optional: true
 
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   xhr-request-promise@0.1.3:
     resolution: {integrity: sha512-YUBytBsuwgitWtdRzXDDkWAXzhdGB8bYm0sSzMPZT7Z2MBjMSTHFsyCT1yCRATY+XC69DUrQraRAEgcoCRaIPg==}
 
@@ -10423,6 +10524,8 @@ snapshots:
 
   '@adraffy/ens-normalize@1.10.1': {}
 
+  '@adraffy/ens-normalize@1.11.0': {}
+
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -12686,7 +12789,7 @@ snapshots:
       '@motionone/easing': 10.17.0
       '@motionone/types': 10.17.0
       '@motionone/utils': 10.17.0
-      tslib: 2.6.2
+      tslib: 2.6.3
 
   '@motionone/dom@10.17.0':
     dependencies:
@@ -12695,12 +12798,12 @@ snapshots:
       '@motionone/types': 10.17.0
       '@motionone/utils': 10.17.0
       hey-listen: 1.0.8
-      tslib: 2.6.2
+      tslib: 2.6.3
 
   '@motionone/easing@10.17.0':
     dependencies:
       '@motionone/utils': 10.17.0
-      tslib: 2.6.2
+      tslib: 2.6.3
 
   '@motionone/generators@10.17.0':
     dependencies:
@@ -12711,7 +12814,7 @@ snapshots:
   '@motionone/svelte@10.16.4':
     dependencies:
       '@motionone/dom': 10.17.0
-      tslib: 2.6.2
+      tslib: 2.6.3
 
   '@motionone/types@10.17.0': {}
 
@@ -12719,12 +12822,12 @@ snapshots:
     dependencies:
       '@motionone/types': 10.17.0
       hey-listen: 1.0.8
-      tslib: 2.6.2
+      tslib: 2.6.3
 
   '@motionone/vue@10.16.4':
     dependencies:
       '@motionone/dom': 10.17.0
-      tslib: 2.6.2
+      tslib: 2.6.3
 
   '@mswjs/cookies@0.2.2':
     dependencies:
@@ -12797,12 +12900,18 @@ snapshots:
     dependencies:
       '@noble/hashes': 1.4.0
 
+  '@noble/curves@1.6.0':
+    dependencies:
+      '@noble/hashes': 1.5.0
+
   '@noble/hashes@1.2.0': {}
 
   '@noble/hashes@1.3.3': {}
 
   '@noble/hashes@1.4.0': {}
 
+  '@noble/hashes@1.5.0': {}
+
   '@noble/secp256k1@1.7.1': {}
 
   '@nodelib/fs.scandir@2.1.5':
@@ -12998,9 +13107,9 @@ snapshots:
 
   '@pkgr/core@0.1.1': {}
 
-  '@playwright/test@1.48.0':
+  '@playwright/test@1.48.2':
     dependencies:
-      playwright: 1.48.0
+      playwright: 1.48.2
 
   '@polka/url@1.0.0-next.25': {}
 
@@ -13415,7 +13524,7 @@ snapshots:
   '@safe-global/safe-apps-sdk@9.1.0(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8)':
     dependencies:
       '@safe-global/safe-gateway-typescript-sdk': 3.21.1
-      viem: 2.19.4(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8)
+      viem: 2.21.40(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8)
     transitivePeerDependencies:
       - bufferutil
       - typescript
@@ -13426,6 +13535,8 @@ snapshots:
 
   '@scure/base@1.1.6': {}
 
+  '@scure/base@1.1.9': {}
+
   '@scure/bip32@1.1.5':
     dependencies:
       '@noble/hashes': 1.2.0
@@ -13444,6 +13555,12 @@ snapshots:
       '@noble/hashes': 1.4.0
       '@scure/base': 1.1.6
 
+  '@scure/bip32@1.5.0':
+    dependencies:
+      '@noble/curves': 1.6.0
+      '@noble/hashes': 1.5.0
+      '@scure/base': 1.1.9
+
   '@scure/bip39@1.1.1':
     dependencies:
       '@noble/hashes': 1.2.0
@@ -13459,6 +13576,11 @@ snapshots:
       '@noble/hashes': 1.4.0
       '@scure/base': 1.1.6
 
+  '@scure/bip39@1.4.0':
+    dependencies:
+      '@noble/hashes': 1.5.0
+      '@scure/base': 1.1.9
+
   '@sentry/browser@7.43.0':
     dependencies:
       '@sentry/core': 7.43.0
@@ -14955,6 +15077,11 @@ snapshots:
       typescript: 5.4.5
       zod: 3.23.8
 
+  abitype@1.0.6(typescript@5.4.5)(zod@3.23.8):
+    optionalDependencies:
+      typescript: 5.4.5
+      zod: 3.23.8
+
   abort-controller@3.0.0:
     dependencies:
       event-target-shim: 5.0.1
@@ -16326,7 +16453,7 @@ snapshots:
   dot-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.6.3
 
   dotenv@16.4.5: {}
 
@@ -16657,7 +16784,7 @@ snapshots:
     dependencies:
       confusing-browser-globals: 1.0.11
       eslint: 8.50.0
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0)
       object.assign: 4.1.5
       object.entries: 1.1.8
       semver: 6.3.1
@@ -16668,13 +16795,13 @@ snapshots:
       '@typescript-eslint/parser': 6.21.0(eslint@8.50.0)(typescript@5.4.5)
       eslint: 8.50.0
       eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0)
 
   eslint-config-airbnb@19.0.4(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint-plugin-jsx-a11y@6.8.0(eslint@8.50.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.50.0))(eslint-plugin-react@7.34.1(eslint@8.50.0))(eslint@8.50.0):
     dependencies:
       eslint: 8.50.0
       eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.50.0)
       eslint-plugin-react: 7.34.1(eslint@8.50.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.50.0)
@@ -16688,8 +16815,8 @@ snapshots:
       '@typescript-eslint/parser': 6.21.0(eslint@8.50.0)(typescript@5.4.5)
       eslint: 8.50.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.50.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.50.0)
       eslint-plugin-react: 7.34.1(eslint@8.50.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.50.0)
@@ -16711,13 +16838,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.50.0):
     dependencies:
       debug: 4.3.4(supports-color@5.5.0)
       enhanced-resolve: 5.16.1
       eslint: 8.50.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.50.0))(eslint@8.50.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.13.1
@@ -16728,18 +16855,18 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.50.0))(eslint@8.50.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 6.21.0(eslint@8.50.0)(typescript@5.4.5)
       eslint: 8.50.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.50.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.50.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
@@ -16749,7 +16876,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.50.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint@8.50.0))(eslint@8.50.0))(eslint@8.50.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.50.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.50.0))(eslint@8.50.0)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -18337,6 +18464,10 @@ snapshots:
     dependencies:
       ws: 8.17.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)
 
+  isows@1.0.6(ws@8.18.0(bufferutil@4.0.8)(utf-8-validate@5.0.10)):
+    dependencies:
+      ws: 8.18.0(bufferutil@4.0.8)(utf-8-validate@5.0.10)
+
   isstream@0.1.2: {}
 
   istanbul-lib-coverage@3.2.2: {}
@@ -19469,7 +19600,7 @@ snapshots:
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.6.2
+      tslib: 2.6.3
 
   nocache@3.0.4: {}
 
@@ -19951,11 +20082,11 @@ snapshots:
       mlly: 1.7.0
       pathe: 1.1.2
 
-  playwright-core@1.48.0: {}
+  playwright-core@1.48.2: {}
 
-  playwright@1.48.0:
+  playwright@1.48.2:
     dependencies:
-      playwright-core: 1.48.0
+      playwright-core: 1.48.2
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -20486,7 +20617,7 @@ snapshots:
 
   regenerator-transform@0.15.2:
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.25.0
 
   regexp.prototype.flags@1.5.2:
     dependencies:
@@ -21949,6 +22080,24 @@ snapshots:
       - utf-8-validate
       - zod
 
+  viem@2.21.40(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8):
+    dependencies:
+      '@adraffy/ens-normalize': 1.11.0
+      '@noble/curves': 1.6.0
+      '@noble/hashes': 1.5.0
+      '@scure/bip32': 1.5.0
+      '@scure/bip39': 1.4.0
+      abitype: 1.0.6(typescript@5.4.5)(zod@3.23.8)
+      isows: 1.0.6(ws@8.18.0(bufferutil@4.0.8)(utf-8-validate@5.0.10))
+      webauthn-p256: 0.0.10
+      ws: 8.18.0(bufferutil@4.0.8)(utf-8-validate@5.0.10)
+    optionalDependencies:
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+      - zod
+
   vite-node@2.0.5(@types/node@18.19.33)(terser@5.31.5):
     dependencies:
       cac: 6.7.14
@@ -22541,6 +22690,11 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  webauthn-p256@0.0.10:
+    dependencies:
+      '@noble/curves': 1.6.0
+      '@noble/hashes': 1.5.0
+
   webauthn-p256@0.0.5:
     dependencies:
       '@noble/curves': 1.4.0
@@ -22812,6 +22966,11 @@ snapshots:
       bufferutil: 4.0.8
       utf-8-validate: 5.0.10
 
+  ws@8.18.0(bufferutil@4.0.8)(utf-8-validate@5.0.10):
+    optionalDependencies:
+      bufferutil: 4.0.8
+      utf-8-validate: 5.0.10
+
   xhr-request-promise@0.1.3:
     dependencies:
       xhr-request: 1.1.0
diff --git a/src/components/@atoms/PlusMinusControl/PlusMinusControl.tsx b/src/components/@atoms/PlusMinusControl/PlusMinusControl.tsx
index 188bae25b..e83ae7b64 100644
--- a/src/components/@atoms/PlusMinusControl/PlusMinusControl.tsx
+++ b/src/components/@atoms/PlusMinusControl/PlusMinusControl.tsx
@@ -252,7 +252,7 @@ export const PlusMinusControl = forwardRef(
             }}
             onBlur={handleBlur}
           />
-          <Label $highlighted={highlighted}>{t(`unit.${unit}`, { count: value })}</Label>
+          <Label data-testid="plus-minus-control-label" $highlighted={highlighted}>{t(`unit.${unit}`, { count: value })}</Label>
         </LabelContainer>
         <Button
           type="button"
diff --git a/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx b/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx
index 50343fdf2..98297031e 100644
--- a/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx
+++ b/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx
@@ -29,6 +29,7 @@ import { deriveYearlyFee, formatDurationOfDates } from '@app/utils/utils'
 
 import { ShortExpiry } from '../../../components/@atoms/ExpiryComponents/ExpiryComponents'
 import GasDisplay from '../../../components/@atoms/GasDisplay'
+import { SearchViewLoadingView } from '../SendName/views/SearchView/views/SearchViewLoadingView'
 
 type View = 'name-list' | 'no-ownership-warning' | 'registration'
 
@@ -171,34 +172,16 @@ const minSeconds = ONE_DAY
 
 const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) => {
   const { t } = useTranslation(['transactionFlow', 'common'])
-  const { data: ethPrice } = useEthPrice()
-
-  const { address } = useAccount()
-  const { data: balance } = useBalance({
-    address,
-  })
-
-  const flow: View[] = useMemo(
-    () =>
-      match([names.length, isSelf])
-        .with([P.when((length) => length > 1), true], () => ['name-list', 'registration'] as View[])
-        .with(
-          [P.when((length) => length > 1), P._],
-          () => ['no-ownership-warning', 'name-list', 'registration'] as View[],
-        )
-        .with([P._, true], () => ['registration'] as View[])
-        .otherwise(() => ['no-ownership-warning', 'registration'] as View[]),
-    [names.length, isSelf],
-  )
-  const [viewIdx, setViewIdx] = useState(0)
-  const incrementView = () => setViewIdx(() => Math.min(flow.length - 1, viewIdx + 1))
-  const decrementView = () => (viewIdx <= 0 ? onDismiss() : setViewIdx(viewIdx - 1))
-  const view = flow[viewIdx]
 
   const [seconds, setSeconds] = useState(ONE_YEAR)
+  const years = secondsToYears(seconds)
   const [durationType, setDurationType] = useState<'years' | 'date'>('years')
 
-  const years = secondsToYears(seconds)
+  const { data: ethPrice, isLoading: isEthPriceLoading } = useEthPrice()
+  const { address, isConnected: isAccountConnected } = useAccount()
+  const { data: balance, isLoading: isBalanceLoading } = useBalance({
+    address,
+  })
 
   const { userConfig, setCurrency } = useUserConfig()
   const currencyDisplay = userConfig.currency === 'fiat' ? userConfig.fiat : 'eth'
@@ -212,24 +195,17 @@ const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) =>
   const yearlyFee = priceData?.base ? deriveYearlyFee({ duration: seconds, price: priceData }) : 0n
   const previousYearlyFee = usePreviousDistinct(yearlyFee) || 0n
   const isShowingPreviousYearlyFee = yearlyFee === 0n && previousYearlyFee > 0n
-  const { data: expiryData } = useExpiry({ enabled: names.length === 1, name: names[0] })
+
+  const isExpiryEnabled = names.length === 1
+  const { data: expiryData, isLoading: isExpiryLoading } = useExpiry({
+    enabled: isExpiryEnabled,
+    name: names[0],
+  })
+  const isExpiryEnabledAndLoading = isExpiryEnabled && isExpiryLoading
+
   const expiryDate = expiryData?.expiry?.date
   const extendedDate = expiryDate ? new Date(expiryDate.getTime() + seconds * 1000) : undefined
 
-  const transactions = [
-    createTransactionItem('extendNames', {
-      names,
-      duration: seconds,
-      startDateTimestamp: expiryDate?.getTime(),
-      displayPrice: makeCurrencyDisplay({
-        eth: totalRentFee,
-        ethPrice,
-        bufferPercentage: CURRENCY_FLUCTUATION_BUFFER_PERCENTAGE,
-        currency: userConfig.currency === 'fiat' ? 'usd' : 'eth',
-      }),
-    }),
-  ]
-
   const {
     data: { gasEstimate: estimatedGasLimit, gasCost: transactionFee },
     error: estimateGasLimitError,
@@ -253,7 +229,7 @@ const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) =>
         ],
       },
     ],
-    enabled: !!totalRentFee,
+    enabled: !!totalRentFee && !!address && seconds > 0 && totalRentFee > 0n,
   })
 
   const previousTransactionFee = usePreviousDistinct(transactionFee) || 0n
@@ -275,49 +251,87 @@ const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) =>
     },
   ]
 
-  const { title, alert } = match(view)
+  const flow: View[] = useMemo(
+    () =>
+      match([names.length, isSelf])
+        .with([P.when((length) => length > 1), true], () => ['name-list', 'registration'] as View[])
+        .with(
+          [P.when((length) => length > 1), P._],
+          () => ['no-ownership-warning', 'name-list', 'registration'] as View[],
+        )
+        .with([P._, true], () => ['registration'] as View[])
+        .otherwise(() => ['no-ownership-warning', 'registration'] as View[]),
+    [names.length, isSelf],
+  )
+  const [viewIdx, setViewIdx] = useState(0)
+  const incrementView = () => setViewIdx(() => Math.min(flow.length - 1, viewIdx + 1))
+  const decrementView = () => (viewIdx <= 0 ? onDismiss() : setViewIdx(viewIdx - 1))
+  const view = flow[viewIdx]
+
+  const isBaseDataLoading =
+    !isAccountConnected || isBalanceLoading || isExpiryEnabledAndLoading || isEthPriceLoading
+  const isRegisterLoading = isPriceLoading || (isEstimateGasLoading && !estimateGasLimitError)
+
+  const { title, alert, buttonProps } = match(view)
     .with('no-ownership-warning', () => ({
       title: t('input.extendNames.ownershipWarning.title', {
         name: names.at(0),
         count: names.length,
       }),
       alert: 'warning' as const,
+      buttonProps: {
+        onClick: incrementView,
+        children: t('action.understand', { ns: 'common' }),
+      },
     }))
-    .otherwise(() => ({
+    .with('name-list', () => ({
       title: t('input.extendNames.title', { name: names.at(0), count: names.length }),
       alert: undefined,
+      buttonProps: {
+        onClick: incrementView,
+        children: t('action.next', { ns: 'common' }),
+      },
     }))
-
-  const trailingButtonProps = match(view)
-    .with('name-list', () => ({
-      onClick: incrementView,
-      children: t('action.next', { ns: 'common' }),
-    }))
-    .with('no-ownership-warning', () => ({
-      onClick: incrementView,
-      children: t('action.understand', { ns: 'common' }),
-    }))
-    .otherwise(() => ({
-      disabled: !!estimateGasLimitError,
-      onClick: () => {
-        if (!totalRentFee) return
-        dispatch({ name: 'setTransactions', payload: transactions })
-        dispatch({ name: 'setFlowStage', payload: 'transaction' })
+    .with('registration', () => ({
+      title: t('input.extendNames.title', { name: names.at(0), count: names.length }),
+      alert: undefined,
+      buttonProps: {
+        disabled: isRegisterLoading,
+        onClick: () => {
+          if (!totalRentFee) return
+          const transactions = createTransactionItem('extendNames', {
+            names,
+            duration: seconds,
+            startDateTimestamp: expiryDate?.getTime(),
+            displayPrice: makeCurrencyDisplay({
+              eth: totalRentFee,
+              ethPrice,
+              bufferPercentage: CURRENCY_FLUCTUATION_BUFFER_PERCENTAGE,
+              currency: userConfig.currency === 'fiat' ? 'usd' : 'eth',
+            }),
+          })
+          dispatch({ name: 'setTransactions', payload: [transactions] })
+          dispatch({ name: 'setFlowStage', payload: 'transaction' })
+        },
+        children: t('action.next', { ns: 'common' }),
       },
-      children: t('action.next', { ns: 'common' }),
     }))
+    .exhaustive()
 
   return (
     <>
       <Dialog.Heading title={title} alert={alert} />
       <Dialog.Content data-testid="extend-names-modal">
-        {match(view)
-          .with('name-list', () => <NamesList names={names} />)
-          .with('no-ownership-warning', () => (
+        {match([view, isBaseDataLoading])
+          .with([P._, true], () => <SearchViewLoadingView />)
+          .with(['no-ownership-warning', false], () => (
             <CenteredMessage>
               {t('input.extendNames.ownershipWarning.description', { count: names.length })}
             </CenteredMessage>
           ))
+          .with(['name-list', false], () => {
+            return <NamesList names={names} />
+          })
           .otherwise(() => (
             <>
               <PlusMinusWrapper>
@@ -375,13 +389,7 @@ const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) =>
             {t(viewIdx === 0 ? 'action.cancel' : 'action.back', { ns: 'common' })}
           </Button>
         }
-        trailing={
-          <Button
-            {...trailingButtonProps}
-            data-testid="extend-names-confirm"
-            disabled={isEstimateGasLoading}
-          />
-        }
+        trailing={<Button {...buttonProps} data-testid="extend-names-confirm" />}
       />
     </>
   )