@cookill/wallet-adapter 2.5.3 → 2.5.4
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 +176 -110
- package/dist/ErrorBoundary.cjs +40 -20
- package/dist/ErrorBoundary.cjs.map +1 -1
- package/dist/ErrorBoundary.js +6 -6
- package/dist/ErrorBoundary.js.map +1 -1
- package/dist/LoadingStates.cjs +54 -32
- package/dist/LoadingStates.cjs.map +1 -1
- package/dist/LoadingStates.js +7 -5
- package/dist/LoadingStates.js.map +1 -1
- package/dist/index.cjs +48 -17
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +14 -3
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +244 -225
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +133 -136
- package/dist/react.js.map +1 -1
- package/dist/standard.cjs +42 -14
- package/dist/standard.cjs.map +1 -1
- package/dist/standard.d.cts +1 -1
- package/dist/standard.d.ts +1 -1
- package/dist/standard.js +11 -3
- package/dist/standard.js.map +1 -1
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @cookill/wallet-adapter v2.
|
|
1
|
+
# @cookill/wallet-adapter v2.5.0
|
|
2
2
|
|
|
3
3
|
Official wallet adapter for **Sheep Wallet** on Rialo blockchain.
|
|
4
4
|
|
|
@@ -8,6 +8,33 @@ Official wallet adapter for **Sheep Wallet** on Rialo blockchain.
|
|
|
8
8
|
npm install @cookill/wallet-adapter
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
## ⚠️ IMPORTANT: Vite Configuration
|
|
12
|
+
|
|
13
|
+
**If you're using Vite**, you MUST add React deduplication to prevent "stuck connection" issues:
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
// vite.config.ts
|
|
17
|
+
import { defineConfig } from "vite";
|
|
18
|
+
import react from "@vitejs/plugin-react";
|
|
19
|
+
import path from "path";
|
|
20
|
+
|
|
21
|
+
export default defineConfig({
|
|
22
|
+
plugins: [react()],
|
|
23
|
+
resolve: {
|
|
24
|
+
alias: {
|
|
25
|
+
"@": path.resolve(__dirname, "./src"),
|
|
26
|
+
},
|
|
27
|
+
// CRITICAL: Prevent duplicate React instances
|
|
28
|
+
dedupe: ["react", "react-dom", "react/jsx-runtime"],
|
|
29
|
+
},
|
|
30
|
+
optimizeDeps: {
|
|
31
|
+
include: ["react", "react-dom"],
|
|
32
|
+
},
|
|
33
|
+
});
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
**Without this configuration**, the wallet modal may not open and connections will appear "stuck".
|
|
37
|
+
|
|
11
38
|
## Quick Start
|
|
12
39
|
|
|
13
40
|
```tsx
|
|
@@ -20,7 +47,6 @@ import {
|
|
|
20
47
|
function App() {
|
|
21
48
|
return (
|
|
22
49
|
<WalletErrorBoundary>
|
|
23
|
-
{/* WalletProvider will render a default WalletModal automatically */}
|
|
24
50
|
<WalletProvider network="devnet" autoConnect>
|
|
25
51
|
<ConnectButton />
|
|
26
52
|
<YourDApp />
|
|
@@ -30,76 +56,89 @@ function App() {
|
|
|
30
56
|
}
|
|
31
57
|
```
|
|
32
58
|
|
|
33
|
-
## Troubleshooting (Connect stuck)
|
|
34
|
-
|
|
35
|
-
If clicking **Connect** does nothing or feels "stuck":
|
|
36
|
-
|
|
37
|
-
- Make sure your dApp is wrapped in `<WalletProvider>` (and ideally `<WalletErrorBoundary>`).
|
|
38
|
-
- Prefer `useConnectWallet().connect` (opens the modal) instead of `connectDirect`.
|
|
39
|
-
- The modal is rendered automatically by `WalletProvider`.
|
|
40
|
-
|
|
41
59
|
## React Hooks
|
|
42
60
|
|
|
43
61
|
### useWallet
|
|
44
62
|
|
|
45
|
-
|
|
46
|
-
const {
|
|
47
|
-
// State
|
|
48
|
-
connected, // boolean
|
|
49
|
-
connecting, // boolean
|
|
50
|
-
accounts, // WalletAccount[]
|
|
51
|
-
activeAccount, // WalletAccount | null
|
|
52
|
-
network, // 'mainnet' | 'testnet' | 'devnet' | 'localnet'
|
|
53
|
-
chainId, // 'rialo:devnet' etc
|
|
54
|
-
balance, // string | null (in kelvins)
|
|
55
|
-
error, // Error | null
|
|
56
|
-
|
|
57
|
-
// Actions
|
|
58
|
-
connect, // () => Promise<WalletAccount[]>
|
|
59
|
-
disconnect, // () => Promise<void>
|
|
60
|
-
switchNetwork, // (network) => Promise<void>
|
|
61
|
-
refreshBalance, // () => Promise<void>
|
|
62
|
-
|
|
63
|
-
// Transactions
|
|
64
|
-
signMessage, // (message: string) => Promise<SignedMessage>
|
|
65
|
-
signTransaction, // (tx) => Promise<string>
|
|
66
|
-
sendTransaction, // (tx) => Promise<TransactionResult>
|
|
67
|
-
signAndSendTransaction, // (tx) => Promise<TransactionResult>
|
|
68
|
-
|
|
69
|
-
// Modal
|
|
70
|
-
isModalOpen,
|
|
71
|
-
openModal,
|
|
72
|
-
closeModal,
|
|
73
|
-
} = useWallet();
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
### useConnectWallet
|
|
63
|
+
Main hook for wallet state and actions:
|
|
77
64
|
|
|
78
65
|
```tsx
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
66
|
+
import { useWallet } from '@cookill/wallet-adapter/react';
|
|
67
|
+
|
|
68
|
+
function MyComponent() {
|
|
69
|
+
const {
|
|
70
|
+
// State
|
|
71
|
+
connected, // boolean - is wallet connected
|
|
72
|
+
connecting, // boolean - connection in progress
|
|
73
|
+
accounts, // WalletAccount[] - all connected accounts
|
|
74
|
+
activeAccount, // WalletAccount | null - primary account
|
|
75
|
+
network, // 'mainnet' | 'testnet' | 'devnet' | 'localnet'
|
|
76
|
+
chainId, // 'rialo:devnet' etc
|
|
77
|
+
balance, // string | null (in kelvins)
|
|
78
|
+
error, // Error | null
|
|
79
|
+
|
|
80
|
+
// Actions
|
|
81
|
+
connect, // () => Promise<WalletAccount[]>
|
|
82
|
+
disconnect, // () => Promise<void>
|
|
83
|
+
switchNetwork, // (network) => Promise<void>
|
|
84
|
+
refreshBalance, // () => Promise<void>
|
|
85
|
+
|
|
86
|
+
// Transactions
|
|
87
|
+
signMessage, // (message: string) => Promise<SignedMessage>
|
|
88
|
+
signTransaction, // (tx) => Promise<string>
|
|
89
|
+
sendTransaction, // (tx) => Promise<TransactionResult>
|
|
90
|
+
signAndSendTransaction, // (tx) => Promise<TransactionResult>
|
|
91
|
+
|
|
92
|
+
// Modal
|
|
93
|
+
isModalOpen,
|
|
94
|
+
openModal,
|
|
95
|
+
closeModal,
|
|
96
|
+
} = useWallet();
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<div>
|
|
100
|
+
{connected ? (
|
|
101
|
+
<p>Connected: {activeAccount?.address}</p>
|
|
102
|
+
) : (
|
|
103
|
+
<button onClick={openModal}>Connect</button>
|
|
104
|
+
)}
|
|
105
|
+
</div>
|
|
106
|
+
);
|
|
107
|
+
}
|
|
89
108
|
```
|
|
90
109
|
|
|
91
|
-
###
|
|
110
|
+
### Convenience Hooks
|
|
92
111
|
|
|
93
112
|
```tsx
|
|
113
|
+
// Check connection status
|
|
94
114
|
const connected = useIsConnected();
|
|
115
|
+
|
|
116
|
+
// Get active account
|
|
95
117
|
const account = useActiveAccount();
|
|
118
|
+
|
|
119
|
+
// Get all accounts
|
|
96
120
|
const accounts = useAccounts();
|
|
121
|
+
|
|
122
|
+
// Balance with formatting
|
|
97
123
|
const { balance, formatted, refresh } = useBalance();
|
|
124
|
+
// formatted: "1,234.5678 RLO"
|
|
125
|
+
|
|
126
|
+
// Network info
|
|
98
127
|
const { network, chainId, config } = useNetwork();
|
|
99
|
-
|
|
128
|
+
|
|
129
|
+
// Switch network with loading state
|
|
130
|
+
const { switchNetwork, switching, error } = useSwitchNetwork();
|
|
131
|
+
|
|
132
|
+
// Connect with modal
|
|
133
|
+
const { connect, connecting, isInstalled, error } = useConnectWallet();
|
|
134
|
+
|
|
135
|
+
// Disconnect
|
|
100
136
|
const { disconnect, connected } = useDisconnectWallet();
|
|
101
|
-
|
|
102
|
-
|
|
137
|
+
|
|
138
|
+
// Sign message with loading state
|
|
139
|
+
const { sign, signing, signature, error } = useSignMessage();
|
|
140
|
+
|
|
141
|
+
// Send transaction with loading state
|
|
103
142
|
const { send, sending, txHash, error, reset } = useSendTransaction();
|
|
104
143
|
```
|
|
105
144
|
|
|
@@ -107,6 +146,8 @@ const { send, sending, txHash, error, reset } = useSendTransaction();
|
|
|
107
146
|
|
|
108
147
|
### ConnectButton
|
|
109
148
|
|
|
149
|
+
Pre-styled connect button:
|
|
150
|
+
|
|
110
151
|
```tsx
|
|
111
152
|
<ConnectButton
|
|
112
153
|
connectLabel="Connect Wallet"
|
|
@@ -117,19 +158,14 @@ const { send, sending, txHash, error, reset } = useSendTransaction();
|
|
|
117
158
|
/>
|
|
118
159
|
```
|
|
119
160
|
|
|
120
|
-
### WalletModal
|
|
121
|
-
|
|
122
|
-
```tsx
|
|
123
|
-
<WalletModal title="Select Wallet" className="my-modal" />
|
|
124
|
-
```
|
|
125
|
-
|
|
126
161
|
### WalletProvider
|
|
127
162
|
|
|
163
|
+
Wrap your app to provide wallet context:
|
|
164
|
+
|
|
128
165
|
```tsx
|
|
129
166
|
<WalletProvider
|
|
130
167
|
network="devnet"
|
|
131
168
|
autoConnect={true}
|
|
132
|
-
wallets={[customWallet]}
|
|
133
169
|
onConnect={(accounts) => console.log('Connected', accounts)}
|
|
134
170
|
onDisconnect={() => console.log('Disconnected')}
|
|
135
171
|
onNetworkChange={(network) => console.log('Network:', network)}
|
|
@@ -139,66 +175,62 @@ const { send, sending, txHash, error, reset } = useSendTransaction();
|
|
|
139
175
|
</WalletProvider>
|
|
140
176
|
```
|
|
141
177
|
|
|
142
|
-
###
|
|
178
|
+
### WalletErrorBoundary
|
|
143
179
|
|
|
144
|
-
|
|
145
|
-
import {
|
|
146
|
-
WalletErrorBoundary,
|
|
147
|
-
SafeWalletProvider,
|
|
148
|
-
ApprovalPending,
|
|
149
|
-
LoadingSpinner,
|
|
150
|
-
ConnectionStatus,
|
|
151
|
-
} from '@cookill/wallet-adapter/react';
|
|
180
|
+
Prevents blank screens from uncaught errors:
|
|
152
181
|
|
|
153
|
-
|
|
154
|
-
<WalletErrorBoundary
|
|
155
|
-
<
|
|
182
|
+
```tsx
|
|
183
|
+
<WalletErrorBoundary
|
|
184
|
+
fallback={<div>Something went wrong</div>}
|
|
185
|
+
onError={(error, errorInfo) => logError(error)}
|
|
186
|
+
>
|
|
187
|
+
<YourComponent />
|
|
156
188
|
</WalletErrorBoundary>
|
|
157
|
-
|
|
158
|
-
// Option 2: SafeWalletProvider (includes boundary)
|
|
159
|
-
<SafeWalletProvider network="devnet" errorFallback={<CustomError />}>
|
|
160
|
-
...
|
|
161
|
-
</SafeWalletProvider>
|
|
162
|
-
|
|
163
|
-
// Loading states
|
|
164
|
-
<ApprovalPending
|
|
165
|
-
title="Waiting for Approval"
|
|
166
|
-
message="Please approve in Sheep Wallet"
|
|
167
|
-
walletName="Sheep Wallet"
|
|
168
|
-
onCancel={() => disconnect()}
|
|
169
|
-
/>
|
|
170
|
-
|
|
171
|
-
<LoadingSpinner size="md" color="#6EB9A8" />
|
|
172
|
-
|
|
173
|
-
<ConnectionStatus status="connecting" />
|
|
174
|
-
<ConnectionStatus status="approving" message="Check your wallet" />
|
|
175
|
-
<ConnectionStatus status="signing" />
|
|
176
|
-
<ConnectionStatus status="success" />
|
|
177
|
-
<ConnectionStatus status="error" onRetry={() => connect()} />
|
|
178
189
|
```
|
|
179
190
|
|
|
180
|
-
## Vanilla JavaScript
|
|
191
|
+
## Vanilla JavaScript (Non-React)
|
|
181
192
|
|
|
182
193
|
```typescript
|
|
183
194
|
import { RialoWallet, isRialoInstalled, formatBalance } from '@cookill/wallet-adapter';
|
|
184
195
|
|
|
185
|
-
|
|
186
|
-
|
|
196
|
+
// Check if extension is installed
|
|
187
197
|
if (!isRialoInstalled()) {
|
|
188
198
|
console.log('Please install Sheep Wallet');
|
|
199
|
+
window.open('https://rialo.io/wallet', '_blank');
|
|
189
200
|
}
|
|
190
201
|
|
|
202
|
+
// Create wallet instance
|
|
203
|
+
const wallet = new RialoWallet();
|
|
204
|
+
|
|
205
|
+
// Connect
|
|
191
206
|
const accounts = await wallet.connect();
|
|
207
|
+
console.log('Connected:', accounts[0].address);
|
|
208
|
+
|
|
209
|
+
// Get balance
|
|
192
210
|
const balance = await wallet.getBalance();
|
|
211
|
+
console.log('Balance:', formatBalance(balance), 'RLO');
|
|
212
|
+
|
|
213
|
+
// Sign message
|
|
193
214
|
const signed = await wallet.signMessage('Hello!');
|
|
215
|
+
console.log('Signature:', signed.signature);
|
|
216
|
+
|
|
217
|
+
// Send transaction
|
|
194
218
|
const tx = await wallet.signAndSendTransaction({
|
|
195
219
|
to: 'RecipientAddress...',
|
|
196
220
|
value: '1000000000', // 1 RLO in kelvins
|
|
197
221
|
});
|
|
222
|
+
console.log('TX Hash:', tx.hash);
|
|
223
|
+
|
|
224
|
+
// Listen to events
|
|
225
|
+
wallet.on('disconnect', () => {
|
|
226
|
+
console.log('Wallet disconnected');
|
|
227
|
+
});
|
|
198
228
|
```
|
|
199
229
|
|
|
200
230
|
## Direct Provider Access
|
|
201
231
|
|
|
232
|
+
Access `window.rialo` directly:
|
|
233
|
+
|
|
202
234
|
```typescript
|
|
203
235
|
if (window.rialo) {
|
|
204
236
|
const accounts = await window.rialo.connect();
|
|
@@ -222,22 +254,24 @@ if (window.rialo) {
|
|
|
222
254
|
## Utilities
|
|
223
255
|
|
|
224
256
|
```typescript
|
|
225
|
-
import {
|
|
226
|
-
formatAddress,
|
|
227
|
-
formatBalance,
|
|
228
|
-
parseBalance,
|
|
229
|
-
isValidAddress,
|
|
230
|
-
toChainId,
|
|
231
|
-
fromChainId,
|
|
232
|
-
isRialoInstalled,
|
|
233
|
-
getRialoProvider,
|
|
257
|
+
import {
|
|
258
|
+
formatAddress, // (address, chars?) => "5YNm...VWr8"
|
|
259
|
+
formatBalance, // (kelvins, decimals?) => "1.0000"
|
|
260
|
+
parseBalance, // (rlo) => bigint (kelvins)
|
|
261
|
+
isValidAddress, // (address) => boolean
|
|
262
|
+
toChainId, // (network) => 'rialo:devnet'
|
|
263
|
+
fromChainId, // (chainId) => 'devnet'
|
|
264
|
+
isRialoInstalled, // () => boolean
|
|
265
|
+
getRialoProvider, // () => RialoProvider | undefined
|
|
234
266
|
waitForRialoProvider, // (timeout?) => Promise<RialoProvider>
|
|
235
|
-
NETWORKS,
|
|
267
|
+
NETWORKS, // Network configurations
|
|
236
268
|
} from '@cookill/wallet-adapter';
|
|
237
269
|
```
|
|
238
270
|
|
|
239
271
|
## TypeScript
|
|
240
272
|
|
|
273
|
+
Full TypeScript support with all types exported:
|
|
274
|
+
|
|
241
275
|
```typescript
|
|
242
276
|
import type {
|
|
243
277
|
WalletAccount,
|
|
@@ -253,6 +287,38 @@ import type {
|
|
|
253
287
|
} from '@cookill/wallet-adapter';
|
|
254
288
|
```
|
|
255
289
|
|
|
290
|
+
## Troubleshooting
|
|
291
|
+
|
|
292
|
+
### Modal not opening / Connection stuck
|
|
293
|
+
|
|
294
|
+
1. **Add Vite dedupe config** (see top of this README)
|
|
295
|
+
2. Clear `node_modules` and reinstall: `rm -rf node_modules && npm install`
|
|
296
|
+
3. Check console for errors
|
|
297
|
+
|
|
298
|
+
### Extension not detected
|
|
299
|
+
|
|
300
|
+
1. Make sure Sheep Wallet extension is installed
|
|
301
|
+
2. Refresh the page after installing
|
|
302
|
+
3. Check if `window.rialo` exists in browser console
|
|
303
|
+
|
|
304
|
+
### Transaction fails
|
|
305
|
+
|
|
306
|
+
1. Ensure wallet is unlocked
|
|
307
|
+
2. Check you have sufficient balance
|
|
308
|
+
3. Verify recipient address is valid
|
|
309
|
+
|
|
310
|
+
## Changelog
|
|
311
|
+
|
|
312
|
+
### v2.5.0
|
|
313
|
+
- Fixed bundling to properly externalize React
|
|
314
|
+
- Added WalletErrorBoundary component
|
|
315
|
+
- Added loading states (ApprovalPending, ConnectionStatus)
|
|
316
|
+
- Improved modal with singleton pattern
|
|
317
|
+
- Updated Vite configuration requirements
|
|
318
|
+
|
|
319
|
+
### v2.4.x
|
|
320
|
+
- Initial public release
|
|
321
|
+
|
|
256
322
|
## License
|
|
257
323
|
|
|
258
|
-
MIT
|
|
324
|
+
MIT
|
package/dist/ErrorBoundary.cjs
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
7
19
|
|
|
8
20
|
// src/ErrorBoundary.tsx
|
|
9
|
-
var
|
|
21
|
+
var ErrorBoundary_exports = {};
|
|
22
|
+
__export(ErrorBoundary_exports, {
|
|
23
|
+
WalletErrorBoundary: () => WalletErrorBoundary,
|
|
24
|
+
default: () => ErrorBoundary_default
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(ErrorBoundary_exports);
|
|
27
|
+
var import_react = require("react");
|
|
28
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
+
var WalletErrorBoundary = class extends import_react.Component {
|
|
10
30
|
constructor() {
|
|
11
31
|
super(...arguments);
|
|
12
32
|
this.state = {
|
|
@@ -29,7 +49,7 @@ var WalletErrorBoundary = class extends react.Component {
|
|
|
29
49
|
if (this.props.fallback) {
|
|
30
50
|
return this.props.fallback;
|
|
31
51
|
}
|
|
32
|
-
return /* @__PURE__ */
|
|
52
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
33
53
|
"div",
|
|
34
54
|
{
|
|
35
55
|
style: {
|
|
@@ -40,7 +60,7 @@ var WalletErrorBoundary = class extends react.Component {
|
|
|
40
60
|
textAlign: "center"
|
|
41
61
|
},
|
|
42
62
|
children: [
|
|
43
|
-
/* @__PURE__ */
|
|
63
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
44
64
|
"div",
|
|
45
65
|
{
|
|
46
66
|
style: {
|
|
@@ -53,7 +73,7 @@ var WalletErrorBoundary = class extends react.Component {
|
|
|
53
73
|
alignItems: "center",
|
|
54
74
|
justifyContent: "center"
|
|
55
75
|
},
|
|
56
|
-
children: /* @__PURE__ */
|
|
76
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
57
77
|
"svg",
|
|
58
78
|
{
|
|
59
79
|
width: "24",
|
|
@@ -65,17 +85,17 @@ var WalletErrorBoundary = class extends react.Component {
|
|
|
65
85
|
strokeLinecap: "round",
|
|
66
86
|
strokeLinejoin: "round",
|
|
67
87
|
children: [
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
/* @__PURE__ */
|
|
70
|
-
/* @__PURE__ */
|
|
88
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
89
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
|
|
90
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
|
|
71
91
|
]
|
|
72
92
|
}
|
|
73
93
|
)
|
|
74
94
|
}
|
|
75
95
|
),
|
|
76
|
-
/* @__PURE__ */
|
|
77
|
-
/* @__PURE__ */
|
|
78
|
-
/* @__PURE__ */
|
|
96
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: 600, color: "#991b1b" }, children: "Wallet Connection Error" }),
|
|
97
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "0 0 16px", fontSize: "14px", color: "#b91c1c" }, children: this.state.error?.message || "Something went wrong" }),
|
|
98
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
79
99
|
"button",
|
|
80
100
|
{
|
|
81
101
|
onClick: this.handleRetry,
|
|
@@ -100,8 +120,8 @@ var WalletErrorBoundary = class extends react.Component {
|
|
|
100
120
|
}
|
|
101
121
|
};
|
|
102
122
|
var ErrorBoundary_default = WalletErrorBoundary;
|
|
103
|
-
|
|
104
|
-
exports
|
|
105
|
-
|
|
106
|
-
|
|
123
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
124
|
+
0 && (module.exports = {
|
|
125
|
+
WalletErrorBoundary
|
|
126
|
+
});
|
|
107
127
|
//# sourceMappingURL=ErrorBoundary.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ErrorBoundary.tsx"],"
|
|
1
|
+
{"version":3,"sources":["../src/ErrorBoundary.tsx"],"sourcesContent":["/**\n * @cookill/wallet-adapter - Error Boundary\n * Prevents blank screens from uncaught errors\n */\n\nimport React, { Component, ErrorInfo, ReactNode } from 'react';\n\ninterface Props {\n children: ReactNode;\n fallback?: ReactNode;\n onError?: (error: Error, errorInfo: ErrorInfo) => void;\n}\n\ninterface State {\n hasError: boolean;\n error: Error | null;\n}\n\nexport class WalletErrorBoundary extends Component<Props, State> {\n public state: State = {\n hasError: false,\n error: null,\n };\n\n public static getDerivedStateFromError(error: Error): State {\n return { hasError: true, error };\n }\n\n public componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n console.error('[WalletAdapter] Error caught by boundary:', error, errorInfo);\n this.props.onError?.(error, errorInfo);\n }\n\n private handleRetry = () => {\n this.setState({ hasError: false, error: null });\n };\n\n public render() {\n if (this.state.hasError) {\n if (this.props.fallback) {\n return this.props.fallback;\n }\n\n return (\n <div\n style={{\n padding: '20px',\n borderRadius: '12px',\n border: '1px solid #fee2e2',\n backgroundColor: '#fef2f2',\n textAlign: 'center',\n }}\n >\n <div\n style={{\n width: '48px',\n height: '48px',\n margin: '0 auto 12px',\n borderRadius: '50%',\n backgroundColor: '#fecaca',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"#dc2626\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n </svg>\n </div>\n <h3 style={{ margin: '0 0 8px', fontSize: '16px', fontWeight: 600, color: '#991b1b' }}>\n Wallet Connection Error\n </h3>\n <p style={{ margin: '0 0 16px', fontSize: '14px', color: '#b91c1c' }}>\n {this.state.error?.message || 'Something went wrong'}\n </p>\n <button\n onClick={this.handleRetry}\n style={{\n padding: '8px 16px',\n borderRadius: '8px',\n border: 'none',\n backgroundColor: '#dc2626',\n color: 'white',\n cursor: 'pointer',\n fontSize: '14px',\n fontWeight: 500,\n }}\n >\n Try Again\n </button>\n </div>\n );\n }\n\n return this.props.children;\n }\n}\n\nexport default WalletErrorBoundary;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,mBAAuD;AA4D3C;AA/CL,IAAM,sBAAN,cAAkC,uBAAwB;AAAA,EAA1D;AAAA;AACL,SAAO,QAAe;AAAA,MACpB,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAWA,SAAQ,cAAc,MAAM;AAC1B,WAAK,SAAS,EAAE,UAAU,OAAO,OAAO,KAAK,CAAC;AAAA,IAChD;AAAA;AAAA,EAXA,OAAc,yBAAyB,OAAqB;AAC1D,WAAO,EAAE,UAAU,MAAM,MAAM;AAAA,EACjC;AAAA,EAEO,kBAAkB,OAAc,WAAsB;AAC3D,YAAQ,MAAM,6CAA6C,OAAO,SAAS;AAC3E,SAAK,MAAM,UAAU,OAAO,SAAS;AAAA,EACvC;AAAA,EAMO,SAAS;AACd,QAAI,KAAK,MAAM,UAAU;AACvB,UAAI,KAAK,MAAM,UAAU;AACvB,eAAO,KAAK,MAAM;AAAA,MACpB;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,cAAc;AAAA,YACd,QAAQ;AAAA,YACR,iBAAiB;AAAA,YACjB,WAAW;AAAA,UACb;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,kBACL,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,QAAQ;AAAA,kBACR,cAAc;AAAA,kBACd,iBAAiB;AAAA,kBACjB,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,gBAAgB;AAAA,gBAClB;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAM;AAAA,oBACN,QAAO;AAAA,oBACP,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,QAAO;AAAA,oBACP,aAAY;AAAA,oBACZ,eAAc;AAAA,oBACd,gBAAe;AAAA,oBAEf;AAAA,kEAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,sBAC/B,4CAAC,UAAK,IAAG,MAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK;AAAA,sBACrC,4CAAC,UAAK,IAAG,MAAK,IAAG,MAAK,IAAG,SAAQ,IAAG,MAAK;AAAA;AAAA;AAAA,gBAC3C;AAAA;AAAA,YACF;AAAA,YACA,4CAAC,QAAG,OAAO,EAAE,QAAQ,WAAW,UAAU,QAAQ,YAAY,KAAK,OAAO,UAAU,GAAG,qCAEvF;AAAA,YACA,4CAAC,OAAE,OAAO,EAAE,QAAQ,YAAY,UAAU,QAAQ,OAAO,UAAU,GAChE,eAAK,MAAM,OAAO,WAAW,wBAChC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,KAAK;AAAA,gBACd,OAAO;AAAA,kBACL,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,QAAQ;AAAA,kBACR,iBAAiB;AAAA,kBACjB,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,UAAU;AAAA,kBACV,YAAY;AAAA,gBACd;AAAA,gBACD;AAAA;AAAA,YAED;AAAA;AAAA;AAAA,MACF;AAAA,IAEJ;AAEA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;AAEA,IAAO,wBAAQ;","names":[]}
|
package/dist/ErrorBoundary.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { Component } from 'react';
|
|
2
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
|
|
4
1
|
// src/ErrorBoundary.tsx
|
|
2
|
+
import { Component } from "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
4
|
var WalletErrorBoundary = class extends Component {
|
|
6
5
|
constructor() {
|
|
7
6
|
super(...arguments);
|
|
@@ -96,7 +95,8 @@ var WalletErrorBoundary = class extends Component {
|
|
|
96
95
|
}
|
|
97
96
|
};
|
|
98
97
|
var ErrorBoundary_default = WalletErrorBoundary;
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
98
|
+
export {
|
|
99
|
+
WalletErrorBoundary,
|
|
100
|
+
ErrorBoundary_default as default
|
|
101
|
+
};
|
|
102
102
|
//# sourceMappingURL=ErrorBoundary.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ErrorBoundary.tsx"],"
|
|
1
|
+
{"version":3,"sources":["../src/ErrorBoundary.tsx"],"sourcesContent":["/**\n * @cookill/wallet-adapter - Error Boundary\n * Prevents blank screens from uncaught errors\n */\n\nimport React, { Component, ErrorInfo, ReactNode } from 'react';\n\ninterface Props {\n children: ReactNode;\n fallback?: ReactNode;\n onError?: (error: Error, errorInfo: ErrorInfo) => void;\n}\n\ninterface State {\n hasError: boolean;\n error: Error | null;\n}\n\nexport class WalletErrorBoundary extends Component<Props, State> {\n public state: State = {\n hasError: false,\n error: null,\n };\n\n public static getDerivedStateFromError(error: Error): State {\n return { hasError: true, error };\n }\n\n public componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n console.error('[WalletAdapter] Error caught by boundary:', error, errorInfo);\n this.props.onError?.(error, errorInfo);\n }\n\n private handleRetry = () => {\n this.setState({ hasError: false, error: null });\n };\n\n public render() {\n if (this.state.hasError) {\n if (this.props.fallback) {\n return this.props.fallback;\n }\n\n return (\n <div\n style={{\n padding: '20px',\n borderRadius: '12px',\n border: '1px solid #fee2e2',\n backgroundColor: '#fef2f2',\n textAlign: 'center',\n }}\n >\n <div\n style={{\n width: '48px',\n height: '48px',\n margin: '0 auto 12px',\n borderRadius: '50%',\n backgroundColor: '#fecaca',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"#dc2626\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n </svg>\n </div>\n <h3 style={{ margin: '0 0 8px', fontSize: '16px', fontWeight: 600, color: '#991b1b' }}>\n Wallet Connection Error\n </h3>\n <p style={{ margin: '0 0 16px', fontSize: '14px', color: '#b91c1c' }}>\n {this.state.error?.message || 'Something went wrong'}\n </p>\n <button\n onClick={this.handleRetry}\n style={{\n padding: '8px 16px',\n borderRadius: '8px',\n border: 'none',\n backgroundColor: '#dc2626',\n color: 'white',\n cursor: 'pointer',\n fontSize: '14px',\n fontWeight: 500,\n }}\n >\n Try Again\n </button>\n </div>\n );\n }\n\n return this.props.children;\n }\n}\n\nexport default WalletErrorBoundary;\n"],"mappings":";AAKA,SAAgB,iBAAuC;AA4D3C,SAUE,KAVF;AA/CL,IAAM,sBAAN,cAAkC,UAAwB;AAAA,EAA1D;AAAA;AACL,SAAO,QAAe;AAAA,MACpB,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAWA,SAAQ,cAAc,MAAM;AAC1B,WAAK,SAAS,EAAE,UAAU,OAAO,OAAO,KAAK,CAAC;AAAA,IAChD;AAAA;AAAA,EAXA,OAAc,yBAAyB,OAAqB;AAC1D,WAAO,EAAE,UAAU,MAAM,MAAM;AAAA,EACjC;AAAA,EAEO,kBAAkB,OAAc,WAAsB;AAC3D,YAAQ,MAAM,6CAA6C,OAAO,SAAS;AAC3E,SAAK,MAAM,UAAU,OAAO,SAAS;AAAA,EACvC;AAAA,EAMO,SAAS;AACd,QAAI,KAAK,MAAM,UAAU;AACvB,UAAI,KAAK,MAAM,UAAU;AACvB,eAAO,KAAK,MAAM;AAAA,MACpB;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,cAAc;AAAA,YACd,QAAQ;AAAA,YACR,iBAAiB;AAAA,YACjB,WAAW;AAAA,UACb;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,kBACL,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,QAAQ;AAAA,kBACR,cAAc;AAAA,kBACd,iBAAiB;AAAA,kBACjB,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,gBAAgB;AAAA,gBAClB;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAM;AAAA,oBACN,QAAO;AAAA,oBACP,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,QAAO;AAAA,oBACP,aAAY;AAAA,oBACZ,eAAc;AAAA,oBACd,gBAAe;AAAA,oBAEf;AAAA,0CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,sBAC/B,oBAAC,UAAK,IAAG,MAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK;AAAA,sBACrC,oBAAC,UAAK,IAAG,MAAK,IAAG,MAAK,IAAG,SAAQ,IAAG,MAAK;AAAA;AAAA;AAAA,gBAC3C;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,QAAG,OAAO,EAAE,QAAQ,WAAW,UAAU,QAAQ,YAAY,KAAK,OAAO,UAAU,GAAG,qCAEvF;AAAA,YACA,oBAAC,OAAE,OAAO,EAAE,QAAQ,YAAY,UAAU,QAAQ,OAAO,UAAU,GAChE,eAAK,MAAM,OAAO,WAAW,wBAChC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,KAAK;AAAA,gBACd,OAAO;AAAA,kBACL,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,QAAQ;AAAA,kBACR,iBAAiB;AAAA,kBACjB,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,UAAU;AAAA,kBACV,YAAY;AAAA,gBACd;AAAA,gBACD;AAAA;AAAA,YAED;AAAA;AAAA;AAAA,MACF;AAAA,IAEJ;AAEA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;AAEA,IAAO,wBAAQ;","names":[]}
|