0xtrails 0.2.0 → 0.2.1

package/src/widget/widget.tsx

@@ -121,6 +121,7 @@ import {
   useOriginSelectedToken as useSelectedToken,
 } from "./hooks/useOriginSelectedToken.js"
 import { DestinationSelectedTokenProvider } from "./hooks/useDestinationSelectedToken.js"
+import { SelectedFeeTokenProvider } from "./hooks/useSelectedFeeToken.js"
 import { SelectedRecipientProvider } from "./hooks/useSelectedRecipient.js"
 import { SwapAmountProvider } from "./hooks/useSwapAmount.js"
 import { ChainFilterProvider } from "./hooks/useChainFilter.js"
@@ -137,6 +138,11 @@ import {
 } from "./hooks/useCurrentScreen.js"
 import { BackProvider, useBack } from "./hooks/useBack.js"
 import { DefaultTokenSelectionProvider } from "./hooks/useDefaultTokenSelection.js"
+import {
+  SelectedMeshExchangeProvider,
+  useSelectedMeshExchange,
+} from "./hooks/useSelectedMeshExchange.js"
+import { MeshConnectExchanges } from "./components/MeshConnectExchanges.js"
 
 export const aaveClient = AaveClient.create()
 
@@ -438,10 +444,16 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const { recentTokens, addRecentToken } = useRecentTokens(address)
   const { wallets: allWallets } = useWallets()
   const { selectedToken, setSelectedToken } = useSelectedToken()
+  const { selectedExchange } = useSelectedMeshExchange()
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [currentMode, setCurrentMode] = useState<Mode>(mode)
   const { currentScreen, setCurrentScreen } = useCurrentScreen()
-  const { goBack: handleBack, clearHistory, isNavigatingBack } = useBack()
+  const {
+    goBack: handleBack,
+    clearHistory,
+    isNavigatingBack,
+    getHistory,
+  } = useBack()
   const [previousAddress, setPreviousAddress] = useState<string | undefined>(
     address,
   )
@@ -486,6 +498,22 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const { connectAsync } = useConnect()
   const [isInitialScreenSet, setIsInitialScreenSet] = useState(false)
 
+  const getInitialScreenForMode = useCallback((mode: Mode) => {
+    if (mode === "swap") {
+      return "swap"
+    } else if (mode === "receive") {
+      return "receive"
+    } else if (mode === "earn") {
+      return "earn"
+    } else if (mode === "fund") {
+      return "fund-form"
+    } else if (mode === "pay") {
+      return "send-form"
+    } else {
+      return "account-settings"
+    }
+  }, [])
+
   // Set proper initial screen based on connection state and mode
   useEffect(() => {
     if (isInitialScreenSet) {
@@ -494,19 +522,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
 
     let properInitialScreen: Screen = "connect"
     if (isConnected) {
-      if (currentMode === "swap") {
-        properInitialScreen = "swap"
-      } else if (currentMode === "receive") {
-        properInitialScreen = "receive"
-      } else if (currentMode === "earn") {
-        properInitialScreen = "earn"
-      } else if (currentMode === "fund") {
-        properInitialScreen = "fund-form"
-      } else if (currentMode === "pay") {
-        properInitialScreen = "send-form"
-      } else {
-        properInitialScreen = "tokens"
-      }
+      properInitialScreen = getInitialScreenForMode(currentMode)
     } else if (currentMode === "receive") {
       properInitialScreen = "receive"
     }
@@ -527,6 +543,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     currentScreen,
     setCurrentScreen,
     isInitialScreenSet,
+    getInitialScreenForMode,
   ])
 
   const defaultButtonText = useMemo(() => {
@@ -797,6 +814,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       ) {
         if (!alreadyRedirectedToTokens) {
           setAlreadyRedirectedToTokens(true)
+          const history = getHistory()
           logger.console.log(
             "[trails-sdk] Post-connection navigation triggered",
             {
@@ -804,22 +822,48 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
               alreadyRedirectedToTokens,
               isConnected,
               currentMode,
+              history,
             },
           )
-          // Route to appropriate screen based on mode
-          if (currentMode === "fund") {
-            setCurrentScreen("fund-form")
-          } else if (currentMode === "pay") {
-            setCurrentScreen("send-form")
-          } else if (currentMode === "swap") {
-            setCurrentScreen("swap")
-          } else if (currentMode === "receive") {
-            setCurrentScreen("receive")
-          } else if (currentMode === "earn") {
-            setCurrentScreen("earn")
-          } else {
-            setCurrentScreen("tokens")
+
+          // 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 {
@@ -842,6 +886,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     currentMode,
     isNavigatingBack,
     setCurrentScreen,
+    getHistory,
+    getInitialScreenForMode,
   ])
 
   useEffect(() => {
@@ -910,6 +956,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       const screensToReset = [
         "send-form",
         "fund-form",
+        "swap",
         "wallet-confirmation",
         "earn",
         "swap",
@@ -919,7 +966,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         logger.console.log(
           "[trails-sdk] Resetting to tokens screen due to account change",
         )
-        setCurrentScreen("tokens")
+        const initialScreen = getInitialScreenForMode(currentMode)
+        setCurrentScreen(initialScreen)
         setSelectedToken(null)
         setError(null)
         setPrepareSendQuote(null)
@@ -933,8 +981,10 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     address,
     previousAddress,
     currentScreen,
+    currentMode,
     setSelectedToken,
     setCurrentScreen,
+    getInitialScreenForMode,
   ])
 
   // Update generated calldata when amount changes in earn mode
@@ -1026,8 +1076,12 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       setCurrentScreen("receive")
     } else if (currentMode === "earn") {
       setCurrentScreen("earn")
+    } else if (currentMode === "fund") {
+      setCurrentScreen("fund-form")
+    } else if (currentMode === "pay") {
+      setCurrentScreen("send-form")
     } else {
-      setCurrentScreen("tokens")
+      setCurrentScreen("account-settings")
     }
   }
 
@@ -1104,15 +1158,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   }
 
   const handleSendAnother = () => {
-    if (currentMode === "swap") {
-      setCurrentScreen("swap")
-    } else if (currentMode === "receive") {
-      setCurrentScreen("receive")
-    } else if (currentMode === "earn") {
-      setCurrentScreen("earn")
-    } else {
-      setCurrentScreen("tokens")
-    }
+    const initialScreen = getInitialScreenForMode(currentMode)
+    setCurrentScreen(initialScreen)
     resetState()
   }
 
@@ -1388,9 +1435,9 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }
 
-  const handleSelectExchange = () => {
+  const handleSelectExchangeList = () => {
     setSelectedFundMethod("exchange")
-    setCurrentScreen("tokens")
+    setCurrentScreen("mesh-connect-exchanges")
   }
 
   const handleNavigateToMeshConnect = (
@@ -1508,14 +1555,15 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           <FundMethods
             onBack={handleBack}
             onSelectWalletConnect={handleSelectWalletConnect}
-            onSelectExchange={handleSelectExchange}
+            onSelectExchangeList={handleSelectExchangeList}
             onSelectConnectedAccount={() => {
               setSelectedFundMethod("connected-account")
-              setCurrentScreen("tokens")
+              const initialScreen = getInitialScreenForMode(currentMode)
+              setCurrentScreen(initialScreen)
             }}
             onSelectQrCode={() => {
               setSelectedFundMethod("qr-code")
-              setCurrentScreen("tokens")
+              setCurrentScreen(getInitialScreenForMode(currentMode))
             }}
           />
         )
@@ -1683,6 +1731,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             toTokenAmount={meshConnectProps?.toTokenAmount}
             toChainId={meshConnectProps?.toChainId}
             toRecipientAddress={meshConnectProps?.toRecipientAddress}
+            selectedExchange={selectedExchange}
           />
         )
       case "wallet-connect":
@@ -1699,7 +1748,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           <WalletList
             onBack={handleBack}
             onWalletSelect={(walletId) => {
-              console.log(
+              logger.console.log(
                 "[trails-sdk] Wallet selected from wallet-list:",
                 walletId,
               )
@@ -1708,13 +1757,13 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
                 walletConnectConnector
               ) {
                 saveLastClickedWallet(walletId)
-                console.log(
+                logger.console.log(
                   "[trails-sdk] WalletConnect selected, going to wallet-connect screen",
                 )
                 setCurrentScreen("wallet-connect")
               } else {
                 saveLastClickedWallet(walletId)
-                console.log(
+                logger.console.log(
                   "[trails-sdk] Regular wallet selected, going to wallet-connection-pending",
                 )
                 // Reset the redirect flag to prevent immediate navigation
@@ -1818,7 +1867,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onBack={handleBack}
             isConnected={isConnected}
             onConnectWallet={() => setCurrentScreen("connect")}
-            onPay={() => setCurrentScreen("tokens")}
+            onPay={() => setCurrentScreen("send-form")}
             toChainId={toChainId ? Number(toChainId) : undefined}
           />
         )
@@ -1860,6 +1909,13 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             disconnectHandler={handleWalletDisconnect}
           />
         )
+      case "mesh-connect-exchanges":
+        return (
+          <MeshConnectExchanges
+            onBack={handleBack}
+            getInitialScreenForMode={getInitialScreenForMode}
+          />
+        )
       default:
         return null
     }
@@ -1984,24 +2040,28 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
             <BackProvider>
               <SelectedTokenProvider>
                 <DestinationSelectedTokenProvider>
-                  <SelectedRecipientProvider>
-                    <SwapAmountProvider>
-                      <ChainFilterProvider>
-                        <BalanceVisibleProvider>
-                          <SwapSettingsProvider>
-                            <ThemePreferenceProvider>
-                              <ThemeSyncer />
-                              <EarnPoolProvider>
-                                <DefaultTokenSelectionProvider>
-                                  <WidgetContent ref={ref} />
-                                </DefaultTokenSelectionProvider>
-                              </EarnPoolProvider>
-                            </ThemePreferenceProvider>
-                          </SwapSettingsProvider>
-                        </BalanceVisibleProvider>
-                      </ChainFilterProvider>
-                    </SwapAmountProvider>
-                  </SelectedRecipientProvider>
+                  <SelectedFeeTokenProvider>
+                    <SelectedRecipientProvider>
+                      <SwapAmountProvider>
+                        <ChainFilterProvider>
+                          <BalanceVisibleProvider>
+                            <SwapSettingsProvider>
+                              <ThemePreferenceProvider>
+                                <ThemeSyncer />
+                                <EarnPoolProvider>
+                                  <SelectedMeshExchangeProvider>
+                                    <DefaultTokenSelectionProvider>
+                                      <WidgetContent ref={ref} />
+                                    </DefaultTokenSelectionProvider>
+                                  </SelectedMeshExchangeProvider>
+                                </EarnPoolProvider>
+                              </ThemePreferenceProvider>
+                            </SwapSettingsProvider>
+                          </BalanceVisibleProvider>
+                        </ChainFilterProvider>
+                      </SwapAmountProvider>
+                    </SelectedRecipientProvider>
+                  </SelectedFeeTokenProvider>
                 </DestinationSelectedTokenProvider>
               </SelectedTokenProvider>
             </BackProvider>
@@ -2017,52 +2077,54 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     const sequenceHooksContext = useContext(SequenceHooksContext)
     const wagmiContext = useContext(WagmiContext)
 
-    useEffect(() => {
-      if (props.appId) {
-        logger.console.warn(
-          "appId is deprecated. Use projectAccessKey instead.",
-        )
-        setSequenceProjectAccessKey(props.appId)
-      }
-      if (props.sequenceEnv) {
-        setSequenceEnv(props.sequenceEnv)
-      }
-      if (props.projectAccessKey) {
-        setSequenceProjectAccessKey(props.projectAccessKey)
-      }
-      if (props.sequenceIndexerUrl) {
-        setSequenceIndexerUrl(props.sequenceIndexerUrl)
-      }
-      if (props.sequenceApiUrl) {
-        setSequenceApiUrl(props.sequenceApiUrl)
-      }
-      if (props.trailsApiUrl) {
-        setTrailsApiUrl(props.trailsApiUrl)
-      }
-      if (props.sequenceNodeGatewayUrl) {
-        setSequenceNodeGatewayUrl(props.sequenceNodeGatewayUrl)
-      }
-      if (props.walletConnectProjectId) {
-        setWalletConnectProjectId(props.walletConnectProjectId)
-      }
-      if (props.slippageTolerance !== undefined) {
-        setSlippageTolerance(String(props.slippageTolerance))
-      }
-      if (typeof props.debug === "boolean") {
-        setDebug(props.debug)
-      }
-    }, [
-      props.appId,
-      props.projectAccessKey,
-      props.sequenceIndexerUrl,
-      props.sequenceApiUrl,
-      props.trailsApiUrl,
-      props.sequenceNodeGatewayUrl,
-      props.sequenceEnv,
-      props.walletConnectProjectId,
-      props.slippageTolerance,
-      props.debug,
-    ])
+    // Set global configuration immediately when component renders
+    // This ensures the config is available before sequenceConfig is created
+    if (props.appId) {
+      logger.console.warn("appId is deprecated. Use projectAccessKey instead.")
+      setSequenceProjectAccessKey(props.appId)
+    }
+    if (props.sequenceEnv) {
+      logger.console.log("props.sequenceEnv", props.sequenceEnv)
+      setSequenceEnv(props.sequenceEnv)
+    }
+    if (props.projectAccessKey) {
+      logger.console.log("props.projectAccessKey", props.projectAccessKey)
+      setSequenceProjectAccessKey(props.projectAccessKey)
+    }
+    if (props.sequenceIndexerUrl) {
+      logger.console.log("props.sequenceIndexerUrl", props.sequenceIndexerUrl)
+      setSequenceIndexerUrl(props.sequenceIndexerUrl)
+    }
+    if (props.sequenceApiUrl) {
+      logger.console.log("props.sequenceApiUrl", props.sequenceApiUrl)
+      setSequenceApiUrl(props.sequenceApiUrl)
+    }
+    if (props.trailsApiUrl) {
+      logger.console.log("props.trailsApiUrl", props.trailsApiUrl)
+      setTrailsApiUrl(props.trailsApiUrl)
+    }
+    if (props.sequenceNodeGatewayUrl) {
+      logger.console.log(
+        "props.sequenceNodeGatewayUrl",
+        props.sequenceNodeGatewayUrl,
+      )
+      setSequenceNodeGatewayUrl(props.sequenceNodeGatewayUrl)
+    }
+    if (props.walletConnectProjectId) {
+      logger.console.log(
+        "props.walletConnectProjectId",
+        props.walletConnectProjectId,
+      )
+      setWalletConnectProjectId(props.walletConnectProjectId)
+    }
+    if (props.slippageTolerance !== undefined) {
+      logger.console.log("props.slippageTolerance", props.slippageTolerance)
+      setSlippageTolerance(String(props.slippageTolerance))
+    }
+    if (typeof props.debug === "boolean") {
+      logger.console.log("props.debug", props.debug)
+      setDebug(props.debug)
+    }
 
     const wagmiConfig = React.useMemo(() => {
       const chains = getAllChains() as any

package/dist/balanceInjector.d.ts

@@ -1,22 +0,0 @@
-export declare const TRAILS_CONTRACT_PLACEHOLDER_AMOUNT = 100720434726375746010458024839911619878118703404436202866098422983289408962287n;
-export declare function encodeBalanceInjectorCalldata({ token, target, calldata, amountOffset, placeholder, }: {
-    token: string;
-    target: string;
-    calldata: `0x${string}`;
-    amountOffset: number;
-    placeholder: bigint;
-}): `0x${string}`;
-export declare function wrapCalldataWithBalanceInjectorIfNeeded({ token, target, calldata, originChainId, destinationChainId, amount, originTokenAddress, destinationTokenAddress, }: {
-    token: string;
-    target: string;
-    calldata: `0x${string}`;
-    originChainId: number;
-    destinationChainId: number;
-    amount: string;
-    originTokenAddress: string;
-    destinationTokenAddress: string;
-}): {
-    encodedCalldata: `0x${string}`;
-    balanceInjectorAddress: string;
-} | null;
-//# sourceMappingURL=balanceInjector.d.ts.map

package/dist/balanceInjector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"balanceInjector.d.ts","sourceRoot":"","sources":["../src/balanceInjector.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kCAAkC,kFACsB,CAAA;AA4BrE,wBAAgB,6BAA6B,CAAC,EAC5C,KAAK,EACL,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,MAAM,EAAE,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;CACpB,iBAUA;AAED,wBAAgB,uCAAuC,CAAC,EACtD,KAAK,EACL,MAAM,EACN,QAAQ,EACR,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,kBAAkB,EAClB,uBAAuB,GACxB,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,MAAM,EAAE,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,MAAM,EAAE,MAAM,CAAA;IACd,kBAAkB,EAAE,MAAM,CAAA;IAC1B,uBAAuB,EAAE,MAAM,CAAA;CAChC,GAAG;IAAE,eAAe,EAAE,KAAK,MAAM,EAAE,CAAC;IAAC,sBAAsB,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA4C5E"}