0xtrails 0.8.3 → 0.8.4

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,24 +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
+
+      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, toAmountDisplay, buyAmount])
+  }, [tradeType, toAmountDisplay, buyAmount, exactInputOnly])
 
   // Update amounts when quote is received
   useEffect(() => {
@@ -285,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,
@@ -295,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,
@@ -317,8 +363,10 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }, [
     destinationToken,
-    isLoadingDefaults,
+    isLoadingDestinationDefaults,
     defaultDestinationToken,
+    hasManualDestinationSelection,
+    hasManualOriginSelection,
     setDestinationToken,
     setSelectedDestToken,
     setSelectedDestinationChain,
@@ -384,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,
@@ -412,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()
       }
 
@@ -435,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)
     },
@@ -445,6 +522,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       originToken,
       handleFlip,
       destinationToken?.contractAddress,
+      destinationToken?.chainId,
       destinationToken,
     ],
   )
@@ -452,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()
       }
 
@@ -466,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)
     },
@@ -475,6 +563,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       setSelectedDestinationChain,
       onTrackToken,
       originToken?.contractAddress,
+      originToken?.chainId,
       handleFlip,
     ],
   )
@@ -482,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()
       }
 
@@ -498,6 +591,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
       handleSourceTokenSelectorSelect,
       handleDestinationTokenSelectorSelect,
       originToken?.contractAddress,
+      originToken?.chainId,
       handleFlip,
     ],
   )
@@ -752,15 +846,21 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                       ? buyAmount
                       : buyAmount || toAmountDisplay || ""
                   }
-                  onChange={(e) => handleBuyAmountChange(e.target.value)}
-                  onFocus={handleBuyInputFocus}
+                  onChange={
+                    exactInputOnly
+                      ? undefined
+                      : (e) => handleBuyAmountChange(e.target.value)
+                  }
+                  onFocus={exactInputOnly ? undefined : handleBuyInputFocus}
                   isLoading={
                     isLoadingQuote && tradeType === TradeType.EXACT_INPUT
                   }
                   readOnly={
+                    exactInputOnly ||
                     (tradeType === TradeType.EXACT_INPUT && isLoadingQuote) ||
                     !!toAmount
                   }
+                  disabled={exactInputOnly}
                   showPlaceholderStyle={!amount}
                   variant="default"
                 />

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,

package/src/widget/components/Swap.tsx

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

package/src/widget/components/WidgetProviders.tsx

@@ -15,7 +15,6 @@ import { BalanceVisibleProvider } from "../hooks/useBalanceVisible.js"
 import { ThemeProvider as ThemePreferenceProvider } from "../hooks/useTheme.js"
 import { SelectedFundMethodProvider } from "../hooks/useSelectedFundMethod.js"
 import { EarnPoolProvider } from "../hooks/useEarnPool.js"
-import { DefaultTokenSelectionProvider } from "../hooks/useDefaultTokenSelection.js"
 
 // Default props for hook modal (minimal required config)
 const DEFAULT_HOOK_MODAL_PROPS: TrailsWidgetProps = {
@@ -52,11 +51,7 @@ export function WidgetProviders({
                           <BalanceVisibleProvider>
                             <ThemePreferenceProvider>
                               <SelectedFundMethodProvider>
-                                <EarnPoolProvider>
-                                  <DefaultTokenSelectionProvider>
-                                    {children}
-                                  </DefaultTokenSelectionProvider>
-                                </EarnPoolProvider>
+                                <EarnPoolProvider>{children}</EarnPoolProvider>
                               </SelectedFundMethodProvider>
                             </ThemePreferenceProvider>
                           </BalanceVisibleProvider>