@phantom/react-sdk 0.2.3 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +95 -42
- package/dist/index.d.ts +5 -12
- package/dist/index.js +47 -84
- package/dist/index.mjs +48 -85
- package/package.json +8 -7
package/README.md
CHANGED
|
@@ -67,7 +67,7 @@ function App() {
|
|
|
67
67
|
providerType: "embedded",
|
|
68
68
|
embeddedWalletType: "app-wallet", // or 'user-wallet'
|
|
69
69
|
addressTypes: [AddressType.solana, AddressType.ethereum],
|
|
70
|
-
apiBaseUrl: "https://api.phantom.
|
|
70
|
+
apiBaseUrl: "https://api.phantom.app/v1/wallets",
|
|
71
71
|
organizationId: "your-org-id",
|
|
72
72
|
}}
|
|
73
73
|
>
|
|
@@ -109,7 +109,7 @@ Creates non-custodial wallets embedded in your application.
|
|
|
109
109
|
providerType: "embedded",
|
|
110
110
|
embeddedWalletType: "app-wallet",
|
|
111
111
|
addressTypes: [AddressType.solana],
|
|
112
|
-
apiBaseUrl: "https://api.phantom.
|
|
112
|
+
apiBaseUrl: "https://api.phantom.app/v1/wallets",
|
|
113
113
|
organizationId: "your-org-id",
|
|
114
114
|
}}
|
|
115
115
|
>
|
|
@@ -129,7 +129,7 @@ Creates non-custodial wallets embedded in your application.
|
|
|
129
129
|
providerType: "embedded",
|
|
130
130
|
embeddedWalletType: "user-wallet",
|
|
131
131
|
addressTypes: [AddressType.solana, AddressType.ethereum],
|
|
132
|
-
apiBaseUrl: "https://api.phantom.
|
|
132
|
+
apiBaseUrl: "https://api.phantom.app/v1/wallets",
|
|
133
133
|
organizationId: "your-org-id",
|
|
134
134
|
}}
|
|
135
135
|
>
|
|
@@ -147,7 +147,7 @@ When using `AddressType.solana`, you can choose between two Solana libraries:
|
|
|
147
147
|
providerType: "embedded",
|
|
148
148
|
addressTypes: [AddressType.solana],
|
|
149
149
|
solanaProvider: "web3js", // or 'kit'
|
|
150
|
-
apiBaseUrl: "https://api.phantom.
|
|
150
|
+
apiBaseUrl: "https://api.phantom.app/v1/wallets",
|
|
151
151
|
organizationId: "your-org-id",
|
|
152
152
|
}}
|
|
153
153
|
>
|
|
@@ -318,25 +318,43 @@ function SignMessage() {
|
|
|
318
318
|
|
|
319
319
|
```tsx
|
|
320
320
|
import { useSignAndSendTransaction, NetworkId } from "@phantom/react-sdk";
|
|
321
|
-
import {
|
|
321
|
+
import {
|
|
322
|
+
VersionedTransaction,
|
|
323
|
+
TransactionMessage,
|
|
324
|
+
SystemProgram,
|
|
325
|
+
PublicKey,
|
|
326
|
+
LAMPORTS_PER_SOL,
|
|
327
|
+
Connection,
|
|
328
|
+
} from "@solana/web3.js";
|
|
322
329
|
|
|
323
330
|
function SendSolanaTransaction() {
|
|
324
331
|
const { signAndSendTransaction, isLoading, error } = useSignAndSendTransaction();
|
|
325
332
|
|
|
326
333
|
const handleSend = async () => {
|
|
327
|
-
//
|
|
328
|
-
const
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
334
|
+
// Get recent blockhash
|
|
335
|
+
const connection = new Connection("https://api.mainnet-beta.solana.com");
|
|
336
|
+
const { blockhash } = await connection.getLatestBlockhash();
|
|
337
|
+
|
|
338
|
+
// Create transfer instruction
|
|
339
|
+
const transferInstruction = SystemProgram.transfer({
|
|
340
|
+
fromPubkey: new PublicKey(fromAddress),
|
|
341
|
+
toPubkey: new PublicKey(toAddress),
|
|
342
|
+
lamports: 0.001 * LAMPORTS_PER_SOL,
|
|
343
|
+
});
|
|
344
|
+
|
|
345
|
+
// Create VersionedTransaction
|
|
346
|
+
const messageV0 = new TransactionMessage({
|
|
347
|
+
payerKey: new PublicKey(fromAddress),
|
|
348
|
+
recentBlockhash: blockhash,
|
|
349
|
+
instructions: [transferInstruction],
|
|
350
|
+
}).compileToV0Message();
|
|
351
|
+
|
|
352
|
+
const transaction = new VersionedTransaction(messageV0);
|
|
335
353
|
|
|
336
354
|
try {
|
|
337
355
|
const result = await signAndSendTransaction({
|
|
338
356
|
networkId: NetworkId.SOLANA_MAINNET,
|
|
339
|
-
transaction: transaction, // Native
|
|
357
|
+
transaction: transaction, // Native VersionedTransaction object!
|
|
340
358
|
});
|
|
341
359
|
console.log("Transaction sent:", result.rawTransaction);
|
|
342
360
|
} catch (err) {
|
|
@@ -430,20 +448,32 @@ The SDK automatically determines the transaction type from the NetworkId:
|
|
|
430
448
|
### Solana with @solana/web3.js
|
|
431
449
|
|
|
432
450
|
```tsx
|
|
433
|
-
import {
|
|
451
|
+
import { VersionedTransaction, TransactionMessage, SystemProgram, PublicKey, Connection } from "@solana/web3.js";
|
|
434
452
|
import { useSignAndSendTransaction, NetworkId } from "@phantom/react-sdk";
|
|
435
453
|
|
|
436
454
|
function SolanaExample() {
|
|
437
455
|
const { signAndSendTransaction } = useSignAndSendTransaction();
|
|
438
456
|
|
|
439
457
|
const sendTransaction = async () => {
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
458
|
+
// Get recent blockhash
|
|
459
|
+
const connection = new Connection("https://api.mainnet-beta.solana.com");
|
|
460
|
+
const { blockhash } = await connection.getLatestBlockhash();
|
|
461
|
+
|
|
462
|
+
// Create transfer instruction
|
|
463
|
+
const transferInstruction = SystemProgram.transfer({
|
|
464
|
+
fromPubkey: new PublicKey(fromAddress),
|
|
465
|
+
toPubkey: new PublicKey(toAddress),
|
|
466
|
+
lamports: 1000000, // 0.001 SOL
|
|
467
|
+
});
|
|
468
|
+
|
|
469
|
+
// Create VersionedTransaction
|
|
470
|
+
const messageV0 = new TransactionMessage({
|
|
471
|
+
payerKey: new PublicKey(fromAddress),
|
|
472
|
+
recentBlockhash: blockhash,
|
|
473
|
+
instructions: [transferInstruction],
|
|
474
|
+
}).compileToV0Message();
|
|
475
|
+
|
|
476
|
+
const transaction = new VersionedTransaction(messageV0);
|
|
447
477
|
|
|
448
478
|
// No serialization or encoding needed!
|
|
449
479
|
const result = await signAndSendTransaction({
|
|
@@ -537,20 +567,32 @@ function EthereumExample() {
|
|
|
537
567
|
|
|
538
568
|
```tsx
|
|
539
569
|
import { useSignAndSendTransaction, NetworkId } from "@phantom/react-sdk";
|
|
540
|
-
import {
|
|
570
|
+
import { VersionedTransaction, TransactionMessage, SystemProgram, PublicKey, Connection } from "@solana/web3.js";
|
|
541
571
|
import { parseEther } from "viem";
|
|
542
572
|
|
|
543
573
|
function MultiChainWallet() {
|
|
544
574
|
const { signAndSendTransaction } = useSignAndSendTransaction();
|
|
545
575
|
|
|
546
576
|
const sendSolana = async () => {
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
577
|
+
// Get recent blockhash
|
|
578
|
+
const connection = new Connection("https://api.mainnet-beta.solana.com");
|
|
579
|
+
const { blockhash } = await connection.getLatestBlockhash();
|
|
580
|
+
|
|
581
|
+
// Create transfer instruction
|
|
582
|
+
const transferInstruction = SystemProgram.transfer({
|
|
583
|
+
fromPubkey: new PublicKey(solanaAddress),
|
|
584
|
+
toPubkey: new PublicKey(recipient),
|
|
585
|
+
lamports: 1000000,
|
|
586
|
+
});
|
|
587
|
+
|
|
588
|
+
// Create VersionedTransaction
|
|
589
|
+
const messageV0 = new TransactionMessage({
|
|
590
|
+
payerKey: new PublicKey(solanaAddress),
|
|
591
|
+
recentBlockhash: blockhash,
|
|
592
|
+
instructions: [transferInstruction],
|
|
593
|
+
}).compileToV0Message();
|
|
594
|
+
|
|
595
|
+
const transaction = new VersionedTransaction(messageV0);
|
|
554
596
|
|
|
555
597
|
return await signAndSendTransaction({
|
|
556
598
|
networkId: NetworkId.SOLANA_MAINNET,
|
|
@@ -582,30 +624,41 @@ function MultiChainWallet() {
|
|
|
582
624
|
|
|
583
625
|
Quick reference of all available hooks:
|
|
584
626
|
|
|
585
|
-
| Hook | Purpose
|
|
586
|
-
| --------------------------- |
|
|
587
|
-
| `useConnect` | Connect to wallet
|
|
588
|
-
| `useAccounts` | Get wallet addresses
|
|
589
|
-
| `useIsExtensionInstalled` | Check extension status
|
|
590
|
-
| `useDisconnect` | Disconnect from wallet
|
|
591
|
-
| `useSignMessage` | Sign text messages
|
|
592
|
-
| `useSignAndSendTransaction` | Sign and send transactions
|
|
593
|
-
| `
|
|
594
|
-
| `usePhantom` | Get provider context | `{ isConnected, isReady, currentProviderType }` |
|
|
627
|
+
| Hook | Purpose | Returns |
|
|
628
|
+
| --------------------------- | -------------------------- | ---------------------------------------------- |
|
|
629
|
+
| `useConnect` | Connect to wallet | `{ connect, isConnecting, error }` |
|
|
630
|
+
| `useAccounts` | Get wallet addresses | `WalletAddress[]` or `null` |
|
|
631
|
+
| `useIsExtensionInstalled` | Check extension status | `{ isLoading, isInstalled }` |
|
|
632
|
+
| `useDisconnect` | Disconnect from wallet | `{ disconnect, isDisconnecting }` |
|
|
633
|
+
| `useSignMessage` | Sign text messages | `{ signMessage, isSigning, error }` |
|
|
634
|
+
| `useSignAndSendTransaction` | Sign and send transactions | `{ signAndSendTransaction, isSigning, error }` |
|
|
635
|
+
| `usePhantom` | Get provider context | `{ isConnected, isReady }` |
|
|
595
636
|
|
|
596
637
|
## Configuration Reference
|
|
597
638
|
|
|
598
639
|
```typescript
|
|
599
640
|
interface PhantomSDKConfig {
|
|
600
641
|
providerType: "injected" | "embedded";
|
|
642
|
+
appName?: string; // Optional app name for branding
|
|
643
|
+
appLogo?: string; // Optional app logo URL for branding
|
|
644
|
+
addressTypes?: AddressType[]; // Networks to enable (e.g., [AddressType.solana])
|
|
601
645
|
|
|
602
646
|
// Required for embedded provider only
|
|
603
|
-
addressTypes?: AddressType[]; // Networks to enable
|
|
604
647
|
apiBaseUrl?: string; // Phantom API base URL
|
|
605
648
|
organizationId?: string; // Your organization ID
|
|
606
|
-
|
|
649
|
+
authOptions?: {
|
|
650
|
+
authUrl?: string; // Custom auth URL (optional)
|
|
651
|
+
redirectUrl?: string; // Custom redirect URL (optional)
|
|
652
|
+
};
|
|
607
653
|
embeddedWalletType?: "app-wallet" | "user-wallet"; // Wallet type
|
|
608
654
|
solanaProvider?: "web3js" | "kit"; // Solana library choice (default: 'web3js')
|
|
655
|
+
|
|
656
|
+
// Debug options
|
|
657
|
+
debug?: {
|
|
658
|
+
enabled?: boolean; // Enable debug logging
|
|
659
|
+
level?: "info" | "warn" | "error"; // Debug level
|
|
660
|
+
callback?: (level: string, message: string, data?: any) => void; // Custom debug callback
|
|
661
|
+
};
|
|
609
662
|
}
|
|
610
663
|
```
|
|
611
664
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import { BrowserSDKConfig, AuthOptions, BrowserSDK, WalletAddress, SignMessageParams, SignAndSendTransactionParams, SignedTransaction
|
|
4
|
-
export { AddressType,
|
|
3
|
+
import { BrowserSDKConfig, AuthOptions, BrowserSDK, WalletAddress, SignMessageParams, SignMessageResult, SignAndSendTransactionParams, SignedTransaction } from '@phantom/browser-sdk';
|
|
4
|
+
export { AddressType, DebugLevel, DebugMessage, NetworkId, SignAndSendTransactionParams, SignMessageParams, SignMessageResult, SignedTransaction, WalletAddress, debug } from '@phantom/browser-sdk';
|
|
5
5
|
import * as _phantom_embedded_provider_core from '@phantom/embedded-provider-core';
|
|
6
6
|
|
|
7
7
|
interface PhantomSDKConfig extends BrowserSDKConfig {
|
|
@@ -12,11 +12,10 @@ interface ConnectOptions {
|
|
|
12
12
|
authOptions?: AuthOptions;
|
|
13
13
|
}
|
|
14
14
|
interface PhantomContextValue {
|
|
15
|
-
sdk: BrowserSDK
|
|
15
|
+
sdk: BrowserSDK;
|
|
16
16
|
isConnected: boolean;
|
|
17
17
|
addresses: WalletAddress[];
|
|
18
18
|
walletId: string | null;
|
|
19
|
-
isReady: boolean;
|
|
20
19
|
error: Error | null;
|
|
21
20
|
currentProviderType: "injected" | "embedded" | null;
|
|
22
21
|
isPhantomAvailable: boolean;
|
|
@@ -44,7 +43,7 @@ declare function useDisconnect(): {
|
|
|
44
43
|
};
|
|
45
44
|
|
|
46
45
|
declare function useSignMessage(): {
|
|
47
|
-
signMessage: (params: SignMessageParams) => Promise<
|
|
46
|
+
signMessage: (params: SignMessageParams) => Promise<SignMessageResult>;
|
|
48
47
|
isSigning: boolean;
|
|
49
48
|
error: Error | null;
|
|
50
49
|
};
|
|
@@ -57,12 +56,6 @@ declare function useSignAndSendTransaction(): {
|
|
|
57
56
|
|
|
58
57
|
declare function useAccounts(): _phantom_embedded_provider_core.WalletAddress[] | null;
|
|
59
58
|
|
|
60
|
-
declare function useCreateUserOrganization(): {
|
|
61
|
-
createUserOrganization: (params: CreateUserOrganizationParams) => Promise<CreateUserOrganizationResult>;
|
|
62
|
-
isCreating: boolean;
|
|
63
|
-
error: Error | null;
|
|
64
|
-
};
|
|
65
|
-
|
|
66
59
|
declare function useIsExtensionInstalled(): {
|
|
67
60
|
isLoading: boolean;
|
|
68
61
|
isInstalled: boolean;
|
|
@@ -70,4 +63,4 @@ declare function useIsExtensionInstalled(): {
|
|
|
70
63
|
|
|
71
64
|
type ProviderType = "injected" | "embedded";
|
|
72
65
|
|
|
73
|
-
export { ConnectOptions, PhantomProvider, PhantomProviderProps, PhantomSDKConfig, ProviderType, useAccounts, useConnect,
|
|
66
|
+
export { ConnectOptions, PhantomProvider, PhantomProviderProps, PhantomSDKConfig, ProviderType, useAccounts, useConnect, useDisconnect, useIsExtensionInstalled, usePhantom, useSignAndSendTransaction, useSignMessage };
|
package/dist/index.js
CHANGED
|
@@ -37,7 +37,6 @@ __export(src_exports, {
|
|
|
37
37
|
debug: () => import_browser_sdk2.debug,
|
|
38
38
|
useAccounts: () => useAccounts,
|
|
39
39
|
useConnect: () => useConnect,
|
|
40
|
-
useCreateUserOrganization: () => useCreateUserOrganization,
|
|
41
40
|
useDisconnect: () => useDisconnect,
|
|
42
41
|
useIsExtensionInstalled: () => useIsExtensionInstalled,
|
|
43
42
|
usePhantom: () => usePhantom,
|
|
@@ -52,71 +51,69 @@ var import_browser_sdk = require("@phantom/browser-sdk");
|
|
|
52
51
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
53
52
|
var PhantomContext = (0, import_react.createContext)(void 0);
|
|
54
53
|
function PhantomProvider({ children, config }) {
|
|
55
|
-
const
|
|
54
|
+
const sdk = (0, import_react.useMemo)(
|
|
55
|
+
() => new import_browser_sdk.BrowserSDK({
|
|
56
|
+
...config,
|
|
57
|
+
// Use providerType if provided, default to embedded
|
|
58
|
+
providerType: config.providerType || "embedded"
|
|
59
|
+
}),
|
|
60
|
+
[config]
|
|
61
|
+
);
|
|
56
62
|
const [isConnected, setIsConnected] = (0, import_react.useState)(false);
|
|
57
63
|
const [addresses, setAddresses] = (0, import_react.useState)([]);
|
|
58
64
|
const [walletId, setWalletId] = (0, import_react.useState)(null);
|
|
59
|
-
const [isReady, setIsReady] = (0, import_react.useState)(false);
|
|
60
65
|
const [error, setError] = (0, import_react.useState)(null);
|
|
61
66
|
const [currentProviderType, setCurrentProviderType] = (0, import_react.useState)(null);
|
|
62
67
|
const [isPhantomAvailable, setIsPhantomAvailable] = (0, import_react.useState)(false);
|
|
63
|
-
(0, import_react.
|
|
68
|
+
const updateConnectionState = (0, import_react.useCallback)(async () => {
|
|
64
69
|
try {
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
};
|
|
78
|
-
checkPhantom();
|
|
79
|
-
setIsReady(true);
|
|
70
|
+
const connected = sdk.isConnected();
|
|
71
|
+
setIsConnected(connected);
|
|
72
|
+
const providerInfo = sdk.getCurrentProviderInfo();
|
|
73
|
+
setCurrentProviderType(providerInfo?.type || null);
|
|
74
|
+
if (connected) {
|
|
75
|
+
const addrs = await sdk.getAddresses();
|
|
76
|
+
setAddresses(addrs);
|
|
77
|
+
setWalletId(sdk.getWalletId());
|
|
78
|
+
} else {
|
|
79
|
+
setAddresses([]);
|
|
80
|
+
setWalletId(null);
|
|
81
|
+
}
|
|
80
82
|
} catch (err) {
|
|
83
|
+
console.error("Error updating connection state:", err);
|
|
81
84
|
setError(err);
|
|
82
|
-
setIsReady(true);
|
|
83
|
-
}
|
|
84
|
-
}, [config]);
|
|
85
|
-
const updateConnectionState = (0, import_react.useCallback)(async () => {
|
|
86
|
-
if (sdk) {
|
|
87
85
|
try {
|
|
88
|
-
|
|
89
|
-
setIsConnected(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
setAddresses(addrs);
|
|
95
|
-
setWalletId(sdk.getWalletId());
|
|
96
|
-
} else {
|
|
97
|
-
setAddresses([]);
|
|
98
|
-
setWalletId(null);
|
|
99
|
-
}
|
|
100
|
-
} catch (err) {
|
|
101
|
-
console.error("Error updating connection state:", err);
|
|
86
|
+
await sdk.disconnect();
|
|
87
|
+
setIsConnected(false);
|
|
88
|
+
setAddresses([]);
|
|
89
|
+
setWalletId(null);
|
|
90
|
+
} catch (err2) {
|
|
91
|
+
console.error("Error disconnecting:", err2);
|
|
102
92
|
}
|
|
103
93
|
}
|
|
104
94
|
}, [sdk]);
|
|
105
95
|
(0, import_react.useEffect)(() => {
|
|
96
|
+
const checkPhantomExtension = async () => {
|
|
97
|
+
try {
|
|
98
|
+
const available = await sdk.waitForPhantomExtension(1e3);
|
|
99
|
+
setIsPhantomAvailable(available);
|
|
100
|
+
} catch (err) {
|
|
101
|
+
console.error("Error checking Phantom extension:", err);
|
|
102
|
+
setIsPhantomAvailable(false);
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
checkPhantomExtension();
|
|
106
106
|
updateConnectionState();
|
|
107
|
-
}, [updateConnectionState]);
|
|
108
|
-
(0, import_react.useEffect)(() => {
|
|
109
|
-
if (sdk) {
|
|
110
|
-
sdk._updateConnectionState = updateConnectionState;
|
|
111
|
-
}
|
|
112
107
|
}, [sdk, updateConnectionState]);
|
|
108
|
+
(0, import_react.useEffect)(() => {
|
|
109
|
+
updateConnectionState();
|
|
110
|
+
}, [updateConnectionState]);
|
|
113
111
|
const value = {
|
|
114
112
|
sdk,
|
|
115
113
|
isConnected,
|
|
116
114
|
addresses,
|
|
117
115
|
updateConnectionState,
|
|
118
116
|
walletId,
|
|
119
|
-
isReady,
|
|
120
117
|
error,
|
|
121
118
|
currentProviderType,
|
|
122
119
|
isPhantomAvailable
|
|
@@ -139,16 +136,14 @@ function useConnect() {
|
|
|
139
136
|
const [error, setError] = (0, import_react2.useState)(null);
|
|
140
137
|
const connect = (0, import_react2.useCallback)(
|
|
141
138
|
async (options) => {
|
|
142
|
-
if (!context.sdk
|
|
139
|
+
if (!context.sdk) {
|
|
143
140
|
throw new Error("SDK not initialized");
|
|
144
141
|
}
|
|
145
142
|
setIsConnecting(true);
|
|
146
143
|
setError(null);
|
|
147
144
|
try {
|
|
148
145
|
const result = await context.sdk.connect(options);
|
|
149
|
-
|
|
150
|
-
await context.sdk._updateConnectionState();
|
|
151
|
-
}
|
|
146
|
+
await context.updateConnectionState();
|
|
152
147
|
return result;
|
|
153
148
|
} catch (err) {
|
|
154
149
|
console.error("Error connecting to Phantom:", err);
|
|
@@ -158,7 +153,7 @@ function useConnect() {
|
|
|
158
153
|
setIsConnecting(false);
|
|
159
154
|
}
|
|
160
155
|
},
|
|
161
|
-
[context
|
|
156
|
+
[context]
|
|
162
157
|
);
|
|
163
158
|
return {
|
|
164
159
|
connect,
|
|
@@ -172,11 +167,11 @@ function useConnect() {
|
|
|
172
167
|
// src/hooks/useDisconnect.ts
|
|
173
168
|
var import_react3 = require("react");
|
|
174
169
|
function useDisconnect() {
|
|
175
|
-
const { sdk,
|
|
170
|
+
const { sdk, updateConnectionState } = usePhantom();
|
|
176
171
|
const [isDisconnecting, setIsDisconnecting] = (0, import_react3.useState)(false);
|
|
177
172
|
const [error, setError] = (0, import_react3.useState)(null);
|
|
178
173
|
const disconnect = (0, import_react3.useCallback)(async () => {
|
|
179
|
-
if (!sdk
|
|
174
|
+
if (!sdk) {
|
|
180
175
|
throw new Error("SDK not initialized");
|
|
181
176
|
}
|
|
182
177
|
setIsDisconnecting(true);
|
|
@@ -190,7 +185,7 @@ function useDisconnect() {
|
|
|
190
185
|
} finally {
|
|
191
186
|
setIsDisconnecting(false);
|
|
192
187
|
}
|
|
193
|
-
}, [sdk,
|
|
188
|
+
}, [sdk, updateConnectionState]);
|
|
194
189
|
return {
|
|
195
190
|
disconnect,
|
|
196
191
|
isDisconnecting,
|
|
@@ -274,38 +269,6 @@ function useAccounts() {
|
|
|
274
269
|
return isConnected ? addresses : null;
|
|
275
270
|
}
|
|
276
271
|
|
|
277
|
-
// src/hooks/useCreateUserOrganization.ts
|
|
278
|
-
var import_react6 = require("react");
|
|
279
|
-
function useCreateUserOrganization() {
|
|
280
|
-
const { sdk } = usePhantom();
|
|
281
|
-
const [isCreating, setIsCreating] = (0, import_react6.useState)(false);
|
|
282
|
-
const [error, setError] = (0, import_react6.useState)(null);
|
|
283
|
-
const createUserOrganization = (0, import_react6.useCallback)(
|
|
284
|
-
async (params) => {
|
|
285
|
-
if (!sdk) {
|
|
286
|
-
throw new Error("SDK not initialized");
|
|
287
|
-
}
|
|
288
|
-
setIsCreating(true);
|
|
289
|
-
setError(null);
|
|
290
|
-
try {
|
|
291
|
-
const result = await sdk.createUserOrganization(params);
|
|
292
|
-
return result;
|
|
293
|
-
} catch (err) {
|
|
294
|
-
setError(err);
|
|
295
|
-
throw err;
|
|
296
|
-
} finally {
|
|
297
|
-
setIsCreating(false);
|
|
298
|
-
}
|
|
299
|
-
},
|
|
300
|
-
[sdk]
|
|
301
|
-
);
|
|
302
|
-
return {
|
|
303
|
-
createUserOrganization,
|
|
304
|
-
isCreating,
|
|
305
|
-
error
|
|
306
|
-
};
|
|
307
|
-
}
|
|
308
|
-
|
|
309
272
|
// src/hooks/useIsExtensionInstalled.ts
|
|
310
273
|
var React = __toESM(require("react"));
|
|
311
274
|
var cachedIsInstalled = null;
|
package/dist/index.mjs
CHANGED
|
@@ -1,74 +1,72 @@
|
|
|
1
1
|
// src/PhantomProvider.tsx
|
|
2
|
-
import { createContext, useContext, useState, useEffect, useCallback } from "react";
|
|
2
|
+
import { createContext, useContext, useState, useEffect, useCallback, useMemo } from "react";
|
|
3
3
|
import { BrowserSDK } from "@phantom/browser-sdk";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
var PhantomContext = createContext(void 0);
|
|
6
6
|
function PhantomProvider({ children, config }) {
|
|
7
|
-
const
|
|
7
|
+
const sdk = useMemo(
|
|
8
|
+
() => new BrowserSDK({
|
|
9
|
+
...config,
|
|
10
|
+
// Use providerType if provided, default to embedded
|
|
11
|
+
providerType: config.providerType || "embedded"
|
|
12
|
+
}),
|
|
13
|
+
[config]
|
|
14
|
+
);
|
|
8
15
|
const [isConnected, setIsConnected] = useState(false);
|
|
9
16
|
const [addresses, setAddresses] = useState([]);
|
|
10
17
|
const [walletId, setWalletId] = useState(null);
|
|
11
|
-
const [isReady, setIsReady] = useState(false);
|
|
12
18
|
const [error, setError] = useState(null);
|
|
13
19
|
const [currentProviderType, setCurrentProviderType] = useState(null);
|
|
14
20
|
const [isPhantomAvailable, setIsPhantomAvailable] = useState(false);
|
|
15
|
-
|
|
21
|
+
const updateConnectionState = useCallback(async () => {
|
|
16
22
|
try {
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
};
|
|
30
|
-
checkPhantom();
|
|
31
|
-
setIsReady(true);
|
|
23
|
+
const connected = sdk.isConnected();
|
|
24
|
+
setIsConnected(connected);
|
|
25
|
+
const providerInfo = sdk.getCurrentProviderInfo();
|
|
26
|
+
setCurrentProviderType(providerInfo?.type || null);
|
|
27
|
+
if (connected) {
|
|
28
|
+
const addrs = await sdk.getAddresses();
|
|
29
|
+
setAddresses(addrs);
|
|
30
|
+
setWalletId(sdk.getWalletId());
|
|
31
|
+
} else {
|
|
32
|
+
setAddresses([]);
|
|
33
|
+
setWalletId(null);
|
|
34
|
+
}
|
|
32
35
|
} catch (err) {
|
|
36
|
+
console.error("Error updating connection state:", err);
|
|
33
37
|
setError(err);
|
|
34
|
-
setIsReady(true);
|
|
35
|
-
}
|
|
36
|
-
}, [config]);
|
|
37
|
-
const updateConnectionState = useCallback(async () => {
|
|
38
|
-
if (sdk) {
|
|
39
38
|
try {
|
|
40
|
-
|
|
41
|
-
setIsConnected(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
setAddresses(addrs);
|
|
47
|
-
setWalletId(sdk.getWalletId());
|
|
48
|
-
} else {
|
|
49
|
-
setAddresses([]);
|
|
50
|
-
setWalletId(null);
|
|
51
|
-
}
|
|
52
|
-
} catch (err) {
|
|
53
|
-
console.error("Error updating connection state:", err);
|
|
39
|
+
await sdk.disconnect();
|
|
40
|
+
setIsConnected(false);
|
|
41
|
+
setAddresses([]);
|
|
42
|
+
setWalletId(null);
|
|
43
|
+
} catch (err2) {
|
|
44
|
+
console.error("Error disconnecting:", err2);
|
|
54
45
|
}
|
|
55
46
|
}
|
|
56
47
|
}, [sdk]);
|
|
57
48
|
useEffect(() => {
|
|
49
|
+
const checkPhantomExtension = async () => {
|
|
50
|
+
try {
|
|
51
|
+
const available = await sdk.waitForPhantomExtension(1e3);
|
|
52
|
+
setIsPhantomAvailable(available);
|
|
53
|
+
} catch (err) {
|
|
54
|
+
console.error("Error checking Phantom extension:", err);
|
|
55
|
+
setIsPhantomAvailable(false);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
checkPhantomExtension();
|
|
58
59
|
updateConnectionState();
|
|
59
|
-
}, [updateConnectionState]);
|
|
60
|
-
useEffect(() => {
|
|
61
|
-
if (sdk) {
|
|
62
|
-
sdk._updateConnectionState = updateConnectionState;
|
|
63
|
-
}
|
|
64
60
|
}, [sdk, updateConnectionState]);
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
updateConnectionState();
|
|
63
|
+
}, [updateConnectionState]);
|
|
65
64
|
const value = {
|
|
66
65
|
sdk,
|
|
67
66
|
isConnected,
|
|
68
67
|
addresses,
|
|
69
68
|
updateConnectionState,
|
|
70
69
|
walletId,
|
|
71
|
-
isReady,
|
|
72
70
|
error,
|
|
73
71
|
currentProviderType,
|
|
74
72
|
isPhantomAvailable
|
|
@@ -91,16 +89,14 @@ function useConnect() {
|
|
|
91
89
|
const [error, setError] = useState2(null);
|
|
92
90
|
const connect = useCallback2(
|
|
93
91
|
async (options) => {
|
|
94
|
-
if (!context.sdk
|
|
92
|
+
if (!context.sdk) {
|
|
95
93
|
throw new Error("SDK not initialized");
|
|
96
94
|
}
|
|
97
95
|
setIsConnecting(true);
|
|
98
96
|
setError(null);
|
|
99
97
|
try {
|
|
100
98
|
const result = await context.sdk.connect(options);
|
|
101
|
-
|
|
102
|
-
await context.sdk._updateConnectionState();
|
|
103
|
-
}
|
|
99
|
+
await context.updateConnectionState();
|
|
104
100
|
return result;
|
|
105
101
|
} catch (err) {
|
|
106
102
|
console.error("Error connecting to Phantom:", err);
|
|
@@ -110,7 +106,7 @@ function useConnect() {
|
|
|
110
106
|
setIsConnecting(false);
|
|
111
107
|
}
|
|
112
108
|
},
|
|
113
|
-
[context
|
|
109
|
+
[context]
|
|
114
110
|
);
|
|
115
111
|
return {
|
|
116
112
|
connect,
|
|
@@ -124,11 +120,11 @@ function useConnect() {
|
|
|
124
120
|
// src/hooks/useDisconnect.ts
|
|
125
121
|
import { useCallback as useCallback3, useState as useState3 } from "react";
|
|
126
122
|
function useDisconnect() {
|
|
127
|
-
const { sdk,
|
|
123
|
+
const { sdk, updateConnectionState } = usePhantom();
|
|
128
124
|
const [isDisconnecting, setIsDisconnecting] = useState3(false);
|
|
129
125
|
const [error, setError] = useState3(null);
|
|
130
126
|
const disconnect = useCallback3(async () => {
|
|
131
|
-
if (!sdk
|
|
127
|
+
if (!sdk) {
|
|
132
128
|
throw new Error("SDK not initialized");
|
|
133
129
|
}
|
|
134
130
|
setIsDisconnecting(true);
|
|
@@ -142,7 +138,7 @@ function useDisconnect() {
|
|
|
142
138
|
} finally {
|
|
143
139
|
setIsDisconnecting(false);
|
|
144
140
|
}
|
|
145
|
-
}, [sdk,
|
|
141
|
+
}, [sdk, updateConnectionState]);
|
|
146
142
|
return {
|
|
147
143
|
disconnect,
|
|
148
144
|
isDisconnecting,
|
|
@@ -226,38 +222,6 @@ function useAccounts() {
|
|
|
226
222
|
return isConnected ? addresses : null;
|
|
227
223
|
}
|
|
228
224
|
|
|
229
|
-
// src/hooks/useCreateUserOrganization.ts
|
|
230
|
-
import { useCallback as useCallback6, useState as useState6 } from "react";
|
|
231
|
-
function useCreateUserOrganization() {
|
|
232
|
-
const { sdk } = usePhantom();
|
|
233
|
-
const [isCreating, setIsCreating] = useState6(false);
|
|
234
|
-
const [error, setError] = useState6(null);
|
|
235
|
-
const createUserOrganization = useCallback6(
|
|
236
|
-
async (params) => {
|
|
237
|
-
if (!sdk) {
|
|
238
|
-
throw new Error("SDK not initialized");
|
|
239
|
-
}
|
|
240
|
-
setIsCreating(true);
|
|
241
|
-
setError(null);
|
|
242
|
-
try {
|
|
243
|
-
const result = await sdk.createUserOrganization(params);
|
|
244
|
-
return result;
|
|
245
|
-
} catch (err) {
|
|
246
|
-
setError(err);
|
|
247
|
-
throw err;
|
|
248
|
-
} finally {
|
|
249
|
-
setIsCreating(false);
|
|
250
|
-
}
|
|
251
|
-
},
|
|
252
|
-
[sdk]
|
|
253
|
-
);
|
|
254
|
-
return {
|
|
255
|
-
createUserOrganization,
|
|
256
|
-
isCreating,
|
|
257
|
-
error
|
|
258
|
-
};
|
|
259
|
-
}
|
|
260
|
-
|
|
261
225
|
// src/hooks/useIsExtensionInstalled.ts
|
|
262
226
|
import * as React from "react";
|
|
263
227
|
var cachedIsInstalled = null;
|
|
@@ -303,7 +267,6 @@ export {
|
|
|
303
267
|
debug,
|
|
304
268
|
useAccounts,
|
|
305
269
|
useConnect,
|
|
306
|
-
useCreateUserOrganization,
|
|
307
270
|
useDisconnect,
|
|
308
271
|
useIsExtensionInstalled,
|
|
309
272
|
usePhantom,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phantom/react-sdk",
|
|
3
|
-
"version": "0.2
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.mjs",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -21,31 +21,32 @@
|
|
|
21
21
|
"pack-release": "rimraf ./_release && yarn pack && mkdir ./_release && tar zxvf ./package.tgz --directory ./_release && rm ./package.tgz",
|
|
22
22
|
"dev": "rimraf ./dist && tsup src/index.ts --format cjs,esm --dts --watch",
|
|
23
23
|
"lint": "tsc --noEmit && eslint --cache . --ext .ts,.tsx",
|
|
24
|
+
"check-types": "tsc --noEmit",
|
|
24
25
|
"test": "jest",
|
|
25
26
|
"prettier": "prettier --write \"src/**/*.{ts,tsx}\""
|
|
26
27
|
},
|
|
27
28
|
"dependencies": {
|
|
28
|
-
"@phantom/browser-sdk": "^0.2
|
|
29
|
+
"@phantom/browser-sdk": "^0.3.2"
|
|
29
30
|
},
|
|
30
31
|
"devDependencies": {
|
|
31
32
|
"@testing-library/dom": "^10.4.0",
|
|
32
33
|
"@testing-library/react": "^16.3.0",
|
|
33
34
|
"@types/jest": "^29.5.14",
|
|
34
|
-
"@types/react": "^19.1.
|
|
35
|
-
"@types/react-dom": "^19.1.
|
|
35
|
+
"@types/react": "^19.1.2",
|
|
36
|
+
"@types/react-dom": "^19.1.2",
|
|
36
37
|
"eslint": "8.53.0",
|
|
37
38
|
"jest": "^29.7.0",
|
|
38
39
|
"jest-environment-jsdom": "^29.7.0",
|
|
39
40
|
"prettier": "^3.5.2",
|
|
40
|
-
"react": "
|
|
41
|
-
"react-dom": "
|
|
41
|
+
"react": "19.1.1",
|
|
42
|
+
"react-dom": "19.1.1",
|
|
42
43
|
"rimraf": "^6.0.1",
|
|
43
44
|
"ts-jest": "^29",
|
|
44
45
|
"tsup": "^6.7.0",
|
|
45
46
|
"typescript": "^5.0.4"
|
|
46
47
|
},
|
|
47
48
|
"peerDependencies": {
|
|
48
|
-
"react": ">=
|
|
49
|
+
"react": ">=19.0.0"
|
|
49
50
|
},
|
|
50
51
|
"publishConfig": {
|
|
51
52
|
"directory": "_release/package"
|