0xtrails 0.2.4 → 0.2.6

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,70 @@
+import { ChevronRight, QrCode, Send } from "lucide-react"
+import type React from "react"
+import { truncateAddress } from "../../utils.js"
+import { useAccount, useConnections } 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 connections = useConnections()
+  const { address } = useAccount()
+  const { setCurrentScreenWithBack } = useBack()
+  const { selectedFundMethod } = useSelectedFundMethod()
+
+  // Check if there are any connected accounts across all connectors
+  const isConnected = connections.length > 0
+  // Use the active account from useAccount(), fallback to first connection if needed
+  const activeAddress = address || connections[0]?.accounts[0]
+
+  const handleClick = () => {
+    if (isConnected && activeAddress) {
+      // 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 && activeAddress
+          ? "Select funding method"
+          : "Connect wallet"
+      }
+    >
+      {isConnected && activeAddress ? (
+        selectedFundMethod === "qr-code" ? (
+          <>
+            <QrCode className="w-4 h-4 mr-1" />
+            <span className="text-sm font-medium m-0">QR Code</span>
+          </>
+        ) : selectedFundMethod === "exchange" ? (
+          <>
+            <Send className="w-4 h-4 mr-1" />
+            <span className="text-sm font-medium m-0">Exchange</span>
+          </>
+        ) : (
+          <>
+            <div className="flex items-center mr-1">
+              <Identicon value={activeAddress} size={16} />
+            </div>
+            <span className="text-sm font-medium m-0">
+              {truncateAddress(activeAddress, 4, 4)}
+            </span>
+          </>
+        )
+      ) : (
+        <span className="text-sm font-medium mr-1">Connect Wallet</span>
+      )}
+      <ChevronRight className="w-4 h-4 m-0" />
+    </button>
+  )
+}
+
+export default FundingMethodSelectorButton