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()
 
@@ -623,7 +623,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()
 
@@ -669,7 +669,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()
 })
 
@@ -680,6 +680,6 @@ 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()
 })

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'
@@ -181,6 +182,7 @@ const ProfileContent = ({ isSelf, isLoading: parentIsLoading, name }: Props) =>
 
   const abilities = useAbilities({ name: normalisedName })
 
+  useRenew(normalisedName)
   // hook for redirecting to the correct profile url
   // profile.decryptedName fetches labels from NW/subgraph
   // normalisedName fetches labels from localStorage

src/hooks/pages/profile/useRenew/useRenew.ts

@@ -0,0 +1,50 @@
+import { useConnectModal } from '@rainbow-me/rainbowkit'
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useRef } from 'react'
+import { useAccount } from 'wagmi'
+
+import { useAbilities } from '@app/hooks/abilities/useAbilities'
+import { useNameDetails } from '@app/hooks/useNameDetails'
+import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
+import { parseNumericString } from '@app/utils/string'
+
+export function useRenew(name: string) {
+  const { registrationStatus, isLoading } = useNameDetails({ name })
+  const abilities = useAbilities({ name })
+  const searchParams = useSearchParams()
+  const { isConnected, isDisconnected } = useAccount()
+  const { usePreparedDataInput } = useTransactionFlow()
+  const { openConnectModal, connectModalOpen } = useConnectModal()
+  const showExtendNamesInput = usePreparedDataInput('ExtendNames')
+
+  const { data: { canSelfExtend } = {} } = abilities
+  const isAvailableName = registrationStatus === 'available'
+  const renewSeconds = parseNumericString(searchParams.get('renew'))
+
+  const prevIsConnected = useRef(isConnected)
+
+  const isRenewActive =
+    (!isConnected || !connectModalOpen) && !!renewSeconds && !isLoading && !isAvailableName
+
+  // http://localhost:3000/anyname.eth?renew=63072000
+  useEffect(() => {
+    if (!isRenewActive) return
+
+    if (isDisconnected && prevIsConnected.current) {
+      openConnectModal?.()
+      return
+    }
+
+    if (isConnected) {
+      showExtendNamesInput(`extend-names-${name}`, {
+        names: [name],
+        isSelf: canSelfExtend,
+        seconds: renewSeconds,
+      })
+    }
+
+    prevIsConnected.current = !isConnected
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRenewActive, isConnected, isDisconnected, name, canSelfExtend])
+}

src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx

@@ -161,6 +161,7 @@ const NamesList = ({ names }: NamesListProps) => {
 
 type Data = {
   names: string[]
+  seconds?: number
   isSelf?: boolean
 }
 
@@ -170,10 +171,14 @@ export type Props = {
 
 const minSeconds = ONE_DAY
 
-const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) => {
+const ExtendNames = ({
+  data: { seconds: defaultSeconds = ONE_YEAR, names, isSelf },
+  dispatch,
+  onDismiss,
+}: Props) => {
   const { t } = useTranslation(['transactionFlow', 'common'])
 
-  const [seconds, setSeconds] = useState(ONE_YEAR)
+  const [seconds, setSeconds] = useState(defaultSeconds)
   const years = secondsToYears(seconds)
   const [durationType, setDurationType] = useState<'years' | 'date'>('years')
 

src/utils/string.test.ts

@@ -0,0 +1,28 @@
+import { it, describe, expect } from "vitest";
+import { parseNumericString } from "./string";
+
+describe('parseNumericString', () => {
+  it('should return an integer', () => {
+    expect(parseNumericString('123')).toBe(123)
+  })
+
+  it('should return an integer for a decimal', () => {
+    expect(parseNumericString('123.123')).toBe(123)
+  })
+
+  it('should return null for a string', () => {
+    expect(parseNumericString('abc')).toBe(null)
+  })
+
+  it('should return null for an empty string', () => {
+    expect(parseNumericString('')).toBe(null)
+  })
+
+  it('should return null for a negative number', () => {
+    expect(parseNumericString('-123')).toBe(null)
+  })
+
+  it('should return null for a negative number', () => {
+    expect(parseNumericString('1a23')).toBe(null)
+  })
+})

src/utils/string.ts

@@ -0,0 +1,9 @@
+export const parseNumericString = (time: string | null): number | null => {
+  if (!time) return null
+
+  if (typeof +time === 'number' && !Number.isNaN(+time)) {
+    return +time
+  }
+
+  return null
+}