@wallet-ui/react 2.0.0-canary-20250827030244 → 2.0.0-canary-20250829062001
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 +121 -151
- package/dist/index.browser.cjs.map +1 -1
- package/dist/index.browser.mjs +102 -131
- package/dist/index.browser.mjs.map +1 -1
- package/dist/index.native.mjs +102 -131
- package/dist/index.native.mjs.map +1 -1
- package/dist/index.node.cjs +121 -151
- package/dist/index.node.cjs.map +1 -1
- package/dist/index.node.mjs +102 -131
- package/dist/index.node.mjs.map +1 -1
- package/dist/types/base-button.d.ts +1 -3
- package/dist/types/base-button.d.ts.map +1 -1
- package/dist/types/base-dropdown.d.ts +2 -6
- package/dist/types/base-dropdown.d.ts.map +1 -1
- package/dist/types/base-modal.d.ts +1 -3
- package/dist/types/base-modal.d.ts.map +1 -1
- package/dist/types/base-svg.d.ts +2 -8
- package/dist/types/base-svg.d.ts.map +1 -1
- package/dist/types/index.d.ts +0 -2
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/use-wallet-ui-dropdown.d.ts +1 -4
- package/dist/types/use-wallet-ui-dropdown.d.ts.map +1 -1
- package/dist/types/wallet-ui-cluster-dropdown.d.ts +1 -3
- package/dist/types/wallet-ui-cluster-dropdown.d.ts.map +1 -1
- package/dist/types/wallet-ui-context-provider.d.ts +1 -1
- package/dist/types/wallet-ui-context-provider.d.ts.map +1 -1
- package/dist/types/wallet-ui-context.d.ts +0 -4
- package/dist/types/wallet-ui-context.d.ts.map +1 -1
- package/dist/types/wallet-ui-dropdown.d.ts +1 -3
- package/dist/types/wallet-ui-dropdown.d.ts.map +1 -1
- package/dist/types/wallet-ui-icon-close.d.ts +1 -1
- package/dist/types/wallet-ui-icon-close.d.ts.map +1 -1
- package/dist/types/wallet-ui-icon-no-wallet.d.ts +1 -1
- package/dist/types/wallet-ui-icon-no-wallet.d.ts.map +1 -1
- package/dist/types/wallet-ui-icon.d.ts +1 -3
- package/dist/types/wallet-ui-icon.d.ts.map +1 -1
- package/dist/types/wallet-ui-label.d.ts +1 -3
- package/dist/types/wallet-ui-label.d.ts.map +1 -1
- package/dist/types/wallet-ui-list-button.d.ts +1 -3
- package/dist/types/wallet-ui-list-button.d.ts.map +1 -1
- package/dist/types/wallet-ui-list.d.ts +1 -3
- package/dist/types/wallet-ui-list.d.ts.map +1 -1
- package/dist/types/wallet-ui-modal.d.ts +1 -3
- package/dist/types/wallet-ui-modal.d.ts.map +1 -1
- package/package.json +2 -2
- package/dist/types/types/wallet-ui-size.d.ts +0 -2
- package/dist/types/types/wallet-ui-size.d.ts.map +0 -1
- package/dist/types/types/wallet-ui-svg.d.ts +0 -3
- package/dist/types/types/wallet-ui-svg.d.ts.map +0 -1
- package/dist/types/wallet-ui-button.d.ts +0 -8
- package/dist/types/wallet-ui-button.d.ts.map +0 -1
package/dist/index.node.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React18, { createContext, useContext, useEffect, useId, useMemo, useState } from 'react';
|
|
2
2
|
import { useConnect, useDisconnect, useWallets, uiWalletAccountsAreSame, uiWalletAccountBelongsToUiWallet, getUiWalletAccountStorageKey } from '@wallet-standard/react';
|
|
3
3
|
export * from '@wallet-standard/react';
|
|
4
4
|
import { Portal, useMachine, normalizeProps } from '@zag-js/react';
|
|
@@ -13,14 +13,14 @@ export * from '@solana/wallet-standard-features';
|
|
|
13
13
|
export * from '@wallet-standard/core';
|
|
14
14
|
|
|
15
15
|
// src/base-button.tsx
|
|
16
|
-
function BaseButton({ className, label, leftSection, onClick, rightSection,
|
|
17
|
-
return /* @__PURE__ */
|
|
16
|
+
function BaseButton({ className, label, leftSection, onClick, rightSection, ...props }) {
|
|
17
|
+
return /* @__PURE__ */ React18.createElement("button", { "data-wu": "base-button", className: `${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-button-right-section" }, rightSection) : null);
|
|
18
18
|
}
|
|
19
|
-
var WalletUiContext =
|
|
19
|
+
var WalletUiContext = React18.createContext({});
|
|
20
20
|
|
|
21
21
|
// src/use-wallet-ui.tsx
|
|
22
22
|
function useWalletUi() {
|
|
23
|
-
return
|
|
23
|
+
return React18.useContext(WalletUiContext);
|
|
24
24
|
}
|
|
25
25
|
var WalletUiAccountContext = createContext({});
|
|
26
26
|
|
|
@@ -54,20 +54,11 @@ function useWalletUiWallet({ wallet }) {
|
|
|
54
54
|
isDisconnecting
|
|
55
55
|
};
|
|
56
56
|
}
|
|
57
|
-
function WalletUiIcon({ className,
|
|
57
|
+
function WalletUiIcon({ className, wallet, ...props }) {
|
|
58
58
|
if (!wallet) {
|
|
59
59
|
return null;
|
|
60
60
|
}
|
|
61
|
-
return /* @__PURE__ */
|
|
62
|
-
"img",
|
|
63
|
-
{
|
|
64
|
-
"data-wu": "wallet-ui-icon",
|
|
65
|
-
src: wallet.icon,
|
|
66
|
-
alt: wallet.name,
|
|
67
|
-
className: `${size} ${className ?? ""}`,
|
|
68
|
-
...props
|
|
69
|
-
}
|
|
70
|
-
);
|
|
61
|
+
return /* @__PURE__ */ React18.createElement("img", { "data-wu": "wallet-ui-icon", src: wallet.icon, alt: wallet.name, className: className ?? "", ...props });
|
|
71
62
|
}
|
|
72
63
|
|
|
73
64
|
// src/base-dropdown.tsx
|
|
@@ -79,25 +70,23 @@ var BaseDropdownItemType = /* @__PURE__ */ ((BaseDropdownItemType2) => {
|
|
|
79
70
|
BaseDropdownItemType2["WalletNeeded"] = "WalletNeeded";
|
|
80
71
|
return BaseDropdownItemType2;
|
|
81
72
|
})(BaseDropdownItemType || {});
|
|
82
|
-
function BaseDropdown({ buttonProps, dropdown, items, showIndicator
|
|
73
|
+
function BaseDropdown({ buttonProps, dropdown, items, showIndicator }) {
|
|
83
74
|
const api = dropdown.api;
|
|
84
|
-
const trigger = /* @__PURE__ */
|
|
75
|
+
const trigger = /* @__PURE__ */ React18.createElement(
|
|
85
76
|
BaseButton,
|
|
86
77
|
{
|
|
87
78
|
...api.getTriggerProps(),
|
|
88
|
-
|
|
89
|
-
rightSection: showIndicator ? /* @__PURE__ */ React19.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React19.createElement(BaseDropdownChevronDown, { size: 12 })) : null,
|
|
79
|
+
rightSection: showIndicator ? /* @__PURE__ */ React18.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React18.createElement(BaseDropdownChevronDown, null)) : null,
|
|
90
80
|
...buttonProps
|
|
91
81
|
}
|
|
92
82
|
);
|
|
93
|
-
return /* @__PURE__ */
|
|
94
|
-
return /* @__PURE__ */
|
|
83
|
+
return /* @__PURE__ */ React18.createElement("div", { "data-wu": "base-dropdown" }, trigger, /* @__PURE__ */ React18.createElement("div", { ...api.getPositionerProps(), "data-wu": "base-dropdown-wrapper" }, /* @__PURE__ */ React18.createElement("div", { ...api.getContentProps(), "data-wu": "base-dropdown-list", "data-part": "content" }, items.map((item) => {
|
|
84
|
+
return /* @__PURE__ */ React18.createElement(
|
|
95
85
|
BaseDropdownItem,
|
|
96
86
|
{
|
|
97
87
|
...api.getItemProps({ value: item.value }),
|
|
98
88
|
key: item.value,
|
|
99
89
|
item,
|
|
100
|
-
size,
|
|
101
90
|
afterClick: () => {
|
|
102
91
|
if (item.disabled) {
|
|
103
92
|
return;
|
|
@@ -110,37 +99,28 @@ function BaseDropdown({ buttonProps, dropdown, items, showIndicator, size = "md"
|
|
|
110
99
|
);
|
|
111
100
|
}))));
|
|
112
101
|
}
|
|
113
|
-
function BaseDropdownItem({ afterClick, item
|
|
102
|
+
function BaseDropdownItem({ afterClick, item }) {
|
|
114
103
|
if (!item.wallet) {
|
|
115
|
-
return /* @__PURE__ */
|
|
104
|
+
return /* @__PURE__ */ React18.createElement(BaseDropdownItemRender, { afterClick, item });
|
|
116
105
|
}
|
|
117
106
|
switch (item.type) {
|
|
118
107
|
case "Item" /* Item */:
|
|
119
|
-
return /* @__PURE__ */
|
|
108
|
+
return /* @__PURE__ */ React18.createElement(BaseDropdownItemRender, { afterClick, item });
|
|
120
109
|
case "WalletConnect" /* WalletConnect */:
|
|
121
|
-
return /* @__PURE__ */
|
|
110
|
+
return /* @__PURE__ */ React18.createElement(BaseDropdownItemWalletConnect, { afterClick, item, wallet: item.wallet });
|
|
122
111
|
case "WalletCopy" /* WalletCopy */:
|
|
123
|
-
return /* @__PURE__ */
|
|
112
|
+
return /* @__PURE__ */ React18.createElement(BaseDropdownItemRender, { afterClick, item });
|
|
124
113
|
case "WalletDisconnect" /* WalletDisconnect */:
|
|
125
|
-
return /* @__PURE__ */
|
|
126
|
-
BaseDropdownItemWalletDisconnect,
|
|
127
|
-
{
|
|
128
|
-
afterClick,
|
|
129
|
-
item,
|
|
130
|
-
size,
|
|
131
|
-
wallet: item.wallet
|
|
132
|
-
}
|
|
133
|
-
);
|
|
114
|
+
return /* @__PURE__ */ React18.createElement(BaseDropdownItemWalletDisconnect, { afterClick, item, wallet: item.wallet });
|
|
134
115
|
}
|
|
135
116
|
}
|
|
136
117
|
function BaseDropdownItemWalletConnect({
|
|
137
118
|
afterClick,
|
|
138
119
|
item,
|
|
139
|
-
size,
|
|
140
120
|
wallet
|
|
141
121
|
}) {
|
|
142
122
|
const { connect: connect3 } = useWalletUiWallet({ wallet });
|
|
143
|
-
return /* @__PURE__ */
|
|
123
|
+
return /* @__PURE__ */ React18.createElement(
|
|
144
124
|
BaseDropdownItemRender,
|
|
145
125
|
{
|
|
146
126
|
afterClick,
|
|
@@ -150,20 +130,18 @@ function BaseDropdownItemWalletConnect({
|
|
|
150
130
|
await connect3();
|
|
151
131
|
return await item.handler();
|
|
152
132
|
},
|
|
153
|
-
leftSection: wallet ? /* @__PURE__ */
|
|
154
|
-
}
|
|
155
|
-
size
|
|
133
|
+
leftSection: wallet ? /* @__PURE__ */ React18.createElement(WalletUiIcon, { wallet }) : void 0
|
|
134
|
+
}
|
|
156
135
|
}
|
|
157
136
|
);
|
|
158
137
|
}
|
|
159
138
|
function BaseDropdownItemWalletDisconnect({
|
|
160
139
|
afterClick,
|
|
161
140
|
item,
|
|
162
|
-
size,
|
|
163
141
|
wallet
|
|
164
142
|
}) {
|
|
165
143
|
const { disconnect } = useWalletUiWallet({ wallet });
|
|
166
|
-
return /* @__PURE__ */
|
|
144
|
+
return /* @__PURE__ */ React18.createElement(
|
|
167
145
|
BaseDropdownItemRender,
|
|
168
146
|
{
|
|
169
147
|
afterClick,
|
|
@@ -173,12 +151,11 @@ function BaseDropdownItemWalletDisconnect({
|
|
|
173
151
|
await disconnect();
|
|
174
152
|
return await item.handler();
|
|
175
153
|
}
|
|
176
|
-
}
|
|
177
|
-
size
|
|
154
|
+
}
|
|
178
155
|
}
|
|
179
156
|
);
|
|
180
157
|
}
|
|
181
|
-
function BaseDropdownItemRender({ afterClick, item
|
|
158
|
+
function BaseDropdownItemRender({ afterClick, item }) {
|
|
182
159
|
function onClick() {
|
|
183
160
|
if (item.disabled) {
|
|
184
161
|
return;
|
|
@@ -187,15 +164,15 @@ function BaseDropdownItemRender({ afterClick, item, size }) {
|
|
|
187
164
|
afterClick();
|
|
188
165
|
});
|
|
189
166
|
}
|
|
190
|
-
return /* @__PURE__ */
|
|
167
|
+
return /* @__PURE__ */ React18.createElement("button", { type: "button", "data-wu": "base-dropdown-item", "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-dropdown-item-right-section" }, item.rightSection) : null);
|
|
191
168
|
}
|
|
192
169
|
function BaseDropdownChevronDown(props) {
|
|
193
|
-
return /* @__PURE__ */
|
|
170
|
+
return /* @__PURE__ */ React18.createElement(
|
|
194
171
|
"svg",
|
|
195
172
|
{
|
|
196
173
|
xmlns: "http://www.w3.org/2000/svg",
|
|
197
|
-
width:
|
|
198
|
-
height:
|
|
174
|
+
width: 12,
|
|
175
|
+
height: 12,
|
|
199
176
|
viewBox: "0 0 24 24",
|
|
200
177
|
fill: "none",
|
|
201
178
|
stroke: "currentColor",
|
|
@@ -204,35 +181,34 @@ function BaseDropdownChevronDown(props) {
|
|
|
204
181
|
strokeLinejoin: "round",
|
|
205
182
|
...props
|
|
206
183
|
},
|
|
207
|
-
/* @__PURE__ */
|
|
184
|
+
/* @__PURE__ */ React18.createElement("path", { d: "m6 9 6 6 6-6" })
|
|
208
185
|
);
|
|
209
186
|
}
|
|
210
|
-
function BaseSvg({
|
|
211
|
-
|
|
212
|
-
return /* @__PURE__ */ React19.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, ...props }, props.children);
|
|
187
|
+
function BaseSvg({ ...props }) {
|
|
188
|
+
return /* @__PURE__ */ React18.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", ...props }, props.children);
|
|
213
189
|
}
|
|
214
190
|
|
|
215
191
|
// src/wallet-ui-icon-close.tsx
|
|
216
|
-
function WalletUiIconClose({
|
|
217
|
-
return /* @__PURE__ */
|
|
192
|
+
function WalletUiIconClose({ ...props }) {
|
|
193
|
+
return /* @__PURE__ */ React18.createElement(
|
|
218
194
|
BaseSvg,
|
|
219
195
|
{
|
|
220
|
-
size,
|
|
221
|
-
sizes: { lg: 16, md: 12, sm: 8 },
|
|
222
196
|
fill: "none",
|
|
223
197
|
stroke: "currentColor",
|
|
224
198
|
strokeWidth: "3",
|
|
199
|
+
width: 12,
|
|
200
|
+
height: 12,
|
|
225
201
|
viewBox: "0 0 14 14",
|
|
226
202
|
...props
|
|
227
203
|
},
|
|
228
|
-
/* @__PURE__ */
|
|
204
|
+
/* @__PURE__ */ React18.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" })
|
|
229
205
|
);
|
|
230
206
|
}
|
|
231
207
|
|
|
232
208
|
// src/base-modal.tsx
|
|
233
|
-
function BaseModal({ modal, buttonLabel, buttonProps = {},
|
|
209
|
+
function BaseModal({ modal, buttonLabel, buttonProps = {}, ...props }) {
|
|
234
210
|
const api = modal.api;
|
|
235
|
-
return /* @__PURE__ */
|
|
211
|
+
return /* @__PURE__ */ React18.createElement(React18.Fragment, null, buttonLabel ? /* @__PURE__ */ React18.createElement(BaseButton, { label: buttonLabel, ...buttonProps, ...api.getTriggerProps() }) : null, api.open && /* @__PURE__ */ React18.createElement(Portal, null, /* @__PURE__ */ React18.createElement("div", { ...api.getBackdropProps() }), /* @__PURE__ */ React18.createElement("div", { ...api.getPositionerProps() }, /* @__PURE__ */ React18.createElement("div", { ...api.getContentProps() }, /* @__PURE__ */ React18.createElement("header", null, /* @__PURE__ */ React18.createElement("button", { ...api.getCloseTriggerProps() }, /* @__PURE__ */ React18.createElement(WalletUiIconClose, null))), props.description ? /* @__PURE__ */ React18.createElement("p", { ...api.getDescriptionProps() }, props.description) : null, /* @__PURE__ */ React18.createElement("main", null, props.children)))));
|
|
236
212
|
}
|
|
237
213
|
function useBaseDropdown() {
|
|
238
214
|
const service = useMachine(menu.machine, { id: useId() });
|
|
@@ -287,7 +263,7 @@ function getDropdownItemsWallets({
|
|
|
287
263
|
}
|
|
288
264
|
];
|
|
289
265
|
}
|
|
290
|
-
function useWalletUiDropdown(
|
|
266
|
+
function useWalletUiDropdown() {
|
|
291
267
|
const dropdown = useBaseDropdown();
|
|
292
268
|
const { account, connect: connect3, copy, disconnect, connected, wallet, wallets } = useWalletUi();
|
|
293
269
|
const itemsWallets = useMemo(() => getDropdownItemsWallets({ connect: connect3, wallets }), [wallets, connect3]);
|
|
@@ -322,9 +298,9 @@ function useWalletUiDropdown({ size = "md" } = {}) {
|
|
|
322
298
|
const buttonProps = useMemo(() => {
|
|
323
299
|
return {
|
|
324
300
|
label: connected ? (account ? ellipsify(account.address) : wallet?.name) ?? "Connected" : "Select Wallet",
|
|
325
|
-
leftSection: connected ? /* @__PURE__ */
|
|
301
|
+
leftSection: connected ? /* @__PURE__ */ React18.createElement(WalletUiIcon, { wallet }) : void 0
|
|
326
302
|
};
|
|
327
|
-
}, [account, connected,
|
|
303
|
+
}, [account, connected, wallet]);
|
|
328
304
|
return {
|
|
329
305
|
buttonProps,
|
|
330
306
|
connected,
|
|
@@ -433,7 +409,7 @@ function WalletUiAccountContextProvider({
|
|
|
433
409
|
}
|
|
434
410
|
return [cluster.id, getUiWalletAccountStorageKey(account)].filter(Boolean);
|
|
435
411
|
}, [account, cluster.id]);
|
|
436
|
-
return /* @__PURE__ */
|
|
412
|
+
return /* @__PURE__ */ React18.createElement(
|
|
437
413
|
WalletUiAccountContext.Provider,
|
|
438
414
|
{
|
|
439
415
|
value: useMemo(
|
|
@@ -472,9 +448,9 @@ function WalletUiClusterContextProvider({
|
|
|
472
448
|
storage.set(clusterId2);
|
|
473
449
|
}
|
|
474
450
|
};
|
|
475
|
-
return /* @__PURE__ */
|
|
451
|
+
return /* @__PURE__ */ React18.createElement(WalletUiClusterContext.Provider, { value }, render(value));
|
|
476
452
|
}
|
|
477
|
-
function WalletUiContextProvider({ children
|
|
453
|
+
function WalletUiContextProvider({ children }) {
|
|
478
454
|
const { account, accountKeys, cluster, setAccount, wallet } = useWalletUiAccount();
|
|
479
455
|
const wallets = useWalletUiWallets();
|
|
480
456
|
const connected = Boolean(wallet && wallet?.accounts.length > 0);
|
|
@@ -498,11 +474,10 @@ function WalletUiContextProvider({ children, size = "md" }) {
|
|
|
498
474
|
connected,
|
|
499
475
|
copy,
|
|
500
476
|
disconnect,
|
|
501
|
-
size,
|
|
502
477
|
wallet,
|
|
503
478
|
wallets
|
|
504
479
|
};
|
|
505
|
-
return /* @__PURE__ */
|
|
480
|
+
return /* @__PURE__ */ React18.createElement(WalletUiContext.Provider, { value }, children);
|
|
506
481
|
}
|
|
507
482
|
|
|
508
483
|
// src/wallet-ui.tsx
|
|
@@ -510,38 +485,34 @@ function createWalletUiConfig(props) {
|
|
|
510
485
|
return { ...props };
|
|
511
486
|
}
|
|
512
487
|
function WalletUi({ children, config: { accountStorage, clusters, clusterStorage, ...config } }) {
|
|
513
|
-
return /* @__PURE__ */
|
|
488
|
+
return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
|
|
514
489
|
WalletUiClusterContextProvider,
|
|
515
490
|
{
|
|
516
491
|
clusters,
|
|
517
492
|
storage: clusterStorage,
|
|
518
493
|
render: ({ cluster }) => {
|
|
519
|
-
return /* @__PURE__ */
|
|
494
|
+
return /* @__PURE__ */ React18.createElement(WalletUiAccountContextProvider, { cluster, storage: accountStorage }, /* @__PURE__ */ React18.createElement(WalletUiContextProvider, { ...config }, children));
|
|
520
495
|
}
|
|
521
496
|
}
|
|
522
497
|
));
|
|
523
498
|
}
|
|
524
|
-
function WalletUiDropdown({
|
|
525
|
-
const { buttonProps, items, dropdown } = useWalletUiDropdown(
|
|
526
|
-
return /* @__PURE__ */
|
|
499
|
+
function WalletUiDropdown({ ...props }) {
|
|
500
|
+
const { buttonProps, items, dropdown } = useWalletUiDropdown();
|
|
501
|
+
return /* @__PURE__ */ React18.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps }, dropdown, items });
|
|
527
502
|
}
|
|
528
503
|
|
|
529
504
|
// src/wallet-ui-account-guard.tsx
|
|
530
|
-
function WalletUiAccountGuard({ fallback = /* @__PURE__ */
|
|
505
|
+
function WalletUiAccountGuard({ fallback = /* @__PURE__ */ React18.createElement(WalletUiDropdown, null), render }) {
|
|
531
506
|
const { account, accountKeys, cluster, wallet } = useWalletUiAccount();
|
|
532
507
|
return account ? render({ account, accountKeys, cluster, wallet }) : fallback;
|
|
533
508
|
}
|
|
534
|
-
function
|
|
535
|
-
return /* @__PURE__ */ React19.createElement(BaseButton, { ...props, label: "CLICK" });
|
|
536
|
-
}
|
|
537
|
-
function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
|
|
509
|
+
function WalletUiClusterDropdown({ buttonProps, ...props }) {
|
|
538
510
|
const dropdown = useBaseDropdown();
|
|
539
511
|
const { cluster, clusters, setCluster } = useWalletUiCluster();
|
|
540
|
-
return /* @__PURE__ */
|
|
512
|
+
return /* @__PURE__ */ React18.createElement(
|
|
541
513
|
BaseDropdown,
|
|
542
514
|
{
|
|
543
|
-
|
|
544
|
-
buttonProps: { ...buttonProps, label: cluster.label, size },
|
|
515
|
+
buttonProps: { ...buttonProps, label: cluster.label },
|
|
545
516
|
items: clusters.map((cluster2) => ({
|
|
546
517
|
handler: async () => {
|
|
547
518
|
setCluster(cluster2.id);
|
|
@@ -556,8 +527,8 @@ function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
|
|
|
556
527
|
}
|
|
557
528
|
);
|
|
558
529
|
}
|
|
559
|
-
function WalletUiIconNoWallet({
|
|
560
|
-
return /* @__PURE__ */
|
|
530
|
+
function WalletUiIconNoWallet({ ...props }) {
|
|
531
|
+
return /* @__PURE__ */ React18.createElement(BaseSvg, { fill: "none", height: 100, width: 100, viewBox: "0 0 97 96", ...props }, /* @__PURE__ */ React18.createElement("circle", { cx: "48.5", cy: "48", r: "48", fill: "url(#paint0_linear_880_5115)", fillOpacity: "0.1" }), /* @__PURE__ */ React18.createElement(
|
|
561
532
|
"circle",
|
|
562
533
|
{
|
|
563
534
|
cx: "48.5",
|
|
@@ -567,19 +538,19 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
567
538
|
strokeOpacity: "0.4",
|
|
568
539
|
strokeWidth: "2"
|
|
569
540
|
}
|
|
570
|
-
), /* @__PURE__ */
|
|
541
|
+
), /* @__PURE__ */ React18.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React18.createElement(
|
|
571
542
|
"path",
|
|
572
543
|
{
|
|
573
544
|
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",
|
|
574
545
|
fill: "url(#paint2_linear_880_5115)"
|
|
575
546
|
}
|
|
576
|
-
), /* @__PURE__ */
|
|
547
|
+
), /* @__PURE__ */ React18.createElement(
|
|
577
548
|
"path",
|
|
578
549
|
{
|
|
579
550
|
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",
|
|
580
551
|
fill: "url(#paint3_linear_880_5115)"
|
|
581
552
|
}
|
|
582
|
-
)), /* @__PURE__ */
|
|
553
|
+
)), /* @__PURE__ */ React18.createElement("defs", null, /* @__PURE__ */ React18.createElement(
|
|
583
554
|
"linearGradient",
|
|
584
555
|
{
|
|
585
556
|
id: "paint0_linear_880_5115",
|
|
@@ -589,13 +560,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
589
560
|
y2: "8.42498",
|
|
590
561
|
gradientUnits: "userSpaceOnUse"
|
|
591
562
|
},
|
|
592
|
-
/* @__PURE__ */
|
|
593
|
-
/* @__PURE__ */
|
|
594
|
-
/* @__PURE__ */
|
|
595
|
-
/* @__PURE__ */
|
|
596
|
-
/* @__PURE__ */
|
|
597
|
-
/* @__PURE__ */
|
|
598
|
-
), /* @__PURE__ */
|
|
563
|
+
/* @__PURE__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
|
|
564
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
565
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
566
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
567
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
568
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
569
|
+
), /* @__PURE__ */ React18.createElement(
|
|
599
570
|
"linearGradient",
|
|
600
571
|
{
|
|
601
572
|
id: "paint1_linear_880_5115",
|
|
@@ -605,13 +576,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
605
576
|
y2: "8.42498",
|
|
606
577
|
gradientUnits: "userSpaceOnUse"
|
|
607
578
|
},
|
|
608
|
-
/* @__PURE__ */
|
|
609
|
-
/* @__PURE__ */
|
|
610
|
-
/* @__PURE__ */
|
|
611
|
-
/* @__PURE__ */
|
|
612
|
-
/* @__PURE__ */
|
|
613
|
-
/* @__PURE__ */
|
|
614
|
-
), /* @__PURE__ */
|
|
579
|
+
/* @__PURE__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
|
|
580
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
581
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
582
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
583
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
584
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
585
|
+
), /* @__PURE__ */ React18.createElement(
|
|
615
586
|
"linearGradient",
|
|
616
587
|
{
|
|
617
588
|
id: "paint2_linear_880_5115",
|
|
@@ -621,13 +592,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
621
592
|
y2: "23.7879",
|
|
622
593
|
gradientUnits: "userSpaceOnUse"
|
|
623
594
|
},
|
|
624
|
-
/* @__PURE__ */
|
|
625
|
-
/* @__PURE__ */
|
|
626
|
-
/* @__PURE__ */
|
|
627
|
-
/* @__PURE__ */
|
|
628
|
-
/* @__PURE__ */
|
|
629
|
-
/* @__PURE__ */
|
|
630
|
-
), /* @__PURE__ */
|
|
595
|
+
/* @__PURE__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
|
|
596
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
597
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
598
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
599
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
600
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
601
|
+
), /* @__PURE__ */ React18.createElement(
|
|
631
602
|
"linearGradient",
|
|
632
603
|
{
|
|
633
604
|
id: "paint3_linear_880_5115",
|
|
@@ -637,22 +608,22 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
637
608
|
y2: "45.4453",
|
|
638
609
|
gradientUnits: "userSpaceOnUse"
|
|
639
610
|
},
|
|
640
|
-
/* @__PURE__ */
|
|
641
|
-
/* @__PURE__ */
|
|
642
|
-
/* @__PURE__ */
|
|
643
|
-
/* @__PURE__ */
|
|
644
|
-
/* @__PURE__ */
|
|
645
|
-
/* @__PURE__ */
|
|
646
|
-
), /* @__PURE__ */
|
|
647
|
-
}
|
|
648
|
-
function WalletUiLabel({ className,
|
|
611
|
+
/* @__PURE__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
|
|
612
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
613
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
614
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
615
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
616
|
+
/* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
617
|
+
), /* @__PURE__ */ React18.createElement("clipPath", { id: "clip0_880_5115" }, /* @__PURE__ */ React18.createElement("rect", { width: "48", height: "48", fill: "white", transform: "translate(24.5 24)" }))));
|
|
618
|
+
}
|
|
619
|
+
function WalletUiLabel({ className, wallet, ...props }) {
|
|
649
620
|
if (!wallet) {
|
|
650
621
|
return null;
|
|
651
622
|
}
|
|
652
|
-
return /* @__PURE__ */
|
|
623
|
+
return /* @__PURE__ */ React18.createElement("span", { "data-wu": "wallet-ui-label", className: `${className ?? ""}`, ...props }, wallet.name);
|
|
653
624
|
}
|
|
654
|
-
function WalletUiListButton({ className, select,
|
|
655
|
-
const [pending, setPending] =
|
|
625
|
+
function WalletUiListButton({ className, select, wallet, ...props }) {
|
|
626
|
+
const [pending, setPending] = React18.useState(false);
|
|
656
627
|
function handleSelect() {
|
|
657
628
|
if (!select) {
|
|
658
629
|
return;
|
|
@@ -664,31 +635,31 @@ function WalletUiListButton({ className, select, size = "md", wallet, ...props }
|
|
|
664
635
|
}
|
|
665
636
|
void select(account).finally(() => setPending(false));
|
|
666
637
|
}
|
|
667
|
-
return /* @__PURE__ */
|
|
638
|
+
return /* @__PURE__ */ React18.createElement(
|
|
668
639
|
"button",
|
|
669
640
|
{
|
|
670
641
|
disabled: pending,
|
|
671
642
|
"data-wu": "wallet-ui-list-button",
|
|
672
|
-
className: `${
|
|
643
|
+
className: `${pending ? "pending" : ""} ${className ?? ""}`,
|
|
673
644
|
onClick: handleSelect,
|
|
674
645
|
...props
|
|
675
646
|
},
|
|
676
|
-
/* @__PURE__ */
|
|
677
|
-
/* @__PURE__ */
|
|
647
|
+
/* @__PURE__ */ React18.createElement(WalletUiIcon, { wallet }),
|
|
648
|
+
/* @__PURE__ */ React18.createElement(WalletUiLabel, { wallet })
|
|
678
649
|
);
|
|
679
650
|
}
|
|
680
651
|
|
|
681
652
|
// src/wallet-ui-list.tsx
|
|
682
|
-
function WalletUiList({ className, select,
|
|
683
|
-
return /* @__PURE__ */
|
|
653
|
+
function WalletUiList({ className, select, wallets, ...props }) {
|
|
654
|
+
return /* @__PURE__ */ React18.createElement("div", { "data-wu": "wallet-ui-list", className: `${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React18.createElement(WalletUiListButton, { key: wallet.name, select, wallet })));
|
|
684
655
|
}
|
|
685
|
-
function WalletUiModal({
|
|
686
|
-
return /* @__PURE__ */
|
|
656
|
+
function WalletUiModal({ wallets, select, ...props }) {
|
|
657
|
+
return /* @__PURE__ */ React18.createElement(BaseModal, { description: "Connect a wallet on Solana to continue", ...props }, /* @__PURE__ */ React18.createElement(WalletUiList, { wallets, select }));
|
|
687
658
|
}
|
|
688
659
|
function WalletUiModalTrigger({ label = "Select Wallet", modal, ...props }) {
|
|
689
|
-
return /* @__PURE__ */
|
|
660
|
+
return /* @__PURE__ */ React18.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
|
|
690
661
|
}
|
|
691
662
|
|
|
692
|
-
export { BaseButton, BaseDropdown, BaseDropdownChevronDown, BaseDropdownItemType, BaseModal, BaseSvg, WalletUi, WalletUiAccountContext, WalletUiAccountContextProvider, WalletUiAccountGuard,
|
|
663
|
+
export { BaseButton, BaseDropdown, BaseDropdownChevronDown, BaseDropdownItemType, BaseModal, BaseSvg, WalletUi, WalletUiAccountContext, WalletUiAccountContextProvider, WalletUiAccountGuard, WalletUiClusterContext, WalletUiClusterContextProvider, WalletUiClusterDropdown, WalletUiContext, WalletUiContextProvider, WalletUiDropdown, WalletUiIcon, WalletUiIconClose, WalletUiIconNoWallet, WalletUiLabel, WalletUiList, WalletUiListButton, WalletUiModal, WalletUiModalTrigger, createWalletUiConfig, ellipsify, useBaseDropdown, useBaseModal, useWalletUi, useWalletUiAccount, useWalletUiCluster, useWalletUiDropdown, useWalletUiSigner, useWalletUiWallet, useWalletUiWallets };
|
|
693
664
|
//# sourceMappingURL=index.node.mjs.map
|
|
694
665
|
//# sourceMappingURL=index.node.mjs.map
|