checkpoint 12

public/locales/en/common.json

@@ -282,12 +282,12 @@
       "pending": {
         "regular": "Pending"
       },
-      "confirmed": {
+      "success": {
         "regular": "Confirmed",
         "notifyTitle": "Transaction Successful",
         "notifyMessage": "Your \"{{action}}\" transaction was successful"
       },
-      "failed": {
+      "reverted": {
         "regular": "Failed",
         "notifyTitle": "Transaction Failure",
         "notifyMessage": "Your \"{{action}}\" transaction failed and was reverted"
@@ -305,7 +305,7 @@
         "waitingForWallet": "Waiting for Wallet",
         "openWallet": "Open Wallet"
       },
-      "sent": {
+      "pending": {
         "title": "Transaction Sent",
         "message": "Your transaction is now in progress, you can close this and come back later.",
         "progress": {
@@ -314,14 +314,14 @@
         },
         "learn": "Learn about long running transactions"
       },
-      "complete": {
+      "success": {
         "title": "Transaction Complete",
         "message": "Your transaction is now complete!",
         "progress": {
           "title": "Done"
         }
       },
-      "failed": {
+      "reverted": {
         "title": "Transaction Failed",
         "progress": {
           "title": "Failed"

src/components/@molecules/EditResolver/EditResolverForm.tsx

@@ -1,13 +1,13 @@
 import { RefObject } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
+import { useChainId } from 'wagmi'
 
 import { Dialog, RadioButton, Typography } from '@ensdomains/thorin'
 
 import { Outlink } from '@app/components/Outlink'
-import { useChainName } from '@app/hooks/chain/useChainName'
 import useResolverEditor from '@app/hooks/useResolverEditor'
-import { makeEtherscanLink } from '@app/utils/utils'
+import { createEtherscanLink } from '@app/utils/utils'
 
 import { DogFood } from '../DogFood'
 import EditResolverWarnings from './EditResolverWarnings'
@@ -48,7 +48,7 @@ type Props = ReturnType<typeof useResolverEditor> & {
 
 const EditResolverForm = ({
   isResolverAddressLatest,
-  lastestResolverAddress,
+  latestResolverAddress,
   resolverChoice,
   handleSubmit,
   register,
@@ -63,15 +63,15 @@ const EditResolverForm = ({
   resolverWarnings,
 }: Props) => {
   const { t } = useTranslation('transactionFlow')
-  const chainName = useChainName()
+  const chainId = useChainId()
 
   const latestResolverLabel = (
     <LatestResolverLabel $offset={isResolverAddressLatest}>
       <LatestResolverTitleContainer>
         <LatestResolverTitle>{t('input.editResolver.latestLabel')}</LatestResolverTitle>
         <Outlink
           data-testid="latest-resolver-etherscan"
-          href={makeEtherscanLink(lastestResolverAddress, chainName, 'address')}
+          href={createEtherscanLink({ data: latestResolverAddress, chainId, route: 'address' })}
         >
           {t('input.editResolver.etherscan')}
         </Outlink>

src/components/@molecules/NameListView/NameListView.tsx

@@ -21,7 +21,8 @@ import { usePrefetchBlockTimestamp } from '@app/hooks/chain/useBlockTimestamp'
 import { useNamesForAddress } from '@app/hooks/ensjs/subgraph/useNamesForAddress'
 import useDebouncedCallback from '@app/hooks/useDebouncedCallback'
 import { useQueryParameterState } from '@app/hooks/useQueryParameterState'
-import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
+import { useTransactionManager } from '@app/transaction/transactionManager'
+import { usePreparedDataInput } from '@app/transaction/usePreparedDataInput'
 
 const EmptyDetailContainer = styled.div(
   ({ theme }) => css`
@@ -120,7 +121,7 @@ export const NameListView = ({ address, selfAddress, setError, setLoading }: Nam
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isNamesLoading])
 
-  const { usePreparedDataInput, getTransactionFlowStage } = useTransactionFlow()
+  const getTransactionFlowStage = useTransactionManager((s) => s.getFlowStageOrNull)
   const showExtendNamesInput = usePreparedDataInput('ExtendNames')
 
   const [isIntersecting, setIsIntersecting] = useState(false)
@@ -142,7 +143,7 @@ export const NameListView = ({ address, selfAddress, setError, setLoading }: Nam
 
   const stage = getTransactionFlowStage(`extend-names-${selectedNames.join('-')}`)
   useEffect(() => {
-    if (stage === 'completed') {
+    if (stage === 'complete') {
       setSelectedNames([])
       setMode('view')
     }

src/components/@molecules/VerificationBadge/VerificationBadge.tsx

@@ -6,7 +6,7 @@ import { AlertSVG, Colors, Tooltip } from '@ensdomains/thorin'
 
 import VerifiedPersonSVG from '@app/assets/VerifiedPerson.svg'
 import VerifiedRecordSVG from '@app/assets/VerifiedRecord.svg'
-import { VerificationProtocol } from '@app/transaction-flow/input/VerifyProfile/VerifyProfile-flow'
+import { VerificationProtocol } from '@app/transaction/user/VerifyProfile/VerifyProfile-flow'
 
 type Color = Extract<Colors, 'accent' | 'green' | 'red'>
 

src/components/@molecules/VerificationBadge/components/VerificationBadgeAccountTooltipContent.tsx

@@ -4,7 +4,7 @@ import { match } from 'ts-pattern'
 import { Colors, OutlinkSVG, Typography } from '@ensdomains/thorin'
 
 import DentitySVG from '@app/assets/verification/Dentity.svg'
-import { VerificationProtocol } from '@app/transaction-flow/input/VerifyProfile/VerifyProfile-flow'
+import { VerificationProtocol } from '@app/transaction/user/VerifyProfile/VerifyProfile-flow'
 
 type Props = { verifiers?: VerificationProtocol[] }
 

src/components/@molecules/VerificationBadge/components/VerificationBadgeVerifierTooltipContent.tsx

@@ -5,7 +5,7 @@ import { Colors, Typography } from '@ensdomains/thorin'
 
 import VerifiedPersonSVG from '@app/assets/VerifiedPerson.svg'
 import { SupportOutlink } from '@app/components/@atoms/SupportOutlink'
-import { CenteredTypography } from '@app/transaction-flow/input/ProfileEditor/components/CenteredTypography'
+import { CenteredTypography } from '@app/transaction/user/input/ProfileEditor/components/CenteredTypography'
 
 const Container = styled.div<{ $color: Colors }>(
   ({ theme, $color }) => css`

src/components/Notifications2.tsx

@@ -1,16 +1,13 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { usePreviousDistinct } from 'react-use'
 import styled, { css } from 'styled-components'
 
 import { Button, Toast } from '@ensdomains/thorin'
 
-import { useTransactionStore } from '@app/transaction-flow/new/TransactionStore'
-import type { LastTransactionChange } from '@app/transaction/types'
+import type { StoredTransaction } from '@app/transaction/slices/createTransactionSlice'
+import { useTransactionManager } from '@app/transaction/transactionManager'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
-import { getChainName } from '@app/utils/getChainName'
-import { wagmiConfig } from '@app/utils/query/wagmi'
-import { makeEtherscanLink } from '@app/utils/utils'
+import { createEtherscanLink } from '@app/utils/utils'
 
 const ButtonContainer = styled.div(
   ({ theme }) => css`
@@ -22,10 +19,7 @@ const ButtonContainer = styled.div(
   `,
 )
 
-type SuccessOrRevertedTransaction = Extract<
-  LastTransactionChange,
-  { status: 'success' | 'reverted' }
->
+type SuccessOrRevertedTransaction = Extract<StoredTransaction, { status: 'success' | 'reverted' }>
 
 const Notification = ({
   transaction,
@@ -38,21 +32,22 @@ const Notification = ({
 }) => {
   const { t } = useTranslation()
   const breakpoints = useBreakpoint()
-  const getResumable = useTransactionStore((s) => s.flow.getResumable)
-  const resumeFlow = useTransactionStore((s) => s.flow.resume)
+  const isFlowResumable = useTransactionManager((s) => s.isFlowResumable)
+  const resumeFlow = useTransactionManager((s) => s.resumeFlow)
 
-  const resumable = transaction && getResumable(transaction.flowKey)
-  const chainName = transaction && getChainName(wagmiConfig, { chainId: transaction.chainId })
+  const resumable = transaction && isFlowResumable(transaction.flowId)
 
   const button = (() => {
     if (!transaction) return null
+
+    const etherscanLink = createEtherscanLink({
+      data: transaction.currentHash,
+      chainId: transaction.targetChainId,
+    })
+
     if (!resumable)
       return (
-        <a
-          target="_blank"
-          href={makeEtherscanLink(transaction.currentHash, chainName!)}
-          rel="noreferrer"
-        >
+        <a target="_blank" href={etherscanLink} rel="noreferrer">
           <Button size="small" colorStyle="accentSecondary">
             {t('transaction.viewEtherscan')}
           </Button>
@@ -61,19 +56,15 @@ const Notification = ({
 
     return (
       <ButtonContainer>
-        <a
-          target="_blank"
-          href={makeEtherscanLink(transaction.currentHash, chainName!)}
-          rel="noreferrer"
-        >
+        <a target="_blank" href={etherscanLink} rel="noreferrer">
           <Button size="small" colorStyle="accentSecondary">
             {t('transaction.viewEtherscan')}
           </Button>
         </a>
         <Button
           size="small"
           data-testid="notification-continue-button"
-          onClick={() => resumeFlow(transaction.flowKey)}
+          onClick={() => resumeFlow(transaction.flowId)}
         >
           {t('action.continue')}
         </Button>
@@ -85,7 +76,7 @@ const Notification = ({
     ? {
         title: t(`transaction.status.${transaction.status}.notifyTitle`),
         description: t(`transaction.status.${transaction.status}.notifyMessage`, {
-          action: t(`transaction.description.${transaction.action}`),
+          action: t(`transaction.description.${transaction.name}`),
         }),
         children: button,
       }
@@ -104,34 +95,23 @@ const Notification = ({
 }
 
 export const Notifications = () => {
-  const [open, setOpen] = useState(false)
-  const [transactionQueue, setTransactionQueue] = useState<SuccessOrRevertedTransaction[]>([])
-  const lastTransaction = useTransactionStore((s) => {
-    const tx = s.transaction.getLastTransactionChange()
-    if (!tx) return null
-    if (tx.status !== 'success' && tx.status !== 'reverted') return null
-    return tx
-  })
-
-  const prevLastTransaction = usePreviousDistinct(lastTransaction)
-
-  if (lastTransaction && prevLastTransaction !== lastTransaction) {
-    setTransactionQueue((q) => [...q, lastTransaction])
-  }
+  const [shouldHide, setShouldHide] = useState(false)
+  const currentNotification = useTransactionManager((s) => s.currentNotification)
+  const dismissNotification = useTransactionManager((s) => s.dismissNotification)
 
-  const currentTransaction = transactionQueue[0] ?? null
+  const open = currentNotification !== null && !shouldHide
 
   return (
     <Notification
       onClose={() => {
-        setOpen(false)
-        setTimeout(
-          () => setTransactionQueue((prev) => [...prev.filter((x) => x !== currentTransaction)]),
-          300,
-        )
+        setShouldHide(true)
+        setTimeout(() => {
+          dismissNotification()
+          setShouldHide(false)
+        }, 300)
       }}
       open={open}
-      transaction={currentTransaction}
+      transaction={currentNotification}
     />
   )
 }

src/components/ProfileSnippet.tsx

@@ -9,8 +9,8 @@ import VerifiedPersonSVG from '@app/assets/VerifiedPerson.svg'
 import { useAbilities } from '@app/hooks/abilities/useAbilities'
 import { useBeautifiedName } from '@app/hooks/useBeautifiedName'
 import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
+import { usePreparedDataInput } from '@app/transaction/usePreparedDataInput'
 
-import { useTransactionFlow } from '../transaction-flow/TransactionFlowProvider'
 import { NameAvatar } from './AvatarWithZorb'
 
 const Container = styled.div<{ $banner?: string }>(
@@ -189,7 +189,6 @@ export const ProfileSnippet = ({
   const router = useRouterWithHistory()
   const { t } = useTranslation('common')
 
-  const { usePreparedDataInput } = useTransactionFlow()
   const showExtendNamesInput = usePreparedDataInput('ExtendNames')
   const abilities = useAbilities({ name })
 

src/components/pages/VerificationErrorDialog.tsx

@@ -2,7 +2,7 @@ import { ComponentProps } from 'react'
 
 import { Button, Dialog } from '@ensdomains/thorin'
 
-import { CenteredTypography } from '@app/transaction-flow/input/ProfileEditor/components/CenteredTypography'
+import { CenteredTypography } from '@app/transaction/user/input/ProfileEditor/components/CenteredTypography'
 
 export type ButtonProps = ComponentProps<typeof Button>
 

src/components/pages/import/[name]/DnsClaim.tsx

@@ -7,7 +7,7 @@ import { useAccount } from 'wagmi'
 import { useBasicName } from '@app/hooks/useBasicName'
 import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
 import { Content } from '@app/layouts/Content'
-import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
+import { useTransactionManager } from '@app/transaction/transactionManager'
 import { shouldRedirect } from '@app/utils/shouldRedirect'
 
 import { CompleteImport } from './steps/CompleteImport'
@@ -52,7 +52,7 @@ export const DnsClaim = () => {
 
   const key = `importDnsName-${selected.name}`
 
-  const { cleanupFlow } = useTransactionFlow()
+  const cleanupFlow = useTransactionManager((s) => s.cleanupFlow)
 
   useEffect(() => {
     const handleRouteChange = (e: string) => {

src/components/pages/import/[name]/steps/SelectImportType.tsx

@@ -12,7 +12,7 @@ import { useDnsOffchainStatus } from '@app/hooks/dns/useDnsOffchainStatus'
 import { useDnsSecEnabled } from '@app/hooks/dns/useDnsSecEnabled'
 import { useDnsOwner } from '@app/hooks/ensjs/dns/useDnsOwner'
 import { useResolver } from '@app/hooks/ensjs/public/useResolver'
-import { CenteredTypography } from '@app/transaction-flow/input/ProfileEditor/components/CenteredTypography'
+import { CenteredTypography } from '@app/transaction/user/ProfileEditor/components/CenteredTypography'
 import { getSupportLink } from '@app/utils/supportLinks'
 
 import { DnsImportActionButton, DnsImportCard, DnsImportHeading } from '../shared'

src/components/pages/import/[name]/utils.ts

@@ -12,7 +12,7 @@ import type { GetDnsImportDataReturnType } from '@ensdomains/ensjs/dns'
 
 import { addStateOverride } from '@app/hooks/chain/useEstimateGasWithStateOverride'
 import type { UseDnsOwnerError } from '@app/hooks/ensjs/dns/useDnsOwner'
-import { createTransactionItem } from '@app/transaction-flow/transaction'
+import { createUserTransaction } from '@app/transaction/user/transaction'
 
 export type DnsNavigationFunction = (direction: 'prev' | 'next') => void
 
@@ -68,17 +68,17 @@ export const createImportTransactionRequests = ({
   dnsRegistrarAddress: Address
 }) => {
   const createApproveTx = () =>
-    createTransactionItem('approveDnsRegistrar', {
+    createUserTransaction('approveDnsRegistrar', {
       address,
     })
   const createClaimTx = () =>
-    createTransactionItem('claimDnsName', {
+    createUserTransaction('claimDnsName', {
       name,
       dnsImportData,
       address,
     })
   const createImportTx = () =>
-    createTransactionItem('importDnsName', {
+    createUserTransaction('importDnsName', {
       name,
       dnsImportData,
     })

src/components/pages/profile/ProfileButton.tsx

@@ -26,11 +26,11 @@ import { VerificationBadge } from '@app/components/@molecules/VerificationBadge/
 import { useCoinChain } from '@app/hooks/chain/useCoinChain'
 import { usePrimaryName } from '@app/hooks/ensjs/public/usePrimaryName'
 import { getDestination } from '@app/routes'
-import { VerificationProtocol } from '@app/transaction-flow/input/VerifyProfile/VerifyProfile-flow'
+import { VerificationProtocol } from '@app/transaction/user/VerifyProfile/VerifyProfile-flow'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { getContentHashLink } from '@app/utils/contenthash'
 import { getSocialData } from '@app/utils/getSocialData'
-import { makeEtherscanLink, shortenAddress } from '@app/utils/utils'
+import { createEtherscanLink, shortenAddress } from '@app/utils/utils'
 import { getVerifierData } from '@app/utils/verification/getVerifierData'
 import { isVerificationProtocol } from '@app/utils/verification/isVerificationProtocol'
 
@@ -247,6 +247,7 @@ export const OwnerProfileButton = ({
 }) => {
   const { t } = useTranslation('common')
   const breakpoints = useBreakpoint()
+  const chainId = useChainId()
 
   const dataType = useMemo(() => {
     if (!addressOrNameOrDate)
@@ -351,7 +352,7 @@ export const OwnerProfileButton = ({
           {
             icon: <UpRightArrowSVG />,
             label: 'View on Etherscan',
-            href: makeEtherscanLink(addressOrNameOrDate, 'mainnet', 'address'),
+            href: createEtherscanLink({ data: addressOrNameOrDate, chainId, route: 'address' }),
           },
         ] as DropdownItem[])
       : []),