@phantom/react-sdk 0.3.3 → 0.3.5

package/README.md

@@ -652,6 +652,7 @@ interface PhantomSDKConfig {
   };
   embeddedWalletType?: "app-wallet" | "user-wallet"; // Wallet type
   solanaProvider?: "web3js" | "kit"; // Solana library choice (default: 'web3js')
+  autoConnect?: boolean; // Auto-connect to existing session on SDK instantiation (default: true for embedded, false for injected)
 
   // Debug options
   debug?: {

package/dist/index.d.ts

@@ -14,12 +14,12 @@ interface ConnectOptions {
 interface PhantomContextValue {
     sdk: BrowserSDK;
     isConnected: boolean;
+    isConnecting: boolean;
+    connectError: Error | null;
     addresses: WalletAddress[];
     walletId: string | null;
-    error: Error | null;
     currentProviderType: "injected" | "embedded" | null;
     isPhantomAvailable: boolean;
-    updateConnectionState: () => Promise<void>;
 }
 interface PhantomProviderProps {
     children: ReactNode;

package/dist/index.js

@@ -51,49 +51,64 @@ var import_browser_sdk = require("@phantom/browser-sdk");
 var import_jsx_runtime = require("react/jsx-runtime");
 var PhantomContext = (0, import_react.createContext)(void 0);
 function PhantomProvider({ children, config }) {
-  const sdk = (0, import_react.useMemo)(
-    () => new import_browser_sdk.BrowserSDK({
+  const memoizedConfig = (0, import_react.useMemo)(() => {
+    return {
       ...config,
       // Use providerType if provided, default to embedded
       providerType: config.providerType || "embedded"
-    }),
-    [config]
-  );
+    };
+  }, [config]);
+  const sdk = (0, import_react.useMemo)(() => {
+    const sdkInstance = new import_browser_sdk.BrowserSDK(memoizedConfig);
+    const handleConnectStart = () => {
+      setIsConnecting(true);
+      setConnectError(null);
+    };
+    const handleConnect = async () => {
+      try {
+        setIsConnected(true);
+        setIsConnecting(false);
+        const providerInfo = sdkInstance.getCurrentProviderInfo();
+        setCurrentProviderType(providerInfo?.type || null);
+        const addrs = await sdkInstance.getAddresses();
+        setAddresses(addrs);
+        setWalletId(sdkInstance.getWalletId());
+      } catch (err) {
+        console.error("Error connecting:", err);
+        try {
+          await sdkInstance.disconnect();
+        } catch (err2) {
+          console.error("Error disconnecting:", err2);
+        }
+      }
+    };
+    const handleConnectError = (errorData) => {
+      setIsConnecting(false);
+      setIsConnected(false);
+      setConnectError(new Error(errorData.error || "Connection failed"));
+    };
+    const handleDisconnect = () => {
+      setIsConnected(false);
+      setIsConnecting(false);
+      setConnectError(null);
+      setAddresses([]);
+      setWalletId(null);
+    };
+    sdkInstance.on("connect_start", handleConnectStart);
+    sdkInstance.on("connect", handleConnect);
+    sdkInstance.on("connect_error", handleConnectError);
+    sdkInstance.on("disconnect", handleDisconnect);
+    return sdkInstance;
+  }, [memoizedConfig]);
   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 [error, setError] = (0, import_react.useState)(null);
   const [currentProviderType, setCurrentProviderType] = (0, import_react.useState)(null);
   const [isPhantomAvailable, setIsPhantomAvailable] = (0, import_react.useState)(false);
-  const updateConnectionState = (0, import_react.useCallback)(async () => {
-    try {
-      const connected = sdk.isConnected();
-      setIsConnected(connected);
-      const providerInfo = sdk.getCurrentProviderInfo();
-      setCurrentProviderType(providerInfo?.type || null);
-      if (connected) {
-        const addrs = await sdk.getAddresses();
-        setAddresses(addrs);
-        setWalletId(sdk.getWalletId());
-      } else {
-        setAddresses([]);
-        setWalletId(null);
-      }
-    } catch (err) {
-      console.error("Error updating connection state:", err);
-      setError(err);
-      try {
-        await sdk.disconnect();
-        setIsConnected(false);
-        setAddresses([]);
-        setWalletId(null);
-      } catch (err2) {
-        console.error("Error disconnecting:", err2);
-      }
-    }
-  }, [sdk]);
   (0, import_react.useEffect)(() => {
-    const checkPhantomExtension = async () => {
+    const initialize = async () => {
       try {
         const available = await sdk.waitForPhantomExtension(1e3);
         setIsPhantomAvailable(available);
@@ -101,23 +116,35 @@ function PhantomProvider({ children, config }) {
         console.error("Error checking Phantom extension:", err);
         setIsPhantomAvailable(false);
       }
+      if (config.autoConnect !== false) {
+        sdk.autoConnect().catch(() => {
+        });
+      }
     };
-    checkPhantomExtension();
-    updateConnectionState();
-  }, [sdk, updateConnectionState]);
-  (0, import_react.useEffect)(() => {
-    updateConnectionState();
-  }, [updateConnectionState]);
-  const value = {
-    sdk,
-    isConnected,
-    addresses,
-    updateConnectionState,
-    walletId,
-    error,
-    currentProviderType,
-    isPhantomAvailable
-  };
+    initialize();
+  }, [sdk, config.autoConnect]);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      sdk,
+      isConnected,
+      isConnecting,
+      connectError,
+      addresses,
+      walletId,
+      currentProviderType,
+      isPhantomAvailable
+    }),
+    [
+      sdk,
+      isConnected,
+      isConnecting,
+      connectError,
+      addresses,
+      walletId,
+      currentProviderType,
+      isPhantomAvailable
+    ]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PhantomContext.Provider, { value, children });
 }
 function usePhantom() {
@@ -131,43 +158,35 @@ function usePhantom() {
 // src/hooks/useConnect.ts
 var import_react2 = require("react");
 function useConnect() {
-  const context = usePhantom();
-  const [isConnecting, setIsConnecting] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)(null);
+  const { sdk, isConnecting, connectError, currentProviderType, isPhantomAvailable } = usePhantom();
   const connect = (0, import_react2.useCallback)(
     async (options) => {
-      if (!context.sdk) {
+      if (!sdk) {
         throw new Error("SDK not initialized");
       }
-      setIsConnecting(true);
-      setError(null);
       try {
-        const result = await context.sdk.connect(options);
-        await context.updateConnectionState();
+        const result = await sdk.connect(options);
         return result;
       } catch (err) {
         console.error("Error connecting to Phantom:", err);
-        setError(err);
         throw err;
-      } finally {
-        setIsConnecting(false);
       }
     },
-    [context]
+    [sdk]
   );
   return {
     connect,
     isConnecting,
-    error,
-    currentProviderType: context.currentProviderType,
-    isPhantomAvailable: context.isPhantomAvailable
+    error: connectError,
+    currentProviderType,
+    isPhantomAvailable
   };
 }
 
 // src/hooks/useDisconnect.ts
 var import_react3 = require("react");
 function useDisconnect() {
-  const { sdk, updateConnectionState } = usePhantom();
+  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 () => {
@@ -178,14 +197,13 @@ function useDisconnect() {
     setError(null);
     try {
       await sdk.disconnect();
-      await updateConnectionState();
     } catch (err) {
       setError(err);
       throw err;
     } finally {
       setIsDisconnecting(false);
     }
-  }, [sdk, updateConnectionState]);
+  }, [sdk]);
   return {
     disconnect,
     isDisconnecting,
@@ -196,7 +214,7 @@ function useDisconnect() {
 // src/hooks/useSignMessage.ts
 var import_react4 = require("react");
 function useSignMessage() {
-  const { sdk, isConnected } = usePhantom();
+  const { sdk } = usePhantom();
   const [isSigning, setIsSigning] = (0, import_react4.useState)(false);
   const [error, setError] = (0, import_react4.useState)(null);
   const signMessage = (0, import_react4.useCallback)(
@@ -204,7 +222,7 @@ function useSignMessage() {
       if (!sdk) {
         throw new Error("SDK not initialized");
       }
-      if (!isConnected) {
+      if (!sdk.isConnected()) {
         throw new Error("Wallet not connected");
       }
       setIsSigning(true);
@@ -219,7 +237,7 @@ function useSignMessage() {
         setIsSigning(false);
       }
     },
-    [sdk, isConnected]
+    [sdk]
   );
   return {
     signMessage,
@@ -231,7 +249,7 @@ function useSignMessage() {
 // src/hooks/useSignAndSendTransaction.ts
 var import_react5 = require("react");
 function useSignAndSendTransaction() {
-  const { sdk, isConnected } = usePhantom();
+  const { sdk } = usePhantom();
   const [isSigning, setIsSigning] = (0, import_react5.useState)(false);
   const [error, setError] = (0, import_react5.useState)(null);
   const signAndSendTransaction = (0, import_react5.useCallback)(
@@ -239,7 +257,7 @@ function useSignAndSendTransaction() {
       if (!sdk) {
         throw new Error("SDK not initialized");
       }
-      if (!isConnected) {
+      if (!sdk.isConnected()) {
         throw new Error("Wallet not connected");
       }
       setIsSigning(true);
@@ -254,7 +272,7 @@ function useSignAndSendTransaction() {
         setIsSigning(false);
       }
     },
-    [sdk, isConnected]
+    [sdk]
   );
   return {
     signAndSendTransaction,

package/dist/index.mjs

@@ -1,52 +1,67 @@
 // src/PhantomProvider.tsx
-import { createContext, useContext, useState, useEffect, useCallback, useMemo } from "react";
+import { createContext, useContext, useState, useEffect, useMemo } from "react";
 import { BrowserSDK } from "@phantom/browser-sdk";
 import { jsx } from "react/jsx-runtime";
 var PhantomContext = createContext(void 0);
 function PhantomProvider({ children, config }) {
-  const sdk = useMemo(
-    () => new BrowserSDK({
+  const memoizedConfig = useMemo(() => {
+    return {
       ...config,
       // Use providerType if provided, default to embedded
       providerType: config.providerType || "embedded"
-    }),
-    [config]
-  );
+    };
+  }, [config]);
+  const sdk = useMemo(() => {
+    const sdkInstance = new BrowserSDK(memoizedConfig);
+    const handleConnectStart = () => {
+      setIsConnecting(true);
+      setConnectError(null);
+    };
+    const handleConnect = async () => {
+      try {
+        setIsConnected(true);
+        setIsConnecting(false);
+        const providerInfo = sdkInstance.getCurrentProviderInfo();
+        setCurrentProviderType(providerInfo?.type || null);
+        const addrs = await sdkInstance.getAddresses();
+        setAddresses(addrs);
+        setWalletId(sdkInstance.getWalletId());
+      } catch (err) {
+        console.error("Error connecting:", err);
+        try {
+          await sdkInstance.disconnect();
+        } catch (err2) {
+          console.error("Error disconnecting:", err2);
+        }
+      }
+    };
+    const handleConnectError = (errorData) => {
+      setIsConnecting(false);
+      setIsConnected(false);
+      setConnectError(new Error(errorData.error || "Connection failed"));
+    };
+    const handleDisconnect = () => {
+      setIsConnected(false);
+      setIsConnecting(false);
+      setConnectError(null);
+      setAddresses([]);
+      setWalletId(null);
+    };
+    sdkInstance.on("connect_start", handleConnectStart);
+    sdkInstance.on("connect", handleConnect);
+    sdkInstance.on("connect_error", handleConnectError);
+    sdkInstance.on("disconnect", handleDisconnect);
+    return sdkInstance;
+  }, [memoizedConfig]);
   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 [error, setError] = useState(null);
   const [currentProviderType, setCurrentProviderType] = useState(null);
   const [isPhantomAvailable, setIsPhantomAvailable] = useState(false);
-  const updateConnectionState = useCallback(async () => {
-    try {
-      const connected = sdk.isConnected();
-      setIsConnected(connected);
-      const providerInfo = sdk.getCurrentProviderInfo();
-      setCurrentProviderType(providerInfo?.type || null);
-      if (connected) {
-        const addrs = await sdk.getAddresses();
-        setAddresses(addrs);
-        setWalletId(sdk.getWalletId());
-      } else {
-        setAddresses([]);
-        setWalletId(null);
-      }
-    } catch (err) {
-      console.error("Error updating connection state:", err);
-      setError(err);
-      try {
-        await sdk.disconnect();
-        setIsConnected(false);
-        setAddresses([]);
-        setWalletId(null);
-      } catch (err2) {
-        console.error("Error disconnecting:", err2);
-      }
-    }
-  }, [sdk]);
   useEffect(() => {
-    const checkPhantomExtension = async () => {
+    const initialize = async () => {
       try {
         const available = await sdk.waitForPhantomExtension(1e3);
         setIsPhantomAvailable(available);
@@ -54,23 +69,35 @@ function PhantomProvider({ children, config }) {
         console.error("Error checking Phantom extension:", err);
         setIsPhantomAvailable(false);
       }
+      if (config.autoConnect !== false) {
+        sdk.autoConnect().catch(() => {
+        });
+      }
     };
-    checkPhantomExtension();
-    updateConnectionState();
-  }, [sdk, updateConnectionState]);
-  useEffect(() => {
-    updateConnectionState();
-  }, [updateConnectionState]);
-  const value = {
-    sdk,
-    isConnected,
-    addresses,
-    updateConnectionState,
-    walletId,
-    error,
-    currentProviderType,
-    isPhantomAvailable
-  };
+    initialize();
+  }, [sdk, config.autoConnect]);
+  const value = useMemo(
+    () => ({
+      sdk,
+      isConnected,
+      isConnecting,
+      connectError,
+      addresses,
+      walletId,
+      currentProviderType,
+      isPhantomAvailable
+    }),
+    [
+      sdk,
+      isConnected,
+      isConnecting,
+      connectError,
+      addresses,
+      walletId,
+      currentProviderType,
+      isPhantomAvailable
+    ]
+  );
   return /* @__PURE__ */ jsx(PhantomContext.Provider, { value, children });
 }
 function usePhantom() {
@@ -82,48 +109,40 @@ function usePhantom() {
 }
 
 // src/hooks/useConnect.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
+import { useCallback } from "react";
 function useConnect() {
-  const context = usePhantom();
-  const [isConnecting, setIsConnecting] = useState2(false);
-  const [error, setError] = useState2(null);
-  const connect = useCallback2(
+  const { sdk, isConnecting, connectError, currentProviderType, isPhantomAvailable } = usePhantom();
+  const connect = useCallback(
     async (options) => {
-      if (!context.sdk) {
+      if (!sdk) {
         throw new Error("SDK not initialized");
       }
-      setIsConnecting(true);
-      setError(null);
       try {
-        const result = await context.sdk.connect(options);
-        await context.updateConnectionState();
+        const result = await sdk.connect(options);
         return result;
       } catch (err) {
         console.error("Error connecting to Phantom:", err);
-        setError(err);
         throw err;
-      } finally {
-        setIsConnecting(false);
       }
     },
-    [context]
+    [sdk]
   );
   return {
     connect,
     isConnecting,
-    error,
-    currentProviderType: context.currentProviderType,
-    isPhantomAvailable: context.isPhantomAvailable
+    error: connectError,
+    currentProviderType,
+    isPhantomAvailable
   };
 }
 
 // src/hooks/useDisconnect.ts
-import { useCallback as useCallback3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useState as useState2 } from "react";
 function useDisconnect() {
-  const { sdk, updateConnectionState } = usePhantom();
-  const [isDisconnecting, setIsDisconnecting] = useState3(false);
-  const [error, setError] = useState3(null);
-  const disconnect = useCallback3(async () => {
+  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");
     }
@@ -131,14 +150,13 @@ function useDisconnect() {
     setError(null);
     try {
       await sdk.disconnect();
-      await updateConnectionState();
     } catch (err) {
       setError(err);
       throw err;
     } finally {
       setIsDisconnecting(false);
     }
-  }, [sdk, updateConnectionState]);
+  }, [sdk]);
   return {
     disconnect,
     isDisconnecting,
@@ -147,17 +165,17 @@ function useDisconnect() {
 }
 
 // src/hooks/useSignMessage.ts
-import { useCallback as useCallback4, useState as useState4 } from "react";
+import { useCallback as useCallback3, useState as useState3 } from "react";
 function useSignMessage() {
-  const { sdk, isConnected } = usePhantom();
-  const [isSigning, setIsSigning] = useState4(false);
-  const [error, setError] = useState4(null);
-  const signMessage = useCallback4(
+  const { sdk } = usePhantom();
+  const [isSigning, setIsSigning] = useState3(false);
+  const [error, setError] = useState3(null);
+  const signMessage = useCallback3(
     async (params) => {
       if (!sdk) {
         throw new Error("SDK not initialized");
       }
-      if (!isConnected) {
+      if (!sdk.isConnected()) {
         throw new Error("Wallet not connected");
       }
       setIsSigning(true);
@@ -172,7 +190,7 @@ function useSignMessage() {
         setIsSigning(false);
       }
     },
-    [sdk, isConnected]
+    [sdk]
   );
   return {
     signMessage,
@@ -182,17 +200,17 @@ function useSignMessage() {
 }
 
 // src/hooks/useSignAndSendTransaction.ts
-import { useCallback as useCallback5, useState as useState5 } from "react";
+import { useCallback as useCallback4, useState as useState4 } from "react";
 function useSignAndSendTransaction() {
-  const { sdk, isConnected } = usePhantom();
-  const [isSigning, setIsSigning] = useState5(false);
-  const [error, setError] = useState5(null);
-  const signAndSendTransaction = useCallback5(
+  const { sdk } = usePhantom();
+  const [isSigning, setIsSigning] = useState4(false);
+  const [error, setError] = useState4(null);
+  const signAndSendTransaction = useCallback4(
     async (params) => {
       if (!sdk) {
         throw new Error("SDK not initialized");
       }
-      if (!isConnected) {
+      if (!sdk.isConnected()) {
         throw new Error("Wallet not connected");
       }
       setIsSigning(true);
@@ -207,7 +225,7 @@ function useSignAndSendTransaction() {
         setIsSigning(false);
       }
     },
-    [sdk, isConnected]
+    [sdk]
   );
   return {
     signAndSendTransaction,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phantom/react-sdk",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -26,7 +26,7 @@
     "prettier": "prettier --write \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "@phantom/browser-sdk": "^0.3.3"
+    "@phantom/browser-sdk": "^0.3.5"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",