0xtrails 0.2.4 → 0.2.5

package/src/widget/components/ClassicSwap.tsx

@@ -1,13 +1,13 @@
-import { ChevronDown, Loader2, ArrowDown } from "lucide-react"
+import { Loader2, ArrowDown } from "lucide-react"
 import type React from "react"
 import { useCallback, useEffect, useRef, useState, useMemo } from "react"
 import type { Account, WalletClient } from "viem"
+import { zeroAddress } 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 { TokenImage } from "./TokenImage.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { type PrepareSendQuote, TradeType } from "../../prepareSend.js"
 import { getChainInfo } from "../../chains.js"
@@ -16,12 +16,18 @@ import { TokenSelector } from "./TokenSelector.js"
 import { ErrorDisplay } from "./ErrorDisplay.js"
 import { useMode } from "../hooks/useMode.js"
 import { logger } from "../../logger.js"
-import { SwapSettings } from "./SwapSettings.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import { useDefaultTokenSelection } from "../hooks/useDefaultTokenSelection.js"
 import { ChainList } from "./ChainList.js"
+import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
+import { TokenSelectorButton } from "./TokenSelectorButton.js"
+import { FundingMethodSelectorButton } from "./FundingMethodSelectorButton.js"
+import { RecipientSelectorButton } from "./RecipientSelectorButton.js"
+import { RefundWarning } from "./RefundWarning.js"
+import { Identicon } from "./Identicon.js"
+import { truncateAddress } from "../../utils.js"
 
 interface ClassicSwapProps {
   selectedToken: Token | null
@@ -58,6 +64,8 @@ interface ClassicSwapProps {
   recentTokens?: SupportedToken[]
   onRecentTokenSelect?: (token: SupportedToken) => void
   onTrackToken?: (token: any) => void
+  title?: string
+  isSequenceWallet?: boolean
 }
 
 export const ClassicSwap: React.FC<ClassicSwapProps> = ({
@@ -67,6 +75,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   onConfirm,
   onComplete,
   account,
+  toRecipient,
   toAmount,
   toChainId,
   toToken,
@@ -85,6 +94,8 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   checkoutOnHandlers,
   recentTokens,
   onTrackToken,
+  title = "Swap",
+  isSequenceWallet = false,
 }) => {
   const { mode } = useMode()
   const { isBalanceVisible } = useBalanceVisible()
@@ -135,7 +146,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   } = useSendForm({
     account,
     toAmount: tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmount,
-    toRecipient: account.address,
+    toRecipient: toRecipient || account.address,
     toChainId,
     toToken,
     toCalldata,
@@ -230,24 +241,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }, [prepareSendQuote, tradeType])
 
-  // 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
-      setTradeType(TradeType.EXACT_INPUT)
-      setSellAmount(amount.toFixed(6))
-      setBuyAmount("")
-      setLastInputType("sell")
-    },
-    [originToken, balanceFormatted],
-  )
-
   // Call onAmountUpdate when amountRaw changes
   useEffect(() => {
     if (onAmountUpdate) {
@@ -369,7 +362,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }
 
-  // Dynamic font size based on input length - matching SimpleSwap.tsx
+  // Dynamic font size based on input length
   const sellInputStyles = useMemo(() => {
     const inputLength = sellAmount.length
     let fontSize: string
@@ -429,13 +422,25 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
           name: token.name,
         },
       }
+
+      // Only reset input fields if the token symbol is different
+      const isDifferentToken =
+        !originToken || originToken.symbol !== token.symbol
+      if (isDifferentToken) {
+        setSellAmount("")
+        setBuyAmount("")
+        setTradeType(TradeType.EXACT_INPUT)
+        setLastInputType("sell")
+      }
+
       setOriginToken(formattedToken as any)
       setOriginChainId(token.chainId)
       setShowSourceTokenSelector(false)
+
       onTrackToken?.(token)
       logger.console.log("[trails-sdk] selected origin token", token)
     },
-    [setOriginToken, onTrackToken],
+    [setOriginToken, onTrackToken, originToken],
   )
 
   // Handle destination token selection from full-screen selector
@@ -573,54 +578,20 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     <div className="space-y-2">
       <ScreenHeader
         onBack={onBack}
-        headerContent="Swap"
+        headerContent={title}
         headerContentAlign="left"
         showAccountActions={true}
-        rightSideContent={<SwapSettings />}
       />
 
       <form onSubmit={handleSubmit} className="space-y-1">
         {/* Input Section - Amount + Token Selection */}
         <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 min-h-[120px] flex flex-col">
-          {/* Sell Label and Percentage Buttons */}
+          {/* Sell Label */}
           <div className="flex justify-between items-center mb-2">
             <div className="text-sm font-medium trails-text-secondary text-left">
-              Sell
+              {mode === "fund" ? "Payment method" : "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>
-            )}
+            <FundingMethodSelectorButton />
           </div>
 
           <div className="flex items-center space-x-2 flex-1">
@@ -652,37 +623,11 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
 
             {/* Token Selection Button */}
             <div className="relative">
-              <button
-                type="button"
-                onClick={() => setShowSourceTokenSelector(true)}
-                className={`flex items-center space-x-2 trails-border-radius-input px-2.5 py-1.5 border transition-colors cursor-pointer ${
-                  originToken
-                    ? "trails-bg-card hover:trails-hover-bg trails-border-primary"
-                    : "bg-blue-500 hover:bg-blue-600 border-blue-500 text-white"
-                }`}
-              >
-                {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 text-sm text-white">
-                      Select Token
-                    </span>
-                    <ChevronDown className="w-3.5 h-3.5 text-white" />
-                  </>
-                )}
-              </button>
+              <TokenSelectorButton
+                token={originToken}
+                chainId={originChainId}
+                onSelect={() => setShowSourceTokenSelector(true)}
+              />
             </div>
           </div>
 
@@ -700,25 +645,13 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
               </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)) {
-                      setTradeType(TradeType.EXACT_INPUT)
-                      setSellAmount(balance.toFixed(6))
-                      setBuyAmount("")
-                      setLastInputType("sell")
-                    }
-                  }
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault()
+            {/* Origin Token Balance and Percentage Buttons */}
+            {originToken && balanceFormatted && (
+              <div className="flex items-center space-x-2">
+                <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)) {
@@ -728,15 +661,42 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                         setLastInputType("sell")
                       }
                     }
-                  }
-                }}
-                title="Click to use full balance"
-              >
-                Balance:{" "}
-                {isBalanceVisible
-                  ? `${balanceFormatted || "0.00"} ${originToken.symbol}`
-                  : "••••••"}
-              </button>
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      if (balanceFormatted) {
+                        const balance = parseFloat(balanceFormatted)
+                        if (!Number.isNaN(balance)) {
+                          setTradeType(TradeType.EXACT_INPUT)
+                          setSellAmount(balance.toFixed(6))
+                          setBuyAmount("")
+                          setLastInputType("sell")
+                        }
+                      }
+                    }
+                  }}
+                  title="Click to use full balance"
+                >
+                  Balance:{" "}
+                  {isBalanceVisible ? balanceFormatted || "0.00" : "••••••"}
+                </button>
+
+                {/* Percentage Buttons */}
+                <PercentageMaxButtons
+                  userBalance={balanceFormatted}
+                  isNativeToken={originToken.contractAddress === zeroAddress}
+                  gasCostFormatted={prepareSendQuote?.gasCostFormatted}
+                  chainId={originChainId || undefined}
+                  onAmountSelect={(amount) => {
+                    setTradeType(TradeType.EXACT_INPUT)
+                    setSellAmount(amount)
+                    setBuyAmount("")
+                    setLastInputType("sell")
+                  }}
+                  className="opacity-100"
+                />
+              </div>
             )}
           </div>
         </div>
@@ -758,8 +718,20 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
         {/* Output Section - Amount + Token Selection */}
         <div className="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary min-h-[120px] flex flex-col">
           {/* Buy Label */}
-          <div className="text-sm font-medium trails-text-secondary mb-2 text-left">
-            Buy
+          <div className="flex justify-between items-center mb-2">
+            <div className="text-sm font-medium trails-text-secondary text-left">
+              {mode === "fund" ? "Recipient" : "Buy"}
+            </div>
+            {toRecipient ? (
+              <div className="flex items-center space-x-2 text-black dark:text-white">
+                <Identicon value={toRecipient} size={16} />
+                <span className="text-sm font-medium">
+                  {truncateAddress(toRecipient, 4, 2)}
+                </span>
+              </div>
+            ) : (
+              <RecipientSelectorButton />
+            )}
           </div>
 
           <div className="flex items-center space-x-2 flex-1">
@@ -783,7 +755,8 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   } ${isLoadingQuote && tradeType === TradeType.EXACT_INPUT ? "animate-pulse" : ""}`}
                   style={buyInputStyles}
                   readOnly={
-                    tradeType === TradeType.EXACT_INPUT && isLoadingQuote
+                    (tradeType === TradeType.EXACT_INPUT && isLoadingQuote) ||
+                    !!toAmount
                   }
                 />
                 {isLoadingQuote && tradeType === TradeType.EXACT_INPUT && (
@@ -794,37 +767,12 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
 
             {/* Destination Token Selection */}
             <div className="relative">
-              <button
-                type="button"
-                onClick={() => setShowDestinationTokenSelector(true)}
-                className={`flex items-center space-x-2 trails-border-radius-input px-2.5 py-1.5 border transition-colors cursor-pointer ${
-                  selectedDestToken
-                    ? "trails-bg-card hover:trails-hover-bg trails-border-primary"
-                    : "bg-blue-500 hover:bg-blue-600 border-blue-500 text-white"
-                }`}
-              >
-                {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 text-sm text-white">
-                      Select Token
-                    </span>
-                    <ChevronDown className="w-3.5 h-3.5 text-white" />
-                  </>
-                )}
-              </button>
+              <TokenSelectorButton
+                token={selectedDestToken}
+                chainId={(selectedDestToken as any)?.chainId}
+                onSelect={() => setShowDestinationTokenSelector(true)}
+                unselectable={!!toToken}
+              />
             </div>
           </div>
 
@@ -850,6 +798,14 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
           severity="warning"
         />
 
+        {/* Exchange/Contract Warning */}
+        <RefundWarning
+          fundMethod={fundMethod}
+          isSenderContractOnOrigin={false}
+          isSenderContractOnDestination={false}
+          isSequenceWallet={isSequenceWallet}
+        />
+
         {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">

package/src/widget/components/ConnectWallet.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import { ChevronRight, LogOut } from "lucide-react"
 import {
   useAccount,
@@ -105,13 +105,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   const connectedWallets = getConnectedWallets()
 
   // Get available browser wallets using EIP-6963 and injected providers
-  const getAvailableBrowserWallets = (): Array<{
-    connector: any
-    walletId: string
-    walletConfig: any
-    name: string
-    icon?: string
-  }> => {
+  const allAvailableBrowserWallets = useMemo(() => {
     const filteredConnectors = connectors
       .filter((connector) => {
         // EIP-6963 compliant wallets will have type "injected" and be ready when installed
@@ -130,27 +124,6 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
           (conn) => conn.connector.id === connector.id,
         )
 
-        // Log for debugging EIP-6963 detection
-        if (isInjected && isNotWalletConnect) {
-          logger.console.log(
-            "[trails-sdk] Detected browser wallet via EIP-6963:",
-            {
-              id: connector.id,
-              name: connector.name,
-              type: connector.type,
-              uid: connector.uid,
-              hasIcon: !!connector.icon,
-            },
-          )
-        }
-
-        // Log all connectors for debugging
-        logger.console.log("[trails-sdk] All connector:", {
-          id: connector.id,
-          name: connector.name,
-          type: connector.type,
-        })
-
         return (
           isInjected &&
           isNotWalletConnect &&
@@ -181,9 +154,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
       seenWalletIds.add(wallet.walletId)
       return true
     })
-  }
-
-  const allAvailableBrowserWallets = getAvailableBrowserWallets()
+  }, [connectors, allWallets, connections])
 
   // Handle switching to a different connected wallet
   const handleWalletSwitch = async (
@@ -259,11 +230,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
 
   return (
     <div className="space-y-6">
-      <ScreenHeader
-        headerContent="Connect Wallet"
-        headerContentAlign="left"
-        showAccountActions={true}
-      />
+      <ScreenHeader headerContent="Connect Wallet" headerContentAlign="left" />
 
       {isConnected ? (
         <div className="space-y-4">