FET-1640: Renew name deeplink

e2e/specs/stateless/extendNames.spec.ts

@@ -117,7 +117,7 @@ test('should be able to extend a single unwrapped name from profile', async ({
 
   const extendNamesModal = makePageObject('ExtendNamesModal')
   await test.step('should show warning message', async () => {
-    await expect(page.getByText('You do not own this name')).toBeVisible()
+    await expect(page.getByText(`You do not own ${name}`)).toBeVisible()
     await page.getByRole('button', { name: 'I understand' }).click()
   })
 
@@ -130,12 +130,6 @@ test('should be able to extend a single unwrapped name from profile', async ({
     })
   })
 
-  await test.step('should show the cost comparison data', async () => {
-    await expect(page.getByTestId('year-marker-0')).toContainText('2% gas')
-    await expect(page.getByTestId('year-marker-1')).toContainText('1% gas')
-    await expect(page.getByTestId('year-marker-2')).toContainText('1% gas')
-  })
-
   await test.step('should work correctly with plus minus control', async () => {
     await expect(extendNamesModal.getCounterMinusButton).toBeDisabled()
     await expect(extendNamesModal.getInvoiceExtensionFee).toContainText('0.0033')
@@ -199,12 +193,6 @@ test('should be able to extend a single unwrapped name in grace period from prof
     await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
   })
 
-  await test.step('should show the cost comparison data', async () => {
-    await expect(page.getByTestId('year-marker-0')).toContainText('2% gas')
-    await expect(page.getByTestId('year-marker-1')).toContainText('1% gas')
-    await expect(page.getByTestId('year-marker-2')).toContainText('1% gas')
-  })
-
   await test.step('should work correctly with plus minus control', async () => {
     await expect(extendNamesModal.getCounterMinusButton).toBeDisabled()
     await expect(extendNamesModal.getInvoiceExtensionFee).toContainText('0.0033')
@@ -258,7 +246,7 @@ test('should be able to extend a single unwrapped name in grace period from prof
   await profilePage.getExtendButton.click()
 
   await test.step('should show warning message', async () => {
-    await expect(page.getByText('You do not own this name')).toBeVisible()
+    await expect(page.getByText(`You do not own ${name}`)).toBeVisible()
     await page.getByRole('button', { name: 'I understand' }).click()
   })
 
@@ -269,12 +257,6 @@ test('should be able to extend a single unwrapped name in grace period from prof
     await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
   })
 
-  await test.step('should show the cost comparison data', async () => {
-    await expect(page.getByTestId('year-marker-0')).toContainText('2% gas')
-    await expect(page.getByTestId('year-marker-1')).toContainText('1% gas')
-    await expect(page.getByTestId('year-marker-2')).toContainText('1% gas')
-  })
-
   await test.step('should work correctly with plus minus control', async () => {
     await expect(extendNamesModal.getCounterMinusButton).toBeDisabled()
     await expect(extendNamesModal.getInvoiceExtensionFee).toContainText('0.0033')
@@ -490,12 +472,6 @@ test('should be able to extend a name in grace period by a month', async ({
     await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
   })
 
-  await test.step('should show the cost comparison data', async () => {
-    await expect(page.getByTestId('year-marker-0')).toContainText('2% gas')
-    await expect(page.getByTestId('year-marker-1')).toContainText('1% gas')
-    await expect(page.getByTestId('year-marker-2')).toContainText('1% gas')
-  })
-
   await test.step('should be able to pick by date', async () => {
     const dateSelection = page.getByTestId('date-selection')
     await expect(dateSelection).toHaveText('Pick by date')
@@ -573,12 +549,6 @@ test('should be able to extend a name in grace period by 1 day', async ({
     await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
   })
 
-  await test.step('should show the cost comparison data', async () => {
-    await expect(page.getByTestId('year-marker-0')).toContainText('2% gas')
-    await expect(page.getByTestId('year-marker-1')).toContainText('1% gas')
-    await expect(page.getByTestId('year-marker-2')).toContainText('1% gas')
-  })
-
   await test.step('should be able to pick by date', async () => {
     const dateSelection = page.getByTestId('date-selection')
     await expect(dateSelection).toHaveText('Pick by date')

e2e/specs/stateless/ownership.spec.ts

@@ -1150,7 +1150,7 @@ test.describe('Extend name', () => {
     await ownershipPage.extendButton.click()
 
     await test.step('should show ownership warning', async () => {
-      await expect(page.getByText('You do not own this name')).toBeVisible()
+      await expect(page.getByText(`You do not own ${name}`)).toBeVisible()
       await page.getByRole('button', { name: 'I understand' }).click()
     })
     await test.step('should show the correct price data', async () => {
@@ -1160,12 +1160,6 @@ test.describe('Extend name', () => {
       await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
     })
 
-    await test.step('should show the cost comparison data', async () => {
-      await expect(page.getByTestId('year-marker-0')).toContainText('2% gas')
-      await expect(page.getByTestId('year-marker-1')).toContainText('1% gas')
-      await expect(page.getByTestId('year-marker-2')).toContainText('1% gas')
-    })
-
     await test.step('should work correctly with plus minus control', async () => {
       await expect(extendNamesModal.getCounterMinusButton).toBeDisabled()
       await expect(extendNamesModal.getInvoiceExtensionFee).toContainText('0.0033')

public/locales/en/transactionFlow.json

@@ -217,10 +217,10 @@
       }
     },
     "extendNames": {
-      "title_one": "Extend Name",
+      "title_one": "Extend {{name}}",
       "title_other": "Extend {{count}} Names",
       "ownershipWarning": {
-        "title_one": "You do not own this name",
+        "title_one": "You do not own {{name}}",
         "title_other": "You do not own all these names",
         "description_one": "Extending this name will extend the current owner's registration length. This will not give you ownership of it.",
         "description_other": "Extending these names will extend the current owner's registration length. This will not give you ownership if you are not already the owner."
@@ -231,7 +231,7 @@
         "total": "Estimated total"
       },
       "bannerMsg": "Extending for multiple years will save money on network costs by avoiding yearly transactions.",
-      "gasLimitError": "Insufficient funds"
+      "gasLimitError": "Not enough ETH in wallet"
     },
     "transferProfile": {
       "title": "Transfer Profile",
@@ -419,7 +419,8 @@
     "extendNames": {
       "actionValue": "Extend registration",
       "costValue": "{{value}} + fees",
-      "warning": "Extending this name will not give you ownership of it"
+      "warning": "Extending this name will not give you ownership of it",
+      "newExpiry": "New expiry: {{date}}"
     },
     "deleteSubname": {
       "warning": "Hello out there"

public/locales/nl/transactionFlow.json

@@ -128,7 +128,7 @@
       "customPlaceholder": "Vul handmatige resolver adres hier"
     },
     "extendNames": {
-      "title_one": "Verleng Naam",
+      "title_one": "Verleng {{name}}",
       "title_other": "Verleng {{count}} Namen",
       "invoice": {
         "extension": "{{count}} jaar verlenging",

public/locales/ru/transactionFlow.json

@@ -216,10 +216,10 @@
       }
     },
     "extendNames": {
-      "title_one": "Продлить имя",
+      "title_one": "Продлить {{name}}",
       "title_other": "Продлить {{count}} имена",
       "ownershipWarning": {
-        "title_one": "Вы не владеете этим именем",
+        "title_one": "Вы не владеете {{name}}",
         "title_other": "Вы не владеете всеми этими именами",
         "description_one": "Продление этого имени увеличит срок регистрации текущего владельца. Это не даст вам права собственности на него.",
         "description_other": "Продление этих имен увеличит срок регистрации текущего владельца. Это не даст вам права собственности, если вы уже не являетесь владельцем."

public/locales/uk/transactionFlow.json

@@ -216,10 +216,10 @@
       }
     },
     "extendNames": {
-      "title_one": "Продовжити ім'я",
+      "title_one": "Продовжити {{name}}",
       "title_other": "Продовжити {{count}} імен",
       "ownershipWarning": {
-        "title_one": "Ви не володієте цим ім'ям",
+        "title_one": "Ви не володієте {{name}}",
         "title_other": "Ви не володієте всіма цими іменами",
         "description_one": "Продовження цього імені продовжить реєстрацію поточного власника. Це не надасть вам права власності на нього.",
         "description_other": "Продовження цих імен продовжить реєстрацію поточного власника. Це не надасть вам права власності, якщо ви ще не є власником."

src/components/@molecules/TransactionDialogManager/DisplayItems.tsx

@@ -9,7 +9,7 @@ import { AvatarWithZorb, NameAvatar } from '@app/components/AvatarWithZorb'
 import { usePrimaryName } from '@app/hooks/ensjs/public/usePrimaryName'
 import { useBeautifiedName } from '@app/hooks/useBeautifiedName'
 import { TransactionDisplayItem } from '@app/types'
-import { shortenAddress } from '@app/utils/utils'
+import { formatExpiry, shortenAddress } from '@app/utils/utils'
 
 const Container = styled.div(
   ({ theme }) => css`
@@ -204,6 +204,15 @@ const RecordContainer = styled.div(
   `,
 )
 
+const DurationContainer = styled.div(
+  ({ theme }) => css`
+    display: flex;
+    text-align: right;
+    flex-direction: column;
+    gap: ${theme.space[1]};
+  `,
+)
+
 const RecordsValue = ({ value }: { value: [string, string | undefined][] }) => {
   return (
     <RecordsContainer>
@@ -222,6 +231,34 @@ const RecordsValue = ({ value }: { value: [string, string | undefined][] }) => {
   )
 }
 
+const DurationValue = ({ value }: { value: string | undefined }) => {
+  const { t } = useTranslation('transactionFlow')
+
+  if (!value) return null
+
+  const regex = /(\d+)\s*years?\s*(?:,?\s*(\d+)?\s*months?)?/
+  const matches = value.match(regex) ?? []
+
+  const years = parseInt(matches.at(1) ?? '0')
+  const months = parseInt(matches.at(2) ?? '0')
+
+  const date = new Date()
+
+  if (years > 0) date.setFullYear(date.getFullYear() + years)
+  if (months > 0) date.setMonth(date.getMonth() + months)
+
+  return (
+    <DurationContainer>
+      <Typography ellipsis>
+        <strong>{value}</strong>
+      </Typography>
+      <Typography color="textTertiary" fontVariant="small">
+        {t('transaction.extendNames.newExpiry', { date: formatExpiry(date) })}
+      </Typography>
+    </DurationContainer>
+  )
+}
+
 const DisplayItemValue = (props: Omit<TransactionDisplayItem, 'label'>) => {
   const { value, type } = props as TransactionDisplayItem
   if (type === 'address') {
@@ -239,6 +276,9 @@ const DisplayItemValue = (props: Omit<TransactionDisplayItem, 'label'>) => {
   if (type === 'records') {
     return <RecordsValue value={value} />
   }
+  if (type === 'duration') {
+    return <DurationValue value={value} />
+  }
   return <ValueTypography fontVariant="bodyBold">{value}</ValueTypography>
 }
 

src/components/ProfileSnippet.test.tsx

@@ -1,9 +1,13 @@
 import '@app/test-utils'
 
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import { getUserDefinedUrl } from './ProfileSnippet'
 
+vi.mock('next/navigation', () => ({
+  useSearchParams: () => new URLSearchParams(),
+}))
+
 describe('getUserDefinedUrl', () => {
   it('should return undefined if no URL is provided', () => {
     expect(getUserDefinedUrl()).toBeUndefined()

src/components/ProfileSnippet.tsx

@@ -1,4 +1,5 @@
-import { useMemo } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
@@ -201,6 +202,21 @@ export const ProfileSnippet = ({
   const location = getTextRecord?.('location')?.value
   const recordName = getTextRecord?.('name')?.value
 
+  const searchParams = useSearchParams()
+
+  const renew = (searchParams.get('renew') ?? null) !== null
+
+  const { canSelfExtend, canEdit } = abilities.data ?? {}
+
+  useEffect(() => {
+    if (renew) {
+      showExtendNamesInput(`extend-names-${name}`, {
+        names: [name],
+        isSelf: canSelfExtend,
+      })
+    }
+  }, [renew, name, canSelfExtend])
+
   const ActionButton = useMemo(() => {
     if (button === 'extend')
       return (
@@ -212,7 +228,7 @@ export const ProfileSnippet = ({
           onClick={() => {
             showExtendNamesInput(`extend-names-${name}`, {
               names: [name],
-              isSelf: abilities.data?.canSelfExtend,
+              isSelf: canSelfExtend,
             })
           }}
         >
@@ -240,7 +256,7 @@ export const ProfileSnippet = ({
         </Button>
       )
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [button, name, abilities.data])
+  }, [button, name, canSelfExtend])
 
   return (
     <Container $banner={banner} data-testid="profile-snippet">
@@ -249,7 +265,7 @@ export const ProfileSnippet = ({
           size={{ min: '24', sm: '32' }}
           label={name}
           name={name}
-          noCache={abilities.data.canEdit}
+          noCache={canEdit}
           decoding="sync"
         />
         <ButtonStack>

src/components/pages/profile/[name]/Profile.test.tsx

@@ -12,7 +12,9 @@ import ProfileContent, { NameAvailableBanner } from './Profile'
 vi.mock('@app/hooks/useBasicName')
 vi.mock('@app/hooks/useProfile')
 vi.mock('@app/hooks/useNameDetails')
-
+vi.mock('next/navigation', () => ({
+  useSearchParams: () => new URLSearchParams(),
+}))
 vi.mock('@app/hooks/useProtectedRoute', () => ({
   useProtectedRoute: vi.fn(),
 }))