feat(wip): transaction manager v2

.eslintrc.json

@@ -85,8 +85,13 @@
       {
         "selector": "typeLike",
         "format": ["PascalCase"]
+      },
+      {
+        "selector": "typeParameter",
+        "format": ["PascalCase", "camelCase"]
       }
     ],
+    "@typescript-eslint/no-redeclare": "off",
     "radix": "off",
     "consistent-return": "off",
     "jsx-a11y/anchor-is-valid": "off",

.github/workflows/knip.yaml

@@ -1,6 +1,6 @@
 name: Knip
 
-on: [push]
+on: []
 
 jobs:
   knip:

.github/workflows/pages-deployment.yaml

@@ -4,7 +4,7 @@ env:
   SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
   NEXT_PUBLIC_INTERCOM_ID: re9q5yti
 
-on: [push]
+on: []
 jobs:
   yalc_check:
     runs-on: ubuntu-latest

.github/workflows/test.yaml

@@ -1,6 +1,6 @@
 name: Test
 
-on: [push]
+on: []
 
 env:
   SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
@@ -97,7 +97,38 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]
+        shard:
+          [
+            1,
+            2,
+            3,
+            4,
+            5,
+            6,
+            7,
+            8,
+            9,
+            10,
+            11,
+            12,
+            13,
+            14,
+            15,
+            16,
+            17,
+            18,
+            19,
+            20,
+            21,
+            22,
+            23,
+            24,
+            25,
+            26,
+            27,
+            28,
+            29,
+          ]
     steps:
       - uses: actions/checkout@v3
 

package.json

@@ -76,7 +76,7 @@
     "i18next-browser-languagedetector": "^6.1.5",
     "i18next-http-backend": "^1.4.1",
     "idb-keyval": "^6.2.1",
-    "immer": "^9.0.15",
+    "immer": "^9.0.21",
     "intl-segmenter-polyfill": "^0.4.4",
     "iso-639-1": "^2.1.15",
     "lodash": "^4.17.21",
@@ -97,7 +97,8 @@
     "ts-pattern": "^4.2.2",
     "use-immer": "^0.7.0",
     "viem": "2.19.4",
-    "wagmi": "2.12.4"
+    "wagmi": "2.12.4",
+    "zustand": "5.0.0-rc.2"
   },
   "peerDependencies": {
     "react": "*",

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/assets/verification/DynamicVerificationIcon.tsx

@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic'
 
-import { VerificationProtocol } from '../../transaction-flow/input/VerifyProfile/VerifyProfile-flow'
+import { VerificationProtocol } from '@app/transaction/user/input/VerifyProfile/VerifyProfile-flow'
 
 export const verificationIconTypes: {
   [key in VerificationProtocol]: any

src/components/@molecules/DogFood.tsx

@@ -12,8 +12,7 @@ import { Spacer } from '@app/components/@atoms/Spacer'
 import { useAddressRecord } from '@app/hooks/ensjs/public/useAddressRecord'
 import useDebouncedCallback from '@app/hooks/useDebouncedCallback'
 import { createQueryKey } from '@app/hooks/useQueryOptions'
-
-import { DisplayItems } from './TransactionDialogManager/DisplayItems'
+import { DisplayItems } from '@app/transaction/components/DisplayItems'
 
 const InnerContainer = styled.div(() => [
   css`

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/FaucetBanner.tsx

@@ -20,8 +20,7 @@ import {
 import { useAccountSafely } from '@app/hooks/account/useAccountSafely'
 import { useChainName } from '@app/hooks/chain/useChainName'
 import useFaucet from '@app/hooks/useFaucet'
-
-import { DisplayItems } from './TransactionDialogManager/DisplayItems'
+import { DisplayItems } from '@app/transaction/components/DisplayItems'
 
 const BannerWrapper = styled.div(
   () => css`
@@ -72,8 +71,7 @@ const FaucetBanner = () => {
     closeDialog()
   }, [chainName, address])
 
-  if ((chainName !== 'goerli' && chainName !== 'sepolia') || !isReady || isLoading || !data)
-    return null
+  if (chainName !== 'sepolia' || !isReady || isLoading || !data) return null
 
   const BannerComponent = (
     <BannerWrapper>

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