0xtrails 0.8.2 → 0.8.4

package/src/widget/components/AccountIntentTransactionHistory.tsx

@@ -11,7 +11,7 @@ import { SearchInputField } from "./SearchInputField.js"
 import { Identicon } from "./Identicon.js"
 import { truncateAddress } from "../../utils.js"
 import { useConnections, useAccount, useWalletClient } from "wagmi"
-import { ChevronDown } from "lucide-react"
+import { ChevronDown, Info } from "lucide-react"
 import { getExplorerUrl } from "../../explorer.js"
 import { ErrorDisplay } from "./ErrorDisplay.js"
 import { logger } from "../../logger.js"
@@ -79,6 +79,7 @@ const TransactionItem: React.FC<{
     intentError,
     balancesError,
     hasIntentBalance,
+    recoverToken,
     refetchIntent,
   } = useIntentRecover({
     intentId: transaction.intentId && !refundTxHash ? transaction.intentId : "",
@@ -341,23 +342,54 @@ const TransactionItem: React.FC<{
               </svg>
             </a>
           ) : canRecover ? (
-            <button
-              type="button"
-              onClick={handleRecover}
-              disabled={
-                isRecovering ||
-                isLoadingIntent ||
-                isLoadingBalances ||
-                !!intentError ||
-                !!balancesError
-              }
-              className="flex items-center justify-center gap-1 py-1 px-3 rounded-md transition-colors cursor-pointer text-xs font-medium text-white bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
-              aria-label="Recover intent"
-            >
-              {isRecovering || isLoadingIntent || isLoadingBalances
-                ? "Recovering..."
-                : "Recover"}
-            </button>
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={handleRecover}
+                disabled={
+                  isRecovering ||
+                  isLoadingIntent ||
+                  isLoadingBalances ||
+                  !!intentError ||
+                  !!balancesError
+                }
+                className="flex items-center justify-center gap-1 py-1 px-3 rounded-md transition-colors cursor-pointer text-xs font-medium text-white bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                aria-label="Recover intent"
+              >
+                {isRecovering || isLoadingIntent || isLoadingBalances
+                  ? "Recovering..."
+                  : "Recover"}
+              </button>
+              {/* Info tooltip showing recoverable token details */}
+              {recoverToken &&
+                !isRecovering &&
+                !isLoadingIntent &&
+                !isLoadingBalances && (
+                  <div className="relative group">
+                    <Info
+                      className="w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-help"
+                      aria-label="Token balance info"
+                    />
+                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap z-50 pointer-events-none">
+                      <div className="flex flex-col gap-0.5">
+                        <span className="font-medium">
+                          Recover {recoverToken.symbol}
+                        </span>
+                        <span className="text-gray-300">
+                          {recoverToken.balanceFormatted} {recoverToken.symbol}
+                        </span>
+                        {recoverToken.balanceUsdDisplay && (
+                          <span className="text-gray-400">
+                            ≈ {recoverToken.balanceUsdDisplay}
+                          </span>
+                        )}
+                      </div>
+                      {/* Tooltip arrow */}
+                      <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-gray-900 dark:border-t-gray-700" />
+                    </div>
+                  </div>
+                )}
+            </div>
           ) : null}
           {recoverError && (
             <div className="w-full">

package/src/widget/components/ClassicSwap.tsx

@@ -18,7 +18,8 @@ import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
-import { useDefaultTokenSelection } from "../hooks/useDefaultTokenSelection.js"
+import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
+import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
 import { ChainList } from "./ChainList.js"
 import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
 import { TokenSelectorButton } from "./TokenSelectorButton.js"
@@ -71,6 +72,7 @@ interface ClassicSwapProps {
   onTrackToken?: (token: any) => void
   title?: string
   isSequenceWallet?: boolean
+  exactInputOnly?: boolean // When true, disables destination amount editing (exact input only)
 }
 
 export const ClassicSwap: React.FC<ClassicSwapProps> = ({
@@ -101,6 +103,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   onTrackToken,
   title = "Swap",
   isSequenceWallet = false,
+  exactInputOnly = false,
 }) => {
   const { mode } = useMode()
   const { isBalanceVisible } = useBalanceVisible()
@@ -113,12 +116,26 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
   const [isFlipped, setIsFlipped] = useState(false)
 
-  // Use new default token selection hook
-  const {
-    defaultOriginToken,
-    defaultDestinationToken,
-    isLoading: isLoadingDefaults,
-  } = useDefaultTokenSelection()
+  // Track manual selections to prevent auto-selection override
+  const [hasManualOriginSelection, setHasManualOriginSelection] =
+    useState(false)
+  const [hasManualDestinationSelection, setHasManualDestinationSelection] =
+    useState(false)
+
+  // Use a ref to track user actions to prevent race conditions with async state updates
+  const userActionRef = useRef({
+    hasManualOriginSelection: false,
+    hasManualDestinationSelection: false,
+    lastOriginSelectionTime: 0,
+    lastDestinationSelectionTime: 0,
+  })
+
+  // Use separated default token selection hooks
+  const { defaultOriginToken, isLoading: isLoadingOriginDefaults } =
+    useDefaultOriginToken()
+
+  const { defaultDestinationToken, isLoading: isLoadingDestinationDefaults } =
+    useDefaultDestinationToken(originToken)
 
   const [originChainId, setOriginChainId] = useState<number | null | undefined>(
     initialSelectedToken?.chainId || originToken?.chainId,
@@ -242,22 +259,33 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   }, [])
 
   // Handle buy amount input changes
-  const handleBuyAmountChange = useCallback((value: string) => {
-    setTradeType(TradeType.EXACT_OUTPUT)
-    setBuyAmount(value)
-    setSellAmount("")
-    setLastInputType("buy")
-  }, [])
+  const handleBuyAmountChange = useCallback(
+    (value: string) => {
+      // Prevent switching to EXACT_OUTPUT if exactInputOnly mode is enabled
+      if (exactInputOnly) return
 
-  // Handle buy input focus - clear field when user wants to type
-  const handleBuyInputFocus = useCallback(() => {
-    // When focusing on buy field and it's in EXACT_INPUT mode (showing calculated value), switch to EXACT_OUTPUT mode
-    if (tradeType === TradeType.EXACT_INPUT && !buyAmount) {
-      setBuyAmount("")
       setTradeType(TradeType.EXACT_OUTPUT)
+      setBuyAmount(value)
+      setSellAmount("")
       setLastInputType("buy")
+    },
+    [exactInputOnly],
+  )
+
+  // Handle buy input focus - only copy displayed value to state for editing
+  // Don't switch trade type or clear sellAmount here - that happens in handleBuyAmountChange
+  // This prevents unnecessary requotes when user just focuses without editing
+  const handleBuyInputFocus = useCallback(() => {
+    // Skip if exactInputOnly mode is enabled
+    if (exactInputOnly) return
+
+    // When focusing on buy field in EXACT_INPUT mode, copy the calculated value
+    // to buyAmount state so user can edit it. The actual mode switch happens
+    // when the user starts typing (in handleBuyAmountChange)
+    if (tradeType === TradeType.EXACT_INPUT && toAmountDisplay && !buyAmount) {
+      setBuyAmount(toAmountDisplay)
     }
-  }, [tradeType, buyAmount])
+  }, [tradeType, toAmountDisplay, buyAmount, exactInputOnly])
 
   // Update amounts when quote is received
   useEffect(() => {
@@ -283,9 +311,9 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }, [amountRaw, onAmountUpdate])
 
-  // Auto-select origin token using new hook
+  // Auto-select origin token using separated hook
   useEffect(() => {
-    if (!originToken && !isLoadingDefaults && defaultOriginToken) {
+    if (!originToken && !isLoadingOriginDefaults && defaultOriginToken) {
       logger.console.log(
         "[trails-sdk] Auto-selecting origin token:",
         defaultOriginToken,
@@ -293,13 +321,33 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       setOriginToken(defaultOriginToken as any)
       setOriginChainId(defaultOriginToken.chainId)
     }
-  }, [originToken, isLoadingDefaults, defaultOriginToken, setOriginToken])
+  }, [originToken, isLoadingOriginDefaults, defaultOriginToken, setOriginToken])
 
-  // Auto-select destination token using new hook
+  // Auto-select destination token using separated hook
   // Note: In swap mode, we still auto-select a destination even if toToken is provided,
   // since the user needs a starting point to modify
+  // IMPORTANT: Only auto-select if user hasn't made manual selections to prevent override
   useEffect(() => {
-    if (!destinationToken && !isLoadingDefaults && defaultDestinationToken) {
+    // Prevent race conditions by checking both state and ref
+    const hasRecentOriginSelection =
+      userActionRef.current.hasManualOriginSelection ||
+      hasManualOriginSelection ||
+      (userActionRef.current.lastOriginSelectionTime > 0 &&
+        Date.now() - userActionRef.current.lastOriginSelectionTime < 1000) // 1 second cooldown
+
+    const hasRecentDestSelection =
+      userActionRef.current.hasManualDestinationSelection ||
+      hasManualDestinationSelection ||
+      (userActionRef.current.lastDestinationSelectionTime > 0 &&
+        Date.now() - userActionRef.current.lastDestinationSelectionTime < 1000) // 1 second cooldown
+
+    if (
+      !destinationToken &&
+      !isLoadingDestinationDefaults &&
+      defaultDestinationToken &&
+      !hasRecentDestSelection &&
+      !hasRecentOriginSelection // Don't auto-select destination if user recently selected origin
+    ) {
       logger.console.log(
         "[trails-sdk] Auto-selecting destination token:",
         defaultDestinationToken,
@@ -315,8 +363,10 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }, [
     destinationToken,
-    isLoadingDefaults,
+    isLoadingDestinationDefaults,
     defaultDestinationToken,
+    hasManualDestinationSelection,
+    hasManualOriginSelection,
     setDestinationToken,
     setSelectedDestToken,
     setSelectedDestinationChain,
@@ -382,18 +432,35 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       setSelectedDestinationChain(newChain)
     }
 
-    if (tradeType === TradeType.EXACT_INPUT) {
-      // Move the user-entered sell amount into the buy field and treat it as exact output
-      setBuyAmount(tempSellAmount)
-      setSellAmount("")
-      setTradeType(TradeType.EXACT_OUTPUT)
-      setLastInputType("buy")
-    } else {
-      // If we were in EXACT_OUTPUT, use the current buy amount as the new sell amount
-      setSellAmount(tempBuyAmount)
-      setBuyAmount("")
+    // Flipping is an intentional user action, so maintain manual selection state
+    // Both tokens are still manually selected, just swapped
+    if (hasManualOriginSelection || hasManualDestinationSelection) {
+      setHasManualOriginSelection(true)
+      setHasManualDestinationSelection(true)
+    }
+
+    if (exactInputOnly) {
+      // When exactInputOnly is enabled, always maintain EXACT_INPUT mode
+      // Move the sell amount to the new origin (what was destination)
+      setSellAmount(tempSellAmount)
+      setBuyAmount("") // Clear buy amount to get fresh quote
       setTradeType(TradeType.EXACT_INPUT)
       setLastInputType("sell")
+    } else {
+      // Normal flip behavior - switch trade types
+      if (tradeType === TradeType.EXACT_INPUT) {
+        // Move the user-entered sell amount into the buy field and treat it as exact output
+        setBuyAmount(tempSellAmount)
+        setSellAmount("")
+        setTradeType(TradeType.EXACT_OUTPUT)
+        setLastInputType("buy")
+      } else {
+        // If we were in EXACT_OUTPUT, use the current buy amount as the new sell amount
+        setSellAmount(tempBuyAmount)
+        setBuyAmount("")
+        setTradeType(TradeType.EXACT_INPUT)
+        setLastInputType("sell")
+      }
     }
   }, [
     originToken,
@@ -410,12 +477,19 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     buyAmount,
     toAmountDisplay,
     amount,
+    hasManualOriginSelection,
+    hasManualDestinationSelection,
+    exactInputOnly,
   ])
 
   // Handle source token selection from full-screen selector
   const handleSourceTokenSelectorSelect = useCallback(
     (token: Token) => {
-      if (token.contractAddress === destinationToken?.contractAddress) {
+      // Only flip if it's the exact same token (same contract address AND chain ID)
+      if (
+        token.contractAddress === destinationToken?.contractAddress &&
+        token.chainId === destinationToken?.chainId
+      ) {
         handleFlip()
       }
 
@@ -433,6 +507,11 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       setOriginChainId(token.chainId)
       setShowSourceTokenSelector(false)
 
+      // Mark as manual selection to prevent auto-selection override
+      setHasManualOriginSelection(true)
+      userActionRef.current.hasManualOriginSelection = true
+      userActionRef.current.lastOriginSelectionTime = Date.now()
+
       onTrackToken?.(token)
       logger.console.log("[trails-sdk] selected origin token", token)
     },
@@ -443,6 +522,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       originToken,
       handleFlip,
       destinationToken?.contractAddress,
+      destinationToken?.chainId,
       destinationToken,
     ],
   )
@@ -450,7 +530,11 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   // Handle destination token selection from full-screen selector
   const handleDestinationTokenSelectorSelect = useCallback(
     (token: Token) => {
-      if (token.contractAddress === originToken?.contractAddress) {
+      // Only flip if it's the exact same token (same contract address AND chain ID)
+      if (
+        token.contractAddress === originToken?.contractAddress &&
+        token.chainId === originToken?.chainId
+      ) {
         handleFlip()
       }
 
@@ -464,6 +548,12 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       }
 
       setShowDestinationTokenSelector(false)
+
+      // Mark as manual selection to prevent auto-selection override
+      setHasManualDestinationSelection(true)
+      userActionRef.current.hasManualDestinationSelection = true
+      userActionRef.current.lastDestinationSelectionTime = Date.now()
+
       onTrackToken?.(token)
       logger.console.log("[trails-sdk] selected destination token", token)
     },
@@ -473,6 +563,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       setSelectedDestinationChain,
       onTrackToken,
       originToken?.contractAddress,
+      originToken?.chainId,
       handleFlip,
     ],
   )
@@ -480,7 +571,11 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   // Handle recent token selection
   const handleRecentTokenSelect = useCallback(
     (token: any) => {
-      if (token.contractAddress === originToken?.contractAddress) {
+      // Only flip if it's the exact same token (same contract address AND chain ID)
+      if (
+        token.contractAddress === originToken?.contractAddress &&
+        token.chainId === originToken?.chainId
+      ) {
         handleFlip()
       }
 
@@ -496,6 +591,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       handleSourceTokenSelectorSelect,
       handleDestinationTokenSelectorSelect,
       originToken?.contractAddress,
+      originToken?.chainId,
       handleFlip,
     ],
   )
@@ -748,17 +844,23 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   value={
                     tradeType === TradeType.EXACT_OUTPUT
                       ? buyAmount
-                      : toAmountDisplay || ""
+                      : buyAmount || toAmountDisplay || ""
+                  }
+                  onChange={
+                    exactInputOnly
+                      ? undefined
+                      : (e) => handleBuyAmountChange(e.target.value)
                   }
-                  onChange={(e) => handleBuyAmountChange(e.target.value)}
-                  onFocus={handleBuyInputFocus}
+                  onFocus={exactInputOnly ? undefined : handleBuyInputFocus}
                   isLoading={
                     isLoadingQuote && tradeType === TradeType.EXACT_INPUT
                   }
                   readOnly={
+                    exactInputOnly ||
                     (tradeType === TradeType.EXACT_INPUT && isLoadingQuote) ||
                     !!toAmount
                   }
+                  disabled={exactInputOnly}
                   showPlaceholderStyle={!amount}
                   variant="default"
                 />
@@ -780,31 +882,24 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
           </div>
 
           {/* Bottom Info Row */}
-          <div
-            className={
-              !prepareSendQuote?.destinationAmountUsdDisplay && !isLoadingQuote
-                ? "flex justify-end mt-4"
-                : "mt-4 flex items-center justify-between"
-            }
-          >
+          <div className="mt-4 flex items-center justify-between">
             {/* Destination Amount USD from Quote */}
-            {(prepareSendQuote?.destinationAmountUsdDisplay ||
-              (isLoadingQuote && tradeType === TradeType.EXACT_INPUT)) && (
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                ≈{" "}
-                {isLoadingQuote && tradeType === TradeType.EXACT_INPUT
-                  ? "$0.00"
-                  : prepareSendQuote?.destinationAmountUsdDisplay}
-              </div>
-            )}
+            <div className="text-xs text-gray-500 dark:text-gray-400">
+              {(prepareSendQuote?.destinationAmountUsdDisplay ||
+                (isLoadingQuote && tradeType === TradeType.EXACT_INPUT)) && (
+                <>
+                  ≈{" "}
+                  {isLoadingQuote && tradeType === TradeType.EXACT_INPUT
+                    ? "$0.00"
+                    : prepareSendQuote?.destinationAmountUsdDisplay}
+                </>
+              )}
+            </div>
 
-            {/* Dest Token Balance */}
+            {/* Dest Token Balance - always on right */}
             {destinationToken && (
-              <div className="flex justify-end">
-                <div className="text-xs text-gray-500 dark:text-gray-400">
-                  Balance:{" "}
-                  {isBalanceVisible ? destinationBalanceDisplay : "0.00"}
-                </div>
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                Balance: {isBalanceVisible ? destinationBalanceDisplay : "0.00"}
               </div>
             )}
           </div>

package/src/widget/components/DynamicSizeInputField.tsx

@@ -34,6 +34,7 @@ export const DynamicSizeInputField = forwardRef<
       showPlaceholderStyle = false,
       onFocus,
       onBlur,
+      disabled,
       ...restProps
     },
     ref,
@@ -88,6 +89,7 @@ export const DynamicSizeInputField = forwardRef<
         onChange={handleChange}
         onFocus={onFocus}
         onBlur={onBlur}
+        disabled={disabled}
         placeholder={placeholder}
         autoComplete="off"
         className={

package/src/widget/components/Fund.tsx

@@ -14,7 +14,8 @@ import { useSwapAmount } from "../hooks/useSwapAmount.js"
 import { useMode } from "../hooks/useMode.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
-import { useDefaultTokenSelection } from "../hooks/useDefaultTokenSelection.js" // Context version
+import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
+import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
 import { useTargetAmount } from "../hooks/useTargetAmount.js"
 import { TokenImage } from "./TokenImage.js"
 import { Identicon } from "./Identicon.js"
@@ -109,12 +110,12 @@ export const Fund: React.FC<FundProps> = ({
   const { setCurrentScreen } = useCurrentScreen()
   const { targetAmountUsd } = useTargetAmount()
 
-  // Use new default token selection hook
-  const {
-    defaultOriginToken,
-    defaultDestinationToken,
-    isLoading: isLoadingDefaults,
-  } = useDefaultTokenSelection()
+  // Use separated default token selection hooks
+  const { defaultOriginToken, isLoading: isLoadingOriginDefaults } =
+    useDefaultOriginToken()
+
+  const { defaultDestinationToken, isLoading: isLoadingDestinationDefaults } =
+    useDefaultDestinationToken(originToken)
 
   // Local state for fund-specific functionality
   const [isInputTypeUsd, setIsInputTypeUsd] = useState(false)
@@ -176,14 +177,14 @@ export const Fund: React.FC<FundProps> = ({
 
   // Auto-select origin and destination tokens using new hook
   useEffect(() => {
-    if (!originToken && !isLoadingDefaults && defaultOriginToken) {
+    if (!originToken && !isLoadingOriginDefaults && defaultOriginToken) {
       logger.console.log(
         "[trails-sdk] Auto-selecting origin token:",
         defaultOriginToken,
       )
       setOriginToken(defaultOriginToken as any)
     }
-  }, [originToken, isLoadingDefaults, defaultOriginToken, setOriginToken])
+  }, [originToken, isLoadingOriginDefaults, defaultOriginToken, setOriginToken])
 
   // Auto-select destination token using new hook
   useEffect(() => {
@@ -191,7 +192,7 @@ export const Fund: React.FC<FundProps> = ({
       !globalDestinationToken &&
       !toToken &&
       originToken &&
-      !isLoadingDefaults &&
+      !isLoadingDestinationDefaults &&
       defaultDestinationToken
     ) {
       logger.console.log(
@@ -214,7 +215,7 @@ export const Fund: React.FC<FundProps> = ({
     originToken,
     globalDestinationToken,
     toToken,
-    isLoadingDefaults,
+    isLoadingDestinationDefaults,
     defaultDestinationToken,
     setDestinationToken,
     setSelectedDestToken,

package/src/widget/components/FundSwap.tsx

@@ -44,6 +44,7 @@ interface FundProps {
   onRecentTokenSelect?: (token: Token) => void
   onTrackToken?: (token: any) => void
   isSequenceWallet?: boolean
+  exactInputOnly?: boolean
 }
 
 export const Fund: React.FC<FundProps> = (props) => {

package/src/widget/components/Pay.tsx

@@ -14,7 +14,8 @@ import { useSwapAmount } from "../hooks/useSwapAmount.js"
 import { useTokenList } from "../hooks/useTokenList.js"
 import { useMode } from "../hooks/useMode.js"
 import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
-import { useDefaultTokenSelection } from "../hooks/useDefaultTokenSelection.js" // Context version
+import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
+import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
 import { usePayMessage } from "../hooks/usePayMessage.js"
 import { useTargetAmount } from "../hooks/useTargetAmount.js"
 import { TokenImage } from "./TokenImage.js"
@@ -120,19 +121,19 @@ export const Pay: React.FC<PayProps> = ({
   const { setCurrentScreen } = useCurrentScreen()
   const { targetAmountUsd } = useTargetAmount()
 
-  // Use new default token selection hook
-  const {
-    defaultOriginToken,
-    defaultDestinationToken,
-    isLoading: isLoadingDefaults,
-  } = useDefaultTokenSelection()
+  // Use global origin token state or initial prop
+  const originToken = globalOriginToken || initialOriginToken
+
+  // Use separated default token selection hooks
+  const { defaultOriginToken, isLoading: isLoadingOriginDefaults } =
+    useDefaultOriginToken()
+
+  const { defaultDestinationToken, isLoading: isLoadingDestinationDefaults } =
+    useDefaultDestinationToken(originToken)
 
   // Use pay message hook for payment request display
   const { message: payMessage } = usePayMessage()
 
-  // Use global origin token state or initial prop
-  const originToken = globalOriginToken || initialOriginToken
-
   // Local state for pay-specific functionality
   const [tokenAmountForBackend, setTokenAmountForBackend] = useState("")
   const [inputDisplayValue, setInputDisplayValue] = useState("")
@@ -230,14 +231,14 @@ export const Pay: React.FC<PayProps> = ({
 
   // Auto-select origin token using new hook
   useEffect(() => {
-    if (!originToken && !isLoadingDefaults && defaultOriginToken) {
+    if (!originToken && !isLoadingOriginDefaults && defaultOriginToken) {
       logger.console.log(
         "[trails-sdk] Auto-selecting origin token:",
         defaultOriginToken,
       )
       setOriginToken(defaultOriginToken as any)
     }
-  }, [originToken, isLoadingDefaults, defaultOriginToken, setOriginToken])
+  }, [originToken, isLoadingOriginDefaults, defaultOriginToken, setOriginToken])
 
   // Initialize destination token from props or auto-select
   useEffect(() => {
@@ -347,7 +348,7 @@ export const Pay: React.FC<PayProps> = ({
       // Prefer global destination token if set
       const destTokenToUse = globalDestinationToken || defaultDestinationToken
 
-      if (destTokenToUse && !isLoadingDefaults) {
+      if (destTokenToUse && !isLoadingDestinationDefaults) {
         logger.console.log("[trails-sdk] Initializing destination token:", {
           symbol: destTokenToUse.symbol,
           chainId: destTokenToUse.chainId,
@@ -375,7 +376,7 @@ export const Pay: React.FC<PayProps> = ({
     toToken,
     globalDestinationToken,
     defaultDestinationToken,
-    isLoadingDefaults,
+    isLoadingDestinationDefaults,
     selectedDestToken?.symbol,
     setDestinationToken,
     setSelectedDestToken,