FET-1689: Name Renew Deeplink Params

e2e/specs/stateless/extendNames.spec.ts

@@ -91,7 +91,7 @@ test('should be able to extend multiple names (including names in grace preiod)
   await transactionModal.autoComplete()
 
   await expect(page.getByText('Your "Extend names" transaction was successful')).toBeVisible({
-    timeout: 10000,
+    timeout: 15000,
   })
   await subgraph.sync()
 
@@ -618,7 +618,7 @@ test('should be able to extend a single wrapped name using deep link', async ({
   const homePage = makePageObject('HomePage')
   await homePage.goto()
   await login.connect()
-  await page.goto(`/${name}?renew`)
+  await page.goto(`/${name}?renew=123`)
 
   const timestamp = await profilePage.getExpiryTimestamp()
 
@@ -664,7 +664,7 @@ test('should not be able to extend a name which is not registered', async ({
   const homePage = makePageObject('HomePage')
   await homePage.goto()
   await login.connect()
-  await page.goto(`/${name}?renew`)
+  await page.goto(`/${name}?renew=123`)
   await expect(page.getByRole('heading', { name: `Register ${name}` })).toBeVisible()
 })
 
@@ -675,6 +675,55 @@ test('renew deep link should redirect to registration when not logged in', async
   const name = 'this-name-does-not-exist.eth'
   const homePage = makePageObject('HomePage')
   await homePage.goto()
-  await page.goto(`/${name}?renew`)
+  await page.goto(`/${name}?renew=123`)
   await expect(page.getByRole('heading', { name: `Register ${name}` })).toBeVisible()
 })
+
+test('should handle URL-based renew parameter', async ({ page, login, makeName }) => {
+  const name = await makeName({
+    label: 'legacy',
+    type: 'legacy',
+    owner: 'user',
+  })
+
+  await test.step('should handle large duration', async () => {
+    await page.goto(`/${name}?renew=315360000`) // 10 years
+    await login.connect()
+    await expect(page.getByText('10 years extension', { exact: true })).toBeVisible()
+  })
+})
+
+test('should handle URL-based renew for names in grace period', async ({
+  page,
+  login,
+  makeName,
+}) => {
+  const name = await makeName({
+    label: 'legacy',
+    type: 'legacy',
+    owner: 'user',
+    duration: -24 * 60 * 60,
+  })
+
+  await test.step('should allow extend in grace period', async () => {
+    await page.goto(`/${name}?renew=94608000`) // 3 years
+    await login.connect()
+
+    await expect(page.getByText(`${name} has expired`)).toBeVisible()
+    await expect(page.getByText(`You do not own ${name}`)).toBeVisible()
+    await page.getByTestId('extend-names-confirm').click()
+
+    await expect(page.getByText('3 years extension', { exact: true })).toBeVisible()
+  })
+})
+
+test('should handle URL-based renew for disconnected users', async ({ page, makeName }) => {
+  const name = await makeName({
+    label: 'legacy',
+    type: 'legacy',
+    owner: 'user',
+  })
+
+  await page.goto(`/${name}?renew=94608000`)
+  await expect(page.getByText('Connect a wallet')).toBeVisible()
+})

src/components/ProfileSnippet.tsx

@@ -1,16 +1,13 @@
-import { useSearchParams } from 'next/navigation'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
-import { useAccount } from 'wagmi'
 
 import { Button, mq, NametagSVG, Tag, Typography } from '@ensdomains/thorin'
 
 import FastForwardSVG from '@app/assets/FastForward.svg'
 import VerifiedPersonSVG from '@app/assets/VerifiedPerson.svg'
 import { useAbilities } from '@app/hooks/abilities/useAbilities'
 import { useBeautifiedName } from '@app/hooks/useBeautifiedName'
-import { useNameDetails } from '@app/hooks/useNameDetails'
 import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
 
 import { useTransactionFlow } from '../transaction-flow/TransactionFlowProvider'
@@ -195,8 +192,6 @@ export const ProfileSnippet = ({
   const { usePreparedDataInput } = useTransactionFlow()
   const showExtendNamesInput = usePreparedDataInput('ExtendNames')
   const abilities = useAbilities({ name })
-  const details = useNameDetails({ name })
-  const { isConnected } = useAccount()
 
   const beautifiedName = useBeautifiedName(name)
 
@@ -206,27 +201,8 @@ export const ProfileSnippet = ({
   const location = getTextRecord?.('location')?.value
   const recordName = getTextRecord?.('name')?.value
 
-  const searchParams = useSearchParams()
-
-  const renew = (searchParams.get('renew') ?? null) !== null
-  const available = details.registrationStatus === 'available'
-
   const { canSelfExtend, canEdit } = abilities.data ?? {}
 
-  useEffect(() => {
-    if (renew && !isConnected) {
-      return router.push(`/${name}/register`)
-    }
-
-    if (renew && !available) {
-      showExtendNamesInput(`extend-names-${name}`, {
-        names: [name],
-        isSelf: canSelfExtend,
-      })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isConnected, available, renew, name, canSelfExtend])
-
   const ActionButton = useMemo(() => {
     if (button === 'extend')
       return (

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

@@ -11,6 +11,7 @@ import BaseLink from '@app/components/@atoms/BaseLink'
 import { Outlink } from '@app/components/Outlink'
 import { useAbilities } from '@app/hooks/abilities/useAbilities'
 import { useChainName } from '@app/hooks/chain/useChainName'
+import { useRenew } from '@app/hooks/pages/profile/useRenew/useRenew'
 import { useNameDetails } from '@app/hooks/useNameDetails'
 import { useProtectedRoute } from '@app/hooks/useProtectedRoute'
 import { useQueryParameterState } from '@app/hooks/useQueryParameterState'
@@ -201,6 +202,8 @@ const ProfileContent = ({ isSelf, isLoading: parentIsLoading, name }: Props) =>
   //   }
   // }, [name, router, transactions])
 
+  useRenew(normalisedName)
+
   const infoBanner = useMemo(() => {
     if (
       registrationStatus !== 'gracePeriod' &&