0xtrails 0.13.2 → 0.14.0

package/src/widget/components/ConnectWallet.tsx

@@ -1,566 +0,0 @@
-import { AlignJustify, ChevronRight, LogOut, Wallet } from "lucide-react"
-import { wagmiConnectorToWalletId } from "@0xtrails/wallet-registry"
-import React, { useEffect, useMemo, useState } from "react"
-import {
-  useAccount,
-  useConnections,
-  useConnectors,
-  useSwitchAccount,
-  type Connector,
-} from "wagmi"
-import { logger } from "../../logger.js"
-import { truncateAddress } from "../../utils/address.js"
-import { useWallets } from "../../wallets.js"
-import { useClickTracking } from "../hooks/useClickTracking.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-
-// Type for EIP-6963 connector with info property
-interface EIP6963Connector extends Connector {
-  info?: {
-    rdns?: string
-    name?: string
-    icon?: string
-  }
-}
-export interface WalletOption {
-  id: string
-  name: string
-  connector: () => void
-}
-
-export interface ConnectWalletProps {
-  onConnect: (walletId: string, connector?: any) => void
-  onDisconnect: () => void
-  onContinue: () => void
-  onError: (error: Error) => void
-  lastClickedWallet?: string | null
-  showDisconnect?: boolean
-}
-
-const alwaysShowWallets = ["metamask", "walletconnect"]
-
-export const ConnectWallet: React.FC<ConnectWalletProps> = ({
-  onConnect,
-  onContinue,
-  onError,
-  lastClickedWallet,
-  showDisconnect = true,
-}) => {
-  const { address, connector } = useAccount()
-  const connections = useConnections()
-  const { switchAccount } = useSwitchAccount()
-  const { navigate } = useViewManager()
-  const { wallets: allWallets } = useWallets()
-  const connectors = useConnectors()
-  const [error, setError] = useState<string | null>(null)
-  const { hideAddWallet } = useWidgetProps()
-
-  // Check if there are any connected accounts across all connectors
-  const isConnected = connections.length > 0
-
-  useEffect(() => {
-    if (error) {
-      if (onError) {
-        onError(new Error(error))
-      }
-    }
-  }, [error, onError])
-
-  const { trackClick } = useClickTracking()
-
-  const handleWalletConnect = (walletId: string, connector?: any) => {
-    logger.console.log("[trails-sdk] handleWalletConnect called:", {
-      walletId,
-      connectorId: connector?.id,
-      connectorName: connector?.name,
-      connectorUid: connector?.uid,
-      connectorRdns: (connector as EIP6963Connector)?.info?.rdns,
-      connectorType: connector?.type,
-    })
-
-    trackClick({
-      component: "ConnectWallet",
-      action: "connect_wallet",
-      label: walletId,
-      metadata: {
-        connectorId: connector?.id,
-        connectorName: connector?.name,
-        connectorType: connector?.type,
-        connectorRdns: (connector as EIP6963Connector)?.info?.rdns,
-      },
-    })
-
-    onConnect(walletId, connector)
-  }
-
-  const handleDisconnect = () => {
-    try {
-      setError(null)
-
-      trackClick({
-        component: "ConnectWallet",
-        action: "disconnect_wallet",
-        metadata: {
-          currentAddress: address,
-          currentConnector: connector?.name,
-        },
-      })
-
-      navigate("disconnect")
-    } catch (error) {
-      logger.console.error(
-        "[trails-sdk] Failed to navigate to disconnect:",
-        error,
-      )
-      setError(
-        error instanceof Error
-          ? error.message
-          : "Failed to navigate to disconnect",
-      )
-    }
-  }
-
-  // Get all connected wallets with their details
-  const getConnectedWallets = () => {
-    const walletMap = new Map()
-
-    connections.forEach((connection) => {
-      // Process each account in the connection
-      if (!connection || !connection.accounts) return
-      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()
-
-  // Get available browser wallets using EIP-6963 and injected providers
-  const allAvailableBrowserWallets = useMemo(() => {
-    logger.console.log(
-      "[trails-sdk] All connectors from wagmi:",
-      connectors.map((c) => ({
-        id: c.id,
-        name: c.name,
-        type: c.type,
-        uid: c.uid,
-        rdns: (c as EIP6963Connector)?.info?.rdns,
-      })),
-    )
-
-    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,
-        )
-
-        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,
-        }
-      })
-
-    // Don't deduplicate EIP-6963 wallets - each is unique!
-    // Only deduplicate non-EIP-6963 connectors
-    const seenNonEIP6963 = new Set<string>()
-    const uniqueWallets = filteredConnectors.filter((wallet) => {
-      // If it's an EIP-6963 wallet (has rdns or uid), always include it
-      if (
-        (wallet.connector as EIP6963Connector)?.info?.rdns ||
-        wallet.connector.uid
-      ) {
-        return true
-      }
-
-      // For non-EIP-6963 wallets, deduplicate by walletId
-      if (seenNonEIP6963.has(wallet.walletId)) {
-        return false
-      }
-      seenNonEIP6963.add(wallet.walletId)
-      return true
-    })
-
-    return uniqueWallets
-  }, [connectors, allWallets, connections])
-
-  // 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) {
-        switchAccount({
-          connector: connection.connector,
-        })
-        logger.console.log(`[trails-sdk] Switched to wallet: ${walletAddress}`)
-      }
-    } catch (error) {
-      logger.console.error("[trails-sdk] Failed to switch wallet:", error)
-      setError(
-        error instanceof Error ? error.message : "Failed to switch wallet",
-      )
-    }
-  }
-
-  // Create wallet options from allWallets and always prepend recent wallet
-  const orderedWalletOptions = React.useMemo(() => {
-    // Convert allWallets to wallet options format
-    const walletOptionsFromAllWallets = allWallets.map((wallet) => ({
-      id: wallet.id,
-      name: wallet.name,
-      connector: () => wallet.connector?.connect?.(),
-    }))
-
-    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) {
-      logger.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 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 headerContent="Connect Wallet" headerContentAlign="left" />
-
-      {isConnected ? (
-        <div className="space-y-4">
-          <div className="flex flex-col gap-3">
-            {/* Connected Wallets List */}
-            {connectedWallets.map((wallet) => (
-              <div key={wallet.address} className="space-y-2">
-                {/* Wallet Button */}
-                <button
-                  type="button"
-                  onClick={
-                    wallet.isActive
-                      ? onContinue
-                      : () =>
-                          handleWalletSwitch(wallet.address, wallet.connector)
-                  }
-                  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 ${
-                    wallet.isActive
-                      ? "trails-bg-secondary trails-hover-bg trails-text-primary"
-                      : "bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300"
-                  }`}
-                >
-                  <div className="flex items-center space-x-3">
-                    {typeof wallet.walletConfig?.icon === "string" ? (
-                      <img
-                        src={wallet.walletConfig.icon}
-                        alt={wallet.walletConfig.name}
-                        className="h-6 w-6"
-                      />
-                    ) : (
-                      <Wallet className="h-6 w-6 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>
-                          {wallet.walletConfig?.name ||
-                            wallet.connector?.name ||
-                            "Wallet"}
-                        </span>
-                        <span
-                          className={`text-xs px-2 py-1 trails-border-radius-container font-normal ${
-                            wallet.isActive
-                              ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
-                              : "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-                          }`}
-                        >
-                          {wallet.isActive ? "Active" : "Connected"}
-                        </span>
-                      </div>
-                      <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
-                        {truncateAddress(wallet.address)}
-                      </span>
-                    </div>
-                  </div>
-
-                  <div className="flex items-center">
-                    {wallet.isActive && (
-                      <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
-                        Continue
-                      </span>
-                    )}
-                    <ChevronRight className="h-5 w-5 text-gray-400" />
-                  </div>
-                </button>
-              </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, wallet.connector)
-                    }
-                    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 */}
-            {!hideAddWallet && (
-              <button
-                type="button"
-                onClick={() =>
-                  navigate("wallet-list", { backTarget: "connect" })
-                }
-                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">
-                  <AlignJustify className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-                  <span>Connect Another Wallet</span>
-                </div>
-                <ChevronRight className="h-5 w-5 text-gray-400" />
-              </button>
-            )}
-
-            {/* Disconnect Button - styled like wallet buttons with logout icon */}
-            {showDisconnect && (
-              <button
-                type="button"
-                onClick={handleDisconnect}
-                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">
-                  <LogOut className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-                  <span>Disconnect</span>
-                </div>
-                <ChevronRight className="h-5 w-5 text-gray-400" />
-              </button>
-            )}
-          </div>
-        </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, wallet.connector)
-                }
-                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) => (
-                <button
-                  type="button"
-                  key={wallet.id}
-                  data-wallet-id={wallet.id}
-                  onClick={() => {
-                    // For ordered wallet options, find if there's a detected browser wallet with the same ID
-                    const detectedWallet = allAvailableBrowserWallets.find(
-                      (w) => w.walletId === wallet.id,
-                    )
-                    // Use the detected wallet's connector if available (EIP-6963), otherwise use the wallet's connector
-                    // But DON'T use wallet.connector() which is a function - use the actual connector
-                    const connectorToUse =
-                      detectedWallet?.connector ||
-                      (typeof wallet.connector === "function"
-                        ? undefined
-                        : wallet.connector)
-                    handleWalletConnect(wallet.id, connectorToUse)
-                  }}
-                  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">
-                    {(() => {
-                      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 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>
-                            ) : 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>
-                        </>
-                      )
-                    })()}
-                  </div>
-                  <ChevronRight className="h-5 w-5 text-gray-400" />
-                </button>
-              ))}
-
-              {/* More Wallets Link - only show if more than 1 wallet option */}
-              {orderedWalletOptions.length > 0 && !hideAddWallet && (
-                <button
-                  type="button"
-                  onClick={() =>
-                    navigate("wallet-list", { backTarget: "connect" })
-                  }
-                  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">
-                    <AlignJustify className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-                    <span>More Wallets</span>
-                  </div>
-                  <ChevronRight className="h-5 w-5 text-gray-400" />
-                </button>
-              )}
-            </>
-          ) : (
-            <div className="space-y-6">
-              <div className="text-center p-4 trails-border-radius-container trails-text-tertiary trails-bg-secondary">
-                Please connect wallet in dapp
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default ConnectWallet