Merge branch 'FET-1689' of https://github.com/ensdomains/ens-app-v3 i…

…nto FET-1689

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

@@ -1,4 +1,3 @@
-import { useRenew } from '@root/ src/hooks/pages/profile/useRenew'
 import Head from 'next/head'
 import { useEffect, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@@ -12,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'

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

@@ -0,0 +1,123 @@
+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 { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
+import { RegistrationStatus } from '@app/utils/registrationStatus'
+import { parseNumericString } from '@app/utils/string'
+
+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
+
+  if (
+    isRenewActive &&
+    accountStatus === 'disconnected' &&
+    !!openConnectModal &&
+    !openedConnectModal
+  )
+    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 = parseNumericString(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])
+}

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)
+  })
+})