0xtrails 0.13.1 → 0.14.0

package/src/widget/components/Pay.tsx

@@ -1,1181 +0,0 @@
-import { ArrowLeftRight, ChevronRight, Search } from "lucide-react"
-import type React from "react"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { getChainInfo } from "../../chains.js"
-import { isValidNumber } from "../../utils/validation.js"
-import { logger } from "../../logger.js"
-import { TradeType } from "../../prepareSend.js"
-import { formatUsdAmountLocaleDisplay } from "../../utils/format.js"
-import type { Token } from "../../tokens.js"
-import { isPassthroughEligible } from "../../utils/passthrough.js"
-import { useClickTracking } from "../hooks/useClickTracking.js"
-import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
-import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
-import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
-import { usePayMessage } from "../hooks/usePayMessage.js"
-import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
-import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
-import { useSendForm } from "../hooks/useSendForm.js"
-import { useSwapAmount } from "../hooks/useSwapAmount.js"
-import { useSwapState } from "../hooks/useSwapState.js"
-import { useTargetAmount } from "../hooks/useTargetAmount.js"
-import { useTokenList } from "../hooks/useTokenList.js"
-import type { BaseProps } from "../types/commonProps.js"
-import { AddressOrEnsName } from "./AddressOrEnsName.js"
-import { AddressWalletIcon } from "./AddressWalletIcon.js"
-import { ChainList } from "./ChainList.js"
-import { useDynamicInputStyles } from "./DynamicInputStyles.js"
-import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
-import { ErrorDisplay } from "./ErrorDisplay.js"
-import { isFeeOptionDisabled } from "./FeeOption.js"
-import { FeeOptions } from "./FeeOptions.js"
-import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { RefundWarning } from "./RefundWarning.js"
-import { RequiredPropsError } from "./RequiredPropsError.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { FundingMethodSelectorButton } from "./FundingMethodSelectorButton.js"
-import { TokenImage } from "./TokenImage.js"
-import { TokenSelector } from "./TokenSelector.js"
-import { TokenSelectorButton } from "./TokenSelectorButton.js"
-import LoadingSpinner from "./LoadingSpinner.js"
-
-import { addressEqual } from "../../utils/address.js"
-interface PayProps extends BaseProps {}
-
-export const Pay: React.FC<PayProps> = ({
-  selectedToken: initialOriginToken,
-  onBack,
-  account,
-  walletClient,
-  onTransactionStateChange,
-  onError,
-  onWaitingForWalletConfirm,
-  onConfirm,
-  onComplete,
-  onSend,
-  paymasterUrls,
-  isSequenceWallet = false,
-  setWalletConfirmRetryHandler,
-  swapProvider,
-  bridgeProvider,
-  swapProviderFallback,
-  bridgeProviderFallback,
-  fundMethod,
-  checkoutOnHandlers,
-  recentTokens,
-  onRecentTokenSelect,
-  onTrackToken,
-  toRecipient,
-  toAmount,
-  toChainId,
-  toToken,
-  toCalldata,
-  onAmountUpdate,
-}) => {
-  const { mode, navigate } = useViewManager()
-  const { selectedToken: globalOriginToken, setSelectedToken: setOriginToken } =
-    useOriginSelectedToken()
-  const {
-    selectedToken: globalDestinationToken,
-    setSelectedToken: setDestinationToken,
-    isControlledByProps: isDestinationControlledByProps,
-  } = useDestinationSelectedToken()
-  const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
-  const { setAmount: setGlobalAmount, clearAmount } = useSwapAmount()
-  const { targetAmountUsd } = useTargetAmount()
-  const { enterFormMode } = useSwapState()
-
-  // Reset amounts only when switching between different form modes
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Only run on mount to register form mode and conditionally reset
-  useEffect(() => {
-    if (!toAmount) {
-      const didReset = enterFormMode("pay")
-      if (didReset) {
-        clearAmount()
-      }
-    } else {
-      enterFormMode("pay")
-    }
-  }, [])
-
-  // 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()
-
-  // Local state for pay-specific functionality
-  const [tokenAmountForBackend, setTokenAmountForBackend] = useState("")
-  const [inputDisplayValue, setInputDisplayValue] = useState("")
-  const [showOriginTokenSelector, setShowOriginTokenSelector] = useState(false)
-  const [showOriginChainList, setShowOriginChainList] = useState(false)
-  const [showDestinationTokenSelector, setShowDestinationTokenSelector] =
-    useState(false)
-  const [showDestinationChainList, setShowDestinationChainList] =
-    useState(false)
-  const [showQuoteDetails, setShowQuoteDetails] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  // Initialize click tracking
-  const { trackClick } = useClickTracking()
-  const paymentRequestInputRef = useRef<HTMLInputElement>(null)
-
-  // Get sorted tokens to auto-select origin and destination tokens
-  const { filteredTokensFormatted, isLoadingTokens } = useTokenList({
-    onContinue: () => {}, // Not used for auto-selection
-    onError: () => {}, // Not used for auto-selection
-    fundMethod: fundMethod,
-    allSupportedTokens: true, // Show all tokens for destination selection
-  })
-
-  // Get origin token balance for display
-  const originTokenBalance = useMemo(() => {
-    if (!originToken || !filteredTokensFormatted) return null
-
-    const foundToken = filteredTokensFormatted.find(
-      (token) =>
-        token.contractAddress?.toLowerCase() ===
-          originToken.contractAddress?.toLowerCase() &&
-        token.chainId === originToken.chainId,
-    )
-
-    return foundToken
-  }, [originToken, filteredTokensFormatted])
-
-  // Calculate effective recipient for useSendForm
-  const effectiveRecipient =
-    selectedRecipient || toRecipient || account?.address
-
-  const isSameTokenSameChainToSelf = useMemo(() => {
-    if (
-      !originToken ||
-      !globalDestinationToken ||
-      !effectiveRecipient ||
-      !account?.address
-    ) {
-      return false
-    }
-
-    const isSameToken =
-      originToken.contractAddress?.toLowerCase() ===
-        globalDestinationToken.contractAddress?.toLowerCase() &&
-      originToken.chainId === globalDestinationToken.chainId
-
-    const isSameRecipient = addressEqual(effectiveRecipient, account.address)
-
-    return isSameToken && isSameRecipient
-  }, [
-    originToken,
-    globalDestinationToken,
-    effectiveRecipient,
-    account?.address,
-  ])
-
-  // Use useSendForm for quote functionality with EXACT_OUTPUT trade type
-  const {
-    amountUsdDisplay,
-    amountUsdLocaleDisplay,
-    isLoadingQuote,
-    prepareSendQuote,
-    setAmount: setSendFormAmount,
-    handleSubmit,
-    isSubmitting,
-    buttonText,
-    isValidRecipient,
-    selectedDestToken,
-    setSelectedDestToken,
-    setSelectedDestinationChain,
-    quoteError,
-    quoteErrorPrettified,
-    destinationTokenAddress,
-    isValidCustomToken,
-    isSenderContractOnOrigin,
-    isSenderContractOnDestination,
-    processedFeeOptions,
-    selectedFeeOption,
-    setSelectedFeeOption,
-  } = useSendForm({
-    account,
-    toAmount: tokenAmountForBackend || toAmount, // Use the input amount as target amount for EXACT_OUTPUT
-    toRecipient: effectiveRecipient,
-    toChainId,
-    toToken,
-    toCalldata,
-    walletClient,
-    onTransactionStateChange,
-    onError,
-    onWaitingForWalletConfirm,
-    paymasterUrls,
-    onConfirm,
-    onComplete,
-    onSend,
-    selectedToken: originToken as any,
-    setWalletConfirmRetryHandler,
-    tradeType: TradeType.EXACT_OUTPUT, // Key difference: using EXACT_OUTPUT
-    swapProvider,
-    bridgeProvider,
-    swapProviderFallback,
-    bridgeProviderFallback,
-    fundMethod,
-    mode,
-    checkoutOnHandlers,
-    // Skip fee balance fetching for onramp/direct-transfer modes where fee options aren't shown
-    skipFeeBalanceFetch:
-      fundMethod === "onramp-meld" ||
-      fundMethod === "direct-transfer" ||
-      fundMethod === "onramp-mesh",
-  })
-
-  // Auto-select origin token using new hook
-  useEffect(() => {
-    if (!originToken && !isLoadingOriginDefaults && defaultOriginToken) {
-      logger.console.log(
-        "[trails-sdk] Auto-selecting origin token:",
-        defaultOriginToken,
-      )
-      setOriginToken(defaultOriginToken as any)
-    }
-  }, [originToken, isLoadingOriginDefaults, defaultOriginToken, setOriginToken])
-
-  useEffect(() => {
-    if (globalDestinationToken) {
-      // Sync local state with global state
-      setSelectedDestToken(globalDestinationToken)
-
-      // Set the destination chain to match the token
-      if (setSelectedDestinationChain) {
-        const chainInfo = getChainInfo(globalDestinationToken.chainId)
-        if (chainInfo) {
-          setSelectedDestinationChain(chainInfo)
-        }
-      }
-    }
-  }, [
-    globalDestinationToken,
-    setSelectedDestToken,
-    setSelectedDestinationChain,
-  ])
-
-  // Sync resolved token from useSendForm back to global provider
-  // This handles the case where toToken is not in supported tokens and useSendForm resolves it
-  useEffect(() => {
-    // Skip if not controlled by props or no resolved token
-    if (!isDestinationControlledByProps || !selectedDestToken || !toToken) {
-      return
-    }
-
-    // Check if the resolved token matches what we're looking for
-    const chainIdMatches = selectedDestToken.chainId === Number(toChainId)
-    const tokenMatches =
-      selectedDestToken.contractAddress?.toLowerCase() ===
-        toToken.toLowerCase() ||
-      selectedDestToken.symbol?.toLowerCase() === toToken.toLowerCase()
-
-    // Only sync if the token matches the toToken prop
-    if (chainIdMatches && tokenMatches) {
-      const globalMatches =
-        globalDestinationToken &&
-        globalDestinationToken.chainId === selectedDestToken.chainId &&
-        globalDestinationToken.contractAddress?.toLowerCase() ===
-          selectedDestToken.contractAddress?.toLowerCase()
-
-      if (!globalMatches) {
-        logger.console.log(
-          "[trails-sdk] Syncing resolved token from useSendForm to global provider:",
-          selectedDestToken.symbol,
-        )
-        setDestinationToken(selectedDestToken)
-      }
-    }
-  }, [
-    isDestinationControlledByProps,
-    selectedDestToken,
-    globalDestinationToken,
-    setDestinationToken,
-    toToken,
-    toChainId,
-  ])
-
-  // Initialize and update selected recipient from toRecipient prop or default to connected wallet
-  // biome-ignore lint/correctness/useExhaustiveDependencies: selectedRecipient is intentionally excluded to avoid infinite loops
-  useEffect(() => {
-    logger.console.log("[trails-sdk] toRecipient prop effect:", {
-      toRecipient,
-      selectedRecipient,
-      accountAddress: account?.address,
-    })
-
-    if (toRecipient) {
-      // Always sync with toRecipient prop when it changes
-      logger.console.log(
-        "[trails-sdk] Setting selectedRecipient to toRecipient:",
-        toRecipient,
-      )
-      setSelectedRecipient(toRecipient)
-    } else if (!selectedRecipient && account?.address) {
-      // Default to connected wallet address if no recipient is set
-      logger.console.log(
-        "[trails-sdk] Setting selectedRecipient to account address:",
-        account.address,
-      )
-      setSelectedRecipient(account.address)
-    }
-  }, [toRecipient, setSelectedRecipient, account?.address])
-
-  // Initialize and update amount from toAmount prop
-  useEffect(() => {
-    logger.console.log("[trails-sdk] Pay component toAmount effect:", {
-      toAmount,
-      tokenAmountForBackend,
-      inputDisplayValue,
-      willUpdate: !!toAmount && toAmount !== tokenAmountForBackend,
-    })
-
-    // Update amount when toAmount prop changes (for payment requests)
-    if (toAmount && toAmount !== tokenAmountForBackend) {
-      logger.console.log(
-        "[trails-sdk] Updating amount from toAmount prop:",
-        toAmount,
-      )
-      setTokenAmountForBackend(toAmount)
-      setInputDisplayValue(toAmount)
-      setSendFormAmount(toAmount)
-      setGlobalAmount(toAmount)
-    }
-  }, [
-    toAmount,
-    tokenAmountForBackend,
-    inputDisplayValue,
-    setSendFormAmount,
-    setGlobalAmount,
-  ])
-
-  // Initialize destination token from global state or default when not controlled by props
-  useEffect(() => {
-    // Skip if destination is controlled by props - the provider handles that
-    if (isDestinationControlledByProps) {
-      return
-    }
-
-    // Skip if already have a local selection
-    if (selectedDestToken?.symbol) {
-      return
-    }
-
-    // Prefer global destination token if set
-    const destTokenToUse = globalDestinationToken || defaultDestinationToken
-
-    if (destTokenToUse && !isLoadingDestinationDefaults) {
-      logger.console.log("[trails-sdk] Initializing destination token:", {
-        symbol: destTokenToUse.symbol,
-        chainId: destTokenToUse.chainId,
-        name: destTokenToUse.name,
-        contractAddress: destTokenToUse.contractAddress,
-      })
-
-      // Set destination token if not already set by global state
-      if (!globalDestinationToken && defaultDestinationToken) {
-        setDestinationToken(defaultDestinationToken as any)
-      }
-
-      setSelectedDestToken(destTokenToUse)
-
-      // Also set the destination chain if available
-      if (setSelectedDestinationChain && destTokenToUse.chainId) {
-        const chainInfo = getChainInfo(destTokenToUse.chainId)
-        if (chainInfo) {
-          setSelectedDestinationChain(chainInfo)
-        }
-      }
-    }
-  }, [
-    isDestinationControlledByProps,
-    globalDestinationToken,
-    defaultDestinationToken,
-    isLoadingDestinationDefaults,
-    selectedDestToken?.symbol,
-    setDestinationToken,
-    setSelectedDestToken,
-    setSelectedDestinationChain,
-  ])
-
-  // Auto-focus input field on component mount
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [])
-
-  // Handle input amount changes with 8 decimal limit and 16 char total limit
-  const handleAmountChange = useCallback(
-    (value: string) => {
-      // Allow empty string
-      if (value === "") {
-        setInputDisplayValue("")
-        setTokenAmountForBackend("")
-        setSendFormAmount("")
-        setGlobalAmount("")
-        onAmountUpdate?.("")
-        return
-      }
-
-      // Limit total length to 16 characters
-      if (value.length > 16) {
-        return
-      }
-
-      // Validate decimal places (max 8 decimals) and allow single decimal point
-      const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
-      if (!decimalMatch) {
-        return // Don't update if invalid format
-      }
-
-      // Store the display value
-      setInputDisplayValue(value)
-
-      // Update the token amount for backend and useSendForm
-      setTokenAmountForBackend(value)
-      setSendFormAmount(value)
-      setGlobalAmount(value)
-      onAmountUpdate?.(value)
-    },
-    [setSendFormAmount, setGlobalAmount, onAmountUpdate],
-  )
-
-  // Get display values based on input type
-  const displayAmount = inputDisplayValue
-
-  // Dynamic font size based on input length for destination amount
-  const inputStyles = useDynamicInputStyles({ inputValue: displayAmount })
-
-  const handleOriginTokenSelect = useCallback(
-    (token: Token) => {
-      // Update global origin token state
-      setOriginToken(token)
-      setShowOriginTokenSelector(false)
-      logger.console.log("[trails-sdk] selected origin token", token)
-      // Track the token selection
-      onTrackToken?.(token)
-    },
-    [setOriginToken, onTrackToken],
-  )
-
-  const handleDestinationTokenSelect = useCallback(
-    (token: Token) => {
-      // Update both global destination token state and useSendForm state
-      setDestinationToken(token)
-      setSelectedDestToken(token)
-
-      // Update destination chain to match the selected token's chain
-      if (setSelectedDestinationChain && token.chainId) {
-        const chainInfo = getChainInfo(token.chainId)
-        if (chainInfo) {
-          setSelectedDestinationChain(chainInfo)
-        }
-      }
-
-      setShowDestinationTokenSelector(false)
-      logger.console.log("[trails-sdk] selected destination token", token)
-      // Track the token selection
-      onTrackToken?.(token)
-    },
-    [
-      setDestinationToken,
-      setSelectedDestToken,
-      setSelectedDestinationChain,
-      onTrackToken,
-    ],
-  )
-
-  // Show origin chain list screen
-  if (showOriginChainList) {
-    return (
-      <ChainList
-        onBack={() => {
-          setShowOriginChainList(false)
-          setShowOriginTokenSelector(true)
-        }}
-      />
-    )
-  }
-
-  // Show destination chain list screen
-  if (showDestinationChainList) {
-    return (
-      <ChainList
-        onBack={() => {
-          setShowDestinationChainList(false)
-          setShowDestinationTokenSelector(true)
-        }}
-      />
-    )
-  }
-
-  // Show origin token selector screen
-  if (showOriginTokenSelector) {
-    return (
-      <div className="space-y-2">
-        <ScreenHeader
-          onBack={() => setShowOriginTokenSelector(false)}
-          headerContent="Select Token"
-          headerContentAlign="left"
-        />
-        <TokenSelector
-          onTokenSelect={handleOriginTokenSelect}
-          targetAmountUsd={targetAmountUsd}
-          onError={onError}
-          fundMethod={fundMethod}
-          showContinueButton={false}
-          compactMode={false}
-          recentTokens={recentTokens}
-          onRecentTokenSelect={(token) => {
-            setOriginToken(token)
-            setShowOriginTokenSelector(false)
-            onRecentTokenSelect?.(token)
-          }}
-          allSupportedTokens={false}
-          chainListScreen={true}
-          onNavigateToChainList={() => {
-            setShowOriginTokenSelector(false)
-            setShowOriginChainList(true)
-          }}
-          onNavigateToFundMethods={() => {
-            navigate("payment-methods")
-          }}
-        />
-      </div>
-    )
-  }
-
-  // Show destination token selector screen
-  if (showDestinationTokenSelector) {
-    return (
-      <div className="space-y-2">
-        <ScreenHeader
-          onBack={() => setShowDestinationTokenSelector(false)}
-          headerContent="Select Token"
-          headerContentAlign="left"
-        />
-        <TokenSelector
-          onTokenSelect={handleDestinationTokenSelect}
-          targetAmountUsd={targetAmountUsd}
-          onError={onError}
-          fundMethod={fundMethod}
-          showContinueButton={false}
-          compactMode={false}
-          recentTokens={recentTokens}
-          onRecentTokenSelect={(token) => {
-            setDestinationToken(token)
-            setSelectedDestToken(token)
-            setShowDestinationTokenSelector(false)
-            onRecentTokenSelect?.(token)
-          }}
-          allSupportedTokens={true}
-          chainListScreen={true}
-          onNavigateToChainList={() => {
-            setShowDestinationTokenSelector(false)
-            setShowDestinationChainList(true)
-          }}
-        />
-      </div>
-    )
-  }
-
-  // Check for required props
-  const missingRequiredProps = []
-  if (!toAmount) missingRequiredProps.push("toAmount")
-  if (!toToken) missingRequiredProps.push("toToken")
-  if (!toRecipient) missingRequiredProps.push("toAddress")
-
-  // Check if this is a payment request (all required props are set)
-  const isPaymentRequest = !!(toToken && toAmount && toChainId && toRecipient)
-
-  // If required props are missing, only show the error
-  if (missingRequiredProps.length > 0) {
-    return (
-      <div className="space-y-4">
-        <ScreenHeader
-          onBack={onBack}
-          headerContent="Pay"
-          headerContentAlign="left"
-          showAccountActions={true}
-          customActions={
-            <button
-              type="button"
-              onClick={() => navigate("swap", { backTarget: "send-form" })}
-              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>
-          }
-        />
-        <RequiredPropsError
-          missingProps={missingRequiredProps}
-          componentName="Pay"
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-2">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Pay"
-        headerContentAlign="left"
-        showAccountActions={true}
-        customActions={
-          <button
-            type="button"
-            onClick={() => navigate("swap", { backTarget: "send-form" })}
-            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>
-        }
-      />
-
-      {isPaymentRequest ? (
-        /* Payment Request UI */
-        <>
-          {/* Payment Request Header */}
-          <div
-            className="space-y-1 trails-bg-secondary p-3 border bg-white dark:bg-gray-800"
-            style={{
-              borderColor: "var(--trails-bg-secondary-hover)",
-              borderWidth: "1px",
-              borderStyle: "solid",
-              borderRadius: "var(--trails-border-radius-large-button)",
-            }}
-          >
-            <div className="flex justify-start">
-              <div className="flex items-center font-medium trails-text-primary text-sm flex-wrap whitespace-break-spaces break-all min-w-full">
-                {payMessage}
-              </div>
-            </div>
-          </div>
-
-          {/* Origin Token Selection for Payment Request */}
-          <div className="mb-4">
-            <div
-              className="pt-4 pb-4 trails-border-radius-container p-3 group transition-all duration-200 border bg-white dark:bg-gray-800 min-h-[120px] flex flex-col"
-              style={{
-                borderColor: "var(--trails-bg-secondary-hover)",
-                borderWidth: "1px",
-                borderStyle: "solid",
-              }}
-            >
-              {/* Amount to Pay Label */}
-              <div className="mb-4 flex justify-between items-center">
-                <div className="text-sm font-medium trails-text-secondary text-left m-0">
-                  Pay with
-                  {fundMethod === "direct-transfer"
-                    ? ""
-                    : fundMethod === "onramp-mesh"
-                      ? " Exchange"
-                      : fundMethod === "onramp-meld"
-                        ? " Onramp Provider"
-                        : ""}
-                </div>
-                <FundingMethodSelectorButton />
-              </div>
-
-              <div className="flex items-center space-x-2 flex-1">
-                {/* Amount Display - Non-editable */}
-                <div className="flex-1">
-                  <div className="flex items-center space-x-2">
-                    <DynamicSizeInputField
-                      ref={paymentRequestInputRef}
-                      value={
-                        prepareSendQuote?.originAmountFormattedLocale ||
-                        prepareSendQuote?.originAmountFormatted ||
-                        ""
-                      }
-                      readOnly={true}
-                      isLoading={isLoadingQuote}
-                      variant="default"
-                      inputSize="standard"
-                    />
-                    {isLoadingQuote && <LoadingSpinner />}
-                  </div>
-                </div>
-
-                {/* Origin Token Selection */}
-                <div className="relative">
-                  <TokenSelectorButton
-                    token={originToken}
-                    chainId={originToken?.chainId}
-                    onSelect={() => setShowOriginTokenSelector(true)}
-                  />
-                </div>
-              </div>
-
-              {/* Bottom Info Row */}
-              <div className="mt-4 flex justify-between items-center">
-                {/* USD Amount */}
-                <div
-                  className="text-xs text-gray-500 dark:text-gray-400"
-                  title={prepareSendQuote?.originAmountUsdDisplay || undefined}
-                >
-                  {originToken?.symbol &&
-                  prepareSendQuote?.originAmountFormatted ? (
-                    prepareSendQuote?.originAmountUsdDisplay === "$0.00" ||
-                    prepareSendQuote?.originAmountUsdDisplay === "$0" ? (
-                      <>
-                        {prepareSendQuote.originAmountFormatted}{" "}
-                        {originToken.symbol}
-                      </>
-                    ) : (
-                      <span className="notranslate" translate="no">
-                        ≈ {(() => {
-                          return (
-                            prepareSendQuote?.originAmountUsdLocaleDisplay ||
-                            prepareSendQuote?.originAmountUsdLocaleDisplay ||
-                            prepareSendQuote?.originAmountUsdDisplay ||
-                            formatUsdAmountLocaleDisplay(0)
-                          )
-                        })()} {prepareSendQuote?.fees?.totalFeeAmountUsd &&
-                        parseFloat(prepareSendQuote.fees.totalFeeAmountUsd) >
-                          0 ? (
-                          <button
-                            type="button"
-                            onClick={() => setShowQuoteDetails(true)}
-                            className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer transition-colors"
-                          >
-                            <span className="notranslate" translate="no">
-                              (incl.{" "}
-                              {prepareSendQuote.fees
-                                .totalFeeAmountUsdLocaleDisplay ||
-                                prepareSendQuote.fees
-                                  .totalFeeAmountUsdDisplay}{" "}
-                              fees)
-                            </span>
-                          </button>
-                        ) : null}
-                      </span>
-                    )
-                  ) : (
-                    <span>&nbsp;</span>
-                  )}
-                </div>
-
-                {/* Origin Token Balance and Percentage Buttons */}
-                {originToken &&
-                  fundMethod !== "direct-transfer" &&
-                  fundMethod !== "onramp-mesh" && (
-                    <div className="flex items-center space-x-2">
-                      <button
-                        type="button"
-                        className="text-xs text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors bg-transparent border-none p-0"
-                        onClick={() => {
-                          if (originTokenBalance?.balanceFormatted) {
-                            const balance = parseFloat(
-                              originTokenBalance.balanceFormatted,
-                            )
-                            if (isValidNumber(balance)) {
-                              setTokenAmountForBackend(balance.toFixed(6))
-                            }
-                          }
-                        }}
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault()
-                            if (originTokenBalance?.balanceFormatted) {
-                              const balance = parseFloat(
-                                originTokenBalance.balanceFormatted,
-                              )
-                              if (isValidNumber(balance)) {
-                                setTokenAmountForBackend(balance.toFixed(6))
-                              }
-                            }
-                          }
-                        }}
-                        title="Click to use full balance"
-                        disabled={!originTokenBalance?.balanceFormatted}
-                      >
-                        <span translate="no">
-                          Balance:{" "}
-                          {isLoadingTokens ? (
-                            <span className="inline-block w-12 h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></span>
-                          ) : (
-                            originTokenBalance?.balanceLocaleDisplay ||
-                            originTokenBalance?.balanceFormatted ||
-                            ""
-                          )}
-                        </span>
-                      </button>
-
-                      {/* Percentage Buttons - Only show if toAmount is not set */}
-                      {!toAmount && originTokenBalance?.balanceFormatted && (
-                        <PercentageMaxButtons
-                          userBalance={originTokenBalance.balanceFormatted}
-                          userBalanceRaw={originTokenBalance.balance ?? "0"}
-                          decimals={originTokenBalance.decimals ?? 18}
-                          isNativeToken={originToken.isNativeToken ?? false}
-                          gasCostFormatted={prepareSendQuote?.gasCostFormatted}
-                          chainId={originToken.chainId}
-                          onAmountSelect={(amount) => {
-                            setTokenAmountForBackend(amount)
-                          }}
-                          className="opacity-100"
-                        />
-                      )}
-                    </div>
-                  )}
-              </div>
-            </div>
-          </div>
-        </>
-      ) : (
-        /* Regular Pay UI */
-        <>
-          {/* Recipient and Origin Token Section */}
-          <div className="space-y-1 trails-bg-secondary trails-border-radius-container p-3">
-            {/* Recipient Button - Like Fund.tsx */}
-            <div className="relative">
-              {toRecipient ? (
-                /* Display only - recipient 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="text-left">
-                    <div className="font-medium trails-text-primary text-sm">
-                      Recipient address
-                    </div>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <AddressOrEnsName
-                      address={toRecipient}
-                      className="font-medium trails-text-primary text-sm"
-                    />
-                    <AddressWalletIcon
-                      walletAddress={toRecipient as `0x${string}`}
-                      size={20}
-                      className="shrink-0"
-                    />
-                  </div>
-                </div>
-              ) : (
-                /* Interactive button - user can select recipient */
-                <button
-                  type="button"
-                  onClick={() => navigate("recipients")}
-                  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"
-                >
-                  <div className="text-left">
-                    <div className="font-medium trails-text-primary text-sm">
-                      Recipient address
-                    </div>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    {selectedRecipient ? (
-                      <>
-                        <AddressOrEnsName
-                          address={selectedRecipient}
-                          className="font-medium trails-text-primary text-sm"
-                        />
-                        <AddressWalletIcon
-                          walletAddress={selectedRecipient as `0x${string}`}
-                          size={20}
-                          className="shrink-0"
-                        />
-                      </>
-                    ) : (
-                      <>
-                        <div className="font-medium text-gray-900 dark:text-white text-sm">
-                          Select address
-                        </div>
-                        <div className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
-                          <div className="w-4 h-4 rounded-full bg-gray-400 dark:bg-gray-500"></div>
-                        </div>
-                      </>
-                    )}
-                    <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
-                  </div>
-                </button>
-              )}
-            </div>
-
-            {/* Origin Token Selector - Like Fund.tsx */}
-            <div className="relative">
-              <button
-                type="button"
-                onClick={() => setShowOriginTokenSelector(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"
-              >
-                <div className="text-left">
-                  <div className="font-medium trails-text-primary text-sm">
-                    Payment method
-                  </div>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                  {originToken ? (
-                    <>
-                      <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?.originAmountFormatted ? (
-                          <span>
-                            {prepareSendQuote.originAmountFormatted}{" "}
-                            {originToken.symbol}
-                          </span>
-                        ) : (
-                          ""
-                        )}
-                      </div>
-                      <TokenImage
-                        symbol={originToken.symbol}
-                        imageUrl={originToken.imageUrl}
-                        chainId={originToken.chainId}
-                        size={20}
-                      />
-                    </>
-                  ) : (
-                    <>
-                      <div className="font-medium text-gray-900 dark:text-white text-sm">
-                        Select payment token
-                      </div>
-                      <div className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
-                        <Search className="w-4 h-4 text-gray-400" />
-                      </div>
-                    </>
-                  )}
-                  <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
-                </div>
-              </button>
-            </div>
-          </div>
-
-          <div className="space-y-1">
-            {/* Destination Amount Input Section - Like Fund.tsx but for destination token */}
-            <div
-              className={`pt-4 pb-4 p-3 group transition-all duration-200 border min-h-[120px] flex flex-col ${
-                !toAmount ? "" : ""
-              }`}
-              style={{
-                borderColor: "var(--trails-bg-secondary-hover)",
-                borderWidth: "1px",
-                borderStyle: "solid",
-                borderRadius: "var(--trails-border-radius-large-button)",
-              }}
-            >
-              {/* Amount to Pay Label */}
-              <div className="mb-4 flex justify-between items-center">
-                <div className="text-sm font-medium trails-text-secondary text-left m-0">
-                  Recipient receives
-                </div>
-                <FundingMethodSelectorButton />
-              </div>
-
-              <div className="flex items-center space-x-2 flex-1">
-                {/* Amount Input */}
-                <div className="flex-1">
-                  <div className="flex items-center space-x-2">
-                    <input
-                      ref={inputRef}
-                      type="text"
-                      value={displayAmount}
-                      onChange={(e) => handleAmountChange(e.target.value)}
-                      placeholder={`0 ${selectedDestToken?.symbol || ""}`}
-                      readOnly={!!toAmount}
-                      autoComplete="off"
-                      className={`w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${
-                        isLoadingQuote ? "animate-pulse" : ""
-                      }`}
-                      style={inputStyles}
-                    />
-                    {isLoadingQuote && <LoadingSpinner />}
-                  </div>
-                </div>
-
-                {/* Destination Token Selection */}
-                <div className="relative">
-                  <TokenSelectorButton
-                    token={selectedDestToken}
-                    chainId={globalDestinationToken?.chainId || toChainId}
-                    onSelect={() => setShowDestinationTokenSelector(true)}
-                    unselectable={!!toToken}
-                  />
-                </div>
-              </div>
-
-              {/* Bottom Info Row */}
-              <div className="mt-4 flex justify-between items-center">
-                {/* USD Amount */}
-                <div className="text-xs text-gray-500 dark:text-gray-400">
-                  {selectedDestToken?.symbol && displayAmount ? (
-                    <span className="notranslate" translate="no">
-                      ≈{" "}
-                      {amountUsdLocaleDisplay ||
-                        amountUsdDisplay ||
-                        formatUsdAmountLocaleDisplay(0)}
-                    </span>
-                  ) : (
-                    <span>&nbsp;</span>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        </>
-      )}
-
-      {/* Exchange/Contract Warning */}
-      <RefundWarning
-        fundMethod={fundMethod}
-        isSenderContractOnOrigin={isSenderContractOnOrigin}
-        isSenderContractOnDestination={isSenderContractOnDestination}
-        isSequenceWallet={isSequenceWallet}
-      />
-
-      {/* Error Display */}
-      <ErrorDisplay
-        errorPrettified={quoteErrorPrettified}
-        error={quoteError}
-        severity="warning"
-      />
-
-      {/* Fee Options */}
-      {fundMethod !== "direct-transfer" &&
-        fundMethod !== "onramp-mesh" &&
-        originToken && (
-          <FeeOptions
-            processedFeeOptions={processedFeeOptions}
-            selectedFeeOption={selectedFeeOption}
-            setSelectedFeeOption={(feeOption) =>
-              setSelectedFeeOption(feeOption)
-            }
-            chainId={originToken.chainId}
-            isRefetching={isLoadingQuote}
-            originTokenInfo={
-              originToken
-                ? {
-                    originToken,
-                    originTokenBalance: originTokenBalance?.balance ?? "0",
-                    originTokenAmount:
-                      prepareSendQuote?.originAmountFormatted ?? "0",
-                  }
-                : undefined
-            }
-          />
-        )}
-
-      {/* Quote Details */}
-      {prepareSendQuote && (
-        <div className="mb-4">
-          <QuoteDetails
-            quote={prepareSendQuote}
-            showContent={true}
-            isRefetching={isLoadingQuote}
-            initialExpanded={showQuoteDetails}
-            isPassthrough={isPassthroughEligible(
-              prepareSendQuote.passthroughEligible,
-              selectedFeeOption,
-              processedFeeOptions,
-            )}
-          />
-        </div>
-      )}
-
-      {/* Pay Button */}
-      <form
-        onSubmit={(e) => {
-          // Track the click event with string values
-          trackClick({
-            component: "PayWidget",
-            action: "submit_payment",
-            label: buttonText || "Pay",
-            metadata: {
-              originToken: originToken?.symbol || "",
-              destinationToken: selectedDestToken?.symbol || "",
-              amount: tokenAmountForBackend || "",
-              recipient: selectedRecipient || "",
-              fundMethod: fundMethod || "",
-              chainId: toChainId?.toString() || "",
-            },
-          })
-          // Call the original submit handler
-          handleSubmit(e)
-        }}
-      >
-        <button
-          type="submit"
-          disabled={
-            !tokenAmountForBackend ||
-            parseFloat(tokenAmountForBackend) <= 0 ||
-            isSubmitting ||
-            isLoadingQuote ||
-            !isValidRecipient ||
-            !destinationTokenAddress ||
-            !isValidCustomToken ||
-            isSameTokenSameChainToSelf ||
-            (fundMethod !== "direct-transfer" &&
-              prepareSendQuote?.noSufficientBalance) ||
-            !prepareSendQuote ||
-            (fundMethod !== "direct-transfer" &&
-              (selectedFeeOption && originToken
-                ? isFeeOptionDisabled(selectedFeeOption as ProcessedFeeOption, {
-                    originToken: originToken,
-                    originTokenBalance: originTokenBalance?.balance ?? "0",
-                    originTokenAmount:
-                      prepareSendQuote?.originAmountFormatted ?? "0",
-                  })
-                : 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>
-          ) : !account?.address ? (
-            "Connect your wallet"
-          ) : fundMethod !== "direct-transfer" &&
-            prepareSendQuote?.noSufficientBalance ? (
-            "Insufficient Balance"
-          ) : !selectedRecipient ? (
-            "Select recipient address"
-          ) : !originToken ? (
-            "Select payment token"
-          ) : !selectedDestToken ? (
-            "Select destination token"
-          ) : !tokenAmountForBackend ||
-            parseFloat(tokenAmountForBackend) <= 0 ? (
-            "Enter an amount"
-          ) : isSameTokenSameChainToSelf ? (
-            "No quote available"
-          ) : isLoadingQuote ? (
-            <div className="flex items-center justify-center">
-              <LoadingSpinner className="mr-2" />
-              <span>Getting quote...</span>
-            </div>
-          ) : buttonText === "Getting quote..." ||
-            buttonText === "No quote available" ? (
-            <div className="flex items-center justify-center">
-              <LoadingSpinner className="mr-2" />
-              <span>{buttonText}</span>
-            </div>
-          ) : (
-            buttonText || "Pay"
-          )}
-        </button>
-      </form>
-    </div>
-  )
-}
-
-export default Pay