@algobright/solana-connector 0.1.1 → 0.1.2

package/dist/ConnectButton.d.mts

@@ -8,6 +8,10 @@ interface ConnectButtonProps {
     connectText?: string;
     connectingText?: string;
     showSolBalance?: boolean;
+    showDefaultToken?: {
+        address: string;
+        symbol: string;
+    };
 }
 declare function ConnectButton(props: ConnectButtonProps): react_jsx_runtime.JSX.Element;
 

package/dist/ConnectButton.d.ts

@@ -8,6 +8,10 @@ interface ConnectButtonProps {
     connectText?: string;
     connectingText?: string;
     showSolBalance?: boolean;
+    showDefaultToken?: {
+        address: string;
+        symbol: string;
+    };
 }
 declare function ConnectButton(props: ConnectButtonProps): react_jsx_runtime.JSX.Element;
 

package/dist/ConnectButton.js

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(ConnectButton_exports);
 // src/components/ConnectButton/ConnectButton.tsx
 var import_react6 = require("react");
 var import_ConnectButton = __toESM(require("./ConnectButton.module-O3M32YJK.module.css"));
-var import_connector3 = require("@solana/connector");
+var import_connector4 = require("@solana/connector");
 
 // src/components/shared/Button/Button.tsx
 var React = __toESM(require("react"));
@@ -904,12 +904,70 @@ var import_lucide_react5 = require("lucide-react");
 
 // src/components/WalletDropdown/WalletDropdown.tsx
 var import_react4 = require("react");
-var import_WalletDropdown = __toESM(require("./WalletDropdown.module-A6KHWKGK.module.css"));
+var import_kit2 = require("@solana/kit");
+var import_WalletDropdown = __toESM(require("./WalletDropdown.module-DOK7CUOQ.module.css"));
 var import_react5 = require("motion/react");
 var import_lucide_react4 = require("lucide-react");
+var import_connector3 = require("@solana/connector");
+var import_clsx3 = require("clsx");
+
+// src/utils/fetchBalance.tsx
+var import_token = require("@solana-program/token");
 var import_connector2 = require("@solana/connector");
 var import_kit = require("@solana/kit");
-var import_clsx3 = require("clsx");
+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 = (0, import_connector2.address)(pubkey);
+    const rpc = (0, import_kit.createSolanaRpc)(rpcUrl);
+    const balanceResponse = await rpc.getBalance(pubkeyAddress).send();
+    balance = (0, import_connector2.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 = (0, import_connector2.address)(pubkey);
+    const mintPubkey = (0, import_connector2.address)(mintAddress);
+    const rpc = (0, import_kit.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 = (0, import_connector2.address)(ownerProgram);
+    const [tokenPDA] = await (0, import_token.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
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var networkColor = {
   "solana:mainnet": "#00c950",
@@ -918,13 +976,25 @@ var networkColor = {
   "solana:localnet": "#ff3b3b"
 };
 function WalletDropdown(props) {
-  const client = (0, import_connector2.useConnectorClient)();
-  const { CN_ConnectButton, selectedAccount, walletIcon, walletName, theme, allowNetworkSwitch, showSolBalance } = props;
+  const client = (0, import_connector3.useConnectorClient)();
+  const {
+    CN_ConnectButton,
+    selectedAccount,
+    walletIcon,
+    walletName,
+    theme,
+    allowNetworkSwitch,
+    showSolBalance,
+    showDefaultToken
+  } = props;
   const [view, setView] = (0, import_react4.useState)("wallet");
   const [copied, setCopied] = (0, import_react4.useState)(false);
-  const fetching = (0, import_react4.useRef)(false);
+  const fetchingSolBalance = (0, import_react4.useRef)(false);
   const [isFetchingBalance, setIsFetchingBalance] = (0, import_react4.useState)(false);
+  const fetchingDefaultToken = (0, import_react4.useRef)(false);
+  const [isFetchingDefaultTokenBalance, setIsFetchingDefaultTokenBalance] = (0, import_react4.useState)(false);
   const [solBalance, setSolBalance] = (0, import_react4.useState)(null);
+  const [defaultTokenBalance, setDefaultTokenBalance] = (0, import_react4.useState)(null);
   const shortAddress = `${selectedAccount.slice(0, 4)}...${selectedAccount.slice(-4)}`;
   async function handleCopy() {
     try {
@@ -937,29 +1007,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 = (0, import_connector2.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_connector2.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 = (0, import_kit2.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;
   }
   (0, import_react4.useEffect)(() => {
     if (showSolBalance && selectedAccount && client) {
       fetchSolBalance();
     }
-  }, [selectedAccount, client, showSolBalance]);
+    if (showDefaultToken && selectedAccount && client) {
+      fetchDefaultTokenBalance();
+    }
+  }, [selectedAccount, client, showSolBalance, showDefaultToken]);
   if (view === "wallet") {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       import_react5.motion.div,
@@ -1001,7 +1078,7 @@ function WalletDropdown(props) {
                 }
               ),
               allowNetworkSwitch && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                import_connector2.ClusterElement,
+                import_connector3.ClusterElement,
                 {
                   render: ({ cluster }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                     Button_default2,
@@ -1053,10 +1130,38 @@ function WalletDropdown(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: import_WalletDropdown.default.balanceValue, children: isFetchingBalance ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: import_WalletDropdown.default.balanceLoading }) : solBalance !== null ? `${solBalance.toFixed(4)} SOL` : "-- SOL" })
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: import_WalletDropdown.default.balanceValue, title: String(solBalance) || "0", children: isFetchingBalance ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: import_WalletDropdown.default.balanceLoading }) : solBalance !== null ? `${solBalance.toFixed(4)} SOL` : "-- SOL" })
+          ] }),
+          showDefaultToken && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: import_WalletDropdown.default.balanceSection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "div",
+              {
+                className: import_WalletDropdown.default.balanceHeader,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: import_WalletDropdown.default.balanceLabel, children: "Balance" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "button",
+                    {
+                      onClick: () => fetchDefaultTokenBalance(),
+                      disabled: isFetchingDefaultTokenBalance,
+                      title: "Refresh balance",
+                      className: import_WalletDropdown.default.refreshButton,
+                      "data-loading": isFetchingDefaultTokenBalance,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        import_lucide_react4.RefreshCw,
+                        {
+                          className: import_WalletDropdown.default.refreshIcon
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: import_WalletDropdown.default.balanceValue, title: String(defaultTokenBalance) || "0", children: isFetchingDefaultTokenBalance ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: import_WalletDropdown.default.balanceLoading }) : defaultTokenBalance !== null ? `${defaultTokenBalance.toFixed(4)} ${(showDefaultToken == null ? void 0 : showDefaultToken.symbol) || ""}` : `-- ${(showDefaultToken == null ? void 0 : showDefaultToken.symbol) || ""}` })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            import_connector2.DisconnectElement,
+            import_connector3.DisconnectElement,
             {
               render: ({ disconnect, disconnecting }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 Button_default2,
@@ -1078,7 +1183,6 @@ function WalletDropdown(props) {
     );
   }
   if (view === "network") {
-    console.count("Network view rendered");
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       import_react5.motion.div,
       {
@@ -1105,7 +1209,7 @@ function WalletDropdown(props) {
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Network Settings" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            import_connector2.ClusterElement,
+            import_connector3.ClusterElement,
             {
               render: ({ cluster, clusters, setCluster }) => {
                 const currentClusterId = (cluster == null ? void 0 : cluster.id) || "solana:mainnet";
@@ -1163,10 +1267,11 @@ function ConnectButton(props) {
     CN_ConnectButton,
     connectText = "Connect Wallet",
     connectingText = "Connecting...",
-    showSolBalance = false
+    showSolBalance = false,
+    showDefaultToken
   } = props;
   const [isModalOpen, setIsModalOpen] = (0, import_react6.useState)(false);
-  const { isConnected, isConnecting, account, connector, walletConnectUri, clearWalletConnectUri } = (0, import_connector3.useConnector)();
+  const { isConnected, isConnecting, account, connector, walletConnectUri, clearWalletConnectUri } = (0, import_connector4.useConnector)();
   if (isConnected && account && connector) {
     const shortAddress = `${account.slice(0, 4)}...${account.slice(-4)}`;
     const walletIcon = connector.icon || void 0;
@@ -1203,7 +1308,8 @@ function ConnectButton(props) {
           walletName: connector.name,
           allowNetworkSwitch: true,
           theme,
-          showSolBalance
+          showSolBalance,
+          showDefaultToken
         }
       ) }) }) })
     ] });