@phantom/react-sdk 0.0.2 → 0.0.4

package/README.md

@@ -11,10 +11,9 @@ npm install @phantom/react-sdk @phantom/browser-sdk
 ## Quick Start
 
 ```tsx
-import React from 'react';
-import { PhantomProvider } from '@phantom/react-sdk';
-import { createSolanaPlugin } from '@phantom/browser-sdk/solana';
-import { useProvider } from '@phantom/react-sdk/solana';
+import React from "react";
+import { PhantomProvider, useConnect } from "@phantom/react-sdk";
+import { createSolanaPlugin } from "@phantom/browser-sdk/solana";
 
 function App() {
   return (
@@ -25,29 +24,25 @@ function App() {
 }
 
 function WalletComponent() {
-  const { status, provider } = useProvider();
-
-  if (status === 'loading') {
-    return <div>Loading wallet...</div>;
-  }
-
-  if (status === 'error') {
-    return <div>Error</div>;
-  }
-
-  if (status === 'success') {
-    return (
-      <div>
-        <div>Wallet connected!</div>
-        <button onClick={() => provider.connect()}>
-          Connect to Solana
-        </button>
-      </div>
-    );
-  }
-
-  return null;
+  const { connect } = useConnect();
+
+  const handleConnect = async () => {
+    try {
+      const connectedAccount = await connect();
+      console.log("Wallet connected:", connectedAccount?.publicKey?.toString());
+    } catch (error) {
+      console.error("Connection failed:", error);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={handleConnect}>Connect to Solana</button>
+    </div>
+  );
 }
+
+export default App;
 ```
 
 ## API Reference
@@ -57,15 +52,19 @@ function WalletComponent() {
 The PhantomProvider component provides the Phantom context to child components.
 
 ```tsx
-import { PhantomProvider } from '@phantom/react-sdk';
-import { createSolanaPlugin } from '@phantom/browser-sdk/solana';
+import { PhantomProvider } from "@phantom/react-sdk";
+import { createSolanaPlugin } from "@phantom/browser-sdk/solana";
 
-<PhantomProvider config={{ chainPlugins: [createSolanaPlugin()] }}>
-  {children}
-</PhantomProvider>
+<PhantomProvider config={{ chainPlugins: [createSolanaPlugin()] }}>{children}</PhantomProvider>;
 ```
 
-### useProvider (Solana)
+### usePhantom
+
+The `usePhantom` hoo provides access to the phantom instance. With Phantom instance you can call browser-sdk methods directly.
+
+## Solana API Reference
+
+### useProvider
 
 The `useProvider` hook provides access to the Solana provider with automatic retry logic and state management.
 
@@ -75,3 +74,225 @@ The hook returns an object with the following properties:
 
 - `status: 'loading' | 'success' | 'error'` - Current status of the provider
 - `provider: NonNullable<unknown> | null` - The Solana provider instance (null when not available)
+
+### useConnect (Solana)
+
+The `useConnect` hook provides a function to connect to the Phantom wallet for Solana.
+
+#### Props
+
+- `autoConnect?: boolean` (optional) - If `true`, attempts to connect to the wallet automatically when the component mounts. Defaults to `false`.
+
+#### Return Value
+
+The hook returns an object with the following property:
+
+- `connect: () => Promise<ConnectResponse>` - An asynchronous function that initiates the connection process. Returns a promise that resolves with the connection response (e.g., `{ publicKey: string }`) or rejects if connection fails.
+
+```tsx
+import { useConnect } from "@phantom/react-sdk"; // Or '@phantom/react-sdk/solana' if specific
+
+function MyComponent() {
+  const { connect } = useConnect({ autoConnect: true });
+
+  const handleConnectClick = async () => {
+    try {
+      const res = await connect();
+      console.log("Connected:", res.publicKey.toString());
+    } catch (err) {
+      console.error("Connection error:", err);
+    }
+  };
+  // ...
+}
+```
+
+### useDisconnect (Solana)
+
+The `useDisconnect` hook provides a function to disconnect from the Phantom wallet for Solana.
+
+#### Return Value
+
+The hook returns an object with the following property:
+
+- `disconnect: () => Promise<void>` - An asynchronous function that initiates the disconnection process. Returns a promise that resolves when disconnection is complete or rejects if disconnection fails.
+
+```tsx
+import { useDisconnect } from "@phantom/react-sdk"; // Or '@phantom/react-sdk/solana' if specific
+
+function MyComponent() {
+  const { disconnect } = useDisconnect();
+
+  const handleDisconnectClick = async () => {
+    try {
+      await disconnect();
+      console.log("Disconnected");
+    } catch (err) {
+      console.error("Disconnection error:", err);
+    }
+  };
+  // ...
+}
+```
+
+### useAccount
+
+The `useAccount` hook provides access the currently connected account state. It is reactive and changes according to the connected account state.
+
+#### Return Value
+
+The hook returns an object with the following properties:
+
+- `status: 'loading' | 'connected' | 'disconnected'` - Current account status
+- `publicKey: string | null` - Current public key of the connected account or null when account is not connected.
+
+### useSignIn (Solana)
+
+The `useSignIn` hook provides a function to initiate a sign-in request to the Phantom wallet for Solana. This is compliant with SIP-001 (Sign In With Solana).
+
+#### Return Value
+
+The hook returns an object with the following property:
+
+- `signIn: (signInData: SolanaSignInData) => Promise<{ address: string; signature: Uint8Array; signedMessage: Uint8Array }>` - An asynchronous function that initiates the sign-in process. `SolanaSignInData` is a type imported from `@phantom/browser-sdk/solana`. Returns a promise that resolves with the `address` (string), `signature` (Uint8Array), and `signedMessage` (Uint8Array), or rejects if the sign-in fails.
+
+```tsx
+import { useSignIn } from "@phantom/react-sdk"; // Or '@phantom/react-sdk/solana' if specific
+import { SolanaSignInData } from "@phantom/browser-sdk/solana"; // This type might be needed from the browser-sdk
+
+function MyComponent() {
+  const { signIn } = useSignIn();
+
+  const handleSignInClick = async () => {
+    // Construct SolanaSignInData according to your needs
+    // This typically includes the domain and a statement for the user.
+    const signInData: SolanaSignInData = {
+      domain: window.location.host,
+      statement: "Please sign in to access exclusive features.",
+      // Other fields like `nonce`, `chainId`, `resources` can be added as per SIP-001
+    };
+
+    try {
+      const result = await signIn(signInData);
+      console.log("Sign In successful. Address:", result.address.toString());
+      // You can now verify the signature and signedMessage on your backend
+      // Handle successful sign-in (e.g., update UI, set user session)
+    } catch (err) {
+      console.error("Sign In error:", err);
+      // Handle sign-in error (e.g., show error message to user)
+    }
+  };
+
+  return <button onClick={handleSignInClick}>Sign In with Solana</button>;
+}
+```
+
+### useSignMessage (Solana)
+
+The `useSignMessage` hook provides a function to prompt the user to sign an arbitrary message with their Solana account.
+
+#### Return Value
+
+The hook returns an object with the following property:
+
+- `signMessage: (message: Uint8Array, display?: 'utf8' | 'hex') => Promise<{ signature: Uint8Array; publicKey: string }>` - An asynchronous function that prompts the user to sign a message. The `message` must be a `Uint8Array`. The optional `display` parameter can be 'utf8' (default) or 'hex' to suggest how the wallet should display the message bytes. Returns a promise that resolves with the `signature` (Uint8Array) and `publicKey` (string) of the signer, or rejects if signing fails.
+
+```tsx
+import { useSignMessage } from "@phantom/react-sdk"; // Or '@phantom/react-sdk/solana' if specific
+
+function MyComponent() {
+  const { signMessage } = useSignMessage();
+
+  const handleSignMessage = async () => {
+    const messageToSign = "Please confirm your action by signing this message.";
+    const messageBytes = new TextEncoder().encode(messageToSign);
+    try {
+      const { signature, publicKey } = await signMessage(messageBytes, "utf8");
+      console.log("Message signed successfully!");
+      console.log("Signature:", signature);
+      console.log("Public Key:", publicKey);
+      // You can now verify this signature on a backend or use it as needed.
+    } catch (err) {
+      console.error("Sign message error:", err);
+      // Handle error (e.g., user rejected, wallet error)
+    }
+  };
+
+  return <button onClick={handleSignMessage}>Sign Message</button>;
+}
+```
+
+### useSignAndSendTransaction (Solana)
+
+The `useSignAndSendTransaction` hook prompts the user to sign **and** send a Kit-style transaction.
+
+#### Return Value
+
+The hook returns an object with the following property:
+
+- `signAndSendTransaction(transaction: Transaction): Promise<{ signature: string; publicKey?: string }>` – accepts a `Transaction` built with **`@solana/kit`** and returns the confirmed signature.
+
+```tsx
+import { useSignAndSendTransaction } from "@phantom/react-sdk/solana"; // scoped import is fine
+import {
+  createSolanaRpc,
+  createTransactionMessage,
+  setTransactionMessageFeePayer,
+  setTransactionMessageLifetimeUsingBlockhash,
+  pipe,
+  address,
+  compileTransaction,
+} from "@solana/kit";
+
+function MyComponent() {
+  const { signAndSendTransaction } = useSignAndSendTransaction();
+
+  const handlePayment = async (publicKey: string) => {
+    // 0️⃣  Ensure the wallet is connected and we have a fee-payer address
+    if (!publicKey) return console.error("Wallet not connected");
+
+    try {
+      // 1️⃣  Fetch a recent blockhash
+      const rpc = createSolanaRpc("https://api.devnet.solana.com");
+      const { value: latestBlockhash } = await rpc.getLatestBlockhash().send();
+
+      // 2️⃣  Build a minimal v0 transaction message (no instructions – demo only)
+      const txMessage = pipe(
+        createTransactionMessage({ version: 0 }),
+        tx => setTransactionMessageFeePayer(address(publicKey), tx),
+        tx => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, tx),
+      );
+
+      const transaction = compileTransaction(txMessage);
+
+      // 3️⃣  Prompt the user to sign and send
+      const { signature } = await signAndSendTransaction(transaction);
+      console.log("Transaction signature:", signature);
+    } catch (err) {
+      console.error("Transaction error:", err);
+    }
+  };
+
+  return <button onClick={() => handlePayment("YOUR_CONNECTED_WALLET_PUBLIC_KEY")}>Send 0.001 SOL</button>;
+}
+```
+
+### useAccountEffect
+
+The `useAccountEffect` hook provides easy way to subscribe to events like `connect`, `disconnect` and `accountChanged`. You can subscribe by calling the hook and declaring event callbacks you want to react to.
+
+Example:
+
+```tsx
+useAccountEffect({
+  onConnect: data => {
+    console.log("Connected to Phantom with public key:", data.publicKey);
+  },
+  onDisconnect: () => {
+    console.log("Disconnected from Phantom");
+  },
+  onAccountChanged: data => {
+    console.log("Account changed to:", data.publicKey);
+  },
+});
+```

package/dist/solana/index.d.ts

@@ -1,9 +1,12 @@
+import { PhantomSolanaProvider, SolanaSignInData } from '@phantom/browser-sdk/solana';
+import { Transaction } from '@solana/kit';
+
 type ProviderState = {
     status: "loading";
     provider: null;
 } | {
     status: "success";
-    provider: NonNullable<unknown>;
+    provider: PhantomSolanaProvider;
 } | {
     status: "error";
     provider: null;
@@ -14,4 +17,70 @@ type ProviderState = {
  */
 declare function useProvider(): ProviderState;
 
-export { useProvider };
+type UseConnectProps = {
+    autoConnect?: boolean;
+};
+declare function useConnect({ autoConnect }?: UseConnectProps): {
+    connect: () => Promise<string | undefined>;
+};
+
+declare function useDisconnect(): {
+    disconnect: () => Promise<void>;
+};
+
+interface UseSignInResult {
+    signIn: (signInData: SolanaSignInData) => Promise<{
+        address: string;
+        signature: Uint8Array;
+        signedMessage: Uint8Array;
+    }>;
+}
+declare function useSignIn(): UseSignInResult;
+
+interface UseSignAndSendTransactionResult {
+    signAndSendTransaction: (transaction: Transaction) => Promise<{
+        signature: string;
+        publicKey?: string;
+    }>;
+}
+declare function useSignAndSendTransaction(): UseSignAndSendTransactionResult;
+
+interface UseSignMessageResult {
+    signMessage: (message: Uint8Array, display?: "utf8" | "hex") => Promise<{
+        signature: Uint8Array;
+        address: string;
+    }>;
+}
+declare function useSignMessage(): UseSignMessageResult;
+
+type UseAccountResult = {
+    status: "connected";
+    address: string;
+} | {
+    status: "disconnected" | "loading";
+    address: null;
+};
+/**
+ * React hook that provides the current account connection status and public key.
+ * Automatically updates when the account connects, disconnects, or changes.
+ *
+ * @returns Object containing status ('connected' | 'disconnected') and address (string | null)
+ */
+declare function useAccount(): UseAccountResult;
+
+type UseAccountEffectParameters = {
+    onConnect?(data: {
+        publicKey: string;
+    }): void;
+    onDisconnect?(): void;
+    onAccountChanged?(data: {
+        publicKey: string;
+    }): void;
+};
+/**
+ * Hook for listening to account lifecycle events.
+ * Provides callbacks for connect, disconnect, and account change events.
+ */
+declare function useAccountEffect(parameters?: UseAccountEffectParameters): void;
+
+export { useAccount, useAccountEffect, useConnect, useDisconnect, useProvider, useSignAndSendTransaction, useSignIn, useSignMessage };

package/dist/solana/index.js

@@ -30,7 +30,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/solana/index.ts
 var solana_exports = {};
 __export(solana_exports, {
-  useProvider: () => useProvider
+  useAccount: () => useAccount,
+  useAccountEffect: () => useAccountEffect,
+  useConnect: () => useConnect,
+  useDisconnect: () => useDisconnect,
+  useProvider: () => useProvider,
+  useSignAndSendTransaction: () => useSignAndSendTransaction,
+  useSignIn: () => useSignIn,
+  useSignMessage: () => useSignMessage
 });
 module.exports = __toCommonJS(solana_exports);
 var import_solana = require("@phantom/browser-sdk/solana");
@@ -117,7 +124,188 @@ function useProvider() {
   }, [isReady, tryResolvingProvider]);
   return state;
 }
+
+// src/solana/useConnect.ts
+var React3 = __toESM(require("react"));
+function useConnect({ autoConnect = false } = {}) {
+  const { phantom } = usePhantom();
+  const connect = React3.useCallback(async () => {
+    if (!phantom?.solana) {
+      throw new Error("Phantom solana plugin not found.");
+    }
+    return await phantom.solana.connect();
+  }, [phantom]);
+  React3.useEffect(() => {
+    if (autoConnect && phantom?.solana) {
+      connect();
+    }
+  }, [autoConnect, connect, phantom?.solana]);
+  return { connect };
+}
+
+// src/solana/useDisconnect.ts
+var React4 = __toESM(require("react"));
+function useDisconnect() {
+  const { phantom } = usePhantom();
+  const disconnect = React4.useCallback(async () => {
+    if (!phantom?.solana) {
+      throw new Error("Phantom solana disconnect method not found.");
+    }
+    return await phantom.solana.disconnect();
+  }, [phantom]);
+  return { disconnect };
+}
+
+// src/solana/useSignIn.ts
+var import_react = require("react");
+function useSignIn() {
+  const { phantom } = usePhantom();
+  const signIn = (0, import_react.useCallback)(
+    async (signInData) => {
+      if (!phantom?.solana) {
+        throw new Error("Phantom Solana provider not available.");
+      }
+      const result = await phantom.solana.signIn(signInData);
+      return result;
+    },
+    [phantom]
+  );
+  return { signIn };
+}
+
+// src/solana/useSignAndSendTransaction.ts
+var import_react2 = require("react");
+function useSignAndSendTransaction() {
+  const { phantom } = usePhantom();
+  const signAndSendTransaction = (0, import_react2.useCallback)(
+    async (transaction) => {
+      if (!phantom?.solana) {
+        throw new Error("Phantom Solana provider not available.");
+      }
+      const result = await phantom.solana.signAndSendTransaction(transaction);
+      return result;
+    },
+    [phantom]
+  );
+  return { signAndSendTransaction };
+}
+
+// src/solana/useSignMessage.ts
+var import_react3 = require("react");
+function useSignMessage() {
+  const { phantom } = usePhantom();
+  const signMessage = (0, import_react3.useCallback)(
+    async (message, display) => {
+      if (!phantom?.solana) {
+        throw new Error("Phantom Solana provider not available.");
+      }
+      const result = await phantom.solana.signMessage(message, display);
+      return result;
+    },
+    [phantom]
+  );
+  return { signMessage };
+}
+
+// src/solana/useAccount.ts
+var React5 = __toESM(require("react"));
+
+// src/solana/assertions.ts
+function assertSolanaConfigured(phantom) {
+  if (!phantom?.solana) {
+    throw new Error(
+      "Phantom solana chain plugin not found. Please ensure the solana chain plugin is installed and configured properly."
+    );
+  }
+}
+
+// src/solana/useAccount.ts
+function useAccount() {
+  const { phantom, isReady } = usePhantom();
+  const { status: providerStatus, provider } = useProvider();
+  const [account, setAccount] = React5.useState(() => {
+    if (!isReady)
+      return { status: "loading", address: null };
+    assertSolanaConfigured(phantom);
+    return phantom.solana.getAccount();
+  });
+  React5.useEffect(() => {
+    if (!isReady)
+      return;
+    assertSolanaConfigured(phantom);
+    if (providerStatus !== "success" || !provider)
+      return;
+    if (account.status === "loading") {
+      setAccount(phantom.solana.getAccount());
+    }
+    const updateAccount = () => {
+      setAccount(phantom.solana.getAccount());
+    };
+    phantom.solana.addEventListener("connect", updateAccount);
+    phantom.solana.addEventListener("disconnect", updateAccount);
+    phantom.solana.addEventListener("accountChanged", updateAccount);
+    return () => {
+      phantom.solana.removeEventListener("connect", updateAccount);
+      phantom.solana.removeEventListener("disconnect", updateAccount);
+      phantom.solana.removeEventListener("accountChanged", updateAccount);
+    };
+  }, [provider, phantom, providerStatus, isReady, account.status]);
+  return account;
+}
+
+// src/solana/useAccountEffect.ts
+var React6 = __toESM(require("react"));
+function useAccountEffect(parameters = {}) {
+  const { onConnect, onDisconnect, onAccountChanged } = parameters;
+  const { phantom, isReady } = usePhantom();
+  const { status: providerStatus, provider } = useProvider();
+  React6.useEffect(() => {
+    if (!isReady || providerStatus !== "success" || !provider)
+      return;
+    assertSolanaConfigured(phantom);
+    const handleConnect = (publicKey) => {
+      onConnect?.({
+        publicKey
+      });
+    };
+    const handleDisconnect = () => {
+      onDisconnect?.();
+    };
+    const handleAccountChanged = (publicKey) => {
+      onAccountChanged?.({
+        publicKey
+      });
+    };
+    if (onConnect) {
+      phantom.solana.addEventListener("connect", handleConnect);
+    }
+    if (onDisconnect) {
+      phantom.solana.addEventListener("disconnect", handleDisconnect);
+    }
+    if (onAccountChanged) {
+      phantom.solana.addEventListener("accountChanged", handleAccountChanged);
+    }
+    return () => {
+      if (onConnect) {
+        phantom.solana.removeEventListener("connect", handleConnect);
+      }
+      if (onDisconnect) {
+        phantom.solana.removeEventListener("disconnect", handleDisconnect);
+      }
+      if (onAccountChanged) {
+        phantom.solana.removeEventListener("accountChanged", handleAccountChanged);
+      }
+    };
+  }, [isReady, providerStatus, provider, phantom, onConnect, onDisconnect, onAccountChanged]);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  useProvider
+  useAccount,
+  useAccountEffect,
+  useConnect,
+  useDisconnect,
+  useProvider,
+  useSignAndSendTransaction,
+  useSignIn,
+  useSignMessage
 });

package/dist/solana/index.mjs

@@ -72,6 +72,187 @@ function useProvider() {
   }, [isReady, tryResolvingProvider]);
   return state;
 }
+
+// src/solana/useConnect.ts
+import * as React2 from "react";
+function useConnect({ autoConnect = false } = {}) {
+  const { phantom } = usePhantom();
+  const connect = React2.useCallback(async () => {
+    if (!phantom?.solana) {
+      throw new Error("Phantom solana plugin not found.");
+    }
+    return await phantom.solana.connect();
+  }, [phantom]);
+  React2.useEffect(() => {
+    if (autoConnect && phantom?.solana) {
+      connect();
+    }
+  }, [autoConnect, connect, phantom?.solana]);
+  return { connect };
+}
+
+// src/solana/useDisconnect.ts
+import * as React3 from "react";
+function useDisconnect() {
+  const { phantom } = usePhantom();
+  const disconnect = React3.useCallback(async () => {
+    if (!phantom?.solana) {
+      throw new Error("Phantom solana disconnect method not found.");
+    }
+    return await phantom.solana.disconnect();
+  }, [phantom]);
+  return { disconnect };
+}
+
+// src/solana/useSignIn.ts
+import { useCallback as useCallback4 } from "react";
+function useSignIn() {
+  const { phantom } = usePhantom();
+  const signIn = useCallback4(
+    async (signInData) => {
+      if (!phantom?.solana) {
+        throw new Error("Phantom Solana provider not available.");
+      }
+      const result = await phantom.solana.signIn(signInData);
+      return result;
+    },
+    [phantom]
+  );
+  return { signIn };
+}
+
+// src/solana/useSignAndSendTransaction.ts
+import { useCallback as useCallback5 } from "react";
+function useSignAndSendTransaction() {
+  const { phantom } = usePhantom();
+  const signAndSendTransaction = useCallback5(
+    async (transaction) => {
+      if (!phantom?.solana) {
+        throw new Error("Phantom Solana provider not available.");
+      }
+      const result = await phantom.solana.signAndSendTransaction(transaction);
+      return result;
+    },
+    [phantom]
+  );
+  return { signAndSendTransaction };
+}
+
+// src/solana/useSignMessage.ts
+import { useCallback as useCallback6 } from "react";
+function useSignMessage() {
+  const { phantom } = usePhantom();
+  const signMessage = useCallback6(
+    async (message, display) => {
+      if (!phantom?.solana) {
+        throw new Error("Phantom Solana provider not available.");
+      }
+      const result = await phantom.solana.signMessage(message, display);
+      return result;
+    },
+    [phantom]
+  );
+  return { signMessage };
+}
+
+// src/solana/useAccount.ts
+import * as React4 from "react";
+
+// src/solana/assertions.ts
+function assertSolanaConfigured(phantom) {
+  if (!phantom?.solana) {
+    throw new Error(
+      "Phantom solana chain plugin not found. Please ensure the solana chain plugin is installed and configured properly."
+    );
+  }
+}
+
+// src/solana/useAccount.ts
+function useAccount() {
+  const { phantom, isReady } = usePhantom();
+  const { status: providerStatus, provider } = useProvider();
+  const [account, setAccount] = React4.useState(() => {
+    if (!isReady)
+      return { status: "loading", address: null };
+    assertSolanaConfigured(phantom);
+    return phantom.solana.getAccount();
+  });
+  React4.useEffect(() => {
+    if (!isReady)
+      return;
+    assertSolanaConfigured(phantom);
+    if (providerStatus !== "success" || !provider)
+      return;
+    if (account.status === "loading") {
+      setAccount(phantom.solana.getAccount());
+    }
+    const updateAccount = () => {
+      setAccount(phantom.solana.getAccount());
+    };
+    phantom.solana.addEventListener("connect", updateAccount);
+    phantom.solana.addEventListener("disconnect", updateAccount);
+    phantom.solana.addEventListener("accountChanged", updateAccount);
+    return () => {
+      phantom.solana.removeEventListener("connect", updateAccount);
+      phantom.solana.removeEventListener("disconnect", updateAccount);
+      phantom.solana.removeEventListener("accountChanged", updateAccount);
+    };
+  }, [provider, phantom, providerStatus, isReady, account.status]);
+  return account;
+}
+
+// src/solana/useAccountEffect.ts
+import * as React5 from "react";
+function useAccountEffect(parameters = {}) {
+  const { onConnect, onDisconnect, onAccountChanged } = parameters;
+  const { phantom, isReady } = usePhantom();
+  const { status: providerStatus, provider } = useProvider();
+  React5.useEffect(() => {
+    if (!isReady || providerStatus !== "success" || !provider)
+      return;
+    assertSolanaConfigured(phantom);
+    const handleConnect = (publicKey) => {
+      onConnect?.({
+        publicKey
+      });
+    };
+    const handleDisconnect = () => {
+      onDisconnect?.();
+    };
+    const handleAccountChanged = (publicKey) => {
+      onAccountChanged?.({
+        publicKey
+      });
+    };
+    if (onConnect) {
+      phantom.solana.addEventListener("connect", handleConnect);
+    }
+    if (onDisconnect) {
+      phantom.solana.addEventListener("disconnect", handleDisconnect);
+    }
+    if (onAccountChanged) {
+      phantom.solana.addEventListener("accountChanged", handleAccountChanged);
+    }
+    return () => {
+      if (onConnect) {
+        phantom.solana.removeEventListener("connect", handleConnect);
+      }
+      if (onDisconnect) {
+        phantom.solana.removeEventListener("disconnect", handleDisconnect);
+      }
+      if (onAccountChanged) {
+        phantom.solana.removeEventListener("accountChanged", handleAccountChanged);
+      }
+    };
+  }, [isReady, providerStatus, provider, phantom, onConnect, onDisconnect, onAccountChanged]);
+}
 export {
-  useProvider
+  useAccount,
+  useAccountEffect,
+  useConnect,
+  useDisconnect,
+  useProvider,
+  useSignAndSendTransaction,
+  useSignIn,
+  useSignMessage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phantom/react-sdk",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",