@wallet-ui/react 1.1.0-canary-20250321005249 → 1.1.0-canary-20250324005504
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.browser.cjs +699 -288
- package/dist/index.browser.cjs.map +1 -1
- package/dist/index.browser.mjs +637 -259
- package/dist/index.browser.mjs.map +1 -1
- package/dist/index.css +535 -152
- package/dist/index.css.map +1 -1
- package/dist/index.native.mjs +637 -259
- package/dist/index.native.mjs.map +1 -1
- package/dist/index.node.cjs +699 -288
- package/dist/index.node.cjs.map +1 -1
- package/dist/index.node.mjs +637 -259
- package/dist/index.node.mjs.map +1 -1
- package/dist/types/base-button.d.ts +12 -0
- package/dist/types/base-button.d.ts.map +1 -0
- package/dist/types/base-dropdown.d.ts +33 -0
- package/dist/types/base-dropdown.d.ts.map +1 -0
- package/dist/types/base-modal.d.ts +15 -0
- package/dist/types/base-modal.d.ts.map +1 -0
- package/dist/types/base-svg.d.ts +12 -0
- package/dist/types/base-svg.d.ts.map +1 -0
- package/dist/types/index.d.ts +37 -13
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/types/wallet-ui-button.d.ts +3 -0
- package/dist/types/types/wallet-ui-button.d.ts.map +1 -0
- package/dist/types/types/wallet-ui-div.d.ts +3 -0
- package/dist/types/types/wallet-ui-div.d.ts.map +1 -0
- package/dist/types/types/wallet-ui-img.d.ts +3 -0
- package/dist/types/types/wallet-ui-img.d.ts.map +1 -0
- package/dist/types/types/wallet-ui-size.d.ts +2 -0
- package/dist/types/types/wallet-ui-size.d.ts.map +1 -0
- package/dist/types/types/wallet-ui-span.d.ts +3 -0
- package/dist/types/types/wallet-ui-span.d.ts.map +1 -0
- package/dist/types/types/wallet-ui-svg.d.ts +3 -0
- package/dist/types/types/wallet-ui-svg.d.ts.map +1 -0
- package/dist/types/use-base-dropdown.d.ts +9 -0
- package/dist/types/use-base-dropdown.d.ts.map +1 -0
- package/dist/types/use-base-modal.d.ts +9 -0
- package/dist/types/use-base-modal.d.ts.map +1 -0
- package/dist/types/use-wallet-ui-account.d.ts +2 -0
- package/dist/types/use-wallet-ui-account.d.ts.map +1 -0
- package/dist/types/use-wallet-ui-cluster.d.ts +2 -0
- package/dist/types/use-wallet-ui-cluster.d.ts.map +1 -0
- package/dist/types/use-wallet-ui-dropdown.d.ts +14 -0
- package/dist/types/use-wallet-ui-dropdown.d.ts.map +1 -0
- package/dist/types/use-wallet-ui-solana-client.d.ts +2 -0
- package/dist/types/use-wallet-ui-solana-client.d.ts.map +1 -0
- package/dist/types/use-wallet-ui-wallet.d.ts +10 -0
- package/dist/types/use-wallet-ui-wallet.d.ts.map +1 -0
- package/dist/types/use-wallet-ui-wallets.d.ts +2 -0
- package/dist/types/use-wallet-ui-wallets.d.ts.map +1 -0
- package/dist/types/use-wallet-ui.d.ts +2 -0
- package/dist/types/use-wallet-ui.d.ts.map +1 -0
- package/dist/types/{solana-wallet-provider.d.ts → wallet-ui-account-context-provider.d.ts} +5 -4
- package/dist/types/wallet-ui-account-context-provider.d.ts.map +1 -0
- package/dist/types/wallet-ui-account-context.d.ts +13 -0
- package/dist/types/wallet-ui-account-context.d.ts.map +1 -0
- package/dist/types/wallet-ui-button.d.ts +8 -0
- package/dist/types/wallet-ui-button.d.ts.map +1 -0
- package/dist/types/wallet-ui-cluster-context-provider.d.ts +4 -0
- package/dist/types/wallet-ui-cluster-context-provider.d.ts.map +1 -0
- package/dist/types/wallet-ui-cluster-context.d.ts +14 -0
- package/dist/types/wallet-ui-cluster-context.d.ts.map +1 -0
- package/dist/types/wallet-ui-cluster-dropdown.d.ts +9 -0
- package/dist/types/wallet-ui-cluster-dropdown.d.ts.map +1 -0
- package/dist/types/wallet-ui-context-provider.d.ts +4 -0
- package/dist/types/wallet-ui-context-provider.d.ts.map +1 -0
- package/dist/types/wallet-ui-context.d.ts +25 -0
- package/dist/types/wallet-ui-context.d.ts.map +1 -0
- package/dist/types/wallet-ui-dropdown.d.ts +8 -0
- package/dist/types/wallet-ui-dropdown.d.ts.map +1 -0
- package/dist/types/wallet-ui-icon-close.d.ts +4 -0
- package/dist/types/wallet-ui-icon-close.d.ts.map +1 -0
- package/dist/types/wallet-ui-icon-no-wallet.d.ts +4 -0
- package/dist/types/wallet-ui-icon-no-wallet.d.ts.map +1 -0
- package/dist/types/wallet-ui-icon.d.ts +10 -0
- package/dist/types/wallet-ui-icon.d.ts.map +1 -0
- package/dist/types/wallet-ui-label.d.ts +9 -0
- package/dist/types/wallet-ui-label.d.ts.map +1 -0
- package/dist/types/wallet-ui-list-button.d.ts +11 -0
- package/dist/types/wallet-ui-list-button.d.ts.map +1 -0
- package/dist/types/wallet-ui-list.d.ts +11 -0
- package/dist/types/wallet-ui-list.d.ts.map +1 -0
- package/dist/types/wallet-ui-modal-trigger.d.ts +9 -0
- package/dist/types/wallet-ui-modal-trigger.d.ts.map +1 -0
- package/dist/types/wallet-ui-modal.d.ts +11 -0
- package/dist/types/wallet-ui-modal.d.ts.map +1 -0
- package/dist/types/wallet-ui-solana-client-context-provider.d.ts +4 -0
- package/dist/types/wallet-ui-solana-client-context-provider.d.ts.map +1 -0
- package/dist/types/wallet-ui-solana-client-context.d.ts +8 -0
- package/dist/types/wallet-ui-solana-client-context.d.ts.map +1 -0
- package/dist/types/wallet-ui.d.ts +15 -0
- package/dist/types/wallet-ui.d.ts.map +1 -0
- package/package.json +6 -3
- package/dist/types/solana-client-context.d.ts +0 -3
- package/dist/types/solana-client-context.d.ts.map +0 -1
- package/dist/types/solana-client-provider.d.ts +0 -7
- package/dist/types/solana-client-provider.d.ts.map +0 -1
- package/dist/types/solana-cluster-context.d.ts +0 -17
- package/dist/types/solana-cluster-context.d.ts.map +0 -1
- package/dist/types/solana-cluster-provider.d.ts +0 -7
- package/dist/types/solana-cluster-provider.d.ts.map +0 -1
- package/dist/types/solana-provider.d.ts +0 -7
- package/dist/types/solana-provider.d.ts.map +0 -1
- package/dist/types/solana-wallet-context.d.ts +0 -7
- package/dist/types/solana-wallet-context.d.ts.map +0 -1
- package/dist/types/solana-wallet-provider.d.ts.map +0 -1
- package/dist/types/solana-wallet-ui-button.d.ts +0 -3
- package/dist/types/solana-wallet-ui-button.d.ts.map +0 -1
- package/dist/types/solana-wallet-ui-context.d.ts +0 -19
- package/dist/types/solana-wallet-ui-context.d.ts.map +0 -1
- package/dist/types/solana-wallet-ui-dialog-trigger.d.ts +0 -4
- package/dist/types/solana-wallet-ui-dialog-trigger.d.ts.map +0 -1
- package/dist/types/solana-wallet-ui-dialog.d.ts +0 -12
- package/dist/types/solana-wallet-ui-dialog.d.ts.map +0 -1
- package/dist/types/solana-wallet-ui-dropdown.d.ts +0 -11
- package/dist/types/solana-wallet-ui-dropdown.d.ts.map +0 -1
- package/dist/types/solana-wallet-ui-provider.d.ts +0 -5
- package/dist/types/solana-wallet-ui-provider.d.ts.map +0 -1
package/dist/index.node.cjs
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var react = require('@
|
|
6
|
-
var dialog = require('@zag-js/dialog');
|
|
3
|
+
var React19 = require('react');
|
|
4
|
+
var react$1 = require('@wallet-standard/react');
|
|
5
|
+
var react$2 = require('@zag-js/react');
|
|
7
6
|
var menu = require('@zag-js/menu');
|
|
8
|
-
var
|
|
9
|
-
var core = require('@wallet-ui/core');
|
|
7
|
+
var dialog = require('@zag-js/dialog');
|
|
8
|
+
var core$1 = require('@wallet-ui/core');
|
|
9
|
+
var gill = require('gill');
|
|
10
|
+
var react = require('@solana/react');
|
|
11
|
+
var walletStandardFeatures = require('@solana/wallet-standard-features');
|
|
12
|
+
var core = require('@wallet-standard/core');
|
|
10
13
|
|
|
11
14
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
15
|
|
|
@@ -28,119 +31,349 @@ function _interopNamespace(e) {
|
|
|
28
31
|
return Object.freeze(n);
|
|
29
32
|
}
|
|
30
33
|
|
|
31
|
-
var
|
|
32
|
-
var dialog__namespace = /*#__PURE__*/_interopNamespace(dialog);
|
|
34
|
+
var React19__default = /*#__PURE__*/_interopDefault(React19);
|
|
33
35
|
var menu__namespace = /*#__PURE__*/_interopNamespace(menu);
|
|
36
|
+
var dialog__namespace = /*#__PURE__*/_interopNamespace(dialog);
|
|
34
37
|
|
|
35
|
-
// src/
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
return React10.useContext(SolanaClientContext);
|
|
38
|
+
// src/base-button.tsx
|
|
39
|
+
function BaseButton({ className, label, leftSection, onClick, rightSection, size, ...props }) {
|
|
40
|
+
return /* @__PURE__ */ React19__default.default.createElement("button", { className: `wallet-ui-base-button ${size ?? "md"} ${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React19__default.default.createElement("span", { className: "wallet-ui-base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React19__default.default.createElement("span", { className: "wallet-ui-base-button-right-section" }, rightSection) : null);
|
|
39
41
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
return /* @__PURE__ */ React10__default.default.createElement(SolanaClientContext.Provider, { value }, children);
|
|
42
|
+
var WalletUiContext = React19__default.default.createContext({});
|
|
43
|
+
|
|
44
|
+
// src/use-wallet-ui.tsx
|
|
45
|
+
function useWalletUi() {
|
|
46
|
+
return React19__default.default.useContext(WalletUiContext);
|
|
46
47
|
}
|
|
47
|
-
var
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
var WalletUiAccountContext = React19.createContext({});
|
|
49
|
+
|
|
50
|
+
// src/use-wallet-ui-account.tsx
|
|
51
|
+
function useWalletUiAccount() {
|
|
52
|
+
return React19.useContext(WalletUiAccountContext);
|
|
50
53
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
54
|
+
|
|
55
|
+
// src/use-wallet-ui-wallet.tsx
|
|
56
|
+
function useWalletUiWallet({ wallet }) {
|
|
57
|
+
const { connect: connectAccount } = useWalletUi();
|
|
58
|
+
const { setAccount } = useWalletUiAccount();
|
|
59
|
+
const [isConnecting, connect3] = react$1.useConnect(wallet);
|
|
60
|
+
const [isDisconnecting, disconnect] = react$1.useDisconnect(wallet);
|
|
61
|
+
React19.useEffect(() => {
|
|
62
|
+
}, [isDisconnecting]);
|
|
63
|
+
return {
|
|
64
|
+
connect: async () => {
|
|
65
|
+
const connectedAccount = await connect3();
|
|
66
|
+
console.log("connectedAccount", connectedAccount);
|
|
67
|
+
if (!connectedAccount.length) {
|
|
68
|
+
console.log("connect, no accounts");
|
|
69
|
+
return connectedAccount;
|
|
60
70
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
71
|
+
const first = connectedAccount[0];
|
|
72
|
+
console.log("connect, setting first account => ", first);
|
|
73
|
+
setAccount(first);
|
|
74
|
+
connectAccount(first);
|
|
75
|
+
return connectedAccount;
|
|
76
|
+
},
|
|
77
|
+
disconnect,
|
|
78
|
+
isConnecting,
|
|
79
|
+
isDisconnecting
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// src/base-dropdown.tsx
|
|
84
|
+
var BaseDropdownItemType = /* @__PURE__ */ ((BaseDropdownItemType2) => {
|
|
85
|
+
BaseDropdownItemType2["Item"] = "Item";
|
|
86
|
+
BaseDropdownItemType2["WalletConnect"] = "WalletConnect";
|
|
87
|
+
BaseDropdownItemType2["WalletCopy"] = "WalletCopy";
|
|
88
|
+
BaseDropdownItemType2["WalletDisconnect"] = "WalletDisconnect";
|
|
89
|
+
BaseDropdownItemType2["WalletNeeded"] = "WalletNeeded";
|
|
90
|
+
return BaseDropdownItemType2;
|
|
91
|
+
})(BaseDropdownItemType || {});
|
|
92
|
+
function BaseDropdown({ buttonProps, dropdown, showIndicator, items }) {
|
|
93
|
+
const api = dropdown.api;
|
|
94
|
+
const trigger = /* @__PURE__ */ React19__default.default.createElement(
|
|
95
|
+
BaseButton,
|
|
96
|
+
{
|
|
97
|
+
...api.getTriggerProps(),
|
|
98
|
+
className: `wallet-ui-base-dropdown-trigger`,
|
|
99
|
+
"data-part": "trigger",
|
|
100
|
+
rightSection: showIndicator ? /* @__PURE__ */ React19__default.default.createElement("span", { className: "wallet-actions" }, /* @__PURE__ */ React19__default.default.createElement("span", { ...api.getIndicatorProps(), className: "indicator" }, /* @__PURE__ */ React19__default.default.createElement(BaseDropdownChevronDown, { size: 12 }))) : null,
|
|
101
|
+
...buttonProps
|
|
65
102
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
103
|
+
);
|
|
104
|
+
return /* @__PURE__ */ React19__default.default.createElement("div", { className: "wallet-ui-base-dropdown" }, trigger, /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getPositionerProps(), className: "wallet-positioner" }, /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getContentProps(), className: "wallet-ui-base-dropdown-list", "data-part": "content" }, items.map((item) => {
|
|
105
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
106
|
+
BaseDropdownItem,
|
|
107
|
+
{
|
|
108
|
+
...api.getItemProps({ value: item.value }),
|
|
109
|
+
key: item.value,
|
|
110
|
+
item,
|
|
111
|
+
afterClick: () => {
|
|
112
|
+
if (item.disabled) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
if (item.closeMenu !== false) {
|
|
116
|
+
dropdown.close();
|
|
77
117
|
}
|
|
78
118
|
}
|
|
79
|
-
} catch (error) {
|
|
80
|
-
console.warn(`Error setting localStorage key "${key}":`, error);
|
|
81
119
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
);
|
|
85
|
-
return [storedValue, setValue];
|
|
120
|
+
);
|
|
121
|
+
}))));
|
|
86
122
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
function SolanaClusterProvider({ clusters, children }) {
|
|
91
|
-
const [clusterId, setClusterId] = useLocalStorage(STORAGE_KEY, "solana:devnet");
|
|
92
|
-
if (!clusters.length) {
|
|
93
|
-
throw new Error("No clusters provided");
|
|
123
|
+
function BaseDropdownItem({ afterClick, item }) {
|
|
124
|
+
if (!item.wallet) {
|
|
125
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemRender, { afterClick, item });
|
|
94
126
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
127
|
+
switch (item.type) {
|
|
128
|
+
case "Item" /* Item */:
|
|
129
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemRender, { afterClick, item });
|
|
130
|
+
case "WalletConnect" /* WalletConnect */:
|
|
131
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemWalletConnect, { afterClick, item, wallet: item.wallet });
|
|
132
|
+
case "WalletCopy" /* WalletCopy */:
|
|
133
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemRender, { afterClick, item });
|
|
134
|
+
case "WalletDisconnect" /* WalletDisconnect */:
|
|
135
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemWalletDisconnect, { afterClick, item, wallet: item.wallet });
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
function BaseDropdownItemWalletConnect({
|
|
139
|
+
afterClick,
|
|
140
|
+
item,
|
|
141
|
+
wallet
|
|
142
|
+
}) {
|
|
143
|
+
const { connect: connect3 } = useWalletUiWallet({ wallet });
|
|
144
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
145
|
+
BaseDropdownItemRender,
|
|
146
|
+
{
|
|
147
|
+
afterClick,
|
|
148
|
+
item: {
|
|
149
|
+
...item,
|
|
150
|
+
handler: async () => {
|
|
151
|
+
await connect3();
|
|
152
|
+
return await item.handler();
|
|
153
|
+
}
|
|
99
154
|
}
|
|
100
155
|
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
156
|
+
);
|
|
157
|
+
}
|
|
158
|
+
function BaseDropdownItemWalletDisconnect({
|
|
159
|
+
afterClick,
|
|
160
|
+
item,
|
|
161
|
+
wallet
|
|
162
|
+
}) {
|
|
163
|
+
const { disconnect } = useWalletUiWallet({ wallet });
|
|
164
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
165
|
+
BaseDropdownItemRender,
|
|
105
166
|
{
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
[cluster, clusters]
|
|
116
|
-
)
|
|
117
|
-
},
|
|
118
|
-
children
|
|
167
|
+
afterClick,
|
|
168
|
+
item: {
|
|
169
|
+
...item,
|
|
170
|
+
handler: async () => {
|
|
171
|
+
await disconnect();
|
|
172
|
+
return await item.handler();
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
119
176
|
);
|
|
120
177
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
178
|
+
function BaseDropdownItemRender({ afterClick, item }) {
|
|
179
|
+
function onClick() {
|
|
180
|
+
if (item.disabled) {
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
void item.handler().then(() => {
|
|
184
|
+
afterClick();
|
|
185
|
+
});
|
|
124
186
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
187
|
+
return /* @__PURE__ */ React19__default.default.createElement("div", { className: "wallet-ui-base-dropdown-item", "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React19__default.default.createElement("span", { className: "wallet-ui-base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React19__default.default.createElement("span", { className: "wallet-ui-base-dropdown-item-right-section" }, item.rightSection) : null);
|
|
188
|
+
}
|
|
189
|
+
function BaseDropdownChevronDown(props) {
|
|
190
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
191
|
+
"svg",
|
|
192
|
+
{
|
|
193
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
194
|
+
width: props.size ?? 24,
|
|
195
|
+
height: props.size ?? 24,
|
|
196
|
+
viewBox: "0 0 24 24",
|
|
197
|
+
fill: "none",
|
|
198
|
+
stroke: "currentColor",
|
|
199
|
+
strokeWidth: "2",
|
|
200
|
+
strokeLinecap: "round",
|
|
201
|
+
strokeLinejoin: "round",
|
|
202
|
+
...props
|
|
203
|
+
},
|
|
204
|
+
/* @__PURE__ */ React19__default.default.createElement("path", { d: "m6 9 6 6 6-6" })
|
|
205
|
+
);
|
|
206
|
+
}
|
|
207
|
+
function BaseSvg({ sizes = {}, ...props }) {
|
|
208
|
+
const size = props.size ? sizes[props.size] : 12;
|
|
209
|
+
return /* @__PURE__ */ React19__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, ...props }, props.children);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
// src/wallet-ui-icon-close.tsx
|
|
213
|
+
function WalletUiIconClose({ size = "md", ...props }) {
|
|
214
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
215
|
+
BaseSvg,
|
|
216
|
+
{
|
|
217
|
+
size,
|
|
218
|
+
sizes: { lg: 16, md: 12, sm: 8 },
|
|
219
|
+
fill: "none",
|
|
220
|
+
stroke: "currentColor",
|
|
221
|
+
strokeWidth: "3",
|
|
222
|
+
viewBox: "0 0 14 14",
|
|
223
|
+
...props
|
|
224
|
+
},
|
|
225
|
+
/* @__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" })
|
|
226
|
+
);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
// src/base-modal.tsx
|
|
230
|
+
function BaseModal({ modal, buttonLabel, buttonProps = {}, size = "md", ...props }) {
|
|
231
|
+
const api = modal.api;
|
|
232
|
+
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)))));
|
|
233
|
+
}
|
|
234
|
+
function useBaseDropdown() {
|
|
235
|
+
const service = react$2.useMachine(menu__namespace.machine, { id: React19.useId() });
|
|
236
|
+
const api = menu__namespace.connect(service, react$2.normalizeProps);
|
|
237
|
+
return {
|
|
238
|
+
api,
|
|
239
|
+
close: () => service.send({ type: "CLOSE" }),
|
|
240
|
+
open: () => service.send({ type: "OPEN" })
|
|
241
|
+
};
|
|
242
|
+
}
|
|
243
|
+
function useBaseModal() {
|
|
244
|
+
const service = react$2.useMachine(dialog__namespace.machine, { id: React19.useId(), modal: true });
|
|
245
|
+
const api = dialog__namespace.connect(service, react$2.normalizeProps);
|
|
246
|
+
return {
|
|
247
|
+
api,
|
|
248
|
+
close: () => service.send({ type: "CLOSE" }),
|
|
249
|
+
open: () => service.send({ type: "OPEN" })
|
|
250
|
+
};
|
|
251
|
+
}
|
|
252
|
+
var WalletUiClusterContext = React19.createContext({});
|
|
253
|
+
|
|
254
|
+
// src/use-wallet-ui-cluster.tsx
|
|
255
|
+
function useWalletUiCluster() {
|
|
256
|
+
return React19.useContext(WalletUiClusterContext);
|
|
128
257
|
}
|
|
129
|
-
function
|
|
130
|
-
|
|
131
|
-
if (!wallet?.address) {
|
|
258
|
+
function WalletUiIcon({ className, size, wallet, ...props }) {
|
|
259
|
+
if (!wallet) {
|
|
132
260
|
return null;
|
|
133
261
|
}
|
|
134
|
-
return
|
|
262
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
263
|
+
"img",
|
|
264
|
+
{
|
|
265
|
+
src: wallet.icon,
|
|
266
|
+
alt: wallet.name,
|
|
267
|
+
className: `wallet-ui-list-icon ${size ?? "md"} ${className ?? ""}`,
|
|
268
|
+
...props
|
|
269
|
+
}
|
|
270
|
+
);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
// src/use-wallet-ui-dropdown.tsx
|
|
274
|
+
function getDropdownItemsWallets({
|
|
275
|
+
wallets,
|
|
276
|
+
connect: connect3,
|
|
277
|
+
size
|
|
278
|
+
}) {
|
|
279
|
+
return wallets.length ? wallets.map((wallet) => ({
|
|
280
|
+
handler: async () => {
|
|
281
|
+
const account = wallet.accounts.length > 0 ? wallet.accounts[0] : void 0;
|
|
282
|
+
if (!account) {
|
|
283
|
+
return;
|
|
284
|
+
}
|
|
285
|
+
connect3(account);
|
|
286
|
+
await Promise.resolve();
|
|
287
|
+
},
|
|
288
|
+
label: wallet.name,
|
|
289
|
+
leftSection: /* @__PURE__ */ React19__default.default.createElement(WalletUiIcon, { wallet, size }),
|
|
290
|
+
type: "WalletConnect" /* WalletConnect */,
|
|
291
|
+
value: wallet.name,
|
|
292
|
+
wallet
|
|
293
|
+
})) : [
|
|
294
|
+
{
|
|
295
|
+
handler: async () => {
|
|
296
|
+
window.open("https://solana.com/solana-wallets", "_blank");
|
|
297
|
+
await Promise.resolve();
|
|
298
|
+
},
|
|
299
|
+
label: "You'll need a wallet on Solana to continue",
|
|
300
|
+
type: "WalletNeeded" /* WalletNeeded */,
|
|
301
|
+
value: "no-wallets"
|
|
302
|
+
}
|
|
303
|
+
];
|
|
304
|
+
}
|
|
305
|
+
function useWalletUiDropdown({ size = "md" } = {}) {
|
|
306
|
+
const dropdown = useBaseDropdown();
|
|
307
|
+
const { account, connect: connect3, copy, disconnect, connected, wallet, wallets } = useWalletUi();
|
|
308
|
+
const itemsWallets = React19.useMemo(() => {
|
|
309
|
+
return getDropdownItemsWallets({ connect: connect3, size, wallets });
|
|
310
|
+
}, [wallets, size, connect3]);
|
|
311
|
+
const itemsConnected = React19.useMemo(
|
|
312
|
+
() => [
|
|
313
|
+
{
|
|
314
|
+
handler: async () => {
|
|
315
|
+
copy();
|
|
316
|
+
void await Promise.resolve();
|
|
317
|
+
},
|
|
318
|
+
label: "Copy Address",
|
|
319
|
+
type: "WalletCopy" /* WalletCopy */,
|
|
320
|
+
value: "copy"
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
handler: async () => {
|
|
324
|
+
disconnect();
|
|
325
|
+
dropdown.close();
|
|
326
|
+
await Promise.resolve();
|
|
327
|
+
},
|
|
328
|
+
label: "Disconnect",
|
|
329
|
+
type: "WalletDisconnect" /* WalletDisconnect */,
|
|
330
|
+
value: "disconnect"
|
|
331
|
+
},
|
|
332
|
+
...itemsWallets
|
|
333
|
+
],
|
|
334
|
+
[connect3, copy, disconnect, dropdown, size, wallets]
|
|
335
|
+
);
|
|
336
|
+
const items = React19.useMemo(() => {
|
|
337
|
+
return connected ? itemsConnected : itemsWallets;
|
|
338
|
+
}, [connected, itemsConnected, itemsWallets]);
|
|
339
|
+
const buttonProps = React19.useMemo(() => {
|
|
340
|
+
return {
|
|
341
|
+
label: connected ? (account ? ellipsify(account.address) : wallet?.name) ?? "Connected" : "Select Wallet",
|
|
342
|
+
leftSection: connected ? /* @__PURE__ */ React19__default.default.createElement(WalletUiIcon, { size, wallet }) : void 0
|
|
343
|
+
};
|
|
344
|
+
}, [account, connected, size, wallet]);
|
|
345
|
+
return {
|
|
346
|
+
buttonProps,
|
|
347
|
+
connected,
|
|
348
|
+
dropdown,
|
|
349
|
+
items
|
|
350
|
+
};
|
|
135
351
|
}
|
|
352
|
+
function ellipsify(str = "", len = 4, delimiter = "..") {
|
|
353
|
+
const strLen = str.length;
|
|
354
|
+
const limit = len * 2 + delimiter.length;
|
|
355
|
+
return strLen >= limit ? str.substring(0, len) + delimiter + str.substring(strLen - len, strLen) : str;
|
|
356
|
+
}
|
|
357
|
+
var WalletUiSolanaClientContext = React19.createContext({});
|
|
136
358
|
|
|
137
|
-
// src/
|
|
138
|
-
|
|
359
|
+
// src/use-wallet-ui-solana-client.tsx
|
|
360
|
+
function useWalletUiSolanaClient() {
|
|
361
|
+
return React19.useContext(WalletUiSolanaClientContext);
|
|
362
|
+
}
|
|
363
|
+
function useWalletUiWallets() {
|
|
364
|
+
const readonlyWallets = react$1.useWallets();
|
|
365
|
+
return React19.useMemo(
|
|
366
|
+
() => readonlyWallets.filter((wallet) => wallet.chains.some((i) => i.startsWith("solana:"))).sort((a, b) => a.name.localeCompare(b.name)),
|
|
367
|
+
[readonlyWallets]
|
|
368
|
+
);
|
|
369
|
+
}
|
|
370
|
+
var STORAGE_KEY = "wallet-ui:selected-wallet-account";
|
|
139
371
|
var wasSetterInvoked = false;
|
|
140
|
-
function getSavedWalletAccount(wallets,
|
|
372
|
+
function getSavedWalletAccount(wallets, storageKey) {
|
|
141
373
|
if (wasSetterInvoked) {
|
|
142
374
|
return;
|
|
143
375
|
}
|
|
376
|
+
const savedWalletNameAndAddress = localStorage.getItem(storageKey);
|
|
144
377
|
if (!savedWalletNameAndAddress || typeof savedWalletNameAndAddress !== "string") {
|
|
145
378
|
return;
|
|
146
379
|
}
|
|
@@ -158,260 +391,438 @@ function getSavedWalletAccount(wallets, savedWalletNameAndAddress) {
|
|
|
158
391
|
}
|
|
159
392
|
}
|
|
160
393
|
}
|
|
161
|
-
function
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
394
|
+
function WalletUiAccountContextProvider({
|
|
395
|
+
children,
|
|
396
|
+
storageKey = STORAGE_KEY
|
|
397
|
+
}) {
|
|
398
|
+
const { cluster } = useWalletUiCluster();
|
|
399
|
+
const wallets = react$1.useWallets();
|
|
400
|
+
const [account, setAccountInternal] = React19.useState(
|
|
401
|
+
() => getSavedWalletAccount(wallets, storageKey)
|
|
166
402
|
);
|
|
167
|
-
|
|
168
|
-
|
|
403
|
+
function setAccount(setStateAction) {
|
|
404
|
+
setAccountInternal((prevAccount) => {
|
|
169
405
|
wasSetterInvoked = true;
|
|
170
|
-
const nextWalletAccount = typeof setStateAction === "function" ? setStateAction(
|
|
171
|
-
const accountKey = nextWalletAccount ? react.getUiWalletAccountStorageKey(nextWalletAccount) : void 0;
|
|
406
|
+
const nextWalletAccount = typeof setStateAction === "function" ? setStateAction(prevAccount) : setStateAction;
|
|
407
|
+
const accountKey = nextWalletAccount ? react$1.getUiWalletAccountStorageKey(nextWalletAccount) : void 0;
|
|
172
408
|
if (accountKey) {
|
|
173
|
-
|
|
409
|
+
localStorage.setItem(storageKey, accountKey);
|
|
174
410
|
} else {
|
|
175
|
-
|
|
411
|
+
localStorage.removeItem(storageKey);
|
|
176
412
|
}
|
|
177
413
|
return nextWalletAccount;
|
|
178
414
|
});
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
const savedWalletAccount = getSavedWalletAccount(wallets,
|
|
415
|
+
}
|
|
416
|
+
React19.useEffect(() => {
|
|
417
|
+
const savedWalletAccount = getSavedWalletAccount(wallets, storageKey);
|
|
182
418
|
if (savedWalletAccount) {
|
|
183
|
-
|
|
419
|
+
setAccountInternal(savedWalletAccount);
|
|
184
420
|
}
|
|
185
421
|
}, [wallets]);
|
|
186
|
-
const walletAccount =
|
|
187
|
-
if (
|
|
422
|
+
const walletAccount = React19.useMemo(() => {
|
|
423
|
+
if (account) {
|
|
188
424
|
for (const uiWallet of wallets) {
|
|
189
425
|
for (const uiWalletAccount of uiWallet.accounts) {
|
|
190
|
-
if (react.uiWalletAccountsAreSame(
|
|
426
|
+
if (react$1.uiWalletAccountsAreSame(account, uiWalletAccount)) {
|
|
191
427
|
return uiWalletAccount;
|
|
192
428
|
}
|
|
193
429
|
}
|
|
194
|
-
if (react.uiWalletAccountBelongsToUiWallet(
|
|
430
|
+
if (react$1.uiWalletAccountBelongsToUiWallet(account, uiWallet) && uiWallet.accounts[0]) {
|
|
195
431
|
return uiWallet.accounts[0];
|
|
196
432
|
}
|
|
197
433
|
}
|
|
198
434
|
}
|
|
199
|
-
}, [
|
|
200
|
-
|
|
201
|
-
if (
|
|
202
|
-
|
|
435
|
+
}, [account, wallets]);
|
|
436
|
+
React19.useEffect(() => {
|
|
437
|
+
if (account && !walletAccount) {
|
|
438
|
+
setAccountInternal(void 0);
|
|
439
|
+
}
|
|
440
|
+
}, [account, walletAccount]);
|
|
441
|
+
const wallet = React19.useMemo(() => {
|
|
442
|
+
if (!walletAccount) {
|
|
443
|
+
return void 0;
|
|
203
444
|
}
|
|
204
|
-
|
|
205
|
-
|
|
445
|
+
for (const uiWallet of wallets) {
|
|
446
|
+
for (const uiWalletAccount of uiWallet.accounts) {
|
|
447
|
+
if (react$1.uiWalletAccountsAreSame(walletAccount, uiWalletAccount)) {
|
|
448
|
+
return uiWallet;
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
if (react$1.uiWalletAccountBelongsToUiWallet(walletAccount, uiWallet) && uiWallet.accounts[0]) {
|
|
452
|
+
return uiWallet;
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
}, [walletAccount, wallets]);
|
|
456
|
+
const accountKeys = React19.useMemo(() => {
|
|
457
|
+
if (!account) {
|
|
458
|
+
return [];
|
|
459
|
+
}
|
|
460
|
+
return [cluster.id, react$1.getUiWalletAccountStorageKey(account)].filter(Boolean);
|
|
461
|
+
}, [account]);
|
|
462
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
463
|
+
WalletUiAccountContext.Provider,
|
|
464
|
+
{
|
|
465
|
+
value: React19.useMemo(
|
|
466
|
+
() => ({
|
|
467
|
+
account: walletAccount,
|
|
468
|
+
accountKeys,
|
|
469
|
+
setAccount,
|
|
470
|
+
wallet
|
|
471
|
+
}),
|
|
472
|
+
[walletAccount, wallet, accountKeys]
|
|
473
|
+
)
|
|
474
|
+
},
|
|
475
|
+
children
|
|
476
|
+
);
|
|
206
477
|
}
|
|
207
|
-
|
|
208
|
-
{
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
478
|
+
function useLocalStorage(key, initialValue) {
|
|
479
|
+
const [storedValue, setStoredValue] = React19.useState(() => {
|
|
480
|
+
try {
|
|
481
|
+
if (typeof window === "undefined") {
|
|
482
|
+
return initialValue;
|
|
483
|
+
}
|
|
484
|
+
const item = window.localStorage.getItem(key);
|
|
485
|
+
if (key.includes("wallet") || key.includes("account")) {
|
|
486
|
+
return initialValue;
|
|
487
|
+
}
|
|
488
|
+
return item ? JSON.parse(item) : initialValue;
|
|
489
|
+
} catch (error) {
|
|
490
|
+
console.warn(`Error reading localStorage key "${key}":`, error);
|
|
491
|
+
return initialValue;
|
|
492
|
+
}
|
|
493
|
+
});
|
|
494
|
+
const setValue = React19.useCallback(
|
|
495
|
+
(value) => {
|
|
496
|
+
try {
|
|
497
|
+
const valueToStore = value instanceof Function ? value(storedValue) : value;
|
|
498
|
+
setStoredValue(valueToStore);
|
|
499
|
+
if (typeof window !== "undefined") {
|
|
500
|
+
if (valueToStore === void 0 || valueToStore === null) {
|
|
501
|
+
window.localStorage.removeItem(key);
|
|
502
|
+
} else {
|
|
503
|
+
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
} catch (error) {
|
|
507
|
+
console.warn(`Error setting localStorage key "${key}":`, error);
|
|
508
|
+
}
|
|
509
|
+
},
|
|
510
|
+
[key, storedValue]
|
|
511
|
+
);
|
|
512
|
+
return [storedValue, setValue];
|
|
212
513
|
}
|
|
213
514
|
|
|
214
|
-
// src/
|
|
215
|
-
function
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
const
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
const [connected, setConnected] = React10.useState(false);
|
|
224
|
-
function change() {
|
|
225
|
-
menuService.send({ type: "CLOSE" });
|
|
226
|
-
dialogService.send({ type: "OPEN" });
|
|
227
|
-
}
|
|
228
|
-
function connectAccount(wallet2, account) {
|
|
229
|
-
console.log("connectAccount", account);
|
|
230
|
-
setWalletAccount(account);
|
|
231
|
-
setWallet(wallet2);
|
|
232
|
-
setConnected(true);
|
|
233
|
-
dialogService.send({ type: "CLOSE" });
|
|
515
|
+
// src/wallet-ui-cluster-context-provider.tsx
|
|
516
|
+
function WalletUiClusterContextProvider({
|
|
517
|
+
clusters,
|
|
518
|
+
render,
|
|
519
|
+
storageKey = "__wallet-ui:selected-cluster"
|
|
520
|
+
}) {
|
|
521
|
+
const [clusterId, setClusterId] = useLocalStorage(storageKey, "solana:devnet");
|
|
522
|
+
if (!clusters.length) {
|
|
523
|
+
throw new Error("No clusters provided");
|
|
234
524
|
}
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
525
|
+
const cluster = React19.useMemo(() => {
|
|
526
|
+
for (const cluster2 of clusters) {
|
|
527
|
+
if (cluster2.id === clusterId) {
|
|
528
|
+
return cluster2;
|
|
529
|
+
}
|
|
238
530
|
}
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
531
|
+
return clusters[0];
|
|
532
|
+
}, [clusterId, clusters]);
|
|
533
|
+
const value = {
|
|
534
|
+
cluster,
|
|
535
|
+
clusters,
|
|
536
|
+
setCluster: (cluster2) => {
|
|
537
|
+
localStorage.setItem(storageKey, cluster2);
|
|
538
|
+
setClusterId(cluster2);
|
|
539
|
+
}
|
|
540
|
+
};
|
|
541
|
+
return /* @__PURE__ */ React19__default.default.createElement(WalletUiClusterContext.Provider, { value }, render(value));
|
|
542
|
+
}
|
|
543
|
+
function WalletUiContextProvider({ children, size = "md" }) {
|
|
544
|
+
const { account, setAccount, wallet } = useWalletUiAccount();
|
|
545
|
+
const wallets = useWalletUiWallets();
|
|
546
|
+
const client = useWalletUiSolanaClient();
|
|
547
|
+
const walletHasAccounts = Boolean(wallet && wallet?.accounts.length > 0);
|
|
548
|
+
function connect3(account2) {
|
|
549
|
+
setAccount(account2);
|
|
242
550
|
}
|
|
243
551
|
function disconnect() {
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
552
|
+
setAccount(void 0);
|
|
553
|
+
}
|
|
554
|
+
function copy() {
|
|
555
|
+
if (!account) {
|
|
556
|
+
return;
|
|
557
|
+
}
|
|
558
|
+
core$1.handleCopyText(account.address);
|
|
248
559
|
}
|
|
249
560
|
const value = {
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
561
|
+
account,
|
|
562
|
+
client,
|
|
563
|
+
connect: connect3,
|
|
564
|
+
connected: walletHasAccounts,
|
|
253
565
|
copy,
|
|
254
|
-
dialogApi,
|
|
255
566
|
disconnect,
|
|
256
|
-
|
|
567
|
+
size,
|
|
257
568
|
wallet,
|
|
258
|
-
|
|
259
|
-
wallets: React10.useMemo(() => wallets.filter((wallet2) => wallet2.chains.some((i) => i.startsWith("solana:"))), [wallets])
|
|
569
|
+
wallets
|
|
260
570
|
};
|
|
261
|
-
return /* @__PURE__ */
|
|
571
|
+
return /* @__PURE__ */ React19__default.default.createElement(WalletUiContext.Provider, { value }, children);
|
|
262
572
|
}
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
const { cluster } = useSolanaCluster();
|
|
270
|
-
return /* @__PURE__ */ React10__default.default.createElement(SolanaClientProvider, { urlOrMoniker: cluster.urlOrMoniker }, children);
|
|
271
|
-
}
|
|
272
|
-
function SolanaWalletUiDialogTrigger(props) {
|
|
273
|
-
const { dialogApi } = useSolanaWalletUi();
|
|
274
|
-
console.log("SolanaWalletUiDialogTrigger", dialogApi);
|
|
275
|
-
return /* @__PURE__ */ React10__default.default.createElement("button", { ...props, ...dialogApi.getTriggerProps() }, "Select Wallet");
|
|
276
|
-
}
|
|
277
|
-
function SolanaWalletUiDropdown() {
|
|
278
|
-
const { change, connected, copy, disconnect, menuApi: api, wallet } = useSolanaWalletUi();
|
|
279
|
-
const menuItems = [
|
|
573
|
+
function WalletUiSolanaClientContextProvider({
|
|
574
|
+
children,
|
|
575
|
+
urlOrMoniker
|
|
576
|
+
}) {
|
|
577
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
578
|
+
WalletUiSolanaClientContext.Provider,
|
|
280
579
|
{
|
|
281
|
-
|
|
282
|
-
label: "Copy Address",
|
|
283
|
-
value: "copy"
|
|
580
|
+
value: React19.useMemo(() => gill.createSolanaClient({ urlOrMoniker }), [urlOrMoniker])
|
|
284
581
|
},
|
|
582
|
+
children
|
|
583
|
+
);
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
// src/wallet-ui.tsx
|
|
587
|
+
function createWalletUiConfig(props) {
|
|
588
|
+
return { ...props };
|
|
589
|
+
}
|
|
590
|
+
function WalletUi({
|
|
591
|
+
children,
|
|
592
|
+
config: { clusters, clusterStorageKey, selectedAccountStorageKey, ...config }
|
|
593
|
+
}) {
|
|
594
|
+
return /* @__PURE__ */ React19__default.default.createElement(React19__default.default.Fragment, null, /* @__PURE__ */ React19__default.default.createElement(
|
|
595
|
+
WalletUiClusterContextProvider,
|
|
285
596
|
{
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
597
|
+
clusters,
|
|
598
|
+
storageKey: clusterStorageKey,
|
|
599
|
+
render: ({ cluster }) => {
|
|
600
|
+
return /* @__PURE__ */ React19__default.default.createElement(WalletUiSolanaClientContextProvider, { urlOrMoniker: cluster.urlOrMoniker }, /* @__PURE__ */ React19__default.default.createElement(WalletUiAccountContextProvider, { storageKey: selectedAccountStorageKey }, /* @__PURE__ */ React19__default.default.createElement(WalletUiContextProvider, { ...config }, children)));
|
|
601
|
+
}
|
|
602
|
+
}
|
|
603
|
+
));
|
|
604
|
+
}
|
|
605
|
+
function WalletUiButton({ ...props }) {
|
|
606
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseButton, { ...props, label: "CLICK" });
|
|
607
|
+
}
|
|
608
|
+
function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
|
|
609
|
+
const dropdown = useBaseDropdown();
|
|
610
|
+
const { cluster, clusters, setCluster } = useWalletUiCluster();
|
|
611
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
612
|
+
BaseDropdown,
|
|
290
613
|
{
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
614
|
+
buttonProps: { ...buttonProps, label: cluster.label, size },
|
|
615
|
+
items: clusters.map((cluster2) => ({
|
|
616
|
+
handler: async () => {
|
|
617
|
+
setCluster(cluster2.id);
|
|
618
|
+
await Promise.resolve();
|
|
619
|
+
},
|
|
620
|
+
label: cluster2.label,
|
|
621
|
+
type: "Item" /* Item */,
|
|
622
|
+
value: cluster2.id
|
|
623
|
+
})),
|
|
624
|
+
dropdown,
|
|
625
|
+
...props
|
|
294
626
|
}
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
627
|
+
);
|
|
628
|
+
}
|
|
629
|
+
function WalletUiDropdown({ size = "md", ...props }) {
|
|
630
|
+
const { buttonProps, items, dropdown } = useWalletUiDropdown({ size });
|
|
631
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps, size }, items, dropdown });
|
|
632
|
+
}
|
|
633
|
+
function WalletUiIconNoWallet({ size, ...props }) {
|
|
634
|
+
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(
|
|
635
|
+
"circle",
|
|
298
636
|
{
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
637
|
+
cx: "48.5",
|
|
638
|
+
cy: "48",
|
|
639
|
+
r: "47",
|
|
640
|
+
stroke: "url(#paint1_linear_880_5115)",
|
|
641
|
+
strokeOpacity: "0.4",
|
|
642
|
+
strokeWidth: "2"
|
|
643
|
+
}
|
|
644
|
+
), /* @__PURE__ */ React19__default.default.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React19__default.default.createElement(
|
|
645
|
+
"path",
|
|
646
|
+
{
|
|
647
|
+
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",
|
|
648
|
+
fill: "url(#paint2_linear_880_5115)"
|
|
649
|
+
}
|
|
650
|
+
), /* @__PURE__ */ React19__default.default.createElement(
|
|
651
|
+
"path",
|
|
652
|
+
{
|
|
653
|
+
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",
|
|
654
|
+
fill: "url(#paint3_linear_880_5115)"
|
|
655
|
+
}
|
|
656
|
+
)), /* @__PURE__ */ React19__default.default.createElement("defs", null, /* @__PURE__ */ React19__default.default.createElement(
|
|
657
|
+
"linearGradient",
|
|
658
|
+
{
|
|
659
|
+
id: "paint0_linear_880_5115",
|
|
660
|
+
x1: "3.41664",
|
|
661
|
+
y1: "98.0933",
|
|
662
|
+
x2: "103.05",
|
|
663
|
+
y2: "8.42498",
|
|
664
|
+
gradientUnits: "userSpaceOnUse"
|
|
302
665
|
},
|
|
303
|
-
|
|
304
|
-
/* @__PURE__ */
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
"
|
|
666
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
667
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
668
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
669
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
670
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
671
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
672
|
+
), /* @__PURE__ */ React19__default.default.createElement(
|
|
673
|
+
"linearGradient",
|
|
308
674
|
{
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
return;
|
|
316
|
-
}
|
|
317
|
-
void item.handler();
|
|
318
|
-
}
|
|
675
|
+
id: "paint1_linear_880_5115",
|
|
676
|
+
x1: "3.41664",
|
|
677
|
+
y1: "98.0933",
|
|
678
|
+
x2: "103.05",
|
|
679
|
+
y2: "8.42498",
|
|
680
|
+
gradientUnits: "userSpaceOnUse"
|
|
319
681
|
},
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
function SolanaWalletUiButton() {
|
|
329
|
-
const { connected } = useSolanaWalletUi();
|
|
330
|
-
return connected ? /* @__PURE__ */ React10__default.default.createElement(SolanaWalletUiDropdown, null) : /* @__PURE__ */ React10__default.default.createElement(SolanaWalletUiDialogTrigger, null);
|
|
331
|
-
}
|
|
332
|
-
function SolanaWalletUiDialog({ description, title }) {
|
|
333
|
-
const { dialogApi: api, connected, disconnect } = useSolanaWalletUi();
|
|
334
|
-
if (!api) {
|
|
335
|
-
console.log("no api");
|
|
336
|
-
return null;
|
|
337
|
-
}
|
|
338
|
-
if (!api.open) {
|
|
339
|
-
console.log("no api.open");
|
|
340
|
-
return null;
|
|
341
|
-
}
|
|
342
|
-
return /* @__PURE__ */ React10__default.default.createElement(react$1.Portal, null, /* @__PURE__ */ React10__default.default.createElement("div", { className: "dialog", ...api.getBackdropProps() }), /* @__PURE__ */ React10__default.default.createElement("div", { className: "dialog", ...api.getPositionerProps() }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "dialog", ...api.getContentProps() }, title ? /* @__PURE__ */ React10__default.default.createElement("h2", { className: "dialog", ...api.getTitleProps() }, title) : null, description ? /* @__PURE__ */ React10__default.default.createElement("p", { className: "dialog", ...api.getDescriptionProps() }, description) : null, /* @__PURE__ */ React10__default.default.createElement("div", { style: { marginTop: "32px" } }, /* @__PURE__ */ React10__default.default.createElement(SolanaWalletUiDialogList, null), connected ? /* @__PURE__ */ React10__default.default.createElement("button", { onClick: disconnect }, "Disconnect") : null), /* @__PURE__ */ React10__default.default.createElement("button", { className: "dialog", ...api.getCloseTriggerProps() }, "\xD7"))));
|
|
343
|
-
}
|
|
344
|
-
function SolanaWalletUiDialogList() {
|
|
345
|
-
const { wallets } = useSolanaWalletUi();
|
|
346
|
-
return /* @__PURE__ */ React10__default.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "16px" } }, wallets.map((item, index) => /* @__PURE__ */ React10__default.default.createElement(SolanaWalletUiDialogListItem, { key: `${item.name}-${index}`, wallet: item })));
|
|
347
|
-
}
|
|
348
|
-
function SolanaWalletUiDialogListItem({ wallet }) {
|
|
349
|
-
const [isConnecting, connect3] = react.useConnect(wallet);
|
|
350
|
-
const [isDisconnecting, disconnect] = react.useDisconnect(wallet);
|
|
351
|
-
const { connectAccount, walletAccount } = useSolanaWalletUi();
|
|
352
|
-
const accounts = wallet.accounts ?? [];
|
|
353
|
-
const isConnected = wallet.accounts.length > 0;
|
|
354
|
-
const isPending = isConnecting || isDisconnecting;
|
|
355
|
-
if (isPending) {
|
|
356
|
-
return /* @__PURE__ */ React10__default.default.createElement("div", null, "Pending...");
|
|
357
|
-
}
|
|
358
|
-
return /* @__PURE__ */ React10__default.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ React10__default.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" } }, /* @__PURE__ */ React10__default.default.createElement("div", { style: { alignItems: "center", display: "flex", gap: "8px" } }, /* @__PURE__ */ React10__default.default.createElement("img", { src: wallet.icon, alt: wallet.name, style: { height: 32 } }), /* @__PURE__ */ React10__default.default.createElement("span", { style: { fontSize: "1rem", fontWeight: "500" } }, wallet.name)), isConnected ? /* @__PURE__ */ React10__default.default.createElement(
|
|
359
|
-
"button",
|
|
682
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
683
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
684
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
685
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
686
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
687
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
688
|
+
), /* @__PURE__ */ React19__default.default.createElement(
|
|
689
|
+
"linearGradient",
|
|
360
690
|
{
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
691
|
+
id: "paint2_linear_880_5115",
|
|
692
|
+
x1: "25.9583",
|
|
693
|
+
y1: "68.7101",
|
|
694
|
+
x2: "67.2337",
|
|
695
|
+
y2: "23.7879",
|
|
696
|
+
gradientUnits: "userSpaceOnUse"
|
|
365
697
|
},
|
|
366
|
-
"
|
|
367
|
-
|
|
368
|
-
"
|
|
698
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
699
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
700
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
701
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
702
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
703
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
704
|
+
), /* @__PURE__ */ React19__default.default.createElement(
|
|
705
|
+
"linearGradient",
|
|
369
706
|
{
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
707
|
+
id: "paint3_linear_880_5115",
|
|
708
|
+
x1: "58.3326",
|
|
709
|
+
y1: "49.4467",
|
|
710
|
+
x2: "61.0002",
|
|
711
|
+
y2: "45.4453",
|
|
712
|
+
gradientUnits: "userSpaceOnUse"
|
|
374
713
|
},
|
|
375
|
-
"
|
|
376
|
-
|
|
714
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
|
|
715
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
|
|
716
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
|
|
717
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
|
|
718
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
|
|
719
|
+
/* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
|
|
720
|
+
), /* @__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)" }))));
|
|
721
|
+
}
|
|
722
|
+
function WalletUiLabel({ className, size, wallet, ...props }) {
|
|
723
|
+
if (!wallet) {
|
|
724
|
+
return null;
|
|
725
|
+
}
|
|
726
|
+
return /* @__PURE__ */ React19__default.default.createElement("span", { className: `wallet-ui-list-label ${size ?? "md"} ${className ?? ""}`, ...props }, wallet.name);
|
|
727
|
+
}
|
|
728
|
+
function WalletUiListButton({ className, select, size = "md", wallet, ...props }) {
|
|
729
|
+
const [pending, setPending] = React19__default.default.useState(false);
|
|
730
|
+
function handleSelect() {
|
|
731
|
+
if (!select) {
|
|
732
|
+
return;
|
|
733
|
+
}
|
|
734
|
+
setPending(true);
|
|
735
|
+
const account = wallet.accounts.length > 0 ? wallet.accounts[0] : void 0;
|
|
736
|
+
if (!account) {
|
|
737
|
+
return;
|
|
738
|
+
}
|
|
739
|
+
void select(account).finally(() => setPending(false));
|
|
740
|
+
}
|
|
741
|
+
return /* @__PURE__ */ React19__default.default.createElement(
|
|
377
742
|
"button",
|
|
378
743
|
{
|
|
379
|
-
disabled:
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
744
|
+
disabled: pending,
|
|
745
|
+
className: `wallet-ui-list-button ${size} ${pending ? "wallet-ui-list-button-pending" : ""} ${className ?? ""}`,
|
|
746
|
+
onClick: handleSelect,
|
|
747
|
+
...props
|
|
383
748
|
},
|
|
384
|
-
|
|
385
|
-
|
|
749
|
+
/* @__PURE__ */ React19__default.default.createElement(WalletUiIcon, { className: "wallet-ui-list-button-icon", wallet, size }),
|
|
750
|
+
/* @__PURE__ */ React19__default.default.createElement(WalletUiLabel, { className: "wallet-ui-list-button-label", wallet, size })
|
|
751
|
+
);
|
|
386
752
|
}
|
|
387
753
|
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
exports.
|
|
400
|
-
exports.
|
|
401
|
-
exports.
|
|
402
|
-
exports.
|
|
403
|
-
exports.
|
|
404
|
-
exports.
|
|
405
|
-
exports.
|
|
406
|
-
exports.
|
|
407
|
-
exports.
|
|
408
|
-
exports.
|
|
754
|
+
// src/wallet-ui-list.tsx
|
|
755
|
+
function WalletUiList({ className, select, size = "md", wallets, ...props }) {
|
|
756
|
+
return /* @__PURE__ */ React19__default.default.createElement("div", { className: `wallet-ui-list ${size} ${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React19__default.default.createElement(WalletUiListButton, { key: wallet.name, select, size, wallet })));
|
|
757
|
+
}
|
|
758
|
+
function WalletUiModal({ size = "md", wallets, select, ...props }) {
|
|
759
|
+
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 }));
|
|
760
|
+
}
|
|
761
|
+
function WalletUiModalTrigger({ label = "Select Wallet", modal, ...props }) {
|
|
762
|
+
return /* @__PURE__ */ React19__default.default.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
exports.BaseButton = BaseButton;
|
|
766
|
+
exports.BaseDropdown = BaseDropdown;
|
|
767
|
+
exports.BaseDropdownChevronDown = BaseDropdownChevronDown;
|
|
768
|
+
exports.BaseDropdownItemType = BaseDropdownItemType;
|
|
769
|
+
exports.BaseModal = BaseModal;
|
|
770
|
+
exports.BaseSvg = BaseSvg;
|
|
771
|
+
exports.WalletUi = WalletUi;
|
|
772
|
+
exports.WalletUiAccountContext = WalletUiAccountContext;
|
|
773
|
+
exports.WalletUiAccountContextProvider = WalletUiAccountContextProvider;
|
|
774
|
+
exports.WalletUiButton = WalletUiButton;
|
|
775
|
+
exports.WalletUiClusterContext = WalletUiClusterContext;
|
|
776
|
+
exports.WalletUiClusterContextProvider = WalletUiClusterContextProvider;
|
|
777
|
+
exports.WalletUiClusterDropdown = WalletUiClusterDropdown;
|
|
778
|
+
exports.WalletUiContext = WalletUiContext;
|
|
779
|
+
exports.WalletUiContextProvider = WalletUiContextProvider;
|
|
780
|
+
exports.WalletUiDropdown = WalletUiDropdown;
|
|
781
|
+
exports.WalletUiIcon = WalletUiIcon;
|
|
782
|
+
exports.WalletUiIconClose = WalletUiIconClose;
|
|
783
|
+
exports.WalletUiIconNoWallet = WalletUiIconNoWallet;
|
|
784
|
+
exports.WalletUiLabel = WalletUiLabel;
|
|
785
|
+
exports.WalletUiList = WalletUiList;
|
|
786
|
+
exports.WalletUiListButton = WalletUiListButton;
|
|
787
|
+
exports.WalletUiModal = WalletUiModal;
|
|
788
|
+
exports.WalletUiModalTrigger = WalletUiModalTrigger;
|
|
789
|
+
exports.WalletUiSolanaClientContext = WalletUiSolanaClientContext;
|
|
790
|
+
exports.WalletUiSolanaClientContextProvider = WalletUiSolanaClientContextProvider;
|
|
791
|
+
exports.createWalletUiConfig = createWalletUiConfig;
|
|
792
|
+
exports.ellipsify = ellipsify;
|
|
793
|
+
exports.useBaseDropdown = useBaseDropdown;
|
|
794
|
+
exports.useBaseModal = useBaseModal;
|
|
795
|
+
exports.useWalletUi = useWalletUi;
|
|
796
|
+
exports.useWalletUiAccount = useWalletUiAccount;
|
|
797
|
+
exports.useWalletUiCluster = useWalletUiCluster;
|
|
798
|
+
exports.useWalletUiDropdown = useWalletUiDropdown;
|
|
799
|
+
exports.useWalletUiSolanaClient = useWalletUiSolanaClient;
|
|
800
|
+
exports.useWalletUiWallet = useWalletUiWallet;
|
|
801
|
+
exports.useWalletUiWallets = useWalletUiWallets;
|
|
802
|
+
Object.keys(react$1).forEach(function (k) {
|
|
803
|
+
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
804
|
+
enumerable: true,
|
|
805
|
+
get: function () { return react$1[k]; }
|
|
806
|
+
});
|
|
807
|
+
});
|
|
808
|
+
Object.keys(core$1).forEach(function (k) {
|
|
809
|
+
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
810
|
+
enumerable: true,
|
|
811
|
+
get: function () { return core$1[k]; }
|
|
812
|
+
});
|
|
813
|
+
});
|
|
409
814
|
Object.keys(react).forEach(function (k) {
|
|
410
815
|
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
411
816
|
enumerable: true,
|
|
412
817
|
get: function () { return react[k]; }
|
|
413
818
|
});
|
|
414
819
|
});
|
|
820
|
+
Object.keys(walletStandardFeatures).forEach(function (k) {
|
|
821
|
+
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
822
|
+
enumerable: true,
|
|
823
|
+
get: function () { return walletStandardFeatures[k]; }
|
|
824
|
+
});
|
|
825
|
+
});
|
|
415
826
|
Object.keys(core).forEach(function (k) {
|
|
416
827
|
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
417
828
|
enumerable: true,
|