.

src/hooks/pages/profile/useRenew.ts

@@ -5,13 +5,11 @@ import { useAccount } from 'wagmi'
 
 import { useAbilities } from '@app/hooks/abilities/useAbilities'
 import { useNameDetails } from '@app/hooks/useNameDetails'
-import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
 import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
 import { parseNumericString } from '@app/utils/string'
 
 export function useRenew(name: string) {
   const [opened, setOpened] = useState<boolean>(false)
-  const router = useRouterWithHistory()
 
   const { registrationStatus, isLoading } = useNameDetails({ name })
   const abilities = useAbilities({ name })

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

@@ -1,7 +1,6 @@
-import { useConnectModal } from '@rainbow-me/rainbowkit'
+import { useRenew } from '@root/ src/hooks/pages/profile/useRenew'
 import Head from 'next/head'
-import { useSearchParams } from 'next/navigation'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 import { match } from 'ts-pattern'
@@ -18,7 +17,6 @@ import { useProtectedRoute } from '@app/hooks/useProtectedRoute'
 import { useQueryParameterState } from '@app/hooks/useQueryParameterState'
 import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
 import { Content, ContentWarning } from '@app/layouts/Content'
-import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
 import { OG_IMAGE_URL } from '@app/utils/constants'
 import { shouldRedirect } from '@app/utils/shouldRedirect'
 import { formatFullExpiry, makeEtherscanLink } from '@app/utils/utils'
@@ -107,67 +105,6 @@ export const NameAvailableBanner = ({
   )
 }
 
-function useRenew(name: string) {
-  const parseNumericString = (time: string | null) => {
-    if (!time) return
-
-    if (typeof +time === 'number' && !Number.isNaN(+time)) {
-      return +time
-    }
-  }
-
-  const [opened, setOpened] = useState<boolean>(false)
-  const router = useRouterWithHistory()
-
-  const { registrationStatus, isLoading } = useNameDetails({ name })
-  const abilities = useAbilities({ name })
-  const searchParams = useSearchParams()
-  const { isConnected, isDisconnected } = useAccount()
-  const { usePreparedDataInput } = useTransactionFlow()
-  const { openConnectModal } = useConnectModal()
-  const showExtendNamesInput = usePreparedDataInput('ExtendNames')
-
-  const { data: { canSelfExtend } = {} } = abilities
-  const isAvailableName = registrationStatus === 'available'
-  const renewSeconds = parseNumericString(searchParams.get('renew'))
-
-  useEffect(() => {
-    if (opened || !renewSeconds || isLoading) return
-
-    if (isAvailableName) {
-      setOpened(true)
-      router.push(`/${name}/register`)
-      return
-    }
-
-    if (!isAvailableName && isDisconnected) {
-      setOpened(true)
-      openConnectModal?.()
-      return
-    }
-
-    if (!isAvailableName && isConnected) {
-      setOpened(true)
-      showExtendNamesInput(`extend-names-${name}`, {
-        names: [name],
-        isSelf: canSelfExtend,
-        seconds: renewSeconds,
-      })
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    isAvailableName,
-    isLoading,
-    isConnected,
-    isDisconnected,
-    name,
-    canSelfExtend,
-    renewSeconds,
-    opened,
-  ])
-}
-
 const ProfileContent = ({ isSelf, isLoading: parentIsLoading, name }: Props) => {
   const router = useRouterWithHistory()
   const { t } = useTranslation('profile')