0xtrails 0.2.4 → 0.2.6

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 { useCallback, useEffect, useRef, useState } 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,19 @@ 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"
+import { useDynamicInputStyles } from "./DynamicInputStyles.js"
 
 interface ClassicSwapProps {
   selectedToken: Token | null
@@ -29,13 +36,13 @@ interface ClassicSwapProps {
   onBack?: () => void
   onConfirm: () => void
   onComplete: (result: OnCompleteProps) => void
-  account: Account
+  account?: Account
   toRecipient?: string
   toAmount?: string
   toChainId?: number
   toToken?: string
   toCalldata?: string
-  walletClient: WalletClient
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
@@ -58,6 +65,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 +76,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   onConfirm,
   onComplete,
   account,
+  toRecipient,
   toAmount,
   toChainId,
   toToken,
@@ -85,6 +95,8 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   checkoutOnHandlers,
   recentTokens,
   onTrackToken,
+  title = "Swap",
+  isSequenceWallet = false,
 }) => {
   const { mode } = useMode()
   const { isBalanceVisible } = useBalanceVisible()
@@ -135,7 +147,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 +242,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,52 +363,13 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }
 
-  // Dynamic font size based on input length - matching SimpleSwap.tsx
-  const sellInputStyles = useMemo(() => {
-    const inputLength = sellAmount.length
-    let fontSize: string
-
-    if (inputLength > 12) {
-      fontSize = "1rem"
-    } else if (inputLength > 9) {
-      fontSize = "1.25rem"
-    } else if (inputLength > 6) {
-      fontSize = "1.5rem"
-    } else if (inputLength > 3) {
-      fontSize = "1.75rem"
-    } else {
-      fontSize = "2rem"
-    }
-
-    return {
-      fontSize,
-      transition: "all 0.1s ease-in-out",
-    }
-  }, [sellAmount.length])
-
-  const buyInputStyles = useMemo(() => {
-    const inputValue =
-      tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmountDisplay || ""
-    const inputLength = inputValue.length
-    let fontSize: string
-
-    if (inputLength > 12) {
-      fontSize = "1rem"
-    } else if (inputLength > 9) {
-      fontSize = "1.25rem"
-    } else if (inputLength > 6) {
-      fontSize = "1.5rem"
-    } else if (inputLength > 3) {
-      fontSize = "1.75rem"
-    } else {
-      fontSize = "2rem"
-    }
+  // Dynamic font size based on input length
+  const sellInputStyles = useDynamicInputStyles({ inputValue: sellAmount })
 
-    return {
-      fontSize,
-      transition: "all 0.1s ease-in-out",
-    }
-  }, [tradeType, buyAmount, toAmountDisplay])
+  const buyInputStyles = useDynamicInputStyles({
+    inputValue:
+      tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmountDisplay || "",
+  })
 
   // Handle source token selection from full-screen selector
   const handleSourceTokenSelectorSelect = useCallback(
@@ -429,13 +384,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 +540,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 */}
-          <div className="flex justify-between items-center mb-2">
-            <div className="text-sm font-medium trails-text-secondary text-left">
-              Sell
+        <div className="pt-4 pb-4 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 */}
+          <div className="mb-4 flex justify-between items-center">
+            <div className="text-sm font-medium trails-text-secondary text-left m-0">
+              {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">
@@ -633,7 +566,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   type="text"
                   value={sellAmount}
                   onChange={(e) => handleSellAmountChange(e.target.value)}
-                  placeholder={`0 ${originToken?.symbol || ""}`}
+                  placeholder={"0"}
                   className={`w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${
                     isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT
                       ? "animate-pulse"
@@ -652,45 +585,19 @@ 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>
 
           {/* Bottom Info Row for sell */}
-          <div className="mt-2 flex justify-between items-center">
+          <div className="mt-4 flex justify-between items-center">
             {/* USD Amount */}
             {originToken?.symbol && (
-              <div className="text-xs trails-text-muted">
+              <div className="text-xs text-gray-500 dark:text-gray-400">
                 ≈{" "}
                 {tradeType === TradeType.EXACT_INPUT
                   ? amountUsdDisplay || "$0.00"
@@ -700,25 +607,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 text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors bg-transparent border-none p-0"
+                  onClick={() => {
                     if (balanceFormatted) {
                       const balance = parseFloat(balanceFormatted)
                       if (!Number.isNaN(balance)) {
@@ -728,15 +623,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>
@@ -756,10 +678,22 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
         </div>
 
         {/* 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">
+        <div className="pt-4 pb-4 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 mb-4">
           {/* Buy Label */}
-          <div className="text-sm font-medium trails-text-secondary mb-2 text-left">
-            Buy
+          <div className="mb-4 flex justify-between items-center mb-2">
+            <div className="text-sm font-medium trails-text-secondary text-left m-0">
+              {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">
@@ -775,7 +709,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   }
                   onChange={(e) => handleBuyAmountChange(e.target.value)}
                   onFocus={handleBuyInputFocus}
-                  placeholder={`0 ${selectedDestToken?.symbol || ""}`}
+                  placeholder={"0"}
                   className={`w-full bg-transparent font-bold placeholder:trails-text-muted border-none outline-none ${
                     !amount
                       ? "text-gray-400 dark:text-gray-500"
@@ -783,7 +717,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,46 +729,21 @@ 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>
 
           {/* Bottom Info Row */}
-          <div className="mt-2 flex justify-between items-center">
+          <div className="mt-4 flex justify-between items-center">
             {/* Destination Amount USD from Quote */}
             {(prepareSendQuote?.destinationAmountUsdDisplay ||
               (isLoadingQuote && tradeType === TradeType.EXACT_INPUT)) && (
-              <div className="text-xs trails-text-muted">
+              <div className="text-xs text-gray-500 dark:text-gray-400">
                 ≈{" "}
                 {isLoadingQuote && tradeType === TradeType.EXACT_INPUT
                   ? "$0.00"
@@ -850,6 +760,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">
@@ -877,7 +795,7 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
 
         {/* Quote Details */}
         {prepareSendQuote && (
-          <div className="space-y-2">
+          <div className="mb-4">
             <QuoteDetails
               quote={prepareSendQuote}
               showContent={true}

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,
@@ -36,7 +36,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   lastClickedWallet,
   showDisconnect = true,
 }) => {
-  const { isConnected, address, connector } = useAccount()
+  const { address, connector } = useAccount()
   const connections = useConnections()
   const { switchAccount } = useSwitchAccount()
   const { setCurrentScreen } = useCurrentScreen()
@@ -45,6 +45,9 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   const connectors = useConnectors()
   const [error, setError] = useState<string | null>(null)
 
+  // Check if there are any connected accounts across all connectors
+  const isConnected = connections.length > 0
+
   useEffect(() => {
     if (error) {
       if (onError) {
@@ -105,13 +108,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 +127,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 +157,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 +233,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">