@solana/connector 0.1.10 → 0.2.0

package/dist/{chunk-WGZYKDXF.mjs → chunk-RTXUS5KG.mjs}

@@ -1,10 +1,284 @@
-import { installPolyfills, ConnectorErrorBoundary, isMainnetCluster, isDevnetCluster, isTestnetCluster, isLocalCluster, getClusterExplorerUrl, getClusterType, formatAddress, copyAddressToClipboard, createTransactionSigner, createKitTransactionSigner, formatLamportsToSolSafe, getTransactionUrl, ConnectorClient, formatBigIntBalance, formatBigIntUsd } from './chunk-QOIQBWMP.mjs';
-import { createLogger, __publicField, createSolanaClient, NetworkError, prepareTransaction } from './chunk-DKCZA2QI.mjs';
-import React, { createContext, useState, useRef, useEffect, useCallback, useContext, useSyncExternalStore, useMemo } from 'react';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { installPolyfills, isMainnetCluster, isDevnetCluster, isTestnetCluster, isLocalCluster, getClusterExplorerUrl, getClusterType, formatAddress, copyAddressToClipboard, createConnectorId, createTransactionSigner, createKitTransactionSigner, formatLamportsToSolSafe, getTransactionUrl, ConnectorClient, formatBigIntBalance, formatBigIntUsd } from './chunk-IDTUFDNB.mjs';
+import { createLogger, __publicField, WalletErrorType, createSolanaClient, NetworkError, prepareTransaction, isConnectorError } from './chunk-ZZTY3O4N.mjs';
+import React2, { createContext, Component, useTransition, useState, useCallback, useMemo, useRef, useEffect, useContext, useSyncExternalStore } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { address } from '@solana/addresses';
 import { signature } from '@solana/keys';
 
+var logger = createLogger("ErrorBoundary");
+var ErrorLogger = class {
+  static log(error, errorInfo, context) {
+    if (process.env.NODE_ENV === "development" && logger.error(error.message, {
+      error,
+      errorInfo,
+      context
+    }), process.env.NODE_ENV === "production" && typeof window < "u")
+      try {
+        let gtag = window.gtag;
+        typeof gtag == "function" && gtag("event", "exception", {
+          description: error.message,
+          fatal: false,
+          custom_map: { error_type: "wallet_error", ...context }
+        });
+      } catch {
+      }
+  }
+};
+function classifyError(error) {
+  if (isConnectorError(error)) {
+    let typeMapping = {
+      WALLET_NOT_CONNECTED: WalletErrorType.CONNECTION_FAILED,
+      WALLET_NOT_FOUND: WalletErrorType.WALLET_NOT_FOUND,
+      CONNECTION_FAILED: WalletErrorType.CONNECTION_FAILED,
+      USER_REJECTED: WalletErrorType.USER_REJECTED,
+      RPC_ERROR: WalletErrorType.NETWORK_ERROR,
+      NETWORK_TIMEOUT: WalletErrorType.NETWORK_ERROR,
+      SIGNING_FAILED: WalletErrorType.TRANSACTION_FAILED,
+      SEND_FAILED: WalletErrorType.TRANSACTION_FAILED
+    };
+    return {
+      ...error,
+      type: typeMapping[error.code] || WalletErrorType.UNKNOWN_ERROR,
+      recoverable: error.recoverable,
+      context: error.context
+    };
+  }
+  let walletError = error;
+  if (walletError.type) return walletError;
+  let type = WalletErrorType.UNKNOWN_ERROR, recoverable = false;
+  return error.message.includes("User rejected") || error.message.includes("User denied") ? (type = WalletErrorType.USER_REJECTED, recoverable = true) : error.message.includes("Insufficient funds") ? (type = WalletErrorType.INSUFFICIENT_FUNDS, recoverable = false) : error.message.includes("Network") || error.message.includes("fetch") ? (type = WalletErrorType.NETWORK_ERROR, recoverable = true) : error.message.includes("Wallet not found") || error.message.includes("not installed") ? (type = WalletErrorType.WALLET_NOT_FOUND, recoverable = true) : (error.message.includes("Failed to connect") || error.message.includes("Connection")) && (type = WalletErrorType.CONNECTION_FAILED, recoverable = true), {
+    ...error,
+    type,
+    recoverable,
+    context: { originalMessage: error.message }
+  };
+}
+var ConnectorErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "retryTimeouts", /* @__PURE__ */ new Set());
+    __publicField(this, "retry", () => {
+      let { maxRetries = 3 } = this.props;
+      this.state.retryCount >= maxRetries || this.setState((prevState) => ({
+        hasError: false,
+        error: null,
+        errorInfo: null,
+        retryCount: prevState.retryCount + 1
+      }));
+    });
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      errorId: "",
+      retryCount: 0
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error,
+      errorId: `error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ errorInfo }), ErrorLogger.log(error, errorInfo, {
+      retryCount: this.state.retryCount,
+      errorId: this.state.errorId,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    }), this.props.onError?.(error, errorInfo);
+  }
+  componentWillUnmount() {
+    this.retryTimeouts.forEach((timeout) => clearTimeout(timeout));
+  }
+  render() {
+    if (this.state.hasError && this.state.error) {
+      let walletError = classifyError(this.state.error);
+      return this.props.fallback ? this.props.fallback(walletError, this.retry) : /* @__PURE__ */ jsx(DefaultErrorFallback, { error: walletError, onRetry: this.retry });
+    }
+    return this.props.children;
+  }
+};
+function DefaultErrorFallback({ error, onRetry }) {
+  let [isPending, startTransition] = useTransition(), [isRetrying, setIsRetrying] = useState(false), handleRetry = useCallback(() => {
+    setIsRetrying(true), startTransition(() => {
+      setTimeout(() => {
+        onRetry(), setIsRetrying(false);
+      }, 500);
+    });
+  }, [onRetry]), { title, message, actionText, showRetry } = useMemo(() => {
+    switch (error.type) {
+      case WalletErrorType.USER_REJECTED:
+        return {
+          title: "Transaction Cancelled",
+          message: "You cancelled the transaction. No problem!",
+          actionText: "Try Again",
+          showRetry: true
+        };
+      case WalletErrorType.WALLET_NOT_FOUND:
+        return {
+          title: "Wallet Not Found",
+          message: "Please install a supported Solana wallet to continue.",
+          actionText: "Check Wallets",
+          showRetry: true
+        };
+      case WalletErrorType.NETWORK_ERROR:
+        return {
+          title: "Network Error",
+          message: "Having trouble connecting. Please check your internet connection.",
+          actionText: "Retry",
+          showRetry: true
+        };
+      case WalletErrorType.INSUFFICIENT_FUNDS:
+        return {
+          title: "Insufficient Funds",
+          message: "You don't have enough SOL for this transaction.",
+          actionText: "Add Funds",
+          showRetry: false
+        };
+      default:
+        return {
+          title: "Something went wrong",
+          message: "An unexpected error occurred. Please try again.",
+          actionText: "Retry",
+          showRetry: error.recoverable
+        };
+    }
+  }, [error.type, error.recoverable]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2rem",
+        textAlign: "center",
+        borderRadius: "12px",
+        border: "1px solid #e5e7eb",
+        backgroundColor: "#fafafa",
+        maxWidth: "400px",
+        margin: "0 auto"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "48px",
+              height: "48px",
+              borderRadius: "50%",
+              backgroundColor: "#fee2e2",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginBottom: "1rem"
+            },
+            children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "#dc2626", children: /* @__PURE__ */ jsx("path", { d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            style: {
+              margin: "0 0 0.5rem 0",
+              fontSize: "1.125rem",
+              fontWeight: "600",
+              color: "#111827"
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: "0 0 1.5rem 0",
+              fontSize: "0.875rem",
+              color: "#6b7280",
+              lineHeight: "1.5"
+            },
+            children: message
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.75rem", flexWrap: "wrap" }, children: [
+          showRetry && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleRetry,
+              disabled: isPending || isRetrying,
+              style: {
+                padding: "0.5rem 1rem",
+                backgroundColor: "#3b82f6",
+                color: "white",
+                border: "none",
+                borderRadius: "6px",
+                fontSize: "0.875rem",
+                fontWeight: "500",
+                cursor: isPending || isRetrying ? "wait" : "pointer",
+                opacity: isPending || isRetrying ? 0.7 : 1,
+                transition: "all 0.2s"
+              },
+              children: isRetrying ? "Retrying..." : actionText
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => window.location.reload(),
+              style: {
+                padding: "0.5rem 1rem",
+                backgroundColor: "transparent",
+                color: "#6b7280",
+                border: "1px solid #d1d5db",
+                borderRadius: "6px",
+                fontSize: "0.875rem",
+                fontWeight: "500",
+                cursor: "pointer",
+                transition: "all 0.2s"
+              },
+              children: "Refresh Page"
+            }
+          )
+        ] }),
+        process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxs(
+          "details",
+          {
+            style: {
+              marginTop: "1rem",
+              fontSize: "0.75rem",
+              color: "#6b7280",
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsx("summary", { style: { cursor: "pointer", marginBottom: "0.5rem" }, children: "Error Details" }),
+              /* @__PURE__ */ jsx(
+                "pre",
+                {
+                  style: {
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-all",
+                    backgroundColor: "#f3f4f6",
+                    padding: "0.5rem",
+                    borderRadius: "4px",
+                    overflow: "auto",
+                    maxHeight: "200px"
+                  },
+                  children: error.message
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function withErrorBoundary(Component2, errorBoundaryProps) {
+  let WrappedComponent = (props) => /* @__PURE__ */ jsx(ConnectorErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx(Component2, { ...props }) });
+  return WrappedComponent.displayName = `withErrorBoundary(${Component2.displayName || Component2.name})`, WrappedComponent;
+}
 var WalletConnectContext = createContext(null);
 function WalletConnectProvider({ children }) {
   let [uri, setUriState] = useState(null), isMountedRef = useRef(false), pendingUriRef = useRef(null);
@@ -32,7 +306,7 @@ function useWalletConnectUri() {
     }
   };
 }
-var logger = createLogger("ConnectorProvider");
+var logger2 = createLogger("ConnectorProvider");
 installPolyfills();
 var ConnectorContext = createContext(null);
 ConnectorContext.displayName = "ConnectorContext";
@@ -41,13 +315,13 @@ function ConnectorProviderInternal({
   config,
   mobile
 }) {
-  let clientRef = useRef(null), client = React.useCallback(() => {
+  let clientRef = useRef(null), client = React2.useCallback(() => {
     if (!clientRef.current)
       try {
-        clientRef.current = new ConnectorClient(config), typeof window < "u" && (window.__connectorClient = clientRef.current), config?.debug && logger.info("Client initialized successfully");
+        clientRef.current = new ConnectorClient(config), typeof window < "u" && (window.__connectorClient = clientRef.current), config?.debug && logger2.info("Client initialized successfully");
       } catch (error) {
         let err = error;
-        logger.error("Failed to initialize client", { error: err });
+        logger2.error("Failed to initialize client", { error: err });
         let extendedConfig = config;
         return extendedConfig?.errorBoundary?.onError && extendedConfig.errorBoundary.onError(err, {
           componentStack: "client-initialization",
@@ -56,7 +330,7 @@ function ConnectorProviderInternal({
       }
     return clientRef.current;
   }, [config])();
-  return React.useEffect(() => {
+  return React2.useEffect(() => {
     let currentClient = clientRef.current;
     if (currentClient) {
       let privateClient = currentClient;
@@ -65,7 +339,7 @@ function ConnectorProviderInternal({
     return () => {
       typeof window < "u" && (window.__connectorClient = void 0), currentClient && typeof currentClient.destroy == "function" && currentClient.destroy();
     };
-  }, []), React.useEffect(() => {
+  }, []), React2.useEffect(() => {
     if (!mobile) return;
     let cancelled = false;
     return (async () => {
@@ -120,25 +394,45 @@ function useConnector() {
       "useConnector must be used within ConnectorProvider. Wrap your app with <ConnectorProvider> or <UnifiedProvider> to use connector hooks."
     );
   let { uri: walletConnectUri, clearUri: clearWalletConnectUri } = useWalletConnectUri(), state = useSyncExternalStore(
-    React.useCallback((cb) => client.subscribe(cb), [client]),
-    React.useCallback(() => client.getSnapshot(), [client]),
-    React.useCallback(() => client.getSnapshot(), [client])
+    React2.useCallback((cb) => client.subscribe(cb), [client]),
+    React2.useCallback(() => client.getSnapshot(), [client]),
+    React2.useCallback(() => client.getSnapshot(), [client])
   ), methods = useMemo(
     () => ({
+      // Legacy (kept for backwards compatibility)
       select: client.select.bind(client),
       disconnect: client.disconnect.bind(client),
-      selectAccount: client.selectAccount.bind(client)
+      selectAccount: client.selectAccount.bind(client),
+      // vNext
+      connectWallet: client.connectWallet.bind(client),
+      disconnectWallet: client.disconnectWallet.bind(client)
     }),
     [client]
-  );
+  ), vNextFields = useMemo(() => {
+    let walletStatus = state.wallet, isConnected2 = walletStatus.status === "connected", isConnecting2 = walletStatus.status === "connecting", isError = walletStatus.status === "error", connectorId = null, account = null, sessionAccounts = [], walletError = null;
+    walletStatus.status === "connected" ? (connectorId = walletStatus.session.connectorId, account = walletStatus.session.selectedAccount.address, sessionAccounts = walletStatus.session.accounts) : walletStatus.status === "connecting" ? connectorId = walletStatus.connectorId : walletStatus.status === "error" && (walletError = walletStatus.error, connectorId = walletStatus.connectorId ?? null);
+    let connector = connectorId ? state.connectors.find((c) => c.id === connectorId) ?? null : null;
+    return {
+      walletStatus,
+      isConnected: isConnected2,
+      isConnecting: isConnecting2,
+      isError,
+      walletError,
+      account,
+      sessionAccounts,
+      connectorId,
+      connector
+    };
+  }, [state.wallet, state.connectors]);
   return useMemo(
     () => ({
       ...state,
       ...methods,
+      ...vNextFields,
       walletConnectUri,
       clearWalletConnectUri
     }),
-    [state, methods, walletConnectUri, clearWalletConnectUri]
+    [state, methods, vNextFields, walletConnectUri, clearWalletConnectUri]
   );
 }
 function useConnectorClient() {
@@ -170,6 +464,92 @@ function AppProvider(props) {
   return props.connectorConfig?.walletConnect?.enabled ? /* @__PURE__ */ jsx(WalletConnectProvider, { children: /* @__PURE__ */ jsx(AppProviderInner, { ...props }) }) : /* @__PURE__ */ jsx(AppProviderInner, { ...props });
 }
 var UnifiedProvider = AppProvider;
+function useWallet() {
+  let client = useContext(ConnectorContext);
+  if (!client)
+    throw new Error(
+      "useWallet must be used within ConnectorProvider. Wrap your app with <ConnectorProvider> or <UnifiedProvider> to use wallet hooks."
+    );
+  let walletStatus = useSyncExternalStore(
+    useCallback((cb) => client.subscribe(cb), [client]),
+    useCallback(() => client.getSnapshot().wallet, [client]),
+    useCallback(() => client.getSnapshot().wallet, [client])
+  );
+  return useMemo(() => {
+    let status = walletStatus.status, isConnected2 = status === "connected", isConnecting2 = status === "connecting", isError = status === "error", connectorId = null, account = null, accounts = [], session = null, error = null;
+    return walletStatus.status === "connected" ? (connectorId = walletStatus.session.connectorId, account = walletStatus.session.selectedAccount.address, accounts = walletStatus.session.accounts, session = walletStatus.session) : walletStatus.status === "connecting" ? connectorId = walletStatus.connectorId : walletStatus.status === "error" && (error = walletStatus.error, connectorId = walletStatus.connectorId ?? null), {
+      status,
+      walletStatus,
+      isConnected: isConnected2,
+      isConnecting: isConnecting2,
+      isError,
+      error,
+      connectorId,
+      account,
+      accounts,
+      session
+    };
+  }, [walletStatus]);
+}
+function useWalletConnectors() {
+  let client = useContext(ConnectorContext);
+  if (!client)
+    throw new Error(
+      "useWalletConnectors must be used within ConnectorProvider. Wrap your app with <ConnectorProvider> or <UnifiedProvider> to use wallet hooks."
+    );
+  return useSyncExternalStore(
+    useCallback((cb) => client.subscribe(cb), [client]),
+    useCallback(() => client.getSnapshot().connectors, [client]),
+    useCallback(() => client.getSnapshot().connectors, [client])
+  );
+}
+function useConnectWallet() {
+  let client = useContext(ConnectorContext), [isConnecting2, setIsConnecting] = useState(false), [error, setError] = useState(null);
+  if (!client)
+    throw new Error(
+      "useConnectWallet must be used within ConnectorProvider. Wrap your app with <ConnectorProvider> or <UnifiedProvider> to use wallet hooks."
+    );
+  let connect = useCallback(
+    async (connectorId, options) => {
+      setIsConnecting(true), setError(null);
+      try {
+        await client.connectWallet(connectorId, options);
+      } catch (e) {
+        let connectError = e instanceof Error ? e : new Error(String(e));
+        throw setError(connectError), connectError;
+      } finally {
+        setIsConnecting(false);
+      }
+    },
+    [client]
+  ), resetError = useCallback(() => {
+    setError(null);
+  }, []);
+  return {
+    connect,
+    isConnecting: isConnecting2,
+    error,
+    resetError
+  };
+}
+function useDisconnectWallet() {
+  let client = useContext(ConnectorContext), [isDisconnecting, setIsDisconnecting] = useState(false);
+  if (!client)
+    throw new Error(
+      "useDisconnectWallet must be used within ConnectorProvider. Wrap your app with <ConnectorProvider> or <UnifiedProvider> to use wallet hooks."
+    );
+  return {
+    disconnect: useCallback(async () => {
+      setIsDisconnecting(true);
+      try {
+        await client.disconnectWallet();
+      } finally {
+        setIsDisconnecting(false);
+      }
+    }, [client]),
+    isDisconnecting
+  };
+}
 function useCluster() {
   let { cluster, clusters } = useConnector(), client = useConnectorClient();
   if (!client)
@@ -196,7 +576,7 @@ function useCluster() {
   }, [cluster, clusters, setCluster]);
 }
 function useAccount() {
-  let { selectedAccount, accounts, connected, selectAccount } = useConnector(), [copied, setCopied] = useState(false), copyTimeoutRef = React.useRef(void 0), account = useMemo(
+  let { selectedAccount, accounts, connected, selectAccount } = useConnector(), [copied, setCopied] = useState(false), copyTimeoutRef = React2.useRef(void 0), account = useMemo(
     () => accounts.find((a) => a.address === selectedAccount) ?? null,
     [accounts, selectedAccount]
   ), formatted = useMemo(() => selectedAccount ? formatAddress(selectedAccount) : "", [selectedAccount]), copy = useCallback(async () => selectedAccount ? (copyTimeoutRef.current && clearTimeout(copyTimeoutRef.current), await copyAddressToClipboard(selectedAccount, {
@@ -208,7 +588,7 @@ function useAccount() {
     error: "empty_value" /* EMPTY_VALUE */,
     errorMessage: "No account selected"
   }, [selectedAccount]);
-  return React.useEffect(() => () => {
+  return React2.useEffect(() => () => {
     copyTimeoutRef.current && clearTimeout(copyTimeoutRef.current);
   }, []), useMemo(
     () => ({
@@ -229,6 +609,7 @@ function useWalletInfo() {
     () => wallets.map(
       (walletInfo) => ({
         name: walletInfo.wallet.name,
+        connectorId: createConnectorId(walletInfo.wallet.name),
         icon: walletInfo.wallet.icon,
         installed: walletInfo.installed,
         connectable: walletInfo.connectable
@@ -298,7 +679,7 @@ function useKitTransactionSigner() {
   };
 }
 var useGillTransactionSigner = useKitTransactionSigner;
-var logger2 = createLogger("useSolanaClient");
+var logger3 = createLogger("useSolanaClient");
 function useSolanaClient() {
   let { type } = useCluster(), connectorClient = useConnectorClient(), client = useMemo(() => {
     if (!type || !connectorClient) return null;
@@ -310,7 +691,7 @@ function useSolanaClient() {
         urlOrMoniker: type
       }) : null;
     } catch (error) {
-      return logger2.error("Failed to create Solana client", { error }), null;
+      return logger3.error("Failed to create Solana client", { error }), null;
     }
   }, [type, connectorClient]);
   return useMemo(
@@ -1645,7 +2026,7 @@ function DisconnectElement({
   onDisconnect,
   render
 }) {
-  let { disconnect, connecting } = useConnector(), [disconnecting, setDisconnecting] = React.useState(false), handleDisconnect = async () => {
+  let { disconnect, connecting } = useConnector(), [disconnecting, setDisconnecting] = React2.useState(false), handleDisconnect = async () => {
     setDisconnecting(true);
     try {
       await disconnect(), onDisconnect?.();
@@ -1889,7 +2270,7 @@ function ClusterElement({
   labels = {},
   render
 }) {
-  let { cluster, clusters, setCluster, isMainnet, isDevnet, isTestnet, isLocal } = useCluster(), [isOpen, setIsOpen] = React.useState(false);
+  let { cluster, clusters, setCluster, isMainnet, isDevnet, isTestnet, isLocal } = useCluster(), [isOpen, setIsOpen] = React2.useState(false);
   if (render)
     return /* @__PURE__ */ jsx(Fragment, { children: render({ cluster, clusters, setCluster, isMainnet, isDevnet, isTestnet, isLocal }) });
   if (!cluster) return null;
@@ -2096,14 +2477,32 @@ function WalletListElement({
   variant = "list",
   showStatus = true,
   onSelect,
+  onConnect,
   render,
   renderWallet
 }) {
   let { wallets, connecting } = useWalletInfo(), { select } = useConnector(), installedWallets = wallets.filter((w) => w.installed), displayWallets = installedOnly ? installedWallets : wallets, handleSelect = async (walletName) => {
     await select(walletName), onSelect?.(walletName);
+  }, handleConnectById = async (connectorId) => {
+    let wallet = wallets.find((w) => w.connectorId === connectorId);
+    if (!wallet) {
+      let availableConnectorIds = wallets.map((w) => w.connectorId);
+      console.warn(
+        `[WalletListElement] Wallet not found for connectorId: ${connectorId}. Available connectorIds (${availableConnectorIds.length}):`,
+        availableConnectorIds
+      );
+      return;
+    }
+    await select(wallet.name), onConnect?.(connectorId);
   };
   if (render)
-    return /* @__PURE__ */ jsx(Fragment, { children: render({ wallets, installedWallets, select: handleSelect, connecting }) });
+    return /* @__PURE__ */ jsx(Fragment, { children: render({
+      wallets,
+      installedWallets,
+      select: handleSelect,
+      connectById: handleConnectById,
+      connecting
+    }) });
   if (displayWallets.length === 0)
     return /* @__PURE__ */ jsx(
       "div",
@@ -2161,28 +2560,33 @@ function WalletListElement({
       className: `ck-wallet-list-block ck-wallet-list-block--grid ${className || ""}`,
       "data-slot": "wallet-list-element",
       "data-variant": "grid",
-      children: displayWallets.map((wallet) => renderWallet ? /* @__PURE__ */ jsx(React.Fragment, { children: renderWallet({
-        wallet,
-        select: () => handleSelect(wallet.name),
-        connecting
-      }) }, wallet.name) : /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: "ck-wallet-list-item ck-wallet-list-item--grid",
-          onClick: () => handleSelect(wallet.name),
-          disabled: connecting || !wallet.installed && installedOnly,
-          "data-slot": "wallet-list-item",
-          "data-wallet": wallet.name,
-          "data-installed": wallet.installed,
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "ck-wallet-list-item-icon", "data-slot": "wallet-list-item-icon", children: wallet.icon ? /* @__PURE__ */ jsx("img", { src: wallet.icon, alt: wallet.name }) : walletIcon }),
-            /* @__PURE__ */ jsx("span", { className: "ck-wallet-list-item-name", "data-slot": "wallet-list-item-name", children: wallet.name }),
-            showStatus && !wallet.installed && /* @__PURE__ */ jsx("span", { className: "ck-wallet-list-item-status", "data-slot": "wallet-list-item-status", children: "Not installed" })
-          ]
-        },
-        wallet.name
-      ))
+      children: displayWallets.map((wallet) => {
+        let handleWalletConnect = () => handleConnectById(wallet.connectorId);
+        return renderWallet ? /* @__PURE__ */ jsx(React2.Fragment, { children: renderWallet({
+          wallet,
+          select: handleWalletConnect,
+          connect: handleWalletConnect,
+          connecting
+        }) }, wallet.name) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ck-wallet-list-item ck-wallet-list-item--grid",
+            onClick: handleWalletConnect,
+            disabled: connecting || !wallet.installed && installedOnly,
+            "data-slot": "wallet-list-item",
+            "data-wallet": wallet.name,
+            "data-connector-id": wallet.connectorId,
+            "data-installed": wallet.installed,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "ck-wallet-list-item-icon", "data-slot": "wallet-list-item-icon", children: wallet.icon ? /* @__PURE__ */ jsx("img", { src: wallet.icon, alt: wallet.name }) : walletIcon }),
+              /* @__PURE__ */ jsx("span", { className: "ck-wallet-list-item-name", "data-slot": "wallet-list-item-name", children: wallet.name }),
+              showStatus && !wallet.installed && /* @__PURE__ */ jsx("span", { className: "ck-wallet-list-item-status", "data-slot": "wallet-list-item-status", children: "Not installed" })
+            ]
+          },
+          wallet.name
+        );
+      })
     }
   ) : variant === "compact" ? /* @__PURE__ */ jsx(
     "div",
@@ -2190,27 +2594,32 @@ function WalletListElement({
       className: `ck-wallet-list-block ck-wallet-list-block--compact ${className || ""}`,
       "data-slot": "wallet-list-element",
       "data-variant": "compact",
-      children: displayWallets.map((wallet) => renderWallet ? /* @__PURE__ */ jsx(React.Fragment, { children: renderWallet({
-        wallet,
-        select: () => handleSelect(wallet.name),
-        connecting
-      }) }, wallet.name) : /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: "ck-wallet-list-item ck-wallet-list-item--compact",
-          onClick: () => handleSelect(wallet.name),
-          disabled: connecting || !wallet.installed && installedOnly,
-          "data-slot": "wallet-list-item",
-          "data-wallet": wallet.name,
-          "data-installed": wallet.installed,
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "ck-wallet-list-item-icon", "data-slot": "wallet-list-item-icon", children: wallet.icon ? /* @__PURE__ */ jsx("img", { src: wallet.icon, alt: wallet.name }) : walletIcon }),
-            /* @__PURE__ */ jsx("span", { className: "ck-wallet-list-item-name", "data-slot": "wallet-list-item-name", children: wallet.name })
-          ]
-        },
-        wallet.name
-      ))
+      children: displayWallets.map((wallet) => {
+        let handleWalletConnect = () => handleConnectById(wallet.connectorId);
+        return renderWallet ? /* @__PURE__ */ jsx(React2.Fragment, { children: renderWallet({
+          wallet,
+          select: handleWalletConnect,
+          connect: handleWalletConnect,
+          connecting
+        }) }, wallet.name) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ck-wallet-list-item ck-wallet-list-item--compact",
+            onClick: handleWalletConnect,
+            disabled: connecting || !wallet.installed && installedOnly,
+            "data-slot": "wallet-list-item",
+            "data-wallet": wallet.name,
+            "data-connector-id": wallet.connectorId,
+            "data-installed": wallet.installed,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "ck-wallet-list-item-icon", "data-slot": "wallet-list-item-icon", children: wallet.icon ? /* @__PURE__ */ jsx("img", { src: wallet.icon, alt: wallet.name }) : walletIcon }),
+              /* @__PURE__ */ jsx("span", { className: "ck-wallet-list-item-name", "data-slot": "wallet-list-item-name", children: wallet.name })
+            ]
+          },
+          wallet.name
+        );
+      })
     }
   ) : /* @__PURE__ */ jsx(
     "div",
@@ -2218,54 +2627,59 @@ function WalletListElement({
       className: `ck-wallet-list-block ck-wallet-list-block--list ${className || ""}`,
       "data-slot": "wallet-list-element",
       "data-variant": "list",
-      children: displayWallets.map((wallet) => renderWallet ? /* @__PURE__ */ jsx(React.Fragment, { children: renderWallet({
-        wallet,
-        select: () => handleSelect(wallet.name),
-        connecting
-      }) }, wallet.name) : /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: "ck-wallet-list-item ck-wallet-list-item--list",
-          onClick: () => handleSelect(wallet.name),
-          disabled: connecting || !wallet.installed && installedOnly,
-          "data-slot": "wallet-list-item",
-          "data-wallet": wallet.name,
-          "data-installed": wallet.installed,
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "ck-wallet-list-item-icon", "data-slot": "wallet-list-item-icon", children: wallet.icon ? /* @__PURE__ */ jsx("img", { src: wallet.icon, alt: wallet.name }) : walletIcon }),
-            /* @__PURE__ */ jsxs("div", { className: "ck-wallet-list-item-info", "data-slot": "wallet-list-item-info", children: [
-              /* @__PURE__ */ jsx("span", { className: "ck-wallet-list-item-name", "data-slot": "wallet-list-item-name", children: wallet.name }),
-              showStatus && /* @__PURE__ */ jsx(
-                "span",
+      children: displayWallets.map((wallet) => {
+        let handleWalletConnect = () => handleConnectById(wallet.connectorId);
+        return renderWallet ? /* @__PURE__ */ jsx(React2.Fragment, { children: renderWallet({
+          wallet,
+          select: handleWalletConnect,
+          connect: handleWalletConnect,
+          connecting
+        }) }, wallet.name) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ck-wallet-list-item ck-wallet-list-item--list",
+            onClick: handleWalletConnect,
+            disabled: connecting || !wallet.installed && installedOnly,
+            "data-slot": "wallet-list-item",
+            "data-wallet": wallet.name,
+            "data-connector-id": wallet.connectorId,
+            "data-installed": wallet.installed,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "ck-wallet-list-item-icon", "data-slot": "wallet-list-item-icon", children: wallet.icon ? /* @__PURE__ */ jsx("img", { src: wallet.icon, alt: wallet.name }) : walletIcon }),
+              /* @__PURE__ */ jsxs("div", { className: "ck-wallet-list-item-info", "data-slot": "wallet-list-item-info", children: [
+                /* @__PURE__ */ jsx("span", { className: "ck-wallet-list-item-name", "data-slot": "wallet-list-item-name", children: wallet.name }),
+                showStatus && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "ck-wallet-list-item-status",
+                    "data-slot": "wallet-list-item-status",
+                    "data-installed": wallet.installed,
+                    children: wallet.installed ? "Detected" : "Not installed"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "svg",
                 {
-                  className: "ck-wallet-list-item-status",
-                  "data-slot": "wallet-list-item-status",
-                  "data-installed": wallet.installed,
-                  children: wallet.installed ? "Detected" : "Not installed"
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "ck-wallet-list-item-arrow",
+                  "data-slot": "wallet-list-item-arrow",
+                  children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
                 }
               )
-            ] }),
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                className: "ck-wallet-list-item-arrow",
-                "data-slot": "wallet-list-item-arrow",
-                children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
-              }
-            )
-          ]
-        },
-        wallet.name
-      ))
+            ]
+          },
+          wallet.name
+        );
+      })
     }
   );
 }
@@ -2302,7 +2716,7 @@ function injectStyles() {
   }
 }
 function SkeletonShine() {
-  return React.useEffect(() => {
+  return React2.useEffect(() => {
     injectStyles();
   }, []), /* @__PURE__ */ jsx("div", { className: "ck-skeleton-shine", "data-slot": "skeleton-shine" });
 }
@@ -2836,6 +3250,6 @@ function TokenListElement({
 }
 TokenListElement.displayName = "TokenListElement";
 
-export { AccountElement, AppProvider, BalanceElement, ClusterElement, ConnectorProvider, DisconnectElement, SkeletonShine, TokenListElement, TransactionHistoryElement, UnifiedProvider, WalletConnectProvider, WalletListElement, clearSharedQueryCache, clearTokenCaches, getBalanceQueryKey, getTokensQueryKey, getTransactionsQueryKey, getWalletAssetsQueryKey, invalidateSharedQuery, useAccount, useBalance, useCluster, useConnector, useConnectorClient, useGillSolanaClient, useGillTransactionSigner, useKitTransactionSigner, useSolanaClient, useTokens, useTransactionPreparer, useTransactionSigner, useTransactions, useWalletConnectUri, useWalletInfo };
-//# sourceMappingURL=chunk-WGZYKDXF.mjs.map
-//# sourceMappingURL=chunk-WGZYKDXF.mjs.map
+export { AccountElement, AppProvider, BalanceElement, ClusterElement, ConnectorErrorBoundary, ConnectorProvider, DisconnectElement, SkeletonShine, TokenListElement, TransactionHistoryElement, UnifiedProvider, WalletConnectProvider, WalletListElement, clearSharedQueryCache, clearTokenCaches, getBalanceQueryKey, getTokensQueryKey, getTransactionsQueryKey, getWalletAssetsQueryKey, invalidateSharedQuery, useAccount, useBalance, useCluster, useConnectWallet, useConnector, useConnectorClient, useDisconnectWallet, useGillSolanaClient, useGillTransactionSigner, useKitTransactionSigner, useSolanaClient, useTokens, useTransactionPreparer, useTransactionSigner, useTransactions, useWallet, useWalletConnectUri, useWalletConnectors, useWalletInfo, withErrorBoundary };
+//# sourceMappingURL=chunk-RTXUS5KG.mjs.map
+//# sourceMappingURL=chunk-RTXUS5KG.mjs.map