@phantom/react-sdk 0.3.5 → 0.3.6

package/README.md

@@ -641,7 +641,7 @@ interface PhantomSDKConfig {
   providerType: "injected" | "embedded";
   appName?: string; // Optional app name for branding
   appLogo?: string; // Optional app logo URL for branding
-  addressTypes?: AddressType[]; // Networks to enable (e.g., [AddressType.solana])
+  addressTypes?: [AddressType, ...AddressType[]]; // Networks to enable (e.g., [AddressType.solana])
 
   // Required for embedded provider only
   apiBaseUrl?: string; // Phantom API base URL
@@ -653,13 +653,69 @@ 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 Configuration
+
+The React SDK supports separate debug configuration that can be changed without reinstantiating the underlying SDK, providing better performance.
+
+### PhantomDebugConfig Interface
+
+```typescript
+interface PhantomDebugConfig {
+  enabled?: boolean;     // Enable debug logging
+  level?: DebugLevel;    // Debug level (ERROR, WARN, INFO, DEBUG)
+  callback?: DebugCallback; // Custom debug message handler
+}
+```
+
+### Using Debug Configuration
+
+Pass the `debugConfig` as a separate prop to `PhantomProvider`:
+
+```typescript
+import { PhantomProvider, type PhantomSDKConfig, type PhantomDebugConfig, DebugLevel } from "@phantom/react-sdk";
+
+function App() {
+  const [debugLevel, setDebugLevel] = useState(DebugLevel.INFO);
+  const [debugMessages, setDebugMessages] = useState([]);
 
-  // Debug options
-  debug?: {
-    enabled?: boolean; // Enable debug logging
-    level?: "info" | "warn" | "error"; // Debug level
-    callback?: (level: string, message: string, data?: any) => void; // Custom debug callback
+  // SDK configuration - static, won't change when debug settings change
+  const config: PhantomSDKConfig = {
+    providerType: "embedded",
+    organizationId: "your-org-id",
+    // ... other config
+  };
+
+  // Debug configuration - separate to avoid SDK reinstantiation
+  const debugConfig: PhantomDebugConfig = {
+    enabled: true,
+    level: debugLevel,
+    callback: (message) => {
+      setDebugMessages(prev => [...prev, message]);
+    }
   };
+
+  return (
+    <PhantomProvider config={config} debugConfig={debugConfig}>
+      {/* Your app components */}
+    </PhantomProvider>
+  );
+}
+```
+
+### Debug Message Structure
+
+Debug callbacks receive a `DebugMessage` object:
+
+```typescript
+interface DebugMessage {
+  timestamp: number;     // Unix timestamp
+  level: DebugLevel;     // Message level
+  category: string;      // Component category
+  message: string;       // Debug message text
+  data?: any;           // Additional debug data (optional)
 }
 ```
 

package/dist/index.d.ts

@@ -1,18 +1,20 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { BrowserSDKConfig, AuthOptions, BrowserSDK, WalletAddress, SignMessageParams, SignMessageResult, SignAndSendTransactionParams, SignedTransaction } from '@phantom/browser-sdk';
+import { BrowserSDKConfig, DebugConfig, AuthOptions, BrowserSDK, WalletAddress, SignMessageParams, SignMessageResult, SignAndSendTransactionParams, SignedTransaction } from '@phantom/browser-sdk';
 export { AddressType, 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 {
 }
+interface PhantomDebugConfig extends DebugConfig {
+}
 interface ConnectOptions {
     providerType?: "injected" | "embedded";
     embeddedWalletType?: "app-wallet" | "user-wallet";
     authOptions?: AuthOptions;
 }
 interface PhantomContextValue {
-    sdk: BrowserSDK;
+    sdk: BrowserSDK | null;
     isConnected: boolean;
     isConnecting: boolean;
     connectError: Error | null;
@@ -24,8 +26,9 @@ interface PhantomContextValue {
 interface PhantomProviderProps {
     children: ReactNode;
     config: PhantomSDKConfig;
+    debugConfig?: PhantomDebugConfig;
 }
-declare function PhantomProvider({ children, config }: PhantomProviderProps): react_jsx_runtime.JSX.Element;
+declare function PhantomProvider({ children, config, debugConfig }: PhantomProviderProps): react_jsx_runtime.JSX.Element;
 declare function usePhantom(): PhantomContextValue;
 
 declare function useConnect(): {
@@ -63,4 +66,4 @@ declare function useIsExtensionInstalled(): {
 
 type ProviderType = "injected" | "embedded";
 
-export { ConnectOptions, PhantomProvider, PhantomProviderProps, PhantomSDKConfig, ProviderType, useAccounts, useConnect, useDisconnect, useIsExtensionInstalled, usePhantom, useSignAndSendTransaction, useSignMessage };
+export { ConnectOptions, PhantomDebugConfig, PhantomProvider, PhantomProviderProps, PhantomSDKConfig, ProviderType, useAccounts, useConnect, useDisconnect, useIsExtensionInstalled, usePhantom, useSignAndSendTransaction, useSignMessage };

package/dist/index.js

@@ -50,7 +50,15 @@ var import_react = require("react");
 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 }) {
+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 [currentProviderType, setCurrentProviderType] = (0, import_react.useState)(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,
@@ -58,7 +66,7 @@ function PhantomProvider({ children, config }) {
       providerType: config.providerType || "embedded"
     };
   }, [config]);
-  const sdk = (0, import_react.useMemo)(() => {
+  (0, import_react.useEffect)(() => {
     const sdkInstance = new import_browser_sdk.BrowserSDK(memoizedConfig);
     const handleConnectStart = () => {
       setIsConnecting(true);
@@ -98,16 +106,22 @@ function PhantomProvider({ children, config }) {
     sdkInstance.on("connect", handleConnect);
     sdkInstance.on("connect_error", handleConnectError);
     sdkInstance.on("disconnect", handleDisconnect);
-    return sdkInstance;
+    setSdk(sdkInstance);
+    return () => {
+      sdkInstance.off("connect_start", handleConnectStart);
+      sdkInstance.off("connect", handleConnect);
+      sdkInstance.off("connect_error", handleConnectError);
+      sdkInstance.off("disconnect", handleDisconnect);
+    };
   }, [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 [currentProviderType, setCurrentProviderType] = (0, import_react.useState)(null);
-  const [isPhantomAvailable, setIsPhantomAvailable] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
+    if (!sdk || !debugConfig)
+      return;
+    sdk.configureDebug(debugConfig);
+  }, [sdk, debugConfig]);
+  (0, import_react.useEffect)(() => {
+    if (!sdk)
+      return;
     const initialize = async () => {
       try {
         const available = await sdk.waitForPhantomExtension(1e3);

package/dist/index.mjs

@@ -3,7 +3,15 @@ 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 }) {
+function PhantomProvider({ children, config, debugConfig }) {
+  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 [currentProviderType, setCurrentProviderType] = useState(null);
+  const [isPhantomAvailable, setIsPhantomAvailable] = useState(false);
+  const [sdk, setSdk] = useState(null);
   const memoizedConfig = useMemo(() => {
     return {
       ...config,
@@ -11,7 +19,7 @@ function PhantomProvider({ children, config }) {
       providerType: config.providerType || "embedded"
     };
   }, [config]);
-  const sdk = useMemo(() => {
+  useEffect(() => {
     const sdkInstance = new BrowserSDK(memoizedConfig);
     const handleConnectStart = () => {
       setIsConnecting(true);
@@ -51,16 +59,22 @@ function PhantomProvider({ children, config }) {
     sdkInstance.on("connect", handleConnect);
     sdkInstance.on("connect_error", handleConnectError);
     sdkInstance.on("disconnect", handleDisconnect);
-    return sdkInstance;
+    setSdk(sdkInstance);
+    return () => {
+      sdkInstance.off("connect_start", handleConnectStart);
+      sdkInstance.off("connect", handleConnect);
+      sdkInstance.off("connect_error", handleConnectError);
+      sdkInstance.off("disconnect", handleDisconnect);
+    };
   }, [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 [currentProviderType, setCurrentProviderType] = useState(null);
-  const [isPhantomAvailable, setIsPhantomAvailable] = useState(false);
   useEffect(() => {
+    if (!sdk || !debugConfig)
+      return;
+    sdk.configureDebug(debugConfig);
+  }, [sdk, debugConfig]);
+  useEffect(() => {
+    if (!sdk)
+      return;
     const initialize = async () => {
       try {
         const available = await sdk.waitForPhantomExtension(1e3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phantom/react-sdk",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "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.5"
+    "@phantom/browser-sdk": "^0.3.6"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",