@algobright/solana-connector 0.1.0 → 0.1.2

package/dist/ConnectButton.mjs

@@ -2,13 +2,13 @@
 
 // src/components/ConnectButton/ConnectButton.tsx
 import { useState as useState4 } from "react";
-import styles9 from "./ConnectButton.module-UWQKSVTP.module.css";
+import styles9 from "./ConnectButton.module-O3M32YJK.module.css";
 import { useConnector as useConnector2 } from "@solana/connector";
 
 // src/components/shared/Button/Button.tsx
 import * as React from "react";
 import { Button as BaseButton } from "@base-ui/react/button";
-import styles from "./Button.module-7TPMDOJN.module.css";
+import styles from "./Button.module-HQNNX6IB.module.css";
 import { jsx } from "react/jsx-runtime";
 var Button = React.forwardRef(
   ({ className, variant = "default", size = "default", ...props }, ref) => {
@@ -31,7 +31,7 @@ var Button_default = Button;
 var Button_default2 = Button_default;
 
 // src/components/shared/Spinner/Spinner.tsx
-import classes from "./Spinner.module-G7GUQJZJ.module.css";
+import classes from "./Spinner.module-BLSWZSIL.module.css";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var Spinner = () => {
   return /* @__PURE__ */ jsx2("div", { className: classes.spinner });
@@ -45,13 +45,13 @@ var Spinner_default2 = Spinner_default;
 import { useConnector } from "@solana/connector";
 import { Check, ChevronLeft, Copy, ExternalLink, Wallet as Wallet2, X as X2 } from "lucide-react";
 import { useEffect, useState as useState2, useSyncExternalStore } from "react";
-import styles6 from "./WalletModal.module-PVV5PRXU.module.css";
+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-HCRT743N.module.css";
+import styles2 from "./Dialog.module-AYJTMDAD.module.css";
 import clsx from "clsx";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var Dialog = BaseDialog.Root;
@@ -116,7 +116,7 @@ DialogDescription.displayName = "DialogDescription";
 // src/components/shared/CustomQRCode/CustomQRCode.tsx
 import { useMemo } from "react";
 import QRCodeUtil from "qrcode";
-import styles3 from "./CustomQRCode.module-FOXENMZG.module.css";
+import styles3 from "./CustomQRCode.module-JW3JU3FX.module.css";
 import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function generateMatrix(value, errorCorrectionLevel) {
   const arr = Array.prototype.slice.call(QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data, 0);
@@ -369,7 +369,7 @@ 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-NXSN3MGI.module.css";
+import styles4 from "./Collapsible.module-F4VIL5FH.module.css";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var Collapsible = BaseCollapsible.Root;
 var CollapsibleTrigger = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
@@ -393,7 +393,7 @@ CollapsibleContent.displayName = "CollapsibleContent";
 
 // src/components/shared/Avatar/Avatar.tsx
 import { useState } from "react";
-import styles5 from "./Avatar.module-P7KEBP7R.module.css";
+import styles5 from "./Avatar.module-AACAT34D.module.css";
 import { Wallet } from "lucide-react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function Avatar({
@@ -812,7 +812,7 @@ 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-GV627ZLI.module.css";
+import styles7 from "./Menu.module-6ATSLATI.module.css";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Menu = BaseMenu.Root;
 var MenuPortal = BaseMenu.Portal;
@@ -869,12 +869,70 @@ 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-342MM7XM.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, 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).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) {
+    console.error("Error fetching token balance:", 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,24 @@ var networkColor = {
 };
 function WalletDropdown(props) {
   const client = useConnectorClient();
-  const { CN_ConnectButton, selectedAccount, walletIcon, walletName, theme, allowNetworkSwitch, showSolBalance } = props;
+  const {
+    CN_ConnectButton,
+    selectedAccount,
+    walletIcon,
+    walletName,
+    theme,
+    allowNetworkSwitch,
+    showSolBalance,
+    showDefaultToken
+  } = props;
   const [view, setView] = useState3("wallet");
   const [copied, setCopied] = useState3(false);
-  const fetching = useRef(false);
+  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 shortAddress = `${selectedAccount.slice(0, 4)}...${selectedAccount.slice(-4)}`;
   async function handleCopy() {
     try {
@@ -902,29 +972,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,
@@ -1018,7 +1095,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 +1148,6 @@ function WalletDropdown(props) {
     );
   }
   if (view === "network") {
-    console.count("Network view rendered");
     return /* @__PURE__ */ jsxs4(
       motion.div,
       {
@@ -1128,7 +1232,8 @@ 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();
@@ -1168,7 +1273,8 @@ function ConnectButton(props) {
           walletName: connector.name,
           allowNetworkSwitch: true,
           theme,
-          showSolBalance
+          showSolBalance,
+          showDefaultToken
         }
       ) }) }) })
     ] });