@algobright/solana-connector 0.1.1 → 0.1.3

package/dist/ConnectButton.mjs

@@ -2,15 +2,15 @@
 
 // src/components/ConnectButton/ConnectButton.tsx
 import { useState as useState4 } from "react";
-import styles9 from "./ConnectButton.module-O3M32YJK.module.css";
-import { useConnector as useConnector2 } from "@solana/connector";
+import styles9 from "./ConnectButton.module-AR6WQXQS.module.css";
+import { useConnector as useConnector3 } from "@solana/connector";
 
 // src/components/shared/Button/Button.tsx
-import * as React from "react";
+import { forwardRef } from "react";
 import { Button as BaseButton } from "@base-ui/react/button";
-import styles from "./Button.module-HQNNX6IB.module.css";
+import styles from "./Button.module-QCTUNBHA.module.css";
 import { jsx } from "react/jsx-runtime";
-var Button = React.forwardRef(
+var Button = forwardRef(
   ({ className, variant = "default", size = "default", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       BaseButton,
@@ -48,17 +48,17 @@ import { useEffect, useState as useState2, useSyncExternalStore } from "react";
 import styles6 from "./WalletModal.module-ZRTJGOQY.module.css";
 
 // src/components/shared/Dialog/Dialog.tsx
-import * as React2 from "react";
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import { X } from "lucide-react";
 import styles2 from "./Dialog.module-AYJTMDAD.module.css";
 import clsx from "clsx";
+import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var Dialog = BaseDialog.Root;
 var DialogTrigger = BaseDialog.Trigger;
 var DialogPortal = BaseDialog.Portal;
 var DialogClose = BaseDialog.Close;
-var DialogBackdrop = React2.forwardRef(
+var DialogBackdrop = forwardRef2(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
     BaseDialog.Backdrop,
     {
@@ -69,7 +69,7 @@ var DialogBackdrop = React2.forwardRef(
   )
 );
 DialogBackdrop.displayName = "DialogBackdrop";
-var DialogContent = React2.forwardRef(
+var DialogContent = forwardRef2(
   ({ className, children, theme, showCloseButton = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx3(DialogBackdrop, { "data-theme": theme }),
     /* @__PURE__ */ jsxs(
@@ -92,7 +92,7 @@ var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx3("div", { cl
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx3("div", { className: `${styles2.footer} ${className || ""}`, ...props });
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React2.forwardRef(
+var DialogTitle = forwardRef2(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
     BaseDialog.Title,
     {
@@ -103,7 +103,7 @@ var DialogTitle = React2.forwardRef(
   )
 );
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+var DialogDescription = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
   BaseDialog.Description,
   {
     ref,
@@ -367,12 +367,12 @@ var CustomQRCode_default = CustomQRCode;
 import { SiWalletconnect } from "react-icons/si";
 
 // src/components/shared/Collapsible/Collapsible.tsx
-import * as React3 from "react";
 import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import styles4 from "./Collapsible.module-F4VIL5FH.module.css";
+import { forwardRef as forwardRef3 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var Collapsible = BaseCollapsible.Root;
-var CollapsibleTrigger = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var CollapsibleTrigger = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
   BaseCollapsible.Trigger,
   {
     ref,
@@ -381,7 +381,7 @@ var CollapsibleTrigger = React3.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 CollapsibleTrigger.displayName = "CollapsibleTrigger";
-var CollapsibleContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var CollapsibleContent = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
   BaseCollapsible.Panel,
   {
     ref,
@@ -428,11 +428,9 @@ function WalletModal(props) {
     CN_Modal,
     theme = "light",
     open,
-    onOpenChange,
-    walletConnectUri,
-    onClearWalletConnectUri
+    onOpenChange
   } = props;
-  const { walletStatus: { status }, isConnecting, connectorId, connectors, connectWallet, disconnectWallet } = useConnector();
+  const { walletConnectUri, clearWalletConnectUri, walletStatus: { status }, isConnecting, connectorId, connectors, connectWallet, disconnectWallet } = useConnector();
   const [connectingConnectorId, setConnectingConnectorId] = useState2(null);
   const [isOtherWalletsOpen, setIsOtherWalletsOpen] = useState2(false);
   const [errorConnectorId, setErrorConnectorId] = useState2(null);
@@ -458,7 +456,7 @@ function WalletModal(props) {
   const walletConnectConnector = (_a = connectors.find((c) => c.name === "WalletConnect")) != null ? _a : null;
   const isWalletConnectFlow = !!walletConnectConnector && (connectingConnectorId === walletConnectConnector.id || status === "connecting" && connectorId === walletConnectConnector.id) || !!walletConnectUri;
   function cancelConnection() {
-    onClearWalletConnectUri == null ? void 0 : onClearWalletConnectUri();
+    clearWalletConnectUri == null ? void 0 : clearWalletConnectUri();
     setConnectingConnectorId(null);
     disconnectWallet().catch(() => {
     });
@@ -472,7 +470,7 @@ function WalletModal(props) {
     setConnectingConnectorId(connector.id);
     try {
       if (connector.name === "WalletConnect") {
-        onClearWalletConnectUri == null ? void 0 : onClearWalletConnectUri();
+        clearWalletConnectUri == null ? void 0 : clearWalletConnectUri();
       }
       await connectWallet(connector.id);
       localStorage.setItem("recentlyConnectedConnectorId", connector.id);
@@ -810,14 +808,14 @@ var WalletModal_default2 = WalletModal_default;
 import clsx4 from "clsx";
 
 // src/components/shared/Menu/Menu.tsx
-import * as React4 from "react";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 import styles7 from "./Menu.module-6ATSLATI.module.css";
+import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Menu = BaseMenu.Root;
 var MenuPortal = BaseMenu.Portal;
 var MenuGroup = BaseMenu.Group;
-var MenuTrigger = React4.forwardRef(
+var MenuTrigger = forwardRef4(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
     BaseMenu.Trigger,
     {
@@ -828,11 +826,11 @@ var MenuTrigger = React4.forwardRef(
   )
 );
 MenuTrigger.displayName = "MenuTrigger";
-var MenuPositioner = React4.forwardRef(
+var MenuPositioner = forwardRef4(
   ({ sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx8(BaseMenu.Positioner, { ref, sideOffset, ...props })
 );
 MenuPositioner.displayName = "MenuPositioner";
-var MenuPopup = React4.forwardRef(
+var MenuPopup = forwardRef4(
   ({ className, theme, ...props }, ref) => /* @__PURE__ */ jsx8(
     BaseMenu.Popup,
     {
@@ -844,7 +842,7 @@ var MenuPopup = React4.forwardRef(
   )
 );
 MenuPopup.displayName = "MenuPopup";
-var MenuItem = React4.forwardRef(
+var MenuItem = forwardRef4(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
     BaseMenu.Item,
     {
@@ -855,11 +853,11 @@ var MenuItem = React4.forwardRef(
   )
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = React4.forwardRef(
+var MenuSeparator = forwardRef4(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx8(BaseMenu.Separator, { ref, className: `${styles7.separator} ${className || ""}`, ...props })
 );
 MenuSeparator.displayName = "MenuSeparator";
-var MenuGroupLabel = React4.forwardRef(
+var MenuGroupLabel = forwardRef4(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx8(BaseMenu.GroupLabel, { ref, className: `${styles7.groupLabel} ${className || ""}`, ...props })
 );
 MenuGroupLabel.displayName = "MenuGroupLabel";
@@ -869,12 +867,72 @@ import { ChevronDown } from "lucide-react";
 
 // src/components/WalletDropdown/WalletDropdown.tsx
 import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
-import styles8 from "./WalletDropdown.module-A6KHWKGK.module.css";
+import { isAddress } from "@solana/kit";
+import styles8 from "./WalletDropdown.module-DOK7CUOQ.module.css";
 import { motion } from "motion/react";
 import { Check as Check2, ChevronLeft as ChevronLeft2, Copy as Copy2, Globe, LogOut, RefreshCw } from "lucide-react";
-import { address, ClusterElement, DisconnectElement, lamportsToSol, useConnectorClient } from "@solana/connector";
-import { createSolanaRpc } from "@solana/kit";
+import { ClusterElement, DisconnectElement, useConnector as useConnector2, useConnectorClient } from "@solana/connector";
 import { clsx as clsx3 } from "clsx";
+
+// src/utils/fetchBalance.tsx
+import { findAssociatedTokenPda } from "@solana-program/token";
+import { address, lamportsToSol } from "@solana/connector";
+import { createSolanaRpc } from "@solana/kit";
+async function getSolBalance(client, pubkey) {
+  let balance = 0;
+  try {
+    const rpcUrl = client.getRpcUrl();
+    if (!rpcUrl) {
+      console.error("RPC URL is not available from the ConnectorClient.");
+      return 0;
+    }
+    const pubkeyAddress = address(pubkey);
+    const rpc = createSolanaRpc(rpcUrl);
+    const balanceResponse = await rpc.getBalance(pubkeyAddress).send();
+    balance = lamportsToSol(balanceResponse.value);
+  } catch (error) {
+    console.error("Error fetching SOL balance:", error);
+  } finally {
+    return balance;
+  }
+}
+async function getTokenBalance(client, pubkey, mintAddress) {
+  var _a;
+  let balance = 0;
+  try {
+    const rpcUrl = client.getRpcUrl();
+    if (!rpcUrl) {
+      console.error("RPC URL is not available from the ConnectorClient.");
+      return 0;
+    }
+    const pubkeyAddress = address(pubkey);
+    const mintPubkey = address(mintAddress);
+    const rpc = createSolanaRpc(rpcUrl);
+    const mintInfo = await rpc.getAccountInfo(
+      mintPubkey,
+      { encoding: "base64" }
+    ).send();
+    const ownerProgram = (_a = mintInfo.value) == null ? void 0 : _a.owner;
+    if (!ownerProgram) {
+      throw new Error("Failed to fetch mint account info");
+    }
+    const tokenProgram = address(ownerProgram);
+    const [tokenPDA] = await findAssociatedTokenPda({
+      mint: mintPubkey,
+      owner: pubkeyAddress,
+      tokenProgram
+    });
+    const tokenBalance = await rpc.getTokenAccountBalance(tokenPDA).send();
+    if (tokenBalance.value) {
+      balance = parseFloat(tokenBalance.value.uiAmountString);
+    }
+  } catch (error) {
+  } finally {
+    return balance;
+  }
+}
+
+// src/components/WalletDropdown/WalletDropdown.tsx
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var networkColor = {
   "solana:mainnet": "#00c950",
@@ -884,12 +942,25 @@ var networkColor = {
 };
 function WalletDropdown(props) {
   const client = useConnectorClient();
-  const { CN_ConnectButton, selectedAccount, walletIcon, walletName, theme, allowNetworkSwitch, showSolBalance } = props;
+  const {
+    CN_DropdownMenu,
+    theme = "light",
+    allowNetworkSwitch = true,
+    showSolBalance = true,
+    showDefaultToken
+  } = props;
   const [view, setView] = useState3("wallet");
   const [copied, setCopied] = useState3(false);
-  const fetching = useRef(false);
+  const { account, connector } = useConnector2();
+  const fetchingSolBalance = useRef(false);
   const [isFetchingBalance, setIsFetchingBalance] = useState3(false);
+  const fetchingDefaultToken = useRef(false);
+  const [isFetchingDefaultTokenBalance, setIsFetchingDefaultTokenBalance] = useState3(false);
   const [solBalance, setSolBalance] = useState3(null);
+  const [defaultTokenBalance, setDefaultTokenBalance] = useState3(null);
+  const selectedAccount = account || "";
+  const walletName = (connector == null ? void 0 : connector.name) || "Unknown Wallet";
+  const walletIcon = (connector == null ? void 0 : connector.icon) || void 0;
   const shortAddress = `${selectedAccount.slice(0, 4)}...${selectedAccount.slice(-4)}`;
   async function handleCopy() {
     try {
@@ -902,29 +973,36 @@ function WalletDropdown(props) {
     }
   }
   async function fetchSolBalance() {
-    if (!client || fetching.current) return;
+    if (!client || fetchingSolBalance.current) return;
     setIsFetchingBalance(true);
-    fetching.current = true;
-    try {
-      const rpcUrl = client.getRpcUrl();
-      const pubkey = address(selectedAccount);
-      if (!rpcUrl) throw new Error("No RPC endpoint configured");
-      const rpc = createSolanaRpc(rpcUrl);
-      const solLamports = (await rpc.getBalance(pubkey).send()).value || 0;
-      const sol = lamportsToSol(solLamports);
-      setSolBalance(sol);
-    } catch (error) {
-      setSolBalance(0);
-    } finally {
-      setIsFetchingBalance(false);
-      fetching.current = false;
+    fetchingSolBalance.current = true;
+    const solBalance2 = await getSolBalance(client, selectedAccount);
+    setSolBalance(solBalance2);
+    setIsFetchingBalance(false);
+    fetchingSolBalance.current = false;
+  }
+  async function fetchDefaultTokenBalance() {
+    if (!showDefaultToken || !showDefaultToken.address || !client || fetchingDefaultToken.current) return;
+    const isValidAddress = isAddress(showDefaultToken.address);
+    if (!isValidAddress) {
+      console.error("Invalid default token address:", showDefaultToken);
+      return;
     }
+    setIsFetchingDefaultTokenBalance(true);
+    fetchingDefaultToken.current = true;
+    const tokenBalance = await getTokenBalance(client, selectedAccount, showDefaultToken.address);
+    setDefaultTokenBalance(tokenBalance);
+    setIsFetchingDefaultTokenBalance(false);
+    fetchingDefaultToken.current = false;
   }
   useEffect2(() => {
     if (showSolBalance && selectedAccount && client) {
       fetchSolBalance();
     }
-  }, [selectedAccount, client, showSolBalance]);
+    if (showDefaultToken && selectedAccount && client) {
+      fetchDefaultTokenBalance();
+    }
+  }, [selectedAccount, client, showSolBalance, showDefaultToken]);
   if (view === "wallet") {
     return /* @__PURE__ */ jsxs4(
       motion.div,
@@ -933,7 +1011,7 @@ function WalletDropdown(props) {
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         transition: { duration: 0.2 },
-        className: clsx3(styles8.WalletDropdown, CN_ConnectButton),
+        className: clsx3(styles8.WalletDropdown, CN_DropdownMenu),
         "data-theme": theme,
         children: [
           /* @__PURE__ */ jsxs4("div", { className: styles8.Header, children: [
@@ -1018,7 +1096,35 @@ function WalletDropdown(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx9("div", { className: styles8.balanceValue, children: isFetchingBalance ? /* @__PURE__ */ jsx9("div", { className: styles8.balanceLoading }) : solBalance !== null ? `${solBalance.toFixed(4)} SOL` : "-- SOL" })
+            /* @__PURE__ */ jsx9("div", { className: styles8.balanceValue, title: String(solBalance) || "0", children: isFetchingBalance ? /* @__PURE__ */ jsx9("div", { className: styles8.balanceLoading }) : solBalance !== null ? `${solBalance.toFixed(4)} SOL` : "-- SOL" })
+          ] }),
+          showDefaultToken && /* @__PURE__ */ jsxs4("div", { className: styles8.balanceSection, children: [
+            /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                className: styles8.balanceHeader,
+                children: [
+                  /* @__PURE__ */ jsx9("span", { className: styles8.balanceLabel, children: "Balance" }),
+                  /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      onClick: () => fetchDefaultTokenBalance(),
+                      disabled: isFetchingDefaultTokenBalance,
+                      title: "Refresh balance",
+                      className: styles8.refreshButton,
+                      "data-loading": isFetchingDefaultTokenBalance,
+                      children: /* @__PURE__ */ jsx9(
+                        RefreshCw,
+                        {
+                          className: styles8.refreshIcon
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx9("div", { className: styles8.balanceValue, title: String(defaultTokenBalance) || "0", children: isFetchingDefaultTokenBalance ? /* @__PURE__ */ jsx9("div", { className: styles8.balanceLoading }) : defaultTokenBalance !== null ? `${defaultTokenBalance.toFixed(4)} ${(showDefaultToken == null ? void 0 : showDefaultToken.symbol) || ""}` : `-- ${(showDefaultToken == null ? void 0 : showDefaultToken.symbol) || ""}` })
           ] }),
           /* @__PURE__ */ jsx9(
             DisconnectElement,
@@ -1043,7 +1149,6 @@ function WalletDropdown(props) {
     );
   }
   if (view === "network") {
-    console.count("Network view rendered");
     return /* @__PURE__ */ jsxs4(
       motion.div,
       {
@@ -1051,7 +1156,7 @@ function WalletDropdown(props) {
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         transition: { duration: 0.2 },
-        className: clsx3(styles8.WalletDropdown, CN_ConnectButton),
+        className: clsx3(styles8.WalletDropdown, CN_DropdownMenu),
         "data-theme": theme,
         children: [
           /* @__PURE__ */ jsxs4("div", { className: styles8.NetworkHeader, children: [
@@ -1074,7 +1179,7 @@ function WalletDropdown(props) {
             {
               render: ({ cluster, clusters, setCluster }) => {
                 const currentClusterId = (cluster == null ? void 0 : cluster.id) || "solana:mainnet";
-                return /* @__PURE__ */ jsx9("div", { className: styles8.networkOptions, children: clusters.map((network, index) => {
+                return /* @__PURE__ */ jsx9("div", { className: styles8.networkOptions, children: clusters.map((network) => {
                   const isSelected = currentClusterId === network.id;
                   return /* @__PURE__ */ jsxs4(
                     "div",
@@ -1128,10 +1233,11 @@ function ConnectButton(props) {
     CN_ConnectButton,
     connectText = "Connect Wallet",
     connectingText = "Connecting...",
-    showSolBalance = false
+    showSolBalance = false,
+    showDefaultToken
   } = props;
   const [isModalOpen, setIsModalOpen] = useState4(false);
-  const { isConnected, isConnecting, account, connector, walletConnectUri, clearWalletConnectUri } = useConnector2();
+  const { isConnected, isConnecting, account, connector, walletConnectUri, clearWalletConnectUri } = useConnector3();
   if (isConnected && account && connector) {
     const shortAddress = `${account.slice(0, 4)}...${account.slice(-4)}`;
     const walletIcon = connector.icon || void 0;
@@ -1162,13 +1268,11 @@ function ConnectButton(props) {
       /* @__PURE__ */ jsx10(MenuPortal, { children: /* @__PURE__ */ jsx10(MenuPositioner, { sideOffset: 8, align: "end", children: /* @__PURE__ */ jsx10(MenuPopup, { theme, children: /* @__PURE__ */ jsx10(
         WalletDropdown_default2,
         {
-          CN_ConnectButton: CN_DropdownMenu,
-          selectedAccount: account,
-          walletIcon,
-          walletName: connector.name,
+          CN_DropdownMenu,
           allowNetworkSwitch: true,
           theme,
-          showSolBalance
+          showSolBalance,
+          showDefaultToken
         }
       ) }) }) })
     ] });
@@ -1199,9 +1303,7 @@ function ConnectButton(props) {
       {
         theme,
         open: isModalOpen,
-        onOpenChange,
-        walletConnectUri,
-        onClearWalletConnectUri: clearWalletConnectUri
+        onOpenChange
       }
     )
   ] });