0xtrails 0.1.13 → 0.2.0

package/src/widget/components/Pay.tsx

@@ -0,0 +1,1088 @@
+import { ChevronRight, Search, Loader2, ChevronDown } from "lucide-react"
+import { useEffect, useState, useMemo, useRef, useCallback } from "react"
+import type React from "react"
+import type { Account, WalletClient } from "viem"
+import type { TransactionState } from "../../transactions.js"
+import type { OnCompleteProps } from "../hooks/useSendForm.js"
+import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
+import { useSendForm } from "../hooks/useSendForm.js"
+import { TradeType } from "../../prepareSend.js"
+import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
+import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
+import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
+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 { usePayMessage } from "../hooks/usePayMessage.js"
+import { TokenImage } from "./TokenImage.js"
+import { Identicon } from "./Identicon.js"
+import { TokenSelector } from "./TokenSelector.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { ChainList } from "./ChainList.js"
+import { QuoteDetails } from "./QuoteDetails.js"
+import { ErrorDisplay } from "./ErrorDisplay.js"
+import { getChainInfo } from "../../chains.js"
+import { formatUsdAmountDisplay } from "../../tokenBalances.js"
+import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
+import { truncateAddress } from "../../utils.js"
+import type { PrepareSendQuote } from "../../prepareSend.js"
+import type { SupportedToken } from "../../tokens.js"
+import { logger } from "../../logger.js"
+import { RefundWarning } from "./RefundWarning.js"
+
+interface PayProps {
+  selectedToken?: any // Origin token (optional - user can select)
+  onBack?: () => void
+  account: Account
+  walletClient: WalletClient
+  onTransactionStateChange: (transactionStates: TransactionState[]) => void
+  onError: (error: Error | string | null) => void
+  onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
+  onConfirm: () => void
+  onComplete: (result: OnCompleteProps) => void
+  onSend: (amount: string, recipient: string) => void
+  paymasterUrls?: Array<{ chainId: number; url: string }>
+  gasless?: boolean
+  setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
+  quoteProvider?: string
+  fundMethod?: string
+  onNavigateToMeshConnect?: (
+    props: {
+      toTokenSymbol: string
+      toTokenAmount: string
+      toChainId: number
+      toRecipientAddress: string
+    },
+    quote?: PrepareSendQuote | null,
+  ) => void
+  checkoutOnHandlers?: CheckoutOnHandlers
+  recentTokens?: SupportedToken[]
+  onRecentTokenSelect?: (token: SupportedToken) => void
+  onTrackToken?: (token: any) => void
+  toRecipient?: string
+  toAmount?: string
+  toChainId?: number
+  toToken?: string
+  toCalldata?: string
+  onAmountUpdate?: (amount: string) => void
+}
+
+export const Pay: React.FC<PayProps> = ({
+  selectedToken: initialOriginToken,
+  onBack,
+  account,
+  walletClient,
+  onTransactionStateChange,
+  onError,
+  onWaitingForWalletConfirm,
+  onConfirm,
+  onComplete,
+  onSend,
+  paymasterUrls,
+  gasless,
+  setWalletConfirmRetryHandler,
+  quoteProvider,
+  fundMethod,
+  onNavigateToMeshConnect,
+  checkoutOnHandlers,
+  recentTokens,
+  onRecentTokenSelect,
+  onTrackToken,
+  toRecipient,
+  toAmount,
+  toChainId,
+  toToken,
+  toCalldata,
+  onAmountUpdate,
+}) => {
+  const { mode } = useMode()
+  const { selectedToken: globalOriginToken, setSelectedToken: setOriginToken } =
+    useOriginSelectedToken()
+  const {
+    selectedToken: globalDestinationToken,
+    setSelectedToken: setDestinationToken,
+  } = useDestinationSelectedToken()
+  const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
+  const { setAmount: setGlobalAmount } = useSwapAmount()
+  const { setCurrentScreen } = useCurrentScreen()
+
+  // Use new default token selection hook
+  const {
+    defaultOriginToken,
+    defaultDestinationToken,
+    isLoading: isLoadingDefaults,
+  } = useDefaultTokenSelection()
+
+  // 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("")
+  const [showOriginTokenSelector, setShowOriginTokenSelector] = useState(false)
+  const [showOriginChainList, setShowOriginChainList] = useState(false)
+  const [showDestinationTokenSelector, setShowDestinationTokenSelector] =
+    useState(false)
+  const [showDestinationChainList, setShowDestinationChainList] =
+    useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const lastAutoSelectedRef = useRef<string | null>(null)
+
+  // Get sorted tokens to auto-select origin and destination tokens
+  const { filteredTokensFormatted } = useTokenList({
+    onContinue: () => {}, // Not used for auto-selection
+    onError: () => {}, // Not used for auto-selection
+    fundMethod: undefined,
+    allSupportedTokens: true, // Show all tokens for destination selection
+  })
+
+  // Use useSendForm for quote functionality with EXACT_OUTPUT trade type
+  const {
+    amountUsdDisplay,
+    isLoadingQuote,
+    prepareSendQuote,
+    setAmount: setSendFormAmount,
+    handleSubmit,
+    isSubmitting,
+    buttonText,
+    isValidRecipient,
+    selectedDestToken,
+    setSelectedDestToken,
+    setSelectedDestinationChain,
+    quoteError,
+    quoteErrorPrettified,
+    isSameTokenWithoutCustomCalldata,
+    destinationTokenAddress,
+    isValidCustomToken,
+    isSenderContractOnOrigin,
+    isSenderContractOnDestination,
+  } = useSendForm({
+    account,
+    toAmount: tokenAmountForBackend || toAmount, // Use the input amount as target amount for EXACT_OUTPUT
+    toRecipient: selectedRecipient || toRecipient || account.address,
+    toChainId,
+    toToken,
+    toCalldata,
+    walletClient,
+    onTransactionStateChange,
+    onError,
+    onWaitingForWalletConfirm,
+    paymasterUrls,
+    gasless,
+    onConfirm,
+    onComplete,
+    onSend,
+    selectedToken: originToken as any,
+    setWalletConfirmRetryHandler,
+    tradeType: TradeType.EXACT_OUTPUT, // Key difference: using EXACT_OUTPUT
+    quoteProvider,
+    fundMethod,
+    mode,
+    onNavigateToMeshConnect,
+    checkoutOnHandlers,
+  })
+
+  // Auto-select origin token using new hook
+  useEffect(() => {
+    if (!originToken && !isLoadingDefaults && defaultOriginToken) {
+      logger.console.log(
+        "[trails-sdk] Auto-selecting origin token:",
+        defaultOriginToken,
+      )
+      setOriginToken(defaultOriginToken as any)
+    }
+  }, [originToken, isLoadingDefaults, defaultOriginToken, setOriginToken])
+
+  // Initialize destination token from props or auto-select
+  useEffect(() => {
+    const currentKey = `${toToken}-${toChainId}`
+
+    if (
+      toToken &&
+      toChainId &&
+      filteredTokensFormatted?.length > 0 &&
+      lastAutoSelectedRef.current !== currentKey
+    ) {
+      // Find the destination token from props
+      const destinationToken = filteredTokensFormatted?.find(
+        (token) =>
+          token.chainId === Number(toChainId) &&
+          (token.contractAddress.toLowerCase() === toToken.toLowerCase() ||
+            token.symbol.toLowerCase() === toToken.toLowerCase()),
+      )
+
+      if (destinationToken) {
+        const decimals =
+          destinationToken.contractInfo?.decimals ??
+          (destinationToken as any)?.decimals
+
+        const formattedToken = {
+          ...destinationToken,
+          contractInfo: {
+            decimals,
+            contractAddress: destinationToken.contractAddress,
+            symbol: destinationToken.symbol,
+            name: destinationToken.name,
+          },
+        }
+
+        logger.console.log(
+          "[trails-sdk] Auto-selecting destination token from props:",
+          formattedToken,
+        )
+
+        setDestinationToken(formattedToken as any)
+        setSelectedDestToken({
+          symbol: destinationToken.symbol,
+          name: destinationToken.name,
+          imageUrl: destinationToken.imageUrl,
+          decimals,
+        })
+
+        // Set the destination chain
+        if (setSelectedDestinationChain) {
+          const chainInfo = getChainInfo(Number(toChainId))
+          if (chainInfo) {
+            setSelectedDestinationChain(chainInfo)
+          }
+        }
+
+        // Mark this combination as processed
+        lastAutoSelectedRef.current = currentKey
+      }
+    }
+  }, [
+    toToken,
+    toChainId,
+    filteredTokensFormatted,
+    setDestinationToken,
+    setSelectedDestToken,
+    setSelectedDestinationChain,
+  ])
+
+  // Initialize selected recipient from toRecipient prop or default to connected wallet
+  useEffect(() => {
+    if (toRecipient && !selectedRecipient) {
+      setSelectedRecipient(toRecipient)
+    } else if (!selectedRecipient && account?.address) {
+      // Default to connected wallet address if no recipient is set
+      setSelectedRecipient(account.address)
+    }
+  }, [toRecipient, selectedRecipient, 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 no toToken prop
+  useEffect(() => {
+    if (!toToken && !selectedDestToken?.symbol) {
+      // Prefer global destination token if set
+      const destTokenToUse = globalDestinationToken || defaultDestinationToken
+
+      if (destTokenToUse && !isLoadingDefaults) {
+        logger.console.log(
+          "[trails-sdk] Initializing destination token:",
+          destTokenToUse,
+        )
+
+        // Set destination token if not already set by global state
+        if (!globalDestinationToken && defaultDestinationToken) {
+          setDestinationToken(defaultDestinationToken as any)
+        }
+
+        const decimals =
+          destTokenToUse.contractInfo?.decimals ??
+          (destTokenToUse as any)?.decimals
+
+        setSelectedDestToken({
+          symbol: destTokenToUse.symbol,
+          name: destTokenToUse.name,
+          imageUrl: destTokenToUse.imageUrl,
+          decimals,
+        })
+
+        // Also set the destination chain if available
+        if (setSelectedDestinationChain && destTokenToUse.chainId) {
+          const chainInfo = getChainInfo(destTokenToUse.chainId)
+          if (chainInfo) {
+            setSelectedDestinationChain(chainInfo)
+          }
+        }
+      }
+    }
+  }, [
+    toToken,
+    globalDestinationToken,
+    defaultDestinationToken,
+    isLoadingDefaults,
+    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 = useMemo(() => {
+    return inputDisplayValue
+  }, [inputDisplayValue])
+
+  // Dynamic font size based on input length
+  const inputStyles = useMemo(() => {
+    const inputLength = displayAmount.length
+    let fontSize: string
+
+    if (inputLength > 12) {
+      fontSize = "0.875rem"
+    } else if (inputLength > 9) {
+      fontSize = "1rem"
+    } else if (inputLength > 6) {
+      fontSize = "1.125rem"
+    } else if (inputLength > 3) {
+      fontSize = "1.25rem"
+    } else {
+      fontSize = "1.5rem"
+    }
+
+    return {
+      fontSize,
+      transition: "all 0.1s ease-in-out",
+    }
+  }, [displayAmount.length])
+
+  const handleOriginTokenSelect = useCallback(
+    (token: any) => {
+      const formattedToken = {
+        ...token,
+        decimals: token.contractInfo?.decimals || token.decimals,
+        contractInfo: {
+          decimals: token.contractInfo?.decimals || token.decimals,
+          contractAddress: token.contractAddress,
+          symbol: token.symbol,
+          name: token.name,
+        },
+      }
+
+      // Update global origin token state
+      setOriginToken(formattedToken as any)
+      setShowOriginTokenSelector(false)
+      logger.console.log("[trails-sdk] selected origin token", token)
+      // Track the token selection
+      onTrackToken?.(token)
+    },
+    [setOriginToken, onTrackToken],
+  )
+
+  const handleDestinationTokenSelect = useCallback(
+    (token: any) => {
+      const formattedToken = {
+        ...token,
+        decimals: token.contractInfo?.decimals || token.decimals,
+        contractInfo: {
+          decimals: token.contractInfo?.decimals || token.decimals,
+          contractAddress: token.contractAddress,
+          symbol: token.symbol,
+          name: token.name,
+        },
+      }
+
+      // Update both global destination token state and useSendForm state
+      setDestinationToken(formattedToken as any)
+      setSelectedDestToken(formattedToken as any)
+
+      // 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"
+          showAccountActions={true}
+        />
+        <TokenSelector
+          onTokenSelect={handleOriginTokenSelect}
+          onError={onError}
+          fundMethod={fundMethod}
+          showContinueButton={false}
+          compactMode={false}
+          recentTokens={recentTokens}
+          onRecentTokenSelect={(token) => {
+            const formattedToken = {
+              ...token,
+              decimals: token.decimals,
+              contractInfo: {
+                decimals: token.decimals,
+                contractAddress: token.contractAddress,
+                symbol: token.symbol,
+                name: token.name,
+              },
+            } as any
+            setOriginToken(formattedToken)
+            setShowOriginTokenSelector(false)
+            onRecentTokenSelect?.(token)
+          }}
+          allSupportedTokens={false}
+          chainListScreen={true}
+          onNavigateToChainList={() => {
+            setShowOriginTokenSelector(false)
+            setShowOriginChainList(true)
+          }}
+          onNavigateToFundMethods={() => {
+            setCurrentScreen("fund-methods")
+          }}
+        />
+      </div>
+    )
+  }
+
+  // Show destination token selector screen
+  if (showDestinationTokenSelector) {
+    return (
+      <div className="space-y-2">
+        <ScreenHeader
+          onBack={() => setShowDestinationTokenSelector(false)}
+          headerContent="Select Token"
+          headerContentAlign="left"
+          showAccountActions={true}
+        />
+        <TokenSelector
+          onTokenSelect={handleDestinationTokenSelect}
+          onError={onError}
+          fundMethod={fundMethod}
+          showContinueButton={false}
+          compactMode={false}
+          recentTokens={recentTokens}
+          onRecentTokenSelect={(token) => {
+            const formattedToken = {
+              ...token,
+              decimals: token.decimals,
+              contractInfo: {
+                decimals: token.decimals,
+                contractAddress: token.contractAddress,
+                symbol: token.symbol,
+                name: token.name,
+              },
+            } as any
+            setDestinationToken(formattedToken)
+            setSelectedDestToken(formattedToken)
+            setShowDestinationTokenSelector(false)
+            onRecentTokenSelect?.(token)
+          }}
+          allSupportedTokens={true}
+          chainListScreen={true}
+          onNavigateToChainList={() => {
+            setShowDestinationTokenSelector(false)
+            setShowDestinationChainList(true)
+          }}
+        />
+      </div>
+    )
+  }
+
+  // Check if this is a payment request (all required props are set)
+  const isPaymentRequest = !!(toToken && toAmount && toChainId && toRecipient)
+
+  return (
+    <div className="space-y-4">
+      <ScreenHeader
+        onBack={onBack}
+        headerContent="Pay"
+        headerContentAlign="left"
+        showAccountActions={true}
+      />
+
+      {isPaymentRequest ? (
+        /* Payment Request UI */
+        <>
+          {/* Payment Request Header */}
+          <div className="space-y-1 trails-bg-secondary trails-border-radius-container p-3">
+            <div className="flex justify-start">
+              <div className="flex items-center font-medium trails-text-primary text-sm whitespace-nowrap overflow-hidden">
+                {payMessage}
+              </div>
+            </div>
+          </div>
+
+          {/* Origin Token Selection for Payment Request */}
+          <div className="space-y-1">
+            <div className="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary">
+              {/* Amount to Pay Label */}
+              <div className="flex justify-between items-center mb-2">
+                <div className="text-sm font-bold trails-text-secondary text-left">
+                  Pay with
+                </div>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                {/* Amount Display - Non-editable */}
+                <div className="flex-1">
+                  <div className="flex items-center justify-start">
+                    <div className="flex items-center">
+                      <input
+                        type="text"
+                        value={prepareSendQuote?.originAmountFormatted || ""}
+                        readOnly={true}
+                        className={`bg-transparent border-none outline-none font-bold text-left trails-text-primary ${
+                          isLoadingQuote ? "animate-pulse" : ""
+                        }`}
+                        style={{
+                          fontSize: inputStyles.fontSize,
+                          width: prepareSendQuote?.originAmountFormatted
+                            ? `${Math.max(prepareSendQuote.originAmountFormatted.length - 1 + 0.5, 1)}ch`
+                            : "1ch",
+                          minWidth: "1ch",
+                          maxWidth: "200px",
+                          padding: "0",
+                          margin: "0",
+                          transition: "all 0.1s ease-in-out",
+                        }}
+                      />
+                      <span
+                        className="font-bold text-gray-400 dark:text-gray-500"
+                        style={{
+                          fontSize: inputStyles.fontSize,
+                          marginLeft: "0.1em",
+                          padding: "0",
+                          transition: "all 0.2s ease-in-out",
+                        }}
+                      >
+                        {originToken?.symbol || "TOKEN"}
+                      </span>
+                      {isLoadingQuote && (
+                        <div className="ml-2 animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Origin Token Selection Button */}
+                <button
+                  type="button"
+                  onClick={() => setShowOriginTokenSelector(true)}
+                  className="flex items-center space-x-2 trails-bg-card hover:trails-hover-bg trails-border-radius-input px-2.5 py-1.5 border trails-border-primary transition-colors cursor-pointer"
+                >
+                  {originToken ? (
+                    <>
+                      <TokenImage
+                        symbol={originToken.symbol}
+                        imageUrl={originToken.imageUrl}
+                        chainId={originToken.chainId}
+                        size={20}
+                      />
+                      <span className="font-medium trails-text-primary text-sm">
+                        {originToken.symbol}
+                      </span>
+                      <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
+                    </>
+                  ) : (
+                    <>
+                      <span className="font-medium trails-text-muted text-sm">
+                        Select Token
+                      </span>
+                      <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
+                    </>
+                  )}
+                </button>
+              </div>
+
+              {/* Bottom Info Row */}
+              <div className="mt-2 flex justify-between items-center">
+                {/* USD Amount */}
+                <div className="text-xs trails-text-muted">
+                  {originToken?.symbol &&
+                  prepareSendQuote?.originAmountFormatted ? (
+                    <>≈ {prepareSendQuote?.originAmountUsdDisplay || "$0.00"}</>
+                  ) : (
+                    <span>&nbsp;</span>
+                  )}
+                </div>
+                <div className="text-xs trails-text-muted">
+                  <span>&nbsp;</span>
+                </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">
+                    <div
+                      className="font-medium trails-text-primary text-sm"
+                      title={toRecipient}
+                    >
+                      {truncateAddress(toRecipient)}
+                    </div>
+                    <Identicon
+                      value={toRecipient}
+                      size={24}
+                      className="flex-shrink-0"
+                    />
+                  </div>
+                </div>
+              ) : (
+                /* Interactive button - user can select recipient */
+                <button
+                  type="button"
+                  onClick={() => setCurrentScreen("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 ? (
+                      <>
+                        <div
+                          className="font-medium trails-text-primary text-sm"
+                          title={selectedRecipient}
+                        >
+                          {truncateAddress(selectedRecipient)}
+                        </div>
+                        <Identicon
+                          value={selectedRecipient}
+                          size={24}
+                          className="flex-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">
+                    Pay with
+                  </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={24}
+                      />
+                    </>
+                  ) : (
+                    <>
+                      <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="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary">
+              {/* Amount to Pay Label */}
+              <div className="flex justify-between items-center mb-2">
+                <div className="text-sm font-medium trails-text-secondary text-left">
+                  Recipient receives
+                </div>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                {/* Amount Input */}
+                <div className="flex-1">
+                  <div className="flex items-center justify-start">
+                    <div className="flex items-center">
+                      <input
+                        ref={inputRef}
+                        type="text"
+                        value={displayAmount}
+                        onChange={(e) => handleAmountChange(e.target.value)}
+                        placeholder={`0 ${selectedDestToken?.symbol || ""}`}
+                        readOnly={!!toAmount}
+                        className={`bg-transparent border-none outline-none font-bold text-left trails-text-primary placeholder-trails-text-primary ${
+                          isLoadingQuote ? "animate-pulse" : ""
+                        }`}
+                        style={{
+                          fontSize: inputStyles.fontSize,
+                          width: `${Math.max((displayAmount || "0").length - 1 + 0.5, 1)}ch`,
+                          minWidth: "1ch",
+                          maxWidth: "270px",
+                          padding: "0",
+                          margin: "0",
+                          transition: "all 0.1s ease-in-out",
+                        }}
+                        inputMode="decimal"
+                      />
+                      <span
+                        className="font-bold text-gray-400 dark:text-gray-500"
+                        style={{
+                          fontSize: inputStyles.fontSize,
+                          marginLeft: "0.1em",
+                          padding: "0",
+                          transition: "all 0.2s ease-in-out",
+                        }}
+                      >
+                        {selectedDestToken?.symbol?.slice(0, 4) || "TOKEN"}
+                      </span>
+                      {isLoadingQuote && (
+                        <div className="ml-2 animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Destination Token Selection Button */}
+                {toToken ? (
+                  /* Non-clickable display when toToken is provided */
+                  <div className="flex items-center space-x-2 trails-bg-card trails-border-radius-input px-2.5 py-1.5 border trails-border-primary">
+                    {selectedDestToken ? (
+                      <>
+                        <TokenImage
+                          symbol={selectedDestToken.symbol}
+                          imageUrl={selectedDestToken.imageUrl}
+                          chainId={globalDestinationToken?.chainId || toChainId}
+                          size={20}
+                        />
+                        <span className="font-medium trails-text-primary text-sm">
+                          {selectedDestToken.symbol}
+                        </span>
+                      </>
+                    ) : (
+                      <span className="font-medium trails-text-muted text-sm">
+                        Select Token
+                      </span>
+                    )}
+                  </div>
+                ) : (
+                  /* Clickable button when toToken is not provided */
+                  <button
+                    type="button"
+                    onClick={() => setShowDestinationTokenSelector(true)}
+                    className="flex items-center space-x-2 trails-bg-card hover:trails-hover-bg trails-border-radius-input px-2.5 py-1.5 border trails-border-primary transition-colors cursor-pointer"
+                  >
+                    {selectedDestToken ? (
+                      <>
+                        <TokenImage
+                          symbol={selectedDestToken.symbol}
+                          imageUrl={selectedDestToken.imageUrl}
+                          chainId={globalDestinationToken?.chainId || toChainId}
+                          size={20}
+                        />
+                        <span className="font-medium trails-text-primary text-sm">
+                          {selectedDestToken.symbol}
+                        </span>
+                        <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
+                      </>
+                    ) : (
+                      <>
+                        <span className="font-medium trails-text-muted text-sm">
+                          Select Token
+                        </span>
+                        <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
+                      </>
+                    )}
+                  </button>
+                )}
+              </div>
+
+              {/* Bottom Info Row */}
+              <div className="mt-2 flex justify-between items-center">
+                {/* USD Amount */}
+                <div className="text-xs trails-text-muted">
+                  {selectedDestToken?.symbol && displayAmount ? (
+                    <>≈ {amountUsdDisplay || "$0.00"}</>
+                  ) : (
+                    <span>&nbsp;</span>
+                  )}
+                </div>
+                <div className="text-xs trails-text-muted">
+                  <span>&nbsp;</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Exchange/Contract Warning */}
+      <RefundWarning
+        fundMethod={fundMethod}
+        isSenderContractOnOrigin={isSenderContractOnOrigin}
+        isSenderContractOnDestination={isSenderContractOnDestination}
+      />
+
+      {/* Error Display */}
+      <ErrorDisplay
+        errorPrettified={quoteErrorPrettified}
+        error={quoteError}
+        severity="warning"
+      />
+
+      {prepareSendQuote?.noSufficientBalance ? (
+        <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
+          <div className="flex items-center space-x-2">
+            <svg
+              className="w-4 h-4 text-amber-500 flex-shrink-0"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+              />
+            </svg>
+            <p className="text-sm text-amber-600 dark:text-amber-400">
+              Insufficient balance to complete this transaction
+            </p>
+          </div>
+        </div>
+      ) : prepareSendQuote?.minimumNotMet ? (
+        <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
+          <div className="flex items-center space-x-2">
+            <svg
+              className="w-4 h-4 text-amber-500 flex-shrink-0"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+              />
+            </svg>
+            <p className="text-sm text-amber-600 dark:text-amber-400">
+              Please enter an amount above{" "}
+              {formatUsdAmountDisplay(MINIMUM_USD_AMOUNT_FOR_SWAP)} otherwise
+              transfer may fail
+            </p>
+          </div>
+        </div>
+      ) : null}
+
+      {/* Pay Button */}
+      <form onSubmit={handleSubmit}>
+        <button
+          type="submit"
+          disabled={
+            !tokenAmountForBackend ||
+            parseFloat(tokenAmountForBackend) <= 0 ||
+            isSubmitting ||
+            isLoadingQuote ||
+            !isValidRecipient ||
+            !destinationTokenAddress ||
+            !isValidCustomToken ||
+            prepareSendQuote?.noSufficientBalance ||
+            isSameTokenWithoutCustomCalldata ||
+            !prepareSendQuote
+          }
+          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">
+              <Loader2 className="w-5 h-5 animate-spin mr-2" />
+              <span>{buttonText}</span>
+            </div>
+          ) : isSameTokenWithoutCustomCalldata ? (
+            "Select Different Tokens"
+          ) : prepareSendQuote?.noSufficientBalance ? (
+            "Insufficient Balance"
+          ) : !selectedRecipient ? (
+            "Select recipient address"
+          ) : !selectedDestToken ? (
+            "Select destination token"
+          ) : !tokenAmountForBackend ||
+            parseFloat(tokenAmountForBackend) <= 0 ? (
+            "Enter an amount"
+          ) : !prepareSendQuote && !quoteError ? (
+            "Getting quote..."
+          ) : (
+            buttonText || "Pay"
+          )}
+        </button>
+      </form>
+
+      {/* Quote Details */}
+      {prepareSendQuote && (
+        <div className="space-y-2">
+          <QuoteDetails quote={prepareSendQuote} showContent={true} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Pay