0xtrails 0.1.2 → 0.1.3

package/src/widget/components/Swap.tsx

@@ -0,0 +1,648 @@
+import { ChevronDown, Loader2, ArrowUpDown } from "lucide-react"
+import type React from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
+import type { Account, WalletClient } from "viem"
+import type { TransactionState } from "../../transactions.js"
+import type { OnCompleteProps, Token } from "../hooks/useSendForm.js"
+import type { SupportedToken } from "../../tokens.js"
+import { useSendForm } from "../hooks/useSendForm.js"
+import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
+import { FeeOptions } from "./FeeOptions.js"
+import { TokenImage } from "./TokenImage.js"
+import { QuoteDetails } from "./QuoteDetails.js"
+import { type PrepareSendQuote, TradeType } from "../../prepareSend.js"
+import { getChainInfo } from "../../chains.js"
+import { formatUsdAmountDisplay } from "../../tokenBalances.js"
+import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { TokenSelector } from "./TokenSelector.js"
+
+interface SwapProps {
+  selectedToken: Token | null
+  onSend: (amount: string, recipient: string) => void
+  onBack: () => void
+  onConfirm: () => void
+  onComplete: (result: OnCompleteProps) => void
+  account: Account
+  toRecipient?: string
+  toAmount?: string
+  toChainId?: number
+  toToken?: string
+  toCalldata?: string
+  walletClient: WalletClient
+  onTransactionStateChange: (transactionStates: TransactionState[]) => void
+  onError: (error: Error | string | null) => void
+  onWaitingForWalletConfirm: (props: PrepareSendQuote) => 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
+  onAmountUpdate?: (amount: string) => void
+  mode?: "pay" | "fund" | "earn" | "swap"
+  checkoutOnHandlers?: CheckoutOnHandlers
+}
+
+export const Swap: React.FC<SwapProps> = ({
+  selectedToken: initialSelectedToken,
+  onSend,
+  onBack,
+  onConfirm,
+  onComplete,
+  account,
+  toAmount,
+  toChainId,
+  toToken,
+  toCalldata,
+  walletClient,
+  onTransactionStateChange,
+  onError,
+  onWaitingForWalletConfirm,
+  paymasterUrls,
+  gasless,
+  setWalletConfirmRetryHandler,
+  quoteProvider,
+  fundMethod,
+  onNavigateToMeshConnect,
+  onAmountUpdate,
+  mode,
+  checkoutOnHandlers,
+}) => {
+  const [isFlipped, setIsFlipped] = useState(false)
+  const [originChainId, setOriginChainId] = useState<number | null | undefined>(
+    initialSelectedToken?.chainId,
+  )
+  const [originToken, setOriginToken] = useState<SupportedToken | null>(
+    initialSelectedToken as SupportedToken | null,
+  )
+
+  const {
+    amount,
+    amountRaw,
+    amountUsdDisplay,
+    balanceFormatted,
+    handleSubmit,
+    isSubmitting,
+    isLoadingQuote,
+    isTokenDropdownOpen,
+    selectedDestinationChain,
+    selectedDestToken,
+    setAmount,
+    setSelectedDestinationChain,
+    setSelectedDestToken,
+    buttonText,
+    selectedFeeToken,
+    setSelectedFeeToken,
+    FEE_TOKENS,
+    setIsTokenDropdownOpen,
+    toAmountDisplay,
+    destinationTokenAddress,
+    isValidCustomToken,
+    prepareSendQuote,
+  } = useSendForm({
+    account,
+    toAmount,
+    toRecipient: account.address,
+    toChainId,
+    toToken,
+    toCalldata,
+    walletClient,
+    onTransactionStateChange,
+    onError,
+    onWaitingForWalletConfirm,
+    paymasterUrls,
+    gasless,
+    onConfirm,
+    onComplete,
+    onSend,
+    selectedToken: originToken as any,
+    setWalletConfirmRetryHandler,
+    tradeType: TradeType.EXACT_INPUT,
+    quoteProvider,
+    fundMethod,
+    mode,
+    onNavigateToMeshConnect,
+    checkoutOnHandlers,
+  })
+
+  // Handle amount input changes with decimal validation
+  const handleAmountChange = useCallback(
+    (value: string) => {
+      // Validate decimal places (max 8 decimals)
+      const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
+      if (!decimalMatch && value !== "") {
+        return // Don't update if more than 8 decimals
+      }
+      setAmount(value)
+    },
+    [setAmount],
+  )
+
+  // Handle percentage button clicks
+  const handlePercentageClick = useCallback(
+    (percentage: number) => {
+      if (!originToken || !balanceFormatted) return
+
+      // Parse the balance and calculate percentage
+      const balance = parseFloat(balanceFormatted)
+      if (Number.isNaN(balance)) return
+
+      const amount = (balance * percentage) / 100
+      setAmount(amount.toFixed(6))
+    },
+    [originToken, balanceFormatted, setAmount],
+  )
+
+  // Call onAmountUpdate when amountRaw changes
+  useEffect(() => {
+    if (onAmountUpdate) {
+      onAmountUpdate(amountRaw)
+    }
+  }, [amountRaw, onAmountUpdate])
+
+  // Auto-focus the input field when component mounts
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
+  const originTokenDropdownRef = useRef<HTMLDivElement>(null)
+  const tokenDropdownRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [isOriginTokenDropdownOpen, setIsOriginTokenDropdownOpen] =
+    useState(false)
+
+  useEffect(() => {
+    if (selectedDestToken) {
+      setSelectedDestinationChain(
+        getChainInfo((selectedDestToken as any)?.chainId as any) as any,
+      )
+    }
+  }, [selectedDestToken, setSelectedDestinationChain])
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        tokenDropdownRef.current &&
+        !tokenDropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsTokenDropdownOpen(false)
+      }
+      if (
+        originTokenDropdownRef.current &&
+        !originTokenDropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOriginTokenDropdownOpen(false)
+      }
+    }
+
+    if (isTokenDropdownOpen || isOriginTokenDropdownOpen) {
+      document.addEventListener("click", handleClickOutside)
+      return () => document.removeEventListener("click", handleClickOutside)
+    }
+  }, [isTokenDropdownOpen, isOriginTokenDropdownOpen, setIsTokenDropdownOpen])
+
+  // Handle flip functionality
+  const handleFlip = () => {
+    if (!selectedDestinationChain || !originToken || !selectedDestToken) return
+
+    setIsFlipped(!isFlipped)
+
+    // Store current values
+    const tempOriginToken = originToken
+    const tempOriginChainId = originChainId
+
+    // Swap origin and destination
+    setOriginToken(selectedDestToken as any)
+    setOriginChainId((selectedDestToken as any)?.chainId as any)
+
+    // Set destination to previous origin (convert to TokenInfo)
+    setSelectedDestToken(tempOriginToken as any)
+
+    // Update destination chain
+    const newChain = getChainInfo(tempOriginChainId as any)
+    if (newChain) {
+      setSelectedDestinationChain(newChain)
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <ScreenHeader
+        onBack={onBack}
+        headerContent="Swap"
+        headerContentAlign="center"
+      />
+
+      <form onSubmit={handleSubmit} className="space-y-1">
+        {/* Input Section - Amount + Token Selection */}
+        <div className="trails-bg-secondary trails-border-radius-container p-3 group">
+          {/* Sell Label and Percentage Buttons */}
+          <div className="flex justify-between items-center mb-2">
+            <div className="text-sm font-medium trails-text-secondary">
+              Sell
+            </div>
+
+            {/* Percentage Buttons */}
+            {originToken && (
+              <div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                <button
+                  type="button"
+                  onClick={() => handlePercentageClick(25)}
+                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
+                >
+                  25%
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handlePercentageClick(50)}
+                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
+                >
+                  50%
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handlePercentageClick(75)}
+                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
+                >
+                  75%
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handlePercentageClick(100)}
+                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
+                >
+                  Max
+                </button>
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center space-x-2">
+            {/* Amount Input */}
+            <div className="flex-1">
+              <input
+                ref={inputRef}
+                id="amount"
+                type="text"
+                value={amount}
+                onChange={(e) => handleAmountChange(e.target.value)}
+                placeholder="0.00"
+                className="w-full bg-transparent text-xl font-medium trails-text-primary placeholder:trails-text-muted border-none outline-none"
+              />
+            </div>
+
+            {/* Token Selection Button */}
+            <div className="relative" ref={originTokenDropdownRef}>
+              <button
+                type="button"
+                onClick={() =>
+                  setIsOriginTokenDropdownOpen(!isOriginTokenDropdownOpen)
+                }
+                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={originChainId}
+                      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>
+
+              {/* Token Selector Modal */}
+              {isOriginTokenDropdownOpen && (
+                <div className="absolute right-0 top-full mt-2 w-80 trails-bg-card rounded-lg shadow-lg border trails-border-primary max-h-80 overflow-hidden z-10">
+                  <div className="p-2">
+                    <TokenSelector
+                      onTokenSelect={(token: any) => {
+                        setOriginToken({
+                          ...token,
+                          decimals:
+                            token.contractInfo?.decimals || token.decimals,
+                          contractInfo: {
+                            decimals:
+                              token.contractInfo?.decimals || token.decimals,
+                            contractAddress: token.contractAddress,
+                            symbol: token.symbol,
+                            name: token.name,
+                          },
+                        } as any)
+                        setOriginChainId(token.chainId)
+                        setIsOriginTokenDropdownOpen(false)
+                      }}
+                      onError={onError}
+                      mode="swap"
+                      fundMethod={fundMethod}
+                      showContinueButton={false}
+                      compactMode={false}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Bottom Info Row */}
+          <div className="mt-2 flex justify-between items-center">
+            {/* USD Amount */}
+            {amountUsdDisplay && originToken?.symbol && (
+              <div className="text-xs trails-text-muted">
+                ≈ {amountUsdDisplay}
+              </div>
+            )}
+
+            {/* Origin Token Balance */}
+            {originToken && (
+              <button
+                type="button"
+                className="text-xs trails-text-muted cursor-pointer hover:trails-hover-text transition-colors bg-transparent border-none p-0"
+                onClick={() => {
+                  if (balanceFormatted) {
+                    const balance = parseFloat(balanceFormatted)
+                    if (!Number.isNaN(balance)) {
+                      setAmount(balance.toFixed(6))
+                    }
+                  }
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
+                    if (balanceFormatted) {
+                      const balance = parseFloat(balanceFormatted)
+                      if (!Number.isNaN(balance)) {
+                        setAmount(balance.toFixed(6))
+                      }
+                    }
+                  }
+                }}
+                title="Click to use full balance"
+              >
+                Balance: {balanceFormatted || "0.00"} {originToken.symbol}
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Flip Button - Absolutely Positioned */}
+        <div className="relative">
+          <button
+            type="button"
+            onClick={handleFlip}
+            className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-1.5 trails-border-radius-button trails-bg-tertiary hover:trails-hover-bg transition-colors cursor-pointer"
+          >
+            <ArrowUpDown className="w-4 h-4 trails-text-secondary" />
+          </button>
+        </div>
+
+        {/* Output Section - Amount + Token Selection */}
+        <div className="trails-bg-secondary trails-border-radius-container p-3">
+          {/* Buy Label */}
+          <div className="text-sm font-medium trails-text-secondary mb-2">
+            Buy
+          </div>
+
+          <div className="flex items-center space-x-2">
+            {/* Output Amount */}
+            <div className="flex-1">
+              <div className="flex items-center space-x-2">
+                <div
+                  className={`text-xl font-medium ${!amount ? "text-gray-400 dark:text-gray-500" : "trails-text-primary"} ${isLoadingQuote ? "animate-pulse" : ""}`}
+                >
+                  {toAmountDisplay || "0.00"}
+                </div>
+                {isLoadingQuote && (
+                  <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+                )}
+              </div>
+            </div>
+
+            {/* Destination Token Selection */}
+            <div className="relative" ref={tokenDropdownRef}>
+              <button
+                type="button"
+                onClick={() => setIsTokenDropdownOpen(!isTokenDropdownOpen)}
+                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={(selectedDestToken as any)?.chainId}
+                      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>
+
+              {/* Token Selector Modal */}
+              {isTokenDropdownOpen && (
+                <div className="absolute right-0 top-full mt-2 w-80 trails-bg-card rounded-lg shadow-lg border trails-border-primary max-h-80 overflow-hidden z-10">
+                  <div className="p-2">
+                    <TokenSelector
+                      onTokenSelect={(token: any) => {
+                        setSelectedDestToken({
+                          ...token,
+                          decimals:
+                            token.contractInfo?.decimals || token.decimals,
+                          contractInfo: {
+                            decimals:
+                              token.contractInfo?.decimals || token.decimals,
+                          },
+                        } as any)
+                        setIsTokenDropdownOpen(false)
+                      }}
+                      onError={onError}
+                      mode="swap"
+                      fundMethod={fundMethod}
+                      allSupportedTokens={true}
+                      showContinueButton={false}
+                      compactMode={false}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Bottom Info Row */}
+          <div className="mt-2 flex justify-between items-center">
+            {/* Destination Amount USD from Quote */}
+            {prepareSendQuote?.destinationAmountUsdDisplay && (
+              <div className="text-xs trails-text-muted">
+                ≈ {prepareSendQuote.destinationAmountUsdDisplay}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Receive Section - Show what user will receive */}
+        {(toAmount || toChainId || toToken) && selectedDestinationChain && (
+          <div className="space-y-1">
+            <div className="text-lg font-semibold text-left trails-text-primary">
+              You Will Receive
+            </div>
+
+            <div className="p-2">
+              <div className="flex items-center space-x-3">
+                <TokenImage
+                  symbol={selectedDestToken?.symbol}
+                  imageUrl={selectedDestToken?.imageUrl}
+                  chainId={selectedDestinationChain.id}
+                  size={32}
+                />
+                <div>
+                  <div className="flex items-center space-x-2">
+                    <div
+                      className={`text-lg font-semibold trails-text-primary ${isLoadingQuote ? "animate-pulse" : ""}`}
+                    >
+                      {toAmountDisplay} {selectedDestToken?.symbol}
+                    </div>
+                    {isLoadingQuote && (
+                      <div className="animate-spin trails-border-radius-button h-4 w-4 border-solid border-b-2 trails-primary" />
+                    )}
+                  </div>
+                  <div
+                    className={`text-xs trails-text-muted ${isLoadingQuote ? "animate-pulse" : ""}`}
+                  >
+                    ≈ {amountUsdDisplay}{" "}
+                    {selectedDestinationChain
+                      ? `on ${selectedDestinationChain.name}`
+                      : ""}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Fee Options */}
+        <FeeOptions
+          options={FEE_TOKENS}
+          selectedOption={selectedFeeToken ?? undefined}
+          onSelect={setSelectedFeeToken}
+        />
+
+        {/* Warning Messages - Show only one at a time */}
+        {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}
+
+        <button
+          type="submit"
+          disabled={
+            !amount ||
+            isSubmitting ||
+            !destinationTokenAddress ||
+            !isValidCustomToken ||
+            isLoadingQuote ||
+            !prepareSendQuote ||
+            prepareSendQuote?.noSufficientBalance
+          }
+          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 trails-text-muted" />
+              <span>{buttonText}</span>
+            </div>
+          ) : prepareSendQuote?.noSufficientBalance ? (
+            "Insufficient Balance"
+          ) : (
+            buttonText
+          )}
+        </button>
+
+        {/* Quote Details */}
+        {prepareSendQuote && (
+          <div className="space-y-2">
+            <QuoteDetails quote={prepareSendQuote} showContent={true} />
+          </div>
+        )}
+      </form>
+    </div>
+  )
+}
+
+export default Swap