@phantom/react-sdk 1.0.5 → 1.0.7

package/README.md

@@ -1273,6 +1273,48 @@ function EthereumExample() {
 }
 ```
 
+## Dapp-Sponsored Transactions (presignTransaction)
+
+Pass `presignTransaction` directly to `signAndSendTransaction` for calls that need co-signing. Calls without it proceed normally — it is never applied globally.
+
+> **Important:** Phantom embedded wallets do not accept pre-signed transactions. If your use case requires a second signer (e.g. your app as the fee payer), that signing must happen via this option, after Phantom has constructed and validated the transaction. This restriction does not apply to injected providers (e.g. the Phantom browser extension).
+
+> **Note:** `presignTransaction` only fires for Solana transactions via the embedded provider. EVM transactions and injected providers are unaffected.
+
+```tsx
+import { useSolana, base64urlDecode, base64urlEncode } from "@phantom/react-sdk";
+import { VersionedTransaction } from "@solana/web3.js";
+
+function SendWithFeeSponsor() {
+  const { solana } = useSolana();
+
+  const sendSponsored = async () => {
+    // This call co-signs as fee payer.
+    // presignTransaction should call your backend — never hold a fee payer keypair in frontend code.
+    const result = await solana.signAndSendTransaction(transaction, {
+      presignTransaction: async (tx, context) => {
+        // Send the transaction to your backend for fee payer signing.
+        // Your backend deserializes, partially signs, and returns the modified transaction.
+        const response = await fetch("/api/presign", {
+          method: "POST",
+          body: JSON.stringify({ transaction: tx, networkId: context.networkId }),
+          headers: { "Content-Type": "application/json" },
+        });
+        const { transaction: signedTx } = await response.json();
+        return signedTx; // base64url-encoded, partially signed by the fee payer
+      },
+    });
+  };
+
+  const sendNormal = async () => {
+    // This call has no co-signer
+    const result = await solana.signAndSendTransaction(transaction);
+  };
+}
+```
+
+> **Never hold a fee payer keypair in frontend code.** The `presignTransaction` callback runs in the browser — use it to call your own backend, which holds the keypair securely and returns the partially-signed transaction.
+
 ## Hooks Reference
 
 Quick reference of all available hooks:

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import * as _phantom_browser_sdk from '@phantom/browser-sdk';
 import { BrowserSDKConfig, DebugConfig, AuthOptions, BrowserSDK, WalletAddress, ConnectResult, AuthProviderType, AutoConfirmEnableParams, AutoConfirmResult, AutoConfirmSupportedChainsResult, InjectedWalletInfo, AddressType } from '@phantom/browser-sdk';
-export { AddressType, AuthOptions, AutoConfirmEnableParams, AutoConfirmResult, AutoConfirmSupportedChainsResult, ConnectErrorEventData, ConnectEventData, ConnectStartEventData, DebugLevel, DebugMessage, DisconnectEventData, EmbeddedProviderEvent, EmbeddedProviderEventMap, EventCallback, InjectedWalletId, InjectedWalletInfo, NetworkId, SignedTransaction, WalletAddress, debug, isMobileDevice } from '@phantom/browser-sdk';
+export { AddressType, AuthOptions, AutoConfirmEnableParams, AutoConfirmResult, AutoConfirmSupportedChainsResult, ConnectErrorEventData, ConnectEventData, ConnectStartEventData, DebugLevel, DebugMessage, DisconnectEventData, EmbeddedProviderEvent, EmbeddedProviderEventMap, EventCallback, InjectedWalletId, InjectedWalletInfo, NetworkId, SignedTransaction, WalletAddress, base64urlDecode, base64urlEncode, debug, isMobileDevice } from '@phantom/browser-sdk';
 import { PhantomTheme } from '@phantom/wallet-sdk-ui';
 export { ComputedPhantomTheme, HexColor, PhantomTheme, darkTheme, lightTheme, mergeTheme, useTheme } from '@phantom/wallet-sdk-ui';
 import { ISolanaChain, IEthereumChain } from '@phantom/chain-interfaces';

package/dist/index.js

@@ -36,6 +36,8 @@ __export(src_exports, {
   DebugLevel: () => import_browser_sdk8.DebugLevel,
   NetworkId: () => import_browser_sdk8.NetworkId,
   PhantomProvider: () => PhantomProvider,
+  base64urlDecode: () => import_browser_sdk8.base64urlDecode,
+  base64urlEncode: () => import_browser_sdk8.base64urlEncode,
   darkTheme: () => import_wallet_sdk_ui10.darkTheme,
   debug: () => import_browser_sdk8.debug,
   isMobileDevice: () => import_browser_sdk8.isMobileDevice,
@@ -842,8 +844,16 @@ function PhantomProvider({ children, config, debugConfig, theme, appIcon, appNam
         console.error("Error connecting:", err);
         try {
           await sdk.disconnect();
-        } catch (err2) {
-          console.error("Error disconnecting:", err2);
+        } catch (disconnectErr) {
+          console.error("Error disconnecting after connect failure:", disconnectErr);
+          setIsConnected(false);
+          setIsConnecting(false);
+          setAddresses([]);
+          setUser(null);
+          setErrors((prev) => ({
+            ...prev,
+            connect: err instanceof Error ? err : new Error("Failed to retrieve addresses after connect")
+          }));
         }
       }
     };

package/dist/index.mjs

@@ -793,8 +793,16 @@ function PhantomProvider({ children, config, debugConfig, theme, appIcon, appNam
         console.error("Error connecting:", err);
         try {
           await sdk.disconnect();
-        } catch (err2) {
-          console.error("Error disconnecting:", err2);
+        } catch (disconnectErr) {
+          console.error("Error disconnecting after connect failure:", disconnectErr);
+          setIsConnected(false);
+          setIsConnecting(false);
+          setAddresses([]);
+          setUser(null);
+          setErrors((prev) => ({
+            ...prev,
+            connect: err instanceof Error ? err : new Error("Failed to retrieve addresses after connect")
+          }));
         }
       }
     };
@@ -1138,7 +1146,15 @@ function ConnectBox({ maxWidth = "350px", transparent = false, appIcon, appName
 
 // src/index.ts
 import { darkTheme as darkTheme2, lightTheme, mergeTheme as mergeTheme2 } from "@phantom/wallet-sdk-ui";
-import { NetworkId, AddressType as AddressType3, DebugLevel, debug, isMobileDevice as isMobileDevice3 } from "@phantom/browser-sdk";
+import {
+  NetworkId,
+  AddressType as AddressType3,
+  DebugLevel,
+  debug,
+  isMobileDevice as isMobileDevice3,
+  base64urlEncode,
+  base64urlDecode
+} from "@phantom/browser-sdk";
 export {
   AddressType3 as AddressType,
   ConnectBox,
@@ -1146,6 +1162,8 @@ export {
   DebugLevel,
   NetworkId,
   PhantomProvider,
+  base64urlDecode,
+  base64urlEncode,
   darkTheme2 as darkTheme,
   debug,
   isMobileDevice3 as isMobileDevice,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phantom/react-sdk",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/phantom/phantom-connect-sdk",
@@ -31,10 +31,10 @@
     "prettier": "prettier --write \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "@phantom/browser-sdk": "^1.0.5",
-    "@phantom/chain-interfaces": "^1.0.5",
-    "@phantom/constants": "^1.0.5",
-    "@phantom/wallet-sdk-ui": "^1.0.5"
+    "@phantom/browser-sdk": "^1.0.7",
+    "@phantom/chain-interfaces": "^1.0.7",
+    "@phantom/constants": "^1.0.7",
+    "@phantom/wallet-sdk-ui": "^1.0.7"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",