@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.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React18 = 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');
|
|
@@ -31,25 +31,25 @@ function _interopNamespace(e) {
|
|
|
31
31
|
return Object.freeze(n);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
var
|
|
34
|
+
var React18__default = /*#__PURE__*/_interopDefault(React18);
|
|
35
35
|
var menu__namespace = /*#__PURE__*/_interopNamespace(menu);
|
|
36
36
|
var dialog__namespace = /*#__PURE__*/_interopNamespace(dialog);
|
|
37
37
|
|
|
38
38
|
// src/base-button.tsx
|
|
39
|
-
function BaseButton({ className, label, leftSection, onClick, rightSection,
|
|
40
|
-
return /* @__PURE__ */
|
|
39
|
+
function BaseButton({ className, label, leftSection, onClick, rightSection, ...props }) {
|
|
40
|
+
return /* @__PURE__ */ React18__default.default.createElement("button", { "data-wu": "base-button", className: `${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React18__default.default.createElement("span", { "data-wu": "base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React18__default.default.createElement("span", { "data-wu": "base-button-right-section" }, rightSection) : null);
|
|
41
41
|
}
|
|
42
|
-
var WalletUiContext =
|
|
42
|
+
var WalletUiContext = React18__default.default.createContext({});
|
|
43
43
|
|
|
44
44
|
// src/use-wallet-ui.tsx
|
|
45
45
|
function useWalletUi() {
|
|
46
|
-
return
|
|
46
|
+
return React18__default.default.useContext(WalletUiContext);
|
|
47
47
|
}
|
|
48
|
-
var WalletUiAccountContext =
|
|
48
|
+
var WalletUiAccountContext = React18.createContext({});
|
|
49
49
|
|
|
50
50
|
// src/use-wallet-ui-account.tsx
|
|
51
51
|
function useWalletUiAccount() {
|
|
52
|
-
return
|
|
52
|
+
return React18.useContext(WalletUiAccountContext);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
// src/use-wallet-ui-wallet.tsx
|
|
@@ -58,7 +58,7 @@ function useWalletUiWallet({ wallet }) {
|
|
|
58
58
|
const { setAccount } = useWalletUiAccount();
|
|
59
59
|
const [isConnecting, connect3] = react$1.useConnect(wallet);
|
|
60
60
|
const [isDisconnecting, disconnect] = react$1.useDisconnect(wallet);
|
|
61
|
-
|
|
61
|
+
React18.useEffect(() => {
|
|
62
62
|
}, [isDisconnecting]);
|
|
63
63
|
return {
|
|
64
64
|
connect: async () => {
|
|
@@ -77,20 +77,11 @@ function useWalletUiWallet({ wallet }) {
|
|
|
77
77
|
isDisconnecting
|
|
78
78
|
};
|
|
79
79
|
}
|
|
80
|
-
function WalletUiIcon({ className,
|
|
80
|
+
function WalletUiIcon({ className, wallet, ...props }) {
|
|
81
81
|
if (!wallet) {
|
|
82
82
|
return null;
|
|
83
83
|
}
|
|
84
|
-
return /* @__PURE__ */
|
|
85
|
-
"img",
|
|
86
|
-
{
|
|
87
|
-
"data-wu": "wallet-ui-icon",
|
|
88
|
-
src: wallet.icon,
|
|
89
|
-
alt: wallet.name,
|
|
90
|
-
className: `${size} ${className ?? ""}`,
|
|
91
|
-
...props
|
|
92
|
-
}
|
|
93
|
-
);
|
|
84
|
+
return /* @__PURE__ */ React18__default.default.createElement("img", { "data-wu": "wallet-ui-icon", src: wallet.icon, alt: wallet.name, className: className ?? "", ...props });
|
|
94
85
|
}
|
|
95
86
|
|
|
96
87
|
// src/base-dropdown.tsx
|
|
@@ -102,25 +93,23 @@ var BaseDropdownItemType = /* @__PURE__ */ ((BaseDropdownItemType2) => {
|
|
|
102
93
|
BaseDropdownItemType2["WalletNeeded"] = "WalletNeeded";
|
|
103
94
|
return BaseDropdownItemType2;
|
|
104
95
|
})(BaseDropdownItemType || {});
|
|
105
|
-
function BaseDropdown({ buttonProps, dropdown, items, showIndicator
|
|
96
|
+
function BaseDropdown({ buttonProps, dropdown, items, showIndicator }) {
|
|
106
97
|
const api = dropdown.api;
|
|
107
|
-
const trigger = /* @__PURE__ */
|
|
98
|
+
const trigger = /* @__PURE__ */ React18__default.default.createElement(
|
|
108
99
|
BaseButton,
|
|
109
100
|
{
|
|
110
101
|
...api.getTriggerProps(),
|
|
111
|
-
|
|
112
|
-
rightSection: showIndicator ? /* @__PURE__ */ React19__default.default.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React19__default.default.createElement(BaseDropdownChevronDown, { size: 12 })) : null,
|
|
102
|
+
rightSection: showIndicator ? /* @__PURE__ */ React18__default.default.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React18__default.default.createElement(BaseDropdownChevronDown, null)) : null,
|
|
113
103
|
...buttonProps
|
|
114
104
|
}
|
|
115
105
|
);
|
|
116
|
-
return /* @__PURE__ */
|
|
117
|
-
return /* @__PURE__ */
|
|
106
|
+
return /* @__PURE__ */ React18__default.default.createElement("div", { "data-wu": "base-dropdown" }, trigger, /* @__PURE__ */ React18__default.default.createElement("div", { ...api.getPositionerProps(), "data-wu": "base-dropdown-wrapper" }, /* @__PURE__ */ React18__default.default.createElement("div", { ...api.getContentProps(), "data-wu": "base-dropdown-list", "data-part": "content" }, items.map((item) => {
|
|
107
|
+
return /* @__PURE__ */ React18__default.default.createElement(
|
|
118
108
|
BaseDropdownItem,
|
|
119
109
|
{
|
|
120
110
|
...api.getItemProps({ value: item.value }),
|
|
121
111
|
key: item.value,
|
|
122
112
|
item,
|
|
123
|
-
size,
|
|
124
113
|
afterClick: () => {
|
|
125
114
|
if (item.disabled) {
|
|
126
115
|
return;
|
|
@@ -133,37 +122,28 @@ function BaseDropdown({ buttonProps, dropdown, items, showIndicator, size = "md"
|
|
|
133
122
|
);
|
|
134
123
|
}))));
|
|
135
124
|
}
|
|
136
|
-
function BaseDropdownItem({ afterClick, item
|
|
125
|
+
function BaseDropdownItem({ afterClick, item }) {
|
|
137
126
|
if (!item.wallet) {
|
|
138
|
-
return /* @__PURE__ */
|
|
127
|
+
return /* @__PURE__ */ React18__default.default.createElement(BaseDropdownItemRender, { afterClick, item });
|
|
139
128
|
}
|
|
140
129
|
switch (item.type) {
|
|
141
130
|
case "Item" /* Item */:
|
|
142
|
-
return /* @__PURE__ */
|
|
131
|
+
return /* @__PURE__ */ React18__default.default.createElement(BaseDropdownItemRender, { afterClick, item });
|
|
143
132
|
case "WalletConnect" /* WalletConnect */:
|
|
144
|
-
return /* @__PURE__ */
|
|
133
|
+
return /* @__PURE__ */ React18__default.default.createElement(BaseDropdownItemWalletConnect, { afterClick, item, wallet: item.wallet });
|
|
145
134
|
case "WalletCopy" /* WalletCopy */:
|
|
146
|
-
return /* @__PURE__ */
|
|
135
|
+
return /* @__PURE__ */ React18__default.default.createElement(BaseDropdownItemRender, { afterClick, item });
|
|
147
136
|
case "WalletDisconnect" /* WalletDisconnect */:
|
|
148
|
-
return /* @__PURE__ */
|
|
149
|
-
BaseDropdownItemWalletDisconnect,
|
|
150
|
-
{
|
|
151
|
-
afterClick,
|
|
152
|
-
item,
|
|
153
|
-
size,
|
|
154
|
-
wallet: item.wallet
|
|
155
|
-
}
|
|
156
|
-
);
|
|
137
|
+
return /* @__PURE__ */ React18__default.default.createElement(BaseDropdownItemWalletDisconnect, { afterClick, item, wallet: item.wallet });
|
|
157
138
|
}
|
|
158
139
|
}
|
|
159
140
|
function BaseDropdownItemWalletConnect({
|
|
160
141
|
afterClick,
|
|
161
142
|
item,
|
|
162
|
-
size,
|
|
163
143
|
wallet
|
|
164
144
|
}) {
|
|
165
145
|
const { connect: connect3 } = useWalletUiWallet({ wallet });
|
|
166
|
-
return /* @__PURE__ */
|
|
146
|
+
return /* @__PURE__ */ React18__default.default.createElement(
|
|
167
147
|
BaseDropdownItemRender,
|
|
168
148
|
{
|
|
169
149
|
afterClick,
|
|
@@ -173,20 +153,18 @@ function BaseDropdownItemWalletConnect({
|
|
|
173
153
|
await connect3();
|
|
174
154
|
return await item.handler();
|
|
175
155
|
},
|
|
176
|
-
leftSection: wallet ? /* @__PURE__ */
|
|
177
|
-
}
|
|
178
|
-
size
|
|
156
|
+
leftSection: wallet ? /* @__PURE__ */ React18__default.default.createElement(WalletUiIcon, { wallet }) : void 0
|
|
157
|
+
}
|
|
179
158
|
}
|
|
180
159
|
);
|
|
181
160
|
}
|
|
182
161
|
function BaseDropdownItemWalletDisconnect({
|
|
183
162
|
afterClick,
|
|
184
163
|
item,
|
|
185
|
-
size,
|
|
186
164
|
wallet
|
|
187
165
|
}) {
|
|
188
166
|
const { disconnect } = useWalletUiWallet({ wallet });
|
|
189
|
-
return /* @__PURE__ */
|
|
167
|
+
return /* @__PURE__ */ React18__default.default.createElement(
|
|
190
168
|
BaseDropdownItemRender,
|
|
191
169
|
{
|
|
192
170
|
afterClick,
|
|
@@ -196,12 +174,11 @@ function BaseDropdownItemWalletDisconnect({
|
|
|
196
174
|
await disconnect();
|
|
197
175
|
return await item.handler();
|
|
198
176
|
}
|
|
199
|
-
}
|
|
200
|
-
size
|
|
177
|
+
}
|
|
201
178
|
}
|
|
202
179
|
);
|
|
203
180
|
}
|
|
204
|
-
function BaseDropdownItemRender({ afterClick, item
|
|
181
|
+
function BaseDropdownItemRender({ afterClick, item }) {
|
|
205
182
|
function onClick() {
|
|
206
183
|
if (item.disabled) {
|
|
207
184
|
return;
|
|
@@ -210,15 +187,15 @@ function BaseDropdownItemRender({ afterClick, item, size }) {
|
|
|
210
187
|
afterClick();
|
|
211
188
|
});
|
|
212
189
|
}
|
|
213
|
-
return /* @__PURE__ */
|
|
190
|
+
return /* @__PURE__ */ React18__default.default.createElement("button", { type: "button", "data-wu": "base-dropdown-item", "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React18__default.default.createElement("span", { "data-wu": "base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React18__default.default.createElement("span", { "data-wu": "base-dropdown-item-right-section" }, item.rightSection) : null);
|
|
214
191
|
}
|
|
215
192
|
function BaseDropdownChevronDown(props) {
|
|
216
|
-
return /* @__PURE__ */
|
|
193
|
+
return /* @__PURE__ */ React18__default.default.createElement(
|
|
217
194
|
"svg",
|
|
218
195
|
{
|
|
219
196
|
xmlns: "http://www.w3.org/2000/svg",
|
|
220
|
-
width:
|
|
221
|
-
height:
|
|
197
|
+
width: 12,
|
|
198
|
+
height: 12,
|
|
222
199
|
viewBox: "0 0 24 24",
|
|
223
200
|
fill: "none",
|
|
224
201
|
stroke: "currentColor",
|
|
@@ -227,38 +204,37 @@ function BaseDropdownChevronDown(props) {
|
|
|
227
204
|
strokeLinejoin: "round",
|
|
228
205
|
...props
|
|
229
206
|
},
|
|
230
|
-
/* @__PURE__ */
|
|
207
|
+
/* @__PURE__ */ React18__default.default.createElement("path", { d: "m6 9 6 6 6-6" })
|
|
231
208
|
);
|
|
232
209
|
}
|
|
233
|
-
function BaseSvg({
|
|
234
|
-
|
|
235
|
-
return /* @__PURE__ */ React19__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, ...props }, props.children);
|
|
210
|
+
function BaseSvg({ ...props }) {
|
|
211
|
+
return /* @__PURE__ */ React18__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", ...props }, props.children);
|
|
236
212
|
}
|
|
237
213
|
|
|
238
214
|
// src/wallet-ui-icon-close.tsx
|
|
239
|
-
function WalletUiIconClose({
|
|
240
|
-
return /* @__PURE__ */
|
|
215
|
+
function WalletUiIconClose({ ...props }) {
|
|
216
|
+
return /* @__PURE__ */ React18__default.default.createElement(
|
|
241
217
|
BaseSvg,
|
|
242
218
|
{
|
|
243
|
-
size,
|
|
244
|
-
sizes: { lg: 16, md: 12, sm: 8 },
|
|
245
219
|
fill: "none",
|
|
246
220
|
stroke: "currentColor",
|
|
247
221
|
strokeWidth: "3",
|
|
222
|
+
width: 12,
|
|
223
|
+
height: 12,
|
|
248
224
|
viewBox: "0 0 14 14",
|
|
249
225
|
...props
|
|
250
226
|
},
|
|
251
|
-
/* @__PURE__ */
|
|
227
|
+
/* @__PURE__ */ React18__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" })
|
|
252
228
|
);
|
|
253
229
|
}
|
|
254
230
|
|
|
255
231
|
// src/base-modal.tsx
|
|
256
|
-
function BaseModal({ modal, buttonLabel, buttonProps = {},
|
|
232
|
+
function BaseModal({ modal, buttonLabel, buttonProps = {}, ...props }) {
|
|
257
233
|
const api = modal.api;
|
|
258
|
-
return /* @__PURE__ */
|
|
234
|
+
return /* @__PURE__ */ React18__default.default.createElement(React18__default.default.Fragment, null, buttonLabel ? /* @__PURE__ */ React18__default.default.createElement(BaseButton, { label: buttonLabel, ...buttonProps, ...api.getTriggerProps() }) : null, api.open && /* @__PURE__ */ React18__default.default.createElement(react$2.Portal, null, /* @__PURE__ */ React18__default.default.createElement("div", { ...api.getBackdropProps() }), /* @__PURE__ */ React18__default.default.createElement("div", { ...api.getPositionerProps() }, /* @__PURE__ */ React18__default.default.createElement("div", { ...api.getContentProps() }, /* @__PURE__ */ React18__default.default.createElement("header", null, /* @__PURE__ */ React18__default.default.createElement("button", { ...api.getCloseTriggerProps() }, /* @__PURE__ */ React18__default.default.createElement(WalletUiIconClose, null))), props.description ? /* @__PURE__ */ React18__default.default.createElement("p", { ...api.getDescriptionProps() }, props.description) : null, /* @__PURE__ */ React18__default.default.createElement("main", null, props.children)))));
|
|
259
235
|
}
|
|
260
236
|
function useBaseDropdown() {
|
|
261
|
-
const service = react$2.useMachine(menu__namespace.machine, { id:
|
|
237
|
+
const service = react$2.useMachine(menu__namespace.machine, { id: React18.useId() });
|
|
262
238
|
const api = menu__namespace.connect(service, react$2.normalizeProps);
|
|
263
239
|
return {
|
|
264
240
|
api,
|
|
@@ -267,7 +243,7 @@ function useBaseDropdown() {
|
|
|
267
243
|
};
|
|
268
244
|
}
|
|
269
245
|
function useBaseModal() {
|
|
270
|
-
const service = react$2.useMachine(dialog__namespace.machine, { id:
|
|
246
|
+
const service = react$2.useMachine(dialog__namespace.machine, { id: React18.useId(), modal: true });
|
|
271
247
|
const api = dialog__namespace.connect(service, react$2.normalizeProps);
|
|
272
248
|
return {
|
|
273
249
|
api,
|
|
@@ -275,11 +251,11 @@ function useBaseModal() {
|
|
|
275
251
|
open: () => service.send({ type: "OPEN" })
|
|
276
252
|
};
|
|
277
253
|
}
|
|
278
|
-
var WalletUiClusterContext =
|
|
254
|
+
var WalletUiClusterContext = React18.createContext({});
|
|
279
255
|
|
|
280
256
|
// src/use-wallet-ui-cluster.tsx
|
|
281
257
|
function useWalletUiCluster() {
|
|
282
|
-
return
|
|
258
|
+
return React18.useContext(WalletUiClusterContext);
|
|
283
259
|
}
|
|
284
260
|
function getDropdownItemsWallets({
|
|
285
261
|
wallets,
|
|
@@ -310,11 +286,11 @@ function getDropdownItemsWallets({
|
|
|
310
286
|
}
|
|
311
287
|
];
|
|
312
288
|
}
|
|
313
|
-
function useWalletUiDropdown(
|
|
289
|
+
function useWalletUiDropdown() {
|
|
314
290
|
const dropdown = useBaseDropdown();
|
|
315
291
|
const { account, connect: connect3, copy, disconnect, connected, wallet, wallets } = useWalletUi();
|
|
316
|
-
const itemsWallets =
|
|
317
|
-
const itemsConnected =
|
|
292
|
+
const itemsWallets = React18.useMemo(() => getDropdownItemsWallets({ connect: connect3, wallets }), [wallets, connect3]);
|
|
293
|
+
const itemsConnected = React18.useMemo(
|
|
318
294
|
() => [
|
|
319
295
|
{
|
|
320
296
|
handler: async () => {
|
|
@@ -339,15 +315,15 @@ function useWalletUiDropdown({ size = "md" } = {}) {
|
|
|
339
315
|
],
|
|
340
316
|
[copy, disconnect, dropdown, itemsWallets]
|
|
341
317
|
);
|
|
342
|
-
const items =
|
|
318
|
+
const items = React18.useMemo(() => {
|
|
343
319
|
return connected ? itemsConnected : itemsWallets;
|
|
344
320
|
}, [connected, itemsConnected, itemsWallets]);
|
|
345
|
-
const buttonProps =
|
|
321
|
+
const buttonProps = React18.useMemo(() => {
|
|
346
322
|
return {
|
|
347
323
|
label: connected ? (account ? ellipsify(account.address) : wallet?.name) ?? "Connected" : "Select Wallet",
|
|
348
|
-
leftSection: connected ? /* @__PURE__ */
|
|
324
|
+
leftSection: connected ? /* @__PURE__ */ React18__default.default.createElement(WalletUiIcon, { wallet }) : void 0
|
|
349
325
|
};
|
|
350
|
-
}, [account, connected,
|
|
326
|
+
}, [account, connected, wallet]);
|
|
351
327
|
return {
|
|
352
328
|
buttonProps,
|
|
353
329
|
connected,
|
|
@@ -368,7 +344,7 @@ function useWalletUiSigner({
|
|
|
368
344
|
}
|
|
369
345
|
function useWalletUiWallets() {
|
|
370
346
|
const readonlyWallets = react$1.useWallets();
|
|
371
|
-
return
|
|
347
|
+
return React18.useMemo(
|
|
372
348
|
() => readonlyWallets.filter((wallet) => wallet.chains.some((i) => i.startsWith("solana:"))).sort((a, b) => a.name.localeCompare(b.name)),
|
|
373
349
|
[readonlyWallets]
|
|
374
350
|
);
|
|
@@ -398,7 +374,7 @@ function WalletUiAccountContextProvider({
|
|
|
398
374
|
}) {
|
|
399
375
|
const wallets = react$1.useWallets();
|
|
400
376
|
const accountId = react$3.useStore(storage.value);
|
|
401
|
-
const [account, setAccountInternal] =
|
|
377
|
+
const [account, setAccountInternal] = React18.useState(
|
|
402
378
|
() => getSavedWalletAccount(wallets, accountId)
|
|
403
379
|
);
|
|
404
380
|
function setAccount(setStateAction) {
|
|
@@ -410,13 +386,13 @@ function WalletUiAccountContextProvider({
|
|
|
410
386
|
return nextWalletAccount;
|
|
411
387
|
});
|
|
412
388
|
}
|
|
413
|
-
|
|
389
|
+
React18.useEffect(() => {
|
|
414
390
|
const savedWalletAccount = getSavedWalletAccount(wallets, accountId);
|
|
415
391
|
if (savedWalletAccount) {
|
|
416
392
|
setAccountInternal(savedWalletAccount);
|
|
417
393
|
}
|
|
418
394
|
}, [accountId, wallets]);
|
|
419
|
-
const walletAccount =
|
|
395
|
+
const walletAccount = React18.useMemo(() => {
|
|
420
396
|
if (account) {
|
|
421
397
|
for (const uiWallet of wallets) {
|
|
422
398
|
for (const uiWalletAccount of uiWallet.accounts) {
|
|
@@ -430,12 +406,12 @@ function WalletUiAccountContextProvider({
|
|
|
430
406
|
}
|
|
431
407
|
}
|
|
432
408
|
}, [account, wallets]);
|
|
433
|
-
|
|
409
|
+
React18.useEffect(() => {
|
|
434
410
|
if (account && !walletAccount) {
|
|
435
411
|
setAccountInternal(void 0);
|
|
436
412
|
}
|
|
437
413
|
}, [account, walletAccount]);
|
|
438
|
-
const wallet =
|
|
414
|
+
const wallet = React18.useMemo(() => {
|
|
439
415
|
if (!walletAccount) {
|
|
440
416
|
return void 0;
|
|
441
417
|
}
|
|
@@ -450,16 +426,16 @@ function WalletUiAccountContextProvider({
|
|
|
450
426
|
}
|
|
451
427
|
}
|
|
452
428
|
}, [walletAccount, wallets]);
|
|
453
|
-
const accountKeys =
|
|
429
|
+
const accountKeys = React18.useMemo(() => {
|
|
454
430
|
if (!account) {
|
|
455
431
|
return [];
|
|
456
432
|
}
|
|
457
433
|
return [cluster.id, react$1.getUiWalletAccountStorageKey(account)].filter(Boolean);
|
|
458
434
|
}, [account, cluster.id]);
|
|
459
|
-
return /* @__PURE__ */
|
|
435
|
+
return /* @__PURE__ */ React18__default.default.createElement(
|
|
460
436
|
WalletUiAccountContext.Provider,
|
|
461
437
|
{
|
|
462
|
-
value:
|
|
438
|
+
value: React18.useMemo(
|
|
463
439
|
() => ({
|
|
464
440
|
account: walletAccount,
|
|
465
441
|
accountKeys,
|
|
@@ -495,9 +471,9 @@ function WalletUiClusterContextProvider({
|
|
|
495
471
|
storage.set(clusterId2);
|
|
496
472
|
}
|
|
497
473
|
};
|
|
498
|
-
return /* @__PURE__ */
|
|
474
|
+
return /* @__PURE__ */ React18__default.default.createElement(WalletUiClusterContext.Provider, { value }, render(value));
|
|
499
475
|
}
|
|
500
|
-
function WalletUiContextProvider({ children
|
|
476
|
+
function WalletUiContextProvider({ children }) {
|
|
501
477
|
const { account, accountKeys, cluster, setAccount, wallet } = useWalletUiAccount();
|
|
502
478
|
const wallets = useWalletUiWallets();
|
|
503
479
|
const connected = Boolean(wallet && wallet?.accounts.length > 0);
|
|
@@ -521,11 +497,10 @@ function WalletUiContextProvider({ children, size = "md" }) {
|
|
|
521
497
|
connected,
|
|
522
498
|
copy,
|
|
523
499
|
disconnect,
|
|
524
|
-
size,
|
|
525
500
|
wallet,
|
|
526
501
|
wallets
|
|
527
502
|
};
|
|
528
|
-
return /* @__PURE__ */
|
|
503
|
+
return /* @__PURE__ */ React18__default.default.createElement(WalletUiContext.Provider, { value }, children);
|
|
529
504
|
}
|
|
530
505
|
|
|
531
506
|
// src/wallet-ui.tsx
|
|
@@ -533,38 +508,34 @@ function createWalletUiConfig(props) {
|
|
|
533
508
|
return { ...props };
|
|
534
509
|
}
|
|
535
510
|
function WalletUi({ children, config: { accountStorage, clusters, clusterStorage, ...config } }) {
|
|
536
|
-
return /* @__PURE__ */
|
|
511
|
+
return /* @__PURE__ */ React18__default.default.createElement(React18__default.default.Fragment, null, /* @__PURE__ */ React18__default.default.createElement(
|
|
537
512
|
WalletUiClusterContextProvider,
|
|
538
513
|
{
|
|
539
514
|
clusters,
|
|
540
515
|
storage: clusterStorage,
|
|
541
516
|
render: ({ cluster }) => {
|
|
542
|
-
return /* @__PURE__ */
|
|
517
|
+
return /* @__PURE__ */ React18__default.default.createElement(WalletUiAccountContextProvider, { cluster, storage: accountStorage }, /* @__PURE__ */ React18__default.default.createElement(WalletUiContextProvider, { ...config }, children));
|
|
543
518
|
}
|
|
544
519
|
}
|
|
545
520
|
));
|
|
546
521
|
}
|
|
547
|
-
function WalletUiDropdown({
|
|
548
|
-
const { buttonProps, items, dropdown } = useWalletUiDropdown(
|
|
549
|
-
return /* @__PURE__ */
|
|
522
|
+
function WalletUiDropdown({ ...props }) {
|
|
523
|
+
const { buttonProps, items, dropdown } = useWalletUiDropdown();
|
|
524
|
+
return /* @__PURE__ */ React18__default.default.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps }, dropdown, items });
|
|
550
525
|
}
|
|
551
526
|
|
|
552
527
|
// src/wallet-ui-account-guard.tsx
|
|
553
|
-
function WalletUiAccountGuard({ fallback = /* @__PURE__ */
|
|
528
|
+
function WalletUiAccountGuard({ fallback = /* @__PURE__ */ React18__default.default.createElement(WalletUiDropdown, null), render }) {
|
|
554
529
|
const { account, accountKeys, cluster, wallet } = useWalletUiAccount();
|
|
555
530
|
return account ? render({ account, accountKeys, cluster, wallet }) : fallback;
|
|
556
531
|
}
|
|
557
|
-
function
|
|
558
|
-
return /* @__PURE__ */ React19__default.default.createElement(BaseButton, { ...props, label: "CLICK" });
|
|
559
|
-
}
|
|
560
|
-
function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
|
|
532
|
+
function WalletUiClusterDropdown({ buttonProps, ...props }) {
|
|
561
533
|
const dropdown = useBaseDropdown();
|
|
562
534
|
const { cluster, clusters, setCluster } = useWalletUiCluster();
|
|
563
|
-
return /* @__PURE__ */
|
|
535
|
+
return /* @__PURE__ */ React18__default.default.createElement(
|
|
564
536
|
BaseDropdown,
|
|
565
537
|
{
|
|
566
|
-
|
|
567
|
-
buttonProps: { ...buttonProps, label: cluster.label, size },
|
|
538
|
+
buttonProps: { ...buttonProps, label: cluster.label },
|
|
568
539
|
items: clusters.map((cluster2) => ({
|
|
569
540
|
handler: async () => {
|
|
570
541
|
setCluster(cluster2.id);
|
|
@@ -579,8 +550,8 @@ function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
|
|
|
579
550
|
}
|
|
580
551
|
);
|
|
581
552
|
}
|
|
582
|
-
function WalletUiIconNoWallet({
|
|
583
|
-
return /* @__PURE__ */
|
|
553
|
+
function WalletUiIconNoWallet({ ...props }) {
|
|
554
|
+
return /* @__PURE__ */ React18__default.default.createElement(BaseSvg, { fill: "none", height: 100, width: 100, viewBox: "0 0 97 96", ...props }, /* @__PURE__ */ React18__default.default.createElement("circle", { cx: "48.5", cy: "48", r: "48", fill: "url(#paint0_linear_880_5115)", fillOpacity: "0.1" }), /* @__PURE__ */ React18__default.default.createElement(
|
|
584
555
|
"circle",
|
|
585
556
|
{
|
|
586
557
|
cx: "48.5",
|
|
@@ -590,19 +561,19 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
590
561
|
strokeOpacity: "0.4",
|
|
591
562
|
strokeWidth: "2"
|
|
592
563
|
}
|
|
593
|
-
), /* @__PURE__ */
|
|
564
|
+
), /* @__PURE__ */ React18__default.default.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React18__default.default.createElement(
|
|
594
565
|
"path",
|
|
595
566
|
{
|
|
596
567
|
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",
|
|
597
568
|
fill: "url(#paint2_linear_880_5115)"
|
|
598
569
|
}
|
|
599
|
-
), /* @__PURE__ */
|
|
570
|
+
), /* @__PURE__ */ React18__default.default.createElement(
|
|
600
571
|
"path",
|
|
601
572
|
{
|
|
602
573
|
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",
|
|
603
574
|
fill: "url(#paint3_linear_880_5115)"
|
|
604
575
|
}
|
|
605
|
-
)), /* @__PURE__ */
|
|
576
|
+
)), /* @__PURE__ */ React18__default.default.createElement("defs", null, /* @__PURE__ */ React18__default.default.createElement(
|
|
606
577
|
"linearGradient",
|
|
607
578
|
{
|
|
608
579
|
id: "paint0_linear_880_5115",
|
|
@@ -612,13 +583,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
612
583
|
y2: "8.42498",
|
|
613
584
|
gradientUnits: "userSpaceOnUse"
|
|
614
585
|
},
|
|
615
|
-
/* @__PURE__ */
|
|
616
|
-
/* @__PURE__ */
|
|
617
|
-
/* @__PURE__ */
|
|
618
|
-
/* @__PURE__ */
|
|
619
|
-
/* @__PURE__ */
|
|
620
|
-
/* @__PURE__ */
|
|
621
|
-
), /* @__PURE__ */
|
|
586
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
587
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
588
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
589
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
590
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
591
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
592
|
+
), /* @__PURE__ */ React18__default.default.createElement(
|
|
622
593
|
"linearGradient",
|
|
623
594
|
{
|
|
624
595
|
id: "paint1_linear_880_5115",
|
|
@@ -628,13 +599,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
628
599
|
y2: "8.42498",
|
|
629
600
|
gradientUnits: "userSpaceOnUse"
|
|
630
601
|
},
|
|
631
|
-
/* @__PURE__ */
|
|
632
|
-
/* @__PURE__ */
|
|
633
|
-
/* @__PURE__ */
|
|
634
|
-
/* @__PURE__ */
|
|
635
|
-
/* @__PURE__ */
|
|
636
|
-
/* @__PURE__ */
|
|
637
|
-
), /* @__PURE__ */
|
|
602
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
603
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
604
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
605
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
606
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
607
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
608
|
+
), /* @__PURE__ */ React18__default.default.createElement(
|
|
638
609
|
"linearGradient",
|
|
639
610
|
{
|
|
640
611
|
id: "paint2_linear_880_5115",
|
|
@@ -644,13 +615,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
644
615
|
y2: "23.7879",
|
|
645
616
|
gradientUnits: "userSpaceOnUse"
|
|
646
617
|
},
|
|
647
|
-
/* @__PURE__ */
|
|
648
|
-
/* @__PURE__ */
|
|
649
|
-
/* @__PURE__ */
|
|
650
|
-
/* @__PURE__ */
|
|
651
|
-
/* @__PURE__ */
|
|
652
|
-
/* @__PURE__ */
|
|
653
|
-
), /* @__PURE__ */
|
|
618
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
619
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
620
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
621
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
622
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
623
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
624
|
+
), /* @__PURE__ */ React18__default.default.createElement(
|
|
654
625
|
"linearGradient",
|
|
655
626
|
{
|
|
656
627
|
id: "paint3_linear_880_5115",
|
|
@@ -660,22 +631,22 @@ function WalletUiIconNoWallet({ size, ...props }) {
|
|
|
660
631
|
y2: "45.4453",
|
|
661
632
|
gradientUnits: "userSpaceOnUse"
|
|
662
633
|
},
|
|
663
|
-
/* @__PURE__ */
|
|
664
|
-
/* @__PURE__ */
|
|
665
|
-
/* @__PURE__ */
|
|
666
|
-
/* @__PURE__ */
|
|
667
|
-
/* @__PURE__ */
|
|
668
|
-
/* @__PURE__ */
|
|
669
|
-
), /* @__PURE__ */
|
|
670
|
-
}
|
|
671
|
-
function WalletUiLabel({ className,
|
|
634
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
635
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
636
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
637
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
638
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
639
|
+
/* @__PURE__ */ React18__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
640
|
+
), /* @__PURE__ */ React18__default.default.createElement("clipPath", { id: "clip0_880_5115" }, /* @__PURE__ */ React18__default.default.createElement("rect", { width: "48", height: "48", fill: "white", transform: "translate(24.5 24)" }))));
|
|
641
|
+
}
|
|
642
|
+
function WalletUiLabel({ className, wallet, ...props }) {
|
|
672
643
|
if (!wallet) {
|
|
673
644
|
return null;
|
|
674
645
|
}
|
|
675
|
-
return /* @__PURE__ */
|
|
646
|
+
return /* @__PURE__ */ React18__default.default.createElement("span", { "data-wu": "wallet-ui-label", className: `${className ?? ""}`, ...props }, wallet.name);
|
|
676
647
|
}
|
|
677
|
-
function WalletUiListButton({ className, select,
|
|
678
|
-
const [pending, setPending] =
|
|
648
|
+
function WalletUiListButton({ className, select, wallet, ...props }) {
|
|
649
|
+
const [pending, setPending] = React18__default.default.useState(false);
|
|
679
650
|
function handleSelect() {
|
|
680
651
|
if (!select) {
|
|
681
652
|
return;
|
|
@@ -687,29 +658,29 @@ function WalletUiListButton({ className, select, size = "md", wallet, ...props }
|
|
|
687
658
|
}
|
|
688
659
|
void select(account).finally(() => setPending(false));
|
|
689
660
|
}
|
|
690
|
-
return /* @__PURE__ */
|
|
661
|
+
return /* @__PURE__ */ React18__default.default.createElement(
|
|
691
662
|
"button",
|
|
692
663
|
{
|
|
693
664
|
disabled: pending,
|
|
694
665
|
"data-wu": "wallet-ui-list-button",
|
|
695
|
-
className: `${
|
|
666
|
+
className: `${pending ? "pending" : ""} ${className ?? ""}`,
|
|
696
667
|
onClick: handleSelect,
|
|
697
668
|
...props
|
|
698
669
|
},
|
|
699
|
-
/* @__PURE__ */
|
|
700
|
-
/* @__PURE__ */
|
|
670
|
+
/* @__PURE__ */ React18__default.default.createElement(WalletUiIcon, { wallet }),
|
|
671
|
+
/* @__PURE__ */ React18__default.default.createElement(WalletUiLabel, { wallet })
|
|
701
672
|
);
|
|
702
673
|
}
|
|
703
674
|
|
|
704
675
|
// src/wallet-ui-list.tsx
|
|
705
|
-
function WalletUiList({ className, select,
|
|
706
|
-
return /* @__PURE__ */
|
|
676
|
+
function WalletUiList({ className, select, wallets, ...props }) {
|
|
677
|
+
return /* @__PURE__ */ React18__default.default.createElement("div", { "data-wu": "wallet-ui-list", className: `${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React18__default.default.createElement(WalletUiListButton, { key: wallet.name, select, wallet })));
|
|
707
678
|
}
|
|
708
|
-
function WalletUiModal({
|
|
709
|
-
return /* @__PURE__ */
|
|
679
|
+
function WalletUiModal({ wallets, select, ...props }) {
|
|
680
|
+
return /* @__PURE__ */ React18__default.default.createElement(BaseModal, { description: "Connect a wallet on Solana to continue", ...props }, /* @__PURE__ */ React18__default.default.createElement(WalletUiList, { wallets, select }));
|
|
710
681
|
}
|
|
711
682
|
function WalletUiModalTrigger({ label = "Select Wallet", modal, ...props }) {
|
|
712
|
-
return /* @__PURE__ */
|
|
683
|
+
return /* @__PURE__ */ React18__default.default.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
|
|
713
684
|
}
|
|
714
685
|
|
|
715
686
|
exports.BaseButton = BaseButton;
|
|
@@ -722,7 +693,6 @@ exports.WalletUi = WalletUi;
|
|
|
722
693
|
exports.WalletUiAccountContext = WalletUiAccountContext;
|
|
723
694
|
exports.WalletUiAccountContextProvider = WalletUiAccountContextProvider;
|
|
724
695
|
exports.WalletUiAccountGuard = WalletUiAccountGuard;
|
|
725
|
-
exports.WalletUiButton = WalletUiButton;
|
|
726
696
|
exports.WalletUiClusterContext = WalletUiClusterContext;
|
|
727
697
|
exports.WalletUiClusterContextProvider = WalletUiClusterContextProvider;
|
|
728
698
|
exports.WalletUiClusterDropdown = WalletUiClusterDropdown;
|