0xtrails 0.1.2 → 0.1.3

package/src/widget/components/ConnectWallet.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from "react"
 import { ChevronRight, Copy, LogOut } from "lucide-react"
 import { useAccount, useDisconnect } from "wagmi"
-import MetaMaskFox from "../assets/MetaMask-icon-fox.svg"
-import WalletConnectLogoWhite from "../assets/WalletConnect-logo-white.svg"
 import { AlignJustify, Wallet } from "lucide-react"
 import { ScreenHeader } from "./ScreenHeader.js"
+import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
 
 export interface WalletOption {
   id: string
@@ -18,6 +17,7 @@ export interface ConnectWalletProps {
   onContinue: () => void
   onError: (error: Error) => void
   walletOptions: WalletOption[]
+  lastClickedWallet?: string | null
 }
 
 export const ConnectWallet: React.FC<ConnectWalletProps> = ({
@@ -25,25 +25,12 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   onDisconnect,
   onContinue,
   onError,
-  walletOptions,
+  lastClickedWallet,
 }) => {
   const { isConnected, address, connector } = useAccount()
   const { disconnect } = useDisconnect()
+  const { wallets: allWallets } = useWallets()
   const [error, setError] = useState<string | null>(null)
-  const [lastClickedWallet, setLastClickedWallet] = useState<string | null>(
-    () => {
-      // Initialize from localStorage if available
-      if (typeof window !== "undefined") {
-        try {
-          return localStorage.getItem("trails-last-wallet") || null
-        } catch (error) {
-          console.error("[trails-sdk] Failed to read from localStorage:", error)
-          return null
-        }
-      }
-      return null
-    },
-  )
   const [showCopied, setShowCopied] = useState(false)
 
   useEffect(() => {
@@ -55,15 +42,6 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   }, [error, onError])
 
   const handleWalletConnect = (walletId: string) => {
-    setLastClickedWallet(walletId)
-    // Save to localStorage
-    if (typeof window !== "undefined") {
-      try {
-        localStorage.setItem("trails-last-wallet", walletId)
-      } catch (error) {
-        console.error("[trails-sdk] Failed to save to localStorage:", error)
-      }
-    }
     onConnect(walletId)
   }
 
@@ -92,24 +70,48 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
     }
   }
 
-  // Get the wallet type for styling the continue button
-  const getWalletType = () => {
-    if (!connector?.name) return "injected"
-    const name = connector.name.toLowerCase()
-    if (name.includes("metamask")) return "injected"
-    if (name.includes("walletconnect")) return "walletconnect"
-    return "injected"
+  // Get the wallet config for the current connector
+  const getCurrentWalletConfig = () => {
+    if (!connector?.id) return null
+    const walletId = wagmiConnectorToWalletId(connector)
+    return allWallets.find((wallet) => wallet.id === walletId) || null
   }
 
-  // Reorder wallet options to put the recent one first
+  // Create wallet options from allWallets and always prepend recent wallet
   const orderedWalletOptions = React.useMemo(() => {
-    if (!lastClickedWallet) return walletOptions
+    // Convert allWallets to wallet options format
+    const walletOptionsFromAllWallets = allWallets.map((wallet) => ({
+      id: wallet.id,
+      name: wallet.name,
+      connector: () => wallet.connector?.connect?.(),
+    }))
 
-    const recentWallet = walletOptions.find((w) => w.id === lastClickedWallet)
-    const otherWallets = walletOptions.filter((w) => w.id !== lastClickedWallet)
+    const alwaysShowWallets = ["metamask", "walletconnect"]
+    const filteredWallets = walletOptionsFromAllWallets
+      .filter((wallet) => alwaysShowWallets.includes(wallet.id))
+      .sort((a, b) => {
+        const aIndex = alwaysShowWallets.indexOf(a.id)
+        const bIndex = alwaysShowWallets.indexOf(b.id)
+        return aIndex - bIndex
+      })
+
+    // Always prepend recent wallet if it exists, regardless of allowed list
+    if (lastClickedWallet) {
+      console.log("lastClickedWallet", lastClickedWallet)
+      const recentWallet = walletOptionsFromAllWallets.find(
+        (w) => w.id === lastClickedWallet,
+      )
+      const otherWallets = filteredWallets.filter(
+        (w) => w.id !== lastClickedWallet,
+      )
+
+      if (recentWallet) {
+        return [recentWallet, ...otherWallets]
+      }
+    }
 
-    return recentWallet ? [recentWallet, ...otherWallets] : walletOptions
-  }, [walletOptions, lastClickedWallet])
+    return filteredWallets
+  }, [lastClickedWallet, allWallets])
 
   return (
     <div className="space-y-6">
@@ -136,48 +138,30 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
               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">
-                {getWalletType() === "injected" &&
-                window.ethereum?.isMetaMask ? (
-                  <>
-                    <img
-                      src={MetaMaskFox}
-                      alt="MetaMask Fox"
-                      className="h-6 w-6"
-                    />
-                    <div className="flex items-center space-x-2">
-                      <span>MetaMask</span>
-                      <span className="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 trails-border-radius-container font-normal">
-                        Connected
-                      </span>
-                    </div>
-                  </>
-                ) : getWalletType() === "walletconnect" ? (
-                  <>
-                    <div className="h-6 w-6 bg-[#3B99FC] rounded flex items-center justify-center">
-                      <img
-                        src={WalletConnectLogoWhite}
-                        alt="WalletConnect"
-                        className="h-4 w-4"
-                      />
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <span>WalletConnect</span>
-                      <span className="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 trails-border-radius-container font-normal">
-                        Connected
-                      </span>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <Wallet className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-                    <div className="flex items-center space-x-2">
-                      <span>{connector?.name || "Wallet"}</span>
-                      <span className="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 trails-border-radius-container font-normal">
-                        Connected
-                      </span>
-                    </div>
-                  </>
-                )}
+                {(() => {
+                  const walletConfig = getCurrentWalletConfig()
+                  return (
+                    <>
+                      {typeof walletConfig?.icon === "string" ? (
+                        <img
+                          src={walletConfig?.icon}
+                          alt={walletConfig?.name}
+                          className="h-6 w-6"
+                        />
+                      ) : (
+                        <Wallet className="h-6 w-6 text-gray-600 dark:text-gray-400" />
+                      )}
+                      <div className="flex items-center space-x-2">
+                        <span>
+                          {walletConfig?.name || connector?.name || "Wallet"}
+                        </span>
+                        <span className="text-xs bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 py-1 trails-border-radius-container font-normal">
+                          Connected
+                        </span>
+                      </div>
+                    </>
+                  )
+                })()}
               </div>
 
               <ChevronRight className="h-5 w-5 text-gray-400" />
@@ -246,64 +230,44 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                 <button
                   type="button"
                   key={wallet.id}
+                  data-wallet-id={wallet.id}
                   onClick={() => handleWalletConnect(wallet.id)}
                   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">
-                    {wallet.id === "injected" && window.ethereum?.isMetaMask ? (
-                      <>
-                        <img
-                          src={MetaMaskFox}
-                          alt="MetaMask Fox"
-                          className="h-6 w-6"
-                        />
-                        <div className="flex items-center space-x-2">
-                          <span>MetaMask</span>
-                          {lastClickedWallet === wallet.id && (
-                            <span className="text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 trails-border-radius-container font-normal">
-                              Recent
-                            </span>
-                          )}
-                        </div>
-                      </>
-                    ) : wallet.id === "walletconnect" ? (
-                      <>
-                        <div className="h-6 w-6 bg-[#3B99FC] rounded flex items-center justify-center">
-                          <img
-                            src={WalletConnectLogoWhite}
-                            alt="WalletConnect"
-                            className="h-4 w-4"
-                          />
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <span>WalletConnect</span>
-                          {lastClickedWallet === wallet.id && (
-                            <span className="text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 trails-border-radius-container font-normal">
-                              Recent
-                            </span>
-                          )}
-                        </div>
-                      </>
-                    ) : (
-                      <>
-                        <Wallet className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-                        <div className="flex items-center space-x-2">
-                          <span>{wallet.name}</span>
-                          {lastClickedWallet === wallet.id && (
-                            <span className="text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 trails-border-radius-container font-normal">
-                              Recent
-                            </span>
+                    {(() => {
+                      const walletConfig = allWallets.find(
+                        (w) => w.id === wallet.id,
+                      )
+                      return (
+                        <>
+                          {typeof walletConfig?.icon === "string" ? (
+                            <img
+                              src={walletConfig?.icon}
+                              alt={walletConfig?.name}
+                              className="h-6 w-6"
+                            />
+                          ) : (
+                            <Wallet className="h-6 w-6 text-gray-600 dark:text-gray-400" />
                           )}
-                        </div>
-                      </>
-                    )}
+                          <div className="flex items-center space-x-2">
+                            <span>{walletConfig?.name || wallet.name}</span>
+                            {lastClickedWallet === wallet.id && (
+                              <span className="text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 trails-border-radius-container font-normal">
+                                Recent
+                              </span>
+                            )}
+                          </div>
+                        </>
+                      )
+                    })()}
                   </div>
                   <ChevronRight className="h-5 w-5 text-gray-400" />
                 </button>
               ))}
 
               {/* More Wallets Link - only show if more than 1 wallet option */}
-              {orderedWalletOptions.length > 1 && (
+              {orderedWalletOptions.length > 0 && (
                 <button
                   type="button"
                   onClick={() => onConnect("wallet-list")}

package/src/widget/components/DebugScreensDropdown.tsx

@@ -13,10 +13,13 @@ const SCREENS = [
   "Mesh Connect",
   "Wallet Connect",
   "Wallet List",
+  "Wallet Connection Pending",
+  "Wallet Connection Pending Retry",
   "Tokens",
   "Send Form",
   "Fund Form",
   "Earn Pools",
+  "Swap",
   "Wallet Confirmation",
   "Wallet Confirmation Retry",
   "Pending 1-item-0-confirmed",

package/src/widget/components/FundSendForm.tsx

@@ -11,6 +11,7 @@ import { ChainImage } from "./ChainImage.js"
 import { TokenImage } from "./TokenImage.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { TruncatedAddress } from "./TruncatedAddress.js"
+// import { RefundAddressInput } from "./RefundAddressInput.js"
 import { TradeType } from "../../prepareSend.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { formatAmount, formatUsdAmountDisplay } from "../../tokenBalances.js"
@@ -36,8 +37,8 @@ interface FundSendFormProps {
   gasless?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
-  fundMethod?: string | null
-  mode?: "pay" | "fund" | "earn"
+  fundMethod?: string
+  mode?: "pay" | "fund" | "earn" | "swap"
   onNavigateToMeshConnect?: (
     props: {
       toTokenSymbol: string
@@ -77,6 +78,8 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
 }) => {
   // Local state for fund-specific functionality
   const [isInputTypeUsd, setIsInputTypeUsd] = useState(false)
+  // const [isRefundAddressOpen, setIsRefundAddressOpen] = useState(false)
+  // const [refundAddress, setRefundAddress] = useState<string>(account.address)
 
   const [tokenAmountForBackend, setTokenAmountForBackend] = useState("")
   const [inputDisplayValue, setInputDisplayValue] = useState("")
@@ -126,6 +129,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
     toChainId,
     toToken,
     toCalldata,
+    // refundAddress,
     walletClient,
     onTransactionStateChange,
     onError,
@@ -479,7 +483,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
 
           {/* Percentage Buttons */}
           <div className="flex space-x-1 justify-center">
-            {[25, 50, 100].map((percentage) => (
+            {[25, 50, 75, 100].map((percentage) => (
               <button
                 key={percentage}
                 type="button"
@@ -688,6 +692,16 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
           </div>
         )}
 
+        {/* Refund Address Input */}
+        {/* <RefundAddressInput
+          account={account}
+          isOpen={isRefundAddressOpen}
+          onToggle={() => setIsRefundAddressOpen(!isRefundAddressOpen)}
+          refundAddress={refundAddress}
+          onRefundAddressChange={setRefundAddress}
+          chainId={selectedDestinationChain.id}
+        /> */}
+
         {/* 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">

package/src/widget/components/PaySendForm.tsx

@@ -12,6 +12,7 @@ import { FeeOptions } from "./FeeOptions.js"
 import { TokenImage } from "./TokenImage.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { TruncatedAddress } from "./TruncatedAddress.js"
+// import { RefundAddressInput } from "./RefundAddressInput.js"
 import { type PrepareSendQuote, TradeType } from "../../prepareSend.js"
 import { getChainInfo, getChainColor } from "../../chains.js"
 import { formatTvl } from "../../prices.js"
@@ -41,7 +42,7 @@ interface PaySendFormProps {
   gasless?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
-  fundMethod?: string | null
+  fundMethod?: string
   onNavigateToMeshConnect?: (
     props: {
       toTokenSymbol: string
@@ -52,7 +53,7 @@ interface PaySendFormProps {
     quote?: PrepareSendQuote | null,
   ) => void
   onAmountUpdate?: (amount: string) => void
-  mode?: "pay" | "fund" | "earn"
+  mode?: "pay" | "fund" | "earn" | "swap"
   selectedPool?: {
     id: string
     name: string
@@ -102,6 +103,8 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
   selectedPool,
   checkoutOnHandlers,
 }) => {
+  // const [isRefundAddressOpen, setIsRefundAddressOpen] = useState(false)
+  // const [refundAddress, setRefundAddress] = useState<string>(account.address)
   const {
     amount,
     amountRaw,
@@ -145,6 +148,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
     toChainId,
     toToken,
     toCalldata,
+    // refundAddress,
     walletClient,
     onTransactionStateChange,
     onError,
@@ -653,6 +657,16 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
           </div>
         )}
 
+        {/* Refund Address Input */}
+        {/* <RefundAddressInput
+          account={account}
+          isOpen={isRefundAddressOpen}
+          onToggle={() => setIsRefundAddressOpen(!isRefundAddressOpen)}
+          refundAddress={refundAddress}
+          onRefundAddressChange={setRefundAddress}
+          chainId={selectedDestinationChain.id}
+        /> */}
+
         {/* Fee Options */}
         <FeeOptions
           options={FEE_TOKENS}

package/src/widget/components/QRCodeDeposit.tsx

@@ -64,7 +64,7 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
               >
                 <QrCode
                   url={useSimpleQrCode ? eip631Url : eip681Url}
-                  size={200}
+                  size={300}
                 />
               </button>
               {!useSimpleQrCode && (