@phantom/react-sdk 1.0.0-beta.8 → 1.0.0

package/dist/index.mjs

@@ -1,50 +1,798 @@
 // src/PhantomProvider.tsx
-import { createContext, useContext, useState, useEffect, useMemo } from "react";
+import { useState as useState8, useEffect as useEffect5, useMemo as useMemo3, useCallback as useCallback6 } from "react";
 import { BrowserSDK } from "@phantom/browser-sdk";
-import { jsx } from "react/jsx-runtime";
+import { mergeTheme, darkTheme, ThemeProvider } from "@phantom/wallet-sdk-ui";
+
+// src/PhantomContext.ts
+import { createContext, useContext } from "react";
 var PhantomContext = createContext(void 0);
-function PhantomProvider({ children, config, debugConfig }) {
-  const memoizedConfig = useMemo(() => config, [config]);
-  const [sdk, setSdk] = useState(null);
-  const [isClient, setIsClient] = useState(false);
-  const [isConnected, setIsConnected] = useState(false);
-  const [isConnecting, setIsConnecting] = useState(false);
-  const [connectError, setConnectError] = useState(null);
-  const [addresses, setAddresses] = useState([]);
-  const [walletId, setWalletId] = useState(null);
-  const [currentProviderType, setCurrentProviderType] = useState(
-    memoizedConfig.providerType || null
+function usePhantom() {
+  const context = useContext(PhantomContext);
+  if (!context) {
+    throw new Error("usePhantom must be used within a PhantomProvider");
+  }
+  return context;
+}
+
+// src/ModalProvider.tsx
+import { useState as useState7, useCallback as useCallback5, useMemo as useMemo2 } from "react";
+
+// src/ModalContext.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ModalContext = createContext2(void 0);
+function useModal() {
+  const context = useContext2(ModalContext);
+  if (!context) {
+    throw new Error("useModal must be used within a ModalProvider");
+  }
+  return {
+    open: context.openModal,
+    close: context.closeModal,
+    isOpened: context.isModalOpen
+  };
+}
+
+// src/ModalProvider.tsx
+import { isMobileDevice as isMobileDevice2 } from "@phantom/browser-sdk";
+import { Modal } from "@phantom/wallet-sdk-ui";
+
+// src/components/ConnectModalContent.tsx
+import { useState as useState4, useCallback as useCallback3, useMemo } from "react";
+import { isMobileDevice } from "@phantom/browser-sdk";
+import {
+  Button,
+  LoginWithPhantomButton,
+  Icon as Icon2,
+  BoundedIcon,
+  Text,
+  hexToRgba,
+  useTheme as useTheme2,
+  ModalHeader
+} from "@phantom/wallet-sdk-ui";
+import { getProviderName } from "@phantom/constants";
+
+// src/hooks/useIsExtensionInstalled.ts
+import * as React from "react";
+import { waitForPhantomExtension } from "@phantom/browser-sdk";
+function useIsExtensionInstalled() {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [isInstalled, setIsInstalled] = React.useState(false);
+  React.useEffect(() => {
+    let isMounted = true;
+    const checkExtension = async () => {
+      try {
+        setIsLoading(true);
+        const result = await waitForPhantomExtension(3e3);
+        if (isMounted) {
+          setIsInstalled(result);
+        }
+      } catch (error) {
+        if (isMounted) {
+          setIsInstalled(false);
+        }
+      } finally {
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+    checkExtension();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  return { isLoading, isInstalled };
+}
+
+// src/hooks/useIsPhantomLoginAvailable.ts
+import * as React2 from "react";
+import { isPhantomLoginAvailable } from "@phantom/browser-sdk";
+function useIsPhantomLoginAvailable() {
+  const [isLoading, setIsLoading] = React2.useState(true);
+  const [isAvailable, setIsAvailable] = React2.useState(false);
+  React2.useEffect(() => {
+    let isMounted = true;
+    const checkPhantomLogin = async () => {
+      try {
+        setIsLoading(true);
+        const result = await isPhantomLoginAvailable(3e3);
+        if (isMounted) {
+          setIsAvailable(result);
+        }
+      } catch (error) {
+        if (isMounted) {
+          setIsAvailable(false);
+        }
+      } finally {
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+    checkPhantomLogin();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  return { isLoading, isAvailable };
+}
+
+// src/hooks/useConnect.ts
+import { useCallback } from "react";
+function useConnect() {
+  const { sdk, isConnecting, isLoading, errors } = usePhantom();
+  const connect = useCallback(
+    async (options) => {
+      if (!sdk) {
+        throw new Error("SDK not initialized");
+      }
+      try {
+        const result = await sdk.connect(options);
+        return result;
+      } catch (err) {
+        console.error("Error connecting to Phantom:", err);
+        throw err;
+      }
+    },
+    [sdk]
   );
-  const [isPhantomAvailable, setIsPhantomAvailable] = useState(false);
-  useEffect(() => {
+  return {
+    connect,
+    isConnecting,
+    isLoading,
+    error: errors.connect
+  };
+}
+
+// src/hooks/useDiscoveredWallets.ts
+import { useCallback as useCallback2, useState as useState3, useEffect as useEffect3 } from "react";
+function useDiscoveredWallets() {
+  const { sdk } = usePhantom();
+  const [wallets, setWallets] = useState3([]);
+  const [isLoading, setIsLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  const refetch = useCallback2(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]);
+  useEffect3(() => {
+    refetch();
+  }, [refetch]);
+  return {
+    wallets,
+    isLoading,
+    error,
+    refetch
+  };
+}
+
+// src/components/ChainIcon.tsx
+import { Icon, useTheme } from "@phantom/wallet-sdk-ui";
+import { jsx } from "react/jsx-runtime";
+var IconWrapper = ({ children }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ 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 = useTheme();
+  const type = addressType.toLowerCase();
+  if (type.includes("solana")) {
+    return /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Icon, { type: "solana", size, color: theme.text }) });
+  }
+  if (type.includes("ethereum") || type.includes("evm")) {
+    return /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Icon, { type: "ethereum", size, color: theme.text }) });
+  }
+  if (type.includes("bitcoin")) {
+    return /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Icon, { type: "bitcoin", size, color: theme.text }) });
+  }
+  if (type.includes("sui")) {
+    return /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Icon, { type: "sui", size, color: theme.text }) });
+  }
+  return /* @__PURE__ */ 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
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ConnectModalContent({
+  appIcon,
+  appName = "App Name",
+  onClose,
+  hideCloseButton = false
+}) {
+  const theme = useTheme2();
+  const { isLoading, allowedProviders } = usePhantom();
+  const baseConnect = useConnect();
+  const isExtensionInstalled = useIsExtensionInstalled();
+  const isPhantomLoginAvailable2 = useIsPhantomLoginAvailable();
+  const isMobile = useMemo(() => isMobileDevice(), []);
+  const { wallets: discoveredWallets } = useDiscoveredWallets();
+  const [isConnecting, setIsConnecting] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [providerType, setProviderType] = useState4(null);
+  const [showOtherWallets, setShowOtherWallets] = useState4(false);
+  const [selectedWalletId, setSelectedWalletId] = useState4(null);
+  const isConnectingState = baseConnect.isConnecting || isConnecting;
+  const errorState = baseConnect.error ? baseConnect.error.message : error;
+  const showDivider = !(allowedProviders.length === 1 && allowedProviders.includes("injected"));
+  const shouldShowOtherWalletsButton = discoveredWallets.length > 2;
+  const walletsToShowInline = shouldShowOtherWalletsButton ? [] : discoveredWallets;
+  const connectWithAuthProvider = useCallback3(
+    async (provider, walletId) => {
+      try {
+        setIsConnecting(true);
+        setError(null);
+        setProviderType(provider);
+        setSelectedWalletId(walletId || null);
+        await baseConnect.connect({ provider, walletId });
+        onClose();
+      } catch {
+        const wallet = discoveredWallets.find((w) => w.id === walletId);
+        const providerName = wallet?.name || getProviderName(provider);
+        setError(`Failed to connect to ${providerName}`);
+      } finally {
+        setIsConnecting(false);
+        setProviderType(null);
+        setSelectedWalletId(null);
+      }
+    },
+    [baseConnect, discoveredWallets, onClose]
+  );
+  const connectWithWallet = useCallback3(
+    async (wallet) => {
+      await connectWithAuthProvider("injected", wallet.id);
+    },
+    [connectWithAuthProvider]
+  );
+  const connectWithDeeplink = useCallback3(async () => {
+    try {
+      setIsConnecting(true);
+      setError(null);
+      setProviderType("deeplink");
+      await baseConnect.connect({ provider: "deeplink" });
+      onClose();
+    } catch (error2) {
+      const errorMessage = error2 instanceof Error ? error2.message : "Failed to open deeplink";
+      setError(errorMessage);
+    } finally {
+      setIsConnecting(false);
+      setProviderType(null);
+    }
+  }, [baseConnect, onClose]);
+  const appIconStyle = {
+    width: "56px",
+    height: "56px",
+    borderRadius: "50%",
+    display: "block",
+    objectFit: "cover",
+    marginBottom: "12px"
+  };
+  const connectContentContainerStyle = {
+    transition: "opacity 0.15s ease-in-out, transform 0.15s ease-in-out",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "12px",
+    padding: "0 32px"
+  };
+  const otherWalletsContainerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "12px",
+    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: "12px 0",
+    ...theme.typography.caption,
+    color: theme.secondary,
+    textTransform: "uppercase"
+  };
+  const dividerLineStyle = {
+    flex: 1,
+    height: "1px",
+    backgroundColor: hexToRgba(theme.secondary, 0.1)
+  };
+  const dividerTextStyle = {
+    padding: "0 12px"
+  };
+  const errorStyle = {
+    backgroundColor: "rgba(220, 53, 69, 0.1)",
+    color: "#ff6b6b",
+    border: "1px solid rgba(220, 53, 69, 0.3)",
+    borderRadius: theme.borderRadius,
+    boxSizing: "border-box",
+    padding: "12px",
+    width: "100%",
+    fontSize: "14px"
+  };
+  const loadingContainerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "24px",
+    gap: "12px"
+  };
+  const spinnerStyle = {
+    width: "40px",
+    height: "40px",
+    border: `3px solid ${theme.secondary}`,
+    borderTop: `3px solid ${theme.brand}`,
+    borderRadius: "50%",
+    animation: "spin 1s linear infinite"
+  };
+  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__ */ jsxs("div", { style: contentWrapperStyle, children: [
+    /* @__PURE__ */ jsx2("style", { children: `
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        ` }),
+    isLoading || baseConnect.isConnecting ? /* @__PURE__ */ jsxs("div", { style: loadingContainerStyle, children: [
+      /* @__PURE__ */ jsx2("div", { style: spinnerStyle }),
+      /* @__PURE__ */ jsx2(Text, { variant: "label", color: theme.secondary, children: "Loading..." })
+    ] }) : showOtherWallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        ModalHeader,
+        {
+          goBack: true,
+          onGoBack: () => {
+            setError(null);
+            setShowOtherWallets(false);
+          },
+          title: "Other Wallets",
+          onClose,
+          hideCloseButton
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: otherWalletsContainerStyle, children: [
+        errorState && /* @__PURE__ */ jsx2("div", { style: errorStyle, children: errorState }),
+        discoveredWallets.map((wallet) => /* @__PURE__ */ jsx2(
+          Button,
+          {
+            onClick: () => connectWithWallet(wallet),
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "injected" && selectedWalletId === wallet.id,
+            fullWidth: true,
+            children: /* @__PURE__ */ jsxs("span", { style: walletButtonContentStyle, children: [
+              /* @__PURE__ */ jsxs("span", { style: walletButtonLeftStyle, children: [
+                wallet.id === "phantom" ? /* @__PURE__ */ jsx2(BoundedIcon, { type: "phantom", size: 20, background: "#aba0f2", color: "white" }) : wallet.icon ? /* @__PURE__ */ jsx2("img", { src: wallet.icon, alt: wallet.name, style: walletIconStyle }) : /* @__PURE__ */ jsx2(BoundedIcon, { type: "wallet", size: 20, background: theme.aux, color: theme.text }),
+                /* @__PURE__ */ jsx2("span", { style: walletNameContainerStyle, children: /* @__PURE__ */ jsx2(Text, { variant: "captionBold", children: wallet.name }) })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { style: walletButtonRightStyle, children: [
+                wallet.addressTypes && wallet.addressTypes.length > 0 && /* @__PURE__ */ jsx2("span", { style: chainIndicatorsStyle, children: wallet.addressTypes.map((addressType) => /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(ChainIcon, { addressType, size: 8 }) }, `${wallet.id}-chain-${addressType}`)) }),
+                /* @__PURE__ */ jsx2(Icon2, { type: "chevron-right", size: 16, color: theme.secondary })
+              ] })
+            ] })
+          },
+          wallet.id
+        ))
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2(ModalHeader, { title: "Login or Sign Up", onClose, hideCloseButton }),
+      /* @__PURE__ */ jsxs("div", { style: connectContentContainerStyle, children: [
+        appIcon && /* @__PURE__ */ jsx2("img", { src: appIcon, alt: appName, style: appIconStyle }),
+        errorState && /* @__PURE__ */ jsx2("div", { style: errorStyle, children: errorState }),
+        isMobile && !isExtensionInstalled.isInstalled && allowedProviders.includes("deeplink") && /* @__PURE__ */ jsx2(
+          LoginWithPhantomButton,
+          {
+            testId: "deeplink-button",
+            onClick: connectWithDeeplink,
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "deeplink",
+            fullWidth: true,
+            children: isConnecting && providerType === "deeplink" ? "Opening Phantom..." : "Open in Phantom App"
+          }
+        ),
+        !isMobile && allowedProviders.includes("phantom") && isPhantomLoginAvailable2.isAvailable && /* @__PURE__ */ jsx2(
+          LoginWithPhantomButton,
+          {
+            testId: "login-with-phantom-button",
+            onClick: () => connectWithAuthProvider("phantom"),
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "phantom"
+          }
+        ),
+        allowedProviders.includes("google") && !(isMobile && isExtensionInstalled.isInstalled) && /* @__PURE__ */ jsx2(
+          Button,
+          {
+            onClick: () => connectWithAuthProvider("google"),
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "google",
+            fullWidth: true,
+            children: /* @__PURE__ */ jsxs("span", { style: walletButtonContentStyle, children: [
+              /* @__PURE__ */ jsxs("span", { style: walletButtonLeftStyle, children: [
+                /* @__PURE__ */ jsx2(Icon2, { type: "google", size: 20 }),
+                /* @__PURE__ */ jsx2(Text, { variant: "captionBold", children: "Continue with Google" })
+              ] }),
+              /* @__PURE__ */ jsx2("span", { style: walletButtonRightStyle, children: /* @__PURE__ */ jsx2(Icon2, { type: "chevron-right", size: 16, color: theme.secondary }) })
+            ] })
+          }
+        ),
+        allowedProviders.includes("apple") && /* @__PURE__ */ jsx2(
+          Button,
+          {
+            onClick: () => connectWithAuthProvider("apple"),
+            disabled: isConnectingState,
+            isLoading: isConnectingState && providerType === "apple",
+            fullWidth: true,
+            children: /* @__PURE__ */ jsxs("span", { style: walletButtonContentStyle, children: [
+              /* @__PURE__ */ jsxs("span", { style: walletButtonLeftStyle, children: [
+                /* @__PURE__ */ jsx2(Icon2, { type: "apple", size: 20 }),
+                /* @__PURE__ */ jsx2(Text, { variant: "captionBold", children: "Continue with Apple" })
+              ] }),
+              /* @__PURE__ */ jsx2("span", { style: walletButtonRightStyle, children: /* @__PURE__ */ jsx2(Icon2, { type: "chevron-right", size: 16, color: theme.secondary }) })
+            ] })
+          }
+        ),
+        allowedProviders.includes("injected") && (isExtensionInstalled.isInstalled || discoveredWallets.length > 0) && (!isMobile || isExtensionInstalled.isInstalled) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          showDivider && /* @__PURE__ */ jsxs("div", { style: dividerStyle, children: [
+            /* @__PURE__ */ jsx2("div", { style: dividerLineStyle }),
+            /* @__PURE__ */ jsx2("span", { style: dividerTextStyle, children: "OR" }),
+            /* @__PURE__ */ jsx2("div", { style: dividerLineStyle })
+          ] }),
+          walletsToShowInline.map((wallet) => /* @__PURE__ */ jsx2(
+            Button,
+            {
+              onClick: () => connectWithWallet(wallet),
+              disabled: isConnectingState,
+              isLoading: isConnectingState && providerType === "injected" && selectedWalletId === wallet.id,
+              fullWidth: true,
+              children: /* @__PURE__ */ jsxs("span", { style: walletButtonContentStyle, children: [
+                /* @__PURE__ */ jsxs("span", { style: walletButtonLeftStyle, children: [
+                  wallet.id === "phantom" ? /* @__PURE__ */ jsx2(BoundedIcon, { type: "phantom", size: 20, background: "#aba0f2", color: "white" }) : wallet.icon ? /* @__PURE__ */ jsx2("img", { src: wallet.icon, alt: wallet.name, style: walletIconStyle }) : /* @__PURE__ */ jsx2(BoundedIcon, { type: "wallet", size: 10, background: theme.aux, color: theme.text }),
+                  /* @__PURE__ */ jsx2("span", { style: walletNameContainerStyle, children: /* @__PURE__ */ jsx2(Text, { variant: "captionBold", children: wallet.name }) })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { style: walletButtonRightStyle, children: [
+                  wallet.addressTypes && wallet.addressTypes.length > 0 && /* @__PURE__ */ jsx2("span", { style: chainIndicatorsStyle, children: wallet.addressTypes.map((addressType) => /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(ChainIcon, { addressType, size: 8 }) }, `${wallet.id}-chain-${addressType}`)) }),
+                  /* @__PURE__ */ jsx2(Icon2, { type: "chevron-right", size: 16, color: theme.secondary })
+                ] })
+              ] })
+            },
+            wallet.id
+          )),
+          shouldShowOtherWalletsButton && /* @__PURE__ */ jsx2(Button, { onClick: () => setShowOtherWallets(true), disabled: isConnectingState, fullWidth: true, children: /* @__PURE__ */ jsxs("span", { style: walletButtonContentStyle, children: [
+            /* @__PURE__ */ jsxs("span", { style: walletButtonLeftStyle, children: [
+              /* @__PURE__ */ jsx2(BoundedIcon, { type: "wallet", size: 20, background: theme.aux, color: theme.text }),
+              /* @__PURE__ */ jsx2(Text, { variant: "captionBold", children: "Other Wallets" })
+            ] }),
+            /* @__PURE__ */ jsx2("span", { style: walletButtonRightStyle, children: /* @__PURE__ */ jsx2(Icon2, { type: "chevron-right", size: 16, color: theme.secondary }) })
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+        /* @__PURE__ */ jsx2(Text, { variant: "label", color: theme.secondary, children: "Powered by" }),
+        /* @__PURE__ */ jsx2(Icon2, { type: "phantom", size: 16 }),
+        /* @__PURE__ */ jsx2(Text, { variant: "label", color: theme.secondary, children: "Phantom" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/ConnectedModalContent.tsx
+import { useState as useState6, useEffect as useEffect4 } from "react";
+import { Button as Button2, Text as Text2, useTheme as useTheme3, ModalHeader as ModalHeader2 } from "@phantom/wallet-sdk-ui";
+
+// src/hooks/useDisconnect.ts
+import { useCallback as useCallback4, useState as useState5 } from "react";
+function useDisconnect() {
+  const { sdk } = usePhantom();
+  const [isDisconnecting, setIsDisconnecting] = useState5(false);
+  const [error, setError] = useState5(null);
+  const disconnect = useCallback4(async () => {
+    if (!sdk) {
+      throw new Error("SDK not initialized");
+    }
+    setIsDisconnecting(true);
+    setError(null);
+    try {
+      await sdk.disconnect();
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      setError(error2);
+      throw err;
+    } finally {
+      setIsDisconnecting(false);
+    }
+  }, [sdk]);
+  return {
+    disconnect,
+    isDisconnecting,
+    error
+  };
+}
+
+// src/components/ConnectedModalContent.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ConnectedModalContent({ onClose, hideCloseButton = false }) {
+  const theme = useTheme3();
+  const { addresses } = usePhantom();
+  const { disconnect } = useDisconnect();
+  const [isDisconnecting, setIsDisconnecting] = useState6(false);
+  const [disconnectError, setDisconnectError] = useState6(null);
+  useEffect4(() => {
+    setDisconnectError(null);
+  }, []);
+  const handleDisconnect = async () => {
+    try {
+      setIsDisconnecting(true);
+      setDisconnectError(null);
+      await disconnect();
+      onClose();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setDisconnectError(error);
+    } finally {
+      setIsDisconnecting(false);
+    }
+  };
+  const accountListStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    width: "100%",
+    minWidth: 0,
+    boxSizing: "border-box"
+  };
+  const accountItemStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    width: "100%",
+    minWidth: 0,
+    boxSizing: "border-box"
+  };
+  const addressTextStyle = {
+    fontFamily: "monospace",
+    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%",
+    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__ */ jsxs2("div", { style: contentWrapperStyle, children: [
+    /* @__PURE__ */ jsx3(ModalHeader2, { title: "Wallet", onClose, hideCloseButton }),
+    /* @__PURE__ */ jsxs2("div", { style: accountListContainerStyle, children: [
+      disconnectError && /* @__PURE__ */ jsx3("div", { style: errorContainerStyle, children: /* @__PURE__ */ jsx3(Text2, { variant: "caption", color: theme.error, children: "Failed to disconnect" }) }),
+      addresses && addresses.length > 0 && /* @__PURE__ */ jsx3("div", { style: accountListStyle, children: addresses.map((account, index) => /* @__PURE__ */ jsxs2("div", { style: accountItemStyle, children: [
+        /* @__PURE__ */ jsx3(Text2, { variant: "label", color: theme.secondary, style: { textTransform: "uppercase" }, children: account.addressType }),
+        /* @__PURE__ */ jsx3("div", { style: addressTextStyle, children: /* @__PURE__ */ jsx3(Text2, { variant: "caption", children: account.address }) })
+      ] }, index)) })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { style: disconnectButtonContainerStyle, children: /* @__PURE__ */ jsx3(Button2, { onClick: handleDisconnect, disabled: isDisconnecting, isLoading: isDisconnecting, fullWidth: true, children: /* @__PURE__ */ jsx3(Text2, { variant: "captionBold", children: isDisconnecting ? "Disconnecting..." : "Disconnect" }) }) })
+  ] });
+}
+
+// src/components/SpendingLimitModalContent.tsx
+import { Text as Text3, Button as Button3, useTheme as useTheme4 } from "@phantom/wallet-sdk-ui";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function SpendingLimitModalContent({ onClose }) {
+  const theme = useTheme4();
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 16, padding: 32 }, children: [
+    /* @__PURE__ */ jsx4(Text3, { variant: "caption", color: theme.secondary, children: "You've reached the maximum daily limit allowed to spend by this application." }),
+    /* @__PURE__ */ jsx4(Button3, { fullWidth: true, onClick: onClose, children: /* @__PURE__ */ jsx4(Text3, { variant: "captionBold", children: "Close" }) })
+  ] });
+}
+
+// src/ModalProvider.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ModalProvider({ children, appIcon, appName }) {
+  const { isConnected, errors, clearError } = usePhantom();
+  const [isModalOpen, setIsModalOpen] = useState7(false);
+  const isMobile = useMemo2(() => isMobileDevice2(), []);
+  const openModal = useCallback5(() => {
+    setIsModalOpen(true);
+  }, []);
+  const closeModal = useCallback5(() => {
+    setIsModalOpen(false);
+    clearError("spendingLimit");
+  }, [clearError]);
+  const isSpendingLimitOpen = !!errors.spendingLimit;
+  const modalContextValue = useMemo2(
+    () => ({
+      isModalOpen,
+      openModal,
+      closeModal
+    }),
+    [isModalOpen, openModal, closeModal]
+  );
+  return /* @__PURE__ */ jsxs4(ModalContext.Provider, { value: modalContextValue, children: [
+    children,
+    /* @__PURE__ */ jsx5(
+      Modal,
+      {
+        isVisible: isModalOpen || isSpendingLimitOpen,
+        onClose: closeModal,
+        appIcon,
+        appName,
+        isMobile,
+        children: isSpendingLimitOpen ? /* @__PURE__ */ jsx5(SpendingLimitModalContent, { onClose: closeModal }) : isConnected ? /* @__PURE__ */ jsx5(ConnectedModalContent, { onClose: closeModal }) : /* @__PURE__ */ jsx5(ConnectModalContent, { appIcon, appName, onClose: closeModal })
+      }
+    )
+  ] });
+}
+
+// src/PhantomProvider.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function PhantomProvider({ children, config, debugConfig, theme, appIcon, appName }) {
+  const memoizedConfig = useMemo3(() => config, [config]);
+  const resolvedTheme = useMemo3(() => mergeTheme(theme || darkTheme), [theme]);
+  const [sdk, setSdk] = useState8(null);
+  const [isClient, setIsClient] = useState8(false);
+  const [isConnected, setIsConnected] = useState8(false);
+  const [isConnecting, setIsConnecting] = useState8(false);
+  const [isLoading, setIsLoading] = useState8(true);
+  const [errors, setErrors] = useState8({});
+  const [addresses, setAddresses] = useState8([]);
+  const [user, setUser] = useState8(null);
+  useEffect5(() => {
     setIsClient(true);
   }, []);
-  useEffect(() => {
+  useEffect5(() => {
     if (!isClient)
       return;
     const sdkInstance = new BrowserSDK(memoizedConfig);
     setSdk(sdkInstance);
-    return () => {
-      sdkInstance.disconnect().catch(() => {
-      });
-    };
   }, [isClient, memoizedConfig]);
-  useEffect(() => {
+  useEffect5(() => {
     if (!sdk)
       return;
     const handleConnectStart = () => {
       setIsConnecting(true);
-      setConnectError(null);
+      setErrors((prev) => ({ ...prev, connect: void 0 }));
     };
-    const handleConnect = async () => {
+    const handleConnect = async (data) => {
       try {
         setIsConnected(true);
         setIsConnecting(false);
-        const providerInfo = sdk.getCurrentProviderInfo();
-        setCurrentProviderType(providerInfo?.type || null);
+        setUser(data);
         const addrs = await sdk.getAddresses();
         setAddresses(addrs);
-        setWalletId(sdk.getWalletId());
       } catch (err) {
         console.error("Error connecting:", err);
         try {
@@ -57,127 +805,91 @@ function PhantomProvider({ children, config, debugConfig }) {
     const handleConnectError = (errorData) => {
       setIsConnecting(false);
       setIsConnected(false);
-      setConnectError(new Error(errorData.error || "Connection failed"));
+      const isAutoConnectNoSession = errorData.source === "auto-connect" && (errorData.error === "No valid session found" || errorData.error === "No trusted connections available");
+      if (isAutoConnectNoSession) {
+        setErrors((prev) => ({ ...prev, connect: void 0 }));
+      } else {
+        setErrors((prev) => ({ ...prev, connect: new Error(errorData.error || "Connection failed") }));
+      }
+      setAddresses([]);
     };
     const handleDisconnect = () => {
       setIsConnected(false);
       setIsConnecting(false);
-      setConnectError(null);
+      setErrors({});
       setAddresses([]);
-      setWalletId(null);
+      setUser(null);
+    };
+    const handleSpendingLimitReached = () => {
+      setErrors((prev) => ({ ...prev, spendingLimit: true }));
     };
     sdk.on("connect_start", handleConnectStart);
     sdk.on("connect", handleConnect);
     sdk.on("connect_error", handleConnectError);
     sdk.on("disconnect", handleDisconnect);
+    sdk.on("spending_limit_reached", handleSpendingLimitReached);
     return () => {
       sdk.off("connect_start", handleConnectStart);
       sdk.off("connect", handleConnect);
       sdk.off("connect_error", handleConnectError);
       sdk.off("disconnect", handleDisconnect);
+      sdk.off("spending_limit_reached", handleSpendingLimitReached);
     };
   }, [sdk]);
-  useEffect(() => {
+  useEffect5(() => {
     if (!debugConfig || !sdk)
       return;
     sdk.configureDebug(debugConfig);
   }, [sdk, debugConfig]);
-  useEffect(() => {
+  useEffect5(() => {
     if (!isClient || !sdk)
       return;
     const initialize = async () => {
       try {
-        const available = await BrowserSDK.isPhantomInstalled();
-        setIsPhantomAvailable(available);
-      } catch (err) {
-        console.error("Error checking Phantom extension:", err);
-        setIsPhantomAvailable(false);
-      }
-      if (memoizedConfig.autoConnect !== false) {
-        sdk.autoConnect().catch(() => {
-        });
+        await sdk.autoConnect();
+      } catch (error) {
+        console.error("Auto-connect error:", error);
       }
+      setIsLoading(false);
     };
     initialize();
-  }, [sdk, memoizedConfig.autoConnect, isClient]);
-  const value = useMemo(
+  }, [sdk, isClient]);
+  const clearError = useCallback6((key) => {
+    setErrors((prev) => {
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
+  const value = useMemo3(
     () => ({
       sdk,
       isConnected,
       isConnecting,
-      connectError,
+      isLoading,
+      errors,
       addresses,
-      walletId,
-      currentProviderType,
-      isPhantomAvailable,
-      isClient
+      isClient,
+      user,
+      theme: resolvedTheme,
+      allowedProviders: memoizedConfig.providers,
+      clearError
     }),
-    [sdk, isConnected, isConnecting, connectError, addresses, walletId, currentProviderType, isPhantomAvailable, isClient]
-  );
-  return /* @__PURE__ */ jsx(PhantomContext.Provider, { value, children });
-}
-function usePhantom() {
-  const context = useContext(PhantomContext);
-  if (!context) {
-    throw new Error("usePhantom must be used within a PhantomProvider");
-  }
-  return context;
-}
-
-// src/hooks/useConnect.ts
-import { useCallback } from "react";
-function useConnect() {
-  const { sdk, isConnecting, connectError, currentProviderType, isPhantomAvailable } = usePhantom();
-  const connect = useCallback(
-    async (options) => {
-      if (!sdk) {
-        throw new Error("SDK not initialized");
-      }
-      try {
-        const result = await sdk.connect(options);
-        return result;
-      } catch (err) {
-        console.error("Error connecting to Phantom:", err);
-        throw err;
-      }
-    },
-    [sdk]
+    [
+      sdk,
+      isConnected,
+      isConnecting,
+      isLoading,
+      errors,
+      addresses,
+      isClient,
+      user,
+      resolvedTheme,
+      memoizedConfig.providers,
+      clearError
+    ]
   );
-  return {
-    connect,
-    isConnecting,
-    error: connectError,
-    currentProviderType,
-    isPhantomAvailable
-  };
-}
-
-// src/hooks/useDisconnect.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
-function useDisconnect() {
-  const { sdk } = usePhantom();
-  const [isDisconnecting, setIsDisconnecting] = useState2(false);
-  const [error, setError] = useState2(null);
-  const disconnect = useCallback2(async () => {
-    if (!sdk) {
-      throw new Error("SDK not initialized");
-    }
-    setIsDisconnecting(true);
-    setError(null);
-    try {
-      await sdk.disconnect();
-    } catch (err) {
-      setError(err);
-      throw err;
-    } finally {
-      setIsDisconnecting(false);
-    }
-  }, [sdk]);
-  return {
-    disconnect,
-    isDisconnecting,
-    error
-  };
+  return /* @__PURE__ */ jsx6(ThemeProvider, { theme: resolvedTheme, children: /* @__PURE__ */ jsx6(PhantomContext.Provider, { value, children: /* @__PURE__ */ jsx6(ModalProvider, { appIcon, appName, children }) }) });
 }
 
 // src/hooks/useAccounts.ts
@@ -186,49 +898,16 @@ function useAccounts() {
   return isConnected ? addresses : null;
 }
 
-// src/hooks/useIsExtensionInstalled.ts
-import * as React from "react";
-import { waitForPhantomExtension } from "@phantom/browser-sdk";
-function useIsExtensionInstalled() {
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [isInstalled, setIsInstalled] = React.useState(false);
-  React.useEffect(() => {
-    let isMounted = true;
-    const checkExtension = async () => {
-      try {
-        setIsLoading(true);
-        const result = await waitForPhantomExtension(3e3);
-        if (isMounted) {
-          setIsInstalled(result);
-        }
-      } catch (error) {
-        if (isMounted) {
-          setIsInstalled(false);
-        }
-      } finally {
-        if (isMounted) {
-          setIsLoading(false);
-        }
-      }
-    };
-    checkExtension();
-    return () => {
-      isMounted = false;
-    };
-  }, []);
-  return { isLoading, isInstalled };
-}
-
 // src/hooks/useAutoConfirm.ts
-import { useCallback as useCallback3, useState as useState4, useEffect as useEffect3 } from "react";
+import { useCallback as useCallback7, useState as useState9, useEffect as useEffect6 } from "react";
 function useAutoConfirm() {
-  const { sdk, currentProviderType } = usePhantom();
-  const [status, setStatus] = useState4(null);
-  const [supportedChains, setSupportedChains] = useState4(null);
-  const [isLoading, setIsLoading] = useState4(false);
-  const [error, setError] = useState4(null);
-  const isInjected = currentProviderType === "injected";
-  const enable = useCallback3(
+  const { sdk, user } = usePhantom();
+  const [status, setStatus] = useState9(null);
+  const [supportedChains, setSupportedChains] = useState9(null);
+  const [isLoading, setIsLoading] = useState9(false);
+  const [error, setError] = useState9(null);
+  const isInjected = user?.authProvider === "injected";
+  const enable = useCallback7(
     async (params) => {
       if (!sdk) {
         throw new Error("SDK not initialized");
@@ -252,7 +931,7 @@ function useAutoConfirm() {
     },
     [sdk, isInjected]
   );
-  const disable = useCallback3(async () => {
+  const disable = useCallback7(async () => {
     if (!sdk) {
       throw new Error("SDK not initialized");
     }
@@ -273,7 +952,7 @@ function useAutoConfirm() {
       setIsLoading(false);
     }
   }, [sdk, isInjected]);
-  const refetch = useCallback3(async () => {
+  const refetch = useCallback7(async () => {
     if (!sdk || !isInjected) {
       return;
     }
@@ -293,7 +972,7 @@ function useAutoConfirm() {
       setIsLoading(false);
     }
   }, [sdk, isInjected]);
-  useEffect3(() => {
+  useEffect6(() => {
     if (sdk && isInjected) {
       refetch();
     } else {
@@ -314,55 +993,175 @@ function useAutoConfirm() {
 }
 
 // src/hooks/useSolana.ts
+import { AddressType } from "@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(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
+import { AddressType as AddressType2 } from "@phantom/browser-sdk";
 function useEthereum() {
-  const { sdk, isConnected, isClient } = usePhantom();
-  if (!isClient || !sdk) {
+  const { sdk, isClient, isLoading } = usePhantom();
+  if (!isClient || !sdk || isLoading) {
     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
+  const enabledAddressTypes = sdk.getEnabledAddressTypes();
+  const isAvailable = enabledAddressTypes.includes(AddressType2.ethereum);
+  if (!isAvailable) {
+    return {
+      ethereum: {},
+      isAvailable: false
+    };
+  }
+  try {
+    return {
+      ethereum: sdk.ethereum,
+      isAvailable: true
+    };
+  } catch (error) {
+    return {
+      ethereum: {},
+      isAvailable: false
+    };
+  }
+}
+
+// src/hooks/index.ts
+import { useTheme as useTheme5 } from "@phantom/wallet-sdk-ui";
+
+// src/components/ConnectButton.tsx
+import { useMemo as useMemo4 } from "react";
+import { useTheme as useTheme6 } from "@phantom/wallet-sdk-ui";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ConnectButton({ addressType, fullWidth = false }) {
+  const theme = useTheme6();
+  const { open } = useModal();
+  const { isConnected, addresses } = usePhantom();
+  const displayAddress = useMemo4(() => {
+    if (!addresses || addresses.length === 0)
+      return null;
+    if (addressType) {
+      return addresses.find((addr) => addr.addressType === addressType);
+    }
+    return addresses[0];
+  }, [addresses, addressType]);
+  const truncatedAddress = useMemo4(() => {
+    if (!displayAddress)
+      return "";
+    const addr = displayAddress.address;
+    if (addr.length <= 12)
+      return addr;
+    return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+  }, [displayAddress]);
+  const buttonStyle = {
+    width: fullWidth ? "100%" : "auto",
+    padding: "12px 16px",
+    border: "none",
+    borderRadius: theme.borderRadius,
+    fontFamily: theme.typography.captionBold.fontFamily,
+    fontSize: theme.typography.captionBold.fontSize,
+    fontStyle: theme.typography.captionBold.fontStyle,
+    fontWeight: theme.typography.captionBold.fontWeight,
+    lineHeight: theme.typography.captionBold.lineHeight,
+    letterSpacing: theme.typography.captionBold.letterSpacing,
+    cursor: "pointer",
+    transition: "background-color 0.2s",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    background: theme.aux,
+    color: theme.text
+  };
+  const connectedButtonStyle = {
+    ...buttonStyle,
+    background: theme.aux,
+    cursor: "pointer"
+  };
+  if (isConnected && displayAddress) {
+    return /* @__PURE__ */ jsx7("button", { style: connectedButtonStyle, onClick: open, children: /* @__PURE__ */ jsx7("span", { style: { fontFamily: "monospace" }, children: truncatedAddress }) });
+  }
+  return /* @__PURE__ */ jsx7("button", { style: buttonStyle, onClick: open, children: "Connect Wallet" });
+}
+
+// src/components/ConnectBox.tsx
+import { useMemo as useMemo5 } from "react";
+import { useTheme as useTheme7 } from "@phantom/wallet-sdk-ui";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function ConnectBox({ maxWidth = "350px", transparent = false, appIcon, appName }) {
+  const theme = useTheme7();
+  const { isConnected } = usePhantom();
+  const boxStyle = useMemo5(() => {
+    const style = {
+      width: "100%",
+      maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
+      position: "relative",
+      overflow: "hidden"
+    };
+    if (!transparent) {
+      style.backgroundColor = theme.background;
+      style.borderRadius = theme.borderRadius;
+    }
+    return style;
+  }, [maxWidth, transparent, theme.background, theme.borderRadius]);
+  const noOp = () => {
   };
+  return /* @__PURE__ */ jsx8("div", { style: boxStyle, children: isConnected ? /* @__PURE__ */ jsx8(ConnectedModalContent, { onClose: noOp, hideCloseButton: true }) : /* @__PURE__ */ jsx8(ConnectModalContent, { appIcon, appName, onClose: noOp, hideCloseButton: true }) });
 }
 
 // src/index.ts
-import { NetworkId, AddressType, DebugLevel, debug } from "@phantom/browser-sdk";
+import { darkTheme as darkTheme2, lightTheme, mergeTheme as mergeTheme2 } from "@phantom/wallet-sdk-ui";
+import { NetworkId, AddressType as AddressType3, DebugLevel, debug, isMobileDevice as isMobileDevice3 } from "@phantom/browser-sdk";
 export {
-  AddressType,
+  AddressType3 as AddressType,
+  ConnectBox,
+  ConnectButton,
   DebugLevel,
   NetworkId,
   PhantomProvider,
+  darkTheme2 as darkTheme,
   debug,
+  isMobileDevice3 as isMobileDevice,
+  lightTheme,
+  mergeTheme2 as mergeTheme,
   useAccounts,
   useAutoConfirm,
   useConnect,
   useDisconnect,
+  useDiscoveredWallets,
   useEthereum,
   useIsExtensionInstalled,
+  useIsPhantomLoginAvailable,
+  useModal,
   usePhantom,
-  useSolana
+  useSolana,
+  useTheme5 as useTheme
 };