0xtrails 0.13.2 → 0.14.0

package/src/widget/components/Withdraw.tsx

@@ -1,1106 +0,0 @@
-import { ArrowLeftRight } from "lucide-react"
-import type React from "react"
-import { useCallback, useEffect, useRef, useState } from "react"
-import { getChainInfo } from "../../chains.js"
-import { FIAT_CURRENCY_SYMBOLS } from "../../constants.js"
-import { isPositiveNumber, toSafeNumber } from "../../utils/validation.js"
-import { logger } from "../../logger.js"
-import { TradeType } from "../../prepareSend.js"
-import {
-  formatUsdAmountDisplay,
-  formatUsdAmountLocaleDisplay,
-} from "../../utils/format.js"
-import { useSupportedTokens, type Token } from "../../tokens.js"
-import { useViewManager, useScreenGuard } from "../hooks/useViewManager.js"
-import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
-import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
-import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
-import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
-import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
-import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
-import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
-import { useSendForm, type OnCompleteProps } from "../hooks/useSendForm.js"
-import { useSwapState } from "../hooks/useSwapState.js"
-import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
-import type { BaseProps } from "../types/commonProps.js"
-import { isWithinCooldown, SECOND_MS } from "../../utils/time.js"
-import { forexRateStore } from "../utils/forexRateStore.js"
-import { ChainList } from "./ChainList.js"
-import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
-import { isFeeOptionDisabled } from "./FeeOption.js"
-import { FeeOptions } from "./FeeOptions.js"
-import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { RecipientSelectorButton } from "./RecipientSelectorButton.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { FundingMethodSelectorButton } from "./FundingMethodSelectorButton.js"
-import { TokenSelector } from "./TokenSelector.js"
-import { TokenSelectorButton } from "./TokenSelectorButton.js"
-import LoadingSpinner from "./LoadingSpinner.js"
-
-import { addressEqual } from "../../utils/address.js"
-interface WithdrawProps extends BaseProps {
-  title?: string
-  fromToken?: string
-  fromChainId?: number
-  /** Default input mode: "fiat" starts with USD input, "token" starts with token input */
-  defaultInputMode?: "fiat" | "token"
-}
-
-const Withdraw: React.FC<WithdrawProps> = ({
-  selectedToken: initialSelectedToken,
-  onSend,
-  onConfirm,
-  onComplete,
-  account,
-  toRecipient,
-  toAmount,
-  toChainId,
-  toToken,
-  toCalldata,
-  walletClient,
-  onTransactionStateChange,
-  onError,
-  onWaitingForWalletConfirm,
-  paymasterUrls,
-  setWalletConfirmRetryHandler,
-  swapProvider,
-  bridgeProvider,
-  swapProviderFallback,
-  bridgeProviderFallback,
-  onAmountUpdate,
-  checkoutOnHandlers,
-  recentTokens,
-  onTrackToken,
-  isSequenceWallet: _isSequenceWallet = false,
-  fromToken,
-  fromChainId: fromChainIdProp,
-  defaultInputMode,
-}) => {
-  const { mode, navigate } = useViewManager()
-  const isGenericLayout = !fromToken
-  const { isBalanceVisible } = useBalanceVisible()
-  const {
-    selectedToken: originToken,
-    setSelectedToken: setOriginToken,
-    hasManualSelection: hasManualOriginSelection,
-    setHasManualSelection: setHasManualOriginSelection,
-  } = useOriginSelectedToken()
-  const {
-    selectedToken: destinationToken,
-    setSelectedToken: setDestinationToken,
-    hasManualSelection: hasManualDestinationSelection,
-    setHasManualSelection: setHasManualDestinationSelection,
-  } = useDestinationSelectedToken()
-
-  // Get origin token with fresh balance for fee option checks
-  const {
-    token: freshOriginToken,
-    isLoadingBalance: isLoadingFreshOriginBalance,
-  } = useAccountTokenBalanceOnchain(originToken, account?.address)
-
-  const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
-  const prevToRecipientRef = useRef<string | undefined>(toRecipient)
-
-  // Use a ref to track user actions to prevent race conditions with async state updates
-  const userActionRef = useRef({
-    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,
-  )
-  const {
-    tradeType: globalTradeType,
-    setTradeType,
-    sellAmount,
-    setSellAmount,
-    buyAmount,
-    setBuyAmount,
-    resetSwapState,
-    enterFormMode,
-  } = useSwapState()
-
-  // Reset swap state only when entering withdraw mode
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Stable setters, only react to mode changes
-  useEffect(() => {
-    enterFormMode("withdraw")
-  }, [])
-
-  useScreenGuard(
-    (toRecipient == null || toRecipient === "") && !selectedRecipient,
-    "recipients",
-    { backTarget: "withdraw" },
-  )
-
-  // Initialize and update selected recipient from toRecipient prop
-  useEffect(() => {
-    const toRecipientChanged = toRecipient !== prevToRecipientRef.current
-    prevToRecipientRef.current = toRecipient
-
-    if (toRecipientChanged) {
-      if (toRecipient) {
-        logger.console.log(
-          "[trails-sdk] Withdraw Setting selectedRecipient to toRecipient:",
-          toRecipient,
-        )
-        setSelectedRecipient(toRecipient)
-      } else {
-        logger.console.log(
-          "[trails-sdk] Withdraw Clearing selectedRecipient (toRecipient is now empty)",
-        )
-        setSelectedRecipient(null)
-      }
-    } else if (toRecipient && !selectedRecipient) {
-      logger.console.log(
-        "[trails-sdk] Withdraw Setting selectedRecipient to toRecipient:",
-        toRecipient,
-      )
-      setSelectedRecipient(toRecipient)
-    }
-  }, [toRecipient, selectedRecipient, setSelectedRecipient])
-
-  // Calculate effective recipient for useSendForm
-  const effectiveRecipient =
-    selectedRecipient || toRecipient || account?.address
-
-  const tradeType = globalTradeType || TradeType.EXACT_INPUT
-  // Initialize based on defaultInputMode prop
-  const [isEnteringFiat, setIsEnteringFiat] = useState(
-    defaultInputMode === "fiat",
-  )
-  const [inputDisplayValue, setInputDisplayValue] = useState("")
-  const [_isUserTyping, setIsUserTyping] = useState(false)
-  const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  useEffect(() => {
-    return () => {
-      if (typingTimeoutRef.current) {
-        clearTimeout(typingTimeoutRef.current)
-      }
-    }
-  }, [])
-
-  const handleCompleteAndClearAmounts = useCallback(
-    (result: OnCompleteProps) => {
-      setInputDisplayValue("")
-      resetSwapState()
-      onComplete(result)
-    },
-    [onComplete, resetSwapState],
-  )
-
-  const {
-    amount,
-    amountRaw,
-    balanceFormatted,
-    balanceRaw,
-    tokenDecimals,
-    balanceLocaleDisplay,
-    balanceUsdDisplay,
-    balanceUsdLocaleDisplay,
-    handleSubmit,
-    isSubmitting,
-    isLoadingQuote,
-    selectedDestToken,
-    setSelectedDestinationChain,
-    setSelectedDestToken,
-    buttonText,
-    destinationTokenAddress,
-    isValidCustomToken,
-    prepareSendQuote,
-    processedFeeOptions,
-    selectedFeeOption,
-    setSelectedFeeOption,
-    sourceTokenPrices,
-  } = useSendForm({
-    account,
-    toAmount: tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmount,
-    fromAmount: tradeType === TradeType.EXACT_INPUT ? sellAmount : undefined,
-    toRecipient: effectiveRecipient,
-    toChainId,
-    toToken,
-    toCalldata,
-    walletClient,
-    onTransactionStateChange,
-    onError,
-    onWaitingForWalletConfirm,
-    paymasterUrls,
-    onSend,
-    onConfirm,
-    onComplete: handleCompleteAndClearAmounts,
-    selectedToken: originToken ?? undefined,
-    setWalletConfirmRetryHandler,
-    tradeType: tradeType,
-    swapProvider,
-    bridgeProvider,
-    swapProviderFallback,
-    bridgeProviderFallback,
-    fundMethod: "wallet",
-    mode,
-    checkoutOnHandlers,
-  })
-
-  // Get the token price for USD conversions
-  const tokenPriceUsd = sourceTokenPrices?.[0]?.priceUsd || 0
-
-  // Handle sell amount input changes
-  const handleSellAmountChange = useCallback(
-    (value: string) => {
-      let processedValue = value
-      if (
-        value !== "0" &&
-        value.length > 1 &&
-        value.startsWith("0") &&
-        value[1] !== "."
-      ) {
-        processedValue = value.replace(/^0+/, "") || "0"
-      }
-      setTradeType(TradeType.EXACT_INPUT)
-      setSellAmount(processedValue)
-    },
-    [setTradeType, setSellAmount],
-  )
-
-  // Update amounts when quote is received
-  useEffect(() => {
-    if (!prepareSendQuote) return
-
-    if (
-      tradeType === TradeType.EXACT_OUTPUT &&
-      prepareSendQuote.originAmountDisplay
-    ) {
-      setSellAmount(prepareSendQuote.originAmountDisplay)
-    } else if (
-      tradeType === TradeType.EXACT_INPUT &&
-      prepareSendQuote.destinationAmountDisplay
-    ) {
-      setBuyAmount(prepareSendQuote.destinationAmountDisplay)
-    }
-  }, [prepareSendQuote, tradeType, setSellAmount, setBuyAmount])
-
-  // Call onAmountUpdate when amountRaw changes
-  useEffect(() => {
-    if (onAmountUpdate) {
-      onAmountUpdate(amountRaw)
-    }
-  }, [amountRaw, onAmountUpdate])
-
-  // Reset the flag so auto-selection can work as a fallback
-  useEffect(() => {
-    if (hasManualOriginSelection && !originToken && !isLoadingOriginDefaults) {
-      logger.console.log(
-        "[trails-sdk] Resetting hasManualOriginSelection - token was cleared",
-      )
-      setHasManualOriginSelection(false)
-    }
-  }, [
-    hasManualOriginSelection,
-    originToken,
-    isLoadingOriginDefaults,
-    setHasManualOriginSelection,
-  ])
-
-  // Auto-select origin token using separated hook
-  useEffect(() => {
-    if (
-      !originToken &&
-      !isLoadingOriginDefaults &&
-      defaultOriginToken &&
-      !hasManualOriginSelection
-    ) {
-      logger.console.log(
-        "[trails-sdk] Auto-selecting origin token:",
-        defaultOriginToken,
-      )
-      setOriginToken(defaultOriginToken)
-      setOriginChainId(defaultOriginToken.chainId)
-    }
-  }, [
-    originToken,
-    isLoadingOriginDefaults,
-    defaultOriginToken,
-    setOriginToken,
-    hasManualOriginSelection,
-  ])
-
-  // Auto-select destination token using separated hook
-  useEffect(() => {
-    if (toToken) {
-      return
-    }
-
-    const hasRecentOriginSelection =
-      hasManualOriginSelection ||
-      isWithinCooldown(userActionRef.current.lastOriginSelectionTime, SECOND_MS)
-
-    const hasRecentDestSelection =
-      userActionRef.current.hasManualDestinationSelection ||
-      hasManualDestinationSelection ||
-      isWithinCooldown(
-        userActionRef.current.lastDestinationSelectionTime,
-        SECOND_MS,
-      )
-
-    if (
-      !destinationToken &&
-      !isLoadingDestinationDefaults &&
-      defaultDestinationToken &&
-      !hasRecentDestSelection &&
-      !hasRecentOriginSelection
-    ) {
-      logger.console.log(
-        "[trails-sdk] Auto-selecting destination token:",
-        defaultDestinationToken,
-      )
-      setDestinationToken(defaultDestinationToken)
-      setSelectedDestToken(defaultDestinationToken)
-
-      const chainInfo = getChainInfo(defaultDestinationToken.chainId)
-      if (chainInfo) {
-        setSelectedDestinationChain(chainInfo)
-      }
-    }
-  }, [
-    destinationToken,
-    isLoadingDestinationDefaults,
-    defaultDestinationToken,
-    hasManualDestinationSelection,
-    hasManualOriginSelection,
-    setDestinationToken,
-    setSelectedDestToken,
-    setSelectedDestinationChain,
-    toToken,
-  ])
-
-  // Auto-focus the input field when component mounts
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [])
-
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const [showSourceTokenSelector, setShowSourceTokenSelector] = useState(false)
-  const [showDestinationTokenSelector, setShowDestinationTokenSelector] =
-    useState(false)
-  const [showSourceChainList, setShowSourceChainList] = useState(false)
-  const [showDestinationChainList, setShowDestinationChainList] =
-    useState(false)
-
-  const { supportedTokens } = useSupportedTokens({
-    disabled:
-      !!toToken || showSourceTokenSelector || showDestinationTokenSelector,
-  })
-
-  // Initialize destination token from toToken prop
-  const lastAutoSelectedRef = useRef<string | null>(null)
-
-  useEffect(() => {
-    const currentKey = `${toToken}-${toChainId}`
-
-    if (
-      toToken &&
-      toChainId &&
-      supportedTokens?.length > 0 &&
-      lastAutoSelectedRef.current !== currentKey
-    ) {
-      const destToken = supportedTokens?.find(
-        (token) =>
-          token.chainId === Number(toChainId) &&
-          (addressEqual(token.contractAddress, toToken) ||
-            token.symbol.toLowerCase() === toToken.toLowerCase()),
-      )
-
-      if (destToken) {
-        logger.console.log(
-          "[trails-sdk] Withdraw: Setting destination token from toToken prop:",
-          destToken,
-        )
-
-        setDestinationToken(destToken)
-        setSelectedDestToken(destToken)
-
-        const chainInfo = getChainInfo(Number(toChainId))
-        if (chainInfo) {
-          setSelectedDestinationChain(chainInfo)
-        }
-
-        lastAutoSelectedRef.current = currentKey
-      }
-    } else if (!toToken && hasManualDestinationSelection) {
-      setHasManualDestinationSelection(false)
-      userActionRef.current.hasManualDestinationSelection = false
-      lastAutoSelectedRef.current = null
-    }
-  }, [
-    toToken,
-    toChainId,
-    supportedTokens,
-    setDestinationToken,
-    setSelectedDestToken,
-    setSelectedDestinationChain,
-    hasManualDestinationSelection,
-    setHasManualDestinationSelection,
-  ])
-
-  // Sync destination token from hook with useSendForm
-  useEffect(() => {
-    if (destinationToken) {
-      logger.console.log(
-        "[trails-sdk] Syncing destination token to useSendForm:",
-        destinationToken,
-      )
-      setSelectedDestToken(destinationToken)
-    }
-  }, [destinationToken, setSelectedDestToken])
-
-  // Initialize origin token from fromToken prop
-  const lastAutoSelectedOriginRef = useRef<string | null>(null)
-
-  useEffect(() => {
-    const currentKey = `${fromToken}-${fromChainIdProp}`
-
-    if (
-      fromToken &&
-      fromChainIdProp &&
-      supportedTokens?.length > 0 &&
-      lastAutoSelectedOriginRef.current !== currentKey
-    ) {
-      const sourceToken = supportedTokens?.find(
-        (token) =>
-          token.chainId === Number(fromChainIdProp) &&
-          (addressEqual(token.contractAddress, fromToken) ||
-            token.symbol.toLowerCase() === fromToken.toLowerCase()),
-      )
-
-      if (sourceToken) {
-        logger.console.log(
-          "[trails-sdk] Withdraw: Setting origin token from fromToken prop:",
-          sourceToken,
-        )
-
-        setOriginToken(sourceToken)
-        setOriginChainId(sourceToken.chainId)
-        setHasManualOriginSelection(true)
-
-        lastAutoSelectedOriginRef.current = currentKey
-      }
-    }
-  }, [
-    fromToken,
-    fromChainIdProp,
-    supportedTokens,
-    setOriginToken,
-    setHasManualOriginSelection,
-  ])
-
-  // Handle source token selection from full-screen selector
-  const handleSourceTokenSelectorSelect = useCallback(
-    (token: Token) => {
-      const isDifferentToken =
-        !originToken || originToken.symbol !== token.symbol
-      if (isDifferentToken) {
-        setSellAmount("")
-        setBuyAmount("")
-        setTradeType(TradeType.EXACT_INPUT)
-        setInputDisplayValue("")
-      }
-
-      setOriginToken(token)
-      setOriginChainId(token.chainId)
-      setShowSourceTokenSelector(false)
-
-      setHasManualOriginSelection(true)
-      userActionRef.current.lastOriginSelectionTime = Date.now()
-
-      onTrackToken?.(token)
-      logger.console.log("[trails-sdk] selected origin token", token)
-    },
-    [
-      setOriginToken,
-      setHasManualOriginSelection,
-      onTrackToken,
-      originToken,
-      setSellAmount,
-      setBuyAmount,
-      setTradeType,
-    ],
-  )
-
-  // Handle destination token selection from full-screen selector
-  const handleDestinationTokenSelectorSelect = useCallback(
-    (token: Token) => {
-      setDestinationToken(token)
-      setSelectedDestToken(token)
-
-      const chainInfo = getChainInfo(token.chainId)
-      if (chainInfo) {
-        setSelectedDestinationChain(chainInfo)
-      }
-
-      setShowDestinationTokenSelector(false)
-
-      setHasManualDestinationSelection(true)
-      userActionRef.current.hasManualDestinationSelection = true
-      userActionRef.current.lastDestinationSelectionTime = Date.now()
-
-      onTrackToken?.(token)
-      logger.console.log("[trails-sdk] selected destination token", token)
-    },
-    [
-      setDestinationToken,
-      setSelectedDestToken,
-      setSelectedDestinationChain,
-      setHasManualDestinationSelection,
-      onTrackToken,
-    ],
-  )
-
-  // Handle recent token selection
-  const handleRecentTokenSelect = useCallback(
-    (token: Token) => {
-      if (showSourceTokenSelector) {
-        handleSourceTokenSelectorSelect(token)
-      } else if (showDestinationTokenSelector) {
-        handleDestinationTokenSelectorSelect(token)
-      }
-    },
-    [
-      showSourceTokenSelector,
-      showDestinationTokenSelector,
-      handleSourceTokenSelectorSelect,
-      handleDestinationTokenSelectorSelect,
-    ],
-  )
-
-  // Show source chain list screen
-  if (showSourceChainList) {
-    return (
-      <ChainList
-        onBack={() => {
-          setShowSourceChainList(false)
-          setShowSourceTokenSelector(true)
-        }}
-      />
-    )
-  }
-
-  // Show source token selector screen
-  if (showSourceTokenSelector) {
-    return (
-      <div className="space-y-2">
-        <ScreenHeader
-          onBack={() => setShowSourceTokenSelector(false)}
-          headerContent="Select Token to Withdraw"
-          headerContentAlign="left"
-        />
-        <TokenSelector
-          onTokenSelect={handleSourceTokenSelectorSelect}
-          onError={onError}
-          showContinueButton={false}
-          compactMode={false}
-          allSupportedTokens={false}
-          fundMethod="wallet"
-          chainListScreen={true}
-          onNavigateToChainList={() => {
-            setShowSourceTokenSelector(false)
-            setShowSourceChainList(true)
-          }}
-          recentTokens={recentTokens}
-          onRecentTokenSelect={handleRecentTokenSelect}
-        />
-      </div>
-    )
-  }
-
-  // Show destination chain list screen
-  if (showDestinationChainList) {
-    return (
-      <ChainList
-        onBack={() => {
-          setShowDestinationChainList(false)
-          setShowDestinationTokenSelector(true)
-        }}
-      />
-    )
-  }
-
-  // Show destination token selector screen
-  if (showDestinationTokenSelector) {
-    return (
-      <div className="space-y-2">
-        <ScreenHeader
-          onBack={() => setShowDestinationTokenSelector(false)}
-          headerContent="Select Token to Receive"
-          headerContentAlign="left"
-        />
-        <TokenSelector
-          onTokenSelect={handleDestinationTokenSelectorSelect}
-          onError={onError}
-          showContinueButton={false}
-          compactMode={false}
-          allSupportedTokens={true}
-          fundMethod="wallet"
-          chainListScreen={true}
-          onNavigateToChainList={() => {
-            setShowDestinationTokenSelector(false)
-            setShowDestinationChainList(true)
-          }}
-          recentTokens={recentTokens}
-          onRecentTokenSelect={handleRecentTokenSelect}
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-2">
-      <ScreenHeader
-        headerContent="Withdraw"
-        headerContentAlign="left"
-        showAccountActions={true}
-        customActions={
-          <button
-            type="button"
-            onClick={() => navigate("swap", { backTarget: "withdraw" })}
-            className="flex h-8 px-3 justify-center items-center gap-1.5 rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
-            title="Swap"
-          >
-            <ArrowLeftRight className="h-4 w-4" />
-            <span className="text-sm font-medium">Swap</span>
-          </button>
-        }
-      />
-
-      <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          logger.console.log("[trails-sdk] Calling handleSubmit from Withdraw")
-          handleSubmit(e)
-        }}
-        className="space-y-1"
-      >
-        {/* Input Section - Amount */}
-        <div className="pt-4 pb-4 trails-border-radius-container p-3 flex flex-col border border-gray-200 dark:border-gray-700 rounded-lg relative">
-          {/* Amount Input - Centered */}
-          <div className="flex items-center justify-center">
-            <div className="flex items-center justify-center space-x-2">
-              <DynamicSizeInputField
-                ref={inputRef}
-                value={inputDisplayValue}
-                onChange={(e) => {
-                  const value = e.target.value
-
-                  setIsUserTyping(true)
-
-                  if (typingTimeoutRef.current) {
-                    clearTimeout(typingTimeoutRef.current)
-                  }
-
-                  typingTimeoutRef.current = setTimeout(() => {
-                    setIsUserTyping(false)
-                  }, 300)
-
-                  if (value === "") {
-                    setInputDisplayValue("")
-                    setSellAmount("")
-                    return
-                  }
-
-                  // Validate decimal places (max 8 for tokens, max 2 for USD)
-                  const maxDecimals = isEnteringFiat ? 2 : 8
-                  const decimalRegex = new RegExp(
-                    `^\\d*\\.?\\d{0,${maxDecimals}}$`,
-                  )
-                  const decimalMatch = value.match(decimalRegex)
-                  if (!decimalMatch) {
-                    return
-                  }
-
-                  setInputDisplayValue(value)
-
-                  if (isEnteringFiat && tokenPriceUsd > 0) {
-                    // User is entering fiat, convert to token amount for backend
-                    const inputAmount = toSafeNumber(value)
-                    const rateData = forexRateStore.getRate()
-                    const usdAmount =
-                      rateData && rateData.currency !== "USD"
-                        ? inputAmount / rateData.rate
-                        : inputAmount
-                    const tokenAmount = usdAmount / tokenPriceUsd
-                    handleSellAmountChange(tokenAmount.toString())
-                  } else {
-                    handleSellAmountChange(value)
-                  }
-                }}
-                isLoading={
-                  isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT
-                }
-                variant="default"
-                inputSize="large"
-                textAlign="center"
-                isFiatInput={isEnteringFiat}
-                currencySymbol={
-                  isEnteringFiat
-                    ? (() => {
-                        const rateData = forexRateStore.getRate()
-                        const currency = rateData?.currency || "USD"
-                        return (
-                          FIAT_CURRENCY_SYMBOLS[
-                            currency as keyof typeof FIAT_CURRENCY_SYMBOLS
-                          ] || "$"
-                        )
-                      })()
-                    : originToken?.symbol
-                }
-              />
-              {isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT && (
-                <LoadingSpinner />
-              )}
-            </div>
-          </div>
-
-          {/* Destination Address Selector */}
-          {!isGenericLayout && (
-            <div className="mt-3 flex justify-center">
-              <div className="flex items-center space-x-1 text-sm">
-                <span className="text-gray-500 dark:text-gray-400">To:</span>
-                <RecipientSelectorButton
-                  selectedRecipient={selectedRecipient}
-                />
-              </div>
-            </div>
-          )}
-
-          {/* USD Value Toggle */}
-          <div className="mt-2 text-center text-sm">
-            <div className="flex justify-center">
-              <button
-                type="button"
-                onClick={() => {
-                  const newMode = !isEnteringFiat
-                  setIsEnteringFiat(newMode)
-
-                  if (inputDisplayValue && tokenPriceUsd > 0) {
-                    const currentValue = parseFloat(inputDisplayValue)
-
-                    if (isPositiveNumber(currentValue)) {
-                      const rateData = forexRateStore.getRate()
-
-                      if (newMode) {
-                        // Switching to fiat mode
-                        const usdValue = currentValue * tokenPriceUsd
-                        const displayValue =
-                          rateData && rateData.currency !== "USD"
-                            ? usdValue * rateData.rate
-                            : usdValue
-                        const finalValue = Number(
-                          displayValue.toFixed(2),
-                        ).toString()
-                        setInputDisplayValue(finalValue)
-                      } else {
-                        // Switching to token mode
-                        const usdValue =
-                          rateData && rateData.currency !== "USD"
-                            ? currentValue / rateData.rate
-                            : currentValue
-                        const tokenValue = usdValue / tokenPriceUsd
-                        const rounded =
-                          Math.round(tokenValue * 100000000) / 100000000
-                        setInputDisplayValue(rounded.toString())
-                      }
-                    }
-                  }
-                }}
-                className="text-xs text-blue-500 hover:text-blue-600 transition-colors cursor-pointer flex items-center gap-1"
-                title={
-                  originToken
-                    ? `Toggle between USD and ${originToken.symbol}`
-                    : ""
-                }
-              >
-                <svg
-                  aria-hidden="true"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M3.16669 6.5L5.50002 4.16667M5.50002 4.16667L7.83335 6.5M5.50002 4.16667L5.50002 11.8333"
-                    stroke="#3B82F6"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M12.8334 9.5L10.5 11.8333M10.5 11.8333L8.16669 9.5M10.5 11.8333L10.5 4.16667"
-                    stroke="#3B82F6"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-                {(() => {
-                  const inputValue = toSafeNumber(inputDisplayValue)
-
-                  if (isEnteringFiat) {
-                    // Currently entering in fiat, show the token amount
-                    const rateData = forexRateStore.getRate()
-                    const usdValue =
-                      rateData && rateData.currency !== "USD"
-                        ? inputValue / rateData.rate
-                        : inputValue
-                    const tokenAmount =
-                      tokenPriceUsd > 0 ? usdValue / tokenPriceUsd : 0
-                    const tokenDisplay =
-                      tokenAmount > 0
-                        ? `${tokenAmount.toFixed(8)} ${originToken?.symbol || ""}`
-                        : `0 ${originToken?.symbol || ""}`
-
-                    return <span title={tokenDisplay}>≈ {tokenDisplay}</span>
-                  } else {
-                    // Currently entering in token amount, show USD value
-                    const usdAmount = inputValue * tokenPriceUsd
-                    const displayValue = formatUsdAmountDisplay(usdAmount)
-                    const localeValue = formatUsdAmountLocaleDisplay(usdAmount)
-
-                    return <span title={displayValue}>≈ {localeValue}</span>
-                  }
-                })()}
-              </button>
-            </div>
-          </div>
-
-          {/* Percentage Buttons */}
-          {originToken && balanceFormatted && (
-            <div className="mt-3 flex justify-center items-center space-x-2">
-              <PercentageMaxButtons
-                userBalance={balanceFormatted}
-                userBalanceRaw={balanceRaw}
-                decimals={tokenDecimals}
-                isNativeToken={originToken.isNativeToken ?? false}
-                gasCostFormatted={prepareSendQuote?.gasCostFormatted}
-                chainId={originChainId || undefined}
-                onAmountSelect={(amount) => {
-                  setTradeType(TradeType.EXACT_INPUT)
-                  setSellAmount(amount)
-                  setBuyAmount("")
-                  if (isEnteringFiat && tokenPriceUsd > 0) {
-                    const usdAmount = parseFloat(amount) * tokenPriceUsd
-                    setInputDisplayValue(
-                      Number(usdAmount.toFixed(2)).toString(),
-                    )
-                  } else {
-                    setInputDisplayValue(amount)
-                  }
-                }}
-                className="opacity-100"
-              />
-            </div>
-          )}
-        </div>
-
-        {/* Withdraw As / Receive As Section */}
-        <div className="mt-4 pt-4 pb-4 trails-border-radius-container p-3 mb-4 border border-gray-200 dark:border-gray-700 rounded-lg">
-          {/* Labels */}
-          <div className="flex items-center justify-between mb-3 px-1">
-            <div className="flex flex-col" style={{ minWidth: "138px" }}>
-              <span className="text-sm font-medium text-black dark:text-white">
-                {isGenericLayout ? "From" : "Withdraw"}
-              </span>
-              {isGenericLayout && (
-                <div className="mt-1">
-                  <FundingMethodSelectorButton
-                    sendToScreen={{
-                      screen: "select-funding-wallet",
-                      backScreen: "withdraw",
-                    }}
-                  />
-                </div>
-              )}
-            </div>
-            <div className="w-7 shrink-0"></div>
-            <div className="flex flex-col" style={{ minWidth: "138px" }}>
-              <span className="text-sm font-medium text-black dark:text-white">
-                {isGenericLayout ? "To" : "Receive"}
-              </span>
-              {isGenericLayout && (
-                <div className="mt-1">
-                  <RecipientSelectorButton
-                    selectedRecipient={selectedRecipient}
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Token Selectors with Arrow */}
-          <div className="flex items-center justify-between space-x-2">
-            {/* Origin Token Selector */}
-            <div className="min-w-[138px] flex flex-col mr-0 py-3.5">
-              <TokenSelectorButton
-                token={originToken}
-                chainId={originChainId}
-                onSelect={() => setShowSourceTokenSelector(true)}
-                unselectable={!!fromToken}
-                fullWidth={true}
-              />
-            </div>
-
-            {/* Arrow Icon */}
-            <div className="shrink-0 mr-0">
-              <div className="w-7 h-7 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                >
-                  <path
-                    d="M7.52861 2.86201C7.78895 2.60166 8.21096 2.60166 8.47131 2.86201L13.138 7.52868C13.3983 7.78903 13.3983 8.21104 13.138 8.47138L8.47131 13.1381C8.21096 13.3984 7.78895 13.3984 7.52861 13.1381C7.26826 12.8777 7.26826 12.4557 7.52861 12.1953L11.0573 8.6667H3.33329C2.9651 8.6667 2.66663 8.36822 2.66663 8.00003C2.66663 7.63184 2.9651 7.33336 3.33329 7.33336H11.0573L7.52861 3.80472C7.26826 3.54437 7.26826 3.12236 7.52861 2.86201Z"
-                    fill="currentColor"
-                    className="text-gray-900 dark:text-white"
-                  />
-                </svg>
-              </div>
-            </div>
-
-            {/* Destination Token Selector */}
-            <div className="min-w-[138px] flex">
-              <TokenSelectorButton
-                token={selectedDestToken}
-                chainId={selectedDestToken?.chainId}
-                onSelect={() => setShowDestinationTokenSelector(true)}
-                unselectable={!!toToken}
-                fullWidth={true}
-              />
-            </div>
-          </div>
-
-          {/* Token Balance Display: show insufficient funds when no quote (e.g. 0 balance) or quote says insufficient; otherwise show balance */}
-          {originToken && (
-            <div className="mt-3 pl-1 text-xs text-left">
-              {prepareSendQuote?.noSufficientBalance ||
-              (!isLoadingFreshOriginBalance &&
-                balanceRaw !== undefined &&
-                balanceRaw !== "" &&
-                BigInt(balanceRaw) === 0n) ? (
-                <span style={{ color: "#F97316" }}>Insufficient funds</span>
-              ) : balanceFormatted ? (
-                <>
-                  <span
-                    className="text-black dark:text-white notranslate"
-                    translate="no"
-                  >
-                    Balance:
-                  </span>
-                  <span
-                    className="text-gray-500 dark:text-gray-400 notranslate"
-                    translate="no"
-                  >
-                    {" "}
-                    {isBalanceVisible
-                      ? `${balanceLocaleDisplay || balanceFormatted} ${originToken.symbol}`
-                      : "••••••"}
-                    {balanceUsdDisplay && isBalanceVisible ? (
-                      <span className="notranslate" translate="no">
-                        {" "}
-                        ({balanceUsdLocaleDisplay || balanceUsdDisplay})
-                      </span>
-                    ) : null}
-                  </span>
-                </>
-              ) : null}
-            </div>
-          )}
-        </div>
-
-        {/* Fee Options */}
-        <FeeOptions
-          processedFeeOptions={processedFeeOptions || []}
-          selectedFeeOption={selectedFeeOption}
-          setSelectedFeeOption={(feeOption) => setSelectedFeeOption(feeOption)}
-          chainId={originToken?.chainId}
-          isRefetching={isLoadingQuote}
-          originTokenInfo={{
-            originToken: freshOriginToken ?? originToken!,
-            originTokenBalance:
-              freshOriginToken?.balance ?? originToken?.balance ?? "0",
-            originTokenAmount: sellAmount,
-            isLoadingBalance: isLoadingFreshOriginBalance,
-          }}
-        />
-
-        {/* Quote Details */}
-        {prepareSendQuote && !isLoadingQuote && (
-          <div className="mb-4">
-            <QuoteDetails
-              quote={prepareSendQuote}
-              showContent={true}
-              swapMode={false}
-              isRefetching={isLoadingQuote}
-              showInsufficientFunds={false}
-            />
-          </div>
-        )}
-
-        <button
-          type="submit"
-          disabled={
-            !amount ||
-            isSubmitting ||
-            !destinationTokenAddress ||
-            !isValidCustomToken ||
-            isLoadingQuote ||
-            !prepareSendQuote ||
-            prepareSendQuote?.noSufficientBalance ||
-            (selectedFeeOption
-              ? isFeeOptionDisabled(selectedFeeOption as ProcessedFeeOption, {
-                  originToken: freshOriginToken ?? originToken!,
-                  originTokenBalance:
-                    freshOriginToken?.balance ?? originToken?.balance ?? "0",
-                  originTokenAmount: sellAmount,
-                })
-              : false)
-          }
-          className="w-full font-semibold py-4 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer relative"
-        >
-          {isSubmitting ? (
-            <div className="flex items-center justify-center">
-              <LoadingSpinner className="mr-2" />
-              <span>{buttonText}</span>
-            </div>
-          ) : prepareSendQuote?.noSufficientBalance ? (
-            "Insufficient Balance"
-          ) : !sellAmount ? (
-            "Enter amount"
-          ) : buttonText === "Getting quote..." ? (
-            <div className="flex items-center justify-center">
-              <LoadingSpinner className="mr-2" />
-              <span>{buttonText}</span>
-            </div>
-          ) : (
-            buttonText || "Make withdrawal"
-          )}
-        </button>
-      </form>
-    </div>
-  )
-}
-
-export { Withdraw }