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,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'
@@ -201,6 +202,8 @@ const ProfileContent = ({ isSelf, isLoading: parentIsLoading, name }: Props) =>
   //   }
   // }, [name, router, transactions])
 
+  useRenew(normalisedName)
+
   const infoBanner = useMemo(() => {
     if (
       registrationStatus !== 'gracePeriod' &&

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

@@ -0,0 +1,170 @@
+import { it, expect, describe} from "vitest";
+
+import { calculateRenewState } from "./useRenew";
+
+describe('calculateRenewState', () => {
+  it('should return connect-user if accountStatus is disconnected', () => {
+    expect(calculateRenewState({
+      registrationStatus: 'gracePeriod',
+      isRegistrationStatusLoading: false,
+      renewSeconds: 123,
+      connectModalOpen: false,
+      accountStatus: 'disconnected',
+      isAbilitiesLoading: false,
+      isRouterReady: true,
+      name: 'name',
+      openedConnectModal: false,
+      openConnectModal: () => {}
+    })).toBe('connect-user')
+  })
+
+  it('should return connect-user if accountStatus is connected', () => {
+    expect(calculateRenewState({
+      registrationStatus: 'registered',
+      isRegistrationStatusLoading: false,
+      renewSeconds: 123,
+      connectModalOpen: false,
+      accountStatus: 'connected',
+      isAbilitiesLoading: false,
+      isRouterReady: true,
+      name: 'name',
+      openedConnectModal: false,
+      openConnectModal: () => {}
+    })).toBe('display-extend-names')
+  })
+
+  it('should return idle if registration status is available', () => {
+    expect(calculateRenewState({
+      registrationStatus: 'available',
+      isRegistrationStatusLoading: false,
+      renewSeconds: 123,
+      connectModalOpen: false,
+      accountStatus: 'connected',
+      isAbilitiesLoading: false,
+      isRouterReady: true,
+      name: 'name',
+      openedConnectModal: false,
+      openConnectModal: () => {}
+    })).toBe('idle')
+  })
+
+  it('should return idle if registration status is loading', () => {
+    expect(calculateRenewState({
+      registrationStatus: 'registered',
+      isRegistrationStatusLoading: true,
+      renewSeconds: 123,
+      connectModalOpen: false,
+      accountStatus: 'connected',
+      isAbilitiesLoading: false,
+      isRouterReady: true,
+      name: 'name',
+      openedConnectModal: false,
+      openConnectModal: () => {}
+    })).toBe('idle')
+  })
+
+  it('should return idle if renewSeconds is null', () => {
+    expect(calculateRenewState({
+      registrationStatus: 'registered',
+      isRegistrationStatusLoading: false,
+      renewSeconds: null,
+      connectModalOpen: false,
+      accountStatus: 'connected',
+      isAbilitiesLoading: false,
+      isRouterReady: true,
+      name: 'name',
+      openedConnectModal: false,
+      openConnectModal: () => {}
+    })).toBe('idle')
+  })
+
+  it('should return idle if connectModalOpen is true', () => {
+    expect(calculateRenewState({
+      registrationStatus: 'registered',
+      isRegistrationStatusLoading: false,
+      renewSeconds: 123,
+      connectModalOpen: true,
+      accountStatus: 'connected',
+      isAbilitiesLoading: false,
+      isRouterReady: true,
+      name: 'name',
+      openedConnectModal: false,
+      openConnectModal: () => {}
+    })).toBe('idle')
+  })
+
+  it('should return idle if abilities is loading', () => {
+    expect(calculateRenewState({
+      registrationStatus: 'registered',
+      isRegistrationStatusLoading: false,
+      renewSeconds: 123,
+      connectModalOpen: false,
+      accountStatus: 'connected',
+      isAbilitiesLoading: true,
+      isRouterReady: true,
+      name: 'name',
+      openedConnectModal: false,
+      openConnectModal: () => {}
+    })).toBe('idle')
+  })
+
+  it('should return idle if isRouterReady is false', () => {
+    expect(calculateRenewState({
+      registrationStatus: 'registered',
+      isRegistrationStatusLoading: false,
+      renewSeconds: 123,
+      connectModalOpen: false,
+      accountStatus: 'connected',
+      isAbilitiesLoading: false,
+      isRouterReady: false,
+      name: 'name',
+      openedConnectModal: false,
+      openConnectModal: () => {}
+    })).toBe('idle')
+  })
+
+  it('should return idle if name is empty', () => {
+    expect(calculateRenewState({
+      registrationStatus: 'registered',
+      isRegistrationStatusLoading: false,
+      renewSeconds: 123,
+      connectModalOpen: false,
+      accountStatus: 'connected',
+      isAbilitiesLoading: false,
+      isRouterReady: true,
+      name: '',
+      openedConnectModal: false,
+      openConnectModal: () => {}
+    })).toBe('idle')
+  })
+
+  it('should return idle if openedConnectModal is true', () => {
+    expect(calculateRenewState({
+      registrationStatus: 'registered',
+      isRegistrationStatusLoading: false,
+      renewSeconds: 123,
+      connectModalOpen: false,
+      accountStatus: 'connected',
+      isAbilitiesLoading: false,
+      isRouterReady: true,
+      name: 'name',
+      openedConnectModal: true,
+      openConnectModal: () => {}
+    })).toBe('idle')
+  })
+
+  it('should return idle if openConnectModal is undefined and accountStatus is disconnected', () => {
+    expect(calculateRenewState({
+      registrationStatus: 'registered',
+      isRegistrationStatusLoading: false,
+      renewSeconds: 123,
+      connectModalOpen: false,
+      accountStatus: 'disconnected',
+      isAbilitiesLoading: false,
+      isRouterReady: true,
+      name: 'name',
+      openedConnectModal: false,
+      openConnectModal: undefined
+    })).toBe('idle')
+  })
+})

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

@@ -0,0 +1,118 @@
+import { useConnectModal } from '@rainbow-me/rainbowkit'
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { match } from 'ts-pattern'
+import { useAccount } from 'wagmi'
+
+import { useAbilities } from '@app/hooks/abilities/useAbilities'
+import { useBasicName } from '@app/hooks/useBasicName'
+import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
+import { validateExtendNamesDuration } from '@app/transaction-flow/input/ExtendNames/utils/validateExtendNamesDuration'
+import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
+import { RegistrationStatus } from '@app/utils/registrationStatus'
+
+type RenewStatus = 'connect-user' | 'display-extend-names' | 'idle'
+
+export const calculateRenewState = ({
+  registrationStatus,
+  isRegistrationStatusLoading,
+  renewSeconds,
+  openConnectModal,
+  connectModalOpen,
+  accountStatus,
+  isAbilitiesLoading,
+  isRouterReady,
+  name,
+  openedConnectModal,
+}: {
+  registrationStatus?: RegistrationStatus
+  isRegistrationStatusLoading: boolean
+  renewSeconds: number | null
+  connectModalOpen: boolean
+  openConnectModal: ReturnType<typeof useConnectModal>['openConnectModal']
+  accountStatus: ReturnType<typeof useAccount>['status']
+  isAbilitiesLoading: boolean
+  isRouterReady: boolean
+  name?: string
+  openedConnectModal: boolean
+}): RenewStatus => {
+  const isNameRegisteredOrGracePeriod =
+    registrationStatus === 'registered' || registrationStatus === 'gracePeriod'
+  const isRenewActive =
+    isRouterReady &&
+    !isRegistrationStatusLoading &&
+    !!name &&
+    isNameRegisteredOrGracePeriod &&
+    !!renewSeconds &&
+    !connectModalOpen &&
+    !openedConnectModal
+
+  if (isRenewActive && accountStatus === 'disconnected' && !!openConnectModal) return 'connect-user'
+  if (isRenewActive && accountStatus === 'connected' && !isAbilitiesLoading)
+    return 'display-extend-names'
+  return 'idle'
+}
+
+export const removeRenewParam = ({
+  query,
+}: {
+  query: ReturnType<typeof useRouterWithHistory>['query']
+}): string => {
+  const searchParams = new URLSearchParams(query as any)
+  // remove the name param in case the page is a redirect from /profile page
+  searchParams.delete('name')
+  searchParams.delete('renew')
+  const newParams = searchParams.toString()
+  return newParams ? `?${newParams}` : ''
+}
+
+export function useRenew(name: string) {
+  const router = useRouterWithHistory()
+  const { registrationStatus, isLoading: isBasicNameLoading } = useBasicName({ name })
+  const abilities = useAbilities({ name })
+  const searchParams = useSearchParams()
+  const { status } = useAccount()
+
+  const { openConnectModal, connectModalOpen } = useConnectModal()
+  const [openedConnectModal, setOpenedConnectModal] = useState(connectModalOpen)
+
+  const { usePreparedDataInput } = useTransactionFlow()
+  const showExtendNamesInput = usePreparedDataInput('ExtendNames')
+
+  const { data: { canSelfExtend } = {}, isLoading: isAbilitiesLoading } = abilities
+
+  const renewSeconds = validateExtendNamesDuration({ duration: searchParams.get('renew') })
+
+  const renewState = calculateRenewState({
+    registrationStatus,
+    isRegistrationStatusLoading: isBasicNameLoading,
+    renewSeconds,
+    connectModalOpen,
+    accountStatus: status,
+    isAbilitiesLoading,
+    name,
+    isRouterReady: router.isReady,
+    openConnectModal,
+    openedConnectModal,
+  })
+
+  useEffect(() => {
+    match(renewState)
+      .with('connect-user', () => {
+        openConnectModal?.()
+        setOpenedConnectModal(!!openConnectModal)
+      })
+      .with('display-extend-names', () => {
+        showExtendNamesInput(`extend-names-${name}`, {
+          names: [name],
+          isSelf: canSelfExtend,
+          seconds: renewSeconds!,
+        })
+        const params = removeRenewParam({ query: router.query })
+        router.replace(`/${name}${params}`)
+      })
+      .with('idle', () => {})
+      .exhaustive()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [renewState])
+}