better flow for EOA accounts + multiple TXs in Checkout flow

packages/checkout/src/hooks/index.ts

@@ -10,3 +10,5 @@ export * from './useCheckoutOptionsSalesContract.js'
 export * from './useERC1155SaleContractCheckout.js'
 export * from './useSkipOnCloseCallback.js'
 export * from './useFortePaymentIntent.js'
+export * from './useAddFundsModal.js'
+export * from './useTransactionCounter.js'

packages/checkout/src/hooks/useCheckoutUI/useCryptoPayment.tsx

@@ -238,7 +238,8 @@ export const useCryptoPayment = ({
           }
         ]
 
-        const txHash = await sendTransactions({
+        let txHash: string | undefined
+        const txs = await sendTransactions({
           chainId,
           senderAddress: userAddress,
           publicClient,
@@ -250,7 +251,25 @@ export const useCryptoPayment = ({
           waitConfirmationForLastTransaction: false
         })
 
-        onSuccess?.(txHash)
+        if (txs.length === 0) {
+          throw new Error('No transactions to send')
+        }
+
+        for (const [index, tx] of txs.entries()) {
+          const currentTxHash = await tx()
+
+          const isLastTransaction = index === txs.length - 1
+
+          if (isLastTransaction) {
+            onSuccess?.(currentTxHash)
+            txHash = currentTxHash
+          }
+        }
+
+        if (!txHash) {
+          throw new Error('Transaction hash is not available')
+        }
+
         return txHash
       } else {
         const swapOption = swapRoutes
@@ -322,7 +341,8 @@ export const useCryptoPayment = ({
           }
         ]
 
-        const txHash = await sendTransactions({
+        let txHash: string | undefined
+        const txs = await sendTransactions({
           chainId,
           senderAddress: userAddress,
           publicClient,
@@ -334,7 +354,25 @@ export const useCryptoPayment = ({
           waitConfirmationForLastTransaction: false
         })
 
-        onSuccess?.(txHash)
+        if (txs.length === 0) {
+          throw new Error('No transactions to send')
+        }
+
+        for (const [index, tx] of txs.entries()) {
+          const currentTxHash = await tx()
+
+          const isLastTransaction = index === txs.length - 1
+
+          if (isLastTransaction) {
+            onSuccess?.(currentTxHash)
+            txHash = currentTxHash
+          }
+        }
+
+        if (!txHash) {
+          throw new Error('Transaction hash is not available')
+        }
+
         return txHash
       }
     } catch (error) {

packages/checkout/src/hooks/useTransactionCounter.ts

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+
+export const useTransactionCounter = () => {
+  const [currentTransactionNumber, setCurrentTransactionNumber] = useState(1)
+  const [maxTransactions, setMaxTransactions] = useState(0)
+
+  const initializeTransactionCounter = (maxTransactions: number) => {
+    setCurrentTransactionNumber(1)
+    setMaxTransactions(maxTransactions)
+  }
+
+  const resetTransactionCounter = () => {
+    setCurrentTransactionNumber(1)
+    setMaxTransactions(0)
+  }
+
+  const incrementTransactionCount = () => {
+    setCurrentTransactionNumber(prev => prev + 1)
+  }
+
+  const isTransactionCounterInitialized = maxTransactions > 0
+
+  return {
+    currentTransactionNumber,
+    maxTransactions,
+    incrementTransactionCount,
+    initializeTransactionCounter,
+    resetTransactionCounter,
+    isTransactionCounterInitialized
+  }
+}

packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx

@@ -26,7 +26,7 @@ import { ERC_20_CONTRACT_ABI } from '../../../../constants/abi.js'
 import { EVENT_SOURCE } from '../../../../constants/index.js'
 import { type PaymentMethodSelectionParams } from '../../../../contexts/NavigationCheckout.js'
 import type { SelectPaymentSettings } from '../../../../contexts/SelectPaymentModal.js'
-import { useAddFundsModal } from '../../../../hooks/index.js'
+import { useAddFundsModal, useTransactionCounter } from '../../../../hooks/index.js'
 import { useSelectPaymentModal, useTransactionStatusModal } from '../../../../hooks/index.js'
 import { useNavigationCheckout } from '../../../../hooks/useNavigationCheckout.js'
 
@@ -48,6 +48,14 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
   const { analytics } = useAnalyticsContext()
   const [isError, setIsError] = useState<boolean>(false)
   const { navigation, setNavigation } = useNavigationCheckout()
+  const {
+    initializeTransactionCounter,
+    incrementTransactionCount,
+    currentTransactionNumber,
+    maxTransactions,
+    isTransactionCounterInitialized,
+    resetTransactionCounter
+  } = useTransactionCounter()
 
   const {
     chain,
@@ -275,7 +283,7 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
         }
       ]
 
-      const txHash = await sendTransactions({
+      const txs = await sendTransactions({
         chainId,
         senderAddress: userAddress,
         publicClient,
@@ -287,6 +295,29 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
         waitConfirmationForLastTransaction: false
       })
 
+      if (txs.length === 0) {
+        throw new Error('No transactions to send')
+      }
+
+      initializeTransactionCounter(txs.length)
+
+      let txHash: string | undefined
+      for (const [index, tx] of txs.entries()) {
+        const currentTxHash = await tx()
+        incrementTransactionCount()
+
+        const isLastTransaction = index === txs.length - 1
+
+        if (isLastTransaction) {
+          onSuccess?.(currentTxHash)
+          txHash = currentTxHash
+        }
+      }
+
+      if (!txHash) {
+        throw new Error('Transaction hash is not available')
+      }
+
       analytics?.track({
         event: 'SEND_TRANSACTION_REQUEST',
         props: {
@@ -340,6 +371,7 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
       setIsError(true)
     }
 
+    resetTransactionCounter()
     setIsPurchasing(false)
   }
 
@@ -423,7 +455,7 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
         }
       ]
 
-      const txHash = await sendTransactions({
+      const txs = await sendTransactions({
         chainId,
         senderAddress: userAddress,
         publicClient,
@@ -435,6 +467,29 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
         waitConfirmationForLastTransaction: false
       })
 
+      if (txs.length === 0) {
+        throw new Error('No transactions to send')
+      }
+
+      initializeTransactionCounter(txs.length)
+
+      let txHash: string | undefined
+      for (const [index, tx] of txs.entries()) {
+        const currentTxHash = await tx()
+        incrementTransactionCount()
+
+        const isLastTransaction = index === txs.length - 1
+
+        if (isLastTransaction) {
+          onSuccess?.(currentTxHash)
+          txHash = currentTxHash
+        }
+      }
+
+      if (!txHash) {
+        throw new Error('Transaction hash is not available')
+      }
+
       analytics?.track({
         event: 'SEND_TRANSACTION_REQUEST',
         props: {
@@ -489,6 +544,7 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
     }
 
     setIsPurchasing(false)
+    resetTransactionCounter()
   }
 
   const onClickPurchase = () => {
@@ -612,6 +668,23 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
   }
 
   const PriceSection = () => {
+    if (isTransactionCounterInitialized) {
+      const descriptionText =
+        maxTransactions > 1
+          ? `Confirming transaction ${currentTransactionNumber} of ${maxTransactions}`
+          : `Confirming transaction`
+      return (
+        <div className="flex flex-col flex-wrap justify-between items-center w-full gap-2">
+          <div className="flex flex-col gap-0.5">
+            <Text variant="xsmall" color="text50">
+              {descriptionText}
+            </Text>
+          </div>
+          <Spinner />
+        </div>
+      )
+    }
+
     if (isFree) {
       return (
         <div className="flex flex-col mt-2 mb-1 w-full">

packages/checkout/src/views/Swap/index.tsx

@@ -237,7 +237,7 @@ export const Swap = () => {
         await walletClient.switchChain({ id: chainId })
       }
 
-      const txHash = await sendTransactions({
+      const txs = await sendTransactions({
         connector,
         walletClient,
         publicClient,
@@ -248,6 +248,26 @@ export const Swap = () => {
         transactions: [...getSwapTransactions(), ...(postSwapTransactions ?? [])]
       })
 
+      if (txs.length === 0) {
+        throw new Error('No transactions to send')
+      }
+
+      let txHash: string | undefined
+
+      for (const [index, tx] of txs.entries()) {
+        const currentTxHash = await tx()
+
+        const isLastTransaction = index === txs.length - 1
+        if (isLastTransaction) {
+          onSuccess?.(currentTxHash)
+          txHash = currentTxHash
+        }
+      }
+
+      if (!txHash) {
+        throw new Error('Transaction hash is not available')
+      }
+
       closeSwapModal()
       openTransactionStatusModal({
         chainId,