0xtrails 0.2.5 → 0.3.0

package/src/widget/hooks/useSendForm.ts

@@ -10,7 +10,6 @@ import {
   zeroAddress,
 } from "viem"
 import { useAccount } from "wagmi"
-import { useAPIClient } from "../../apiClient.js"
 import { getChainInfo, useSupportedChains } from "../../chains.js"
 import { getFullErrorMessage, getPrettifiedErrorMessage } from "../../error.js"
 import {
@@ -18,11 +17,11 @@ import {
   TradeType,
   type PrepareSendReturn,
   type PrepareSendQuote,
+  type SelectedFeeToken,
 } from "../../prepareSend.js"
 import type { TransactionState } from "../../transactions.js"
 import { getTokenPrice, useTokenPrices, normalizeNumber } from "../../prices.js"
 import { useQueryParams } from "../../queryParams.js"
-import { getRelayer } from "../../relayer.js"
 import {
   formatRawAmount,
   formatUsdAmountDisplay,
@@ -84,19 +83,18 @@ export type OnCompleteProps = {
 }
 
 export type UseSendProps = {
-  account: Account
+  account?: Account
   toAmount?: string
   toRecipient?: string
   toChainId?: number
   toToken?: string
   toCalldata?: string
   refundAddress?: string
-  walletClient: WalletClient
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (quote: PrepareSendQuote) => void
   paymasterUrls?: PaymasterUrl[]
-  gasless?: boolean
   onSend: (amount: string, recipient: string) => void
   onConfirm: () => void
   onComplete: (result: OnCompleteProps) => void
@@ -165,7 +163,7 @@ export type UseSendReturn = {
   destTokenPrices: TokenPrice[] | null
   sourceTokenPrices: TokenPrice[] | null
   selectedToken?: Token
-  selectedFeeToken: FeeOption | null
+  selectedFeeToken: SelectedFeeToken | undefined
   setIsChainDropdownOpen: (isOpen: boolean) => void
   setIsTokenDropdownOpen: (isOpen: boolean) => void
   toAmountFormatted: string
@@ -194,7 +192,6 @@ export function useSendForm({
   onError,
   onWaitingForWalletConfirm,
   paymasterUrls,
-  gasless,
   selectedToken,
   onSend,
   onConfirm,
@@ -435,7 +432,6 @@ export function useSendForm({
     }
   }, [selectedDestToken, defaultDestToken])
 
-  const apiClient = useAPIClient()
   const trailsClient = useTrailsClient()
 
   // Get user's token balances for balance checking
@@ -462,8 +458,8 @@ export function useSendForm({
       selectedDestToken && destTokenAddress && selectedDestinationChain?.id
         ? [
             {
-              tokenId: selectedDestToken.symbol,
-              contractAddress: destTokenAddress,
+              tokenSymbol: selectedDestToken.symbol,
+              tokenAddress: destTokenAddress,
               chainId: selectedDestinationChain.id,
             },
           ]
@@ -474,20 +470,20 @@ export function useSendForm({
 
   const { tokenPrices: destTokenPrices } = useTokenPrices(
     destTokenPricesInput,
-    apiClient,
+    trailsClient,
   )
 
   const { tokenPrices: sourceTokenPrices } = useTokenPrices(
     selectedToken
       ? [
           {
-            tokenId: selectedToken.symbol,
-            contractAddress: selectedToken.contractAddress,
+            tokenSymbol: selectedToken.symbol,
+            tokenAddress: selectedToken.contractAddress,
             chainId: selectedToken.chainId,
           },
         ]
       : [],
-    apiClient,
+    trailsClient,
   )
 
   // Update selectedChain when toChainId prop changes
@@ -569,7 +565,7 @@ export function useSendForm({
     selectedToken?.balance && selectedToken?.contractInfo?.decimals
       ? formatRawAmount(
           selectedToken.balance,
-          selectedToken.contractInfo?.decimals!,
+          selectedToken.contractInfo?.decimals,
         )
       : "0"
   const balanceUsdDisplay = selectedToken?.balanceUsdFormatted ?? ""
@@ -579,8 +575,8 @@ export function useSendForm({
   const amountUsdDisplay = useMemo(() => {
     const tokenPrice =
       tradeType === TradeType.EXACT_INPUT
-        ? (sourceTokenPrices?.[0]?.price?.value ?? 0) // For fund form, use source token price
-        : (destTokenPrices?.[0]?.price?.value ?? 0) // For payment form, use dest token price
+        ? (sourceTokenPrices?.[0]?.priceUsd ?? 0) // For fund form, use source token price
+        : (destTokenPrices?.[0]?.priceUsd ?? 0) // For payment form, use dest token price
     const amountUsd = Number(amount) * tokenPrice
     return formatUsdAmountDisplay(amountUsd)
   }, [amount, destTokenPrices, sourceTokenPrices, tradeType])
@@ -616,6 +612,11 @@ export function useSendForm({
 
   // Calculate raw amount (in wei/smallest unit)
   const amountRaw = useMemo(() => {
+    // Skip validation during initialization when no tokens are selected
+    if (!selectedToken && !selectedDestToken) {
+      return "0"
+    }
+
     if (
       !amount &&
       !(selectedToken?.contractInfo?.decimals || selectedDestToken?.decimals)
@@ -687,6 +688,7 @@ export function useSendForm({
   const getQuote = useCallback(async () => {
     // Only get quote if all required inputs are present
     if (
+      !account ||
       !amount ||
       !destinationTokenAddress ||
       !isValidRecipient ||
@@ -719,12 +721,6 @@ export function useSendForm({
       setError(null)
       setQuoteError(null)
 
-      const originRelayer = getRelayer(undefined, selectedToken.chainId)
-      const destinationRelayer = getRelayer(
-        undefined,
-        selectedDestinationChain.id,
-      )
-
       const sourceTokenDecimals = selectedToken.contractInfo?.decimals
       const destinationTokenDecimals = selectedDestToken.decimals
 
@@ -742,12 +738,16 @@ export function useSendForm({
       }
 
       let sourceTokenPriceUsd = selectedToken.tokenPriceUsd ?? null
-      let destinationTokenPriceUsd = destTokenPrices?.[0]?.price?.value ?? null
+      let destinationTokenPriceUsd = destTokenPrices?.[0]?.priceUsd ?? null
 
       if (!sourceTokenPriceUsd) {
         try {
-          const price = await getTokenPrice(apiClient, selectedToken)
-          sourceTokenPriceUsd = price?.price?.value ?? null
+          const price = await getTokenPrice(trailsClient, {
+            tokenAddress: selectedToken.contractAddress,
+            tokenSymbol: selectedToken.symbol,
+            chainId: selectedToken.chainId,
+          })
+          sourceTokenPriceUsd = price?.priceUsd ?? null
         } catch (error) {
           logger.console.error(
             "[trails-sdk] Error getting source token price:",
@@ -758,12 +758,12 @@ export function useSendForm({
 
       if (!destinationTokenPriceUsd) {
         try {
-          const price = await getTokenPrice(apiClient, {
-            tokenId: selectedDestToken.symbol,
-            contractAddress: destinationTokenAddress ?? "",
+          const price = await getTokenPrice(trailsClient, {
+            tokenSymbol: selectedDestToken.symbol,
+            tokenAddress: destinationTokenAddress ?? "",
             chainId: selectedDestinationChain.id,
           })
-          destinationTokenPriceUsd = price?.price?.value ?? null
+          destinationTokenPriceUsd = price?.priceUsd ?? null
         } catch (error) {
           logger.console.error(
             "[trails-sdk] Error getting destination token price:",
@@ -801,17 +801,14 @@ export function useSendForm({
       } else {
         const originChain = getChainInfo(selectedToken.chainId)
         const nativeTokenSymbol = originChain?.nativeCurrency?.symbol ?? ""
-        const nativePrice = await getTokenPrice(apiClient, {
-          tokenId: nativeTokenSymbol,
-          contractAddress: zeroAddress,
+        const nativePrice = await getTokenPrice(trailsClient, {
+          tokenSymbol: nativeTokenSymbol,
+          tokenAddress: zeroAddress,
           chainId: selectedToken.chainId,
         })
-        nativeTokenPriceUsd = nativePrice?.price?.value ?? 0
+        nativeTokenPriceUsd = nativePrice?.priceUsd ?? 0
       }
 
-      // Disable gasless for sequence-waas wallet
-      const effectiveGasless = walletId === "sequence-waas" ? false : gasless
-
       const options = {
         account,
         originTokenAddress: selectedToken.contractAddress,
@@ -832,10 +829,7 @@ export function useSendForm({
         destinationTokenSymbol: selectedDestToken.symbol,
         fee: "0",
         client: walletClient,
-        apiClient,
         trailsClient,
-        originRelayer,
-        destinationRelayer,
         destinationCalldata: toCalldata,
         refundAddress,
         dryMode: isDryMode,
@@ -848,13 +842,12 @@ export function useSendForm({
           paymasterUrls?.find(
             (p) => p.chainId.toString() === selectedToken.chainId.toString(),
           )?.url ?? undefined,
-        gasless: effectiveGasless,
         originNativeTokenPriceUsd: nativeTokenPriceUsd,
         quoteProvider: effectiveQuoteProvider,
         mode,
         fundMethod,
         checkoutOnHandlers,
-        selectedFeeToken,
+        selectedFeeToken: selectedFeeToken ?? undefined,
         walletId,
       }
 
@@ -882,7 +875,6 @@ export function useSendForm({
     isDryMode,
     account,
     walletClient,
-    apiClient,
     trailsClient,
     selectedDestToken?.decimals,
     recipient,
@@ -896,10 +888,9 @@ export function useSendForm({
     toCalldata,
     refundAddress,
     paymasterUrls,
-    gasless,
     handleTransactionStateChange,
     isValidRecipient,
-    destTokenPrices?.[0]?.price?.value,
+    destTokenPrices?.[0]?.priceUsd,
     amount,
     selectedDestToken,
     selectedDestinationChain,
@@ -945,6 +936,7 @@ export function useSendForm({
     selectedToken?.chainId,
     selectedToken?.balance,
     selectedToken?.tokenPriceUsd,
+    recipient, // Add recipient to trigger quote re-fetch when it changes
     // selectedFeeToken is passed to send() at execution time, not needed here
   ])
 
@@ -958,7 +950,8 @@ export function useSendForm({
   }, [prepareSendResult, toAmountFormatted])
 
   const quotedDestinationAmountDisplay = useMemo(() => {
-    return formatAmountDisplay(quotedDestinationAmount || "0")
+    const formattedAmount = formatAmount(quotedDestinationAmount || 0)
+    return Number(formattedAmount) === 0 ? "0" : formattedAmount
   }, [quotedDestinationAmount])
 
   // Set raw fee options in the hook whenever prepareSendResult changes
@@ -1077,15 +1070,15 @@ export function useSendForm({
         )
         // Wait for full send to complete
         const {
-          originUserTxReceipt,
+          depositUserTxnReceipt,
           originMetaTxnReceipt,
           destinationMetaTxnReceipt,
         } = await send({
           onOriginSend,
-          selectedFeeToken, // Pass current value at execution time
+          selectedFeeToken: selectedFeeToken ?? undefined, // Pass current value at execution time
         })
         logger.console.log("[trails-sdk] send() completed, receipts:", {
-          originUserTxReceipt,
+          depositUserTxnReceipt,
           originMetaTxnReceipt,
           destinationMetaTxnReceipt,
         })
@@ -1158,6 +1151,7 @@ export function useSendForm({
 
   // Get button text based on recipient and calldata
   const buttonText = useMemo(() => {
+    if (!account?.address) return "Connect your wallet"
     if (!selectedToken) return "Select a token"
     if (!amount) return "Enter an amount"
     if (!selectedDestToken?.symbol) return "Select a token"
@@ -1251,7 +1245,7 @@ export function useSendForm({
     amount,
     isValidRecipient,
     recipient,
-    account.address,
+    account?.address,
     selectedDestToken?.symbol,
     isWaitingForWalletConfirm,
     isSubmitting,
@@ -1342,7 +1336,7 @@ export function useSendForm({
     destTokenPrices: destTokenPrices ?? null,
     sourceTokenPrices: sourceTokenPrices ?? null,
     selectedToken,
-    selectedFeeToken,
+    selectedFeeToken: selectedFeeToken ?? undefined,
     setIsChainDropdownOpen,
     setIsTokenDropdownOpen,
     toAmountFormatted: quotedDestinationAmount,

package/src/widget/hooks/useTokenList.ts

@@ -17,7 +17,7 @@ import {
 } from "../../tokenBalances.js"
 import { getFormatttedTokenName, useSupportedTokens } from "../../tokens.js"
 import { useIndexerGatewayClient } from "../../indexerClient.js"
-import { useAPIClient } from "../../apiClient.js"
+import { useTrailsClient } from "../../trailsClient.js"
 import { useTokenPrices } from "../../prices.js"
 import { logger } from "../../logger.js"
 
@@ -136,7 +136,7 @@ export function useTokenList({
   const [searchQuery, setSearchQuery] = useState("")
   const { address } = useAccount()
   const indexerGatewayClient = useIndexerGatewayClient()
-  const apiClient = useAPIClient()
+  const trailsClient = useTrailsClient()
   const {
     sortedTokens: allSortedTokens,
     isLoadingSortedTokens,
@@ -160,8 +160,8 @@ export function useTokenList({
 
       return filteredTokens.map((token: any) => ({
         chainId: token.chainId,
-        contractAddress: token.contractAddress || zeroAddress,
-        tokenId: token.symbol,
+        tokenAddress: token.contractAddress || zeroAddress,
+        tokenSymbol: token.symbol,
       }))
     }
 
@@ -169,15 +169,15 @@ export function useTokenList({
 
     return supportedTokens.map((token: any) => ({
       chainId: token.chainId,
-      contractAddress: token.contractAddress || zeroAddress,
-      tokenId: token.symbol,
+      tokenAddress: token.contractAddress || zeroAddress,
+      tokenSymbol: token.symbol,
     }))
   }, [allSupportedTokens, supportedTokens, fundMethod])
 
   const {
     tokenPrices: supportedTokenPrices,
     isLoadingTokenPrices: isLoadingSupportedTokenPrices,
-  } = useTokenPrices(supportedTokensForPricing, apiClient)
+  } = useTokenPrices(supportedTokensForPricing, trailsClient)
 
   // Determine loading state based on fund method and allSupportedTokens
   const isLoadingTokens =
@@ -222,7 +222,7 @@ export function useTokenList({
         // Find price data for this token
         const priceData = supportedTokenPrices?.find(
           (p: any) =>
-            p.token.contractAddress?.toLowerCase() ===
+            p.token.tokenAddress?.toLowerCase() ===
               (token.contractAddress || zeroAddress).toLowerCase() &&
             p.token.chainId === token.chainId,
         )
@@ -237,10 +237,11 @@ export function useTokenList({
             balance: "0", // No balance info for QR code and exchange modes
             balanceUsd: 0,
             balanceUsdFormatted: "0",
-            price: priceData?.price || { value: 0, currency: "USD" },
-            price24hVol:
-              (priceData as unknown as { price24hVol: { value: number } })
-                ?.price24hVol?.value || 0,
+            price:
+              priceData?.priceUsd !== undefined
+                ? { value: priceData.priceUsd, currency: "USD" }
+                : { value: 0, currency: "USD" },
+            price24hVol: 0, // Volume data not available in new API
             imageUrl: token.imageUrl,
             symbol: token.symbol,
             isSufficientBalance: true, // Always true for QR code and exchange modes
@@ -254,10 +255,11 @@ export function useTokenList({
             balance: "0", // No balance info for QR code and exchange modes
             balanceUsd: 0,
             balanceUsdFormatted: "0",
-            price: priceData?.price || { value: 0, currency: "USD" },
-            price24hVol:
-              (priceData as unknown as { price24hVol: { value: number } })
-                ?.price24hVol?.value || 0,
+            price:
+              priceData?.priceUsd !== undefined
+                ? { value: priceData.priceUsd, currency: "USD" }
+                : { value: 0, currency: "USD" },
+            price24hVol: 0, // Volume data not available in new API
             imageUrl: token.imageUrl,
             contractInfo: {
               decimals: token.decimals,
@@ -520,8 +522,8 @@ export function useTokenList({
 
   const filteredTokensFormatted = useMemo(() => {
     // Get base formatted tokens
-    const baseFormattedTokens = filteredTokens.map(
-      (token: TokenBalanceExtended): TokenFormatted => {
+    const baseFormattedTokens = filteredTokens
+      .map((token: TokenBalanceExtended): TokenFormatted | null => {
         const isNative =
           !("contractAddress" in token) || token.contractAddress === zeroAddress
         const chainInfo = getChainInfo(token.chainId)
@@ -544,7 +546,15 @@ export function useTokenList({
         )
         const decimals = isNative ? 18 : token.contractInfo?.decimals
         if (!decimals) {
-          throw new Error("Decimals not found")
+          logger.console.warn(
+            "[trails-sdk] Missing decimals for token, skipping:",
+            {
+              token: isNative ? token : token.contractInfo,
+              chainId: token.chainId,
+              isNative,
+            },
+          )
+          return null // Return null to filter out tokens without decimals
         }
         const formattedBalance = formatRawAmount(token.balance, decimals)
         const priceUsd = Number(token.price?.value) ?? 0
@@ -611,8 +621,8 @@ export function useTokenList({
           isSufficientBalance,
           chainName,
         }
-      },
-    )
+      })
+      .filter(Boolean) as TokenFormatted[] // Filter out null values for tokens without decimals
 
     // If allSupportedTokens is true, combine with supported tokens
     if (allSupportedTokens) {
@@ -641,7 +651,7 @@ export function useTokenList({
           // Find price data for this supported token
           const priceData = supportedTokenPrices?.find(
             (p: any) =>
-              p.token.contractAddress?.toLowerCase() ===
+              p.token.tokenAddress?.toLowerCase() ===
                 (supportedToken.contractAddress || zeroAddress).toLowerCase() &&
               p.token.chainId === supportedToken.chainId,
           )
@@ -659,10 +669,8 @@ export function useTokenList({
             balance: "",
             balanceFormatted: "",
             balanceUsdFormatted: "",
-            priceUsd: priceData?.price?.value || 0,
-            price24hVol:
-              (priceData as unknown as { price24hVol: { value: number } })
-                ?.price24hVol?.value || 0, // Add price data for volume sorting
+            priceUsd: priceData?.priceUsd || 0,
+            price24hVol: 0, // Volume data not available in new API
             isSufficientBalance: true,
             // Use any type to bypass strict type checking for now
           } as any

package/src/widget/hooks/useWalletConnectionContext.tsx

@@ -0,0 +1,128 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react"
+import type { Screen } from "./useCurrentScreen.js"
+import { logger } from "../../logger.js"
+
+export type WalletConnectionPurpose =
+  | "general" // Default: switch active wallet
+  | "recipient-selection" // Don't switch, set as recipient only
+  | "fund-method-selection" // Don't switch, use for funding only
+
+interface WalletConnectionContextValue {
+  purpose: WalletConnectionPurpose
+  originScreen: Screen | null
+  connectedWalletAddress: string | null
+  originalActiveWalletAddress: string | null
+  originalActiveConnector: any | null
+}
+
+interface WalletConnectionContextType {
+  connectionContext: WalletConnectionContextValue
+  setConnectionContext: (
+    purpose: WalletConnectionPurpose,
+    originScreen?: Screen,
+    originalActiveWalletAddress?: string,
+    originalActiveConnector?: any,
+  ) => void
+  setConnectedWalletAddress: (address: string) => void
+  clearConnectionContext: () => void
+  isRecipientSelection: boolean
+  isFundMethodSelection: boolean
+}
+
+const WalletConnectionContext =
+  createContext<WalletConnectionContextType | null>(null)
+
+interface WalletConnectionProviderProps {
+  children: ReactNode
+}
+
+const DEFAULT_CONTEXT: WalletConnectionContextValue = {
+  purpose: "general",
+  originScreen: null,
+  connectedWalletAddress: null,
+  originalActiveWalletAddress: null,
+  originalActiveConnector: null,
+}
+
+export function WalletConnectionProvider({
+  children,
+}: WalletConnectionProviderProps) {
+  const [connectionContext, setContext] =
+    useState<WalletConnectionContextValue>(DEFAULT_CONTEXT)
+
+  const setConnectionContext = useCallback(
+    (
+      purpose: WalletConnectionPurpose,
+      originScreen?: Screen,
+      originalActiveWalletAddress?: string,
+      originalActiveConnector?: any,
+    ) => {
+      logger.console.log("[trails-sdk] Setting wallet connection context:", {
+        purpose,
+        originScreen,
+        originalActiveWalletAddress,
+        hasOriginalConnector: !!originalActiveConnector,
+      })
+      setContext({
+        purpose,
+        originScreen: originScreen || null,
+        connectedWalletAddress: null,
+        originalActiveWalletAddress: originalActiveWalletAddress || null,
+        originalActiveConnector: originalActiveConnector || null,
+      })
+    },
+    [],
+  )
+
+  const setConnectedWalletAddress = useCallback((address: string) => {
+    logger.console.log(
+      "[trails-sdk] Setting connected wallet address:",
+      address,
+    )
+    setContext((prev) => ({
+      ...prev,
+      connectedWalletAddress: address,
+    }))
+  }, [])
+
+  const clearConnectionContext = useCallback(() => {
+    logger.console.log("[trails-sdk] Clearing wallet connection context")
+    setContext(DEFAULT_CONTEXT)
+  }, [])
+
+  const isRecipientSelection =
+    connectionContext.purpose === "recipient-selection"
+  const isFundMethodSelection =
+    connectionContext.purpose === "fund-method-selection"
+
+  const value: WalletConnectionContextType = {
+    connectionContext,
+    setConnectionContext,
+    setConnectedWalletAddress,
+    clearConnectionContext,
+    isRecipientSelection,
+    isFundMethodSelection,
+  }
+
+  return (
+    <WalletConnectionContext.Provider value={value}>
+      {children}
+    </WalletConnectionContext.Provider>
+  )
+}
+
+export function useWalletConnectionContext() {
+  const context = useContext(WalletConnectionContext)
+  if (!context) {
+    throw new Error(
+      "useWalletConnectionContext must be used within a WalletConnectionProvider",
+    )
+  }
+  return context
+}