@algobright/solana-connector-kit 1.0.0

package/dist/WalletDropdown.js

@@ -0,0 +1,346 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/WalletDropdown/index.ts
+var WalletDropdown_exports = {};
+__export(WalletDropdown_exports, {
+  default: () => WalletDropdown_default2
+});
+module.exports = __toCommonJS(WalletDropdown_exports);
+
+// src/components/WalletDropdown/WalletDropdown.tsx
+var import_react2 = require("react");
+var import_WalletDropdown = __toESM(require("./WalletDropdown.module-342MM7XM.module.css"));
+var import_react3 = require("motion/react");
+
+// src/components/shared/Avatar/Avatar.tsx
+var import_react = require("react");
+var import_Avatar = __toESM(require("./Avatar.module-P7KEBP7R.module.css"));
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Avatar({
+  height,
+  width,
+  src,
+  alt,
+  theme = "light"
+}) {
+  const [hasError, setHasError] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_Avatar.default.avatar, "data-theme": theme, children: src && !hasError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      height,
+      width,
+      src,
+      alt: alt || "Avatar",
+      onError: () => setHasError(true)
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_Avatar.default.fallback, style: { height, width }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Wallet, {}) }) });
+}
+
+// src/components/shared/Avatar/index.ts
+var Avatar_default = Avatar;
+
+// src/components/WalletDropdown/WalletDropdown.tsx
+var import_lucide_react2 = require("lucide-react");
+
+// src/components/shared/Button/Button.tsx
+var React = __toESM(require("react"));
+var import_button = require("@base-ui/react/button");
+var import_Button = __toESM(require("./Button.module-7TPMDOJN.module.css"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = React.forwardRef(
+  ({ className, variant = "default", size = "default", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_button.Button,
+      {
+        ref,
+        className: `${import_Button.default.button} ${className || ""}`,
+        "data-variant": variant,
+        "data-size": size,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Button_default = Button;
+
+// src/components/shared/Button/index.ts
+var Button_default2 = Button_default;
+
+// src/components/WalletDropdown/WalletDropdown.tsx
+var import_connector = require("@solana/connector");
+var import_kit = require("@solana/kit");
+var import_clsx = require("clsx");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var networkColor = {
+  "solana:mainnet": "#00c950",
+  "solana:devnet": "#2b7fff",
+  "solana:testnet": "#f0b100",
+  "solana:localnet": "#ff3b3b"
+};
+function WalletDropdown(props) {
+  const client = (0, import_connector.useConnectorClient)();
+  const { CN_ConnectButton, selectedAccount, walletIcon, walletName, theme, allowNetworkSwitch, showSolBalance } = props;
+  const [view, setView] = (0, import_react2.useState)("wallet");
+  const [copied, setCopied] = (0, import_react2.useState)(false);
+  const fetching = (0, import_react2.useRef)(false);
+  const [isFetchingBalance, setIsFetchingBalance] = (0, import_react2.useState)(false);
+  const [solBalance, setSolBalance] = (0, import_react2.useState)(null);
+  const shortAddress = `${selectedAccount.slice(0, 4)}...${selectedAccount.slice(-4)}`;
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(selectedAccount);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (error) {
+      setCopied(false);
+      console.error("Failed to copy to clipboard:", error);
+    }
+  }
+  async function fetchSolBalance() {
+    if (!client || fetching.current) return;
+    setIsFetchingBalance(true);
+    fetching.current = true;
+    try {
+      const rpcUrl = client.getRpcUrl();
+      const pubkey = (0, import_connector.address)(selectedAccount);
+      if (!rpcUrl) throw new Error("No RPC endpoint configured");
+      const rpc = (0, import_kit.createSolanaRpc)(rpcUrl);
+      const solLamports = (await rpc.getBalance(pubkey).send()).value || 0;
+      const sol = (0, import_connector.lamportsToSol)(solLamports);
+      setSolBalance(sol);
+    } catch (error) {
+      setSolBalance(0);
+    } finally {
+      setIsFetchingBalance(false);
+      fetching.current = false;
+    }
+  }
+  (0, import_react2.useEffect)(() => {
+    if (showSolBalance && selectedAccount && client) {
+      fetchSolBalance();
+    }
+  }, [selectedAccount, client, showSolBalance]);
+  if (view === "wallet") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_react3.motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2 },
+        className: (0, import_clsx.clsx)(import_WalletDropdown.default.WalletDropdown, CN_ConnectButton),
+        "data-theme": theme,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: import_WalletDropdown.default.Header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: import_WalletDropdown.default.addressAndAvatar, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                Avatar_default,
+                {
+                  width: 48,
+                  height: 48,
+                  src: walletIcon,
+                  alt: walletName
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: import_WalletDropdown.default.address, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: import_WalletDropdown.default.shortAddress, children: shortAddress }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: import_WalletDropdown.default.walletName, children: walletName })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: import_WalletDropdown.default.actions, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                Button_default2,
+                {
+                  type: "button",
+                  onClick: handleCopy,
+                  variant: "outline",
+                  size: "icon",
+                  className: "rounded-full",
+                  title: copied ? "Copied!" : "Copy address",
+                  children: copied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Check, { className: import_WalletDropdown.default.checkIcon }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Copy, {})
+                }
+              ),
+              allowNetworkSwitch && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_connector.ClusterElement,
+                {
+                  render: ({ cluster }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    Button_default2,
+                    {
+                      type: "button",
+                      variant: "outline",
+                      size: "icon",
+                      onClick: () => setView("network"),
+                      title: `Network: ${(cluster == null ? void 0 : cluster.label) || "Unknown"}`,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Globe, {}),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "span",
+                          {
+                            className: import_WalletDropdown.default.networkIndicator,
+                            style: { background: networkColor[(cluster == null ? void 0 : cluster.id) || "solana:mainnet"] }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ] })
+          ] }),
+          showSolBalance && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: import_WalletDropdown.default.balanceSection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                className: import_WalletDropdown.default.balanceHeader,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: import_WalletDropdown.default.balanceLabel, children: "Balance" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "button",
+                    {
+                      onClick: () => fetchSolBalance(),
+                      disabled: isFetchingBalance,
+                      title: "Refresh balance",
+                      className: import_WalletDropdown.default.refreshButton,
+                      "data-loading": isFetchingBalance,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        import_lucide_react2.RefreshCw,
+                        {
+                          className: import_WalletDropdown.default.refreshIcon
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: import_WalletDropdown.default.balanceValue, children: isFetchingBalance ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: import_WalletDropdown.default.balanceLoading }) : solBalance !== null ? `${solBalance.toFixed(4)} SOL` : "-- SOL" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_connector.DisconnectElement,
+            {
+              render: ({ disconnect, disconnecting }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                Button_default2,
+                {
+                  variant: "default",
+                  className: import_WalletDropdown.default.disconnectButton,
+                  onClick: disconnect,
+                  disabled: disconnecting,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.LogOut, { className: import_WalletDropdown.default.disconnectIcon }),
+                    disconnecting ? "Disconnecting..." : "Disconnect"
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (view === "network") {
+    console.count("Network view rendered");
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_react3.motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2 },
+        className: (0, import_clsx.clsx)(import_WalletDropdown.default.WalletDropdown, CN_ConnectButton),
+        "data-theme": theme,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: import_WalletDropdown.default.NetworkHeader, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Button_default2,
+              {
+                type: "button",
+                variant: "outline",
+                size: "icon",
+                onClick: () => setView("wallet"),
+                title: `Network: Back to Wallet`,
+                className: import_WalletDropdown.default.backButton,
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronLeft, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Network Settings" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_connector.ClusterElement,
+            {
+              render: ({ cluster, clusters, setCluster }) => {
+                const currentClusterId = (cluster == null ? void 0 : cluster.id) || "solana:mainnet";
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: import_WalletDropdown.default.networkOptions, children: clusters.map((network, index) => {
+                  const isSelected = currentClusterId === network.id;
+                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    "div",
+                    {
+                      role: "button",
+                      tabIndex: 0,
+                      onClick: () => setCluster(network.id),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          setCluster(network.id);
+                        }
+                      },
+                      className: import_WalletDropdown.default.networkButton,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: import_WalletDropdown.default.networkName, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "span",
+                            {
+                              className: import_WalletDropdown.default.networkColor,
+                              style: { background: networkColor[network.id] }
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: import_WalletDropdown.default.networkLabel, children: network.label })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: import_WalletDropdown.default.checkMark, "data-selected": isSelected, children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Check, {}) })
+                      ]
+                    },
+                    network.id
+                  );
+                }) });
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+var WalletDropdown_default = WalletDropdown;
+
+// src/components/WalletDropdown/index.ts
+var WalletDropdown_default2 = WalletDropdown_default;
+//# sourceMappingURL=WalletDropdown.js.map

package/dist/WalletDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/WalletDropdown/index.ts","../src/components/WalletDropdown/WalletDropdown.tsx","../src/components/shared/Avatar/Avatar.tsx","../src/components/shared/Avatar/index.ts","../src/components/shared/Button/Button.tsx","../src/components/shared/Button/index.ts"],"sourcesContent":["import WalletDropdown from './WalletDropdown';\r\n\r\n\r\nexport default WalletDropdown","import { useEffect, useRef, useState } from 'react'\r\nimport styles from './WalletDropdown.module.css'\r\nimport { motion } from 'motion/react';\r\nimport Avatar from '@shared/Avatar';\r\nimport { Check, ChevronLeft, Copy, Globe, LogOut, RefreshCw } from 'lucide-react';\r\nimport Button from '@shared/Button';\r\nimport { address, BalanceElement, ClusterElement, DisconnectElement, lamportsToSol, useCluster, useConnectorClient } from '@solana/connector';\r\nimport { createSolanaRpc } from '@solana/kit';\r\nimport { clsx } from 'clsx';\r\n\r\ninterface WalletDropdownProps {\r\n    CN_ConnectButton?: string;\r\n    selectedAccount: string;\r\n    walletIcon?: string;\r\n    walletName: string;\r\n    theme?: 'light' | 'dark';\r\n\r\n    allowNetworkSwitch?: boolean;\r\n    showSolBalance?: boolean;\r\n}\r\n\r\ntype DropdownView = 'wallet' | 'network';\r\n\r\nconst networkColor: Record<string, string> = {\r\n    'solana:mainnet': '#00c950',\r\n    'solana:devnet': '#2b7fff',\r\n    'solana:testnet': '#f0b100',\r\n    'solana:localnet': '#ff3b3b',\r\n};\r\n\r\nexport function WalletDropdown(props: WalletDropdownProps) {\r\n    const client = useConnectorClient();\r\n\r\n    const { CN_ConnectButton, selectedAccount, walletIcon, walletName, theme, allowNetworkSwitch, showSolBalance } = props\r\n\r\n    const [view, setView] = useState<DropdownView>('wallet');\r\n    const [copied, setCopied] = useState(false);\r\n\r\n    const fetching = useRef(false);\r\n    const [isFetchingBalance, setIsFetchingBalance] = useState(false);\r\n    const [solBalance, setSolBalance] = useState<number | null>(null);\r\n\r\n    const shortAddress = `${selectedAccount.slice(0, 4)}...${selectedAccount.slice(-4)}`;\r\n\r\n    async function handleCopy() {\r\n        try {\r\n            await navigator.clipboard.writeText(selectedAccount);\r\n            setCopied(true);\r\n            setTimeout(() => setCopied(false), 2000);\r\n        } catch (error) {\r\n            setCopied(false);\r\n            console.error('Failed to copy to clipboard:', error);\r\n        }\r\n    }\r\n\r\n    async function fetchSolBalance() {\r\n        if (!client || fetching.current) return;\r\n        setIsFetchingBalance(true);\r\n        fetching.current = true;\r\n        try {\r\n            const rpcUrl = client.getRpcUrl();\r\n            const pubkey = address(selectedAccount);\r\n            if (!rpcUrl) throw new Error('No RPC endpoint configured');\r\n            const rpc = createSolanaRpc(rpcUrl);\r\n            const solLamports = (await rpc.getBalance(pubkey).send()).value || 0;\r\n            const sol = lamportsToSol(solLamports);\r\n            setSolBalance(sol);\r\n\r\n        } catch (error) {\r\n            setSolBalance(0);\r\n        } finally {\r\n            setIsFetchingBalance(false);\r\n            fetching.current = false;\r\n        }\r\n    }\r\n\r\n    useEffect(() => {\r\n        if (showSolBalance && selectedAccount && client) {\r\n            fetchSolBalance();\r\n        }\r\n    }, [selectedAccount, client, showSolBalance]);\r\n\r\n    if (view === 'wallet') {\r\n        return (\r\n            <motion.div\r\n                initial={{ opacity: 0 }}\r\n                animate={{ opacity: 1 }}\r\n                exit={{ opacity: 0 }}\r\n                transition={{ duration: 0.2 }}\r\n                className={clsx(styles.WalletDropdown, CN_ConnectButton)}\r\n                data-theme={theme}\r\n            >\r\n                {/* Header with Avatar and Address */}\r\n                <div className={styles.Header}>\r\n                    <div className={styles.addressAndAvatar}>\r\n                        <Avatar\r\n                            width={48}\r\n                            height={48}\r\n                            src={walletIcon}\r\n                            alt={walletName}\r\n                        />\r\n                        <div className={styles.address}>\r\n                            <span className={styles.shortAddress}>{shortAddress}</span>\r\n                            <span className={styles.walletName}>{walletName}</span>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div className={styles.actions}>\r\n                        <Button\r\n                            type=\"button\"\r\n                            onClick={handleCopy}\r\n                            variant=\"outline\"\r\n                            size=\"icon\"\r\n                            className=\"rounded-full\"\r\n                            title={copied ? 'Copied!' : 'Copy address'}\r\n                        >\r\n                            {copied ?\r\n                                <Check className={styles.checkIcon} /> :\r\n                                <Copy />\r\n                            }\r\n                        </Button>\r\n\r\n                        {/* Network Selector Globe Button */}\r\n                        {allowNetworkSwitch && (\r\n                            <ClusterElement\r\n                                render={({ cluster }) => (\r\n                                    <Button\r\n                                        type=\"button\"\r\n                                        variant=\"outline\"\r\n                                        size=\"icon\"\r\n                                        onClick={() => setView('network')}\r\n                                        title={`Network: ${cluster?.label || 'Unknown'}`}\r\n                                    >\r\n                                        <Globe />\r\n                                        <span\r\n                                            className={styles.networkIndicator}\r\n                                            style={{ background: networkColor[cluster?.id || 'solana:mainnet'] }}\r\n                                        />\r\n                                    </Button>\r\n                                )}\r\n                            />\r\n                        )}\r\n                    </div>\r\n                </div>\r\n\r\n                {showSolBalance && (\r\n                    <div className={styles.balanceSection}>\r\n                        <div\r\n                            className={styles.balanceHeader}\r\n                        >\r\n                            <span className={styles.balanceLabel}>Balance</span>\r\n                            <button\r\n                                onClick={() => fetchSolBalance()}\r\n                                disabled={isFetchingBalance}\r\n                                title=\"Refresh balance\"\r\n                                className={styles.refreshButton}\r\n                                data-loading={isFetchingBalance}\r\n                            >\r\n                                <RefreshCw\r\n                                    className={styles.refreshIcon}\r\n                                />\r\n                            </button>\r\n                        </div>\r\n                        <div className={styles.balanceValue}>\r\n                            {isFetchingBalance ? (\r\n                                <div className={styles.balanceLoading} />\r\n                            ) : solBalance !== null ? (\r\n                                `${solBalance.toFixed(4)} SOL`\r\n                            ) : (\r\n                                '-- SOL'\r\n                            )}\r\n                        </div>\r\n                    </div>\r\n                )}\r\n\r\n                <DisconnectElement\r\n                    render={({ disconnect, disconnecting }) => (\r\n                        <Button\r\n                            variant=\"default\"\r\n                            className={styles.disconnectButton}\r\n                            onClick={disconnect}\r\n                            disabled={disconnecting}\r\n                        >\r\n                            <LogOut className={styles.disconnectIcon} />\r\n                            {disconnecting ? 'Disconnecting...' : 'Disconnect'}\r\n                        </Button>\r\n                    )}\r\n                />\r\n            </motion.div>\r\n        )\r\n    }\r\n\r\n    //network switch view\r\n    if (view === 'network') {\r\n        console.count('Network view rendered');\r\n        return (\r\n            <motion.div\r\n                initial={{ opacity: 0 }}\r\n                animate={{ opacity: 1 }}\r\n                exit={{ opacity: 0 }}\r\n                transition={{ duration: 0.2 }}\r\n                className={clsx(styles.WalletDropdown, CN_ConnectButton)}\r\n                data-theme={theme}\r\n            >\r\n                {/* Header */}\r\n                <div className={styles.NetworkHeader}>\r\n                    <Button\r\n                        type=\"button\"\r\n                        variant=\"outline\"\r\n                        size=\"icon\"\r\n                        onClick={() => setView('wallet')}\r\n                        title={`Network: Back to Wallet`}\r\n                        className={styles.backButton}\r\n                    >\r\n                        <ChevronLeft />\r\n                    </Button>\r\n                    <span>Network Settings</span>\r\n                </div>\r\n\r\n                {/* Network Options */}\r\n                <ClusterElement\r\n                    render={({ cluster, clusters, setCluster }) => {\r\n                        const currentClusterId = (cluster as { id?: string })?.id || 'solana:mainnet';\r\n                        return (\r\n                            <div className={styles.networkOptions}>\r\n                                {clusters.map((network, index) => {\r\n                                    const isSelected = currentClusterId === network.id;\r\n                                    return (\r\n                                        <div\r\n                                            key={network.id}\r\n                                            role=\"button\"\r\n                                            tabIndex={0}\r\n                                            onClick={() => setCluster(network.id)}\r\n                                            onKeyDown={e => {\r\n                                                if (e.key === 'Enter' || e.key === ' ') {\r\n                                                    e.preventDefault();\r\n                                                    setCluster(network.id);\r\n                                                }\r\n                                            }}\r\n                                            className={styles.networkButton}\r\n                                        >\r\n                                            <div className={styles.networkName}>\r\n                                                <span\r\n                                                    className={styles.networkColor}\r\n                                                    style={{ background: networkColor[network.id] }}\r\n                                                />\r\n                                                <span className={styles.networkLabel}>{network.label}</span>\r\n                                            </div>\r\n                                            <div className={styles.checkMark} data-selected={isSelected}>\r\n                                                {isSelected && <Check />}\r\n                                            </div>\r\n                                        </div>\r\n                                    );\r\n                                })}\r\n                            </div>\r\n                        );\r\n                    }}\r\n                />\r\n            </motion.div>\r\n        )\r\n    }\r\n}\r\n\r\nexport default WalletDropdown","import { useState } from 'react';\r\nimport styles from './Avatar.module.css';\r\nimport { Wallet } from 'lucide-react';\r\ninterface AvatarProps {\r\n    height?: number | string;\r\n    width?: number | string;\r\n    src?: string;\r\n    alt?: string;\r\n    theme?: 'light' | 'dark';\r\n}\r\nexport function Avatar({\r\n    height,\r\n    width,\r\n    src,\r\n    alt,\r\n    theme = 'light',\r\n}: AvatarProps) {\r\n    const [hasError, setHasError] = useState(false);\r\n    return (\r\n        <div className={styles.avatar} data-theme={theme}>\r\n            {src && !hasError ? (\r\n                <img\r\n                    height={height}\r\n                    width={width}\r\n                    src={src}\r\n                    alt={alt || \"Avatar\"}\r\n                    onError={() => setHasError(true)}\r\n                />\r\n            ) : (\r\n                <div className={styles.fallback} style={{ height, width }}>\r\n                    <Wallet />\r\n                </div>\r\n            )}\r\n        </div>\r\n    );\r\n}\r\n","import { Avatar } from './Avatar';\r\n\r\nexport default Avatar;","'use client';\r\n\r\nimport * as React from 'react';\r\nimport { Button as BaseButton } from '@base-ui/react/button';\r\nimport styles from './Button.module.css';\r\n\r\n// 1. Define Types\r\ntype ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';\r\ntype ButtonSize = 'default' | 'sm' | 'lg' | 'icon';\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n    variant?: ButtonVariant;\r\n    size?: ButtonSize;\r\n}\r\n\r\n// 2. The Component\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n    ({ className, variant = 'default', size = 'default', ...props }, ref) => {\r\n        return (\r\n            <BaseButton\r\n                ref={ref}\r\n\r\n                className={`${styles.button} ${className || ''}`}\r\n                data-variant={variant}\r\n                data-size={size}\r\n\r\n                {...props}\r\n            />\r\n        );\r\n    }\r\n);\r\nButton.displayName = 'Button';\r\n\r\nexport default Button;","import Button from \"./Button\";\r\n\r\nexport default Button;"],"mappings":"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","names":["WalletDropdown_default","import_react","styles","import_lucide_react","import_jsx_runtime","BaseButton","styles","Button_default","import_jsx_runtime","styles","Button_default","WalletDropdown_default"]}