@phantom/react-sdk 0.2.3 → 0.3.1

package/README.md

@@ -67,7 +67,7 @@ function App() {
         providerType: "embedded",
         embeddedWalletType: "app-wallet", // or 'user-wallet'
         addressTypes: [AddressType.solana, AddressType.ethereum],
-        apiBaseUrl: "https://api.phantom.com",
+        apiBaseUrl: "https://api.phantom.app/v1/wallets",
         organizationId: "your-org-id",
       }}
     >
@@ -109,7 +109,7 @@ Creates non-custodial wallets embedded in your application.
     providerType: "embedded",
     embeddedWalletType: "app-wallet",
     addressTypes: [AddressType.solana],
-    apiBaseUrl: "https://api.phantom.com",
+    apiBaseUrl: "https://api.phantom.app/v1/wallets",
     organizationId: "your-org-id",
   }}
 >
@@ -129,7 +129,7 @@ Creates non-custodial wallets embedded in your application.
     providerType: "embedded",
     embeddedWalletType: "user-wallet",
     addressTypes: [AddressType.solana, AddressType.ethereum],
-    apiBaseUrl: "https://api.phantom.com",
+    apiBaseUrl: "https://api.phantom.app/v1/wallets",
     organizationId: "your-org-id",
   }}
 >
@@ -147,7 +147,7 @@ When using `AddressType.solana`, you can choose between two Solana libraries:
     providerType: "embedded",
     addressTypes: [AddressType.solana],
     solanaProvider: "web3js", // or 'kit'
-    apiBaseUrl: "https://api.phantom.com",
+    apiBaseUrl: "https://api.phantom.app/v1/wallets",
     organizationId: "your-org-id",
   }}
 >
@@ -318,25 +318,43 @@ function SignMessage() {
 
 ```tsx
 import { useSignAndSendTransaction, NetworkId } from "@phantom/react-sdk";
-import { Transaction, SystemProgram, PublicKey, LAMPORTS_PER_SOL } from "@solana/web3.js";
+import {
+  VersionedTransaction,
+  TransactionMessage,
+  SystemProgram,
+  PublicKey,
+  LAMPORTS_PER_SOL,
+  Connection,
+} from "@solana/web3.js";
 
 function SendSolanaTransaction() {
   const { signAndSendTransaction, isLoading, error } = useSignAndSendTransaction();
 
   const handleSend = async () => {
-    // Create native Solana transaction - no encoding needed!
-    const transaction = new Transaction().add(
-      SystemProgram.transfer({
-        fromPubkey: new PublicKey(fromAddress),
-        toPubkey: new PublicKey(toAddress),
-        lamports: 0.001 * LAMPORTS_PER_SOL,
-      }),
-    );
+    // Get recent blockhash
+    const connection = new Connection("https://api.mainnet-beta.solana.com");
+    const { blockhash } = await connection.getLatestBlockhash();
+
+    // Create transfer instruction
+    const transferInstruction = SystemProgram.transfer({
+      fromPubkey: new PublicKey(fromAddress),
+      toPubkey: new PublicKey(toAddress),
+      lamports: 0.001 * LAMPORTS_PER_SOL,
+    });
+
+    // Create VersionedTransaction
+    const messageV0 = new TransactionMessage({
+      payerKey: new PublicKey(fromAddress),
+      recentBlockhash: blockhash,
+      instructions: [transferInstruction],
+    }).compileToV0Message();
+
+    const transaction = new VersionedTransaction(messageV0);
 
     try {
       const result = await signAndSendTransaction({
         networkId: NetworkId.SOLANA_MAINNET,
-        transaction: transaction, // Native Transaction object!
+        transaction: transaction, // Native VersionedTransaction object!
       });
       console.log("Transaction sent:", result.rawTransaction);
     } catch (err) {
@@ -430,20 +448,32 @@ The SDK automatically determines the transaction type from the NetworkId:
 ### Solana with @solana/web3.js
 
 ```tsx
-import { Transaction, SystemProgram, PublicKey } from "@solana/web3.js";
+import { VersionedTransaction, TransactionMessage, SystemProgram, PublicKey, Connection } from "@solana/web3.js";
 import { useSignAndSendTransaction, NetworkId } from "@phantom/react-sdk";
 
 function SolanaExample() {
   const { signAndSendTransaction } = useSignAndSendTransaction();
 
   const sendTransaction = async () => {
-    const transaction = new Transaction().add(
-      SystemProgram.transfer({
-        fromPubkey: new PublicKey(fromAddress),
-        toPubkey: new PublicKey(toAddress),
-        lamports: 1000000, // 0.001 SOL
-      }),
-    );
+    // Get recent blockhash
+    const connection = new Connection("https://api.mainnet-beta.solana.com");
+    const { blockhash } = await connection.getLatestBlockhash();
+
+    // Create transfer instruction
+    const transferInstruction = SystemProgram.transfer({
+      fromPubkey: new PublicKey(fromAddress),
+      toPubkey: new PublicKey(toAddress),
+      lamports: 1000000, // 0.001 SOL
+    });
+
+    // Create VersionedTransaction
+    const messageV0 = new TransactionMessage({
+      payerKey: new PublicKey(fromAddress),
+      recentBlockhash: blockhash,
+      instructions: [transferInstruction],
+    }).compileToV0Message();
+
+    const transaction = new VersionedTransaction(messageV0);
 
     // No serialization or encoding needed!
     const result = await signAndSendTransaction({
@@ -537,20 +567,32 @@ function EthereumExample() {
 
 ```tsx
 import { useSignAndSendTransaction, NetworkId } from "@phantom/react-sdk";
-import { Transaction, SystemProgram, PublicKey } from "@solana/web3.js";
+import { VersionedTransaction, TransactionMessage, SystemProgram, PublicKey, Connection } from "@solana/web3.js";
 import { parseEther } from "viem";
 
 function MultiChainWallet() {
   const { signAndSendTransaction } = useSignAndSendTransaction();
 
   const sendSolana = async () => {
-    const transaction = new Transaction().add(
-      SystemProgram.transfer({
-        fromPubkey: new PublicKey(solanaAddress),
-        toPubkey: new PublicKey(recipient),
-        lamports: 1000000,
-      }),
-    );
+    // Get recent blockhash
+    const connection = new Connection("https://api.mainnet-beta.solana.com");
+    const { blockhash } = await connection.getLatestBlockhash();
+
+    // Create transfer instruction
+    const transferInstruction = SystemProgram.transfer({
+      fromPubkey: new PublicKey(solanaAddress),
+      toPubkey: new PublicKey(recipient),
+      lamports: 1000000,
+    });
+
+    // Create VersionedTransaction
+    const messageV0 = new TransactionMessage({
+      payerKey: new PublicKey(solanaAddress),
+      recentBlockhash: blockhash,
+      instructions: [transferInstruction],
+    }).compileToV0Message();
+
+    const transaction = new VersionedTransaction(messageV0);
 
     return await signAndSendTransaction({
       networkId: NetworkId.SOLANA_MAINNET,
@@ -591,7 +633,7 @@ Quick reference of all available hooks:
 | `useSignMessage`            | Sign text messages                  | `{ signMessage, isSigning, error }`             |
 | `useSignAndSendTransaction` | Sign and send transactions          | `{ signAndSendTransaction, isSigning, error }`  |
 | `useCreateUserOrganization` | Create user organization (embedded) | `{ createUserOrganization, isCreating, error }` |
-| `usePhantom`                | Get provider context                | `{ isConnected, isReady, currentProviderType }` |
+| `usePhantom`                | Get provider context                | `{ isConnected, isReady }`                      |
 
 ## Configuration Reference
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { BrowserSDKConfig, AuthOptions, BrowserSDK, WalletAddress, SignMessageParams, SignAndSendTransactionParams, SignedTransaction, CreateUserOrganizationParams, CreateUserOrganizationResult } from '@phantom/browser-sdk';
-export { AddressType, CreateUserOrganizationParams, CreateUserOrganizationResult, DebugLevel, DebugMessage, NetworkId, SignAndSendTransactionParams, SignMessageParams, SignedTransaction, WalletAddress, debug } from '@phantom/browser-sdk';
+import { BrowserSDKConfig, AuthOptions, BrowserSDK, WalletAddress, SignMessageParams, SignMessageResult, SignAndSendTransactionParams, SignedTransaction, CreateUserOrganizationParams, CreateUserOrganizationResult } from '@phantom/browser-sdk';
+export { AddressType, CreateUserOrganizationParams, CreateUserOrganizationResult, DebugLevel, DebugMessage, NetworkId, SignAndSendTransactionParams, SignMessageParams, SignMessageResult, SignedTransaction, WalletAddress, debug } from '@phantom/browser-sdk';
 import * as _phantom_embedded_provider_core from '@phantom/embedded-provider-core';
 
 interface PhantomSDKConfig extends BrowserSDKConfig {
@@ -12,11 +12,10 @@ interface ConnectOptions {
     authOptions?: AuthOptions;
 }
 interface PhantomContextValue {
-    sdk: BrowserSDK | null;
+    sdk: BrowserSDK;
     isConnected: boolean;
     addresses: WalletAddress[];
     walletId: string | null;
-    isReady: boolean;
     error: Error | null;
     currentProviderType: "injected" | "embedded" | null;
     isPhantomAvailable: boolean;
@@ -44,7 +43,7 @@ declare function useDisconnect(): {
 };
 
 declare function useSignMessage(): {
-    signMessage: (params: SignMessageParams) => Promise<string>;
+    signMessage: (params: SignMessageParams) => Promise<SignMessageResult>;
     isSigning: boolean;
     error: Error | null;
 };

package/dist/index.js

@@ -52,71 +52,61 @@ 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, setSdk] = (0, import_react.useState)(null);
+  const sdk = (0, import_react.useMemo)(
+    () => new import_browser_sdk.BrowserSDK({
+      ...config,
+      // Use providerType if provided, default to embedded
+      providerType: config.providerType || "embedded"
+    }),
+    [config]
+  );
   const [isConnected, setIsConnected] = (0, import_react.useState)(false);
   const [addresses, setAddresses] = (0, import_react.useState)([]);
   const [walletId, setWalletId] = (0, import_react.useState)(null);
-  const [isReady, setIsReady] = (0, import_react.useState)(false);
   const [error, setError] = (0, import_react.useState)(null);
   const [currentProviderType, setCurrentProviderType] = (0, import_react.useState)(null);
   const [isPhantomAvailable, setIsPhantomAvailable] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
+  const updateConnectionState = (0, import_react.useCallback)(async () => {
     try {
-      const browserConfig = {
-        ...config,
-        // Use providerType if provided, default to embedded
-        providerType: config.providerType || "embedded"
-      };
-      const browserSDK = new import_browser_sdk.BrowserSDK(browserConfig);
-      setSdk(browserSDK);
-      const initialProviderInfo = browserSDK.getCurrentProviderInfo();
-      setCurrentProviderType(initialProviderInfo?.type || null);
-      const checkPhantom = async () => {
-        const available = await browserSDK.waitForPhantomExtension(1e3);
-        setIsPhantomAvailable(available);
-      };
-      checkPhantom();
-      setIsReady(true);
+      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);
-      setIsReady(true);
     }
-  }, [config]);
-  const updateConnectionState = (0, import_react.useCallback)(async () => {
-    if (sdk) {
+  }, [sdk]);
+  (0, import_react.useEffect)(() => {
+    const checkPhantomExtension = 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);
-        }
+        const available = await sdk.waitForPhantomExtension(1e3);
+        setIsPhantomAvailable(available);
       } catch (err) {
-        console.error("Error updating connection state:", err);
+        console.error("Error checking Phantom extension:", err);
+        setIsPhantomAvailable(false);
       }
-    }
-  }, [sdk]);
+    };
+    checkPhantomExtension();
+    updateConnectionState();
+  }, [sdk, updateConnectionState]);
   (0, import_react.useEffect)(() => {
     updateConnectionState();
   }, [updateConnectionState]);
-  (0, import_react.useEffect)(() => {
-    if (sdk) {
-      sdk._updateConnectionState = updateConnectionState;
-    }
-  }, [sdk, updateConnectionState]);
   const value = {
     sdk,
     isConnected,
     addresses,
     updateConnectionState,
     walletId,
-    isReady,
     error,
     currentProviderType,
     isPhantomAvailable
@@ -139,16 +129,14 @@ function useConnect() {
   const [error, setError] = (0, import_react2.useState)(null);
   const connect = (0, import_react2.useCallback)(
     async (options) => {
-      if (!context.sdk || !context.isReady) {
+      if (!context.sdk) {
         throw new Error("SDK not initialized");
       }
       setIsConnecting(true);
       setError(null);
       try {
         const result = await context.sdk.connect(options);
-        if (context.sdk._updateConnectionState) {
-          await context.sdk._updateConnectionState();
-        }
+        await context.updateConnectionState();
         return result;
       } catch (err) {
         console.error("Error connecting to Phantom:", err);
@@ -158,7 +146,7 @@ function useConnect() {
         setIsConnecting(false);
       }
     },
-    [context.sdk, context.isReady]
+    [context]
   );
   return {
     connect,
@@ -172,11 +160,11 @@ function useConnect() {
 // src/hooks/useDisconnect.ts
 var import_react3 = require("react");
 function useDisconnect() {
-  const { sdk, isReady, updateConnectionState } = usePhantom();
+  const { sdk, updateConnectionState } = 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 || !isReady) {
+    if (!sdk) {
       throw new Error("SDK not initialized");
     }
     setIsDisconnecting(true);
@@ -190,7 +178,7 @@ function useDisconnect() {
     } finally {
       setIsDisconnecting(false);
     }
-  }, [sdk, isReady, updateConnectionState]);
+  }, [sdk, updateConnectionState]);
   return {
     disconnect,
     isDisconnecting,

package/dist/index.mjs

@@ -1,74 +1,64 @@
 // src/PhantomProvider.tsx
-import { createContext, useContext, useState, useEffect, useCallback } from "react";
+import { createContext, useContext, useState, useEffect, useCallback, 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, setSdk] = useState(null);
+  const sdk = useMemo(
+    () => new BrowserSDK({
+      ...config,
+      // Use providerType if provided, default to embedded
+      providerType: config.providerType || "embedded"
+    }),
+    [config]
+  );
   const [isConnected, setIsConnected] = useState(false);
   const [addresses, setAddresses] = useState([]);
   const [walletId, setWalletId] = useState(null);
-  const [isReady, setIsReady] = useState(false);
   const [error, setError] = useState(null);
   const [currentProviderType, setCurrentProviderType] = useState(null);
   const [isPhantomAvailable, setIsPhantomAvailable] = useState(false);
-  useEffect(() => {
+  const updateConnectionState = useCallback(async () => {
     try {
-      const browserConfig = {
-        ...config,
-        // Use providerType if provided, default to embedded
-        providerType: config.providerType || "embedded"
-      };
-      const browserSDK = new BrowserSDK(browserConfig);
-      setSdk(browserSDK);
-      const initialProviderInfo = browserSDK.getCurrentProviderInfo();
-      setCurrentProviderType(initialProviderInfo?.type || null);
-      const checkPhantom = async () => {
-        const available = await browserSDK.waitForPhantomExtension(1e3);
-        setIsPhantomAvailable(available);
-      };
-      checkPhantom();
-      setIsReady(true);
+      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);
-      setIsReady(true);
     }
-  }, [config]);
-  const updateConnectionState = useCallback(async () => {
-    if (sdk) {
+  }, [sdk]);
+  useEffect(() => {
+    const checkPhantomExtension = 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);
-        }
+        const available = await sdk.waitForPhantomExtension(1e3);
+        setIsPhantomAvailable(available);
       } catch (err) {
-        console.error("Error updating connection state:", err);
+        console.error("Error checking Phantom extension:", err);
+        setIsPhantomAvailable(false);
       }
-    }
-  }, [sdk]);
+    };
+    checkPhantomExtension();
+    updateConnectionState();
+  }, [sdk, updateConnectionState]);
   useEffect(() => {
     updateConnectionState();
   }, [updateConnectionState]);
-  useEffect(() => {
-    if (sdk) {
-      sdk._updateConnectionState = updateConnectionState;
-    }
-  }, [sdk, updateConnectionState]);
   const value = {
     sdk,
     isConnected,
     addresses,
     updateConnectionState,
     walletId,
-    isReady,
     error,
     currentProviderType,
     isPhantomAvailable
@@ -91,16 +81,14 @@ function useConnect() {
   const [error, setError] = useState2(null);
   const connect = useCallback2(
     async (options) => {
-      if (!context.sdk || !context.isReady) {
+      if (!context.sdk) {
         throw new Error("SDK not initialized");
       }
       setIsConnecting(true);
       setError(null);
       try {
         const result = await context.sdk.connect(options);
-        if (context.sdk._updateConnectionState) {
-          await context.sdk._updateConnectionState();
-        }
+        await context.updateConnectionState();
         return result;
       } catch (err) {
         console.error("Error connecting to Phantom:", err);
@@ -110,7 +98,7 @@ function useConnect() {
         setIsConnecting(false);
       }
     },
-    [context.sdk, context.isReady]
+    [context]
   );
   return {
     connect,
@@ -124,11 +112,11 @@ function useConnect() {
 // src/hooks/useDisconnect.ts
 import { useCallback as useCallback3, useState as useState3 } from "react";
 function useDisconnect() {
-  const { sdk, isReady, updateConnectionState } = usePhantom();
+  const { sdk, updateConnectionState } = usePhantom();
   const [isDisconnecting, setIsDisconnecting] = useState3(false);
   const [error, setError] = useState3(null);
   const disconnect = useCallback3(async () => {
-    if (!sdk || !isReady) {
+    if (!sdk) {
       throw new Error("SDK not initialized");
     }
     setIsDisconnecting(true);
@@ -142,7 +130,7 @@ function useDisconnect() {
     } finally {
       setIsDisconnecting(false);
     }
-  }, [sdk, isReady, updateConnectionState]);
+  }, [sdk, updateConnectionState]);
   return {
     disconnect,
     isDisconnecting,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phantom/react-sdk",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -21,31 +21,32 @@
     "pack-release": "rimraf ./_release && yarn pack && mkdir ./_release && tar zxvf ./package.tgz --directory ./_release && rm ./package.tgz",
     "dev": "rimraf ./dist && tsup src/index.ts --format cjs,esm --dts --watch",
     "lint": "tsc --noEmit && eslint --cache . --ext .ts,.tsx",
+    "check-types": "tsc --noEmit",
     "test": "jest",
     "prettier": "prettier --write \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "@phantom/browser-sdk": "^0.2.3"
+    "@phantom/browser-sdk": "^0.3.1"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
-    "@types/react": "^19.1.5",
-    "@types/react-dom": "^19.1.5",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "eslint": "8.53.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.5.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "rimraf": "^6.0.1",
     "ts-jest": "^29",
     "tsup": "^6.7.0",
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "react": ">=18.0.0"
+    "react": ">=19.0.0"
   },
   "publishConfig": {
     "directory": "_release/package"