@megaeth-labs/wallet-sdk-react 0.1.5 → 0.1.8
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 +616 -7
- package/dist/index.cjs +8 -0
- package/dist/index.d.cts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +7 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,15 +1,624 @@
|
|
|
1
|
-
#
|
|
1
|
+
# MOSS Wallet SDK (React)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
React hooks and components for the MegaETH Wallet SDK, built on top of [@megaeth-labs/wallet-sdk](https://www.npmjs.com/package/@megaeth-labs/wallet-sdk) and [TanStack Query](https://tanstack.com/query).
|
|
4
|
+
|
|
5
|
+
## Contents
|
|
6
|
+
|
|
7
|
+
- [Install](#install)
|
|
8
|
+
- [Setup](#setup)
|
|
9
|
+
- [Connection Management](#connection-management)
|
|
10
|
+
- [Connect Wallet](#connect-wallet)
|
|
11
|
+
- [Check Status](#check-status)
|
|
12
|
+
- [Disconnect](#disconnect)
|
|
13
|
+
- [Authentication](#authentication)
|
|
14
|
+
- [Authenticate with SIWE](#authenticate-with-siwe)
|
|
15
|
+
- [Transfers](#transfers)
|
|
16
|
+
- [Native Token Transfer (ETH)](#native-token-transfer-eth)
|
|
17
|
+
- [ERC20 Token Transfer](#erc20-token-transfer)
|
|
18
|
+
- [ERC721 NFT Transfer](#erc721-nft-transfer)
|
|
19
|
+
- [ERC1155 Token Transfer](#erc1155-token-transfer)
|
|
20
|
+
- [Smart Contract Interactions](#smart-contract-interactions)
|
|
21
|
+
- [Call Contract Method](#call-contract-method)
|
|
22
|
+
- [Silent Contract Call (Session Keys)](#silent-contract-call-session-keys)
|
|
23
|
+
- [Batch Contract Calls](#batch-contract-calls)
|
|
24
|
+
- [Call Contract with Raw Data](#call-contract-with-raw-data)
|
|
25
|
+
- [Read from Contract (No Gas)](#read-from-contract-no-gas)
|
|
26
|
+
- [Session Keys & Permissions](#session-keys--permissions)
|
|
27
|
+
- [Grant Permissions](#grant-permissions)
|
|
28
|
+
- [Get Current Permissions](#get-current-permissions)
|
|
29
|
+
- [Revoke Permissions](#revoke-permissions)
|
|
30
|
+
- [Message Signing](#message-signing)
|
|
31
|
+
- [Sign Message](#sign-message)
|
|
32
|
+
- [Sign Structured Data (EIP-712)](#sign-structured-data-eip-712)
|
|
33
|
+
- [Wallet Information](#wallet-information)
|
|
34
|
+
- [Get Token Balances](#get-token-balances)
|
|
35
|
+
- [Open Wallet UI](#open-wallet-ui)
|
|
36
|
+
- [Deposit Funds](#deposit-funds)
|
|
37
|
+
- [Direct SDK Access](#direct-sdk-access)
|
|
38
|
+
|
|
39
|
+
## Install
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
npm install @megaeth-labs/wallet-sdk-react @tanstack/react-query
|
|
43
|
+
```
|
|
4
44
|
|
|
5
45
|
## Setup
|
|
46
|
+
Wrap your application with `MegaProvider` to initialize the wallet SDK. The provider handles initialization automatically and provides React hooks for all wallet operations.
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { MegaProvider } from '@megaeth-labs/wallet-sdk-react';
|
|
50
|
+
|
|
51
|
+
function App() {
|
|
52
|
+
return (
|
|
53
|
+
<MegaProvider
|
|
54
|
+
config={{
|
|
55
|
+
network: 'mainnet', // or 'testnet'
|
|
56
|
+
logging: 'error', // Optional: 'debug' | 'info' | 'warn' | 'error'
|
|
57
|
+
debug: false, // Optional: Enable internal verbose debug logging
|
|
58
|
+
sponsorUrl: 'https://your-sponsor-url.com', // Optional: Custom sponsor URL
|
|
59
|
+
sponsorMode: 'app-only', // Optional: 'everything' | 'app-only' | 'explicit'
|
|
60
|
+
sponsorToken: 'native', // Optional: 'native' | 'usdm'
|
|
61
|
+
}}
|
|
62
|
+
>
|
|
63
|
+
<YourApp />
|
|
64
|
+
</MegaProvider>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Connection Management
|
|
70
|
+
|
|
71
|
+
### Connect Wallet
|
|
72
|
+
Use the `useConnect` hook to show the connection UI and handle user connection.
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
import { useConnect } from '@megaeth-labs/wallet-sdk-react';
|
|
76
|
+
|
|
77
|
+
function ConnectButton() {
|
|
78
|
+
const { mutate: connect, isPending } = useConnect({
|
|
79
|
+
onSuccess: (result) => {
|
|
80
|
+
if (result.status === 'connected') {
|
|
81
|
+
console.log('Wallet connected:', result.address);
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
<button onClick={() => connect()} disabled={isPending}>
|
|
88
|
+
{isPending ? 'Connecting...' : 'Connect Wallet'}
|
|
89
|
+
</button>
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Check Status
|
|
95
|
+
Use the `useStatus` hook to get the current connection status.
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
import { useStatus } from '@megaeth-labs/wallet-sdk-react';
|
|
99
|
+
|
|
100
|
+
function WalletStatus() {
|
|
101
|
+
const { status, address, initialised } = useStatus();
|
|
102
|
+
|
|
103
|
+
if (!initialised) return <div>Initializing...</div>;
|
|
104
|
+
|
|
105
|
+
return (
|
|
106
|
+
<div>
|
|
107
|
+
Status: {status}
|
|
108
|
+
{address && <div>Address: {address}</div>}
|
|
109
|
+
</div>
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Disconnect
|
|
115
|
+
Use the `useDisconnect` hook to disconnect the current wallet session.
|
|
116
|
+
|
|
117
|
+
```tsx
|
|
118
|
+
import { useDisconnect } from '@megaeth-labs/wallet-sdk-react';
|
|
119
|
+
|
|
120
|
+
function DisconnectButton() {
|
|
121
|
+
const { mutate: disconnect } = useDisconnect({
|
|
122
|
+
onSuccess: () => console.log('Disconnected'),
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
return <button onClick={() => disconnect()}>Disconnect</button>;
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Authentication
|
|
130
|
+
|
|
131
|
+
### Authenticate with SIWE
|
|
132
|
+
Use the `useAuthenticate` hook to show the built-in Sign-In with Ethereum (SIWE) UI. Returns a JWT that can be verified at `https://wallet-api.megaeth.com/v1/partner-auth/verify?origin=YOUR_ORIGIN&jwt=JWT_TOKEN`
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
import { useAuthenticate } from '@megaeth-labs/wallet-sdk-react';
|
|
136
|
+
|
|
137
|
+
function AuthenticateButton() {
|
|
138
|
+
const { mutate: authenticate, isPending } = useAuthenticate({
|
|
139
|
+
onSuccess: async (auth) => {
|
|
140
|
+
if (auth.status === 'success' && auth.jwt) {
|
|
141
|
+
const response = await fetch(
|
|
142
|
+
`https://wallet-api.megaeth.com/v1/partner-auth/verify?origin=${window.location.host}&jwt=${auth.jwt}`
|
|
143
|
+
);
|
|
144
|
+
const { walletAddress } = await response.json();
|
|
145
|
+
console.log('Authenticated:', walletAddress);
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
return (
|
|
151
|
+
<button onClick={() => authenticate()} disabled={isPending}>
|
|
152
|
+
Authenticate
|
|
153
|
+
</button>
|
|
154
|
+
);
|
|
155
|
+
}
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## Transfers
|
|
159
|
+
|
|
160
|
+
### Native Token Transfer (ETH)
|
|
161
|
+
Use the `useTransfer` hook to transfer native tokens from the connected wallet.
|
|
162
|
+
|
|
163
|
+
```tsx
|
|
164
|
+
import { useTransfer } from '@megaeth-labs/wallet-sdk-react';
|
|
165
|
+
import { parseEther } from 'viem';
|
|
166
|
+
|
|
167
|
+
function TransferButton() {
|
|
168
|
+
const { mutate: transfer, isPending } = useTransfer({
|
|
169
|
+
onSuccess: (result) => {
|
|
170
|
+
if (result.status === 'approved') {
|
|
171
|
+
console.log('Transaction hash:', result.receipt.hash);
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
});
|
|
175
|
+
|
|
176
|
+
const handleTransfer = () => {
|
|
177
|
+
transfer({
|
|
178
|
+
type: 'native',
|
|
179
|
+
to: '0xRecipientAddress',
|
|
180
|
+
amount: parseEther('0.1').toString(),
|
|
181
|
+
sponsor: false, // Optional: Use sponsored transactions when sponsor mode is explicit
|
|
182
|
+
});
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
return <button onClick={handleTransfer} disabled={isPending}>Send ETH</button>;
|
|
186
|
+
}
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
### ERC20 Token Transfer
|
|
190
|
+
Transfer ERC20 tokens using the `useTransfer` hook.
|
|
191
|
+
|
|
192
|
+
```tsx
|
|
193
|
+
import { useTransfer } from '@megaeth-labs/wallet-sdk-react';
|
|
194
|
+
import { parseUnits } from 'viem';
|
|
195
|
+
|
|
196
|
+
function TransferERC20Button() {
|
|
197
|
+
const { mutate: transfer } = useTransfer();
|
|
198
|
+
|
|
199
|
+
const handleTransfer = () => {
|
|
200
|
+
transfer({
|
|
201
|
+
type: 'erc20',
|
|
202
|
+
to: '0xRecipientAddress',
|
|
203
|
+
amount: parseUnits('100', 18).toString(), // 100 tokens with 18 decimals
|
|
204
|
+
contractAddress: '0xTokenContractAddress',
|
|
205
|
+
});
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
return <button onClick={handleTransfer}>Send Tokens</button>;
|
|
209
|
+
}
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
### ERC721 NFT Transfer
|
|
213
|
+
Transfer an ERC721 NFT.
|
|
214
|
+
|
|
215
|
+
```tsx
|
|
216
|
+
const { mutate: transfer } = useTransfer();
|
|
217
|
+
|
|
218
|
+
transfer({
|
|
219
|
+
type: 'erc721',
|
|
220
|
+
to: '0xRecipientAddress',
|
|
221
|
+
contractAddress: '0xNFTContractAddress',
|
|
222
|
+
tokenId: 1234,
|
|
223
|
+
amount: '0',
|
|
224
|
+
});
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### ERC1155 Token Transfer
|
|
228
|
+
Transfer ERC1155 tokens.
|
|
229
|
+
|
|
230
|
+
```tsx
|
|
231
|
+
const { mutate: transfer } = useTransfer();
|
|
232
|
+
|
|
233
|
+
transfer({
|
|
234
|
+
type: 'erc1155',
|
|
235
|
+
to: '0xRecipientAddress',
|
|
236
|
+
contractAddress: '0xTokenContractAddress',
|
|
237
|
+
tokenId: 1,
|
|
238
|
+
amount: '5', // Number of tokens to transfer
|
|
239
|
+
});
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
## Smart Contract Interactions
|
|
243
|
+
|
|
244
|
+
### Call Contract Method
|
|
245
|
+
Use the `useCallContract` hook to execute a contract method with user approval.
|
|
246
|
+
|
|
247
|
+
```tsx
|
|
248
|
+
import { useCallContract } from '@megaeth-labs/wallet-sdk-react';
|
|
249
|
+
import { parseEther } from 'viem';
|
|
250
|
+
|
|
251
|
+
function MintButton() {
|
|
252
|
+
const { mutate: callContract, isPending } = useCallContract({
|
|
253
|
+
onSuccess: (result) => {
|
|
254
|
+
if (result.status === 'approved') {
|
|
255
|
+
console.log('Transaction hash:', result.receipt.hash);
|
|
256
|
+
}
|
|
257
|
+
},
|
|
258
|
+
});
|
|
259
|
+
|
|
260
|
+
const handleMint = () => {
|
|
261
|
+
callContract({
|
|
262
|
+
address: '0xContractAddress',
|
|
263
|
+
abi: contractABI,
|
|
264
|
+
functionName: 'mint',
|
|
265
|
+
args: [parseEther('1')],
|
|
266
|
+
value: parseEther('0.1'), // Optional: ETH value to send
|
|
267
|
+
sponsor: false, // Optional: Use sponsored transactions when sponsor mode is explicit
|
|
268
|
+
});
|
|
269
|
+
};
|
|
270
|
+
|
|
271
|
+
return <button onClick={handleMint} disabled={isPending}>Mint</button>;
|
|
272
|
+
}
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
### Silent Contract Call (Session Keys)
|
|
276
|
+
Execute a contract method silently using session key permissions (no user approval required).
|
|
277
|
+
|
|
278
|
+
```tsx
|
|
279
|
+
const { mutate: callContract } = useCallContract();
|
|
280
|
+
|
|
281
|
+
callContract({
|
|
282
|
+
address: '0xContractAddress',
|
|
283
|
+
abi: contractABI,
|
|
284
|
+
functionName: 'claim',
|
|
285
|
+
args: [],
|
|
286
|
+
silent: true, // Uses session key with pre-approved permissions
|
|
287
|
+
});
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
### Batch Contract Calls
|
|
291
|
+
Execute multiple contract calls in a single transaction.
|
|
292
|
+
|
|
293
|
+
```tsx
|
|
294
|
+
const { mutate: callContract } = useCallContract();
|
|
295
|
+
|
|
296
|
+
callContract([
|
|
297
|
+
{
|
|
298
|
+
address: '0xContract1',
|
|
299
|
+
abi: abi1,
|
|
300
|
+
functionName: 'approve',
|
|
301
|
+
args: ['0xSpender', parseEther('100')],
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
address: '0xContract2',
|
|
305
|
+
abi: abi2,
|
|
306
|
+
functionName: 'swap',
|
|
307
|
+
args: [parseEther('100')],
|
|
308
|
+
},
|
|
309
|
+
]);
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
### Call Contract with Raw Data
|
|
313
|
+
Execute a contract call using raw calldata instead of ABI.
|
|
314
|
+
|
|
315
|
+
```tsx
|
|
316
|
+
const { mutate: callContract } = useCallContract();
|
|
317
|
+
|
|
318
|
+
callContract({
|
|
319
|
+
address: '0xContractAddress',
|
|
320
|
+
data: '0x...' as `0x${string}`,
|
|
321
|
+
value: parseEther('0.1'),
|
|
322
|
+
});
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
### Read from Contract (No Gas)
|
|
326
|
+
Use the `useGetFromContract` hook to read data from a contract without creating a transaction.
|
|
327
|
+
|
|
328
|
+
```tsx
|
|
329
|
+
import { useGetFromContract } from '@megaeth-labs/wallet-sdk-react';
|
|
330
|
+
|
|
331
|
+
function BalanceDisplay() {
|
|
332
|
+
const { mutate: getFromContract, data: balance } = useGetFromContract();
|
|
333
|
+
|
|
334
|
+
useEffect(() => {
|
|
335
|
+
getFromContract({
|
|
336
|
+
address: '0xTokenContract',
|
|
337
|
+
abi: erc20ABI,
|
|
338
|
+
functionName: 'balanceOf',
|
|
339
|
+
args: ['0xUserAddress'],
|
|
340
|
+
});
|
|
341
|
+
}, []);
|
|
342
|
+
|
|
343
|
+
return <div>Balance: {balance?.toString()}</div>;
|
|
344
|
+
}
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
## Session Keys & Permissions
|
|
348
|
+
|
|
349
|
+
### Grant Permissions
|
|
350
|
+
Use the `useGrantPermissions` hook to grant session key permissions for silent transactions. Users approve once, then your app can execute permitted transactions without additional prompts.
|
|
351
|
+
|
|
352
|
+
```tsx
|
|
353
|
+
import { useGrantPermissions } from '@megaeth-labs/wallet-sdk-react';
|
|
354
|
+
import { parseEther } from 'viem';
|
|
355
|
+
|
|
356
|
+
function GrantPermissionsButton() {
|
|
357
|
+
const { mutate: grantPermissions, isPending } = useGrantPermissions({
|
|
358
|
+
onSuccess: (result) => {
|
|
359
|
+
if (result.status === 'approved') {
|
|
360
|
+
console.log('Permissions granted');
|
|
361
|
+
}
|
|
362
|
+
},
|
|
363
|
+
});
|
|
364
|
+
|
|
365
|
+
const handleGrant = () => {
|
|
366
|
+
grantPermissions({
|
|
367
|
+
permissions: {
|
|
368
|
+
expiry: 86400, // Expiry in seconds (24 hours)
|
|
369
|
+
feeToken: {
|
|
370
|
+
limit: parseEther('0.01').toString(), // Max fee allowed per transaction
|
|
371
|
+
symbol: 'ETH', // Optional: Fee token symbol
|
|
372
|
+
},
|
|
373
|
+
permissions: {
|
|
374
|
+
// Specific contract calls allowed
|
|
375
|
+
calls: [
|
|
376
|
+
{
|
|
377
|
+
to: '0xContractAddress',
|
|
378
|
+
signature: 'mint(uint256)', // Function signature
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
to: '0xAnotherContract',
|
|
382
|
+
signature: 'claim()',
|
|
383
|
+
},
|
|
384
|
+
],
|
|
385
|
+
// Spending limits for tokens
|
|
386
|
+
spend: [
|
|
387
|
+
{
|
|
388
|
+
limit: parseEther('100'), // 100 ETH
|
|
389
|
+
period: 'day', // 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'
|
|
390
|
+
token: undefined, // undefined for native ETH
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
limit: parseEther('1000'), // 1000 tokens
|
|
394
|
+
period: 'week',
|
|
395
|
+
token: '0xTokenAddress' as `0x${string}`,
|
|
396
|
+
},
|
|
397
|
+
],
|
|
398
|
+
},
|
|
399
|
+
},
|
|
400
|
+
externalAddress: '0xYourAppAddress', // Optional: External address for permissions
|
|
401
|
+
sponsor: false, // Optional: Sponsor the permission grant transaction
|
|
402
|
+
});
|
|
403
|
+
};
|
|
404
|
+
|
|
405
|
+
return <button onClick={handleGrant} disabled={isPending}>Grant Permissions</button>;
|
|
406
|
+
}
|
|
407
|
+
```
|
|
408
|
+
|
|
409
|
+
### Get Current Permissions
|
|
410
|
+
Use the `usePermissions` hook to check what permissions are currently active for an address.
|
|
411
|
+
|
|
412
|
+
```tsx
|
|
413
|
+
import { usePermissions } from '@megaeth-labs/wallet-sdk-react';
|
|
414
|
+
|
|
415
|
+
function PermissionsDisplay() {
|
|
416
|
+
const { data: perms, isLoading } = usePermissions('0xUserAddress'); // Optional: address parameter
|
|
417
|
+
|
|
418
|
+
if (isLoading) return <div>Loading...</div>;
|
|
419
|
+
|
|
420
|
+
if (perms?.permissions) {
|
|
421
|
+
return (
|
|
422
|
+
<div>
|
|
423
|
+
<div>Expiry: {new Date(perms.permissions.expiry * 1000).toLocaleString()}</div>
|
|
424
|
+
<div>Allowed calls: {perms.permissions.permissions.calls.length}</div>
|
|
425
|
+
<div>Spending limits: {perms.permissions.permissions.spend.length}</div>
|
|
426
|
+
</div>
|
|
427
|
+
);
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
return <div>No permissions found</div>;
|
|
431
|
+
}
|
|
432
|
+
```
|
|
433
|
+
|
|
434
|
+
### Revoke Permissions
|
|
435
|
+
Use the `useRevokePermissions` hook to revoke all active session key permissions.
|
|
436
|
+
|
|
437
|
+
```tsx
|
|
438
|
+
import { useRevokePermissions } from '@megaeth-labs/wallet-sdk-react';
|
|
439
|
+
|
|
440
|
+
function RevokeButton() {
|
|
441
|
+
const { mutate: revokePermissions } = useRevokePermissions({
|
|
442
|
+
onSuccess: () => console.log('All permissions revoked'),
|
|
443
|
+
});
|
|
444
|
+
|
|
445
|
+
return <button onClick={() => revokePermissions()}>Revoke Permissions</button>;
|
|
446
|
+
}
|
|
447
|
+
```
|
|
448
|
+
|
|
449
|
+
## Message Signing
|
|
450
|
+
|
|
451
|
+
### Sign Message
|
|
452
|
+
Use the `useSignMessage` hook to request the user to sign a message.
|
|
453
|
+
|
|
454
|
+
```tsx
|
|
455
|
+
import { useSignMessage } from '@megaeth-labs/wallet-sdk-react';
|
|
456
|
+
|
|
457
|
+
function SignMessageButton() {
|
|
458
|
+
const { mutate: signMessage, data } = useSignMessage({
|
|
459
|
+
onSuccess: (result) => {
|
|
460
|
+
if (result.status === 'success' && result.signature) {
|
|
461
|
+
console.log('Signature:', result.signature);
|
|
462
|
+
}
|
|
463
|
+
},
|
|
464
|
+
});
|
|
465
|
+
|
|
466
|
+
return <button onClick={() => signMessage('Hello, World!')}>Sign Message</button>;
|
|
467
|
+
}
|
|
468
|
+
```
|
|
469
|
+
|
|
470
|
+
### Sign Structured Data (EIP-712)
|
|
471
|
+
Use the `useSignData` hook to sign typed structured data.
|
|
472
|
+
|
|
473
|
+
```tsx
|
|
474
|
+
import { useSignData } from '@megaeth-labs/wallet-sdk-react';
|
|
475
|
+
|
|
476
|
+
function SignDataButton() {
|
|
477
|
+
const { mutate: signData } = useSignData({
|
|
478
|
+
onSuccess: (result) => {
|
|
479
|
+
if (result.status === 'success' && result.signature) {
|
|
480
|
+
console.log('Signature:', result.signature);
|
|
481
|
+
}
|
|
482
|
+
},
|
|
483
|
+
});
|
|
484
|
+
|
|
485
|
+
const handleSign = () => {
|
|
486
|
+
const domain = {
|
|
487
|
+
name: 'MyApp',
|
|
488
|
+
version: '1',
|
|
489
|
+
chainId: 1,
|
|
490
|
+
verifyingContract: '0xContract',
|
|
491
|
+
};
|
|
492
|
+
|
|
493
|
+
const types = {
|
|
494
|
+
Person: [
|
|
495
|
+
{ name: 'name', type: 'string' },
|
|
496
|
+
{ name: 'wallet', type: 'address' },
|
|
497
|
+
],
|
|
498
|
+
};
|
|
499
|
+
|
|
500
|
+
const value = {
|
|
501
|
+
name: 'Alice',
|
|
502
|
+
wallet: '0x...',
|
|
503
|
+
};
|
|
504
|
+
|
|
505
|
+
signData({
|
|
506
|
+
data: { domain, types, value },
|
|
507
|
+
});
|
|
508
|
+
};
|
|
509
|
+
|
|
510
|
+
return <button onClick={handleSign}>Sign Data</button>;
|
|
511
|
+
}
|
|
512
|
+
```
|
|
513
|
+
|
|
514
|
+
### Verifying Messages
|
|
515
|
+
For SIWE messages, the `@megaeth-labs/wallet-server-verify` package can be used to verify the signature.
|
|
516
|
+
|
|
517
|
+
For other messages or for more control, the following code can be used:
|
|
518
|
+
|
|
519
|
+
```typescript
|
|
520
|
+
import { PersonalMessage } from 'ox';
|
|
521
|
+
import { Porto, RelayActions } from 'porto';
|
|
522
|
+
import { RelayClient } from 'porto/viem';
|
|
523
|
+
import { http, toBytes } from 'viem';
|
|
524
|
+
import { megaeth, megaethTestnet } from 'viem/chains';
|
|
525
|
+
|
|
526
|
+
const message = 'Hello';
|
|
527
|
+
const address = '0x...';
|
|
528
|
+
const signature = '0x...';
|
|
529
|
+
const chainId = 4326;
|
|
530
|
+
|
|
531
|
+
const porto = Porto.create({
|
|
532
|
+
relay: http('https://wallet-relay.megaeth.com'),
|
|
533
|
+
chains: [megaeth, megaethTestnet],
|
|
534
|
+
});
|
|
535
|
+
|
|
536
|
+
const client = RelayClient.fromPorto(porto, {
|
|
537
|
+
chainId
|
|
538
|
+
});
|
|
539
|
+
|
|
540
|
+
const result = await RelayActions.verifySignature(client, {
|
|
541
|
+
address,
|
|
542
|
+
digest: PersonalMessage.getSignPayload(toBytes(message)),
|
|
543
|
+
signature
|
|
544
|
+
});
|
|
545
|
+
|
|
546
|
+
if(!result.valid) {
|
|
547
|
+
throw new Error('Invalid Signature');
|
|
548
|
+
}
|
|
549
|
+
```
|
|
550
|
+
|
|
551
|
+
## Wallet Information
|
|
552
|
+
|
|
553
|
+
### Get Token Balances
|
|
554
|
+
Use the `useBalances` hook to retrieve the user's token balances. This hook automatically fetches balances when the wallet is connected.
|
|
555
|
+
|
|
556
|
+
```tsx
|
|
557
|
+
import { useBalances } from '@megaeth-labs/wallet-sdk-react';
|
|
558
|
+
|
|
559
|
+
function BalancesList() {
|
|
560
|
+
// Get all tokens
|
|
561
|
+
const { data: allBalances, isLoading } = useBalances();
|
|
562
|
+
|
|
563
|
+
// Or get specific tokens
|
|
564
|
+
const { data: specificBalances } = useBalances(['0xTokenAddress1', '0xTokenAddress2']);
|
|
565
|
+
|
|
566
|
+
if (isLoading) return <div>Loading balances...</div>;
|
|
567
|
+
|
|
568
|
+
return (
|
|
569
|
+
<div>
|
|
570
|
+
{allBalances?.map(token => (
|
|
571
|
+
<div key={token.symbol}>
|
|
572
|
+
{token.symbol}: {token.displayBalance}
|
|
573
|
+
<span>USD Value: ${token.usdBalance}</span>
|
|
574
|
+
</div>
|
|
575
|
+
))}
|
|
576
|
+
</div>
|
|
577
|
+
);
|
|
578
|
+
}
|
|
579
|
+
```
|
|
580
|
+
|
|
581
|
+
### Open Wallet UI
|
|
582
|
+
Use the `mega` object to open the wallet interface for the user.
|
|
583
|
+
|
|
584
|
+
```tsx
|
|
585
|
+
import { mega } from '@megaeth-labs/wallet-sdk-react';
|
|
586
|
+
|
|
587
|
+
function OpenWalletButton() {
|
|
588
|
+
return <button onClick={() => mega.open()}>Open Wallet</button>;
|
|
589
|
+
}
|
|
590
|
+
```
|
|
591
|
+
|
|
592
|
+
### Deposit Funds
|
|
593
|
+
Use the `useDeposit` hook to show the deposit UI to help users fund their wallet.
|
|
594
|
+
|
|
595
|
+
```tsx
|
|
596
|
+
import { useDeposit } from '@megaeth-labs/wallet-sdk-react';
|
|
597
|
+
|
|
598
|
+
function DepositButton() {
|
|
599
|
+
const { mutate: deposit } = useDeposit();
|
|
600
|
+
|
|
601
|
+
return <button onClick={() => deposit()}>Deposit Funds</button>;
|
|
602
|
+
}
|
|
603
|
+
```
|
|
604
|
+
|
|
605
|
+
## Direct SDK Access
|
|
6
606
|
|
|
7
|
-
|
|
607
|
+
The React SDK exports the underlying `mega` object for direct access to all SDK methods when hooks are not suitable for your use case. This is useful for calling methods outside of React components or in event handlers.
|
|
8
608
|
|
|
9
|
-
|
|
609
|
+
```tsx
|
|
610
|
+
import { mega } from '@megaeth-labs/wallet-sdk-react';
|
|
10
611
|
|
|
11
|
-
|
|
612
|
+
// Direct access to all SDK methods
|
|
613
|
+
await mega.connect();
|
|
614
|
+
await mega.disconnect();
|
|
615
|
+
await mega.transfer({ /* ... */ });
|
|
616
|
+
// ... all other SDK methods
|
|
12
617
|
|
|
13
|
-
|
|
618
|
+
// Event handling
|
|
619
|
+
mega.events.on('statusChange', ({ status, address }) => {
|
|
620
|
+
console.log('Status changed:', status, address);
|
|
621
|
+
});
|
|
622
|
+
```
|
|
14
623
|
|
|
15
|
-
|
|
624
|
+
**Note:** When using `MegaProvider`, the SDK is automatically initialized, so you don't need to call `mega.initialise()` manually. The `useStatus` hook provides the initialization state via the `initialised` property.
|
package/dist/index.cjs
CHANGED
|
@@ -32,6 +32,7 @@ var index_exports = {};
|
|
|
32
32
|
__export(index_exports, {
|
|
33
33
|
MegaProvider: () => MegaProvider,
|
|
34
34
|
mega: () => import_wallet_sdk2.mega,
|
|
35
|
+
useAuthenticate: () => useAuthenticate,
|
|
35
36
|
useBalances: () => useBalances,
|
|
36
37
|
useCallContract: () => useCallContract,
|
|
37
38
|
useConnect: () => useConnect,
|
|
@@ -168,10 +169,17 @@ var useSignData = (options) => {
|
|
|
168
169
|
...options
|
|
169
170
|
});
|
|
170
171
|
};
|
|
172
|
+
var useAuthenticate = (options) => {
|
|
173
|
+
return (0, import_react_query.useMutation)({
|
|
174
|
+
mutationFn: import_wallet_sdk.mega.authenticate,
|
|
175
|
+
...options
|
|
176
|
+
});
|
|
177
|
+
};
|
|
171
178
|
// Annotate the CommonJS export names for ESM import in node:
|
|
172
179
|
0 && (module.exports = {
|
|
173
180
|
MegaProvider,
|
|
174
181
|
mega,
|
|
182
|
+
useAuthenticate,
|
|
175
183
|
useBalances,
|
|
176
184
|
useCallContract,
|
|
177
185
|
useConnect,
|
package/dist/index.d.cts
CHANGED
|
@@ -2,7 +2,7 @@ import * as _megaeth_labs_wallet_sdk from '@megaeth-labs/wallet-sdk';
|
|
|
2
2
|
import { Config, mega, ConnectionStatus } from '@megaeth-labs/wallet-sdk';
|
|
3
3
|
export { mega } from '@megaeth-labs/wallet-sdk';
|
|
4
4
|
import * as _tanstack_react_query from '@tanstack/react-query';
|
|
5
|
-
import {
|
|
5
|
+
import { UseMutationOptions, UndefinedInitialDataOptions } from '@tanstack/react-query';
|
|
6
6
|
import React, { PropsWithChildren } from 'react';
|
|
7
7
|
|
|
8
8
|
interface MegaProviderProps extends PropsWithChildren {
|
|
@@ -26,5 +26,6 @@ declare const useDeposit: (options?: Omit<UseMutationOptions<Awaited<ReturnType<
|
|
|
26
26
|
declare const useBalances: (tokens?: string[], options?: Omit<UndefinedInitialDataOptions<Awaited<ReturnType<typeof mega.balances>>, Error>, "queryKey" | "queryFn">) => _tanstack_react_query.UseQueryResult<_megaeth_labs_wallet_sdk.OwnedTokenResponse[], Error>;
|
|
27
27
|
declare const usePermissions: (address?: string, options?: Omit<UndefinedInitialDataOptions<Awaited<ReturnType<typeof mega.getPermissions>>, Error>, "queryKey" | "queryFn">) => _tanstack_react_query.UseQueryResult<_megaeth_labs_wallet_sdk.GetPermissionsResponse | undefined, Error>;
|
|
28
28
|
declare const useSignData: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.signData>>, Error, Parameters<typeof mega.signData>[0]>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.SignDataResponse, Error, _megaeth_labs_wallet_sdk.SignDataRequest, unknown>;
|
|
29
|
+
declare const useAuthenticate: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.authenticate>>, Error>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.AuthenticateResponse, Error, void, unknown>;
|
|
29
30
|
|
|
30
|
-
export { MegaProvider, useBalances, useCallContract, useConnect, useDeposit, useDisconnect, useGetFromContract, useGrantPermissions, usePermissions, useRevokePermissions, useSignData, useSignMessage, useStatus, useTransfer };
|
|
31
|
+
export { MegaProvider, useAuthenticate, useBalances, useCallContract, useConnect, useDeposit, useDisconnect, useGetFromContract, useGrantPermissions, usePermissions, useRevokePermissions, useSignData, useSignMessage, useStatus, useTransfer };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as _megaeth_labs_wallet_sdk from '@megaeth-labs/wallet-sdk';
|
|
|
2
2
|
import { Config, mega, ConnectionStatus } from '@megaeth-labs/wallet-sdk';
|
|
3
3
|
export { mega } from '@megaeth-labs/wallet-sdk';
|
|
4
4
|
import * as _tanstack_react_query from '@tanstack/react-query';
|
|
5
|
-
import {
|
|
5
|
+
import { UseMutationOptions, UndefinedInitialDataOptions } from '@tanstack/react-query';
|
|
6
6
|
import React, { PropsWithChildren } from 'react';
|
|
7
7
|
|
|
8
8
|
interface MegaProviderProps extends PropsWithChildren {
|
|
@@ -26,5 +26,6 @@ declare const useDeposit: (options?: Omit<UseMutationOptions<Awaited<ReturnType<
|
|
|
26
26
|
declare const useBalances: (tokens?: string[], options?: Omit<UndefinedInitialDataOptions<Awaited<ReturnType<typeof mega.balances>>, Error>, "queryKey" | "queryFn">) => _tanstack_react_query.UseQueryResult<_megaeth_labs_wallet_sdk.OwnedTokenResponse[], Error>;
|
|
27
27
|
declare const usePermissions: (address?: string, options?: Omit<UndefinedInitialDataOptions<Awaited<ReturnType<typeof mega.getPermissions>>, Error>, "queryKey" | "queryFn">) => _tanstack_react_query.UseQueryResult<_megaeth_labs_wallet_sdk.GetPermissionsResponse | undefined, Error>;
|
|
28
28
|
declare const useSignData: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.signData>>, Error, Parameters<typeof mega.signData>[0]>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.SignDataResponse, Error, _megaeth_labs_wallet_sdk.SignDataRequest, unknown>;
|
|
29
|
+
declare const useAuthenticate: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.authenticate>>, Error>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.AuthenticateResponse, Error, void, unknown>;
|
|
29
30
|
|
|
30
|
-
export { MegaProvider, useBalances, useCallContract, useConnect, useDeposit, useDisconnect, useGetFromContract, useGrantPermissions, usePermissions, useRevokePermissions, useSignData, useSignMessage, useStatus, useTransfer };
|
|
31
|
+
export { MegaProvider, useAuthenticate, useBalances, useCallContract, useConnect, useDeposit, useDisconnect, useGetFromContract, useGrantPermissions, usePermissions, useRevokePermissions, useSignData, useSignMessage, useStatus, useTransfer };
|
package/dist/index.js
CHANGED
|
@@ -131,9 +131,16 @@ var useSignData = (options) => {
|
|
|
131
131
|
...options
|
|
132
132
|
});
|
|
133
133
|
};
|
|
134
|
+
var useAuthenticate = (options) => {
|
|
135
|
+
return useMutation({
|
|
136
|
+
mutationFn: mega.authenticate,
|
|
137
|
+
...options
|
|
138
|
+
});
|
|
139
|
+
};
|
|
134
140
|
export {
|
|
135
141
|
MegaProvider,
|
|
136
142
|
mega2 as mega,
|
|
143
|
+
useAuthenticate,
|
|
137
144
|
useBalances,
|
|
138
145
|
useCallContract,
|
|
139
146
|
useConnect,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megaeth-labs/wallet-sdk-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "MegaETH Wallet SDK React Wrapper for web applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"access": "restricted"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@megaeth-labs/wallet-sdk": "0.1.
|
|
33
|
+
"@megaeth-labs/wallet-sdk": "0.1.9"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"@tanstack/react-query": "^5",
|