0xtrails 0.1.3 → 0.1.4

package/src/widget/widget.tsx

@@ -15,7 +15,7 @@ import React, {
 } from "react"
 import { createPortal } from "react-dom"
 import type { Chain, WalletClient } from "viem"
-import { createWalletClient, custom, http, parseUnits, isAddress } from "viem"
+import { createWalletClient, custom, http, isAddress } from "viem"
 import * as viemChains from "viem/chains"
 import type { Connector } from "wagmi"
 import {
@@ -26,7 +26,7 @@ import {
   WagmiContext,
   WagmiProvider,
 } from "wagmi"
-import { getChainInfo } from "../chains.js"
+import { getChainInfo, getRpcUrl } from "../chains.js"
 import type { TransactionState } from "../transactions.js"
 import type { RelayerEnv, MetaTxnReceipt } from "../relayer.js"
 import type { Theme } from "../theme.js"
@@ -53,7 +53,6 @@ import {
   trackWidgetScreen,
 } from "../analytics.js"
 import type { PrepareSendQuote } from "../prepareSend.js"
-import { getNormalizedQuoteObject } from "../prepareSend.js"
 import type { SupportedToken } from "../tokens.js"
 import {
   getIsWalletRejectedError,
@@ -61,6 +60,7 @@ import {
   getFullErrorMessage,
   getIsApiError,
   getIsRateLimitedError,
+  getPrettifiedErrorMessage,
 } from "../error.js"
 import {
   setSequenceIndexerUrl,
@@ -74,6 +74,7 @@ import {
 } from "../config.js"
 import { FundSendForm } from "./components/FundSendForm.js"
 import { Swap } from "./components/Swap.js"
+import { Receive } from "./components/Receive.js"
 import type { MeshConnectProps } from "./components/MeshConnectIframe.js"
 import { MeshConnectFlow } from "./components/MeshConnectFlow.js"
 import WalletConnectScreen from "./components/WalletConnect.js"
@@ -90,6 +91,8 @@ import { cssObjectToString } from "../cssUtils.js"
 import { useCheckout } from "./hooks/useCheckout.js"
 import { useWallets, walletConnectConnector, connectors } from "../wallets.js"
 import { isValidNumeric, isValidInteger } from "../prices.js"
+import { ErrorDisplay } from "./components/ErrorDisplay.js"
+import { useDebugScreens } from "./hooks/useDebugScreens.js"
 
 export const aaveClient = AaveClient.create()
 
@@ -99,7 +102,7 @@ const isValidToToToken = (toToken: string | null | undefined) => {
     return true // Empty values are considered valid
   }
   const token = String(toToken).trim()
-  if (token === "ETH" || token === "USDC") {
+  if (token?.length > 0 && token?.length <= 5) {
     return true
   }
 
@@ -114,6 +117,7 @@ type Screen =
   | "fund-methods"
   | "earn-pools"
   | "swap"
+  | "receive"
   | "wallet-confirmation"
   | "qr-code-deposit"
   | "pending"
@@ -287,16 +291,6 @@ const useTransactionState = (
       (tx: TransactionState) => tx.state === "failed",
     )
 
-    console.log(
-      "[trails-sdk] Transaction state monitoring:",
-      "allConfirmed:",
-      allConfirmed,
-      "hasFailures:",
-      hasFailures,
-      "states:",
-      transactionStates.map((tx) => tx.state),
-    )
-
     if (allConfirmed && !hasFailures && onComplete) {
       console.log(
         "[trails-sdk] All transactions confirmed, triggering completion",
@@ -354,8 +348,17 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     const { recentTokens, addRecentToken } = useRecentTokens(address)
     const { wallets: allWallets } = useWallets()
     const [isModalOpen, setIsModalOpen] = useState(false)
+    const [currentMode, setCurrentMode] = useState<Mode>(mode)
     const [currentScreen, setCurrentScreen] = useState<Screen>(
-      isConnected ? (mode === "swap" ? "swap" : "tokens") : "connect",
+      isConnected
+        ? currentMode === "swap"
+          ? "swap"
+          : currentMode === "receive"
+            ? "receive"
+            : "tokens"
+        : currentMode === "receive"
+          ? "receive"
+          : "connect",
     )
     const [selectedToken, setSelectedToken] = useState<Token | null>(null)
     const [selectedFundMethod, setSelectedFundMethod] =
@@ -438,11 +441,11 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       // Validate toToken - must be "ETH", "USDC", or a valid hex address
       if (!isValidToToken) {
         console.error(
-          "[trails-sdk] Invalid toToken prop: must be 'ETH', 'USDC', or a valid hex address. Received:",
+          "[trails-sdk] Invalid toToken prop: must be a valid token symbol or a valid hex address. Received:",
           toToken,
         )
         setError(
-          "Invalid toToken: must be 'ETH', 'USDC', or a valid hex address",
+          "Invalid toToken: must be a valid token symbol or a valid hex address",
         )
         return
       }
@@ -455,14 +458,14 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         setError("Invalid toAddress: must be a valid hex address")
       }
 
-      if (mode === "fund") {
+      if (currentMode === "fund") {
         if (toAmount) {
           setError("toAmount is not allowed in fund mode")
           return
         }
       }
 
-      if (mode === "swap") {
+      if (currentMode === "swap") {
         if (toAmount) {
           setError("toAmount is not allowed in swap mode")
           return
@@ -479,7 +482,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           return
         }
       }
-    }, [toAmount, toChainId, toToken, mode, toAddress])
+    }, [toAmount, toChainId, toToken, currentMode, toAddress])
 
     const walletClient = useWalletManager(address, chainId, connector)
 
@@ -497,6 +500,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 
     const [meshConnectProps, setMeshConnectProps] =
       useState<Partial<MeshConnectProps> | null>(null)
+    const [isNavigatingBack, setIsNavigatingBack] = useState(false)
 
     // Hook to auto-select pool when mode is "earn" and toAddress is specified
     const useAutoSelectPool = (
@@ -586,7 +590,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       return { poolsLoading }
     }
 
-    useAutoSelectPool(mode, toAddress, toChainId, toToken)
+    useAutoSelectPool(currentMode, toAddress, toChainId, toToken)
 
     const {
       setOriginTxHash,
@@ -609,12 +613,31 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       onCheckoutStatusUpdate,
     })
 
+    // Use the debug screens hook
+    const { handleDebugScreenSelect } = useDebugScreens({
+      setCurrentScreen,
+      setSelectedToken,
+      setTransactionStates,
+      setPrepareSendQuote,
+      setShowWalletConfirmRetry,
+      setCurrentMode,
+      setSelectedWalletId,
+      setShowWalletConnectionRetry,
+      setError,
+      setIsConnecting,
+      setMeshConnectProps,
+      isConnected,
+    })
+
     // redirect to tokens screen only once after initial connection
     const [alreadyRedirectedToTokens, setAlreadyRedirectedToTokens] =
       useState(false)
 
     // Update screen based on connection state and mode
     useEffect(() => {
+      if (isNavigatingBack) {
+        return
+      }
       if (isConnected) {
         if (
           currentScreen === "connect" ||
@@ -623,9 +646,11 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         ) {
           if (!alreadyRedirectedToTokens) {
             setAlreadyRedirectedToTokens(true)
-            // For swap mode, go directly to swap screen, otherwise go to tokens
-            if (mode === "swap") {
+            // Route to appropriate screen based on mode
+            if (currentMode === "swap") {
               setCurrentScreen("swap")
+            } else if (currentMode === "receive") {
+              setCurrentScreen("receive")
             } else {
               setCurrentScreen("tokens")
             }
@@ -636,14 +661,21 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           currentScreen !== "connect" &&
           currentScreen !== "wallet-connect" &&
           currentScreen !== "wallet-list" &&
-          currentScreen !== "wallet-connection-pending"
+          currentScreen !== "wallet-connection-pending" &&
+          currentScreen !== "receive"
         ) {
           setTimeout(() => {
             setCurrentScreen("connect")
           }, 0)
         }
       }
-    }, [isConnected, currentScreen, alreadyRedirectedToTokens, mode])
+    }, [
+      isConnected,
+      currentScreen,
+      alreadyRedirectedToTokens,
+      currentMode,
+      isNavigatingBack,
+    ])
 
     useEffect(() => {
       if (
@@ -660,12 +692,12 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         selectedToken &&
         (currentScreen === "send-form" || currentScreen === "fund-form")
       ) {
-        const targetScreen = mode === "fund" ? "fund-form" : "send-form"
+        const targetScreen = currentMode === "fund" ? "fund-form" : "send-form"
         if (currentScreen !== targetScreen) {
           setCurrentScreen(targetScreen)
         }
       }
-    }, [mode, currentScreen, selectedToken])
+    }, [currentMode, currentScreen, selectedToken])
 
     useEffect(() => {
       trackWidgetScreen({
@@ -688,14 +720,14 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 
     // Update generated calldata when amount changes in earn mode
     useEffect(() => {
-      if (selectedPool && mode === "earn" && generatedCalldata) {
+      if (selectedPool && currentMode === "earn" && generatedCalldata) {
         // The calldata will be updated via the onAmountUpdate callback
         // This effect ensures we have the initial calldata set up
         console.log(
           "Earn mode: Pool selected, calldata ready for amount updates",
         )
       }
-    }, [selectedPool, mode, generatedCalldata])
+    }, [selectedPool, currentMode, generatedCalldata])
 
     const handleWalletConnect = async (walletId: string) => {
       try {
@@ -755,12 +787,18 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         console.error("[trails-sdk] Failed to disconnect:", error)
       }
 
-      setCurrentScreen("connect")
+      if (currentMode === "receive") {
+        setCurrentScreen("receive")
+      } else {
+        setCurrentScreen("connect")
+      }
     }
 
     const handleContinue = () => {
-      if (mode === "swap") {
+      if (currentMode === "swap") {
         setCurrentScreen("swap")
+      } else if (currentMode === "receive") {
+        setCurrentScreen("receive")
       } else {
         setCurrentScreen("tokens")
       }
@@ -789,7 +827,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         setSelectedToken(token)
 
         // For earn mode, check if we have toAddress and toChainId specified
-        if (mode === "earn") {
+        if (currentMode === "earn") {
           if (toAddress && toChainId) {
             // Skip earn-pools and go directly to send-form when toAddress and toChainId are specified
             setCurrentScreen("send-form")
@@ -800,25 +838,15 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
             // Go to earn-pools for pool selection when no specific destination is set
             setCurrentScreen("earn-pools")
           }
-        } else if (mode === "swap") {
+        } else if (currentMode === "swap") {
           setCurrentScreen("swap")
+        } else if (currentMode === "receive") {
+          setCurrentScreen("send-form")
         } else {
-          setCurrentScreen(mode === "fund" ? "fund-form" : "send-form")
+          setCurrentScreen(currentMode === "fund" ? "fund-form" : "send-form")
         }
 
-        // Track the token in recent tokens
-        const chainInfo = getChainInfo(token.chainId)
-        const supportedToken: SupportedToken = {
-          id: `${token.symbol}-${chainInfo?.name || token.chainId}`,
-          symbol: token.symbol,
-          name: token.name,
-          contractAddress: token.contractAddress,
-          decimals: token.contractInfo?.decimals || 18,
-          chainId: token.chainId,
-          chainName: chainInfo?.name || `Chain ${token.chainId}`,
-          imageUrl: token.imageUrl,
-        }
-        addRecentToken(supportedToken)
+        handleTrackToken(token)
       } catch (err) {
         setError(
           err instanceof Error ? err.message : "An unknown error occurred",
@@ -846,13 +874,31 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       handleTokenSelect(token)
     }
 
+    const handleTrackToken = (token: Token) => {
+      // Track the token in recent tokens
+      const chainInfo = getChainInfo(token.chainId)
+      const supportedToken: SupportedToken = {
+        id: `${token.symbol}-${chainInfo?.name || token.chainId}`,
+        symbol: token.symbol,
+        name: token.name,
+        contractAddress: token.contractAddress,
+        decimals: token.contractInfo?.decimals || (token as any).decimals || 18,
+        chainId: token.chainId,
+        chainName: chainInfo?.name || `Chain ${token.chainId}`,
+        imageUrl: token.imageUrl,
+      }
+      addRecentToken(supportedToken)
+    }
+
     const handleOnSend = async (amount: string, recipient: string) => {
       console.log("[trails-sdk] handleOnSend", amount, recipient)
     }
 
     const handleSendAnother = () => {
-      if (mode === "swap") {
+      if (currentMode === "swap") {
         setCurrentScreen("swap")
+      } else if (currentMode === "receive") {
+        setCurrentScreen("receive")
       } else {
         setCurrentScreen("tokens")
       }
@@ -861,7 +907,8 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 
     const resetState = useCallback(() => {
       setSelectedFundMethod("wallet")
-      setCurrentScreen("connect")
+      // Reset to appropriate screen based on mode
+      setCurrentScreen(currentMode === "receive" ? "receive" : "connect")
       setSelectedToken(null)
       setSelectedPool(null)
       setSelectedWalletId(null)
@@ -875,12 +922,14 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       setTransactionStates([])
       setPrepareSendQuote(null)
       setTotalCompletionSeconds(null)
+      setAlreadyRedirectedToTokens(false)
     }, [
       setDestinationTxHash,
       setDestinationChainId,
       setTransactionStates,
       setOriginTxHash,
       setOriginChainId,
+      currentMode,
     ])
 
     // Expose modal control methods via ref
@@ -906,6 +955,13 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 
     const handleBack = () => {
       setError(null)
+      console.log("[trails-sdk] handleBack", currentScreen)
+
+      // Set flag to prevent auto-selection when navigating back
+      if (setIsNavigatingBack) {
+        setIsNavigatingBack(true)
+      }
+
       switch (currentScreen) {
         case "fund-methods":
           setCurrentScreen("connect")
@@ -921,8 +977,11 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           setCurrentScreen("connect")
           setSelectedToken(null)
           break
+        case "receive":
+          setCurrentScreen("connect")
+          break
         case "send-form":
-          if (mode === "earn" && !toAddress && !toChainId) {
+          if (currentMode === "earn" && !toAddress && !toChainId) {
             setCurrentScreen("earn-pools")
           } else {
             setCurrentScreen("tokens")
@@ -934,14 +993,39 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           setSelectedToken(null)
           break
         case "wallet-confirmation":
-          setCurrentScreen(mode === "fund" ? "fund-form" : "send-form")
+          setCurrentScreen(
+            currentMode === "fund"
+              ? "fund-form"
+              : currentMode === "swap"
+                ? "swap"
+                : currentMode === "receive"
+                  ? "receive"
+                  : currentMode === "earn"
+                    ? "earn-pools"
+                    : "send-form",
+          )
           break
         case "qr-code-deposit":
-          setCurrentScreen(mode === "fund" ? "fund-form" : "send-form")
+          setCurrentScreen(
+            currentMode === "fund"
+              ? "fund-form"
+              : currentMode === "swap"
+                ? "swap"
+                : currentMode === "receive"
+                  ? "receive"
+                  : currentMode === "earn"
+                    ? "earn-pools"
+                    : "send-form",
+          )
           break
         case "receipt":
-          setCurrentScreen("tokens")
-          setSelectedToken(null)
+          // In receive mode, going back should go to receive screen
+          if (currentMode === "receive") {
+            setCurrentScreen("receive")
+          } else {
+            setCurrentScreen("tokens")
+            setSelectedToken(null)
+          }
           setDestinationTxHash("")
           setDestinationChainId(null)
           setOriginTxHash("")
@@ -967,6 +1051,13 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
         default:
           break
       }
+
+      // Reset the flag after a short delay to allow the screen change to complete
+      if (setIsNavigatingBack) {
+        setTimeout(() => {
+          setIsNavigatingBack(false)
+        }, 100)
+      }
     }
 
     function handleWalletConfirmComplete() {
@@ -1026,420 +1117,6 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       setTransactionStates([..._transactionStates])
     }
 
-    const handleDebugScreenSelect = async (screen: string) => {
-      // Reset necessary state based on the target screen
-      setError(null)
-
-      const dummySelectedToken = {
-        id: 1,
-        name: "USD Coin",
-        symbol: "USDC",
-        balance: parseUnits("1.99", 6)?.toString(),
-        imageUrl:
-          "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",
-        chainId: 1,
-        contractAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
-        contractInfo: {
-          decimals: 6,
-          symbol: "USDC",
-          name: "USD Coin",
-        },
-      }
-
-      const dummyQuote = await getNormalizedQuoteObject({
-        originAddress: "0x5A0fb747531bC369367CB031472b89ea4D5c6Df7",
-        originAmount: parseUnits("1", 6)?.toString(),
-        originTokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
-        originChainId: 1,
-        originTokenPriceUsd: "1",
-        destinationChainId: 137,
-        destinationTokenAddress: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
-        destinationAmount: parseUnits("0.97", 6)?.toString(),
-        destinationTokenPriceUsd: "1",
-      })
-
-      switch (screen) {
-        case "connect":
-          setSelectedToken(null)
-          setTransactionStates([])
-          setCurrentScreen("connect")
-          break
-        case "tokens":
-          if (isConnected) {
-            setSelectedToken(null)
-            setTransactionStates([])
-            setCurrentScreen("tokens")
-          }
-          break
-        case "send-form":
-          // Set dummy USDC token for debug mode
-          setSelectedToken(dummySelectedToken)
-          setTransactionStates([])
-          setCurrentScreen("send-form")
-          break
-        case "fund-form":
-          // Set dummy USDC token for debug mode
-          setSelectedToken(dummySelectedToken)
-          setTransactionStates([])
-          setCurrentScreen("fund-form")
-          break
-        case "wallet-confirmation":
-          // Set dummy USDC token for debug mode
-          setSelectedToken(dummySelectedToken)
-          setPrepareSendQuote(dummyQuote)
-          setTransactionStates([])
-          setShowWalletConfirmRetry(false)
-          setCurrentScreen("wallet-confirmation")
-          break
-        case "wallet-confirmation-retry":
-          // Set dummy USDC token for debug mode
-          setSelectedToken(dummySelectedToken)
-          setPrepareSendQuote(dummyQuote)
-          setTransactionStates([])
-          setShowWalletConfirmRetry(true)
-          setCurrentScreen("wallet-confirmation")
-          break
-        case "pending-1-item-0-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "pending",
-              label: "Swap",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-1-item-1-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-2-item-0-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "pending",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "pending",
-              label: "Swap",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-2-item-1-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "pending",
-              label: "Swap",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-2-item-2-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-3-item-0-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "pending",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "pending",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash:
-                "0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              explorerUrl:
-                "https://arbiscan.io/tx/0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              chainId: 42161,
-              state: "pending",
-              label: "Execute",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-3-item-1-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "pending",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash:
-                "0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              explorerUrl:
-                "https://arbiscan.io/tx/0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              chainId: 42161,
-              state: "pending",
-              label: "Execute",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-3-item-2-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash:
-                "0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              explorerUrl:
-                "https://arbiscan.io/tx/0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              chainId: 42161,
-              state: "pending",
-              label: "Execute",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "pending-3-item-3-confirmed":
-          // Set dummy transaction states for debug mode - showing all steps
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash:
-                "0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              explorerUrl:
-                "https://arbiscan.io/tx/0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              chainId: 42161,
-              state: "confirmed",
-              label: "Execute",
-            },
-          ])
-          setPrepareSendQuote(dummyQuote)
-          setCurrentScreen("pending")
-          break
-        case "receipt":
-          // Set dummy transaction states data for debug mode
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash:
-                "0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              explorerUrl:
-                "https://arbiscan.io/tx/0xf3b172111d2e64e9d4940d91097f04a0bbd0acc816e2cf49eec664c6f8fcaf76",
-              chainId: 42161,
-              state: "confirmed",
-              label: "Execute",
-            },
-          ])
-
-          setCurrentScreen("receipt")
-          break
-        case "receipt-failed":
-          // Set dummy transaction states data for debug mode
-          setTransactionStates([
-            {
-              transactionHash:
-                "0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x45bb2259631e73f32841a6058b0a4008c75bca296942bec6326d188978d5353d",
-              chainId: 137,
-              state: "confirmed",
-              label: "Transfer",
-            },
-            {
-              transactionHash:
-                "0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              explorerUrl:
-                "https://polygonscan.com/tx/0x6ff30196ca0d4998cc6928bca2ec282766eb3c3997535e0a61e0d69c9c9b16b8",
-              chainId: 137,
-              state: "confirmed",
-              label: "Swap & Bridge",
-            },
-            {
-              transactionHash: "",
-              explorerUrl: "",
-              chainId: 42161,
-              state: "failed",
-              label: "Execute",
-            },
-          ])
-
-          setCurrentScreen("receipt")
-          break
-        case "mesh-connect":
-          setCurrentScreen("mesh-connect")
-          break
-        case "wallet-connect":
-          setCurrentScreen("wallet-connect")
-          break
-        case "wallet-list":
-          setCurrentScreen("wallet-list")
-          break
-        case "wallet-connection-pending":
-          setSelectedWalletId("metamask")
-          setCurrentScreen("wallet-connection-pending")
-          break
-        case "wallet-connection-pending-retry":
-          setSelectedWalletId("metamask")
-          setShowWalletConnectionRetry(true)
-          setCurrentScreen("wallet-connection-pending")
-          break
-        case "fund-methods":
-          setCurrentScreen("fund-methods")
-          break
-        case "earn-pools":
-          setCurrentScreen("earn-pools")
-          break
-        case "swap":
-          setSelectedToken(null)
-          setTransactionStates([])
-          setCurrentScreen("swap")
-          break
-      }
-    }
-
     const handleSelectWalletConnect = () => {
       // Store the current connector as previous before switching to WalletConnect
       if (connector && connector.name !== "WalletConnect") {
@@ -1788,7 +1465,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
               onAmountUpdate={(amount: string) => {
                 if (
                   selectedPool &&
-                  mode === "earn" &&
+                  currentMode === "earn" &&
                   amount &&
                   amount !== ""
                 ) {
@@ -1807,7 +1484,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
                   setGeneratedCalldata(undefined)
                 }
               }}
-              mode={mode}
+              mode={currentMode}
               selectedPool={selectedPool}
               checkoutOnHandlers={checkoutOnHandlers}
             />
@@ -1865,6 +1542,8 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
               onElapsedTime={handleElapsedTime}
               transactionStates={transactionStates}
               quote={prepareSendQuote}
+              mode={currentMode}
+              onContinue={() => setCurrentScreen("receipt")}
             />
           )
         case "receipt":
@@ -1962,14 +1641,28 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
               fundMethod={selectedFundMethod}
               onNavigateToMeshConnect={handleNavigateToMeshConnect}
               onAmountUpdate={undefined}
-              mode={mode}
+              mode={currentMode}
               checkoutOnHandlers={checkoutOnHandlers}
+              recentTokens={recentTokens}
+              onRecentTokenSelect={handleRecentTokenSelect}
+              onTrackToken={handleTrackToken}
             />
           ) : (
             <div className="text-center p-4 rounded-lg text-gray-600 bg-gray-50 dark:text-gray-300 dark:bg-gray-800">
               Please connect wallet
             </div>
           )
+        case "receive":
+          return (
+            <Receive
+              accountAddress={toAddress || ""}
+              onBack={handleBack}
+              isConnected={isConnected}
+              onConnectWallet={() => setCurrentScreen("connect")}
+              onPay={() => setCurrentScreen("tokens")}
+              toChainId={toChainId ? Number(toChainId) : undefined}
+            />
+          )
         case "wallet-connection-pending":
           return (
             <WalletConnectionPending
@@ -2024,11 +1717,17 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
               layout
             >
               {renderScreenContent()}
+              {/* Error Display */}
               {error && (
-                <div className="border rounded-lg p-4 mt-4 bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800">
-                  <p className="text-sm break-words text-red-600 dark:text-red-200">
-                    {error}
-                  </p>
+                <div className="mt-2">
+                  <ErrorDisplay
+                    errorPrettified={getPrettifiedErrorMessage(
+                      error,
+                      "An error occured",
+                    )}
+                    error={error}
+                    severity="error"
+                  />
                 </div>
               )}
             </motion.div>
@@ -2042,6 +1741,25 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       return renderScreen()
     }
 
+    const defaultButtonText = useMemo(() => {
+      if (currentMode === "fund") {
+        return "Fund"
+      }
+      if (currentMode === "swap") {
+        return "Swap"
+      }
+      if (currentMode === "earn") {
+        return "Earn"
+      }
+      if (currentMode === "receive") {
+        return "Receive"
+      }
+      if (currentMode === "pay") {
+        return "Pay"
+      }
+      return "Pay"
+    }, [currentMode])
+
     return (
       <div className="flex flex-col items-center justify-center space-y-8 py-12">
         {!children ? (
@@ -2051,8 +1769,7 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
             onClick={() => setIsModalOpen(true)}
             className="trails-modal-button cursor-pointer font-semibold py-3 px-6 trails-font"
           >
-            {buttonText ||
-              (mode === "fund" ? "Fund" : mode === "swap" ? "Swap" : "Pay")}
+            {buttonText || defaultButtonText}
           </motion.button>
         ) : (
           <motion.div
@@ -2118,20 +1835,20 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       const chains = [...Object.values(viemChains)] as any
       const baseConfig = {
         chains,
-        transports: (chains as Array<Chain>).reduce(
-          (acc, chain) => ({
+        transports: (chains as Array<Chain>).reduce((acc, chain) => {
+          const sequenceRpcUrl = getRpcUrl(chain.id, props.appId)
+          return {
             ...acc,
-            [chain.id]: http(),
-          }),
-          {},
-        ) as Record<number, ReturnType<typeof http>>,
+            [chain.id]: sequenceRpcUrl ? http(sequenceRpcUrl) : http(),
+          }
+        }, {}) as Record<number, ReturnType<typeof http>>,
       }
 
       return createConfig({
         ...baseConfig,
         connectors: connectors,
       })
-    }, [])
+    }, [props.appId])
 
     // Create content with only the providers that don't exist in parent
     const content = (() => {