@cookill/wallet-adapter 2.4.2 → 2.5.1
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 +178 -58
- 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.js +14 -3
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +200 -136
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +89 -47
- package/dist/react.js.map +1 -1
- package/dist/standard.cjs +42 -14
- package/dist/standard.cjs.map +1 -1
- package/dist/standard.js +11 -3
- package/dist/standard.js.map +1 -1
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -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
|
|
@@ -33,64 +60,85 @@ function App() {
|
|
|
33
60
|
|
|
34
61
|
### useWallet
|
|
35
62
|
|
|
36
|
-
|
|
37
|
-
const {
|
|
38
|
-
// State
|
|
39
|
-
connected, // boolean - is wallet connected
|
|
40
|
-
connecting, // boolean - connection in progress
|
|
41
|
-
accounts, // WalletAccount[] - all connected accounts
|
|
42
|
-
activeAccount, // WalletAccount | null - primary account
|
|
43
|
-
network, // 'mainnet' | 'testnet' | 'devnet' | 'localnet'
|
|
44
|
-
chainId, // 'rialo:devnet' etc
|
|
45
|
-
balance, // string | null (in kelvins)
|
|
46
|
-
error, // Error | null
|
|
47
|
-
|
|
48
|
-
// Actions
|
|
49
|
-
connect, // () => Promise<WalletAccount[]>
|
|
50
|
-
disconnect, // () => Promise<void>
|
|
51
|
-
switchNetwork, // (network) => Promise<void>
|
|
52
|
-
refreshBalance, // () => Promise<void>
|
|
53
|
-
|
|
54
|
-
// Transactions
|
|
55
|
-
signMessage, // (message: string) => Promise<SignedMessage>
|
|
56
|
-
signTransaction, // (tx) => Promise<string>
|
|
57
|
-
sendTransaction, // (tx) => Promise<TransactionResult>
|
|
58
|
-
signAndSendTransaction, // (tx) => Promise<TransactionResult>
|
|
59
|
-
|
|
60
|
-
// Modal
|
|
61
|
-
isModalOpen,
|
|
62
|
-
openModal,
|
|
63
|
-
closeModal,
|
|
64
|
-
} = useWallet();
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
### useConnectWallet
|
|
63
|
+
Main hook for wallet state and actions:
|
|
68
64
|
|
|
69
65
|
```tsx
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
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
|
+
}
|
|
80
108
|
```
|
|
81
109
|
|
|
82
|
-
###
|
|
110
|
+
### Convenience Hooks
|
|
83
111
|
|
|
84
112
|
```tsx
|
|
113
|
+
// Check connection status
|
|
85
114
|
const connected = useIsConnected();
|
|
115
|
+
|
|
116
|
+
// Get active account
|
|
86
117
|
const account = useActiveAccount();
|
|
118
|
+
|
|
119
|
+
// Get all accounts
|
|
87
120
|
const accounts = useAccounts();
|
|
121
|
+
|
|
122
|
+
// Balance with formatting
|
|
88
123
|
const { balance, formatted, refresh } = useBalance();
|
|
124
|
+
// formatted: "1,234.5678 RLO"
|
|
125
|
+
|
|
126
|
+
// Network info
|
|
89
127
|
const { network, chainId, config } = useNetwork();
|
|
128
|
+
|
|
129
|
+
// Switch network with loading state
|
|
90
130
|
const { switchNetwork, switching, error } = useSwitchNetwork();
|
|
131
|
+
|
|
132
|
+
// Connect with modal
|
|
133
|
+
const { connect, connecting, isInstalled, error } = useConnectWallet();
|
|
134
|
+
|
|
135
|
+
// Disconnect
|
|
91
136
|
const { disconnect, connected } = useDisconnectWallet();
|
|
137
|
+
|
|
138
|
+
// Sign message with loading state
|
|
92
139
|
const { sign, signing, signature, error } = useSignMessage();
|
|
93
|
-
|
|
140
|
+
|
|
141
|
+
// Send transaction with loading state
|
|
94
142
|
const { send, sending, txHash, error, reset } = useSendTransaction();
|
|
95
143
|
```
|
|
96
144
|
|
|
@@ -98,6 +146,8 @@ const { send, sending, txHash, error, reset } = useSendTransaction();
|
|
|
98
146
|
|
|
99
147
|
### ConnectButton
|
|
100
148
|
|
|
149
|
+
Pre-styled connect button:
|
|
150
|
+
|
|
101
151
|
```tsx
|
|
102
152
|
<ConnectButton
|
|
103
153
|
connectLabel="Connect Wallet"
|
|
@@ -110,6 +160,8 @@ const { send, sending, txHash, error, reset } = useSendTransaction();
|
|
|
110
160
|
|
|
111
161
|
### WalletProvider
|
|
112
162
|
|
|
163
|
+
Wrap your app to provide wallet context:
|
|
164
|
+
|
|
113
165
|
```tsx
|
|
114
166
|
<WalletProvider
|
|
115
167
|
network="devnet"
|
|
@@ -123,28 +175,62 @@ const { send, sending, txHash, error, reset } = useSendTransaction();
|
|
|
123
175
|
</WalletProvider>
|
|
124
176
|
```
|
|
125
177
|
|
|
126
|
-
|
|
178
|
+
### WalletErrorBoundary
|
|
179
|
+
|
|
180
|
+
Prevents blank screens from uncaught errors:
|
|
181
|
+
|
|
182
|
+
```tsx
|
|
183
|
+
<WalletErrorBoundary
|
|
184
|
+
fallback={<div>Something went wrong</div>}
|
|
185
|
+
onError={(error, errorInfo) => logError(error)}
|
|
186
|
+
>
|
|
187
|
+
<YourComponent />
|
|
188
|
+
</WalletErrorBoundary>
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
## Vanilla JavaScript (Non-React)
|
|
127
192
|
|
|
128
193
|
```typescript
|
|
129
194
|
import { RialoWallet, isRialoInstalled, formatBalance } from '@cookill/wallet-adapter';
|
|
130
195
|
|
|
131
|
-
|
|
132
|
-
|
|
196
|
+
// Check if extension is installed
|
|
133
197
|
if (!isRialoInstalled()) {
|
|
134
198
|
console.log('Please install Sheep Wallet');
|
|
199
|
+
window.open('https://rialo.io/wallet', '_blank');
|
|
135
200
|
}
|
|
136
201
|
|
|
202
|
+
// Create wallet instance
|
|
203
|
+
const wallet = new RialoWallet();
|
|
204
|
+
|
|
205
|
+
// Connect
|
|
137
206
|
const accounts = await wallet.connect();
|
|
207
|
+
console.log('Connected:', accounts[0].address);
|
|
208
|
+
|
|
209
|
+
// Get balance
|
|
138
210
|
const balance = await wallet.getBalance();
|
|
211
|
+
console.log('Balance:', formatBalance(balance), 'RLO');
|
|
212
|
+
|
|
213
|
+
// Sign message
|
|
139
214
|
const signed = await wallet.signMessage('Hello!');
|
|
215
|
+
console.log('Signature:', signed.signature);
|
|
216
|
+
|
|
217
|
+
// Send transaction
|
|
140
218
|
const tx = await wallet.signAndSendTransaction({
|
|
141
219
|
to: 'RecipientAddress...',
|
|
142
220
|
value: '1000000000', // 1 RLO in kelvins
|
|
143
221
|
});
|
|
222
|
+
console.log('TX Hash:', tx.hash);
|
|
223
|
+
|
|
224
|
+
// Listen to events
|
|
225
|
+
wallet.on('disconnect', () => {
|
|
226
|
+
console.log('Wallet disconnected');
|
|
227
|
+
});
|
|
144
228
|
```
|
|
145
229
|
|
|
146
230
|
## Direct Provider Access
|
|
147
231
|
|
|
232
|
+
Access `window.rialo` directly:
|
|
233
|
+
|
|
148
234
|
```typescript
|
|
149
235
|
if (window.rialo) {
|
|
150
236
|
const accounts = await window.rialo.connect();
|
|
@@ -168,22 +254,24 @@ if (window.rialo) {
|
|
|
168
254
|
## Utilities
|
|
169
255
|
|
|
170
256
|
```typescript
|
|
171
|
-
import {
|
|
172
|
-
formatAddress,
|
|
173
|
-
formatBalance,
|
|
174
|
-
parseBalance,
|
|
175
|
-
isValidAddress,
|
|
176
|
-
toChainId,
|
|
177
|
-
fromChainId,
|
|
178
|
-
isRialoInstalled,
|
|
179
|
-
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
|
|
180
266
|
waitForRialoProvider, // (timeout?) => Promise<RialoProvider>
|
|
181
|
-
NETWORKS,
|
|
267
|
+
NETWORKS, // Network configurations
|
|
182
268
|
} from '@cookill/wallet-adapter';
|
|
183
269
|
```
|
|
184
270
|
|
|
185
271
|
## TypeScript
|
|
186
272
|
|
|
273
|
+
Full TypeScript support with all types exported:
|
|
274
|
+
|
|
187
275
|
```typescript
|
|
188
276
|
import type {
|
|
189
277
|
WalletAccount,
|
|
@@ -199,6 +287,38 @@ import type {
|
|
|
199
287
|
} from '@cookill/wallet-adapter';
|
|
200
288
|
```
|
|
201
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
|
+
|
|
202
322
|
## License
|
|
203
323
|
|
|
204
|
-
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":[]}
|