@algobright/solana-connector 0.1.2 → 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";
@@ -873,7 +871,7 @@ 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 { ClusterElement, DisconnectElement, useConnectorClient } from "@solana/connector";
+import { ClusterElement, DisconnectElement, useConnector as useConnector2, useConnectorClient } from "@solana/connector";
 import { clsx as clsx3 } from "clsx";
 
 // src/utils/fetchBalance.tsx
@@ -910,7 +908,10 @@ async function getTokenBalance(client, pubkey, mintAddress) {
     const pubkeyAddress = address(pubkey);
     const mintPubkey = address(mintAddress);
     const rpc = createSolanaRpc(rpcUrl);
-    const mintInfo = await rpc.getAccountInfo(mintPubkey).send();
+    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");
@@ -926,7 +927,6 @@ async function getTokenBalance(client, pubkey, mintAddress) {
       balance = parseFloat(tokenBalance.value.uiAmountString);
     }
   } catch (error) {
-    console.error("Error fetching token balance:", error);
   } finally {
     return balance;
   }
@@ -943,23 +943,24 @@ var networkColor = {
 function WalletDropdown(props) {
   const client = useConnectorClient();
   const {
-    CN_ConnectButton,
-    selectedAccount,
-    walletIcon,
-    walletName,
-    theme,
-    allowNetworkSwitch,
-    showSolBalance,
+    CN_DropdownMenu,
+    theme = "light",
+    allowNetworkSwitch = true,
+    showSolBalance = true,
     showDefaultToken
   } = props;
   const [view, setView] = useState3("wallet");
   const [copied, setCopied] = useState3(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 {
@@ -1010,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: [
@@ -1155,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: [
@@ -1178,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",
@@ -1236,7 +1237,7 @@ function ConnectButton(props) {
     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;
@@ -1267,10 +1268,7 @@ 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,
@@ -1305,9 +1303,7 @@ function ConnectButton(props) {
       {
         theme,
         open: isModalOpen,
-        onOpenChange,
-        walletConnectUri,
-        onClearWalletConnectUri: clearWalletConnectUri
+        onOpenChange
       }
     )
   ] });