@phantom/react-native-sdk 1.0.0-beta.21 → 1.0.0-beta.24

package/dist/index.js

@@ -33,19 +33,424 @@ __export(src_exports, {
   AddressType: () => import_client.AddressType,
   NetworkId: () => import_constants3.NetworkId,
   PhantomProvider: () => PhantomProvider,
+  darkTheme: () => import_wallet_sdk_ui5.darkTheme,
+  lightTheme: () => import_wallet_sdk_ui5.lightTheme,
   useAccounts: () => useAccounts,
   useConnect: () => useConnect,
   useDisconnect: () => useDisconnect,
   useEthereum: () => useEthereum,
+  useModal: () => useModal,
   usePhantom: () => usePhantom,
   useSolana: () => useSolana
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/PhantomProvider.tsx
-var import_react = require("react");
+var import_react8 = require("react");
 var import_embedded_provider_core = require("@phantom/embedded-provider-core");
 var import_constants2 = require("@phantom/constants");
+var import_wallet_sdk_ui4 = require("@phantom/wallet-sdk-ui");
+
+// src/ModalProvider.tsx
+var import_react7 = require("react");
+
+// src/ModalContext.ts
+var import_react = require("react");
+var ModalContext = (0, import_react.createContext)(void 0);
+function useModal() {
+  const context = (0, import_react.useContext)(ModalContext);
+  if (!context) {
+    throw new Error("useModal must be used within a ModalProvider");
+  }
+  return {
+    open: context.openModal,
+    close: context.closeModal,
+    isOpened: context.isModalOpen
+  };
+}
+
+// src/components/Modal.tsx
+var import_react_native = require("react-native");
+var import_wallet_sdk_ui = require("@phantom/wallet-sdk-ui");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Modal({ isVisible, onClose, children }) {
+  const theme = (0, import_wallet_sdk_ui.useTheme)();
+  const styles = import_react_native.StyleSheet.create({
+    bottomSheet: {
+      backgroundColor: theme.background,
+      borderTopLeftRadius: 32,
+      borderTopRightRadius: 32,
+      bottom: 0,
+      left: 0,
+      paddingBottom: 20,
+      position: "absolute",
+      right: 0
+    },
+    handle: {
+      alignSelf: "center",
+      backgroundColor: theme.secondary,
+      borderRadius: 2.5,
+      height: 5,
+      marginTop: 12,
+      opacity: 0.3,
+      width: 40
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Modal, { visible: isVisible, transparent: true, animationType: "slide", onRequestClose: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.SafeAreaView, { style: styles.bottomSheet, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.handle }),
+    children
+  ] }) });
+}
+
+// src/PhantomContext.tsx
+var import_react2 = require("react");
+var PhantomContext = (0, import_react2.createContext)(void 0);
+function usePhantom() {
+  const context = (0, import_react2.useContext)(PhantomContext);
+  if (context === void 0) {
+    throw new Error("usePhantom must be used within a PhantomProvider");
+  }
+  return context;
+}
+
+// src/components/ConnectModalContent.tsx
+var import_react4 = require("react");
+var import_react_native2 = require("react-native");
+var import_wallet_sdk_ui2 = require("@phantom/wallet-sdk-ui");
+
+// src/hooks/useConnect.ts
+var import_react3 = require("react");
+function useConnect() {
+  const { sdk, isConnecting, connectError, setWalletId } = usePhantom();
+  const connect = (0, import_react3.useCallback)(
+    async (options) => {
+      if (!sdk) {
+        throw new Error("SDK not initialized");
+      }
+      try {
+        const result = await sdk.connect(options);
+        if (result.status === "completed" && result.walletId) {
+          setWalletId(result.walletId);
+        }
+        return result;
+      } catch (err) {
+        const error = err;
+        throw error;
+      }
+    },
+    [sdk, setWalletId]
+  );
+  return {
+    connect,
+    isConnecting,
+    error: connectError
+  };
+}
+
+// src/components/ConnectModalContent.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ConnectModalContent({ appIcon, onClose }) {
+  const theme = (0, import_wallet_sdk_ui2.useTheme)();
+  const { isConnecting: contextIsConnecting, allowedProviders } = usePhantom();
+  const { connect } = useConnect();
+  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 isLoading = contextIsConnecting || isConnecting;
+  const errorBackgroundColor = (0, import_wallet_sdk_ui2.hexToRgba)(theme.error, 0.1);
+  const errorBorderColor = (0, import_wallet_sdk_ui2.hexToRgba)(theme.error, 0.3);
+  const errorTextColor = theme.error;
+  const connectWithAuthProvider = (0, import_react4.useCallback)(
+    async (provider) => {
+      try {
+        setIsConnecting(true);
+        setError(null);
+        setProviderType(provider);
+        await connect({ provider });
+        onClose();
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+      } finally {
+        setIsConnecting(false);
+        setProviderType(null);
+      }
+    },
+    [connect, onClose]
+  );
+  const styles = import_react_native2.StyleSheet.create({
+    appIcon: {
+      borderRadius: 28,
+      height: 56,
+      marginBottom: 12,
+      width: 56
+    },
+    buttonContainer: {
+      alignItems: "center",
+      flexDirection: "column",
+      gap: 12,
+      paddingHorizontal: 32,
+      width: "100%"
+    },
+    buttonContent: {
+      alignItems: "center",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      width: "100%"
+    },
+    buttonContentLeft: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: 8
+    },
+    container: {
+      alignItems: "center",
+      flexDirection: "column",
+      gap: 12,
+      paddingBottom: 24,
+      width: "100%"
+    },
+    errorContainer: {
+      backgroundColor: errorBackgroundColor,
+      borderColor: errorBorderColor,
+      borderRadius: parseInt(theme.borderRadius),
+      borderWidth: 1,
+      padding: 12,
+      width: "100%"
+    },
+    errorText: {
+      color: errorTextColor,
+      fontSize: 14
+    },
+    footer: {
+      alignItems: "center",
+      borderColor: theme.aux,
+      borderTopWidth: 1,
+      flexDirection: "row",
+      gap: 4,
+      justifyContent: "center",
+      marginTop: 24,
+      padding: 16,
+      width: "100%"
+    },
+    loadingContainer: {
+      alignItems: "center",
+      flexDirection: "column",
+      gap: 12,
+      justifyContent: "center",
+      padding: 24
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.ModalHeader, { title: "Login or Sign Up", onClose }),
+    appIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Image, { testID: "app-icon", source: { uri: appIcon }, style: styles.appIcon }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.loadingContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.ActivityIndicator, { testID: "activity-indicator", size: "large", color: theme.brand }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "label", color: theme.secondary, children: "Loading..." })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.buttonContainer, children: [
+      error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.errorContainer, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { style: styles.errorText, children: error.message }) }),
+      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,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.buttonContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.buttonContentLeft, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "google", size: 20, color: theme.text }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "captionBold", children: "Continue with Google" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "chevron-right", size: 16, color: theme.secondary })
+          ] })
+        }
+      ),
+      allowedProviders.includes("apple") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_wallet_sdk_ui2.Button,
+        {
+          onClick: () => connectWithAuthProvider("apple"),
+          disabled: isConnecting,
+          isLoading: isConnecting && providerType === "apple",
+          fullWidth: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.buttonContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.buttonContentLeft, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "apple", size: 20, color: theme.text }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "captionBold", children: "Continue with Apple" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "chevron-right", size: 16, color: theme.secondary })
+          ] })
+        }
+      ),
+      allowedProviders.includes("x") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_wallet_sdk_ui2.Button,
+        {
+          onClick: () => connectWithAuthProvider("x"),
+          disabled: isConnecting,
+          isLoading: isConnecting && providerType === "x",
+          fullWidth: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.buttonContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.buttonContentLeft, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "x", size: 20, color: theme.text }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "captionBold", children: "Continue with X" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "chevron-right", size: 16, color: theme.secondary })
+          ] })
+        }
+      ),
+      allowedProviders.includes("tiktok") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_wallet_sdk_ui2.Button,
+        {
+          onClick: () => connectWithAuthProvider("tiktok"),
+          disabled: isConnecting,
+          isLoading: isConnecting && providerType === "tiktok",
+          fullWidth: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.buttonContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.buttonContentLeft, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Icon, { type: "tiktok", size: 20, color: theme.text }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_wallet_sdk_ui2.Text, { variant: "captionBold", children: "Continue with TikTok" })
+            ] }),
+            /* @__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)(import_react_native2.View, { style: styles.footer, 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, color: theme.secondary }),
+      /* @__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_react_native3 = require("react-native");
+var import_wallet_sdk_ui3 = require("@phantom/wallet-sdk-ui");
+
+// src/hooks/useDisconnect.ts
+var import_react5 = 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 () => {
+    if (!sdk) {
+      throw new Error("SDK not initialized");
+    }
+    setIsDisconnecting(true);
+    setError(null);
+    try {
+      await sdk.disconnect();
+    } catch (err) {
+      const error2 = err;
+      setError(error2);
+      throw error2;
+    } finally {
+      setIsDisconnecting(false);
+    }
+  }, [sdk]);
+  return {
+    disconnect,
+    isDisconnecting,
+    error
+  };
+}
+
+// src/components/ConnectedModalContent.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ConnectedModalContent({ onClose }) {
+  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);
+  const errorBackgroundColor = (0, import_wallet_sdk_ui3.hexToRgba)(theme.error, 0.1);
+  const errorBorderColor = (0, import_wallet_sdk_ui3.hexToRgba)(theme.error, 0.3);
+  (0, import_react6.useEffect)(() => {
+    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 styles = import_react_native3.StyleSheet.create({
+    accountItem: {
+      flexDirection: "column",
+      gap: 8,
+      width: "100%"
+    },
+    accountList: {
+      flexDirection: "column",
+      gap: 16,
+      width: "100%"
+    },
+    accountTypeText: {
+      textTransform: "uppercase"
+    },
+    addressText: {
+      fontFamily: "monospace"
+    },
+    container: {
+      alignItems: "center",
+      flexDirection: "column",
+      gap: 24,
+      paddingBottom: 24,
+      paddingHorizontal: 32,
+      width: "100%"
+    },
+    errorContainer: {
+      backgroundColor: errorBackgroundColor,
+      borderColor: errorBorderColor,
+      borderRadius: theme.borderRadius,
+      borderWidth: 1,
+      padding: 12,
+      width: "100%"
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.ModalHeader, { title: "Wallet", onClose }),
+    addresses && addresses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: styles.accountList, children: addresses.map((account, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles.accountItem, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.Text, { variant: "label", color: theme.secondary, style: styles.accountTypeText, children: account.addressType }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.Text, { variant: "caption", style: styles.addressText, children: account.address })
+    ] }, index)) }),
+    disconnectError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: styles.errorContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_sdk_ui3.Text, { variant: "caption", color: theme.error, children: "Failed to disconnect" }) }),
+    /* @__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_runtime4 = require("react/jsx-runtime");
+function ModalProvider({ children, appIcon, appName }) {
+  const { isConnected } = usePhantom();
+  const [isModalOpen, setIsModalOpen] = (0, import_react7.useState)(false);
+  const openModal = (0, import_react7.useCallback)(() => {
+    setIsModalOpen(true);
+  }, []);
+  const closeModal = (0, import_react7.useCallback)(() => {
+    setIsModalOpen(false);
+  }, []);
+  const modalContextValue = (0, import_react7.useMemo)(
+    () => ({
+      isModalOpen,
+      openModal,
+      closeModal
+    }),
+    [isModalOpen, openModal, closeModal]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ModalContext.Provider, { value: modalContextValue, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Modal, { isVisible: isModalOpen, onClose: closeModal, appIcon, appName, isMobile: true, children: isConnected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ConnectedModalContent, { onClose: closeModal }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ConnectModalContent, { appIcon, appName, onClose: closeModal }) })
+  ] });
+}
 
 // src/providers/embedded/storage.ts
 var SecureStore = __toESM(require("expo-secure-store"));
@@ -128,7 +533,7 @@ var ExpoSecureStorage = class {
 
 // src/providers/embedded/auth.ts
 var WebBrowser = __toESM(require("expo-web-browser"));
-var import_react_native = require("react-native");
+var import_react_native4 = require("react-native");
 var import_constants = require("@phantom/constants");
 var ExpoAuthProvider = class {
   async authenticate(options) {
@@ -153,9 +558,9 @@ var ExpoAuthProvider = class {
         // OAuth session management - defaults to allow refresh unless explicitly clearing after logout
         clear_previous_session: (phantomOptions.clearPreviousSession ?? false).toString(),
         allow_refresh: (phantomOptions.allowRefresh ?? true).toString(),
-        sdk_version: "1.0.0-beta.21",
+        sdk_version: "1.0.0-beta.24",
         sdk_type: "react-native",
-        platform: import_react_native.Platform.OS
+        platform: import_react_native4.Platform.OS
       });
       if (provider) {
         console.log("[ExpoAuthProvider] Provider specified, will skip selection", { provider });
@@ -185,7 +590,6 @@ var ExpoAuthProvider = class {
         const url = new URL(result.url);
         const walletId = url.searchParams.get("wallet_id");
         const organizationId = url.searchParams.get("organization_id");
-        const provider2 = url.searchParams.get("provider");
         const accountDerivationIndex = url.searchParams.get("selected_account_index");
         const expiresInMs = url.searchParams.get("expires_in_ms");
         const authUserId = url.searchParams.get("auth_user_id");
@@ -199,7 +603,7 @@ var ExpoAuthProvider = class {
         console.log("[ExpoAuthProvider] Auth redirect parameters", {
           walletId,
           organizationId,
-          provider: provider2,
+          provider,
           accountDerivationIndex,
           expiresInMs,
           authUserId
@@ -207,7 +611,7 @@ var ExpoAuthProvider = class {
         return {
           walletId,
           organizationId,
-          provider: provider2 || void 0,
+          provider: provider || void 0,
           accountDerivationIndex: accountDerivationIndex ? parseInt(accountDerivationIndex) : 0,
           expiresInMs: expiresInMs ? parseInt(expiresInMs) : 0,
           authUserId: authUserId || void 0
@@ -230,7 +634,7 @@ var ExpoAuthProvider = class {
 };
 
 // src/providers/embedded/url-params.ts
-var import_react_native2 = require("react-native");
+var import_react_native5 = require("react-native");
 var ExpoURLParamsAccessor = class {
   constructor() {
     this.listeners = /* @__PURE__ */ new Set();
@@ -242,7 +646,7 @@ var ExpoURLParamsAccessor = class {
   }
   async getInitialParams() {
     try {
-      const url = await import_react_native2.Linking.getInitialURL();
+      const url = await import_react_native5.Linking.getInitialURL();
       if (!url) {
         return null;
       }
@@ -258,7 +662,7 @@ var ExpoURLParamsAccessor = class {
     if (this.subscription) {
       return;
     }
-    this.subscription = import_react_native2.Linking.addEventListener("url", ({ url }) => {
+    this.subscription = import_react_native5.Linking.addEventListener("url", ({ url }) => {
       const params = this.parseURLParams(url);
       if (params && Object.keys(params).length > 0) {
         this.currentParams = { ...this.currentParams, ...params };
@@ -513,17 +917,16 @@ var ReactNativePhantomAppProvider = class {
 };
 
 // src/PhantomProvider.tsx
-var import_react_native3 = require("react-native");
-var import_jsx_runtime = require("react/jsx-runtime");
-var PhantomContext = (0, import_react.createContext)(void 0);
-function PhantomProvider({ children, config, debugConfig }) {
-  const [isConnected, setIsConnected] = (0, import_react.useState)(false);
-  const [isConnecting, setIsConnecting] = (0, import_react.useState)(false);
-  const [connectError, setConnectError] = (0, import_react.useState)(null);
-  const [addresses, setAddresses] = (0, import_react.useState)([]);
-  const [walletId, setWalletId] = (0, import_react.useState)(null);
-  const [user, setUser] = (0, import_react.useState)(null);
-  const memoizedConfig = (0, import_react.useMemo)(() => {
+var import_react_native6 = require("react-native");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function PhantomProvider({ children, config, debugConfig, theme, appIcon, appName }) {
+  const [isConnected, setIsConnected] = (0, import_react8.useState)(false);
+  const [isConnecting, setIsConnecting] = (0, import_react8.useState)(false);
+  const [connectError, setConnectError] = (0, import_react8.useState)(null);
+  const [addresses, setAddresses] = (0, import_react8.useState)([]);
+  const [walletId, setWalletId] = (0, import_react8.useState)(null);
+  const [user, setUser] = (0, import_react8.useState)(null);
+  const memoizedConfig = (0, import_react8.useMemo)(() => {
     const redirectUrl = config.authOptions?.redirectUrl || `${config.scheme}://phantom-auth-callback`;
     return {
       ...config,
@@ -536,7 +939,7 @@ function PhantomProvider({ children, config, debugConfig }) {
       }
     };
   }, [config]);
-  const sdk = (0, import_react.useMemo)(() => {
+  const sdk = (0, import_react8.useMemo)(() => {
     const storage = new ExpoSecureStorage();
     const authProvider = new ExpoAuthProvider();
     const urlParamsAccessor = new ExpoURLParamsAccessor();
@@ -545,7 +948,7 @@ function PhantomProvider({ children, config, debugConfig }) {
       keyPrefix: `phantom-rn-${memoizedConfig.appId}`,
       appId: memoizedConfig.appId
     });
-    const platformName = `${import_react_native3.Platform.OS}-${import_react_native3.Platform.Version}`;
+    const platformName = `${import_react_native6.Platform.OS}-${import_react_native6.Platform.Version}`;
     const platform = {
       storage,
       authProvider,
@@ -555,17 +958,17 @@ function PhantomProvider({ children, config, debugConfig }) {
       name: platformName,
       analyticsHeaders: {
         [import_constants2.ANALYTICS_HEADERS.SDK_TYPE]: "react-native",
-        [import_constants2.ANALYTICS_HEADERS.PLATFORM]: import_react_native3.Platform.OS,
-        [import_constants2.ANALYTICS_HEADERS.PLATFORM_VERSION]: `${import_react_native3.Platform.Version}`,
+        [import_constants2.ANALYTICS_HEADERS.PLATFORM]: import_react_native6.Platform.OS,
+        [import_constants2.ANALYTICS_HEADERS.PLATFORM_VERSION]: `${import_react_native6.Platform.Version}`,
         [import_constants2.ANALYTICS_HEADERS.APP_ID]: config.appId,
         [import_constants2.ANALYTICS_HEADERS.WALLET_TYPE]: config.embeddedWalletType,
-        [import_constants2.ANALYTICS_HEADERS.SDK_VERSION]: "1.0.0-beta.21"
+        [import_constants2.ANALYTICS_HEADERS.SDK_VERSION]: "1.0.0-beta.24"
         // Replaced at build time
       }
     };
     return new import_embedded_provider_core.EmbeddedProvider(memoizedConfig, platform, logger);
   }, [memoizedConfig, debugConfig, config.appId, config.embeddedWalletType]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleConnectStart = () => {
       setIsConnecting(true);
       setConnectError(null);
@@ -610,13 +1013,11 @@ function PhantomProvider({ children, config, debugConfig }) {
       sdk.off("disconnect", handleDisconnect);
     };
   }, [sdk]);
-  (0, import_react.useEffect)(() => {
-    if (config.autoConnect !== false) {
-      sdk.autoConnect().catch(() => {
-      });
-    }
-  }, [sdk, config.autoConnect]);
-  const value = (0, import_react.useMemo)(
+  (0, import_react8.useEffect)(() => {
+    sdk.autoConnect().catch(() => {
+    });
+  }, [sdk]);
+  const value = (0, import_react8.useMemo)(
     () => ({
       sdk,
       isConnected,
@@ -625,76 +1026,13 @@ function PhantomProvider({ children, config, debugConfig }) {
       addresses,
       walletId,
       setWalletId,
-      user
+      user,
+      allowedProviders: config.providers
     }),
-    [sdk, isConnected, isConnecting, connectError, addresses, walletId, setWalletId, user]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PhantomContext.Provider, { value, children });
-}
-function usePhantom() {
-  const context = (0, import_react.useContext)(PhantomContext);
-  if (context === void 0) {
-    throw new Error("usePhantom must be used within a PhantomProvider");
-  }
-  return context;
-}
-
-// src/hooks/useConnect.ts
-var import_react2 = require("react");
-function useConnect() {
-  const { sdk, isConnecting, connectError, setWalletId } = usePhantom();
-  const connect = (0, import_react2.useCallback)(
-    async (options) => {
-      if (!sdk) {
-        throw new Error("SDK not initialized");
-      }
-      try {
-        const result = await sdk.connect(options);
-        if (result.status === "completed" && result.walletId) {
-          setWalletId(result.walletId);
-        }
-        return result;
-      } catch (err) {
-        const error = err;
-        throw error;
-      }
-    },
-    [sdk, setWalletId]
+    [sdk, isConnected, isConnecting, connectError, addresses, walletId, setWalletId, user, config.providers]
   );
-  return {
-    connect,
-    isConnecting,
-    error: connectError
-  };
-}
-
-// src/hooks/useDisconnect.ts
-var import_react3 = require("react");
-function useDisconnect() {
-  const { sdk } = usePhantom();
-  const [isDisconnecting, setIsDisconnecting] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const disconnect = (0, import_react3.useCallback)(async () => {
-    if (!sdk) {
-      throw new Error("SDK not initialized");
-    }
-    setIsDisconnecting(true);
-    setError(null);
-    try {
-      await sdk.disconnect();
-    } catch (err) {
-      const error2 = err;
-      setError(error2);
-      throw error2;
-    } finally {
-      setIsDisconnecting(false);
-    }
-  }, [sdk]);
-  return {
-    disconnect,
-    isDisconnecting,
-    error
-  };
+  const resolvedTheme = theme || import_wallet_sdk_ui4.darkTheme;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_wallet_sdk_ui4.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
@@ -732,15 +1070,19 @@ function useEthereum() {
 // src/index.ts
 var import_client = require("@phantom/client");
 var import_constants3 = require("@phantom/constants");
+var import_wallet_sdk_ui5 = require("@phantom/wallet-sdk-ui");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddressType,
   NetworkId,
   PhantomProvider,
+  darkTheme,
+  lightTheme,
   useAccounts,
   useConnect,
   useDisconnect,
   useEthereum,
+  useModal,
   usePhantom,
   useSolana
 });