0xtrails 0.1.13 → 0.2.0

package/src/widget/widget.tsx

@@ -16,7 +16,7 @@ import React, {
 import { createPortal } from "react-dom"
 import type { Chain, WalletClient } from "viem"
 import { createWalletClient, custom, http, isAddress } from "viem"
-import * as viemChains from "viem/chains"
+import { getAllChains } from "../chains.js"
 import type { Connector } from "wagmi"
 import {
   createConfig,
@@ -36,25 +36,29 @@ import Footer from "./components/Footer.js"
 import Modal from "./components/Modal.js"
 import Receipt from "./components/Receipt.js"
 import { WalletList } from "./components/WalletList.js"
-import { PaySendForm } from "./components/PaySendForm.js"
+import { Pay } from "./components/Pay.js"
 import TokenList from "./components/TokenList.js"
 import TransferPending from "./components/TransferPendingVertical.js"
 import WalletConfirmation from "./components/WalletConfirmation.js"
 import QRCodeDeposit from "./components/QRCodeDeposit.js"
 import { ThemeProvider } from "./components/ThemeProvider.js"
+import { ToastProvider } from "./components/Toast.js"
 import {
   getCommitHash,
   getSequenceNodeGatewayUrl,
   setWalletConnectProjectId,
   setSequenceNodeGatewayUrl,
+  getSequenceEnv,
 } from "../config.js"
-import { useAmountUsd } from "./hooks/useAmountUsd.js"
 import { useRecentTokens } from "./hooks/useRecentTokens.js"
+import { useTargetAmount } from "./hooks/useTargetAmount.js"
 import { getWethAddress } from "../tokens.js"
 import css from "./compiled.css?inline"
 import {
+  getAnalytics,
   getSessionId,
   trackWalletConnected,
+  trackWalletDisconnected,
   trackWidgetScreen,
 } from "../analytics.js"
 import type { PrepareSendQuote } from "../prepareSend.js"
@@ -70,15 +74,18 @@ import {
 import {
   setSequenceIndexerUrl,
   setSequenceApiUrl,
+  setTrailsApiUrl,
   setSequenceProjectAccessKey,
   getSequenceIndexerUrl,
   getSequenceApiUrl,
+  getTrailsApiUrl,
   setSequenceEnv,
   setSlippageTolerance,
   getSequenceProjectAccessKey,
   setDebug,
 } from "../config.js"
-import { FundSendForm } from "./components/FundSendForm.js"
+import { Fund } from "./components/Fund.js"
+import { Recipients } from "./components/Recipients.js"
 import { Swap } from "./components/Swap.js"
 import { Receive } from "./components/Receive.js"
 import { Earn } from "./components/Earn.js"
@@ -89,6 +96,8 @@ import FundMethods from "./components/FundMethods.js"
 import EarnPools from "./components/EarnPools.js"
 import WalletConnectionPending from "./components/WalletConnectionPending.js"
 import { AccountIntentTransactionHistory } from "./components/AccountIntentTransactionHistory.js"
+import { AccountSettings } from "./components/AccountSettings.js"
+import { UserPreferences } from "./components/UserPreferences.js"
 import type { Mode } from "../mode.js"
 import type { OnCompleteProps } from "./hooks/useSendForm.js"
 import type { Pool } from "../pools.js"
@@ -112,8 +121,13 @@ import {
   useOriginSelectedToken as useSelectedToken,
 } from "./hooks/useOriginSelectedToken.js"
 import { DestinationSelectedTokenProvider } from "./hooks/useDestinationSelectedToken.js"
+import { SelectedRecipientProvider } from "./hooks/useSelectedRecipient.js"
+import { SwapAmountProvider } from "./hooks/useSwapAmount.js"
 import { ChainFilterProvider } from "./hooks/useChainFilter.js"
 import { BalanceVisibleProvider } from "./hooks/useBalanceVisible.js"
+import { SwapSettingsProvider } from "./hooks/useSwapSettings.js"
+import { ThemeProvider as ThemePreferenceProvider } from "./hooks/useTheme.js"
+import { ThemeSyncer } from "./components/ThemeSyncer.js"
 import { EarnPoolProvider, useEarnPool } from "./hooks/useEarnPool.js"
 import { WidgetPropsProvider, useWidgetProps } from "./hooks/useWidgetProps.js"
 import {
@@ -122,6 +136,7 @@ import {
   type Screen,
 } from "./hooks/useCurrentScreen.js"
 import { BackProvider, useBack } from "./hooks/useBack.js"
+import { DefaultTokenSelectionProvider } from "./hooks/useDefaultTokenSelection.js"
 
 export const aaveClient = AaveClient.create()
 
@@ -143,6 +158,7 @@ export type TrailsWidgetProps = {
   projectAccessKey?: string
   sequenceIndexerUrl?: string | null
   sequenceApiUrl?: string | null
+  trailsApiUrl?: string | null
   sequenceNodeGatewayUrl?: string | null
   sequenceEnv?: RelayerEnv
   toAddress?: string | null
@@ -174,6 +190,8 @@ export type TrailsWidgetProps = {
     sessionId: string
     transactionStates: TransactionState[]
   }) => void
+  onOpen?: () => void
+  onClose?: () => void
 
   walletConnectProjectId?: string
   paymasterUrls?: Array<{ chainId: number; url: string }>
@@ -189,6 +207,12 @@ export type TrailsWidgetProps = {
   wagmiConnectors?: Connector[]
   debug?: boolean
   hideDisconnect?: boolean
+  toast?: boolean
+  appName?: string
+  appUrl?: string
+  appImageUrl?: string
+  appDescription?: string
+  payMessage?: string
 }
 
 export interface TrailsWidgetRef {
@@ -397,6 +421,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     onCheckoutComplete,
     onCheckoutError,
     onCheckoutStatusUpdate,
+    onOpen,
+    onClose,
     paymasterUrls,
     gasless,
     buttonText,
@@ -466,17 +492,24 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
       return
     }
 
-    const properInitialScreen = isConnected
-      ? currentMode === "swap"
-        ? "swap"
-        : currentMode === "receive"
-          ? "receive"
-          : currentMode === "earn"
-            ? "earn"
-            : "tokens"
-      : currentMode === "receive"
-        ? "receive"
-        : "connect"
+    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"
+      }
+    } else if (currentMode === "receive") {
+      properInitialScreen = "receive"
+    }
 
     // Only update if the current screen is still the default
     if (currentScreen === "connect" || currentScreen === "receive") {
@@ -625,7 +658,11 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     toChainId?: number | string | null,
     toToken?: string | null,
   ) => {
-    const { data: pools, loading: poolsLoading } = usePools()
+    // Only fetch pools when mode is "earn" or "fund"
+    const shouldFetchPools = mode === "earn" || mode === "fund"
+    const { data: pools, loading: poolsLoading } = usePools({
+      enabled: shouldFetchPools,
+    })
 
     useEffect(() => {
       if (
@@ -761,11 +798,20 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         if (!alreadyRedirectedToTokens) {
           setAlreadyRedirectedToTokens(true)
           logger.console.log(
-            "[trails-sdk] alreadyRedirectedToTokens",
-            alreadyRedirectedToTokens,
+            "[trails-sdk] Post-connection navigation triggered",
+            {
+              currentScreen,
+              alreadyRedirectedToTokens,
+              isConnected,
+              currentMode,
+            },
           )
           // Route to appropriate screen based on mode
-          if (currentMode === "swap") {
+          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")
@@ -827,6 +873,17 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     })
   }, [currentScreen, address])
 
+  // Identify user with Databeat whenever address changes
+  useEffect(() => {
+    const analytics = getAnalytics()
+    if (address) {
+      analytics.identifyUser({ address })
+    } else {
+      // Unidentify when wallet is disconnected
+      analytics.unidentifyUser()
+    }
+  }, [address])
+
   useEffect(() => {
     if (!address || !chainId || !connector?.name) {
       return
@@ -950,6 +1007,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     try {
       await disconnectAsync()
       setAlreadyRedirectedToTokens(false)
+      trackWalletDisconnected()
     } catch (error) {
       logger.console.error("[trails-sdk] Failed to disconnect:", error)
     }
@@ -1027,12 +1085,13 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
   const handleTrackToken = (token: Token) => {
     // Track the token in recent tokens
     const chainInfo = getChainInfo(token.chainId)
+    const decimals = token.contractInfo?.decimals || (token as any).decimals
     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,
+      decimals,
       chainId: token.chainId,
       chainName: chainInfo?.name || `Chain ${token.chainId}`,
       imageUrl: token.imageUrl,
@@ -1089,27 +1148,28 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     clearHistory,
   ])
 
+  const handleOpenModal = useCallback(() => {
+    setIsModalOpen(true)
+    onOpen?.()
+  }, [onOpen])
+
+  const handleCloseModal = useCallback(() => {
+    setIsModalOpen(false)
+    resetState()
+    onClose?.()
+  }, [resetState, onClose])
+
   // Expose modal control methods via ref
   useImperativeHandle(
     ref,
     () => ({
-      openModal: () => {
-        setIsModalOpen(true)
-      },
-      closeModal: () => {
-        setIsModalOpen(false)
-        resetState()
-      },
+      openModal: handleOpenModal,
+      closeModal: handleCloseModal,
       isModalOpen,
     }),
-    [isModalOpen, resetState],
+    [isModalOpen, handleOpenModal, handleCloseModal],
   )
 
-  const handleCloseModal = () => {
-    setIsModalOpen(false)
-    resetState()
-  }
-
   function handleWalletConfirmComplete() {
     setCurrentScreen("pending")
   }
@@ -1411,14 +1471,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     }
   }
 
-  const {
-    amountUsd: targetAmountUsd,
-    amountUsdFormatted: targetAmountUsdFormatted,
-  } = useAmountUsd({
-    amount: toAmount,
-    token: toToken,
-    chainId: Number(toChainId),
-  })
+  const { targetAmountUsd, targetAmountUsdFormatted } = useTargetAmount()
 
   const renderScreenContent = () => {
     switch (currentScreen) {
@@ -1482,14 +1535,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           />
         )
       case "send-form":
-        return selectedToken && walletClient?.account ? (
-          <PaySendForm
+        return walletClient?.account ? (
+          <Pay
+            selectedToken={selectedToken}
             onSend={handleOnSend}
             onBack={handleBack}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
-            selectedToken={selectedToken}
             account={walletClient.account}
             toRecipient={
               selectedPool
@@ -1545,8 +1598,10 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
                 setGeneratedCalldata(undefined)
               }
             }}
-            selectedPool={selectedPool}
             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">
@@ -1554,30 +1609,32 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           </div>
         )
       case "fund-form":
-        return selectedToken && walletClient?.account ? (
-          <FundSendForm
+        return walletClient?.account ? (
+          <Fund
             onSend={handleOnSend}
             onBack={handleBack}
             onWaitingForWalletConfirm={handleWaitingForWalletConfirm}
             onConfirm={() => setCurrentScreen("pending")}
             onComplete={handleTransferComplete}
-            selectedToken={selectedToken}
             account={walletClient.account}
             toAmount={toAmount || undefined}
             toRecipient={toAddress || undefined}
             toChainId={toChainId ? Number(toChainId) : undefined}
             toToken={toToken || undefined}
+            toCalldata={toCalldata || undefined}
             walletClient={walletClient}
             onTransactionStateChange={handleTransactionStateChange}
             onError={handleSendError}
             paymasterUrls={paymasterUrls}
             gasless={gasless}
             setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-            toCalldata={toCalldata || undefined}
             quoteProvider={quoteProvider}
             fundMethod={selectedFundMethod}
             onNavigateToMeshConnect={handleNavigateToMeshConnect}
             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">
@@ -1642,15 +1699,29 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           <WalletList
             onBack={handleBack}
             onWalletSelect={(walletId) => {
+              console.log(
+                "[trails-sdk] Wallet selected from wallet-list:",
+                walletId,
+              )
               if (
                 allWallets.find((w) => w.id === walletId)?.connector ===
                 walletConnectConnector
               ) {
                 saveLastClickedWallet(walletId)
+                console.log(
+                  "[trails-sdk] WalletConnect selected, going to wallet-connect screen",
+                )
                 setCurrentScreen("wallet-connect")
               } else {
                 saveLastClickedWallet(walletId)
-                setCurrentScreen("wallet-connection-pending")
+                console.log(
+                  "[trails-sdk] Regular wallet selected, going to wallet-connection-pending",
+                )
+                // Reset the redirect flag to prevent immediate navigation
+                setAlreadyRedirectedToTokens(false)
+                setTimeout(() => {
+                  setCurrentScreen("wallet-connection-pending")
+                }, 100)
                 // Auto-trigger connection
                 setTimeout(() => {
                   handleWalletConnect(walletId)
@@ -1774,8 +1845,14 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
             onBack={handleBack}
           />
         )
+      case "account-settings":
+        return <AccountSettings onBack={handleBack} />
+      case "user-preferences":
+        return <UserPreferences onBack={handleBack} />
       case "chain-list":
         return <ChainList onBack={() => setCurrentScreen("tokens")} />
+      case "recipients":
+        return <Recipients onBack={handleBack} />
       case "disconnect":
         return (
           <Disconnect
@@ -1865,7 +1942,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         <motion.button
           whileHover={{ scale: 1.02 }}
           whileTap={{ scale: 0.98 }}
-          onClick={() => setIsModalOpen(true)}
+          onClick={handleOpenModal}
           className="trails-modal-button cursor-pointer font-semibold py-3 px-6 trails-font"
         >
           {buttonText || defaultButtonText}
@@ -1875,7 +1952,7 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
           whileHover={{ scale: 1.02 }}
           whileTap={{ scale: 0.98 }}
           className="flex flex-col items-center justify-center"
-          onClick={() => setIsModalOpen(true)}
+          onClick={handleOpenModal}
         >
           {children}
         </motion.div>
@@ -1902,21 +1979,34 @@ const WidgetInner = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
 
     return (
       <WidgetPropsProvider props={props}>
-        <CurrentScreenProvider initialScreen={initialScreen}>
-          <BackProvider>
-            <SelectedTokenProvider>
-              <DestinationSelectedTokenProvider>
-                <ChainFilterProvider>
-                  <BalanceVisibleProvider>
-                    <EarnPoolProvider>
-                      <WidgetContent ref={ref} />
-                    </EarnPoolProvider>
-                  </BalanceVisibleProvider>
-                </ChainFilterProvider>
-              </DestinationSelectedTokenProvider>
-            </SelectedTokenProvider>
-          </BackProvider>
-        </CurrentScreenProvider>
+        <ToastProvider>
+          <CurrentScreenProvider initialScreen={initialScreen}>
+            <BackProvider>
+              <SelectedTokenProvider>
+                <DestinationSelectedTokenProvider>
+                  <SelectedRecipientProvider>
+                    <SwapAmountProvider>
+                      <ChainFilterProvider>
+                        <BalanceVisibleProvider>
+                          <SwapSettingsProvider>
+                            <ThemePreferenceProvider>
+                              <ThemeSyncer />
+                              <EarnPoolProvider>
+                                <DefaultTokenSelectionProvider>
+                                  <WidgetContent ref={ref} />
+                                </DefaultTokenSelectionProvider>
+                              </EarnPoolProvider>
+                            </ThemePreferenceProvider>
+                          </SwapSettingsProvider>
+                        </BalanceVisibleProvider>
+                      </ChainFilterProvider>
+                    </SwapAmountProvider>
+                  </SelectedRecipientProvider>
+                </DestinationSelectedTokenProvider>
+              </SelectedTokenProvider>
+            </BackProvider>
+          </CurrentScreenProvider>
+        </ToastProvider>
       </WidgetPropsProvider>
     )
   },
@@ -1946,6 +2036,9 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       if (props.sequenceApiUrl) {
         setSequenceApiUrl(props.sequenceApiUrl)
       }
+      if (props.trailsApiUrl) {
+        setTrailsApiUrl(props.trailsApiUrl)
+      }
       if (props.sequenceNodeGatewayUrl) {
         setSequenceNodeGatewayUrl(props.sequenceNodeGatewayUrl)
       }
@@ -1963,6 +2056,7 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
       props.projectAccessKey,
       props.sequenceIndexerUrl,
       props.sequenceApiUrl,
+      props.trailsApiUrl,
       props.sequenceNodeGatewayUrl,
       props.sequenceEnv,
       props.walletConnectProjectId,
@@ -1971,7 +2065,7 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
     ])
 
     const wagmiConfig = React.useMemo(() => {
-      const chains = [...Object.values(viemChains)] as any
+      const chains = getAllChains() as any
       const baseConfig = {
         chains,
         transports: (chains as Array<Chain>).reduce((acc, chain) => {
@@ -2023,12 +2117,14 @@ export const TrailsWidget = forwardRef<TrailsWidgetRef, TrailsWidgetProps>(
           props.appId ||
           getSequenceProjectAccessKey(),
         env: {
+          env: props.sequenceEnv || getSequenceEnv(),
           indexerUrl: props.sequenceIndexerUrl || getSequenceIndexerUrl(),
           indexerGatewayUrl:
             props.sequenceIndexerUrl || getSequenceIndexerUrl(),
           nodeGatewayUrl:
             props.sequenceNodeGatewayUrl || getSequenceNodeGatewayUrl(),
           apiUrl: props.sequenceApiUrl || getSequenceApiUrl(),
+          trailsApiUrl: props.trailsApiUrl || getTrailsApiUrl(),
         },
       }
 

package/dist/address.d.ts

@@ -1,2 +0,0 @@
-export declare function truncateAddress(address: string, length?: number): string;
-//# sourceMappingURL=address.d.ts.map

package/dist/address.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"address.d.ts","sourceRoot":"","sources":["../src/address.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,SAAI,UAK1D"}

package/dist/proxyCaller.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"proxyCaller.d.ts","sourceRoot":"","sources":["../src/proxyCaller.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kCAAkC,kFACsB,CAAA;AA4BrE,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,MAAM,EACN,QAAQ,EACR,YAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,MAAM,EAAE,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;CACrB,iBAUA;AAED,wBAAgB,mCAAmC,CAAC,EAClD,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,kBAAkB,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAyCxE"}

package/src/address.ts

@@ -1,6 +0,0 @@
-export function truncateAddress(address: string, length = 4) {
-  if (!address) {
-    return ""
-  }
-  return `${address.slice(0, length + 2)}...${address.slice(-length)}`
-}