0xtrails 0.2.6 → 0.4.0

package/src/widget/hooks/useSelectedFeeToken.tsx

@@ -8,7 +8,19 @@ import React, {
   type ReactNode,
 } from "react"
 import { logger } from "../../logger.js"
-import { zeroAddress } from "viem"
+import { ethAddress, zeroAddress } from "viem"
+import { formatUsdAmountDisplay } from "../../tokenBalances.js"
+
+const ZERO_ADDRESS = zeroAddress.toLowerCase()
+const ETH_ADDRESS = ethAddress.toLowerCase()
+
+const normalizeAddress = (address?: string | null): string =>
+  (address ?? "").toLowerCase()
+
+const isNativeTokenAddress = (address?: string | null): boolean => {
+  const normalized = normalizeAddress(address)
+  return normalized === ZERO_ADDRESS || normalized === ETH_ADDRESS
+}
 
 // Define the FeeOption interface with balance check properties
 export interface FeeOption {
@@ -20,6 +32,7 @@ export interface FeeOption {
   notEnoughBalance?: boolean
   tokenImageUrl?: string
   chainId?: number
+  amountUsdDisplay?: string // Formatted USD display like "≈ $0.39"
 }
 
 // Token type with balance information
@@ -113,13 +126,14 @@ export const SelectedFeeTokenProvider: React.FC<
 
     // Add balance check and additional properties to each fee option
     const feeOptionsWithBalanceCheck = rawFeeOptions.map((option: any) => {
-      // For native token (zero address), check if user has enough native balance
-      if (option.tokenAddress === zeroAddress) {
+      // For native token (zero/ETH address), check if user has enough native balance
+      if (isNativeTokenAddress(option.tokenAddress)) {
         // Find the native token balance for the origin chain
         const nativeTokenInfo = availableTokens.find(
           (token) =>
-            token.contractAddress?.toLowerCase() ===
-              zeroAddress.toLowerCase() && token.chainId === originTokenChainId,
+            token.chainId === originTokenChainId &&
+            (isNativeTokenAddress(token.contractAddress) ||
+              !token.contractAddress),
         )
 
         const nativeBalance = nativeTokenInfo?.balance || "0"
@@ -131,6 +145,8 @@ export const SelectedFeeTokenProvider: React.FC<
           notEnoughBalance,
           tokenImageUrl: nativeTokenInfo?.imageUrl,
           chainId: originTokenChainId, // Native token is on the same chain as origin
+          amountUsdDisplay: formatUsdAmountDisplay(option.amountUsd),
+          amountUSD: option.amountUsd, // Normalize to uppercase for consistency
         }
       }
 
@@ -152,6 +168,8 @@ export const SelectedFeeTokenProvider: React.FC<
           notEnoughBalance,
           tokenImageUrl: userTokenBalance.imageUrl,
           chainId: userTokenBalance.chainId, // Use the actual token's chain ID
+          amountUsdDisplay: formatUsdAmountDisplay(option.amountUsd),
+          amountUSD: option.amountUsd, // Normalize to uppercase for consistency
         }
       }
 
@@ -161,6 +179,8 @@ export const SelectedFeeTokenProvider: React.FC<
         notEnoughBalance: true,
         tokenImageUrl: undefined,
         chainId: originTokenChainId, // Fallback to origin chain
+        amountUsdDisplay: formatUsdAmountDisplay(option.amountUsd),
+        amountUSD: option.amountUsd, // Normalize to uppercase for consistency
       }
     })
 
@@ -184,36 +204,17 @@ export const SelectedFeeTokenProvider: React.FC<
     return sortedFeeOptions
   }, [rawFeeOptions, originTokenChainId, availableTokens])
 
-  // Auto-select first fee option with sufficient balance (non-native token)
-  // Only auto-select on initial load, not when user explicitly chooses native gas
-  // If no ERC20 fee options are available, selectedFeeToken stays null (native gas)
+  // Auto-select first ERC20 fee option with sufficient balance
+  // Only auto-select if user hasn't made an explicit selection yet
   useEffect(() => {
-    logger.console.log(
-      "[trails-sdk] [FEE-SELECT] Auto-selection useEffect triggered:",
-      {
-        processedFeeOptionsLength: processedFeeOptions.length,
-        hasUserSelectedFeeOption,
-        selectedFeeToken,
-        willAutoSelect:
-          processedFeeOptions.length > 0 &&
-          !hasUserSelectedFeeOption &&
-          !selectedFeeToken,
-      },
-    )
-
-    // Only auto-select if:
-    // 1. We have fee options
-    // 2. User hasn't made an explicit selection yet
-    // 3. No fee token is currently selected
     if (
       processedFeeOptions.length > 0 &&
       !hasUserSelectedFeeOption &&
       !selectedFeeToken
     ) {
-      // Find first non-native token option with sufficient balance
+      // Find first token option with sufficient balance
       const firstValidOption = processedFeeOptions.find(
-        (option: FeeOption) =>
-          option.tokenAddress !== zeroAddress && !option.notEnoughBalance,
+        (option: FeeOption) => !option.notEnoughBalance,
       )
 
       if (firstValidOption) {
@@ -221,20 +222,14 @@ export const SelectedFeeTokenProvider: React.FC<
           "[trails-sdk] [FEE-SELECT] Auto-selecting first valid fee option:",
           firstValidOption,
         )
-        // Strip extra fields to match the format expected by prepareSend
-        const cleanOption: FeeOption = {
+        // Use internal setter to avoid marking as user selection
+        setSelectedFeeTokenInternal({
           tokenAddress: firstValidOption.tokenAddress,
           tokenSymbol: firstValidOption.tokenSymbol,
           tokenDecimals: firstValidOption.tokenDecimals,
           amount: firstValidOption.amount,
           amountUSD: firstValidOption.amountUSD,
-        }
-        // Use internal setter to avoid marking as user selection
-        setSelectedFeeTokenInternal(cleanOption)
-      } else {
-        logger.console.log(
-          "[trails-sdk] [FEE-SELECT] No valid ERC20 fee options available, will use native gas",
-        )
+        })
       }
     }
   }, [

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,
@@ -96,7 +95,6 @@ export type UseSendProps = {
   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)
@@ -720,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
 
@@ -743,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:",
@@ -759,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:",
@@ -802,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,
@@ -833,10 +829,7 @@ export function useSendForm({
         destinationTokenSymbol: selectedDestToken.symbol,
         fee: "0",
         client: walletClient,
-        apiClient,
         trailsClient,
-        originRelayer,
-        destinationRelayer,
         destinationCalldata: toCalldata,
         refundAddress,
         dryMode: isDryMode,
@@ -849,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,
       }
 
@@ -883,7 +875,6 @@ export function useSendForm({
     isDryMode,
     account,
     walletClient,
-    apiClient,
     trailsClient,
     selectedDestToken?.decimals,
     recipient,
@@ -897,10 +888,9 @@ export function useSendForm({
     toCalldata,
     refundAddress,
     paymasterUrls,
-    gasless,
     handleTransactionStateChange,
     isValidRecipient,
-    destTokenPrices?.[0]?.price?.value,
+    destTokenPrices?.[0]?.priceUsd,
     amount,
     selectedDestToken,
     selectedDestinationChain,
@@ -1080,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,
         })
@@ -1346,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
+}