@phantom/react-sdk 1.0.0-beta.22 → 1.0.0-beta.25

package/dist/index.js

@@ -30,34 +30,35 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  AddressType: () => import_browser_sdk6.AddressType,
+  AddressType: () => import_browser_sdk8.AddressType,
   ConnectButton: () => ConnectButton,
-  DebugLevel: () => import_browser_sdk6.DebugLevel,
-  NetworkId: () => import_browser_sdk6.NetworkId,
+  DebugLevel: () => import_browser_sdk8.DebugLevel,
+  NetworkId: () => import_browser_sdk8.NetworkId,
   PhantomProvider: () => PhantomProvider,
-  darkTheme: () => import_wallet_sdk_ui7.darkTheme,
-  debug: () => import_browser_sdk6.debug,
-  isMobileDevice: () => import_browser_sdk6.isMobileDevice,
-  lightTheme: () => import_wallet_sdk_ui7.lightTheme,
-  mergeTheme: () => import_wallet_sdk_ui7.mergeTheme,
+  darkTheme: () => import_wallet_sdk_ui8.darkTheme,
+  debug: () => import_browser_sdk8.debug,
+  isMobileDevice: () => import_browser_sdk8.isMobileDevice,
+  lightTheme: () => import_wallet_sdk_ui8.lightTheme,
+  mergeTheme: () => import_wallet_sdk_ui8.mergeTheme,
   useAccounts: () => useAccounts,
   useAutoConfirm: () => useAutoConfirm,
   useConnect: () => useConnect,
   useDisconnect: () => useDisconnect,
+  useDiscoveredWallets: () => useDiscoveredWallets,
   useEthereum: () => useEthereum,
   useIsExtensionInstalled: () => useIsExtensionInstalled,
   useIsPhantomLoginAvailable: () => useIsPhantomLoginAvailable,
   useModal: () => useModal,
   usePhantom: () => usePhantom,
   useSolana: () => useSolana,
-  useTheme: () => import_wallet_sdk_ui5.useTheme
+  useTheme: () => import_wallet_sdk_ui6.useTheme
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/PhantomProvider.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_browser_sdk5 = require("@phantom/browser-sdk");
-var import_wallet_sdk_ui4 = require("@phantom/wallet-sdk-ui");
+var import_wallet_sdk_ui5 = require("@phantom/wallet-sdk-ui");
 
 // src/PhantomContext.ts
 var import_react = require("react");
@@ -71,7 +72,7 @@ function usePhantom() {
 }
 
 // src/ModalProvider.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/ModalContext.ts
 var import_react2 = require("react");
@@ -90,12 +91,13 @@ function useModal() {
 
 // src/ModalProvider.tsx
 var import_browser_sdk4 = require("@phantom/browser-sdk");
-var import_wallet_sdk_ui3 = require("@phantom/wallet-sdk-ui");
+var import_wallet_sdk_ui4 = require("@phantom/wallet-sdk-ui");
 
 // src/components/ConnectModalContent.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_browser_sdk3 = require("@phantom/browser-sdk");
-var import_wallet_sdk_ui = require("@phantom/wallet-sdk-ui");
+var import_wallet_sdk_ui2 = require("@phantom/wallet-sdk-ui");
+var import_constants = require("@phantom/constants");
 
 // src/hooks/useIsExtensionInstalled.ts
 var React = __toESM(require("react"));
@@ -190,38 +192,154 @@ function useConnect() {
   };
 }
 
-// src/components/ConnectModalContent.tsx
+// src/hooks/useDiscoveredWallets.ts
+var import_react4 = require("react");
+function useDiscoveredWallets() {
+  const { sdk } = usePhantom();
+  const [wallets, setWallets] = (0, import_react4.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const refetch = (0, import_react4.useCallback)(async () => {
+    if (!sdk) {
+      setWallets([]);
+      setError(null);
+      setIsLoading(false);
+      return;
+    }
+    try {
+      setIsLoading(true);
+      setError(null);
+      const initialWallets = sdk.getDiscoveredWallets();
+      if (initialWallets.length > 0) {
+        setWallets(initialWallets);
+        setIsLoading(false);
+      } else {
+        await sdk.discoverWallets();
+        const discoveredWallets = sdk.getDiscoveredWallets();
+        setWallets(discoveredWallets);
+        setIsLoading(false);
+      }
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to fetch discovered wallets");
+      setError(error2);
+      setWallets([]);
+      setIsLoading(false);
+    }
+  }, [sdk]);
+  (0, import_react4.useEffect)(() => {
+    refetch();
+  }, [refetch]);
+  return {
+    wallets,
+    isLoading,
+    error,
+    refetch
+  };
+}
+
+// src/components/ChainIcon.tsx
+var import_wallet_sdk_ui = require("@phantom/wallet-sdk-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
-function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
+var IconWrapper = ({ children }) => {
   const theme = (0, import_wallet_sdk_ui.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "4px",
+        backgroundColor: theme.aux,
+        color: theme.text,
+        padding: "2px"
+      },
+      children
+    }
+  );
+};
+function ChainIcon({ addressType, size = 8 }) {
+  const theme = (0, import_wallet_sdk_ui.useTheme)();
+  const type = addressType.toLowerCase();
+  if (type.includes("solana")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Icon, { type: "solana", size, color: theme.text }) });
+  }
+  if (type.includes("ethereum") || type.includes("evm")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Icon, { type: "ethereum", size, color: theme.text }) });
+  }
+  if (type.includes("bitcoin")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Icon, { type: "bitcoin", size, color: theme.text }) });
+  }
+  if (type.includes("sui")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Icon, { type: "sui", size, color: theme.text }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "4px",
+        backgroundColor: theme.aux,
+        color: theme.text,
+        fontSize: "6px",
+        fontWeight: "bold",
+        lineHeight: "1",
+        padding: "2px"
+      },
+      title: addressType,
+      children: addressType.charAt(0).toUpperCase()
+    }
+  );
+}
+
+// src/components/ConnectModalContent.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
+  const theme = (0, import_wallet_sdk_ui2.useTheme)();
   const { isLoading, allowedProviders } = usePhantom();
   const baseConnect = useConnect();
   const isExtensionInstalled = useIsExtensionInstalled();
   const isPhantomLoginAvailable2 = useIsPhantomLoginAvailable();
-  const isMobile = (0, import_react4.useMemo)(() => (0, import_browser_sdk3.isMobileDevice)(), []);
-  const [isConnecting, setIsConnecting] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)(null);
-  const [providerType, setProviderType] = (0, import_react4.useState)(null);
+  const isMobile = (0, import_react5.useMemo)(() => (0, import_browser_sdk3.isMobileDevice)(), []);
+  const { wallets: discoveredWallets } = useDiscoveredWallets();
+  const [isConnecting, setIsConnecting] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const [providerType, setProviderType] = (0, import_react5.useState)(null);
+  const [showOtherWallets, setShowOtherWallets] = (0, import_react5.useState)(false);
+  const [selectedWalletId, setSelectedWalletId] = (0, import_react5.useState)(null);
   const showDivider = !(allowedProviders.length === 1 && allowedProviders.includes("injected"));
-  const connectWithAuthProvider = (0, import_react4.useCallback)(
-    async (provider) => {
+  const shouldShowOtherWalletsButton = discoveredWallets.length > 2;
+  const walletsToShowInline = shouldShowOtherWalletsButton ? [] : discoveredWallets;
+  const connectWithAuthProvider = (0, import_react5.useCallback)(
+    async (provider, walletId) => {
       try {
         setIsConnecting(true);
         setError(null);
         setProviderType(provider);
-        await baseConnect.connect({ provider });
+        setSelectedWalletId(walletId || null);
+        await baseConnect.connect({ provider, walletId });
         onClose();
-      } catch (err) {
-        const error2 = err instanceof Error ? err : new Error(String(err));
-        setError(error2);
+      } catch {
+        const wallet = discoveredWallets.find((w) => w.id === walletId);
+        const providerName = wallet?.name || (0, import_constants.getProviderName)(provider);
+        setError(`Failed to connect to ${providerName}`);
       } finally {
         setIsConnecting(false);
         setProviderType(null);
+        setSelectedWalletId(null);
       }
     },
-    [baseConnect, onClose]
+    [baseConnect, discoveredWallets, onClose]
   );
-  const connectWithDeeplink = (0, import_react4.useCallback)(() => {
+  const connectWithWallet = (0, import_react5.useCallback)(
+    async (wallet) => {
+      await connectWithAuthProvider("injected", wallet.id);
+    },
+    [connectWithAuthProvider]
+  );
+  const connectWithDeeplink = (0, import_react5.useCallback)(() => {
     try {
       setIsConnecting(true);
       setError(null);
@@ -229,9 +347,8 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
       const deeplinkUrl = (0, import_browser_sdk3.getDeeplinkToPhantom)();
       window.location.href = deeplinkUrl;
       onClose();
-    } catch (err) {
-      const error2 = err instanceof Error ? err : new Error(String(err));
-      setError(error2);
+    } catch {
+      setError("Failed to open deeplink");
     } finally {
       setIsConnecting(false);
       setProviderType(null);
@@ -242,25 +359,32 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
     height: "56px",
     borderRadius: "50%",
     display: "block",
-    objectFit: "cover"
+    objectFit: "cover",
+    marginBottom: "12px"
   };
-  const buttonContainerStyle = {
+  const connectContentContainerStyle = {
+    transition: "opacity 0.15s ease-in-out, transform 0.15s ease-in-out",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     gap: "12px",
-    width: "100%"
+    padding: "0 32px"
   };
-  const socialButtonRowStyle = {
+  const otherWalletsContainerStyle = {
     display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
     gap: "12px",
-    width: "100%"
+    maxHeight: "480px",
+    overflowY: "auto",
+    padding: "0 32px 32px 32px",
+    transition: "opacity 0.15s ease-in-out, transform 0.15s ease-in-out"
   };
   const dividerStyle = {
     display: "flex",
     alignItems: "center",
     width: "100%",
-    margin: "24px 0",
+    margin: "12px 0",
     ...theme.typography.caption,
     color: theme.secondary,
     textTransform: "uppercase"
@@ -268,7 +392,7 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
   const dividerLineStyle = {
     flex: 1,
     height: "1px",
-    backgroundColor: (0, import_wallet_sdk_ui.hexToRgba)(theme.secondary, 0.1)
+    backgroundColor: (0, import_wallet_sdk_ui2.hexToRgba)(theme.secondary, 0.1)
   };
   const dividerTextStyle = {
     padding: "0 12px"
@@ -278,6 +402,7 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
     color: "#ff6b6b",
     border: "1px solid rgba(220, 53, 69, 0.3)",
     borderRadius: theme.borderRadius,
+    boxSizing: "border-box",
     padding: "12px",
     width: "100%",
     fontSize: "14px"
@@ -298,108 +423,214 @@ function ConnectModalContent({ appIcon, appName = "App Name", onClose }) {
     borderRadius: "50%",
     animation: "spin 1s linear infinite"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+  const walletIconStyle = {
+    width: "32px",
+    height: "32px",
+    borderRadius: "8px",
+    objectFit: "cover"
+  };
+  const walletButtonContentStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "8px",
+    width: "100%"
+  };
+  const walletButtonLeftStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    flex: 1
+  };
+  const walletNameContainerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    alignItems: "flex-start"
+  };
+  const chainIndicatorsStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px"
+  };
+  const walletButtonRightStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    color: theme.secondary
+  };
+  const footerStyle = {
+    display: "flex",
+    padding: "16px",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "4px",
+    borderTop: "1px solid rgba(152, 151, 156, 0.10)",
+    ...theme.typography.caption,
+    color: theme.secondary
+  };
+  const contentWrapperStyle = {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    gap: "24px"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: contentWrapperStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
           @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
           }
         ` }),
-    appIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: appIcon, alt: appName, style: appIconStyle }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: errorStyle, children: error.message }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: loadingContainerStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: spinnerStyle }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Text, { variant: "label", color: theme.secondary, children: "Loading..." })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: buttonContainerStyle, children: [
-      isMobile && !isExtensionInstalled.isInstalled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_wallet_sdk_ui.Button,
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: loadingContainerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: spinnerStyle }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "label", color: theme.secondary, children: "Loading..." })
+    ] }) : showOtherWallets ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_wallet_sdk_ui2.ModalHeader,
         {
-          onClick: connectWithDeeplink,
-          disabled: isConnecting,
-          isLoading: isConnecting && providerType === "deeplink",
-          fullWidth: true,
-          children: isConnecting && providerType === "deeplink" ? "Opening Phantom..." : "Open in Phantom App"
+          goBack: true,
+          onGoBack: () => {
+            setError(null);
+            setShowOtherWallets(false);
+          },
+          title: "Other Wallets",
+          onClose
         }
       ),
-      !isMobile && allowedProviders.includes("phantom") && isPhantomLoginAvailable2.isAvailable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_wallet_sdk_ui.LoginWithPhantomButton,
-        {
-          onClick: () => connectWithAuthProvider("phantom"),
-          disabled: isConnecting,
-          isLoading: isConnecting && providerType === "phantom"
-        }
-      ),
-      (allowedProviders.includes("google") || allowedProviders.includes("apple")) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: socialButtonRowStyle, children: [
-        allowedProviders.includes("google") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_wallet_sdk_ui.Button,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: otherWalletsContainerStyle, children: [
+        error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: errorStyle, children: error }),
+        discoveredWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_wallet_sdk_ui2.Button,
           {
-            onClick: () => connectWithAuthProvider("google"),
+            onClick: () => connectWithWallet(wallet),
             disabled: isConnecting,
-            isLoading: isConnecting && providerType === "google",
+            isLoading: isConnecting && providerType === "injected" && selectedWalletId === wallet.id,
             fullWidth: true,
-            centered: allowedProviders.includes("apple"),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Icon, { type: "google", size: 20 }),
-              !allowedProviders.includes("apple") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Text, { variant: "captionBold", children: "Continue with Google" })
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonContentStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonLeftStyle, children: [
+                wallet.id === "phantom" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.BoundedIcon, { type: "phantom", size: 20, background: "#aba0f2", color: "white" }) : wallet.icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: wallet.icon, alt: wallet.name, style: walletIconStyle }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.BoundedIcon, { type: "wallet", size: 20, background: theme.aux, color: theme.text }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: walletNameContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "captionBold", children: wallet.name }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonRightStyle, children: [
+                wallet.addressTypes && wallet.addressTypes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: chainIndicatorsStyle, children: wallet.addressTypes.map((addressType) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChainIcon, { addressType, size: 8 }) }, `${wallet.id}-chain-${addressType}`)) }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "chevron-right", size: 16, color: theme.secondary })
+              ] })
+            ] })
+          },
+          wallet.id
+        ))
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.ModalHeader, { title: "Login or Sign Up", onClose }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: connectContentContainerStyle, children: [
+        appIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: appIcon, alt: appName, style: appIconStyle }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: errorStyle, children: error }),
+        isMobile && !isExtensionInstalled.isInstalled && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_wallet_sdk_ui2.Button,
+          {
+            onClick: connectWithDeeplink,
+            disabled: isConnecting,
+            isLoading: isConnecting && providerType === "deeplink",
+            fullWidth: true,
+            children: isConnecting && providerType === "deeplink" ? "Opening Phantom..." : "Open in Phantom App"
           }
         ),
-        allowedProviders.includes("apple") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_wallet_sdk_ui.Button,
+        !isMobile && allowedProviders.includes("phantom") && isPhantomLoginAvailable2.isAvailable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_wallet_sdk_ui2.LoginWithPhantomButton,
           {
-            onClick: () => connectWithAuthProvider("apple"),
+            onClick: () => connectWithAuthProvider("phantom"),
             disabled: isConnecting,
-            isLoading: isConnecting && providerType === "apple",
+            isLoading: isConnecting && providerType === "phantom"
+          }
+        ),
+        allowedProviders.includes("google") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_wallet_sdk_ui2.Button,
+          {
+            onClick: () => connectWithAuthProvider("google"),
+            disabled: isConnecting,
+            isLoading: isConnecting && providerType === "google",
             fullWidth: true,
-            centered: allowedProviders.includes("google"),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Icon, { type: "apple", size: 20 }),
-              !allowedProviders.includes("google") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Text, { variant: "captionBold", children: "Continue with Apple" })
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonContentStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonLeftStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "google", size: 20 }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "captionBold", children: "Continue with Google" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: walletButtonRightStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "chevron-right", size: 16, color: theme.secondary }) })
+            ] })
           }
-        )
-      ] }),
-      !isMobile && allowedProviders.includes("injected") && isExtensionInstalled.isInstalled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        showDivider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: dividerStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: dividerLineStyle }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dividerTextStyle, children: "OR" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: dividerLineStyle })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_wallet_sdk_ui.Button,
+        ),
+        allowedProviders.includes("apple") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_wallet_sdk_ui2.Button,
           {
-            onClick: () => connectWithAuthProvider("injected"),
+            onClick: () => connectWithAuthProvider("apple"),
             disabled: isConnecting,
-            isLoading: isConnecting && providerType === "injected",
+            isLoading: isConnecting && providerType === "apple",
             fullWidth: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.BoundedIcon, { type: "phantom", size: 20, background: "#AB9FF2", color: "white" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Text, { variant: "captionBold", children: "Phantom" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonContentStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonLeftStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "apple", size: 20 }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "captionBold", children: "Continue with Apple" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Text, { variant: "label", color: theme.secondary, children: "Detected" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_sdk_ui.Icon, { type: "chevron-right", size: 16 })
-              ] })
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: walletButtonRightStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "chevron-right", size: 16, color: theme.secondary }) })
             ] })
           }
-        )
+        ),
+        !isMobile && allowedProviders.includes("injected") && isExtensionInstalled.isInstalled && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          showDivider && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: dividerStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: dividerLineStyle }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: dividerTextStyle, children: "OR" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: dividerLineStyle })
+          ] }),
+          walletsToShowInline.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_wallet_sdk_ui2.Button,
+            {
+              onClick: () => connectWithWallet(wallet),
+              disabled: isConnecting,
+              isLoading: isConnecting && providerType === "injected" && selectedWalletId === wallet.id,
+              fullWidth: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonContentStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonLeftStyle, children: [
+                  wallet.id === "phantom" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.BoundedIcon, { type: "phantom", size: 20, background: "#aba0f2", color: "white" }) : wallet.icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: wallet.icon, alt: wallet.name, style: walletIconStyle }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.BoundedIcon, { type: "wallet", size: 10, background: theme.aux, color: theme.text }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: walletNameContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "captionBold", children: wallet.name }) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonRightStyle, children: [
+                  wallet.addressTypes && wallet.addressTypes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: chainIndicatorsStyle, children: wallet.addressTypes.map((addressType) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChainIcon, { addressType, size: 8 }) }, `${wallet.id}-chain-${addressType}`)) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "chevron-right", size: 16, color: theme.secondary })
+                ] })
+              ] })
+            },
+            wallet.id
+          )),
+          shouldShowOtherWalletsButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Button, { onClick: () => setShowOtherWallets(true), disabled: isConnecting, fullWidth: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonContentStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: walletButtonLeftStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.BoundedIcon, { type: "wallet", size: 20, background: theme.aux, color: theme.text }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "captionBold", children: "Other Wallets" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: walletButtonRightStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "chevron-right", size: 16, color: theme.secondary }) })
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: footerStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "label", color: theme.secondary, children: "Powered by" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "phantom", size: 16 }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "label", color: theme.secondary, children: "Phantom" })
       ] })
     ] })
   ] });
 }
 
 // src/components/ConnectedModalContent.tsx
-var import_react6 = require("react");
-var import_wallet_sdk_ui2 = require("@phantom/wallet-sdk-ui");
+var import_react7 = require("react");
+var import_wallet_sdk_ui3 = require("@phantom/wallet-sdk-ui");
 
 // src/hooks/useDisconnect.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useDisconnect() {
   const { sdk } = usePhantom();
-  const [isDisconnecting, setIsDisconnecting] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const disconnect = (0, import_react5.useCallback)(async () => {
+  const [isDisconnecting, setIsDisconnecting] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const disconnect = (0, import_react6.useCallback)(async () => {
     if (!sdk) {
       throw new Error("SDK not initialized");
     }
@@ -423,14 +654,14 @@ function useDisconnect() {
 }
 
 // src/components/ConnectedModalContent.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function ConnectedModalContent({ onClose }) {
-  const theme = (0, import_wallet_sdk_ui2.useTheme)();
+  const theme = (0, import_wallet_sdk_ui3.useTheme)();
   const { addresses } = usePhantom();
   const { disconnect } = useDisconnect();
-  const [isDisconnecting, setIsDisconnecting] = (0, import_react6.useState)(false);
-  const [disconnectError, setDisconnectError] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
+  const [isDisconnecting, setIsDisconnecting] = (0, import_react7.useState)(false);
+  const [disconnectError, setDisconnectError] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
     setDisconnectError(null);
   }, []);
   const handleDisconnect = async () => {
@@ -450,48 +681,84 @@ function ConnectedModalContent({ onClose }) {
     display: "flex",
     flexDirection: "column",
     gap: "16px",
-    width: "100%"
+    width: "100%",
+    minWidth: 0,
+    boxSizing: "border-box"
   };
   const accountItemStyle = {
     display: "flex",
     flexDirection: "column",
     gap: "8px",
-    width: "100%"
+    width: "100%",
+    minWidth: 0,
+    boxSizing: "border-box"
   };
   const addressTextStyle = {
     fontFamily: "monospace",
-    wordBreak: "break-all"
+    wordBreak: "break-all",
+    overflowWrap: "break-word",
+    minWidth: 0
   };
   const errorContainerStyle = {
     padding: "12px",
     backgroundColor: "rgba(220, 53, 69, 0.1)",
     borderRadius: theme.borderRadius,
     border: "1px solid rgba(220, 53, 69, 0.3)",
-    width: "100%"
+    width: "100%",
+    boxSizing: "border-box",
+    minWidth: 0
+  };
+  const contentWrapperStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px"
+  };
+  const accountListContainerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "12px",
+    padding: "0 32px 24px 32px",
+    boxSizing: "border-box",
+    width: "100%",
+    minWidth: 0
+  };
+  const disconnectButtonContainerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "12px",
+    padding: "0 32px 24px 32px",
+    boxSizing: "border-box",
+    width: "100%",
+    minWidth: 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    addresses && addresses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: accountListStyle, children: addresses.map((account, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: accountItemStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "label", color: theme.secondary, style: { textTransform: "uppercase" }, children: account.addressType }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: addressTextStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "caption", children: account.address }) })
-    ] }, index)) }),
-    disconnectError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: errorContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "caption", color: theme.error, children: "Failed to disconnect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Button, { onClick: handleDisconnect, disabled: isDisconnecting, isLoading: isDisconnecting, fullWidth: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "captionBold", children: isDisconnecting ? "Disconnecting..." : "Disconnect" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: contentWrapperStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.ModalHeader, { title: "Wallet", onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: accountListContainerStyle, children: [
+      disconnectError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: errorContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.Text, { variant: "caption", color: theme.error, children: "Failed to disconnect" }) }),
+      addresses && addresses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: accountListStyle, children: addresses.map((account, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: accountItemStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.Text, { variant: "label", color: theme.secondary, style: { textTransform: "uppercase" }, children: account.addressType }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: addressTextStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.Text, { variant: "caption", children: account.address }) })
+      ] }, index)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: disconnectButtonContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.Button, { onClick: handleDisconnect, disabled: isDisconnecting, isLoading: isDisconnecting, fullWidth: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.Text, { variant: "captionBold", children: isDisconnecting ? "Disconnecting..." : "Disconnect" }) }) })
   ] });
 }
 
 // src/ModalProvider.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ModalProvider({ children, appIcon, appName }) {
   const { isConnected } = usePhantom();
-  const [isModalOpen, setIsModalOpen] = (0, import_react7.useState)(false);
-  const isMobile = (0, import_react7.useMemo)(() => (0, import_browser_sdk4.isMobileDevice)(), []);
-  const openModal = (0, import_react7.useCallback)(() => {
+  const [isModalOpen, setIsModalOpen] = (0, import_react8.useState)(false);
+  const isMobile = (0, import_react8.useMemo)(() => (0, import_browser_sdk4.isMobileDevice)(), []);
+  const openModal = (0, import_react8.useCallback)(() => {
     setIsModalOpen(true);
   }, []);
-  const closeModal = (0, import_react7.useCallback)(() => {
+  const closeModal = (0, import_react8.useCallback)(() => {
     setIsModalOpen(false);
   }, []);
-  const modalContextValue = (0, import_react7.useMemo)(
+  const modalContextValue = (0, import_react8.useMemo)(
     () => ({
       isModalOpen,
       openModal,
@@ -499,46 +766,35 @@ function ModalProvider({ children, appIcon, appName }) {
     }),
     [isModalOpen, openModal, closeModal]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(ModalContext.Provider, { value: modalContextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ModalContext.Provider, { value: modalContextValue, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_wallet_sdk_ui3.Modal,
-      {
-        isVisible: isModalOpen,
-        onClose: closeModal,
-        appIcon,
-        appName,
-        isConnected,
-        isMobile,
-        children: isConnected ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ConnectedModalContent, { onClose: closeModal }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ConnectModalContent, { appIcon, appName, onClose: closeModal })
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_wallet_sdk_ui4.Modal, { isVisible: isModalOpen, onClose: closeModal, appIcon, appName, isMobile, children: isConnected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ConnectedModalContent, { onClose: closeModal }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ConnectModalContent, { appIcon, appName, onClose: closeModal }) })
   ] });
 }
 
 // src/PhantomProvider.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function PhantomProvider({ children, config, debugConfig, theme, appIcon, appName }) {
-  const memoizedConfig = (0, import_react8.useMemo)(() => config, [config]);
-  const resolvedTheme = (0, import_react8.useMemo)(() => (0, import_wallet_sdk_ui4.mergeTheme)(theme || import_wallet_sdk_ui4.darkTheme), [theme]);
-  const [sdk, setSdk] = (0, import_react8.useState)(null);
-  const [isClient, setIsClient] = (0, import_react8.useState)(false);
-  const [isConnected, setIsConnected] = (0, import_react8.useState)(false);
-  const [isConnecting, setIsConnecting] = (0, import_react8.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react8.useState)(true);
-  const [connectError, setConnectError] = (0, import_react8.useState)(null);
-  const [addresses, setAddresses] = (0, import_react8.useState)([]);
-  const [user, setUser] = (0, import_react8.useState)(null);
-  (0, import_react8.useEffect)(() => {
+  const memoizedConfig = (0, import_react9.useMemo)(() => config, [config]);
+  const resolvedTheme = (0, import_react9.useMemo)(() => (0, import_wallet_sdk_ui5.mergeTheme)(theme || import_wallet_sdk_ui5.darkTheme), [theme]);
+  const [sdk, setSdk] = (0, import_react9.useState)(null);
+  const [isClient, setIsClient] = (0, import_react9.useState)(false);
+  const [isConnected, setIsConnected] = (0, import_react9.useState)(false);
+  const [isConnecting, setIsConnecting] = (0, import_react9.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(true);
+  const [connectError, setConnectError] = (0, import_react9.useState)(null);
+  const [addresses, setAddresses] = (0, import_react9.useState)([]);
+  const [user, setUser] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
     setIsClient(true);
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!isClient)
       return;
     const sdkInstance = new import_browser_sdk5.BrowserSDK(memoizedConfig);
     setSdk(sdkInstance);
   }, [isClient, memoizedConfig]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!sdk)
       return;
     const handleConnectStart = () => {
@@ -585,12 +841,12 @@ function PhantomProvider({ children, config, debugConfig, theme, appIcon, appNam
       sdk.off("disconnect", handleDisconnect);
     };
   }, [sdk]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!debugConfig || !sdk)
       return;
     sdk.configureDebug(debugConfig);
   }, [sdk, debugConfig]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!isClient || !sdk)
       return;
     const initialize = async () => {
@@ -603,7 +859,7 @@ function PhantomProvider({ children, config, debugConfig, theme, appIcon, appNam
     };
     initialize();
   }, [sdk, isClient]);
-  const value = (0, import_react8.useMemo)(
+  const value = (0, import_react9.useMemo)(
     () => ({
       sdk,
       isConnected,
@@ -629,7 +885,7 @@ function PhantomProvider({ children, config, debugConfig, theme, appIcon, appNam
       memoizedConfig.providers
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_wallet_sdk_ui4.ThemeProvider, { theme: resolvedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PhantomContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalProvider, { appIcon, appName, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_wallet_sdk_ui5.ThemeProvider, { theme: resolvedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PhantomContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModalProvider, { appIcon, appName, children }) }) });
 }
 
 // src/hooks/useAccounts.ts
@@ -639,15 +895,15 @@ function useAccounts() {
 }
 
 // src/hooks/useAutoConfirm.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useAutoConfirm() {
   const { sdk, user } = usePhantom();
-  const [status, setStatus] = (0, import_react9.useState)(null);
-  const [supportedChains, setSupportedChains] = (0, import_react9.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
-  const [error, setError] = (0, import_react9.useState)(null);
+  const [status, setStatus] = (0, import_react10.useState)(null);
+  const [supportedChains, setSupportedChains] = (0, import_react10.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react10.useState)(false);
+  const [error, setError] = (0, import_react10.useState)(null);
   const isInjected = user?.authProvider === "injected";
-  const enable = (0, import_react9.useCallback)(
+  const enable = (0, import_react10.useCallback)(
     async (params) => {
       if (!sdk) {
         throw new Error("SDK not initialized");
@@ -671,7 +927,7 @@ function useAutoConfirm() {
     },
     [sdk, isInjected]
   );
-  const disable = (0, import_react9.useCallback)(async () => {
+  const disable = (0, import_react10.useCallback)(async () => {
     if (!sdk) {
       throw new Error("SDK not initialized");
     }
@@ -692,7 +948,7 @@ function useAutoConfirm() {
       setIsLoading(false);
     }
   }, [sdk, isInjected]);
-  const refetch = (0, import_react9.useCallback)(async () => {
+  const refetch = (0, import_react10.useCallback)(async () => {
     if (!sdk || !isInjected) {
       return;
     }
@@ -712,7 +968,7 @@ function useAutoConfirm() {
       setIsLoading(false);
     }
   }, [sdk, isInjected]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (sdk && isInjected) {
       refetch();
     } else {
@@ -733,53 +989,79 @@ function useAutoConfirm() {
 }
 
 // src/hooks/useSolana.ts
+var import_browser_sdk6 = require("@phantom/browser-sdk");
 function useSolana() {
-  const { sdk, isConnected, isClient } = usePhantom();
-  if (!isClient || !sdk) {
+  const { sdk, isClient, isLoading } = usePhantom();
+  if (!isClient || !sdk || isLoading) {
+    return {
+      solana: {},
+      isAvailable: false
+    };
+  }
+  const enabledAddressTypes = sdk.getEnabledAddressTypes();
+  const isAvailable = enabledAddressTypes.includes(import_browser_sdk6.AddressType.solana);
+  if (!isAvailable) {
+    return {
+      solana: {},
+      isAvailable: false
+    };
+  }
+  try {
+    return {
+      solana: sdk.solana,
+      isAvailable: true
+    };
+  } catch (error) {
     return {
       solana: {},
-      // This will be replaced when SDK is ready
       isAvailable: false
     };
   }
-  return {
-    // Chain instance with connection enforcement for signing methods
-    solana: sdk.solana,
-    // State
-    isAvailable: !!isConnected
-  };
 }
 
 // src/hooks/useEthereum.ts
+var import_browser_sdk7 = require("@phantom/browser-sdk");
 function useEthereum() {
-  const { sdk, isConnected, isClient } = usePhantom();
-  if (!isClient || !sdk) {
+  const { sdk, isClient, isLoading } = usePhantom();
+  if (!isClient || !sdk || isLoading) {
+    return {
+      ethereum: {},
+      isAvailable: false
+    };
+  }
+  const enabledAddressTypes = sdk.getEnabledAddressTypes();
+  const isAvailable = enabledAddressTypes.includes(import_browser_sdk7.AddressType.ethereum);
+  if (!isAvailable) {
+    return {
+      ethereum: {},
+      isAvailable: false
+    };
+  }
+  try {
+    return {
+      ethereum: sdk.ethereum,
+      isAvailable: true
+    };
+  } catch (error) {
     return {
       ethereum: {},
-      // This will be replaced when SDK is ready
       isAvailable: false
     };
   }
-  return {
-    // Chain instance with connection enforcement for signing methods
-    ethereum: sdk.ethereum,
-    // State
-    isAvailable: !!isConnected
-  };
 }
 
 // src/hooks/index.ts
-var import_wallet_sdk_ui5 = require("@phantom/wallet-sdk-ui");
+var import_wallet_sdk_ui6 = require("@phantom/wallet-sdk-ui");
 
 // src/components/ConnectButton.tsx
-var import_react10 = require("react");
-var import_wallet_sdk_ui6 = require("@phantom/wallet-sdk-ui");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_wallet_sdk_ui7 = require("@phantom/wallet-sdk-ui");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ConnectButton({ addressType, fullWidth = false }) {
-  const theme = (0, import_wallet_sdk_ui6.useTheme)();
+  const theme = (0, import_wallet_sdk_ui7.useTheme)();
   const { open } = useModal();
   const { isConnected, addresses } = usePhantom();
-  const displayAddress = (0, import_react10.useMemo)(() => {
+  const displayAddress = (0, import_react11.useMemo)(() => {
     if (!addresses || addresses.length === 0)
       return null;
     if (addressType) {
@@ -787,7 +1069,7 @@ function ConnectButton({ addressType, fullWidth = false }) {
     }
     return addresses[0];
   }, [addresses, addressType]);
-  const truncatedAddress = (0, import_react10.useMemo)(() => {
+  const truncatedAddress = (0, import_react11.useMemo)(() => {
     if (!displayAddress)
       return "";
     const addr = displayAddress.address;
@@ -821,11 +1103,11 @@ function ConnectButton({ addressType, fullWidth = false }) {
     cursor: "pointer"
   };
   if (isConnected && displayAddress) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { style: connectedButtonStyle, onClick: open, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontFamily: "monospace" }, children: truncatedAddress }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { style: connectedButtonStyle, onClick: open, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontFamily: "monospace" }, children: truncatedAddress }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { style: buttonStyle, onClick: open, children: "Connect Wallet" });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { style: buttonStyle, onClick: open, children: "Connect Wallet" });
 }
 
 // src/index.ts
-var import_wallet_sdk_ui7 = require("@phantom/wallet-sdk-ui");
-var import_browser_sdk6 = require("@phantom/browser-sdk");
+var import_wallet_sdk_ui8 = require("@phantom/wallet-sdk-ui");
+var import_browser_sdk8 = require("@phantom/browser-sdk");