0xtrails 0.1.13 → 0.2.1

package/src/widget/components/ConfigDisplay.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react"
 import {
   globalConfig,
   getSequenceEnv,
-  getSequenceApiUrl,
+  getTrailsApiUrl,
   getSequenceIndexerUrl,
   getSequenceProjectAccessKey,
   getWalletConnectProjectId,
@@ -15,6 +15,8 @@ import type { RelayerEnv } from "../../relayer.js"
 import { getChainInfo } from "../../chains.js"
 import { mainnet } from "viem/chains"
 import { logger } from "../../logger.js"
+import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { useTargetAmount } from "../hooks/useTargetAmount.js"
 
 interface ConfigDisplayProps {
   className?: string
@@ -23,8 +25,16 @@ interface ConfigDisplayProps {
 export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
   className = "",
 }) => {
+  const {
+    toast = false,
+    toAddress,
+    toAmount,
+    toToken,
+    toCalldata,
+  } = useWidgetProps()
+  const { targetAmountUsdFormatted } = useTargetAmount()
   const [sequenceEnv, setSequenceEnv] = useState(getSequenceEnv())
-  const [sequenceApiUrl, setSequenceApiUrl] = useState(getSequenceApiUrl())
+  const [trailsApiUrl, setTrailsApiUrl] = useState(getTrailsApiUrl())
   const [sequenceIndexerUrl, setSequenceIndexerUrl] = useState(
     getSequenceIndexerUrl(),
   )
@@ -51,7 +61,7 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
     const updateConfig = () => {
       logger.console.log("[trails-sdk] globalConfig", globalConfig)
       setSequenceEnv(getSequenceEnv())
-      setSequenceApiUrl(getSequenceApiUrl())
+      setTrailsApiUrl(getTrailsApiUrl())
       setSequenceIndexerUrl(getSequenceIndexerUrl())
       setProjectAccessKey(getSequenceProjectAccessKey())
       setWalletConnectProjectId(getWalletConnectProjectId())
@@ -81,8 +91,8 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
     { label: "Sequence ENV", value: sequenceEnv, display: sequenceEnv },
     {
       label: "API URL",
-      value: sequenceApiUrl,
-      display: truncateString(sequenceApiUrl),
+      value: trailsApiUrl,
+      display: truncateString(trailsApiUrl),
     },
     {
       label: "Indexer URL",
@@ -111,6 +121,32 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
     },
     { label: "Slippage Tolerance", value: `${slippageTolerance}%` },
     { label: "Debug Mode", value: debugMode ? "Enabled" : "Disabled" },
+    { label: "Toast Notifications", value: toast ? "Enabled" : "Disabled" },
+    {
+      label: "Target Amount USD",
+      value: targetAmountUsdFormatted || "N/A",
+      display: targetAmountUsdFormatted || "N/A",
+    },
+    {
+      label: "To Address",
+      value: toAddress || "N/A",
+      display: toAddress ? truncateString(toAddress, 20) : "N/A",
+    },
+    {
+      label: "To Amount",
+      value: toAmount || "N/A",
+      display: toAmount || "N/A",
+    },
+    {
+      label: "To Token",
+      value: toToken || "N/A",
+      display: toToken ? truncateString(toToken, 20) : "N/A",
+    },
+    {
+      label: "To Calldata",
+      value: toCalldata || "N/A",
+      display: toCalldata ? truncateString(toCalldata, 20) : "N/A",
+    },
   ]
 
   return (

package/src/widget/components/ConnectWallet.tsx

@@ -1,6 +1,11 @@
 import React, { useEffect, useState } from "react"
 import { ChevronRight, LogOut } from "lucide-react"
-import { useAccount, useConnections, useSwitchAccount } from "wagmi"
+import {
+  useAccount,
+  useConnections,
+  useSwitchAccount,
+  useConnectors,
+} from "wagmi"
 import { AlignJustify, Wallet } from "lucide-react"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
@@ -35,6 +40,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   const { switchAccount } = useSwitchAccount()
   const { setCurrentScreen } = useCurrentScreen()
   const { wallets: allWallets } = useWallets()
+  const connectors = useConnectors()
   const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
@@ -96,6 +102,87 @@ 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 filteredConnectors = connectors
+      .filter((connector) => {
+        // EIP-6963 compliant wallets will have type "injected" and be ready when installed
+        // Filter for connectors that are:
+        // 1. Injected type (browser extensions, including EIP-6963)
+        // 2. Not WalletConnect (which is a protocol, not a browser wallet)
+        // 3. Not Privy wallet (should not appear in detected wallets)
+        // 4. Not already connected
+        const isInjected = connector.type === "injected"
+        const isNotWalletConnect = connector.id !== "walletConnect"
+        const isNotPrivy =
+          connector.id !== "privy" &&
+          !connector.name?.toLowerCase().includes("privy") &&
+          !connector.id?.toLowerCase().includes("privy")
+        const isNotAlreadyConnected = !connections.some(
+          (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 &&
+          isNotPrivy &&
+          isNotAlreadyConnected
+        )
+      })
+      .map((connector) => {
+        const walletId = wagmiConnectorToWalletId(connector)
+        const walletConfig = allWallets.find((wallet) => wallet.id === walletId)
+
+        return {
+          connector,
+          walletId,
+          walletConfig,
+          name: connector.name,
+          // EIP-6963 providers may have additional metadata including icon
+          icon: connector.icon || walletConfig?.icon,
+        }
+      })
+
+    // Deduplicate by walletId, keeping the first occurrence
+    const seenWalletIds = new Set<string>()
+    return filteredConnectors.filter((wallet) => {
+      if (seenWalletIds.has(wallet.walletId)) {
+        return false
+      }
+      seenWalletIds.add(wallet.walletId)
+      return true
+    })
+  }
+
+  const allAvailableBrowserWallets = getAvailableBrowserWallets()
+
   // Handle switching to a different connected wallet
   const handleWalletSwitch = async (
     walletAddress: string,
@@ -160,6 +247,14 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
     return filteredWallets
   }, [lastClickedWallet, allWallets])
 
+  // Filter out browser wallets that are already in the main wallet options to avoid showing same wallet twice
+  const availableBrowserWallets = React.useMemo(() => {
+    const mainWalletIds = new Set(orderedWalletOptions.map((w) => w.id))
+    return allAvailableBrowserWallets.filter(
+      (wallet) => !mainWalletIds.has(wallet.walletId),
+    )
+  }, [allAvailableBrowserWallets, orderedWalletOptions])
+
   return (
     <div className="space-y-6">
       <ScreenHeader
@@ -171,14 +266,6 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
       {isConnected ? (
         <div className="space-y-4">
           <div className="flex flex-col gap-3">
-            {error && (
-              <div className="border rounded-lg p-4 bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800">
-                <p className="text-sm break-words text-red-600 dark:text-red-200">
-                  {error}
-                </p>
-              </div>
-            )}
-
             {/* Connected Wallets List */}
             {connectedWallets.map((wallet) => (
               <div key={wallet.address} className="space-y-2">
@@ -242,6 +329,39 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
               </div>
             ))}
 
+            {/* Available Browser Wallets Section */}
+            {availableBrowserWallets.length > 0 && (
+              <div className="pt-2 space-y-2">
+                {availableBrowserWallets.map((wallet) => (
+                  <button
+                    key={wallet.connector.uid || wallet.connector.id}
+                    type="button"
+                    onClick={() => handleWalletConnect(wallet.walletId)}
+                    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">
+                      {typeof wallet.icon === "string" ? (
+                        <img
+                          src={wallet.icon}
+                          alt={wallet.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>{wallet.walletConfig?.name || wallet.name}</span>
+                        <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">
+                          Detected
+                        </span>
+                      </div>
+                    </div>
+                    <ChevronRight className="h-5 w-5 text-gray-400" />
+                  </button>
+                ))}
+              </div>
+            )}
+
             {/* Connect Another Wallet Button */}
             <button
               type="button"
@@ -273,6 +393,36 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
         </div>
       ) : (
         <div className="flex flex-col gap-3">
+          {/* Available Browser Wallets Section - Not Connected */}
+          {availableBrowserWallets.length > 0 &&
+            availableBrowserWallets.map((wallet) => (
+              <button
+                key={wallet.connector.uid || wallet.connector.id}
+                type="button"
+                onClick={() => handleWalletConnect(wallet.walletId)}
+                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">
+                  {typeof wallet.icon === "string" ? (
+                    <img
+                      src={wallet.icon}
+                      alt={wallet.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>{wallet.walletConfig?.name || wallet.name}</span>
+                    <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">
+                      Detected
+                    </span>
+                  </div>
+                </div>
+                <ChevronRight className="h-5 w-5 text-gray-400" />
+              </button>
+            ))}
+
           {orderedWalletOptions.length > 0 ? (
             <>
               {orderedWalletOptions.map((wallet) => (
@@ -301,11 +451,18 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                           )}
                           <div className="flex items-center space-x-2">
                             <span>{walletConfig?.name || wallet.name}</span>
-                            {lastClickedWallet === wallet.id && (
+                            {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>
-                            )}
+                            ) : allAvailableBrowserWallets.some(
+                                (detectedWallet) =>
+                                  detectedWallet.walletId === 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">
+                                Detected
+                              </span>
+                            ) : null}
                           </div>
                         </>
                       )

package/src/widget/components/ConnectedWallets.tsx

@@ -0,0 +1,342 @@
+import { useState } from "react"
+import type React from "react"
+import { Wallet, Copy, X } from "lucide-react"
+import {
+  useAccount,
+  useConnections,
+  useSwitchAccount,
+  useDisconnect,
+} from "wagmi"
+import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
+import { logger } from "../../logger.js"
+import { truncateAddress } from "../../utils.js"
+import { useAccountTotalBalanceUsd } from "../../tokenBalances.js"
+import { Identicon } from "./Identicon.js"
+
+export interface ConnectedWalletsProps {
+  onWalletSwitch?: (address: string) => void
+  showActiveWallet?: boolean
+  className?: string
+}
+
+interface WalletItemProps {
+  wallet: {
+    address: string
+    connector: any
+    walletConfig: any
+    walletId: string
+    isActive: boolean
+  }
+  onWalletSwitch: (address: string, connector: any) => void
+  onDisconnect: (connector: any, e: React.MouseEvent) => void
+  onCopyAddress: (address: string, e: React.MouseEvent) => void
+  copiedAddress: string | null
+}
+
+const WalletItem: React.FC<WalletItemProps> = ({
+  wallet,
+  onWalletSwitch,
+  onDisconnect,
+  onCopyAddress,
+  copiedAddress,
+}) => {
+  const { totalBalanceUsdFormatted, isLoadingTotalBalanceUsd } =
+    useAccountTotalBalanceUsd(wallet.address)
+
+  return (
+    <div className="space-y-1">
+      {/* Wallet Button */}
+      <div
+        onClick={() => {
+          if (!wallet.isActive) {
+            onWalletSwitch(wallet.address, wallet.connector)
+          }
+        }}
+        onKeyDown={(e) => {
+          if ((e.key === "Enter" || e.key === " ") && !wallet.isActive) {
+            e.preventDefault()
+            onWalletSwitch(wallet.address, wallet.connector)
+          }
+        }}
+        tabIndex={wallet.isActive ? -1 : 0}
+        className={`group w-full flex items-center justify-between font-medium py-2 px-3 rounded-lg transition-all duration-200 ${
+          wallet.isActive
+            ? "bg-blue-50 dark:bg-blue-900/20 text-gray-700 dark:text-gray-300 cursor-default"
+            : "bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
+        }`}
+      >
+        <div className="flex items-center space-x-3">
+          {/* Identicon */}
+          <Identicon value={wallet.address} size={32} />
+          <div className="flex flex-col items-start space-y-1">
+            <div className="flex items-center space-x-2">
+              {/* Wallet Icon */}
+              {typeof wallet.walletConfig?.icon === "string" ? (
+                <img
+                  src={wallet.walletConfig.icon}
+                  alt={wallet.walletConfig.name}
+                  className="h-4 w-4"
+                />
+              ) : (
+                <Wallet className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              )}
+              <span className="text-sm">
+                {wallet.walletConfig?.name ||
+                  wallet.connector?.name ||
+                  "Wallet"}
+              </span>
+              {!isLoadingTotalBalanceUsd && totalBalanceUsdFormatted && (
+                <span className="text-xs text-gray-400 dark:text-gray-500">
+                  {totalBalanceUsdFormatted}
+                </span>
+              )}
+            </div>
+            <div className="flex items-center space-x-1">
+              <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+                {truncateAddress(wallet.address)}
+              </span>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  onCopyAddress(wallet.address, e)
+                }}
+                onMouseDown={(e) => e.stopPropagation()}
+                onMouseUp={(e) => e.stopPropagation()}
+                className={`p-0.5 rounded transition-all duration-200 cursor-pointer z-10 relative ${
+                  copiedAddress === wallet.address
+                    ? "bg-green-100 dark:bg-green-900/30"
+                    : "hover:bg-gray-200 dark:hover:bg-gray-600"
+                }`}
+                title={
+                  copiedAddress === wallet.address
+                    ? "Copied!"
+                    : "Copy full address"
+                }
+              >
+                {copiedAddress === wallet.address ? (
+                  <svg
+                    className="w-3 h-3 text-green-600 dark:text-green-400"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    aria-label="Copied"
+                  >
+                    <title>Copied</title>
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M5 13l4 4L19 7"
+                    />
+                  </svg>
+                ) : (
+                  <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {wallet.isActive ? (
+            <span className="text-xs px-2 py-1 rounded font-medium bg-blue-500 text-white">
+              Active
+            </span>
+          ) : (
+            <span className="text-xs px-2 py-1 rounded font-medium bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+              Set as active
+            </span>
+          )}
+          <button
+            type="button"
+            onClick={(e) => onDisconnect(wallet.connector, e)}
+            onMouseDown={(e) => e.stopPropagation()}
+            onMouseUp={(e) => e.stopPropagation()}
+            className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 opacity-0 group-hover:opacity-100 transition-all duration-200 cursor-pointer"
+            title="Disconnect wallet"
+            aria-label="Disconnect wallet"
+          >
+            <X className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
+  onWalletSwitch,
+  showActiveWallet = true,
+  className = "",
+}) => {
+  const { address, connector } = useAccount()
+  const connections = useConnections()
+  const { switchAccount } = useSwitchAccount()
+  const { disconnect } = useDisconnect()
+  const { wallets: allWallets } = useWallets()
+  const [error, setError] = useState<string | null>(null)
+  const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
+
+  // Get all connected wallets with their details
+  const getConnectedWallets = () => {
+    const walletMap = new Map()
+
+    connections.forEach((connection) => {
+      // Process each account in the connection
+      connection.accounts.forEach((account) => {
+        if (account && !walletMap.has(account)) {
+          const walletId = wagmiConnectorToWalletId(connection.connector)
+          const walletConfig = allWallets.find(
+            (wallet) => wallet.id === walletId,
+          )
+
+          walletMap.set(account, {
+            address: account,
+            connector: connection.connector,
+            walletConfig,
+            walletId,
+            isActive:
+              connection.connector.id === connector?.id && account === address,
+          })
+        }
+      })
+    })
+
+    return Array.from(walletMap.values())
+  }
+
+  const connectedWallets = getConnectedWallets()
+
+  // Handle switching to a different connected wallet
+  const handleWalletSwitch = async (
+    walletAddress: string,
+    walletConnector: any,
+  ) => {
+    try {
+      setError(null)
+      // Find the connection for this wallet
+      const connection = connections.find(
+        (conn) =>
+          conn.accounts.includes(walletAddress as `0x${string}`) &&
+          conn.connector.id === walletConnector.id,
+      )
+
+      if (connection) {
+        await switchAccount({
+          connector: connection.connector,
+        })
+        logger.console.log(`[trails-sdk] Switched to wallet: ${walletAddress}`)
+
+        // Call the optional callback
+        if (onWalletSwitch) {
+          onWalletSwitch(walletAddress)
+        }
+      }
+    } catch (error) {
+      logger.console.error("[trails-sdk] Failed to switch wallet:", error)
+      setError(
+        error instanceof Error ? error.message : "Failed to switch wallet",
+      )
+    }
+  }
+
+  // Handle disconnecting a specific wallet
+  const handleDisconnect = async (
+    walletConnector: any,
+    e: React.MouseEvent,
+  ) => {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      setError(null)
+      await disconnect({ connector: walletConnector })
+      logger.console.log("[trails-sdk] Disconnected wallet")
+    } catch (error) {
+      logger.console.error("[trails-sdk] Failed to disconnect wallet:", error)
+      setError(
+        error instanceof Error ? error.message : "Failed to disconnect wallet",
+      )
+    }
+  }
+
+  // Handle copy to clipboard with success indication
+  const handleCopyAddress = async (address: string, e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(address)
+      setCopiedAddress(address)
+      setTimeout(() => setCopiedAddress(null), 2000) // Clear after 2 seconds
+      logger.console.log("[trails-sdk] Successfully copied address:", address)
+    } catch (error) {
+      logger.console.error("[trails-sdk] Failed to copy address:", error)
+      // Fallback for older browsers or when clipboard API is not available
+      try {
+        const textArea = document.createElement("textarea")
+        textArea.value = address
+        document.body.appendChild(textArea)
+        textArea.select()
+        document.execCommand("copy")
+        document.body.removeChild(textArea)
+        setCopiedAddress(address)
+        setTimeout(() => setCopiedAddress(null), 2000)
+        logger.console.log(
+          "[trails-sdk] Successfully copied address using fallback:",
+          address,
+        )
+      } catch (fallbackError) {
+        logger.console.error(
+          "[trails-sdk] Fallback copy also failed:",
+          fallbackError,
+        )
+      }
+    }
+  }
+
+  if (connectedWallets.length === 0) {
+    return null
+  }
+
+  return (
+    <div className={`space-y-2 ${className}`}>
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-3">
+        <Wallet className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+        <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
+          Connected Wallets
+        </span>
+      </div>
+
+      {error && (
+        <div className="border rounded-lg p-4 bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800">
+          <p className="text-sm break-words text-red-600 dark:text-red-200">
+            {error}
+          </p>
+        </div>
+      )}
+
+      {/* Connected Wallets List */}
+      {connectedWallets.map((wallet) => {
+        // Skip active wallet if showActiveWallet is false
+        if (!showActiveWallet && wallet.isActive) {
+          return null
+        }
+
+        return (
+          <WalletItem
+            key={wallet.address}
+            wallet={wallet}
+            onWalletSwitch={handleWalletSwitch}
+            onDisconnect={handleDisconnect}
+            onCopyAddress={handleCopyAddress}
+            copiedAddress={copiedAddress}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default ConnectedWallets

package/src/widget/components/DebugMenu.tsx

@@ -4,6 +4,7 @@ import { useRef, useState } from "react"
 import { getDebug } from "../../config.js"
 import { ConfigDisplay } from "./ConfigDisplay.js"
 import { DebugScreensList } from "./DebugScreensList.js"
+import { DebugToast } from "./DebugToast.js"
 
 interface DebugMenuProps {
   onScreenSelect: (screen: string) => void
@@ -39,6 +40,7 @@ export const DebugMenu: React.FC<DebugMenuProps> = ({ onScreenSelect }) => {
       {isOpen && (
         <div className="absolute bottom-full right-0 mb-1 w-80 border border-solid rounded-lg shadow-lg overflow-hidden max-h-[400px] overflow-y-auto custom-scrollbar bg-white border-gray-200 text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 z-50">
           <DebugScreensList onScreenSelect={handleScreenSelect} />
+          <DebugToast />
           <ConfigDisplay />
         </div>
       )}

package/src/widget/components/DebugScreensList.tsx

@@ -16,6 +16,7 @@ const SCREENS = [
   "Chain List",
   "Send Form",
   "Fund Form",
+  "Recipients",
   "Earn",
   "Earn Pools",
   "Swap",
@@ -36,6 +37,8 @@ const SCREENS = [
   "Receipt Failed",
   "Receipt Refunded",
   "Account History",
+  "Account Settings",
+  "User Preferences",
 ] as const
 
 export const DebugScreensList: React.FC<DebugScreensListProps> = ({