0xtrails 0.1.13 → 0.2.0

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,7 @@ 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"
 
 interface ConfigDisplayProps {
   className?: string
@@ -23,8 +24,9 @@ interface ConfigDisplayProps {
 export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
   className = "",
 }) => {
+  const { toast = false } = useWidgetProps()
   const [sequenceEnv, setSequenceEnv] = useState(getSequenceEnv())
-  const [sequenceApiUrl, setSequenceApiUrl] = useState(getSequenceApiUrl())
+  const [trailsApiUrl, setTrailsApiUrl] = useState(getTrailsApiUrl())
   const [sequenceIndexerUrl, setSequenceIndexerUrl] = useState(
     getSequenceIndexerUrl(),
   )
@@ -51,7 +53,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 +83,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 +113,7 @@ 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" },
   ]
 
   return (

package/src/widget/components/ConnectedWallets.tsx

@@ -0,0 +1,260 @@
+import { useState } from "react"
+import type React from "react"
+import { Wallet, Copy } from "lucide-react"
+import { useAccount, useConnections, useSwitchAccount } from "wagmi"
+import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
+import { logger } from "../../logger.js"
+import { truncateAddress } from "../../utils.js"
+
+export interface ConnectedWalletsProps {
+  onWalletSwitch?: (address: string) => void
+  showActiveWallet?: boolean
+  className?: string
+}
+
+export const ConnectedWallets: React.FC<ConnectedWalletsProps> = ({
+  onWalletSwitch,
+  showActiveWallet = true,
+  className = "",
+}) => {
+  const { address, connector } = useAccount()
+  const connections = useConnections()
+  const { switchAccount } = useSwitchAccount()
+  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 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 (
+          <div key={wallet.address} className="space-y-1">
+            {/* Wallet Button */}
+            <div
+              onClick={() => {
+                if (!wallet.isActive) {
+                  handleWalletSwitch(wallet.address, wallet.connector)
+                }
+              }}
+              onKeyDown={(e) => {
+                if ((e.key === "Enter" || e.key === " ") && !wallet.isActive) {
+                  e.preventDefault()
+                  handleWalletSwitch(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">
+                {typeof wallet.walletConfig?.icon === "string" ? (
+                  <img
+                    src={wallet.walletConfig.icon}
+                    alt={wallet.walletConfig.name}
+                    className="h-5 w-5"
+                  />
+                ) : (
+                  <Wallet className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+                )}
+                <div className="flex flex-col items-start space-y-1">
+                  <div className="flex items-center space-x-2">
+                    <span className="text-sm">
+                      {wallet.walletConfig?.name ||
+                        wallet.connector?.name ||
+                        "Wallet"}
+                    </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()
+                        handleCopyAddress(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">
+                {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>
+                )}
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </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> = ({

package/src/widget/components/DebugToast.tsx

@@ -0,0 +1,63 @@
+import type React from "react"
+import { useToast } from "./Toast.js"
+
+export const DebugToast: React.FC = () => {
+  const { showToast } = useToast()
+
+  const handleShowSuccess = () => {
+    showToast(
+      "Transaction Complete",
+      "Your transaction has been successfully processed",
+      "success",
+    )
+  }
+
+  const handleShowInfo = () => {
+    showToast(
+      "Info Toast",
+      "This is an info message for testing purposes",
+      "info",
+    )
+  }
+
+  const handleShowError = () => {
+    showToast(
+      "Transaction Failed",
+      "An error occurred while processing your transaction",
+      "error",
+    )
+  }
+
+  return (
+    <div className="p-3 border-b border-gray-200 dark:border-gray-700">
+      <div className="flex items-center gap-2">
+        <div className="text-xs font-semibold text-gray-600 dark:text-gray-400">
+          Toast
+        </div>
+        <div className="flex gap-1 flex-1">
+          <button
+            type="button"
+            onClick={handleShowInfo}
+            className="px-2 py-1 text-xs font-medium rounded bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/50 transition-colors"
+          >
+            info
+          </button>
+          <button
+            type="button"
+            onClick={handleShowSuccess}
+            className="px-2 py-1 text-xs font-medium rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50 transition-colors"
+          >
+            success
+          </button>
+          <button
+            type="button"
+            onClick={handleShowError}
+            className="px-2 py-1 text-xs font-medium rounded bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50 transition-colors"
+          >
+            error
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}