0xtrails 0.2.1 → 0.2.4

package/src/widget/hooks/useSendForm.ts

@@ -1,6 +1,6 @@
 import type { TokenPrice } from "@0xsequence/trails-api"
 import type React from "react"
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState, useRef } from "react"
 import {
   type Account,
   getAddress,
@@ -441,6 +441,12 @@ export function useSendForm({
     allSupportedTokens: true, // Get all tokens for balance checking
   })
 
+  // Use ref to store latest filteredTokensFormatted without triggering re-renders
+  const filteredTokensFormattedRef = useRef(filteredTokensFormatted)
+  useEffect(() => {
+    filteredTokensFormattedRef.current = filteredTokensFormatted
+  }, [filteredTokensFormatted])
+
   const destTokenAddress = useTokenAddress({
     chainId: selectedDestinationChain?.id,
     tokenSymbol: selectedDestToken?.symbol,
@@ -945,7 +951,7 @@ export function useSendForm({
     return formatAmountDisplay(quotedDestinationAmount || "0")
   }, [quotedDestinationAmount])
 
-  // Set raw fee options in the hook whenever prepareSendResult or tokens change
+  // Set raw fee options in the hook whenever prepareSendResult changes
   useEffect(() => {
     const apiFeeOptions = prepareSendResult?.feeOptions?.feeOptions ?? []
     logger.console.log(
@@ -961,15 +967,9 @@ export function useSendForm({
     setRawFeeOptions(
       apiFeeOptions,
       selectedToken?.chainId,
-      filteredTokensFormatted,
+      filteredTokensFormattedRef.current,
     )
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    prepareSendResult,
-    selectedToken?.chainId,
-    filteredTokensFormatted,
-    setRawFeeOptions,
-  ])
+  }, [prepareSendResult, selectedToken?.chainId, setRawFeeOptions])
 
   const processSend = useCallback(async () => {
     try {

package/src/widget/hooks/useTokenList.ts

@@ -316,7 +316,16 @@ export function useTokenList({
     const imageUrl = token.imageUrl
     const decimals = isNative ? 18 : token.contractInfo?.decimals
     if (!decimals) {
-      throw new Error("Decimals not found")
+      logger.console.warn(
+        "[trails-sdk] [useTokenList] Missing decimals for token:",
+        {
+          token: token.contractInfo,
+          chainId: token.chainId,
+          isNative,
+        },
+      )
+      onError("Decimals not found [useTokenList]")
+      return
     }
 
     let formattedToken: Token
@@ -396,7 +405,7 @@ export function useTokenList({
       return sortedTokens
     }
 
-    const query = searchQuery.toLowerCase().trim()
+    const query = searchQuery.trim().toLowerCase()
     const queryParts = query.split(/\s+/).filter((part) => part.length > 0)
 
     const matchingTokens = sortedTokens.filter(

package/src/widget/widget.tsx

@@ -23,6 +23,7 @@ import {
   createStorage,
   useAccount,
   useConnect,
+  useConnections,
   useDisconnect,
   WagmiContext,
   WagmiProvider,
@@ -137,6 +138,7 @@ import {
   type Screen,
 } from "./hooks/useCurrentScreen.js"
 import { BackProvider, useBack } from "./hooks/useBack.js"
+import { useInitialRedirect } from "./hooks/useInitialRedirect.js"
 import { DefaultTokenSelectionProvider } from "./hooks/useDefaultTokenSelection.js"
 import {
   SelectedMeshExchangeProvider,
@@ -440,6 +442,17 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     hideDisconnect,
   } = useWidgetProps()
   const { address, isConnected, chainId, connector } = useAccount()
+
+  // Helper function to detect if the current connector is a Sequence wallet
+  const isSequenceWallet = useMemo(() => {
+    if (!connector) return false
+    const connectorName = connector.name?.toLowerCase() || ""
+    const connectorId = connector.id?.toLowerCase() || ""
+    return (
+      connectorName.includes("sequence") || connectorId.includes("sequence")
+    )
+  }, [connector])
+  const connections = useConnections()
   const { disconnectAsync } = useDisconnect()
   const { recentTokens, addRecentToken } = useRecentTokens(address)
   const { wallets: allWallets } = useWallets()
@@ -448,12 +461,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [currentMode, setCurrentMode] = useState<Mode>(mode)
   const { currentScreen, setCurrentScreen } = useCurrentScreen()
-  const {
-    goBack: handleBack,
-    clearHistory,
-    isNavigatingBack,
-    getHistory,
-  } = useBack()
+  const { goBack, clearHistory, isNavigatingBack, setCurrentScreenWithBack } =
+    useBack()
+
+  // Wrapper function that clears errors when going back
+  const handleBack = () => {
+    setError(null)
+    goBack?.()
+  }
   const [previousAddress, setPreviousAddress] = useState<string | undefined>(
     address,
   )
@@ -514,6 +529,13 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }, [])
 
+  // Use the simple initial redirect hook
+  const { hasConnectedBefore } = useInitialRedirect(
+    isConnected,
+    currentMode,
+    getInitialScreenForMode,
+  )
+
   // Set proper initial screen based on connection state and mode
   useEffect(() => {
     if (isInitialScreenSet) {
@@ -521,8 +543,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
 
     let properInitialScreen: Screen = "connect"
+
     if (isConnected) {
+      // For initial load, always go to the appropriate mode screen
       properInitialScreen = getInitialScreenForMode(currentMode)
+      logger.console.log(
+        "[trails-sdk] Initial load with connected wallet, going to mode screen:",
+        properInitialScreen,
+      )
     } else if (currentMode === "receive") {
       properInitialScreen = "receive"
     }
@@ -797,76 +825,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     isConnected,
   })
 
-  // redirect to tokens screen only once after initial connection
-  const [alreadyRedirectedToTokens, setAlreadyRedirectedToTokens] =
-    useState(false)
-
-  // Update screen based on connection state and mode
+  // Simple post-connection navigation - let the hook handle the logic
   useEffect(() => {
     if (isNavigatingBack) {
       return
     }
-    if (isConnected) {
-      if (
-        currentScreen === "connect" ||
-        currentScreen === "wallet-list" ||
-        currentScreen === "wallet-connection-pending"
-      ) {
-        if (!alreadyRedirectedToTokens) {
-          setAlreadyRedirectedToTokens(true)
-          const history = getHistory()
-          logger.console.log(
-            "[trails-sdk] Post-connection navigation triggered",
-            {
-              currentScreen,
-              alreadyRedirectedToTokens,
-              isConnected,
-              currentMode,
-              history,
-            },
-          )
-
-          // Check if we came from account-settings -> wallet-list pattern
-          // Look for this pattern in the last 4-5 screens to handle any intermediate screens
-          const historyLength = history.length
-          logger.console.log("[trails-sdk] Full navigation history:", history)
-
-          // Iterate from older to newer screens to find the pattern
-          let foundAccountSettings = false
-          let foundWalletListAfterAccountSettings = false
-
-          for (
-            let i = Math.max(0, historyLength - 5);
-            i < historyLength - 1;
-            i++
-          ) {
-            if (history[i] === "account-settings") {
-              foundAccountSettings = true
-            }
-            if (history[i] === "wallet-list" && foundAccountSettings) {
-              foundWalletListAfterAccountSettings = true
-              break // Found the pattern, no need to continue
-            }
-          }
-
-          if (foundAccountSettings && foundWalletListAfterAccountSettings) {
-            logger.console.log(
-              "[trails-sdk] Came from account-settings -> wallet-list flow, returning to account-settings",
-            )
-            setCurrentScreen("account-settings")
-            return
-          }
 
-          console.log(
-            "[trails-sdk] Using default navigation for mode:",
-            currentMode,
-          )
-
-          const initialScreen = getInitialScreenForMode(currentMode)
-          setCurrentScreen(initialScreen)
-        }
-      }
-    } else {
+    // Handle disconnection
+    if (!isConnected) {
       if (
         currentScreen !== "connect" &&
         currentScreen !== "wallet-connect" &&
@@ -879,25 +845,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         }, 0)
       }
     }
-  }, [
-    isConnected,
-    currentScreen,
-    alreadyRedirectedToTokens,
-    currentMode,
-    isNavigatingBack,
-    setCurrentScreen,
-    getHistory,
-    getInitialScreenForMode,
-  ])
-
-  useEffect(() => {
-    if (
-      currentScreen === "wallet-connection-pending" &&
-      alreadyRedirectedToTokens
-    ) {
-      setAlreadyRedirectedToTokens(false)
-    }
-  }, [currentScreen, alreadyRedirectedToTokens])
+  }, [isConnected, currentScreen, isNavigatingBack, setCurrentScreen])
 
   // Auto-detect mode changes and switch screens accordingly
   useEffect(() => {
@@ -1003,13 +951,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       setError(null)
       setIsConnecting(true)
 
-      // Handle special case for wallet-list screen
-      if (walletId === "wallet-list") {
-        setCurrentScreen("wallet-list")
-        setIsConnecting(false)
-        return
-      }
-
       const config = allWallets.find((w) => w.id === walletId)
       if (!config) {
         setError(`No configuration found for wallet: ${walletId}`)
@@ -1031,6 +972,26 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         )
         // Set the last clicked wallet after successful connection
         saveLastClickedWallet(walletId)
+
+        // Check if this is the first wallet connection
+        if (!hasConnectedBefore) {
+          // First connection - go to initial screen for the mode
+          const initialScreen = getInitialScreenForMode(currentMode)
+          logger.console.log(
+            "[trails-sdk] First wallet connection, going to initial screen:",
+            initialScreen,
+          )
+          setCurrentScreen(initialScreen)
+        } else {
+          // Subsequent connection - go to account-settings
+          logger.console.log(
+            "[trails-sdk] Subsequent wallet connection, going to account-settings",
+          )
+          setCurrentScreenWithBack(
+            "account-settings",
+            getInitialScreenForMode(currentMode),
+          )
+        }
       } else if (config.connector === walletConnectConnector) {
         // Store the current connector as previous before switching to WalletConnect
         if (connector && connector.name !== "WalletConnect") {
@@ -1055,8 +1016,31 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setError(null)
 
     try {
+      // Disconnect all connected wallets
+      logger.console.log(
+        "[trails-sdk] Disconnecting all connected wallets:",
+        connections.length,
+      )
+
+      // Disconnect each connection
+      for (const connection of connections) {
+        try {
+          await connection.connector.disconnect()
+          logger.console.log(
+            "[trails-sdk] Disconnected wallet:",
+            connection.connector.name,
+          )
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] Failed to disconnect wallet:",
+            connection.connector.name,
+            error,
+          )
+        }
+      }
+
+      // Also call the main disconnect to ensure cleanup
       await disconnectAsync()
-      setAlreadyRedirectedToTokens(false)
       trackWalletDisconnected()
     } catch (error) {
       logger.console.error("[trails-sdk] Failed to disconnect:", error)
@@ -1180,7 +1164,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setTransactionStates([])
     setPrepareSendQuote(null)
     setTotalCompletionSeconds(null)
-    setAlreadyRedirectedToTokens(false)
     clearHistory()
   }, [
     setDestinationTxHash,
@@ -1587,7 +1570,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           <Pay
             selectedToken={selectedToken}
             onSend={handleOnSend}
-            onBack={handleBack}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
@@ -1612,6 +1594,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
               selectedPool ? generatedCalldata : toCalldata || undefined
             }
             walletClient={walletClient}
+            isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
@@ -1660,7 +1643,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         return walletClient?.account ? (
           <Fund
             onSend={handleOnSend}
-            onBack={handleBack}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
@@ -1671,6 +1653,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             toToken={toToken || undefined}
             toCalldata={toCalldata || undefined}
             walletClient={walletClient}
+            isSequenceWallet={isSequenceWallet}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
@@ -1766,8 +1749,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
                 logger.console.log(
                   "[trails-sdk] Regular wallet selected, going to wallet-connection-pending",
                 )
-                // Reset the redirect flag to prevent immediate navigation
-                setAlreadyRedirectedToTokens(false)
+                // Don't reset the redirect flag - user has already been through initial flow
                 setTimeout(() => {
                   setCurrentScreen("wallet-connection-pending")
                 }, 100)
@@ -1788,7 +1770,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       case "earn":
         return walletClient?.account ? (
           <Earn
-            onBack={handleBack}
             onContinue={() => setCurrentScreen("send-form")}
             account={walletClient.account}
             walletClient={walletClient}
@@ -1829,7 +1810,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         return walletClient?.account ? (
           <Swap
             onSend={handleOnSend}
-            onBack={handleBack}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
@@ -1864,7 +1844,6 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         return (
           <Receive
             accountAddress={toAddress || ""}
-            onBack={handleBack}
             isConnected={isConnected}
             onConnectWallet={() => setCurrentScreen("connect")}
             onPay={() => setCurrentScreen("send-form")}