0xtrails 0.2.1 → 0.2.4

package/src/widget/components/EarnPools.tsx

@@ -109,11 +109,12 @@ export const EarnPools: React.FC<EarnPoolsProps> = ({
 
         // Search filter - split by spaces to allow "usdc base" type searches
         const searchTerms = searchFilter
+          .trim()
           .toLowerCase()
           .split(/\s+/)
           .filter((term) => term.length > 0)
         const searchMatch =
-          !searchFilter ||
+          !searchFilter.trim() ||
           searchTerms.every(
             (term) =>
               pool.token?.symbol?.toLowerCase().includes(term) ||

package/src/widget/components/Fund.tsx

@@ -48,6 +48,7 @@ interface FundProps {
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
   gasless?: boolean
+  isSequenceWallet?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
@@ -83,6 +84,7 @@ export const Fund: React.FC<FundProps> = ({
   onSend,
   paymasterUrls,
   gasless,
+  isSequenceWallet = false,
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
@@ -819,9 +821,11 @@ export const Fund: React.FC<FundProps> = ({
           <div className="flex items-center space-x-2">
             {/* Amount Input */}
             <div className="flex-1">
-              <div
-                className="flex items-center justify-start cursor-text"
+              <button
+                type="button"
+                className="flex items-center justify-start cursor-text bg-transparent border-none p-0 w-full"
                 onClick={() => inputRef.current?.focus()}
+                aria-label="Focus amount input"
               >
                 <div className="flex items-center">
                   <input
@@ -861,7 +865,7 @@ export const Fund: React.FC<FundProps> = ({
                     <div className="ml-2 animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
                   )}
                 </div>
-              </div>
+              </button>
             </div>
 
             {/* Token Selection Button */}
@@ -1050,7 +1054,7 @@ export const Fund: React.FC<FundProps> = ({
         <div className="relative">
           {toToken ? (
             /* Display only - destination token is fixed */
-            <div className="w-full flex items-center justify-between space-x-3 trails-bg-secondary trails-border-radius-list-button px-4 py-2">
+            <div className="w-full flex items-center justify-between space-x-3 trails-bg-secondary trails-border-radius-list-button px-4 py-2 pb-6">
               <div className="text-left">
                 <div className="font-medium trails-text-primary text-sm whitespace-nowrap">
                   Receiving amount
@@ -1059,17 +1063,26 @@ export const Fund: React.FC<FundProps> = ({
               <div className="flex items-center space-x-2">
                 {selectedDestToken ? (
                   <>
-                    <div className="font-medium trails-text-primary text-sm">
-                      {isLoadingQuote ? (
-                        <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
-                      ) : prepareSendQuote?.destinationAmountFormatted ? (
-                        <span className="whitespace-nowrap">
-                          {prepareSendQuote.destinationAmountFormatted}{" "}
-                          {selectedDestToken.symbol}
-                        </span>
-                      ) : (
-                        ""
-                      )}
+                    <div className="relative">
+                      <div className="font-medium trails-text-primary text-sm">
+                        {isLoadingQuote ? (
+                          <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+                        ) : prepareSendQuote?.destinationAmountFormatted ? (
+                          <span className="whitespace-nowrap">
+                            {prepareSendQuote.destinationAmountFormatted}{" "}
+                            {selectedDestToken.symbol}
+                          </span>
+                        ) : (
+                          ""
+                        )}
+                      </div>
+                      {/* USD Display - Hidden during loading, absolutely positioned */}
+                      {!isLoadingQuote &&
+                        prepareSendQuote?.destinationAmountUsdDisplay && (
+                          <div className="absolute top-full right-0 text-xs trails-text-muted mt-0.5">
+                            ≈ {prepareSendQuote.destinationAmountUsdDisplay}
+                          </div>
+                        )}
                     </div>
                     <TokenImage
                       symbol={selectedDestToken.symbol}
@@ -1095,7 +1108,7 @@ export const Fund: React.FC<FundProps> = ({
             <button
               type="button"
               onClick={() => setShowDestinationTokenSelector(true)}
-              className="w-full flex items-center justify-between space-x-3 hover:trails-hover-bg hover:bg-gray-50 dark:hover:bg-gray-700 trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
+              className="w-full flex items-center justify-between space-x-3 hover:trails-hover-bg hover:bg-gray-50 dark:hover:bg-gray-700 trails-border-radius-list-button px-4 py-2 pb-6 transition-all duration-200 cursor-pointer"
             >
               <div className="text-left">
                 <div className="font-medium trails-text-primary text-sm whitespace-nowrap">
@@ -1106,17 +1119,26 @@ export const Fund: React.FC<FundProps> = ({
               <div className="flex items-center space-x-2">
                 {selectedDestToken ? (
                   <>
-                    <div className="font-medium trails-text-primary text-sm">
-                      {isLoadingQuote ? (
-                        <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
-                      ) : prepareSendQuote?.destinationAmountFormatted ? (
-                        <span className="whitespace-nowrap">
-                          {prepareSendQuote.destinationAmountFormatted}{" "}
-                          {selectedDestToken.symbol}
-                        </span>
-                      ) : (
-                        ""
-                      )}
+                    <div className="relative">
+                      <div className="font-medium trails-text-primary text-sm">
+                        {isLoadingQuote ? (
+                          <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+                        ) : prepareSendQuote?.destinationAmountFormatted ? (
+                          <span className="whitespace-nowrap">
+                            {prepareSendQuote.destinationAmountFormatted}{" "}
+                            {selectedDestToken.symbol}
+                          </span>
+                        ) : (
+                          ""
+                        )}
+                      </div>
+                      {/* USD Display - Hidden during loading, absolutely positioned */}
+                      {!isLoadingQuote &&
+                        prepareSendQuote?.destinationAmountUsdDisplay && (
+                          <div className="absolute top-full right-0 text-xs trails-text-muted mt-0.5">
+                            ≈ {prepareSendQuote.destinationAmountUsdDisplay}
+                          </div>
+                        )}
                     </div>
                     <TokenImage
                       symbol={selectedDestToken.symbol}
@@ -1149,6 +1171,7 @@ export const Fund: React.FC<FundProps> = ({
         fundMethod={fundMethod}
         isSenderContractOnOrigin={isSenderContractOnOrigin}
         isSenderContractOnDestination={isSenderContractOnDestination}
+        isSequenceWallet={isSequenceWallet}
       />
 
       {/* Error Display */}

package/src/widget/components/Pay.tsx

@@ -45,6 +45,7 @@ interface PayProps {
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
   gasless?: boolean
+  isSequenceWallet?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
@@ -82,6 +83,7 @@ export const Pay: React.FC<PayProps> = ({
   onSend,
   paymasterUrls,
   gasless,
+  isSequenceWallet = false,
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
@@ -143,6 +145,18 @@ export const Pay: React.FC<PayProps> = ({
     allSupportedTokens: true, // Show all tokens for destination selection
   })
 
+  // Get origin token balance for display
+  const originTokenBalance = useMemo(() => {
+    if (!originToken || !filteredTokensFormatted) return null
+
+    return filteredTokensFormatted.find(
+      (token) =>
+        token.contractAddress?.toLowerCase() ===
+          originToken.contractAddress?.toLowerCase() &&
+        token.chainId === originToken.chainId,
+    )
+  }, [originToken, filteredTokensFormatted])
+
   // Use useSendForm for quote functionality with EXACT_OUTPUT trade type
   const {
     amountUsdDisplay,
@@ -729,8 +743,16 @@ export const Pay: React.FC<PayProps> = ({
                     <span>&nbsp;</span>
                   )}
                 </div>
+                {/* Token Balance */}
                 <div className="text-xs trails-text-muted">
-                  <span>&nbsp;</span>
+                  {originTokenBalance?.balanceFormatted ? (
+                    <>
+                      Balance: {originTokenBalance.balanceFormatted}{" "}
+                      {originToken?.symbol}
+                    </>
+                  ) : (
+                    <span>&nbsp;</span>
+                  )}
                 </div>
               </div>
             </div>
@@ -999,6 +1021,7 @@ export const Pay: React.FC<PayProps> = ({
         fundMethod={fundMethod}
         isSenderContractOnOrigin={isSenderContractOnOrigin}
         isSenderContractOnDestination={isSenderContractOnDestination}
+        isSequenceWallet={isSequenceWallet}
       />
 
       {/* Error Display */}

package/src/widget/components/Receive.tsx

@@ -104,7 +104,7 @@ export const Receive: React.FC<ReceiveProps> = ({
         {/* QR Code Section */}
         <div className="space-y-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
           <div className="flex justify-center">
-            <div className="flex flex-col items-center">
+            <div className="flex flex-col items-center" title={qrCodeUrl}>
               <QrCode url={qrCodeUrl} size={300} />
             </div>
           </div>

package/src/widget/components/Recipients.tsx

@@ -236,7 +236,8 @@ export const Recipients: React.FC<RecipientsProps> = ({
                 const isHighlighted =
                   searchQuery &&
                   isAddress(searchQuery) &&
-                  recipient.address.toLowerCase() === searchQuery.toLowerCase()
+                  recipient.address.toLowerCase() ===
+                    searchQuery.trim().toLowerCase()
 
                 return (
                   <button
@@ -339,7 +340,8 @@ export const Recipients: React.FC<RecipientsProps> = ({
                 const isHighlighted =
                   searchQuery &&
                   isAddress(searchQuery) &&
-                  wallet.address.toLowerCase() === searchQuery.toLowerCase()
+                  wallet.address.toLowerCase() ===
+                    searchQuery.trim().toLowerCase()
 
                 return (
                   <button

package/src/widget/components/RefundWarning.tsx

@@ -4,17 +4,21 @@ interface RefundWarningProps {
   fundMethod?: string
   isSenderContractOnOrigin?: boolean
   isSenderContractOnDestination?: boolean
+  isSequenceWallet?: boolean
 }
 
 export const RefundWarning: React.FC<RefundWarningProps> = ({
   fundMethod,
   isSenderContractOnOrigin,
   isSenderContractOnDestination,
+  isSequenceWallet = false,
 }) => {
   // Determine if we should show the warning
   const shouldShowWarning =
     fundMethod === "exchange" ||
-    (isSenderContractOnOrigin && !isSenderContractOnDestination)
+    (isSenderContractOnOrigin &&
+      !isSenderContractOnDestination &&
+      !isSequenceWallet)
 
   if (!shouldShowWarning) {
     return null

package/src/widget/components/SwapSettings.tsx

@@ -1,12 +1,12 @@
 import { Settings } from "lucide-react"
 import type React from "react"
 import { useEffect, useRef, useState } from "react"
-import { SwapDisplayMode } from "./SwapDisplayMode.js"
+// import { SwapDisplayMode } from "./SwapDisplayMode.js"
 import { SlippageToleranceSettings } from "./SlippageToleranceSettings.js"
-import { useSwapSettings } from "../hooks/useSwapSettings.js"
+// import { useSwapSettings } from "../hooks/useSwapSettings.js"
 
 export const SwapSettings: React.FC = () => {
-  const { isSimpleSwapMode, setIsSimpleSwapModeWithStorage } = useSwapSettings()
+  //const { isSimpleSwapMode, setIsSimpleSwapModeWithStorage } = useSwapSettings()
   const [isSettingsDropdownOpen, setIsSettingsDropdownOpen] = useState(false)
   const settingsDropdownRef = useRef<HTMLDivElement>(null)
 
@@ -27,10 +27,10 @@ export const SwapSettings: React.FC = () => {
     }
   }, [isSettingsDropdownOpen])
 
-  const handleModeSelect = (isSimple: boolean) => {
-    setIsSimpleSwapModeWithStorage(isSimple)
-    setIsSettingsDropdownOpen(false)
-  }
+  // const handleModeSelect = (isSimple: boolean) => {
+  //   setIsSimpleSwapModeWithStorage(isSimple)
+  //   setIsSettingsDropdownOpen(false)
+  // }
 
   return (
     <div className="relative" ref={settingsDropdownRef}>
@@ -47,10 +47,10 @@ export const SwapSettings: React.FC = () => {
       {isSettingsDropdownOpen && (
         <div className="absolute right-0 top-full mt-2 w-80 trails-bg-card rounded-lg shadow-lg border trails-border-primary z-20">
           <div className="p-4 space-y-4">
-            <SwapDisplayMode
+            {/* <SwapDisplayMode
               isSimpleMode={isSimpleSwapMode}
               onModeChange={handleModeSelect}
-            />
+            /> */}
 
             <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
               <SlippageToleranceSettings />

package/src/widget/components/TokenSelector.tsx

@@ -120,7 +120,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
     // Then apply search filtering
     if (!searchQuery.trim()) return true
 
-    const query = searchQuery.toLowerCase()
+    const query = searchQuery.trim().toLowerCase()
     return (
       recentToken.symbol.toLowerCase().includes(query) ||
       recentToken.name.toLowerCase().includes(query) ||

package/src/widget/components/WalletList.tsx

@@ -45,10 +45,11 @@ export const WalletList: React.FC<WalletListProps> = ({
   const filteredWalletOptions = useMemo(() => {
     if (!searchTerm.trim()) return prefilteredWalletOptions
 
+    const query = searchTerm.trim().toLowerCase()
     return prefilteredWalletOptions.filter((wallet) => {
       return (
-        wallet.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        wallet.id.toLowerCase().includes(searchTerm.toLowerCase())
+        wallet.name.toLowerCase().includes(query) ||
+        wallet.id.toLowerCase().includes(query)
       )
     })
   }, [prefilteredWalletOptions, searchTerm])
@@ -63,7 +64,6 @@ export const WalletList: React.FC<WalletListProps> = ({
         headerContent="More Wallets"
         headerContentAlign="left"
         onBack={onBack}
-        showAccountActions={true}
       />
 
       {/* Search Input */}

package/src/widget/hooks/useBack.tsx

@@ -1,4 +1,10 @@
-import { createContext, useContext, useState, useEffect } from "react"
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+} from "react"
 import type { ReactNode } from "react"
 import { useCurrentScreen, type Screen } from "./useCurrentScreen.js"
 import { logger } from "../../logger.js"
@@ -9,6 +15,11 @@ interface BackContextType {
   clearHistory: () => void
   isNavigatingBack: boolean
   getHistory: () => Screen[]
+  getBreadcrumbHistory: () => Screen[]
+  addBreadcrumb: (screen: Screen) => void
+  setAccountSettingsSource: (screen: Screen) => void
+  getAccountSettingsSource: () => Screen | null
+  setCurrentScreenWithBack: (screen: Screen, backTo?: Screen) => void
 }
 
 const BackContext = createContext<BackContextType | null>(null)
@@ -20,6 +31,9 @@ interface BackProviderProps {
 export function BackProvider({ children }: BackProviderProps) {
   const { currentScreen, setCurrentScreen } = useCurrentScreen()
   const [history, setHistory] = useState<Screen[]>([])
+  const [navigationStack, setNavigationStack] = useState<
+    Array<[Screen, Screen?]>
+  >([])
   const [isNavigatingBack, setIsNavigatingBack] = useState(false)
 
   // Track screen changes and update history
@@ -45,20 +59,83 @@ export function BackProvider({ children }: BackProviderProps) {
     })
   }, [currentScreen])
 
-  const canGoBack = history.length > 1
+  // Get the previous screen from navigation stack
+  const getPreviousScreen = (): Screen | null => {
+    if (navigationStack.length === 0) {
+      return null
+    }
+
+    // Find the current screen in the navigation stack
+    const currentIndex = navigationStack.findIndex(
+      ([screen]) => screen === currentScreen,
+    )
+    if (currentIndex === -1) {
+      return null
+    }
+
+    const currentEntry = navigationStack[currentIndex]
+    if (!currentEntry) {
+      return null
+    }
+    const [, backToScreen] = currentEntry
+
+    // If this screen has a specific back target, use it
+    if (backToScreen) {
+      return backToScreen
+    }
+
+    // Otherwise, go to the previous screen in the stack
+    if (currentIndex > 0) {
+      const previousEntry = navigationStack[currentIndex - 1]
+      if (previousEntry) {
+        const [previousScreen] = previousEntry
+        return previousScreen
+      }
+    }
+
+    return null
+  }
+
+  // Function to set current screen with optional back target
+  const setCurrentScreenWithBack = useCallback(
+    (screen: Screen, backTo?: Screen) => {
+      setNavigationStack((prevStack) => {
+        // Remove any existing entry for this screen
+        const filteredStack = prevStack.filter(
+          ([existingScreen]) => existingScreen !== screen,
+        )
+
+        // Add new entry
+        const newEntry: [Screen, Screen?] = backTo ? [screen, backTo] : [screen]
+        const newStack = [...filteredStack, newEntry]
+
+        // Keep stack limited to last 10 entries
+        if (newStack.length > 10) {
+          return newStack.slice(-10)
+        }
+
+        return newStack
+      })
+
+      setCurrentScreen(screen)
+    },
+    [setCurrentScreen],
+  )
+
+  const canGoBack = navigationStack.length > 0 || history.length > 1
 
   const goBack = canGoBack
     ? () => {
-        // Remove current screen and go to previous one
-        const newHistory = history.slice(0, -1)
-        const previousScreen = newHistory[newHistory.length - 1]
+        const previousScreen = getPreviousScreen()
 
         logger.console.log(
-          "[trails-sdk] goBack",
+          "[trails-sdk] goBack (navigation stack)",
           "previousScreen:",
           previousScreen,
           "currentScreen:",
           currentScreen,
+          "navigationStack:",
+          navigationStack,
         )
 
         // Set flag to prevent auto-selection when navigating back
@@ -67,24 +144,44 @@ export function BackProvider({ children }: BackProviderProps) {
         }
 
         if (previousScreen) {
-          setHistory(newHistory)
+          // Remove current screen from navigation stack
+          setNavigationStack((prevStack) =>
+            prevStack.filter(([screen]) => screen !== currentScreen),
+          )
           setCurrentScreen(previousScreen)
+        } else {
+          // Fallback: if no navigation stack, use regular history
+          const regularHistory = history
+          if (regularHistory.length > 1) {
+            const fallbackScreen = regularHistory[regularHistory.length - 2]
+            if (fallbackScreen) {
+              logger.console.log(
+                "[trails-sdk] goBack (fallback to regular history)",
+                "previousScreen:",
+                fallbackScreen,
+              )
+              setCurrentScreen(fallbackScreen)
+            }
+          }
         }
 
-        // Reset the flag after a short delay to allow the screen change to complete
+        // Reset the flag after a longer delay to allow the screen change to complete
+        // and prevent post-connection navigation from interfering with manual back navigation
         if (setIsNavigatingBack) {
           setTimeout(() => {
             setIsNavigatingBack(false)
-          }, 100)
+          }, 500)
         }
       }
     : undefined
 
   const clearHistory = () => {
     setHistory([currentScreen])
+    setNavigationStack([[currentScreen]])
   }
 
   const getHistory = () => history
+  const getBreadcrumbHistory = () => navigationStack.map(([screen]) => screen)
 
   const value: BackContextType = {
     goBack,
@@ -92,6 +189,11 @@ export function BackProvider({ children }: BackProviderProps) {
     clearHistory,
     isNavigatingBack,
     getHistory,
+    getBreadcrumbHistory,
+    addBreadcrumb: () => {}, // Deprecated, kept for compatibility
+    setAccountSettingsSource: () => {}, // Deprecated, kept for compatibility
+    getAccountSettingsSource: () => null, // Deprecated, kept for compatibility
+    setCurrentScreenWithBack,
   }
 
   return <BackContext.Provider value={value}>{children}</BackContext.Provider>

package/src/widget/hooks/useDefaultTokenSelection.tsx

@@ -187,7 +187,11 @@ function useDefaultTokenSelectionInternal(): UseDefaultTokenSelectionReturn {
           tokenWithInfo.contractInfo?.logoURI || tokenWithInfo.imageUrl || ""
         const decimals = token.contractInfo?.decimals
         if (!decimals) {
-          throw new Error("Decimals not found")
+          logger.console.warn("[trails-sdk] Missing decimals for token:", {
+            token: token.contractInfo,
+            chainId: token.chainId,
+          })
+          return null // Return null instead of throwing
         }
 
         return {

package/src/widget/hooks/useInitialRedirect.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react"
+import { useCurrentScreen, type Screen } from "./useCurrentScreen.js"
+import { useBack } from "./useBack.js"
+import { logger } from "../../logger.js"
+import type { Mode } from "../../mode.js"
+
+export function useInitialRedirect(
+  isConnected: boolean,
+  currentMode: Mode,
+  getInitialScreenForMode: (mode: Mode) => Screen,
+) {
+  const { setCurrentScreen } = useCurrentScreen()
+  const { getBreadcrumbHistory } = useBack()
+  const [hasConnectedBefore, setHasConnectedBefore] = useState(false)
+  const [isInitialScreenSet, setIsInitialScreenSet] = useState(false)
+
+  useEffect(() => {
+    if (!isConnected || isInitialScreenSet) {
+      return
+    }
+
+    // Check if this is the first time connecting (no previous wallet connected)
+    const isFirstTimeConnection = !hasConnectedBefore
+
+    if (isFirstTimeConnection) {
+      // First time connecting - go to appropriate mode screen
+      const initialScreen = getInitialScreenForMode(currentMode)
+      logger.console.log(
+        "[trails-sdk] First time connection, redirecting to:",
+        initialScreen,
+      )
+      setCurrentScreen(initialScreen)
+      setHasConnectedBefore(true)
+    } else {
+      // Subsequent connections - check if user came from account-settings
+      const breadcrumbHistory = getBreadcrumbHistory()
+      const lastBreadcrumbScreen =
+        breadcrumbHistory.length > 0
+          ? breadcrumbHistory[breadcrumbHistory.length - 1]
+          : null
+
+      if (lastBreadcrumbScreen === "account-settings") {
+        // User came from account-settings, return there
+        logger.console.log(
+          "[trails-sdk] Returning to account-settings after wallet connection",
+        )
+        setCurrentScreen("account-settings")
+      } else {
+        // User came from elsewhere, go to appropriate mode screen
+        const initialScreen = getInitialScreenForMode(currentMode)
+        logger.console.log(
+          "[trails-sdk] Subsequent connection, redirecting to:",
+          initialScreen,
+        )
+        setCurrentScreen(initialScreen)
+      }
+      setIsInitialScreenSet(true)
+    }
+  }, [
+    isConnected,
+    currentMode,
+    hasConnectedBefore,
+    getInitialScreenForMode,
+    setCurrentScreen,
+    getBreadcrumbHistory,
+    isInitialScreenSet,
+  ])
+
+  return { hasConnectedBefore, isInitialScreenSet }
+}

package/src/widget/hooks/useSelectedFeeToken.tsx

@@ -65,22 +65,16 @@ export const SelectedFeeTokenProvider: React.FC<
   const [availableTokens, setAvailableTokens] = useState<TokenWithBalance[]>([])
 
   // Wrapper to log all state changes to selectedFeeToken
-  const setSelectedFeeTokenInternal = useCallback(
-    (token: FeeOption | null) => {
-      logger.console.log(
-        "[trails-sdk] [FEE-SELECT] selectedFeeToken state changing:",
-        {
-          from: selectedFeeToken,
-          to: token,
-          fromNull: selectedFeeToken === null,
-          toNull: token === null,
-          stackTrace: new Error().stack?.split("\n").slice(2, 5).join("\n"), // Get call stack
-        },
-      )
-      setSelectedFeeTokenInternalRaw(token)
-    },
-    [selectedFeeToken],
-  )
+  const setSelectedFeeTokenInternal = useCallback((token: FeeOption | null) => {
+    logger.console.log(
+      "[trails-sdk] [FEE-SELECT] selectedFeeToken state changing:",
+      {
+        to: token,
+        toNull: token === null,
+      },
+    )
+    setSelectedFeeTokenInternalRaw(token)
+  }, [])
 
   // Wrapper to track when user makes an explicit selection
   const setSelectedFeeToken = useCallback(