@wallet-ui/react 2.0.0-canary-20250814162838 → 2.0.0-canary-20250827010532
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/dist/index.browser.cjs +97 -134
- package/dist/index.browser.cjs.map +1 -1
- package/dist/index.browser.mjs +78 -111
- package/dist/index.browser.mjs.map +1 -1
- package/dist/index.native.mjs +78 -111
- package/dist/index.native.mjs.map +1 -1
- package/dist/index.node.cjs +97 -134
- package/dist/index.node.cjs.map +1 -1
- package/dist/index.node.mjs +78 -111
- package/dist/index.node.mjs.map +1 -1
- package/dist/types/index.d.ts +0 -5
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/use-wallet-ui-signer.d.ts +3 -5
- package/dist/types/use-wallet-ui-signer.d.ts.map +1 -1
- package/dist/types/wallet-ui-context-provider.d.ts.map +1 -1
- package/dist/types/wallet-ui-context.d.ts +0 -2
- package/dist/types/wallet-ui-context.d.ts.map +1 -1
- package/dist/types/wallet-ui.d.ts.map +1 -1
- package/package.json +4 -5
- package/dist/index.css +0 -490
- package/dist/index.css.map +0 -1
- package/dist/types/use-wallet-ui-sign-and-send.d.ts +0 -3
- package/dist/types/use-wallet-ui-sign-and-send.d.ts.map +0 -1
- package/dist/types/use-wallet-ui-solana-client.d.ts +0 -2
- package/dist/types/use-wallet-ui-solana-client.d.ts.map +0 -1
- package/dist/types/wallet-ui-solana-client-context-provider.d.ts +0 -4
- package/dist/types/wallet-ui-solana-client-context-provider.d.ts.map +0 -1
- package/dist/types/wallet-ui-solana-client-context.d.ts +0 -8
- package/dist/types/wallet-ui-solana-client-context.d.ts.map +0 -1
package/dist/index.node.cjs
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React19 = require('react');
|
|
4
4
|
var react$1 = require('@wallet-standard/react');
|
|
5
5
|
var react$2 = require('@zag-js/react');
|
|
6
6
|
var menu = require('@zag-js/menu');
|
|
7
7
|
var dialog = require('@zag-js/dialog');
|
|
8
8
|
var react = require('@solana/react');
|
|
9
|
-
var gill = require('gill');
|
|
10
9
|
var react$3 = require('@nanostores/react');
|
|
11
10
|
var core$1 = require('@wallet-ui/core');
|
|
12
11
|
var walletStandardFeatures = require('@solana/wallet-standard-features');
|
|
@@ -32,25 +31,25 @@ function _interopNamespace(e) {
|
|
|
32
31
|
return Object.freeze(n);
|
|
33
32
|
}
|
|
34
33
|
|
|
35
|
-
var
|
|
34
|
+
var React19__default = /*#__PURE__*/_interopDefault(React19);
|
|
36
35
|
var menu__namespace = /*#__PURE__*/_interopNamespace(menu);
|
|
37
36
|
var dialog__namespace = /*#__PURE__*/_interopNamespace(dialog);
|
|
38
37
|
|
|
39
38
|
// src/base-button.tsx
|
|
40
39
|
function BaseButton({ className, label, leftSection, onClick, rightSection, size, ...props }) {
|
|
41
|
-
return /* @__PURE__ */
|
|
40
|
+
return /* @__PURE__ */ React19__default.default.createElement("button", { "data-wu": "base-button", className: `${size ?? "md"} ${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React19__default.default.createElement("span", { "data-wu": "base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React19__default.default.createElement("span", { "data-wu": "base-button-right-section" }, rightSection) : null);
|
|
42
41
|
}
|
|
43
|
-
var WalletUiContext =
|
|
42
|
+
var WalletUiContext = React19__default.default.createContext({});
|
|
44
43
|
|
|
45
44
|
// src/use-wallet-ui.tsx
|
|
46
45
|
function useWalletUi() {
|
|
47
|
-
return
|
|
46
|
+
return React19__default.default.useContext(WalletUiContext);
|
|
48
47
|
}
|
|
49
|
-
var WalletUiAccountContext =
|
|
48
|
+
var WalletUiAccountContext = React19.createContext({});
|
|
50
49
|
|
|
51
50
|
// src/use-wallet-ui-account.tsx
|
|
52
51
|
function useWalletUiAccount() {
|
|
53
|
-
return
|
|
52
|
+
return React19.useContext(WalletUiAccountContext);
|
|
54
53
|
}
|
|
55
54
|
|
|
56
55
|
// src/use-wallet-ui-wallet.tsx
|
|
@@ -59,7 +58,7 @@ function useWalletUiWallet({ wallet }) {
|
|
|
59
58
|
const { setAccount } = useWalletUiAccount();
|
|
60
59
|
const [isConnecting, connect3] = react$1.useConnect(wallet);
|
|
61
60
|
const [isDisconnecting, disconnect] = react$1.useDisconnect(wallet);
|
|
62
|
-
|
|
61
|
+
React19.useEffect(() => {
|
|
63
62
|
}, [isDisconnecting]);
|
|
64
63
|
return {
|
|
65
64
|
connect: async () => {
|
|
@@ -82,7 +81,7 @@ function WalletUiIcon({ className, size = "md", wallet, ...props }) {
|
|
|
82
81
|
if (!wallet) {
|
|
83
82
|
return null;
|
|
84
83
|
}
|
|
85
|
-
return /* @__PURE__ */
|
|
84
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
86
85
|
"img",
|
|
87
86
|
{
|
|
88
87
|
"data-wu": "wallet-ui-icon",
|
|
@@ -105,17 +104,17 @@ var BaseDropdownItemType = /* @__PURE__ */ ((BaseDropdownItemType2) => {
|
|
|
105
104
|
})(BaseDropdownItemType || {});
|
|
106
105
|
function BaseDropdown({ buttonProps, dropdown, items, showIndicator, size = "md" }) {
|
|
107
106
|
const api = dropdown.api;
|
|
108
|
-
const trigger = /* @__PURE__ */
|
|
107
|
+
const trigger = /* @__PURE__ */ React19__default.default.createElement(
|
|
109
108
|
BaseButton,
|
|
110
109
|
{
|
|
111
110
|
...api.getTriggerProps(),
|
|
112
111
|
size,
|
|
113
|
-
rightSection: showIndicator ? /* @__PURE__ */
|
|
112
|
+
rightSection: showIndicator ? /* @__PURE__ */ React19__default.default.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React19__default.default.createElement(BaseDropdownChevronDown, { size: 12 })) : null,
|
|
114
113
|
...buttonProps
|
|
115
114
|
}
|
|
116
115
|
);
|
|
117
|
-
return /* @__PURE__ */
|
|
118
|
-
return /* @__PURE__ */
|
|
116
|
+
return /* @__PURE__ */ React19__default.default.createElement("div", { "data-wu": "base-dropdown" }, trigger, /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getPositionerProps(), "data-wu": "base-dropdown-wrapper" }, /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getContentProps(), "data-wu": "base-dropdown-list", "data-part": "content" }, items.map((item) => {
|
|
117
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
119
118
|
BaseDropdownItem,
|
|
120
119
|
{
|
|
121
120
|
...api.getItemProps({ value: item.value }),
|
|
@@ -136,17 +135,17 @@ function BaseDropdown({ buttonProps, dropdown, items, showIndicator, size = "md"
|
|
|
136
135
|
}
|
|
137
136
|
function BaseDropdownItem({ afterClick, item, size }) {
|
|
138
137
|
if (!item.wallet) {
|
|
139
|
-
return /* @__PURE__ */
|
|
138
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemRender, { afterClick, item, size });
|
|
140
139
|
}
|
|
141
140
|
switch (item.type) {
|
|
142
141
|
case "Item" /* Item */:
|
|
143
|
-
return /* @__PURE__ */
|
|
142
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemRender, { afterClick, item, size });
|
|
144
143
|
case "WalletConnect" /* WalletConnect */:
|
|
145
|
-
return /* @__PURE__ */
|
|
144
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemWalletConnect, { afterClick, item, size, wallet: item.wallet });
|
|
146
145
|
case "WalletCopy" /* WalletCopy */:
|
|
147
|
-
return /* @__PURE__ */
|
|
146
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemRender, { afterClick, item, size });
|
|
148
147
|
case "WalletDisconnect" /* WalletDisconnect */:
|
|
149
|
-
return /* @__PURE__ */
|
|
148
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
150
149
|
BaseDropdownItemWalletDisconnect,
|
|
151
150
|
{
|
|
152
151
|
afterClick,
|
|
@@ -164,7 +163,7 @@ function BaseDropdownItemWalletConnect({
|
|
|
164
163
|
wallet
|
|
165
164
|
}) {
|
|
166
165
|
const { connect: connect3 } = useWalletUiWallet({ wallet });
|
|
167
|
-
return /* @__PURE__ */
|
|
166
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
168
167
|
BaseDropdownItemRender,
|
|
169
168
|
{
|
|
170
169
|
afterClick,
|
|
@@ -174,7 +173,7 @@ function BaseDropdownItemWalletConnect({
|
|
|
174
173
|
await connect3();
|
|
175
174
|
return await item.handler();
|
|
176
175
|
},
|
|
177
|
-
leftSection: wallet ? /* @__PURE__ */
|
|
176
|
+
leftSection: wallet ? /* @__PURE__ */ React19__default.default.createElement(WalletUiIcon, { wallet, size }) : void 0
|
|
178
177
|
},
|
|
179
178
|
size
|
|
180
179
|
}
|
|
@@ -187,7 +186,7 @@ function BaseDropdownItemWalletDisconnect({
|
|
|
187
186
|
wallet
|
|
188
187
|
}) {
|
|
189
188
|
const { disconnect } = useWalletUiWallet({ wallet });
|
|
190
|
-
return /* @__PURE__ */
|
|
189
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
191
190
|
BaseDropdownItemRender,
|
|
192
191
|
{
|
|
193
192
|
afterClick,
|
|
@@ -211,10 +210,10 @@ function BaseDropdownItemRender({ afterClick, item, size }) {
|
|
|
211
210
|
afterClick();
|
|
212
211
|
});
|
|
213
212
|
}
|
|
214
|
-
return /* @__PURE__ */
|
|
213
|
+
return /* @__PURE__ */ React19__default.default.createElement("button", { type: "button", "data-wu": "base-dropdown-item", className: size, "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React19__default.default.createElement("span", { "data-wu": "base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React19__default.default.createElement("span", { "data-wu": "base-dropdown-item-right-section" }, item.rightSection) : null);
|
|
215
214
|
}
|
|
216
215
|
function BaseDropdownChevronDown(props) {
|
|
217
|
-
return /* @__PURE__ */
|
|
216
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
218
217
|
"svg",
|
|
219
218
|
{
|
|
220
219
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -228,17 +227,17 @@ function BaseDropdownChevronDown(props) {
|
|
|
228
227
|
strokeLinejoin: "round",
|
|
229
228
|
...props
|
|
230
229
|
},
|
|
231
|
-
/* @__PURE__ */
|
|
230
|
+
/* @__PURE__ */ React19__default.default.createElement("path", { d: "m6 9 6 6 6-6" })
|
|
232
231
|
);
|
|
233
232
|
}
|
|
234
233
|
function BaseSvg({ sizes = {}, ...props }) {
|
|
235
234
|
const size = props.size ? sizes[props.size] : 12;
|
|
236
|
-
return /* @__PURE__ */
|
|
235
|
+
return /* @__PURE__ */ React19__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, ...props }, props.children);
|
|
237
236
|
}
|
|
238
237
|
|
|
239
238
|
// src/wallet-ui-icon-close.tsx
|
|
240
239
|
function WalletUiIconClose({ size = "md", ...props }) {
|
|
241
|
-
return /* @__PURE__ */
|
|
240
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
242
241
|
BaseSvg,
|
|
243
242
|
{
|
|
244
243
|
size,
|
|
@@ -249,17 +248,17 @@ function WalletUiIconClose({ size = "md", ...props }) {
|
|
|
249
248
|
viewBox: "0 0 14 14",
|
|
250
249
|
...props
|
|
251
250
|
},
|
|
252
|
-
/* @__PURE__ */
|
|
251
|
+
/* @__PURE__ */ React19__default.default.createElement("path", { d: "M14 12.461 8.3 6.772l5.234-5.233L12.006 0 6.772 5.234 1.54 0 0 1.539l5.234 5.233L0 12.006l1.539 1.528L6.772 8.3l5.69 5.7L14 12.461z" })
|
|
253
252
|
);
|
|
254
253
|
}
|
|
255
254
|
|
|
256
255
|
// src/base-modal.tsx
|
|
257
256
|
function BaseModal({ modal, buttonLabel, buttonProps = {}, size = "md", ...props }) {
|
|
258
257
|
const api = modal.api;
|
|
259
|
-
return /* @__PURE__ */
|
|
258
|
+
return /* @__PURE__ */ React19__default.default.createElement(React19__default.default.Fragment, null, buttonLabel ? /* @__PURE__ */ React19__default.default.createElement(BaseButton, { label: buttonLabel, size, ...buttonProps, ...api.getTriggerProps() }) : null, api.open && /* @__PURE__ */ React19__default.default.createElement(react$2.Portal, null, /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getBackdropProps() }), /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getPositionerProps() }, /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getContentProps(), className: size }, /* @__PURE__ */ React19__default.default.createElement("header", null, /* @__PURE__ */ React19__default.default.createElement("button", { ...api.getCloseTriggerProps() }, /* @__PURE__ */ React19__default.default.createElement(WalletUiIconClose, { size }))), props.description ? /* @__PURE__ */ React19__default.default.createElement("p", { ...api.getDescriptionProps() }, props.description) : null, /* @__PURE__ */ React19__default.default.createElement("main", null, props.children)))));
|
|
260
259
|
}
|
|
261
260
|
function useBaseDropdown() {
|
|
262
|
-
const service = react$2.useMachine(menu__namespace.machine, { id:
|
|
261
|
+
const service = react$2.useMachine(menu__namespace.machine, { id: React19.useId() });
|
|
263
262
|
const api = menu__namespace.connect(service, react$2.normalizeProps);
|
|
264
263
|
return {
|
|
265
264
|
api,
|
|
@@ -268,7 +267,7 @@ function useBaseDropdown() {
|
|
|
268
267
|
};
|
|
269
268
|
}
|
|
270
269
|
function useBaseModal() {
|
|
271
|
-
const service = react$2.useMachine(dialog__namespace.machine, { id:
|
|
270
|
+
const service = react$2.useMachine(dialog__namespace.machine, { id: React19.useId(), modal: true });
|
|
272
271
|
const api = dialog__namespace.connect(service, react$2.normalizeProps);
|
|
273
272
|
return {
|
|
274
273
|
api,
|
|
@@ -276,11 +275,11 @@ function useBaseModal() {
|
|
|
276
275
|
open: () => service.send({ type: "OPEN" })
|
|
277
276
|
};
|
|
278
277
|
}
|
|
279
|
-
var WalletUiClusterContext =
|
|
278
|
+
var WalletUiClusterContext = React19.createContext({});
|
|
280
279
|
|
|
281
280
|
// src/use-wallet-ui-cluster.tsx
|
|
282
281
|
function useWalletUiCluster() {
|
|
283
|
-
return
|
|
282
|
+
return React19.useContext(WalletUiClusterContext);
|
|
284
283
|
}
|
|
285
284
|
function getDropdownItemsWallets({
|
|
286
285
|
wallets,
|
|
@@ -314,8 +313,8 @@ function getDropdownItemsWallets({
|
|
|
314
313
|
function useWalletUiDropdown({ size = "md" } = {}) {
|
|
315
314
|
const dropdown = useBaseDropdown();
|
|
316
315
|
const { account, connect: connect3, copy, disconnect, connected, wallet, wallets } = useWalletUi();
|
|
317
|
-
const itemsWallets =
|
|
318
|
-
const itemsConnected =
|
|
316
|
+
const itemsWallets = React19.useMemo(() => getDropdownItemsWallets({ connect: connect3, wallets }), [wallets, connect3]);
|
|
317
|
+
const itemsConnected = React19.useMemo(
|
|
319
318
|
() => [
|
|
320
319
|
{
|
|
321
320
|
handler: async () => {
|
|
@@ -340,13 +339,13 @@ function useWalletUiDropdown({ size = "md" } = {}) {
|
|
|
340
339
|
],
|
|
341
340
|
[copy, disconnect, dropdown, itemsWallets]
|
|
342
341
|
);
|
|
343
|
-
const items =
|
|
342
|
+
const items = React19.useMemo(() => {
|
|
344
343
|
return connected ? itemsConnected : itemsWallets;
|
|
345
344
|
}, [connected, itemsConnected, itemsWallets]);
|
|
346
|
-
const buttonProps =
|
|
345
|
+
const buttonProps = React19.useMemo(() => {
|
|
347
346
|
return {
|
|
348
347
|
label: connected ? (account ? ellipsify(account.address) : wallet?.name) ?? "Connected" : "Select Wallet",
|
|
349
|
-
leftSection: connected ? /* @__PURE__ */
|
|
348
|
+
leftSection: connected ? /* @__PURE__ */ React19__default.default.createElement(WalletUiIcon, { size, wallet }) : void 0
|
|
350
349
|
};
|
|
351
350
|
}, [account, connected, size, wallet]);
|
|
352
351
|
return {
|
|
@@ -361,33 +360,15 @@ function ellipsify(str = "", len = 4, delimiter = "..") {
|
|
|
361
360
|
const limit = len * 2 + delimiter.length;
|
|
362
361
|
return strLen >= limit ? str.substring(0, len) + delimiter + str.substring(strLen - len, strLen) : str;
|
|
363
362
|
}
|
|
364
|
-
function useWalletUiSigner({
|
|
363
|
+
function useWalletUiSigner({
|
|
364
|
+
account
|
|
365
|
+
}) {
|
|
365
366
|
const { cluster } = useWalletUi();
|
|
366
367
|
return react.useWalletAccountTransactionSendingSigner(account, cluster.id);
|
|
367
368
|
}
|
|
368
|
-
var WalletUiSolanaClientContext = React20.createContext({});
|
|
369
|
-
|
|
370
|
-
// src/use-wallet-ui-solana-client.tsx
|
|
371
|
-
function useWalletUiSolanaClient() {
|
|
372
|
-
return React20.useContext(WalletUiSolanaClientContext);
|
|
373
|
-
}
|
|
374
|
-
function useWalletUiSignAndSend() {
|
|
375
|
-
const { client } = useWalletUi();
|
|
376
|
-
return async (ix, signer) => {
|
|
377
|
-
const { value: latestBlockhash } = await client.rpc.getLatestBlockhash().send();
|
|
378
|
-
const transaction = gill.createTransaction({
|
|
379
|
-
feePayer: signer,
|
|
380
|
-
instructions: Array.isArray(ix) ? ix : [ix],
|
|
381
|
-
latestBlockhash,
|
|
382
|
-
version: 0
|
|
383
|
-
});
|
|
384
|
-
const signature = await gill.signAndSendTransactionMessageWithSigners(transaction);
|
|
385
|
-
return gill.getBase58Decoder().decode(signature);
|
|
386
|
-
};
|
|
387
|
-
}
|
|
388
369
|
function useWalletUiWallets() {
|
|
389
370
|
const readonlyWallets = react$1.useWallets();
|
|
390
|
-
return
|
|
371
|
+
return React19.useMemo(
|
|
391
372
|
() => readonlyWallets.filter((wallet) => wallet.chains.some((i) => i.startsWith("solana:"))).sort((a, b) => a.name.localeCompare(b.name)),
|
|
392
373
|
[readonlyWallets]
|
|
393
374
|
);
|
|
@@ -417,7 +398,7 @@ function WalletUiAccountContextProvider({
|
|
|
417
398
|
}) {
|
|
418
399
|
const wallets = react$1.useWallets();
|
|
419
400
|
const accountId = react$3.useStore(storage.value);
|
|
420
|
-
const [account, setAccountInternal] =
|
|
401
|
+
const [account, setAccountInternal] = React19.useState(
|
|
421
402
|
() => getSavedWalletAccount(wallets, accountId)
|
|
422
403
|
);
|
|
423
404
|
function setAccount(setStateAction) {
|
|
@@ -429,13 +410,13 @@ function WalletUiAccountContextProvider({
|
|
|
429
410
|
return nextWalletAccount;
|
|
430
411
|
});
|
|
431
412
|
}
|
|
432
|
-
|
|
413
|
+
React19.useEffect(() => {
|
|
433
414
|
const savedWalletAccount = getSavedWalletAccount(wallets, accountId);
|
|
434
415
|
if (savedWalletAccount) {
|
|
435
416
|
setAccountInternal(savedWalletAccount);
|
|
436
417
|
}
|
|
437
418
|
}, [accountId, wallets]);
|
|
438
|
-
const walletAccount =
|
|
419
|
+
const walletAccount = React19.useMemo(() => {
|
|
439
420
|
if (account) {
|
|
440
421
|
for (const uiWallet of wallets) {
|
|
441
422
|
for (const uiWalletAccount of uiWallet.accounts) {
|
|
@@ -449,12 +430,12 @@ function WalletUiAccountContextProvider({
|
|
|
449
430
|
}
|
|
450
431
|
}
|
|
451
432
|
}, [account, wallets]);
|
|
452
|
-
|
|
433
|
+
React19.useEffect(() => {
|
|
453
434
|
if (account && !walletAccount) {
|
|
454
435
|
setAccountInternal(void 0);
|
|
455
436
|
}
|
|
456
437
|
}, [account, walletAccount]);
|
|
457
|
-
const wallet =
|
|
438
|
+
const wallet = React19.useMemo(() => {
|
|
458
439
|
if (!walletAccount) {
|
|
459
440
|
return void 0;
|
|
460
441
|
}
|
|
@@ -469,16 +450,16 @@ function WalletUiAccountContextProvider({
|
|
|
469
450
|
}
|
|
470
451
|
}
|
|
471
452
|
}, [walletAccount, wallets]);
|
|
472
|
-
const accountKeys =
|
|
453
|
+
const accountKeys = React19.useMemo(() => {
|
|
473
454
|
if (!account) {
|
|
474
455
|
return [];
|
|
475
456
|
}
|
|
476
457
|
return [cluster.id, react$1.getUiWalletAccountStorageKey(account)].filter(Boolean);
|
|
477
458
|
}, [account, cluster.id]);
|
|
478
|
-
return /* @__PURE__ */
|
|
459
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
479
460
|
WalletUiAccountContext.Provider,
|
|
480
461
|
{
|
|
481
|
-
value:
|
|
462
|
+
value: React19.useMemo(
|
|
482
463
|
() => ({
|
|
483
464
|
account: walletAccount,
|
|
484
465
|
accountKeys,
|
|
@@ -514,12 +495,11 @@ function WalletUiClusterContextProvider({
|
|
|
514
495
|
storage.set(clusterId2);
|
|
515
496
|
}
|
|
516
497
|
};
|
|
517
|
-
return /* @__PURE__ */
|
|
498
|
+
return /* @__PURE__ */ React19__default.default.createElement(WalletUiClusterContext.Provider, { value }, render(value));
|
|
518
499
|
}
|
|
519
500
|
function WalletUiContextProvider({ children, size = "md" }) {
|
|
520
501
|
const { account, accountKeys, cluster, setAccount, wallet } = useWalletUiAccount();
|
|
521
502
|
const wallets = useWalletUiWallets();
|
|
522
|
-
const client = useWalletUiSolanaClient();
|
|
523
503
|
const connected = Boolean(wallet && wallet?.accounts.length > 0);
|
|
524
504
|
function connect3(account2) {
|
|
525
505
|
setAccount(account2);
|
|
@@ -536,7 +516,6 @@ function WalletUiContextProvider({ children, size = "md" }) {
|
|
|
536
516
|
const value = {
|
|
537
517
|
account,
|
|
538
518
|
accountKeys,
|
|
539
|
-
client,
|
|
540
519
|
cluster,
|
|
541
520
|
connect: connect3,
|
|
542
521
|
connected,
|
|
@@ -546,19 +525,7 @@ function WalletUiContextProvider({ children, size = "md" }) {
|
|
|
546
525
|
wallet,
|
|
547
526
|
wallets
|
|
548
527
|
};
|
|
549
|
-
return /* @__PURE__ */
|
|
550
|
-
}
|
|
551
|
-
function WalletUiSolanaClientContextProvider({
|
|
552
|
-
children,
|
|
553
|
-
urlOrMoniker
|
|
554
|
-
}) {
|
|
555
|
-
return /* @__PURE__ */ React20__default.default.createElement(
|
|
556
|
-
WalletUiSolanaClientContext.Provider,
|
|
557
|
-
{
|
|
558
|
-
value: React20.useMemo(() => gill.createSolanaClient({ urlOrMoniker }), [urlOrMoniker])
|
|
559
|
-
},
|
|
560
|
-
children
|
|
561
|
-
);
|
|
528
|
+
return /* @__PURE__ */ React19__default.default.createElement(WalletUiContext.Provider, { value }, children);
|
|
562
529
|
}
|
|
563
530
|
|
|
564
531
|
// src/wallet-ui.tsx
|
|
@@ -566,34 +533,34 @@ function createWalletUiConfig(props) {
|
|
|
566
533
|
return { ...props };
|
|
567
534
|
}
|
|
568
535
|
function WalletUi({ children, config: { accountStorage, clusters, clusterStorage, ...config } }) {
|
|
569
|
-
return /* @__PURE__ */
|
|
536
|
+
return /* @__PURE__ */ React19__default.default.createElement(React19__default.default.Fragment, null, /* @__PURE__ */ React19__default.default.createElement(
|
|
570
537
|
WalletUiClusterContextProvider,
|
|
571
538
|
{
|
|
572
539
|
clusters,
|
|
573
540
|
storage: clusterStorage,
|
|
574
541
|
render: ({ cluster }) => {
|
|
575
|
-
return /* @__PURE__ */
|
|
542
|
+
return /* @__PURE__ */ React19__default.default.createElement(WalletUiAccountContextProvider, { cluster, storage: accountStorage }, /* @__PURE__ */ React19__default.default.createElement(WalletUiContextProvider, { ...config }, children));
|
|
576
543
|
}
|
|
577
544
|
}
|
|
578
545
|
));
|
|
579
546
|
}
|
|
580
547
|
function WalletUiDropdown({ size = "md", ...props }) {
|
|
581
548
|
const { buttonProps, items, dropdown } = useWalletUiDropdown({ size });
|
|
582
|
-
return /* @__PURE__ */
|
|
549
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps }, dropdown, items, size });
|
|
583
550
|
}
|
|
584
551
|
|
|
585
552
|
// src/wallet-ui-account-guard.tsx
|
|
586
|
-
function WalletUiAccountGuard({ fallback = /* @__PURE__ */
|
|
553
|
+
function WalletUiAccountGuard({ fallback = /* @__PURE__ */ React19__default.default.createElement(WalletUiDropdown, null), render }) {
|
|
587
554
|
const { account, accountKeys, cluster, wallet } = useWalletUiAccount();
|
|
588
555
|
return account ? render({ account, accountKeys, cluster, wallet }) : fallback;
|
|
589
556
|
}
|
|
590
557
|
function WalletUiButton({ ...props }) {
|
|
591
|
-
return /* @__PURE__ */
|
|
558
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseButton, { ...props, label: "CLICK" });
|
|
592
559
|
}
|
|
593
560
|
function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
|
|
594
561
|
const dropdown = useBaseDropdown();
|
|
595
562
|
const { cluster, clusters, setCluster } = useWalletUiCluster();
|
|
596
|
-
return /* @__PURE__ */
|
|
563
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
597
564
|
BaseDropdown,
|
|
598
565
|
{
|
|
599
566
|
size,
|
|
@@ -613,7 +580,7 @@ function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
|
|
|
613
580
|
);
|
|
614
581
|
}
|
|
615
582
|
function WalletUiIconNoWallet({ size, ...props }) {
|
|
616
|
-
return /* @__PURE__ */
|
|
583
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseSvg, { size, sizes: { lg: 125, md: 100, sm: 75 }, fill: "none", viewBox: "0 0 97 96", ...props }, /* @__PURE__ */ React19__default.default.createElement("circle", { cx: "48.5", cy: "48", r: "48", fill: "url(#paint0_linear_880_5115)", fillOpacity: "0.1" }), /* @__PURE__ */ React19__default.default.createElement(
|
|
617
584
|
"circle",
|
|
618
585
|
{
|
|
619
586
|
cx: "48.5",
|
|
@@ -623,19 +590,19 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
623
590
|
strokeOpacity: "0.4",
|
|
624
591
|
strokeWidth: "2"
|
|
625
592
|
}
|
|
626
|
-
), /* @__PURE__ */
|
|
593
|
+
), /* @__PURE__ */ React19__default.default.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React19__default.default.createElement(
|
|
627
594
|
"path",
|
|
628
595
|
{
|
|
629
596
|
d: "M65.5769 28.1523H31.4231C27.6057 28.1523 24.5 31.258 24.5 35.0754V60.9215C24.5 64.7389 27.6057 67.8446 31.4231 67.8446H65.5769C69.3943 67.8446 72.5 64.7389 72.5 60.9215V35.0754C72.5 31.258 69.3943 28.1523 65.5769 28.1523ZM69.7308 52.1523H59.5769C57.2865 52.1523 55.4231 50.289 55.4231 47.9985C55.4231 45.708 57.2864 43.8446 59.5769 43.8446H69.7308V52.1523ZM69.7308 41.0754H59.5769C55.7595 41.0754 52.6539 44.1811 52.6539 47.9985C52.6539 51.8159 55.7595 54.9215 59.5769 54.9215H69.7308V60.9215C69.7308 63.2119 67.8674 65.0754 65.5769 65.0754H31.4231C29.1327 65.0754 27.2692 63.212 27.2692 60.9215V35.0754C27.2692 32.785 29.1326 30.9215 31.4231 30.9215H65.5769C67.8673 30.9215 69.7308 32.7849 69.7308 35.0754V41.0754Z",
|
|
630
597
|
fill: "url(#paint2_linear_880_5115)"
|
|
631
598
|
}
|
|
632
|
-
), /* @__PURE__ */
|
|
599
|
+
), /* @__PURE__ */ React19__default.default.createElement(
|
|
633
600
|
"path",
|
|
634
601
|
{
|
|
635
602
|
d: "M61.4231 46.6172H59.577C58.8123 46.6172 58.1924 47.2371 58.1924 48.0018C58.1924 48.7665 58.8123 49.3863 59.577 49.3863H61.4231C62.1878 49.3863 62.8077 48.7664 62.8077 48.0018C62.8077 47.2371 62.1878 46.6172 61.4231 46.6172Z",
|
|
636
603
|
fill: "url(#paint3_linear_880_5115)"
|
|
637
604
|
}
|
|
638
|
-
)), /* @__PURE__ */
|
|
605
|
+
)), /* @__PURE__ */ React19__default.default.createElement("defs", null, /* @__PURE__ */ React19__default.default.createElement(
|
|
639
606
|
"linearGradient",
|
|
640
607
|
{
|
|
641
608
|
id: "paint0_linear_880_5115",
|
|
@@ -645,13 +612,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
645
612
|
y2: "8.42498",
|
|
646
613
|
gradientUnits: "userSpaceOnUse"
|
|
647
614
|
},
|
|
648
|
-
/* @__PURE__ */
|
|
649
|
-
/* @__PURE__ */
|
|
650
|
-
/* @__PURE__ */
|
|
651
|
-
/* @__PURE__ */
|
|
652
|
-
/* @__PURE__ */
|
|
653
|
-
/* @__PURE__ */
|
|
654
|
-
), /* @__PURE__ */
|
|
615
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
616
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
617
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
618
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
619
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
620
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
621
|
+
), /* @__PURE__ */ React19__default.default.createElement(
|
|
655
622
|
"linearGradient",
|
|
656
623
|
{
|
|
657
624
|
id: "paint1_linear_880_5115",
|
|
@@ -661,13 +628,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
661
628
|
y2: "8.42498",
|
|
662
629
|
gradientUnits: "userSpaceOnUse"
|
|
663
630
|
},
|
|
664
|
-
/* @__PURE__ */
|
|
665
|
-
/* @__PURE__ */
|
|
666
|
-
/* @__PURE__ */
|
|
667
|
-
/* @__PURE__ */
|
|
668
|
-
/* @__PURE__ */
|
|
669
|
-
/* @__PURE__ */
|
|
670
|
-
), /* @__PURE__ */
|
|
631
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
632
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
633
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
634
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
635
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
636
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
637
|
+
), /* @__PURE__ */ React19__default.default.createElement(
|
|
671
638
|
"linearGradient",
|
|
672
639
|
{
|
|
673
640
|
id: "paint2_linear_880_5115",
|
|
@@ -677,13 +644,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
677
644
|
y2: "23.7879",
|
|
678
645
|
gradientUnits: "userSpaceOnUse"
|
|
679
646
|
},
|
|
680
|
-
/* @__PURE__ */
|
|
681
|
-
/* @__PURE__ */
|
|
682
|
-
/* @__PURE__ */
|
|
683
|
-
/* @__PURE__ */
|
|
684
|
-
/* @__PURE__ */
|
|
685
|
-
/* @__PURE__ */
|
|
686
|
-
), /* @__PURE__ */
|
|
647
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
648
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
649
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
650
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
651
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
652
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
653
|
+
), /* @__PURE__ */ React19__default.default.createElement(
|
|
687
654
|
"linearGradient",
|
|
688
655
|
{
|
|
689
656
|
id: "paint3_linear_880_5115",
|
|
@@ -693,22 +660,22 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
693
660
|
y2: "45.4453",
|
|
694
661
|
gradientUnits: "userSpaceOnUse"
|
|
695
662
|
},
|
|
696
|
-
/* @__PURE__ */
|
|
697
|
-
/* @__PURE__ */
|
|
698
|
-
/* @__PURE__ */
|
|
699
|
-
/* @__PURE__ */
|
|
700
|
-
/* @__PURE__ */
|
|
701
|
-
/* @__PURE__ */
|
|
702
|
-
), /* @__PURE__ */
|
|
663
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
664
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
665
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
666
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
667
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
668
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
669
|
+
), /* @__PURE__ */ React19__default.default.createElement("clipPath", { id: "clip0_880_5115" }, /* @__PURE__ */ React19__default.default.createElement("rect", { width: "48", height: "48", fill: "white", transform: "translate(24.5 24)" }))));
|
|
703
670
|
}
|
|
704
671
|
function WalletUiLabel({ className, size, wallet, ...props }) {
|
|
705
672
|
if (!wallet) {
|
|
706
673
|
return null;
|
|
707
674
|
}
|
|
708
|
-
return /* @__PURE__ */
|
|
675
|
+
return /* @__PURE__ */ React19__default.default.createElement("span", { "data-wu": "wallet-ui-label", className: `${size ?? "md"} ${className ?? ""}`, ...props }, wallet.name);
|
|
709
676
|
}
|
|
710
677
|
function WalletUiListButton({ className, select, size = "md", wallet, ...props }) {
|
|
711
|
-
const [pending, setPending] =
|
|
678
|
+
const [pending, setPending] = React19__default.default.useState(false);
|
|
712
679
|
function handleSelect() {
|
|
713
680
|
if (!select) {
|
|
714
681
|
return;
|
|
@@ -720,7 +687,7 @@ function WalletUiListButton({ className, select, size = "md", wallet, ...props }
|
|
|
720
687
|
}
|
|
721
688
|
void select(account).finally(() => setPending(false));
|
|
722
689
|
}
|
|
723
|
-
return /* @__PURE__ */
|
|
690
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
724
691
|
"button",
|
|
725
692
|
{
|
|
726
693
|
disabled: pending,
|
|
@@ -729,20 +696,20 @@ function WalletUiListButton({ className, select, size = "md", wallet, ...props }
|
|
|
729
696
|
onClick: handleSelect,
|
|
730
697
|
...props
|
|
731
698
|
},
|
|
732
|
-
/* @__PURE__ */
|
|
733
|
-
/* @__PURE__ */
|
|
699
|
+
/* @__PURE__ */ React19__default.default.createElement(WalletUiIcon, { wallet, size }),
|
|
700
|
+
/* @__PURE__ */ React19__default.default.createElement(WalletUiLabel, { wallet, size })
|
|
734
701
|
);
|
|
735
702
|
}
|
|
736
703
|
|
|
737
704
|
// src/wallet-ui-list.tsx
|
|
738
705
|
function WalletUiList({ className, select, size = "md", wallets, ...props }) {
|
|
739
|
-
return /* @__PURE__ */
|
|
706
|
+
return /* @__PURE__ */ React19__default.default.createElement("div", { "data-wu": "wallet-ui-list", className: `${size} ${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React19__default.default.createElement(WalletUiListButton, { key: wallet.name, select, size, wallet })));
|
|
740
707
|
}
|
|
741
708
|
function WalletUiModal({ size = "md", wallets, select, ...props }) {
|
|
742
|
-
return /* @__PURE__ */
|
|
709
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseModal, { description: "Connect a wallet on Solana to continue", size, ...props }, /* @__PURE__ */ React19__default.default.createElement(WalletUiList, { size, wallets, select }));
|
|
743
710
|
}
|
|
744
711
|
function WalletUiModalTrigger({ label = "Select Wallet", modal, ...props }) {
|
|
745
|
-
return /* @__PURE__ */
|
|
712
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
|
|
746
713
|
}
|
|
747
714
|
|
|
748
715
|
exports.BaseButton = BaseButton;
|
|
@@ -770,8 +737,6 @@ exports.WalletUiList = WalletUiList;
|
|
|
770
737
|
exports.WalletUiListButton = WalletUiListButton;
|
|
771
738
|
exports.WalletUiModal = WalletUiModal;
|
|
772
739
|
exports.WalletUiModalTrigger = WalletUiModalTrigger;
|
|
773
|
-
exports.WalletUiSolanaClientContext = WalletUiSolanaClientContext;
|
|
774
|
-
exports.WalletUiSolanaClientContextProvider = WalletUiSolanaClientContextProvider;
|
|
775
740
|
exports.createWalletUiConfig = createWalletUiConfig;
|
|
776
741
|
exports.ellipsify = ellipsify;
|
|
777
742
|
exports.useBaseDropdown = useBaseDropdown;
|
|
@@ -780,9 +745,7 @@ exports.useWalletUi = useWalletUi;
|
|
|
780
745
|
exports.useWalletUiAccount = useWalletUiAccount;
|
|
781
746
|
exports.useWalletUiCluster = useWalletUiCluster;
|
|
782
747
|
exports.useWalletUiDropdown = useWalletUiDropdown;
|
|
783
|
-
exports.useWalletUiSignAndSend = useWalletUiSignAndSend;
|
|
784
748
|
exports.useWalletUiSigner = useWalletUiSigner;
|
|
785
|
-
exports.useWalletUiSolanaClient = useWalletUiSolanaClient;
|
|
786
749
|
exports.useWalletUiWallet = useWalletUiWallet;
|
|
787
750
|
exports.useWalletUiWallets = useWalletUiWallets;
|
|
788
751
|
Object.keys(react$1).forEach(function (k) {
|