0xtrails 0.2.4 → 0.2.5

package/src/widget/components/Fund.tsx

@@ -1,13 +1,8 @@
-import {
-  ChevronRight,
-  Search,
-  Loader2,
-  ChevronDown,
-  ArrowDown,
-} from "lucide-react"
+import { ChevronRight, Search, Loader2, ArrowDown } from "lucide-react"
 import { useEffect, useState, useMemo, useRef, useCallback } from "react"
 import type React from "react"
 import type { Account, WalletClient } from "viem"
+import { zeroAddress } from "viem"
 import type { TransactionState } from "../../transactions.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
@@ -35,6 +30,8 @@ import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { SupportedToken } from "../../tokens.js"
 import { logger } from "../../logger.js"
 import { RefundWarning } from "./RefundWarning.js"
+import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
+import { TokenSelectorButton } from "./TokenSelectorButton.js"
 
 interface FundProps {
   onBack?: () => void
@@ -637,7 +634,6 @@ export const Fund: React.FC<FundProps> = ({
           onBack={() => setShowOriginTokenSelector(false)}
           headerContent="Select From Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleOriginTokenSelect}
@@ -684,7 +680,6 @@ export const Fund: React.FC<FundProps> = ({
           onBack={() => setShowDestinationTokenSelector(false)}
           headerContent="Select To Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleDestinationTokenSelect}
@@ -728,7 +723,6 @@ export const Fund: React.FC<FundProps> = ({
           onBack={onBack}
           headerContent="Fund"
           headerContentAlign="left"
-          showAccountActions={true}
         />
 
         <div className="space-y-2">
@@ -770,7 +764,7 @@ export const Fund: React.FC<FundProps> = ({
       <div className="space-y-1">
         {/* Origin Amount Input Section */}
         <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 focus-within:border-gray-400 dark:focus-within:border-gray-500">
-          {/* Deposit Label and Percentage Buttons */}
+          {/* Deposit Label */}
           <div className="flex justify-between items-center mb-2">
             <div className="text-sm font-medium trails-text-secondary text-left">
               Deposit
@@ -782,40 +776,6 @@ export const Fund: React.FC<FundProps> = ({
                 ""
               )}
             </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">
@@ -869,33 +829,11 @@ export const Fund: React.FC<FundProps> = ({
             </div>
 
             {/* 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>
+            <TokenSelectorButton
+              token={originToken}
+              chainId={originToken?.chainId}
+              onSelect={() => setShowOriginTokenSelector(true)}
+            />
           </div>
 
           {/* Bottom Info Row */}
@@ -909,9 +847,9 @@ export const Fund: React.FC<FundProps> = ({
               )}
             </div>
 
-            {/* Origin Token Balance */}
-            <div className="text-xs trails-text-muted text-right">
-              {originToken ? (
+            {/* 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"
@@ -925,14 +863,25 @@ export const Fund: React.FC<FundProps> = ({
                   title="Click to use full balance"
                 >
                   Balance:{" "}
-                  {isBalanceVisible
-                    ? `${balanceFormatted || "0.00"} ${originToken.symbol}`
-                    : "••••••"}
+                  {isBalanceVisible ? balanceFormatted || "0.00" : "••••••"}
                 </button>
-              ) : (
-                <span>&nbsp;</span>
-              )}
-            </div>
+
+                {/* Percentage Buttons */}
+                <PercentageMaxButtons
+                  userBalance={balanceFormatted}
+                  isNativeToken={originToken.contractAddress === zeroAddress}
+                  gasCostFormatted={prepareSendQuote?.gasCostFormatted}
+                  chainId={originToken.chainId}
+                  onAmountSelect={(amount) => {
+                    setTokenAmountForBackend(amount)
+                    setSendFormAmount(amount)
+                    setGlobalAmount(amount)
+                    setInputDisplayValue(amount)
+                  }}
+                  className="opacity-100"
+                />
+              </div>
+            )}
           </div>
         </div>
 

package/src/widget/components/FundMethods.tsx

@@ -1,11 +1,12 @@
 import type React from "react"
-import { Wallet, QrCode, Building2 } from "lucide-react"
-import { useAccount } from "wagmi"
-import { truncateAddress } from "../../utils.js"
-import { useTheme } from "../components/ThemeProvider.js"
-import WalletConnectLogoWhite from "../assets/WalletConnect-logo-white.svg"
-import WalletConnectLogoBlack from "../assets/WalletConnect-logo-black.svg"
+import { QrCode, Send, ChevronRight } from "lucide-react"
+import { useSwitchAccount } from "wagmi"
 import { ScreenHeader } from "./ScreenHeader.js"
+import { ConnectedWallets } from "./ConnectedWallets.js"
+import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import { useConnections } from "wagmi"
+import { logger } from "../../logger.js"
+import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 
 export interface FundMethodsProps {
   onBack?: () => void
@@ -17,178 +18,100 @@ export interface FundMethodsProps {
 
 const FundMethods: React.FC<FundMethodsProps> = ({
   onBack,
-  onSelectWalletConnect,
   onSelectExchangeList,
-  onSelectConnectedAccount,
   onSelectQrCode,
 }) => {
-  const { address, isConnected, connector } = useAccount()
-  const { getActiveTheme } = useTheme()
+  const { switchAccount } = useSwitchAccount()
+  const connections = useConnections()
+  const { setCurrentScreen } = useCurrentScreen()
+  const { setSelectedFundMethod } = useSelectedFundMethod()
 
-  const activeTheme = getActiveTheme()
+  // Handle wallet selection - switch to the selected wallet and go to home
+  const handleWalletSelect = async (
+    walletAddress: string,
+    walletConnector: unknown,
+  ) => {
+    try {
+      // Find the connection for this wallet
+      const connection = connections.find(
+        (conn) =>
+          conn.accounts.includes(walletAddress as `0x${string}`) &&
+          conn.connector.id === (walletConnector as { id: string }).id,
+      )
+
+      if (connection) {
+        await switchAccount({
+          connector: connection.connector,
+        })
+        logger.console.log(`[trails-sdk] Switched to wallet: ${walletAddress}`)
+
+        // Set funding method to "wallet" since user selected a wallet
+        setSelectedFundMethod("wallet")
+
+        // Navigate to home screen which will redirect to the appropriate mode screen
+        setCurrentScreen("home")
+      }
+    } catch (error) {
+      logger.console.error("[trails-sdk] Failed to switch wallet:", error)
+    }
+  }
 
   return (
     <div className="flex flex-col h-full">
       <ScreenHeader
         onBack={onBack}
-        headerContent="Funding Method"
+        headerContent="Payment methods"
         headerContentAlign="left"
         rightSideContent={<div className="w-9" />}
-        showAccountActions={true}
       />
 
       <div className="flex-1">
-        <div className="space-y-3">
-          <button
-            type="button"
-            onClick={onSelectConnectedAccount}
-            className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
-          >
-            <div className="flex items-center space-x-3 flex-1">
-              <Wallet className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-              <div className="flex-1 text-left">
-                <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                  Connected Account
-                </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Use your connected wallet to fund directly.
-                </p>
-                <p className="text-xs font-mono text-gray-600 dark:text-gray-300">
-                  {isConnected && address
-                    ? `${connector?.name || "Connected"}: ${truncateAddress(address)}`
-                    : "No wallet connected"}
-                </p>
-              </div>
-            </div>
-            <div className="text-gray-400">
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-label="Chevron right"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </div>
-          </button>
+        <div className="space-y-4">
+          {/* Connected Wallets Section */}
+          <ConnectedWallets
+            showConnectNewWallet={true}
+            onWalletSelect={handleWalletSelect}
+            backScreen="fund-methods"
+          />
 
-          <button
-            type="button"
-            onClick={onSelectWalletConnect}
-            className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
-          >
-            <div className="flex items-center space-x-3 flex-1">
-              <div className="h-6 w-6 rounded flex items-center justify-center">
-                <img
-                  src={
-                    activeTheme === "dark"
-                      ? WalletConnectLogoWhite
-                      : WalletConnectLogoBlack
-                  }
-                  alt="WalletConnect"
-                  className="h-4 w-4"
-                />
-              </div>
-              <div className="flex-1 text-left">
-                <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                  WalletConnect
-                </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Connect another wallet.
-                </p>
-              </div>
-            </div>
-            <div className="text-gray-400">
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-label="Chevron right"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </div>
-          </button>
+          {/* Divider */}
+          <div className="relative flex items-center justify-center">
+            <div className="flex-1 border-t border-gray-200 dark:border-gray-700"></div>
+            <span className="px-4 text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900">
+              or
+            </span>
+            <div className="flex-1 border-t border-gray-200 dark:border-gray-700"></div>
+          </div>
 
-          <button
-            type="button"
-            onClick={onSelectQrCode}
-            className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
-          >
-            <div className="flex items-center space-x-3 flex-1">
-              <QrCode className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-              <div className="flex-1 text-left">
-                <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                  Pay with QR Code
-                </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Scan a QR code to deposit funds.
-                </p>
+          {/* Additional Funding Options */}
+          <div className="trails-border-radius-container border trails-border-primary">
+            <button
+              type="button"
+              onClick={onSelectQrCode}
+              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
+            >
+              <div className="flex items-center gap-3">
+                <QrCode className="w-4 h-4" />
+                <span className="text-sm font-bold">Pay with QR Code</span>
               </div>
-            </div>
-            <div className="text-gray-400">
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-label="Chevron right"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </div>
-          </button>
+              <ChevronRight className="w-5 h-5 text-gray-400" />
+            </button>
+
+            {/* Divider between buttons */}
+            <div className="border-b border-gray-200 dark:border-gray-700"></div>
 
-          <button
-            type="button"
-            onClick={onSelectExchangeList}
-            className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
-          >
-            <div className="flex items-center space-x-3 flex-1">
-              <Building2 className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-              <div className="flex-1 text-left">
-                <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                  Send from Exchange
-                </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Transfer from Coinbase, Binance, etc.
-                </p>
+            <button
+              type="button"
+              onClick={onSelectExchangeList}
+              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
+            >
+              <div className="flex items-center gap-3">
+                <Send className="w-4 h-4" />
+                <span className="text-sm font-bold">Send from Exchange</span>
               </div>
-            </div>
-            <div className="text-gray-400">
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-label="Chevron right"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </div>
-          </button>
+              <ChevronRight className="w-5 h-5 text-gray-400" />
+            </button>
+          </div>
         </div>
       </div>
     </div>

package/src/widget/components/FundSwap.tsx

@@ -0,0 +1,52 @@
+import type React 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 type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
+import type { PrepareSendQuote } from "../../prepareSend.js"
+import { ClassicSwap } from "./ClassicSwap.js"
+
+interface FundProps {
+  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
+  checkoutOnHandlers?: CheckoutOnHandlers
+  recentTokens?: SupportedToken[]
+  onRecentTokenSelect?: (token: SupportedToken) => void
+  onTrackToken?: (token: any) => void
+  isSequenceWallet?: boolean
+}
+
+export const Fund: React.FC<FundProps> = (props) => {
+  return <ClassicSwap {...props} title="Fund" />
+}
+
+export default Fund

package/src/widget/components/FundingMethodSelectorButton.tsx

@@ -0,0 +1,60 @@
+import { ChevronRight, QrCode, Send } from "lucide-react"
+import type React from "react"
+import { truncateAddress } from "../../utils.js"
+import { useAccount } from "wagmi"
+import { Identicon } from "./Identicon.js"
+import { useBack } from "../hooks/useBack.js"
+import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
+
+export const FundingMethodSelectorButton: React.FC = () => {
+  const { address, isConnected } = useAccount()
+  const { setCurrentScreenWithBack } = useBack()
+  const { selectedFundMethod } = useSelectedFundMethod()
+
+  const handleClick = () => {
+    if (isConnected && address) {
+      // If wallet is connected, go to fund methods
+      setCurrentScreenWithBack("fund-methods")
+    } else {
+      // If no wallet connected, go to connect wallet
+      setCurrentScreenWithBack("connect")
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className="flex items-center space-x-2 text-blue-500 hover:text-blue-600 transition-colors cursor-pointer bg-transparent border-none p-0"
+      title={
+        isConnected && address ? "Select funding method" : "Connect wallet"
+      }
+    >
+      {isConnected && address ? (
+        selectedFundMethod === "qr-code" ? (
+          <>
+            <QrCode className="w-4 h-4" />
+            <span className="text-sm font-medium">QR Code</span>
+          </>
+        ) : selectedFundMethod === "exchange" ? (
+          <>
+            <Send className="w-4 h-4" />
+            <span className="text-sm font-medium">Exchange</span>
+          </>
+        ) : (
+          <>
+            <Identicon value={address} size={16} />
+            <span className="text-sm font-medium">
+              {truncateAddress(address, 4, 2)}
+            </span>
+          </>
+        )
+      ) : (
+        <span className="text-sm font-medium">Connect Wallet</span>
+      )}
+      <ChevronRight className="w-4 h-4" />
+    </button>
+  )
+}
+
+export default FundingMethodSelectorButton

package/src/widget/components/Modal.tsx

@@ -73,9 +73,13 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
               <button
                 type="button"
                 onClick={onClose}
-                className="absolute right-2 top-2 p-1 rounded-full transition-colors cursor-pointer z-10 hover:bg-gray-100 text-gray-600 dark:hover:bg-gray-800 dark:text-gray-400 z-20"
+                className="absolute right-4 top-6 flex h-8 w-8 justify-center items-center 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 z-20"
+                title="Close"
               >
-                <X className="h-4 w-4" />
+                <X
+                  className="h-4 w-4"
+                  style={{ transform: "translate(0, -2px)" }}
+                />
               </button>
               {children}
             </motion.div>