@phantom/react-sdk 1.0.0-beta.0 → 1.0.0-beta.10

package/dist/index.js

@@ -52,23 +52,30 @@ 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, debugConfig }) {
+  const memoizedConfig = (0, import_react.useMemo)(() => config, [config]);
+  const [sdk, setSdk] = (0, import_react.useState)(null);
+  const [isClient, setIsClient] = (0, import_react.useState)(false);
   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 [currentProviderType, setCurrentProviderType] = (0, import_react.useState)(config.providerType || null);
+  const [currentProviderType, setCurrentProviderType] = (0, import_react.useState)(
+    memoizedConfig.providerType || null
+  );
   const [isPhantomAvailable, setIsPhantomAvailable] = (0, import_react.useState)(false);
-  const [sdk, setSdk] = (0, import_react.useState)(null);
-  const memoizedConfig = (0, import_react.useMemo)(() => {
-    return {
-      ...config,
-      // Use providerType if provided, default to embedded
-      providerType: config.providerType || "embedded"
-    };
-  }, [config]);
   (0, import_react.useEffect)(() => {
+    setIsClient(true);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!isClient)
+      return;
     const sdkInstance = new import_browser_sdk.BrowserSDK(memoizedConfig);
+    setSdk(sdkInstance);
+  }, [isClient, memoizedConfig]);
+  (0, import_react.useEffect)(() => {
+    if (!sdk)
+      return;
     const handleConnectStart = () => {
       setIsConnecting(true);
       setConnectError(null);
@@ -77,15 +84,15 @@ function PhantomProvider({ children, config, debugConfig }) {
       try {
         setIsConnected(true);
         setIsConnecting(false);
-        const providerInfo = sdkInstance.getCurrentProviderInfo();
+        const providerInfo = sdk.getCurrentProviderInfo();
         setCurrentProviderType(providerInfo?.type || null);
-        const addrs = await sdkInstance.getAddresses();
+        const addrs = await sdk.getAddresses();
         setAddresses(addrs);
-        setWalletId(sdkInstance.getWalletId());
+        setWalletId(sdk.getWalletId());
       } catch (err) {
         console.error("Error connecting:", err);
         try {
-          await sdkInstance.disconnect();
+          await sdk.disconnect();
         } catch (err2) {
           console.error("Error disconnecting:", err2);
         }
@@ -103,41 +110,40 @@ function PhantomProvider({ children, config, debugConfig }) {
       setAddresses([]);
       setWalletId(null);
     };
-    sdkInstance.on("connect_start", handleConnectStart);
-    sdkInstance.on("connect", handleConnect);
-    sdkInstance.on("connect_error", handleConnectError);
-    sdkInstance.on("disconnect", handleDisconnect);
-    setSdk(sdkInstance);
+    sdk.on("connect_start", handleConnectStart);
+    sdk.on("connect", handleConnect);
+    sdk.on("connect_error", handleConnectError);
+    sdk.on("disconnect", handleDisconnect);
     return () => {
-      sdkInstance.off("connect_start", handleConnectStart);
-      sdkInstance.off("connect", handleConnect);
-      sdkInstance.off("connect_error", handleConnectError);
-      sdkInstance.off("disconnect", handleDisconnect);
+      sdk.off("connect_start", handleConnectStart);
+      sdk.off("connect", handleConnect);
+      sdk.off("connect_error", handleConnectError);
+      sdk.off("disconnect", handleDisconnect);
     };
-  }, [memoizedConfig]);
+  }, [sdk]);
   (0, import_react.useEffect)(() => {
-    if (!sdk || !debugConfig)
+    if (!debugConfig || !sdk)
       return;
     sdk.configureDebug(debugConfig);
   }, [sdk, debugConfig]);
   (0, import_react.useEffect)(() => {
-    if (!sdk)
+    if (!isClient || !sdk)
       return;
-    const initialize = () => {
+    const initialize = async () => {
       try {
-        const available = import_browser_sdk.BrowserSDK.isPhantomInstalled();
+        const available = await import_browser_sdk.BrowserSDK.isPhantomInstalled();
         setIsPhantomAvailable(available);
       } catch (err) {
         console.error("Error checking Phantom extension:", err);
         setIsPhantomAvailable(false);
       }
-      if (config.autoConnect !== false) {
+      if (memoizedConfig.autoConnect !== false) {
         sdk.autoConnect().catch(() => {
         });
       }
     };
     initialize();
-  }, [sdk, config.autoConnect]);
+  }, [sdk, memoizedConfig.autoConnect, isClient]);
   const value = (0, import_react.useMemo)(
     () => ({
       sdk,
@@ -147,18 +153,10 @@ function PhantomProvider({ children, config, debugConfig }) {
       addresses,
       walletId,
       currentProviderType,
-      isPhantomAvailable
+      isPhantomAvailable,
+      isClient
     }),
-    [
-      sdk,
-      isConnected,
-      isConnecting,
-      connectError,
-      addresses,
-      walletId,
-      currentProviderType,
-      isPhantomAvailable
-    ]
+    [sdk, isConnected, isConnecting, connectError, addresses, walletId, currentProviderType, isPhantomAvailable, isClient]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PhantomContext.Provider, { value, children });
 }
@@ -235,36 +233,33 @@ function useAccounts() {
 // src/hooks/useIsExtensionInstalled.ts
 var React = __toESM(require("react"));
 var import_browser_sdk2 = require("@phantom/browser-sdk");
-var cachedIsInstalled = null;
 function useIsExtensionInstalled() {
-  const { sdk } = usePhantom();
-  const [isLoading, setIsLoading] = React.useState(cachedIsInstalled === null);
-  const [isInstalled, setIsInstalled] = React.useState(cachedIsInstalled ?? false);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [isInstalled, setIsInstalled] = React.useState(false);
   React.useEffect(() => {
-    if (!sdk) {
-      setIsLoading(false);
-      return;
-    }
-    if (cachedIsInstalled !== null) {
-      setIsInstalled(cachedIsInstalled);
-      setIsLoading(false);
-      return;
-    }
-    const checkExtension = () => {
+    let isMounted = true;
+    const checkExtension = async () => {
       try {
         setIsLoading(true);
-        const result = import_browser_sdk2.BrowserSDK.isPhantomInstalled();
-        cachedIsInstalled = result;
-        setIsInstalled(result);
+        const result = await (0, import_browser_sdk2.waitForPhantomExtension)(3e3);
+        if (isMounted) {
+          setIsInstalled(result);
+        }
       } catch (error) {
-        cachedIsInstalled = false;
-        setIsInstalled(false);
+        if (isMounted) {
+          setIsInstalled(false);
+        }
       } finally {
-        setIsLoading(false);
+        if (isMounted) {
+          setIsLoading(false);
+        }
       }
     };
     checkExtension();
-  }, [sdk]);
+    return () => {
+      isMounted = false;
+    };
+  }, []);
   return { isLoading, isInstalled };
 }
 
@@ -301,53 +296,47 @@ function useAutoConfirm() {
     },
     [sdk, isInjected]
   );
-  const disable = (0, import_react4.useCallback)(
-    async () => {
-      if (!sdk) {
-        throw new Error("SDK not initialized");
-      }
-      if (!isInjected) {
-        throw new Error("Auto-confirm is only available for injected (extension) providers");
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        await sdk.disableAutoConfirm();
-        const newStatus = await sdk.getAutoConfirmStatus();
-        setStatus(newStatus);
-      } catch (err) {
-        const error2 = err instanceof Error ? err : new Error("Unknown error occurred");
-        setError(error2);
-        throw error2;
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [sdk, isInjected]
-  );
-  const refetch = (0, import_react4.useCallback)(
-    async () => {
-      if (!sdk || !isInjected) {
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const [statusResult, supportedResult] = await Promise.all([
-          sdk.getAutoConfirmStatus(),
-          sdk.getSupportedAutoConfirmChains()
-        ]);
-        setStatus(statusResult);
-        setSupportedChains(supportedResult);
-      } catch (err) {
-        const error2 = err instanceof Error ? err : new Error("Failed to fetch auto-confirm data");
-        setError(error2);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [sdk, isInjected]
-  );
+  const disable = (0, import_react4.useCallback)(async () => {
+    if (!sdk) {
+      throw new Error("SDK not initialized");
+    }
+    if (!isInjected) {
+      throw new Error("Auto-confirm is only available for injected (extension) providers");
+    }
+    try {
+      setIsLoading(true);
+      setError(null);
+      await sdk.disableAutoConfirm();
+      const newStatus = await sdk.getAutoConfirmStatus();
+      setStatus(newStatus);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Unknown error occurred");
+      setError(error2);
+      throw error2;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sdk, isInjected]);
+  const refetch = (0, import_react4.useCallback)(async () => {
+    if (!sdk || !isInjected) {
+      return;
+    }
+    try {
+      setIsLoading(true);
+      setError(null);
+      const [statusResult, supportedResult] = await Promise.all([
+        sdk.getAutoConfirmStatus(),
+        sdk.getSupportedAutoConfirmChains()
+      ]);
+      setStatus(statusResult);
+      setSupportedChains(supportedResult);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to fetch auto-confirm data");
+      setError(error2);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sdk, isInjected]);
   (0, import_react4.useEffect)(() => {
     if (sdk && isInjected) {
       refetch();
@@ -369,143 +358,38 @@ function useAutoConfirm() {
 }
 
 // src/hooks/useSolana.ts
-var import_react5 = require("react");
 function useSolana() {
-  const { sdk, isConnected } = usePhantom();
-  const solanaChain = (0, import_react5.useMemo)(() => {
-    if (!sdk || !isConnected)
-      return null;
-    try {
-      return sdk.solana;
-    } catch {
-      return null;
-    }
-  }, [sdk, isConnected]);
-  const signMessage = (0, import_react5.useCallback)(async (message) => {
-    if (!solanaChain)
-      throw new Error("Solana chain not available. Ensure SDK is connected.");
-    return solanaChain.signMessage(message);
-  }, [solanaChain]);
-  const signTransaction = (0, import_react5.useCallback)(async (transaction) => {
-    if (!solanaChain)
-      throw new Error("Solana chain not available. Ensure SDK is connected.");
-    return solanaChain.signTransaction(transaction);
-  }, [solanaChain]);
-  const signAndSendTransaction = (0, import_react5.useCallback)(async (transaction) => {
-    if (!solanaChain)
-      throw new Error("Solana chain not available. Ensure SDK is connected.");
-    return solanaChain.signAndSendTransaction(transaction);
-  }, [solanaChain]);
-  const connect = (0, import_react5.useCallback)(async (options) => {
-    if (!solanaChain)
-      throw new Error("Solana chain not available. Ensure SDK is connected.");
-    return solanaChain.connect(options);
-  }, [solanaChain]);
-  const disconnect = (0, import_react5.useCallback)(async () => {
-    if (!solanaChain)
-      throw new Error("Solana chain not available. Ensure SDK is connected.");
-    return solanaChain.disconnect();
-  }, [solanaChain]);
-  const switchNetwork = (0, import_react5.useCallback)(async (network) => {
-    if (!solanaChain)
-      throw new Error("Solana chain not available. Ensure SDK is connected.");
-    return solanaChain.switchNetwork(network);
-  }, [solanaChain]);
-  const getPublicKey = (0, import_react5.useCallback)(async () => {
-    if (!solanaChain)
-      return null;
-    return solanaChain.getPublicKey();
-  }, [solanaChain]);
+  const { sdk, isConnected, isClient } = usePhantom();
+  if (!isClient || !sdk) {
+    return {
+      solana: {},
+      // This will be replaced when SDK is ready
+      isAvailable: false
+    };
+  }
   return {
-    // Chain instance for advanced usage
-    solana: solanaChain,
-    // Convenient methods
-    signMessage,
-    signTransaction,
-    signAndSendTransaction,
-    connect,
-    disconnect,
-    switchNetwork,
-    getPublicKey,
+    // Chain instance with connection enforcement for signing methods
+    solana: sdk.solana,
     // State
-    isAvailable: !!solanaChain,
-    isConnected: solanaChain?.isConnected() ?? false
+    isAvailable: !!isConnected
   };
 }
 
 // src/hooks/useEthereum.ts
-var import_react6 = require("react");
 function useEthereum() {
-  const { sdk, isConnected } = usePhantom();
-  const ethereumChain = (0, import_react6.useMemo)(() => {
-    if (!sdk || !isConnected)
-      return null;
-    try {
-      return sdk.ethereum;
-    } catch {
-      return null;
-    }
-  }, [sdk, isConnected]);
-  const request = (0, import_react6.useCallback)(async (args) => {
-    if (!ethereumChain)
-      throw new Error("Ethereum chain not available. Ensure SDK is connected.");
-    return ethereumChain.request(args);
-  }, [ethereumChain]);
-  const signPersonalMessage = (0, import_react6.useCallback)(async (message, address) => {
-    return request({
-      method: "personal_sign",
-      params: [message, address]
-    });
-  }, [request]);
-  const sendTransaction = (0, import_react6.useCallback)(async (transaction) => {
-    if (!ethereumChain)
-      throw new Error("Ethereum chain not available. Ensure SDK is connected.");
-    return ethereumChain.sendTransaction(transaction);
-  }, [ethereumChain]);
-  const switchChain = (0, import_react6.useCallback)(async (chainId) => {
-    if (!ethereumChain)
-      throw new Error("Ethereum chain not available. Ensure SDK is connected.");
-    return ethereumChain.switchChain(chainId);
-  }, [ethereumChain]);
-  const getChainId = (0, import_react6.useCallback)(async () => {
-    if (!ethereumChain)
-      throw new Error("Ethereum chain not available. Ensure SDK is connected.");
-    return ethereumChain.getChainId();
-  }, [ethereumChain]);
-  const getAccounts = (0, import_react6.useCallback)(async () => {
-    if (!ethereumChain)
-      throw new Error("Ethereum chain not available. Ensure SDK is connected.");
-    return ethereumChain.getAccounts();
-  }, [ethereumChain]);
-  const signMessage = (0, import_react6.useCallback)(async (message) => {
-    return request({
-      method: "eth_sign",
-      params: [await getAccounts().then((accounts) => accounts[0]), message]
-    });
-  }, [request, getAccounts]);
-  const signTypedData = (0, import_react6.useCallback)(async (typedData) => {
-    const accounts = await getAccounts();
-    return request({
-      method: "eth_signTypedData_v4",
-      params: [accounts[0], JSON.stringify(typedData)]
-    });
-  }, [request, getAccounts]);
+  const { sdk, isConnected, isClient } = usePhantom();
+  if (!isClient || !sdk) {
+    return {
+      ethereum: {},
+      // This will be replaced when SDK is ready
+      isAvailable: false
+    };
+  }
   return {
-    // Chain instance for advanced usage
-    ethereum: ethereumChain,
-    // Standard EIP-1193 interface
-    request,
-    // Convenient methods
-    signPersonalMessage,
-    signMessage,
-    signTypedData,
-    sendTransaction,
-    switchChain,
-    getChainId,
-    getAccounts,
+    // Chain instance with connection enforcement for signing methods
+    ethereum: sdk.ethereum,
     // State
-    isAvailable: !!ethereumChain,
-    isConnected: ethereumChain?.isConnected() ?? false
+    isAvailable: !!isConnected
   };
 }