@mysten/dapp-kit 0.3.0 → 0.5.0
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/CHANGELOG.md +12 -0
- package/README.md +4 -4
- package/dist/cjs/components/AccountDropdownMenu.d.ts +4 -0
- package/dist/cjs/components/AccountDropdownMenu.js +116 -42
- package/dist/cjs/components/AccountDropdownMenu.js.map +4 -4
- package/dist/cjs/components/ConnectButton.js +183 -110
- package/dist/cjs/components/ConnectButton.js.map +4 -4
- package/dist/cjs/components/SuiClientProvider.d.ts +4 -4
- package/dist/cjs/components/SuiClientProvider.js +1 -0
- package/dist/cjs/components/SuiClientProvider.js.map +2 -2
- package/dist/cjs/components/WalletProvider.js +1 -2
- package/dist/cjs/components/WalletProvider.js.map +2 -2
- package/dist/cjs/hooks/networkConfig.d.ts +10 -0
- package/dist/cjs/hooks/networkConfig.js +74 -0
- package/dist/cjs/hooks/networkConfig.js.map +7 -0
- package/dist/cjs/hooks/useResolveSuiNSNames.d.ts +107 -0
- package/dist/cjs/hooks/useResolveSuiNSNames.js +83 -0
- package/dist/cjs/hooks/useResolveSuiNSNames.js.map +7 -0
- package/dist/cjs/hooks/useSuiClient.js.map +2 -2
- package/dist/cjs/hooks/useSuiClientInfiniteQuery.js.map +2 -2
- package/dist/cjs/hooks/useSuiClientMutation.js.map +2 -2
- package/dist/cjs/hooks/useSuiClientQuery.js.map +2 -2
- package/dist/cjs/hooks/wallet/useSignAndExecuteTransactionBlock.js.map +2 -2
- package/dist/cjs/hooks/wallet/useUnsafeBurnerWallet.js.map +2 -2
- package/dist/cjs/index.css +127 -127
- package/dist/cjs/index.css.map +3 -3
- package/dist/cjs/index.d.ts +13 -10
- package/dist/cjs/index.js +594 -529
- package/dist/cjs/index.js.map +4 -4
- package/dist/cjs/walletStore.js +1 -2
- package/dist/cjs/walletStore.js.map +2 -2
- package/dist/esm/components/AccountDropdownMenu.d.ts +4 -0
- package/dist/esm/components/AccountDropdownMenu.js +106 -32
- package/dist/esm/components/AccountDropdownMenu.js.map +4 -4
- package/dist/esm/components/ConnectButton.js +156 -83
- package/dist/esm/components/ConnectButton.js.map +4 -4
- package/dist/esm/components/SuiClientProvider.d.ts +4 -4
- package/dist/esm/components/SuiClientProvider.js +1 -0
- package/dist/esm/components/SuiClientProvider.js.map +2 -2
- package/dist/esm/components/WalletProvider.js +1 -2
- package/dist/esm/components/WalletProvider.js.map +2 -2
- package/dist/esm/hooks/networkConfig.d.ts +10 -0
- package/dist/esm/hooks/networkConfig.js +51 -0
- package/dist/esm/hooks/networkConfig.js.map +7 -0
- package/dist/esm/hooks/useResolveSuiNSNames.d.ts +107 -0
- package/dist/esm/hooks/useResolveSuiNSNames.js +60 -0
- package/dist/esm/hooks/useResolveSuiNSNames.js.map +7 -0
- package/dist/esm/hooks/useSuiClient.js.map +2 -2
- package/dist/esm/hooks/useSuiClientInfiniteQuery.js.map +2 -2
- package/dist/esm/hooks/useSuiClientMutation.js.map +2 -2
- package/dist/esm/hooks/useSuiClientQuery.js.map +2 -2
- package/dist/esm/hooks/wallet/useSignAndExecuteTransactionBlock.js.map +2 -2
- package/dist/esm/hooks/wallet/useUnsafeBurnerWallet.js.map +2 -2
- package/dist/esm/index.css +127 -127
- package/dist/esm/index.css.map +3 -3
- package/dist/esm/index.d.ts +13 -10
- package/dist/esm/index.js +609 -544
- package/dist/esm/index.js.map +4 -4
- package/dist/esm/walletStore.js +1 -2
- package/dist/esm/walletStore.js.map +2 -2
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/AccountDropdownMenu.tsx +31 -9
- package/src/components/SuiClientProvider.tsx +11 -2
- package/src/hooks/networkConfig.ts +45 -0
- package/src/hooks/useResolveSuiNSNames.ts +31 -0
- package/src/index.ts +13 -10
- package/src/walletStore.ts +3 -4
package/dist/cjs/index.js
CHANGED
|
@@ -68,12 +68,14 @@ __export(src_exports, {
|
|
|
68
68
|
SuiClientContext: () => SuiClientContext,
|
|
69
69
|
SuiClientProvider: () => SuiClientProvider,
|
|
70
70
|
WalletProvider: () => WalletProvider,
|
|
71
|
+
createNetworkConfig: () => createNetworkConfig,
|
|
71
72
|
lightTheme: () => lightTheme,
|
|
72
73
|
useAccounts: () => useAccounts,
|
|
73
74
|
useConnectWallet: () => useConnectWallet,
|
|
74
75
|
useCurrentAccount: () => useCurrentAccount,
|
|
75
76
|
useCurrentWallet: () => useCurrentWallet,
|
|
76
77
|
useDisconnectWallet: () => useDisconnectWallet,
|
|
78
|
+
useResolveSuiNSName: () => useResolveSuiNSName,
|
|
77
79
|
useSignAndExecuteTransactionBlock: () => useSignAndExecuteTransactionBlock,
|
|
78
80
|
useSignPersonalMessage: () => useSignPersonalMessage,
|
|
79
81
|
useSignTransactionBlock: () => useSignTransactionBlock,
|
|
@@ -87,102 +89,12 @@ __export(src_exports, {
|
|
|
87
89
|
});
|
|
88
90
|
module.exports = __toCommonJS(src_exports);
|
|
89
91
|
|
|
90
|
-
// src/
|
|
91
|
-
var
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
var import_client = require("@mysten/sui.js/client");
|
|
95
|
-
var import_react = require("react");
|
|
96
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
97
|
-
var SuiClientContext = (0, import_react.createContext)(null);
|
|
98
|
-
var DEFAULT_NETWORKS = {
|
|
99
|
-
localnet: { url: (0, import_client.getFullnodeUrl)("localnet") }
|
|
100
|
-
};
|
|
101
|
-
var DEFAULT_CREATE_CLIENT = function createClient(_name, config) {
|
|
102
|
-
if ((0, import_client.isSuiClient)(config)) {
|
|
103
|
-
return config;
|
|
104
|
-
}
|
|
105
|
-
return new import_client.SuiClient(config);
|
|
106
|
-
};
|
|
107
|
-
function SuiClientProvider(props) {
|
|
108
|
-
const { onNetworkChange, network, children } = props;
|
|
109
|
-
const networks = props.networks ?? DEFAULT_NETWORKS;
|
|
110
|
-
const createClient2 = props.createClient ?? DEFAULT_CREATE_CLIENT;
|
|
111
|
-
const [selectedNetwork, setSelectedNetwork] = (0, import_react.useState)(
|
|
112
|
-
props.network ?? props.defaultNetwork ?? Object.keys(networks)[0]
|
|
113
|
-
);
|
|
114
|
-
const currentNetwork = props.network ?? selectedNetwork;
|
|
115
|
-
const client = (0, import_react.useMemo)(() => {
|
|
116
|
-
return createClient2(currentNetwork, networks[currentNetwork]);
|
|
117
|
-
}, [createClient2, currentNetwork, networks]);
|
|
118
|
-
const ctx = (0, import_react.useMemo)(() => {
|
|
119
|
-
return {
|
|
120
|
-
client,
|
|
121
|
-
networks,
|
|
122
|
-
network: currentNetwork,
|
|
123
|
-
selectNetwork: (newNetwork) => {
|
|
124
|
-
if (currentNetwork === newNetwork) {
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
if (!network && newNetwork !== selectedNetwork) {
|
|
128
|
-
setSelectedNetwork(newNetwork);
|
|
129
|
-
}
|
|
130
|
-
onNetworkChange?.(newNetwork);
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
}, [client, networks, selectedNetwork, currentNetwork, network, onNetworkChange]);
|
|
134
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SuiClientContext.Provider, { value: ctx, children });
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
// src/hooks/useSuiClient.ts
|
|
138
|
-
function useSuiClientContext() {
|
|
139
|
-
const suiClient = (0, import_react2.useContext)(SuiClientContext);
|
|
140
|
-
if (!suiClient) {
|
|
141
|
-
throw new Error(
|
|
142
|
-
"Could not find SuiClientContext. Ensure that you have set up the SuiClientProvider"
|
|
143
|
-
);
|
|
144
|
-
}
|
|
145
|
-
return suiClient;
|
|
146
|
-
}
|
|
147
|
-
function useSuiClient() {
|
|
148
|
-
return useSuiClientContext().client;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
// src/hooks/wallet/useWalletStore.ts
|
|
152
|
-
var import_react4 = require("react");
|
|
153
|
-
var import_zustand = require("zustand");
|
|
154
|
-
|
|
155
|
-
// src/contexts/walletContext.ts
|
|
156
|
-
var import_react3 = require("react");
|
|
157
|
-
var WalletContext = (0, import_react3.createContext)(null);
|
|
158
|
-
|
|
159
|
-
// src/hooks/wallet/useWalletStore.ts
|
|
160
|
-
function useWalletStore(selector) {
|
|
161
|
-
const store = (0, import_react4.useContext)(WalletContext);
|
|
162
|
-
if (!store) {
|
|
163
|
-
throw new Error(
|
|
164
|
-
"Could not find WalletContext. Ensure that you have set up the WalletProvider."
|
|
165
|
-
);
|
|
166
|
-
}
|
|
167
|
-
return (0, import_zustand.useStore)(store, selector);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
// src/hooks/wallet/useCurrentAccount.ts
|
|
171
|
-
function useCurrentAccount() {
|
|
172
|
-
return useWalletStore((state) => state.currentAccount);
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
// src/components/AccountDropdownMenu.tsx
|
|
176
|
-
var import_utils = require("@mysten/sui.js/utils");
|
|
177
|
-
var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
|
|
178
|
-
var import_clsx3 = __toESM(require("clsx"));
|
|
179
|
-
|
|
180
|
-
// src/hooks/wallet/useAccounts.ts
|
|
181
|
-
function useAccounts() {
|
|
182
|
-
return useWalletStore((state) => state.accounts);
|
|
183
|
-
}
|
|
92
|
+
// src/components/connect-modal/ConnectModal.tsx
|
|
93
|
+
var Dialog = __toESM(require("@radix-ui/react-dialog"));
|
|
94
|
+
var import_clsx6 = __toESM(require("clsx"));
|
|
95
|
+
var import_react8 = require("react");
|
|
184
96
|
|
|
185
|
-
// src/hooks/wallet/
|
|
97
|
+
// src/hooks/wallet/useConnectWallet.ts
|
|
186
98
|
var import_react_query = require("@tanstack/react-query");
|
|
187
99
|
|
|
188
100
|
// src/constants/walletMutationKeys.ts
|
|
@@ -201,234 +113,32 @@ function formMutationKeyFn(baseEntity) {
|
|
|
201
113
|
};
|
|
202
114
|
}
|
|
203
115
|
|
|
204
|
-
// src/
|
|
205
|
-
var
|
|
206
|
-
|
|
207
|
-
var WalletNoAccountSelectedError = class extends Error {
|
|
208
|
-
};
|
|
209
|
-
var WalletFeatureNotSupportedError = class extends Error {
|
|
210
|
-
};
|
|
211
|
-
var WalletAccountNotFoundError = class extends Error {
|
|
212
|
-
};
|
|
213
|
-
|
|
214
|
-
// src/hooks/wallet/useCurrentWallet.ts
|
|
215
|
-
function useCurrentWallet() {
|
|
216
|
-
return useWalletStore((state) => state.currentWallet);
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
// src/hooks/wallet/useDisconnectWallet.ts
|
|
220
|
-
function useDisconnectWallet({
|
|
221
|
-
mutationKey,
|
|
222
|
-
...mutationOptions
|
|
223
|
-
} = {}) {
|
|
224
|
-
const currentWallet = useCurrentWallet();
|
|
225
|
-
const setWalletDisconnected = useWalletStore((state) => state.setWalletDisconnected);
|
|
226
|
-
return (0, import_react_query.useMutation)({
|
|
227
|
-
mutationKey: walletMutationKeys.disconnectWallet(mutationKey),
|
|
228
|
-
mutationFn: async () => {
|
|
229
|
-
if (!currentWallet) {
|
|
230
|
-
throw new WalletNotConnectedError("No wallet is connected.");
|
|
231
|
-
}
|
|
232
|
-
try {
|
|
233
|
-
await currentWallet.features["standard:disconnect"]?.disconnect();
|
|
234
|
-
} catch (error) {
|
|
235
|
-
console.error("Failed to disconnect the application from the current wallet.", error);
|
|
236
|
-
}
|
|
237
|
-
setWalletDisconnected();
|
|
238
|
-
},
|
|
239
|
-
...mutationOptions
|
|
240
|
-
});
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
// src/hooks/wallet/useSwitchAccount.ts
|
|
244
|
-
var import_react_query2 = require("@tanstack/react-query");
|
|
245
|
-
function useSwitchAccount({
|
|
246
|
-
mutationKey,
|
|
247
|
-
...mutationOptions
|
|
248
|
-
} = {}) {
|
|
249
|
-
const currentWallet = useCurrentWallet();
|
|
250
|
-
const setAccountSwitched = useWalletStore((state) => state.setAccountSwitched);
|
|
251
|
-
return (0, import_react_query2.useMutation)({
|
|
252
|
-
mutationKey: walletMutationKeys.switchAccount(mutationKey),
|
|
253
|
-
mutationFn: async ({ account }) => {
|
|
254
|
-
if (!currentWallet) {
|
|
255
|
-
throw new WalletNotConnectedError("No wallet is connected.");
|
|
256
|
-
}
|
|
257
|
-
const accountToSelect = currentWallet.accounts.find(
|
|
258
|
-
(walletAccount) => walletAccount.address === account.address
|
|
259
|
-
);
|
|
260
|
-
if (!accountToSelect) {
|
|
261
|
-
throw new WalletAccountNotFoundError(
|
|
262
|
-
`No account with address ${account.address} is connected to ${currentWallet.name}.`
|
|
263
|
-
);
|
|
264
|
-
}
|
|
265
|
-
setAccountSwitched(accountToSelect);
|
|
266
|
-
},
|
|
267
|
-
...mutationOptions
|
|
268
|
-
});
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
// src/components/AccountDropdownMenu.css.ts
|
|
272
|
-
var connectedAccount = "AccountDropdownMenu_connectedAccount__div2ql0";
|
|
273
|
-
var menuContent = "AccountDropdownMenu_menuContent__div2ql1";
|
|
274
|
-
var menuItem = "AccountDropdownMenu_menuItem__div2ql2";
|
|
275
|
-
var separator = "AccountDropdownMenu_separator__div2ql4";
|
|
276
|
-
var switchAccountMenuItem = "AccountDropdownMenu_switchAccountMenuItem__div2ql3";
|
|
277
|
-
|
|
278
|
-
// src/components/icons/CheckIcon.tsx
|
|
279
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
280
|
-
function CheckIcon(props) {
|
|
281
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
282
|
-
"path",
|
|
283
|
-
{
|
|
284
|
-
fill: "currentColor",
|
|
285
|
-
d: "m11.726 5.048-4.73 5.156-1.722-1.879a.72.72 0 0 0-.529-.23.722.722 0 0 0-.525.24.858.858 0 0 0-.22.573.86.86 0 0 0 .211.576l2.255 2.458c.14.153.332.24.53.24.2 0 .391-.087.532-.24l5.261-5.735A.86.86 0 0 0 13 5.63a.858.858 0 0 0-.22-.572.722.722 0 0 0-.525-.24.72.72 0 0 0-.529.23Z"
|
|
286
|
-
}
|
|
287
|
-
) });
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
// src/components/icons/ChevronIcon.tsx
|
|
291
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
292
|
-
function ChevronIcon(props) {
|
|
293
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
294
|
-
"path",
|
|
295
|
-
{
|
|
296
|
-
stroke: "#A0B6C3",
|
|
297
|
-
strokeLinecap: "round",
|
|
298
|
-
strokeLinejoin: "round",
|
|
299
|
-
strokeWidth: 1.5,
|
|
300
|
-
d: "m4 6 4 4 4-4"
|
|
301
|
-
}
|
|
302
|
-
) });
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
// src/components/styling/StyleMarker.tsx
|
|
306
|
-
var import_react_slot = require("@radix-ui/react-slot");
|
|
307
|
-
var import_react5 = require("react");
|
|
308
|
-
|
|
309
|
-
// src/constants/styleDataAttribute.ts
|
|
310
|
-
var styleDataAttributeName = "data-dapp-kit";
|
|
311
|
-
var styleDataAttributeSelector = `[${styleDataAttributeName}]`;
|
|
312
|
-
var styleDataAttribute = { [styleDataAttributeName]: "" };
|
|
313
|
-
|
|
314
|
-
// src/components/styling/StyleMarker.tsx
|
|
315
|
-
var import_StyleMarker_css = __toESM(require_StyleMarker_css());
|
|
316
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
317
|
-
var StyleMarker = (0, import_react5.forwardRef)(({ children }, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_slot.Slot, { ref: forwardedRef, ...styleDataAttribute, children }));
|
|
318
|
-
StyleMarker.displayName = "StyleMarker";
|
|
319
|
-
|
|
320
|
-
// src/components/ui/Button.tsx
|
|
321
|
-
var import_react_slot2 = require("@radix-ui/react-slot");
|
|
322
|
-
var import_clsx = __toESM(require("clsx"));
|
|
323
|
-
var import_react6 = require("react");
|
|
324
|
-
|
|
325
|
-
// src/components/ui/Button.css.ts
|
|
326
|
-
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
327
|
-
var buttonVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Button_buttonVariants__x1s81q0", variantClassNames: { variant: { primary: "Button_buttonVariants_variant_primary__x1s81q1", outline: "Button_buttonVariants_variant_outline__x1s81q2" }, size: { md: "Button_buttonVariants_size_md__x1s81q3", lg: "Button_buttonVariants_size_lg__x1s81q4" } }, defaultVariants: { variant: "primary", size: "md" }, compoundVariants: [] });
|
|
328
|
-
|
|
329
|
-
// src/components/ui/Button.tsx
|
|
330
|
-
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
331
|
-
var Button = (0, import_react6.forwardRef)(
|
|
332
|
-
({ className, variant, size, asChild = false, ...props }, forwardedRef) => {
|
|
333
|
-
const Comp = asChild ? import_react_slot2.Slot : "button";
|
|
334
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
335
|
-
Comp,
|
|
336
|
-
{
|
|
337
|
-
...props,
|
|
338
|
-
className: (0, import_clsx.default)(buttonVariants({ variant, size }), className),
|
|
339
|
-
ref: forwardedRef
|
|
340
|
-
}
|
|
341
|
-
);
|
|
342
|
-
}
|
|
343
|
-
);
|
|
344
|
-
Button.displayName = "Button";
|
|
345
|
-
|
|
346
|
-
// src/components/ui/Text.tsx
|
|
347
|
-
var import_react_slot3 = require("@radix-ui/react-slot");
|
|
348
|
-
var import_clsx2 = __toESM(require("clsx"));
|
|
349
|
-
var import_react7 = require("react");
|
|
116
|
+
// src/hooks/wallet/useWalletStore.ts
|
|
117
|
+
var import_react2 = require("react");
|
|
118
|
+
var import_zustand = require("zustand");
|
|
350
119
|
|
|
351
|
-
// src/
|
|
352
|
-
var
|
|
353
|
-
var
|
|
120
|
+
// src/contexts/walletContext.ts
|
|
121
|
+
var import_react = require("react");
|
|
122
|
+
var WalletContext = (0, import_react.createContext)(null);
|
|
354
123
|
|
|
355
|
-
// src/
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
({
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
asChild = false,
|
|
362
|
-
as: Tag = "div",
|
|
363
|
-
size,
|
|
364
|
-
weight,
|
|
365
|
-
color,
|
|
366
|
-
mono,
|
|
367
|
-
...textProps
|
|
368
|
-
}, forwardedRef) => {
|
|
369
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
370
|
-
import_react_slot3.Slot,
|
|
371
|
-
{
|
|
372
|
-
...textProps,
|
|
373
|
-
ref: forwardedRef,
|
|
374
|
-
className: (0, import_clsx2.default)(textVariants({ size, weight, color, mono }), className),
|
|
375
|
-
children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tag, { children })
|
|
376
|
-
}
|
|
124
|
+
// src/hooks/wallet/useWalletStore.ts
|
|
125
|
+
function useWalletStore(selector) {
|
|
126
|
+
const store = (0, import_react2.useContext)(WalletContext);
|
|
127
|
+
if (!store) {
|
|
128
|
+
throw new Error(
|
|
129
|
+
"Could not find WalletContext. Ensure that you have set up the WalletProvider."
|
|
377
130
|
);
|
|
378
131
|
}
|
|
379
|
-
);
|
|
380
|
-
Text.displayName = "Text";
|
|
381
|
-
|
|
382
|
-
// src/components/AccountDropdownMenu.tsx
|
|
383
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
384
|
-
function AccountDropdownMenu({ currentAccount }) {
|
|
385
|
-
const { mutate: disconnectWallet } = useDisconnectWallet();
|
|
386
|
-
const { mutate: switchAccount } = useSwitchAccount();
|
|
387
|
-
const accounts = useAccounts();
|
|
388
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenu.Root, { modal: false, children: [
|
|
389
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Button, { size: "lg", className: connectedAccount, children: [
|
|
390
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { mono: true, weight: "bold", children: (0, import_utils.formatAddress)(currentAccount.address) }),
|
|
391
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronIcon, {})
|
|
392
|
-
] }) }) }),
|
|
393
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenu.Content, { className: menuContent, children: [
|
|
394
|
-
accounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
395
|
-
DropdownMenu.Item,
|
|
396
|
-
{
|
|
397
|
-
className: (0, import_clsx3.default)(menuItem, switchAccountMenuItem),
|
|
398
|
-
onSelect: () => switchAccount({ account }),
|
|
399
|
-
children: [
|
|
400
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { mono: true, children: (0, import_utils.formatAddress)(account.address) }),
|
|
401
|
-
currentAccount.address === account.address ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckIcon, {}) : null
|
|
402
|
-
]
|
|
403
|
-
},
|
|
404
|
-
account.address
|
|
405
|
-
)),
|
|
406
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenu.Separator, { className: separator }),
|
|
407
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
408
|
-
DropdownMenu.Item,
|
|
409
|
-
{
|
|
410
|
-
className: (0, import_clsx3.default)(menuItem),
|
|
411
|
-
onSelect: () => disconnectWallet(),
|
|
412
|
-
children: "Disconnect"
|
|
413
|
-
}
|
|
414
|
-
)
|
|
415
|
-
] }) }) })
|
|
416
|
-
] });
|
|
132
|
+
return (0, import_zustand.useStore)(store, selector);
|
|
417
133
|
}
|
|
418
134
|
|
|
419
|
-
// src/components/connect-modal/ConnectModal.tsx
|
|
420
|
-
var Dialog = __toESM(require("@radix-ui/react-dialog"));
|
|
421
|
-
var import_clsx7 = __toESM(require("clsx"));
|
|
422
|
-
var import_react10 = require("react");
|
|
423
|
-
|
|
424
135
|
// src/hooks/wallet/useConnectWallet.ts
|
|
425
|
-
var import_react_query3 = require("@tanstack/react-query");
|
|
426
136
|
function useConnectWallet({
|
|
427
137
|
mutationKey,
|
|
428
138
|
...mutationOptions
|
|
429
139
|
} = {}) {
|
|
430
140
|
const setWalletConnected = useWalletStore((state) => state.setWalletConnected);
|
|
431
|
-
return (0,
|
|
141
|
+
return (0, import_react_query.useMutation)({
|
|
432
142
|
mutationKey: walletMutationKeys.connectWallet(mutationKey),
|
|
433
143
|
mutationFn: async ({ wallet, accountAddress, ...standardConnectInput }) => {
|
|
434
144
|
const connectResult = await wallet.features["standard:connect"].connect(standardConnectInput);
|
|
@@ -454,9 +164,9 @@ function getSelectedAccount(connectedAccounts, accountAddress) {
|
|
|
454
164
|
}
|
|
455
165
|
|
|
456
166
|
// src/components/icons/BackIcon.tsx
|
|
457
|
-
var
|
|
167
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
458
168
|
function BackIcon(props) {
|
|
459
|
-
return /* @__PURE__ */ (0,
|
|
169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 24, height: 24, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
460
170
|
"path",
|
|
461
171
|
{
|
|
462
172
|
d: "M7.57 12.262c0 .341.13.629.403.895l5.175 5.059c.204.205.45.307.751.307.609 0 1.101-.485 1.101-1.087 0-.293-.123-.574-.349-.8L10.14 12.27l4.511-4.375A1.13 1.13 0 0 0 15 7.087C15 6.485 14.508 6 13.9 6c-.295 0-.54.103-.752.308l-5.175 5.058c-.28.28-.404.56-.404.896Z",
|
|
@@ -466,9 +176,9 @@ function BackIcon(props) {
|
|
|
466
176
|
}
|
|
467
177
|
|
|
468
178
|
// src/components/icons/CloseIcon.tsx
|
|
469
|
-
var
|
|
179
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
470
180
|
function CloseIcon(props) {
|
|
471
|
-
return /* @__PURE__ */ (0,
|
|
181
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: 10, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
472
182
|
"path",
|
|
473
183
|
{
|
|
474
184
|
d: "M9.708.292a.999.999 0 0 0-1.413 0l-3.289 3.29L1.717.291A.999.999 0 0 0 .305 1.705l3.289 3.289-3.29 3.289a.999.999 0 1 0 1.413 1.412l3.29-3.289 3.288 3.29a.999.999 0 0 0 1.413-1.413l-3.29-3.29 3.29-3.288a.999.999 0 0 0 0-1.413Z",
|
|
@@ -477,18 +187,33 @@ function CloseIcon(props) {
|
|
|
477
187
|
) });
|
|
478
188
|
}
|
|
479
189
|
|
|
190
|
+
// src/components/styling/StyleMarker.tsx
|
|
191
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
192
|
+
var import_react3 = require("react");
|
|
193
|
+
|
|
194
|
+
// src/constants/styleDataAttribute.ts
|
|
195
|
+
var styleDataAttributeName = "data-dapp-kit";
|
|
196
|
+
var styleDataAttributeSelector = `[${styleDataAttributeName}]`;
|
|
197
|
+
var styleDataAttribute = { [styleDataAttributeName]: "" };
|
|
198
|
+
|
|
199
|
+
// src/components/styling/StyleMarker.tsx
|
|
200
|
+
var import_StyleMarker_css = __toESM(require_StyleMarker_css());
|
|
201
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
202
|
+
var StyleMarker = (0, import_react3.forwardRef)(({ children }, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_slot.Slot, { ref: forwardedRef, ...styleDataAttribute, children }));
|
|
203
|
+
StyleMarker.displayName = "StyleMarker";
|
|
204
|
+
|
|
480
205
|
// src/components/ui/Heading.tsx
|
|
481
|
-
var
|
|
482
|
-
var
|
|
483
|
-
var
|
|
206
|
+
var import_react_slot2 = require("@radix-ui/react-slot");
|
|
207
|
+
var import_clsx = __toESM(require("clsx"));
|
|
208
|
+
var import_react4 = require("react");
|
|
484
209
|
|
|
485
210
|
// src/components/ui/Heading.css.ts
|
|
486
|
-
var
|
|
487
|
-
var headingVariants = (0,
|
|
211
|
+
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
212
|
+
var headingVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Heading__1aa835k0", variantClassNames: { size: { sm: "Heading_headingVariants_size_sm__1aa835k1", md: "Heading_headingVariants_size_md__1aa835k2", lg: "Heading_headingVariants_size_lg__1aa835k3", xl: "Heading_headingVariants_size_xl__1aa835k4" }, weight: { normal: "Heading_headingVariants_weight_normal__1aa835k5", bold: "Heading_headingVariants_weight_bold__1aa835k6" }, truncate: { true: "Heading_headingVariants_truncate_true__1aa835k7" } }, defaultVariants: { size: "lg", weight: "bold" }, compoundVariants: [] });
|
|
488
213
|
|
|
489
214
|
// src/components/ui/Heading.tsx
|
|
490
|
-
var
|
|
491
|
-
var Heading = (0,
|
|
215
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
216
|
+
var Heading = (0, import_react4.forwardRef)(
|
|
492
217
|
({
|
|
493
218
|
children,
|
|
494
219
|
className,
|
|
@@ -499,13 +224,13 @@ var Heading = (0, import_react8.forwardRef)(
|
|
|
499
224
|
truncate,
|
|
500
225
|
...headingProps
|
|
501
226
|
}, forwardedRef) => {
|
|
502
|
-
return /* @__PURE__ */ (0,
|
|
503
|
-
|
|
227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
228
|
+
import_react_slot2.Slot,
|
|
504
229
|
{
|
|
505
230
|
...headingProps,
|
|
506
231
|
ref: forwardedRef,
|
|
507
|
-
className: (0,
|
|
508
|
-
children: asChild ? children : /* @__PURE__ */ (0,
|
|
232
|
+
className: (0, import_clsx.default)(headingVariants({ size, weight, truncate }), className),
|
|
233
|
+
children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tag, { children })
|
|
509
234
|
}
|
|
510
235
|
);
|
|
511
236
|
}
|
|
@@ -513,19 +238,19 @@ var Heading = (0, import_react8.forwardRef)(
|
|
|
513
238
|
Heading.displayName = "Heading";
|
|
514
239
|
|
|
515
240
|
// src/components/ui/IconButton.tsx
|
|
516
|
-
var
|
|
517
|
-
var
|
|
518
|
-
var
|
|
241
|
+
var import_react_slot3 = require("@radix-ui/react-slot");
|
|
242
|
+
var import_clsx2 = __toESM(require("clsx"));
|
|
243
|
+
var import_react5 = require("react");
|
|
519
244
|
|
|
520
245
|
// src/components/ui/IconButton.css.ts
|
|
521
246
|
var container = "IconButton_container__s6n7bq0";
|
|
522
247
|
|
|
523
248
|
// src/components/ui/IconButton.tsx
|
|
524
|
-
var
|
|
525
|
-
var IconButton = (0,
|
|
249
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
250
|
+
var IconButton = (0, import_react5.forwardRef)(
|
|
526
251
|
({ className, asChild = false, ...props }, forwardedRef) => {
|
|
527
|
-
const Comp = asChild ?
|
|
528
|
-
return /* @__PURE__ */ (0,
|
|
252
|
+
const Comp = asChild ? import_react_slot3.Slot : "button";
|
|
253
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Comp, { ...props, className: (0, import_clsx2.default)(container, className), ref: forwardedRef });
|
|
529
254
|
}
|
|
530
255
|
);
|
|
531
256
|
IconButton.displayName = "Button";
|
|
@@ -543,6 +268,68 @@ var walletListContainerWithViewSelected = "ConnectModal_walletListContainerWithV
|
|
|
543
268
|
var walletListContent = "ConnectModal_walletListContent__gz8z98";
|
|
544
269
|
var whatIsAWalletButton = "ConnectModal_whatIsAWalletButton__gz8z93";
|
|
545
270
|
|
|
271
|
+
// src/components/ui/Button.tsx
|
|
272
|
+
var import_react_slot4 = require("@radix-ui/react-slot");
|
|
273
|
+
var import_clsx3 = __toESM(require("clsx"));
|
|
274
|
+
var import_react6 = require("react");
|
|
275
|
+
|
|
276
|
+
// src/components/ui/Button.css.ts
|
|
277
|
+
var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
278
|
+
var buttonVariants = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "Button_buttonVariants__x1s81q0", variantClassNames: { variant: { primary: "Button_buttonVariants_variant_primary__x1s81q1", outline: "Button_buttonVariants_variant_outline__x1s81q2" }, size: { md: "Button_buttonVariants_size_md__x1s81q3", lg: "Button_buttonVariants_size_lg__x1s81q4" } }, defaultVariants: { variant: "primary", size: "md" }, compoundVariants: [] });
|
|
279
|
+
|
|
280
|
+
// src/components/ui/Button.tsx
|
|
281
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
282
|
+
var Button = (0, import_react6.forwardRef)(
|
|
283
|
+
({ className, variant, size, asChild = false, ...props }, forwardedRef) => {
|
|
284
|
+
const Comp = asChild ? import_react_slot4.Slot : "button";
|
|
285
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
286
|
+
Comp,
|
|
287
|
+
{
|
|
288
|
+
...props,
|
|
289
|
+
className: (0, import_clsx3.default)(buttonVariants({ variant, size }), className),
|
|
290
|
+
ref: forwardedRef
|
|
291
|
+
}
|
|
292
|
+
);
|
|
293
|
+
}
|
|
294
|
+
);
|
|
295
|
+
Button.displayName = "Button";
|
|
296
|
+
|
|
297
|
+
// src/components/ui/Text.tsx
|
|
298
|
+
var import_react_slot5 = require("@radix-ui/react-slot");
|
|
299
|
+
var import_clsx4 = __toESM(require("clsx"));
|
|
300
|
+
var import_react7 = require("react");
|
|
301
|
+
|
|
302
|
+
// src/components/ui/Text.css.ts
|
|
303
|
+
var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
304
|
+
var textVariants = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "Text__2bv1ur0", variantClassNames: { size: { sm: "Text_textVariants_size_sm__2bv1ur1" }, weight: { normal: "Text_textVariants_weight_normal__2bv1ur2", medium: "Text_textVariants_weight_medium__2bv1ur3", bold: "Text_textVariants_weight_bold__2bv1ur4" }, color: { muted: "Text_textVariants_color_muted__2bv1ur5", danger: "Text_textVariants_color_danger__2bv1ur6" }, mono: { true: "Text_textVariants_mono_true__2bv1ur7" } }, defaultVariants: { size: "sm", weight: "normal" }, compoundVariants: [] });
|
|
305
|
+
|
|
306
|
+
// src/components/ui/Text.tsx
|
|
307
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
308
|
+
var Text = (0, import_react7.forwardRef)(
|
|
309
|
+
({
|
|
310
|
+
children,
|
|
311
|
+
className,
|
|
312
|
+
asChild = false,
|
|
313
|
+
as: Tag = "div",
|
|
314
|
+
size,
|
|
315
|
+
weight,
|
|
316
|
+
color,
|
|
317
|
+
mono,
|
|
318
|
+
...textProps
|
|
319
|
+
}, forwardedRef) => {
|
|
320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
321
|
+
import_react_slot5.Slot,
|
|
322
|
+
{
|
|
323
|
+
...textProps,
|
|
324
|
+
ref: forwardedRef,
|
|
325
|
+
className: (0, import_clsx4.default)(textVariants({ size, weight, color, mono }), className),
|
|
326
|
+
children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Tag, { children })
|
|
327
|
+
}
|
|
328
|
+
);
|
|
329
|
+
}
|
|
330
|
+
);
|
|
331
|
+
Text.displayName = "Text";
|
|
332
|
+
|
|
546
333
|
// src/components/connect-modal/views/ConnectionStatus.css.ts
|
|
547
334
|
var connectionStatus = "ConnectionStatus_connectionStatus__nckm2d3";
|
|
548
335
|
var container2 = "ConnectionStatus_container__nckm2d0";
|
|
@@ -551,14 +338,14 @@ var title2 = "ConnectionStatus_title__nckm2d2";
|
|
|
551
338
|
var walletIcon = "ConnectionStatus_walletIcon__nckm2d1";
|
|
552
339
|
|
|
553
340
|
// src/components/connect-modal/views/ConnectionStatus.tsx
|
|
554
|
-
var
|
|
341
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
555
342
|
function ConnectionStatus({
|
|
556
343
|
selectedWallet,
|
|
557
344
|
hadConnectionError,
|
|
558
345
|
onRetryConnection
|
|
559
346
|
}) {
|
|
560
|
-
return /* @__PURE__ */ (0,
|
|
561
|
-
/* @__PURE__ */ (0,
|
|
347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: container2, children: [
|
|
348
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
562
349
|
"img",
|
|
563
350
|
{
|
|
564
351
|
className: walletIcon,
|
|
@@ -566,12 +353,12 @@ function ConnectionStatus({
|
|
|
566
353
|
alt: `${selectedWallet.name} logo`
|
|
567
354
|
}
|
|
568
355
|
),
|
|
569
|
-
/* @__PURE__ */ (0,
|
|
356
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: title2, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Heading, { as: "h2", size: "xl", children: [
|
|
570
357
|
"Opening ",
|
|
571
358
|
selectedWallet.name
|
|
572
359
|
] }) }),
|
|
573
|
-
/* @__PURE__ */ (0,
|
|
574
|
-
hadConnectionError ? /* @__PURE__ */ (0,
|
|
360
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: connectionStatus, children: hadConnectionError ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: "danger", children: "Connection failed" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { color: "muted", children: "Confirm connection in the wallet..." }) }),
|
|
361
|
+
hadConnectionError ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: retryButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { type: "button", variant: "outline", onClick: () => onRetryConnection(selectedWallet), children: "Retry Connection" }) }) : null
|
|
575
362
|
] });
|
|
576
363
|
}
|
|
577
364
|
|
|
@@ -579,11 +366,11 @@ function ConnectionStatus({
|
|
|
579
366
|
var container3 = "InfoSection_container__1wtioi70";
|
|
580
367
|
|
|
581
368
|
// src/components/connect-modal/InfoSection.tsx
|
|
582
|
-
var
|
|
369
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
583
370
|
function InfoSection({ title: title3, children }) {
|
|
584
|
-
return /* @__PURE__ */ (0,
|
|
585
|
-
/* @__PURE__ */ (0,
|
|
586
|
-
/* @__PURE__ */ (0,
|
|
371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: container3, children: [
|
|
372
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Heading, { as: "h3", size: "sm", weight: "normal", children: title3 }),
|
|
373
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { weight: "medium", color: "muted", children })
|
|
587
374
|
] });
|
|
588
375
|
}
|
|
589
376
|
|
|
@@ -593,15 +380,15 @@ var content2 = "GettingStarted_content__1fp07e11";
|
|
|
593
380
|
var installButtonContainer = "GettingStarted_installButtonContainer__1fp07e12";
|
|
594
381
|
|
|
595
382
|
// src/components/connect-modal/views/GettingStarted.tsx
|
|
596
|
-
var
|
|
383
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
597
384
|
function GettingStarted() {
|
|
598
|
-
return /* @__PURE__ */ (0,
|
|
599
|
-
/* @__PURE__ */ (0,
|
|
600
|
-
/* @__PURE__ */ (0,
|
|
601
|
-
/* @__PURE__ */ (0,
|
|
602
|
-
/* @__PURE__ */ (0,
|
|
603
|
-
/* @__PURE__ */ (0,
|
|
604
|
-
/* @__PURE__ */ (0,
|
|
385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: container4, children: [
|
|
386
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Heading, { as: "h2", children: "Get Started with Sui" }),
|
|
387
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: content2, children: [
|
|
388
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoSection, { title: "Install the Sui Wallet Extension", children: "We recommend pinning Sui Wallet to your taskbar for quicker access." }),
|
|
389
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoSection, { title: "Create or Import a Wallet", children: "Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone." }),
|
|
390
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoSection, { title: "Refresh Your Browser", children: "Once you set up your wallet, refresh this window browser to load up the extension." }),
|
|
391
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: installButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { variant: "outline", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
605
392
|
"a",
|
|
606
393
|
{
|
|
607
394
|
href: "https://chrome.google.com/webstore/detail/sui-wallet/opcgpfmipidbgpenhmajoajpbobppdil",
|
|
@@ -619,13 +406,13 @@ var container5 = "WhatIsAWallet_container__1ktpkq90";
|
|
|
619
406
|
var content3 = "WhatIsAWallet_content__1ktpkq91";
|
|
620
407
|
|
|
621
408
|
// src/components/connect-modal/views/WhatIsAWallet.tsx
|
|
622
|
-
var
|
|
409
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
623
410
|
function WhatIsAWallet() {
|
|
624
|
-
return /* @__PURE__ */ (0,
|
|
625
|
-
/* @__PURE__ */ (0,
|
|
626
|
-
/* @__PURE__ */ (0,
|
|
627
|
-
/* @__PURE__ */ (0,
|
|
628
|
-
/* @__PURE__ */ (0,
|
|
411
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: container5, children: [
|
|
412
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Heading, { as: "h2", children: "What is a Wallet" }),
|
|
413
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: content3, children: [
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(InfoSection, { title: "Easy Login", children: "No need to create new accounts and passwords for every website. Just connect your wallet and get going." }),
|
|
415
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(InfoSection, { title: "Store your Digital Assets", children: "Send, receive, store, and display your digital assets like NFTs & coins." })
|
|
629
416
|
] })
|
|
630
417
|
] });
|
|
631
418
|
}
|
|
@@ -636,11 +423,11 @@ function useWallets() {
|
|
|
636
423
|
}
|
|
637
424
|
|
|
638
425
|
// src/components/icons/SuiIcon.tsx
|
|
639
|
-
var
|
|
426
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
640
427
|
function SuiIcon(props) {
|
|
641
|
-
return /* @__PURE__ */ (0,
|
|
642
|
-
/* @__PURE__ */ (0,
|
|
643
|
-
/* @__PURE__ */ (0,
|
|
428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { width: 28, height: 28, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
429
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { width: 28, height: 28, rx: 6, fill: "#6FBCF0" }),
|
|
430
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
644
431
|
"path",
|
|
645
432
|
{
|
|
646
433
|
fillRule: "evenodd",
|
|
@@ -656,7 +443,7 @@ function SuiIcon(props) {
|
|
|
656
443
|
var container6 = "WalletList_container__1v2s6cz0";
|
|
657
444
|
|
|
658
445
|
// src/components/connect-modal/wallet-list/WalletListItem.tsx
|
|
659
|
-
var
|
|
446
|
+
var import_clsx5 = require("clsx");
|
|
660
447
|
|
|
661
448
|
// src/components/connect-modal/wallet-list/WalletListItem.css.ts
|
|
662
449
|
var container7 = "WalletListItem_container__1dqqtqs0";
|
|
@@ -665,27 +452,27 @@ var walletIcon2 = "WalletListItem_walletIcon__1dqqtqs3";
|
|
|
665
452
|
var walletItem = "WalletListItem_walletItem__1dqqtqs1";
|
|
666
453
|
|
|
667
454
|
// src/components/connect-modal/wallet-list/WalletListItem.tsx
|
|
668
|
-
var
|
|
455
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
669
456
|
function WalletListItem({ name, icon, onClick, isSelected = false }) {
|
|
670
|
-
return /* @__PURE__ */ (0,
|
|
457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: container7, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
671
458
|
"button",
|
|
672
459
|
{
|
|
673
|
-
className: (0,
|
|
460
|
+
className: (0, import_clsx5.clsx)(walletItem, { [selectedWalletItem]: isSelected }),
|
|
674
461
|
type: "button",
|
|
675
462
|
onClick,
|
|
676
463
|
children: [
|
|
677
|
-
typeof icon === "string" ? /* @__PURE__ */ (0,
|
|
678
|
-
/* @__PURE__ */ (0,
|
|
464
|
+
typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { className: walletIcon2, src: icon, alt: `${name} logo` }) : icon,
|
|
465
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Heading, { size: "md", truncate: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: name }) })
|
|
679
466
|
]
|
|
680
467
|
}
|
|
681
468
|
) });
|
|
682
469
|
}
|
|
683
470
|
|
|
684
471
|
// src/components/connect-modal/wallet-list/WalletList.tsx
|
|
685
|
-
var
|
|
472
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
686
473
|
function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }) {
|
|
687
474
|
const wallets = useWallets();
|
|
688
|
-
return /* @__PURE__ */ (0,
|
|
475
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: container6, children: wallets.length > 0 ? wallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
689
476
|
WalletListItem,
|
|
690
477
|
{
|
|
691
478
|
name: wallet.name,
|
|
@@ -694,11 +481,11 @@ function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }) {
|
|
|
694
481
|
onClick: () => onSelect(wallet)
|
|
695
482
|
},
|
|
696
483
|
wallet.name
|
|
697
|
-
)) : /* @__PURE__ */ (0,
|
|
484
|
+
)) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
698
485
|
WalletListItem,
|
|
699
486
|
{
|
|
700
487
|
name: "Sui Wallet",
|
|
701
|
-
icon: /* @__PURE__ */ (0,
|
|
488
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SuiIcon, {}),
|
|
702
489
|
onClick: onPlaceholderClick,
|
|
703
490
|
isSelected: true
|
|
704
491
|
}
|
|
@@ -706,11 +493,11 @@ function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }) {
|
|
|
706
493
|
}
|
|
707
494
|
|
|
708
495
|
// src/components/connect-modal/ConnectModal.tsx
|
|
709
|
-
var
|
|
496
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
710
497
|
function ConnectModal({ trigger, open, defaultOpen, onOpenChange }) {
|
|
711
|
-
const [isModalOpen, setModalOpen] = (0,
|
|
712
|
-
const [currentView, setCurrentView] = (0,
|
|
713
|
-
const [selectedWallet, setSelectedWallet] = (0,
|
|
498
|
+
const [isModalOpen, setModalOpen] = (0, import_react8.useState)(open ?? defaultOpen);
|
|
499
|
+
const [currentView, setCurrentView] = (0, import_react8.useState)();
|
|
500
|
+
const [selectedWallet, setSelectedWallet] = (0, import_react8.useState)();
|
|
714
501
|
const { mutate, isError } = useConnectWallet();
|
|
715
502
|
const resetSelection = () => {
|
|
716
503
|
setSelectedWallet(void 0);
|
|
@@ -735,13 +522,13 @@ function ConnectModal({ trigger, open, defaultOpen, onOpenChange }) {
|
|
|
735
522
|
let modalContent;
|
|
736
523
|
switch (currentView) {
|
|
737
524
|
case "what-is-a-wallet":
|
|
738
|
-
modalContent = /* @__PURE__ */ (0,
|
|
525
|
+
modalContent = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(WhatIsAWallet, {});
|
|
739
526
|
break;
|
|
740
527
|
case "getting-started":
|
|
741
|
-
modalContent = /* @__PURE__ */ (0,
|
|
528
|
+
modalContent = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GettingStarted, {});
|
|
742
529
|
break;
|
|
743
530
|
case "connection-status":
|
|
744
|
-
modalContent = /* @__PURE__ */ (0,
|
|
531
|
+
modalContent = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
745
532
|
ConnectionStatus,
|
|
746
533
|
{
|
|
747
534
|
selectedWallet,
|
|
@@ -751,62 +538,330 @@ function ConnectModal({ trigger, open, defaultOpen, onOpenChange }) {
|
|
|
751
538
|
);
|
|
752
539
|
break;
|
|
753
540
|
default:
|
|
754
|
-
modalContent = /* @__PURE__ */ (0,
|
|
541
|
+
modalContent = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(WhatIsAWallet, {});
|
|
755
542
|
}
|
|
756
|
-
return /* @__PURE__ */ (0,
|
|
757
|
-
/* @__PURE__ */ (0,
|
|
758
|
-
/* @__PURE__ */ (0,
|
|
759
|
-
/* @__PURE__ */ (0,
|
|
543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Dialog.Root, { open: open ?? isModalOpen, onOpenChange: handleOpenChange, children: [
|
|
544
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Trigger, { asChild: true, children: trigger }) }),
|
|
545
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Overlay, { className: overlay, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Dialog.Content, { className: content, "aria-describedby": void 0, children: [
|
|
546
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
547
|
+
"div",
|
|
548
|
+
{
|
|
549
|
+
className: (0, import_clsx6.default)(walletListContainer, {
|
|
550
|
+
[walletListContainerWithViewSelected]: !!currentView
|
|
551
|
+
}),
|
|
552
|
+
children: [
|
|
553
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: walletListContent, children: [
|
|
554
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Title, { className: title, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading, { as: "h2", children: "Connect a Wallet" }) }),
|
|
555
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
556
|
+
WalletList,
|
|
557
|
+
{
|
|
558
|
+
selectedWalletName: selectedWallet?.name,
|
|
559
|
+
onPlaceholderClick: () => setCurrentView("getting-started"),
|
|
560
|
+
onSelect: (wallet) => {
|
|
561
|
+
if (selectedWallet?.name !== wallet.name) {
|
|
562
|
+
setSelectedWallet(wallet);
|
|
563
|
+
connectWallet(wallet);
|
|
564
|
+
}
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
)
|
|
568
|
+
] }),
|
|
569
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
570
|
+
"button",
|
|
571
|
+
{
|
|
572
|
+
className: whatIsAWalletButton,
|
|
573
|
+
onClick: () => setCurrentView("what-is-a-wallet"),
|
|
574
|
+
type: "button",
|
|
575
|
+
children: "What is a Wallet?"
|
|
576
|
+
}
|
|
577
|
+
)
|
|
578
|
+
]
|
|
579
|
+
}
|
|
580
|
+
),
|
|
581
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
760
582
|
"div",
|
|
761
583
|
{
|
|
762
|
-
className: (0,
|
|
763
|
-
[
|
|
764
|
-
}),
|
|
765
|
-
children: [
|
|
766
|
-
/* @__PURE__ */ (0,
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
584
|
+
className: (0, import_clsx6.default)(viewContainer, {
|
|
585
|
+
[selectedViewContainer]: !!currentView
|
|
586
|
+
}),
|
|
587
|
+
children: [
|
|
588
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: backButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton, { type: "button", "aria-label": "Back", onClick: () => resetSelection(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BackIcon, {}) }) }),
|
|
589
|
+
modalContent
|
|
590
|
+
]
|
|
591
|
+
}
|
|
592
|
+
),
|
|
593
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog.Close, { className: closeButtonContainer, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconButton, { type: "button", "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CloseIcon, {}) }) })
|
|
594
|
+
] }) }) }) })
|
|
595
|
+
] });
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
// src/hooks/wallet/useCurrentAccount.ts
|
|
599
|
+
function useCurrentAccount() {
|
|
600
|
+
return useWalletStore((state) => state.currentAccount);
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
// src/components/AccountDropdownMenu.tsx
|
|
604
|
+
var import_utils = require("@mysten/sui.js/utils");
|
|
605
|
+
var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
|
|
606
|
+
var import_clsx7 = __toESM(require("clsx"));
|
|
607
|
+
|
|
608
|
+
// src/hooks/useSuiClientQuery.ts
|
|
609
|
+
var import_react_query2 = require("@tanstack/react-query");
|
|
610
|
+
|
|
611
|
+
// src/hooks/useSuiClient.ts
|
|
612
|
+
var import_react10 = require("react");
|
|
613
|
+
|
|
614
|
+
// src/components/SuiClientProvider.tsx
|
|
615
|
+
var import_client = require("@mysten/sui.js/client");
|
|
616
|
+
var import_react9 = require("react");
|
|
617
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
618
|
+
var SuiClientContext = (0, import_react9.createContext)(null);
|
|
619
|
+
var DEFAULT_NETWORKS = {
|
|
620
|
+
localnet: { url: (0, import_client.getFullnodeUrl)("localnet") }
|
|
621
|
+
};
|
|
622
|
+
var DEFAULT_CREATE_CLIENT = function createClient(_name, config) {
|
|
623
|
+
if ((0, import_client.isSuiClient)(config)) {
|
|
624
|
+
return config;
|
|
625
|
+
}
|
|
626
|
+
return new import_client.SuiClient(config);
|
|
627
|
+
};
|
|
628
|
+
function SuiClientProvider(props) {
|
|
629
|
+
const { onNetworkChange, network, children } = props;
|
|
630
|
+
const networks = props.networks ?? DEFAULT_NETWORKS;
|
|
631
|
+
const createClient2 = props.createClient ?? DEFAULT_CREATE_CLIENT;
|
|
632
|
+
const [selectedNetwork, setSelectedNetwork] = (0, import_react9.useState)(
|
|
633
|
+
props.network ?? props.defaultNetwork ?? Object.keys(networks)[0]
|
|
634
|
+
);
|
|
635
|
+
const currentNetwork = props.network ?? selectedNetwork;
|
|
636
|
+
const client = (0, import_react9.useMemo)(() => {
|
|
637
|
+
return createClient2(currentNetwork, networks[currentNetwork]);
|
|
638
|
+
}, [createClient2, currentNetwork, networks]);
|
|
639
|
+
const ctx = (0, import_react9.useMemo)(() => {
|
|
640
|
+
return {
|
|
641
|
+
client,
|
|
642
|
+
networks,
|
|
643
|
+
network: currentNetwork,
|
|
644
|
+
config: networks[currentNetwork] instanceof import_client.SuiClient ? null : networks[currentNetwork],
|
|
645
|
+
selectNetwork: (newNetwork) => {
|
|
646
|
+
if (currentNetwork === newNetwork) {
|
|
647
|
+
return;
|
|
648
|
+
}
|
|
649
|
+
if (!network && newNetwork !== selectedNetwork) {
|
|
650
|
+
setSelectedNetwork(newNetwork);
|
|
651
|
+
}
|
|
652
|
+
onNetworkChange?.(newNetwork);
|
|
653
|
+
}
|
|
654
|
+
};
|
|
655
|
+
}, [client, networks, selectedNetwork, currentNetwork, network, onNetworkChange]);
|
|
656
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SuiClientContext.Provider, { value: ctx, children });
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
// src/hooks/useSuiClient.ts
|
|
660
|
+
function useSuiClientContext() {
|
|
661
|
+
const suiClient = (0, import_react10.useContext)(SuiClientContext);
|
|
662
|
+
if (!suiClient) {
|
|
663
|
+
throw new Error(
|
|
664
|
+
"Could not find SuiClientContext. Ensure that you have set up the SuiClientProvider"
|
|
665
|
+
);
|
|
666
|
+
}
|
|
667
|
+
return suiClient;
|
|
668
|
+
}
|
|
669
|
+
function useSuiClient() {
|
|
670
|
+
return useSuiClientContext().client;
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
// src/hooks/useSuiClientQuery.ts
|
|
674
|
+
function useSuiClientQuery(...args) {
|
|
675
|
+
const [method, params, { queryKey = [], ...options } = {}] = args;
|
|
676
|
+
const suiContext = useSuiClientContext();
|
|
677
|
+
return (0, import_react_query2.useQuery)({
|
|
678
|
+
...options,
|
|
679
|
+
queryKey: [suiContext.network, method, params, ...queryKey],
|
|
680
|
+
queryFn: async () => {
|
|
681
|
+
return await suiContext.client[method](params);
|
|
682
|
+
}
|
|
683
|
+
});
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
// src/hooks/useResolveSuiNSNames.ts
|
|
687
|
+
function useResolveSuiNSName(address, options) {
|
|
688
|
+
const { data, ...rest } = useSuiClientQuery(
|
|
689
|
+
"resolveNameServiceNames",
|
|
690
|
+
{
|
|
691
|
+
address,
|
|
692
|
+
limit: 1
|
|
693
|
+
},
|
|
694
|
+
{
|
|
695
|
+
refetchOnWindowFocus: false,
|
|
696
|
+
retry: false,
|
|
697
|
+
...options,
|
|
698
|
+
enabled: !!address && options?.enabled !== false
|
|
699
|
+
}
|
|
700
|
+
);
|
|
701
|
+
return { data: data?.data?.[0] ?? null, ...rest };
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
// src/hooks/wallet/useAccounts.ts
|
|
705
|
+
function useAccounts() {
|
|
706
|
+
return useWalletStore((state) => state.accounts);
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
// src/hooks/wallet/useDisconnectWallet.ts
|
|
710
|
+
var import_react_query3 = require("@tanstack/react-query");
|
|
711
|
+
|
|
712
|
+
// src/errors/walletErrors.ts
|
|
713
|
+
var WalletNotConnectedError = class extends Error {
|
|
714
|
+
};
|
|
715
|
+
var WalletNoAccountSelectedError = class extends Error {
|
|
716
|
+
};
|
|
717
|
+
var WalletFeatureNotSupportedError = class extends Error {
|
|
718
|
+
};
|
|
719
|
+
var WalletAccountNotFoundError = class extends Error {
|
|
720
|
+
};
|
|
721
|
+
|
|
722
|
+
// src/hooks/wallet/useCurrentWallet.ts
|
|
723
|
+
function useCurrentWallet() {
|
|
724
|
+
return useWalletStore((state) => state.currentWallet);
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
// src/hooks/wallet/useDisconnectWallet.ts
|
|
728
|
+
function useDisconnectWallet({
|
|
729
|
+
mutationKey,
|
|
730
|
+
...mutationOptions
|
|
731
|
+
} = {}) {
|
|
732
|
+
const currentWallet = useCurrentWallet();
|
|
733
|
+
const setWalletDisconnected = useWalletStore((state) => state.setWalletDisconnected);
|
|
734
|
+
return (0, import_react_query3.useMutation)({
|
|
735
|
+
mutationKey: walletMutationKeys.disconnectWallet(mutationKey),
|
|
736
|
+
mutationFn: async () => {
|
|
737
|
+
if (!currentWallet) {
|
|
738
|
+
throw new WalletNotConnectedError("No wallet is connected.");
|
|
739
|
+
}
|
|
740
|
+
try {
|
|
741
|
+
await currentWallet.features["standard:disconnect"]?.disconnect();
|
|
742
|
+
} catch (error) {
|
|
743
|
+
console.error("Failed to disconnect the application from the current wallet.", error);
|
|
744
|
+
}
|
|
745
|
+
setWalletDisconnected();
|
|
746
|
+
},
|
|
747
|
+
...mutationOptions
|
|
748
|
+
});
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
// src/hooks/wallet/useSwitchAccount.ts
|
|
752
|
+
var import_react_query4 = require("@tanstack/react-query");
|
|
753
|
+
function useSwitchAccount({
|
|
754
|
+
mutationKey,
|
|
755
|
+
...mutationOptions
|
|
756
|
+
} = {}) {
|
|
757
|
+
const currentWallet = useCurrentWallet();
|
|
758
|
+
const setAccountSwitched = useWalletStore((state) => state.setAccountSwitched);
|
|
759
|
+
return (0, import_react_query4.useMutation)({
|
|
760
|
+
mutationKey: walletMutationKeys.switchAccount(mutationKey),
|
|
761
|
+
mutationFn: async ({ account }) => {
|
|
762
|
+
if (!currentWallet) {
|
|
763
|
+
throw new WalletNotConnectedError("No wallet is connected.");
|
|
764
|
+
}
|
|
765
|
+
const accountToSelect = currentWallet.accounts.find(
|
|
766
|
+
(walletAccount) => walletAccount.address === account.address
|
|
767
|
+
);
|
|
768
|
+
if (!accountToSelect) {
|
|
769
|
+
throw new WalletAccountNotFoundError(
|
|
770
|
+
`No account with address ${account.address} is connected to ${currentWallet.name}.`
|
|
771
|
+
);
|
|
772
|
+
}
|
|
773
|
+
setAccountSwitched(accountToSelect);
|
|
774
|
+
},
|
|
775
|
+
...mutationOptions
|
|
776
|
+
});
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
// src/components/AccountDropdownMenu.css.ts
|
|
780
|
+
var connectedAccount = "AccountDropdownMenu_connectedAccount__div2ql0";
|
|
781
|
+
var menuContent = "AccountDropdownMenu_menuContent__div2ql1";
|
|
782
|
+
var menuItem = "AccountDropdownMenu_menuItem__div2ql2";
|
|
783
|
+
var separator = "AccountDropdownMenu_separator__div2ql4";
|
|
784
|
+
var switchAccountMenuItem = "AccountDropdownMenu_switchAccountMenuItem__div2ql3";
|
|
785
|
+
|
|
786
|
+
// src/components/icons/CheckIcon.tsx
|
|
787
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
788
|
+
function CheckIcon(props) {
|
|
789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
790
|
+
"path",
|
|
791
|
+
{
|
|
792
|
+
fill: "currentColor",
|
|
793
|
+
d: "m11.726 5.048-4.73 5.156-1.722-1.879a.72.72 0 0 0-.529-.23.722.722 0 0 0-.525.24.858.858 0 0 0-.22.573.86.86 0 0 0 .211.576l2.255 2.458c.14.153.332.24.53.24.2 0 .391-.087.532-.24l5.261-5.735A.86.86 0 0 0 13 5.63a.858.858 0 0 0-.22-.572.722.722 0 0 0-.525-.24.72.72 0 0 0-.529.23Z"
|
|
794
|
+
}
|
|
795
|
+
) });
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
// src/components/icons/ChevronIcon.tsx
|
|
799
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
800
|
+
function ChevronIcon(props) {
|
|
801
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
802
|
+
"path",
|
|
803
|
+
{
|
|
804
|
+
stroke: "#A0B6C3",
|
|
805
|
+
strokeLinecap: "round",
|
|
806
|
+
strokeLinejoin: "round",
|
|
807
|
+
strokeWidth: 1.5,
|
|
808
|
+
d: "m4 6 4 4 4-4"
|
|
809
|
+
}
|
|
810
|
+
) });
|
|
811
|
+
}
|
|
812
|
+
|
|
813
|
+
// src/components/AccountDropdownMenu.tsx
|
|
814
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
815
|
+
function AccountDropdownMenu({ currentAccount }) {
|
|
816
|
+
const { mutate: disconnectWallet } = useDisconnectWallet();
|
|
817
|
+
const { data: domain } = useResolveSuiNSName(
|
|
818
|
+
currentAccount.label ? null : currentAccount.address
|
|
819
|
+
);
|
|
820
|
+
const accounts = useAccounts();
|
|
821
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownMenu.Root, { modal: false, children: [
|
|
822
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Button, { size: "lg", className: connectedAccount, children: [
|
|
823
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { mono: true, weight: "bold", children: currentAccount.label ?? domain ?? (0, import_utils.formatAddress)(currentAccount.address) }),
|
|
824
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChevronIcon, {})
|
|
825
|
+
] }) }) }),
|
|
826
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyleMarker, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DropdownMenu.Content, { className: menuContent, children: [
|
|
827
|
+
accounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
828
|
+
AccountDropdownMenuItem,
|
|
829
|
+
{
|
|
830
|
+
account,
|
|
831
|
+
active: currentAccount.address === account.address
|
|
832
|
+
},
|
|
833
|
+
account.address
|
|
834
|
+
)),
|
|
835
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DropdownMenu.Separator, { className: separator }),
|
|
836
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
837
|
+
DropdownMenu.Item,
|
|
796
838
|
{
|
|
797
|
-
className: (0, import_clsx7.default)(
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
children: [
|
|
801
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: backButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton, { type: "button", "aria-label": "Back", onClick: () => resetSelection(), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BackIcon, {}) }) }),
|
|
802
|
-
modalContent
|
|
803
|
-
]
|
|
839
|
+
className: (0, import_clsx7.default)(menuItem),
|
|
840
|
+
onSelect: () => disconnectWallet(),
|
|
841
|
+
children: "Disconnect"
|
|
804
842
|
}
|
|
805
|
-
)
|
|
806
|
-
|
|
807
|
-
] }) }) }) })
|
|
843
|
+
)
|
|
844
|
+
] }) }) })
|
|
808
845
|
] });
|
|
809
846
|
}
|
|
847
|
+
function AccountDropdownMenuItem({
|
|
848
|
+
account,
|
|
849
|
+
active
|
|
850
|
+
}) {
|
|
851
|
+
const { mutate: switchAccount } = useSwitchAccount();
|
|
852
|
+
const { data: domain } = useResolveSuiNSName(account.label ? null : account.address);
|
|
853
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
854
|
+
DropdownMenu.Item,
|
|
855
|
+
{
|
|
856
|
+
className: (0, import_clsx7.default)(menuItem, switchAccountMenuItem),
|
|
857
|
+
onSelect: () => switchAccount({ account }),
|
|
858
|
+
children: [
|
|
859
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { mono: true, children: account.label ?? domain ?? (0, import_utils.formatAddress)(account.address) }),
|
|
860
|
+
active ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheckIcon, {}) : null
|
|
861
|
+
]
|
|
862
|
+
}
|
|
863
|
+
);
|
|
864
|
+
}
|
|
810
865
|
|
|
811
866
|
// src/components/ConnectButton.tsx
|
|
812
867
|
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
@@ -1140,10 +1195,9 @@ function createWalletStore({ wallets, storage, storageKey }) {
|
|
|
1140
1195
|
},
|
|
1141
1196
|
updateWalletAccounts(accounts) {
|
|
1142
1197
|
const currentAccount = get().currentAccount;
|
|
1143
|
-
const isCurrentAccountStillAuthorized = currentAccount ? accounts.some(({ address }) => address === currentAccount.address) : false;
|
|
1144
1198
|
set(() => ({
|
|
1145
1199
|
accounts,
|
|
1146
|
-
currentAccount:
|
|
1200
|
+
currentAccount: currentAccount ? accounts.find(({ address }) => address === currentAccount.address) : accounts[0]
|
|
1147
1201
|
}));
|
|
1148
1202
|
}
|
|
1149
1203
|
}),
|
|
@@ -1305,79 +1359,62 @@ function WalletConnectionManager({
|
|
|
1305
1359
|
return children;
|
|
1306
1360
|
}
|
|
1307
1361
|
|
|
1308
|
-
// src/hooks/
|
|
1309
|
-
|
|
1310
|
-
function
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
"This wallet doesn't support the `signPersonalMessage` feature."
|
|
1332
|
-
);
|
|
1333
|
-
}
|
|
1334
|
-
return await walletFeature.signPersonalMessage({
|
|
1335
|
-
...signPersonalMessageArgs,
|
|
1336
|
-
account: signerAccount
|
|
1337
|
-
});
|
|
1338
|
-
},
|
|
1339
|
-
...mutationOptions
|
|
1340
|
-
});
|
|
1362
|
+
// src/hooks/networkConfig.ts
|
|
1363
|
+
function createNetworkConfig(networkConfig) {
|
|
1364
|
+
function useNetworkConfig() {
|
|
1365
|
+
const { config } = useSuiClientContext();
|
|
1366
|
+
if (!config) {
|
|
1367
|
+
throw new Error("No network config found");
|
|
1368
|
+
}
|
|
1369
|
+
return config;
|
|
1370
|
+
}
|
|
1371
|
+
function useNetworkVariables() {
|
|
1372
|
+
const { variables } = useNetworkConfig();
|
|
1373
|
+
return variables ?? {};
|
|
1374
|
+
}
|
|
1375
|
+
function useNetworkVariable(name) {
|
|
1376
|
+
const variables = useNetworkVariables();
|
|
1377
|
+
return variables[name];
|
|
1378
|
+
}
|
|
1379
|
+
return {
|
|
1380
|
+
networkConfig,
|
|
1381
|
+
useNetworkConfig,
|
|
1382
|
+
useNetworkVariables,
|
|
1383
|
+
useNetworkVariable
|
|
1384
|
+
};
|
|
1341
1385
|
}
|
|
1342
1386
|
|
|
1343
|
-
// src/hooks/
|
|
1387
|
+
// src/hooks/useSuiClientInfiniteQuery.ts
|
|
1344
1388
|
var import_react_query5 = require("@tanstack/react-query");
|
|
1345
|
-
function
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
mutationFn: async (signTransactionBlockArgs) => {
|
|
1354
|
-
if (!currentWallet) {
|
|
1355
|
-
throw new WalletNotConnectedError("No wallet is connected.");
|
|
1356
|
-
}
|
|
1357
|
-
const signerAccount = signTransactionBlockArgs.account ?? currentAccount;
|
|
1358
|
-
if (!signerAccount) {
|
|
1359
|
-
throw new WalletNoAccountSelectedError(
|
|
1360
|
-
"No wallet account is selected to sign the transaction block with."
|
|
1361
|
-
);
|
|
1362
|
-
}
|
|
1363
|
-
const walletFeature = currentWallet.features["sui:signTransactionBlock"];
|
|
1364
|
-
if (!walletFeature) {
|
|
1365
|
-
throw new WalletFeatureNotSupportedError(
|
|
1366
|
-
"This wallet doesn't support the `SignTransactionBlock` feature."
|
|
1367
|
-
);
|
|
1368
|
-
}
|
|
1369
|
-
return await walletFeature.signTransactionBlock({
|
|
1370
|
-
...signTransactionBlockArgs,
|
|
1371
|
-
account: signerAccount,
|
|
1372
|
-
chain: signTransactionBlockArgs.chain ?? signerAccount.chains[0]
|
|
1373
|
-
});
|
|
1389
|
+
function useSuiClientInfiniteQuery(method, params, { queryKey = [], enabled = !!params, ...options } = {}) {
|
|
1390
|
+
const suiContext = useSuiClientContext();
|
|
1391
|
+
return (0, import_react_query5.useInfiniteQuery)({
|
|
1392
|
+
...options,
|
|
1393
|
+
queryKey: [suiContext.network, method, params, ...queryKey],
|
|
1394
|
+
enabled,
|
|
1395
|
+
queryFn: async () => {
|
|
1396
|
+
return await suiContext.client[method](params);
|
|
1374
1397
|
},
|
|
1375
|
-
|
|
1398
|
+
getNextPageParam: (lastPage) => {
|
|
1399
|
+
return lastPage.nextCursor ?? null;
|
|
1400
|
+
}
|
|
1376
1401
|
});
|
|
1377
1402
|
}
|
|
1378
1403
|
|
|
1379
|
-
// src/hooks/
|
|
1404
|
+
// src/hooks/useSuiClientMutation.ts
|
|
1380
1405
|
var import_react_query6 = require("@tanstack/react-query");
|
|
1406
|
+
function useSuiClientMutation(method, options = {}) {
|
|
1407
|
+
const suiContext = useSuiClientContext();
|
|
1408
|
+
return (0, import_react_query6.useMutation)({
|
|
1409
|
+
...options,
|
|
1410
|
+
mutationFn: async (params) => {
|
|
1411
|
+
return await suiContext.client[method](params);
|
|
1412
|
+
}
|
|
1413
|
+
});
|
|
1414
|
+
}
|
|
1415
|
+
|
|
1416
|
+
// src/hooks/wallet/useSignAndExecuteTransactionBlock.ts
|
|
1417
|
+
var import_react_query7 = require("@tanstack/react-query");
|
|
1381
1418
|
function useSignAndExecuteTransactionBlock({
|
|
1382
1419
|
mutationKey,
|
|
1383
1420
|
executeFromWallet,
|
|
@@ -1386,7 +1423,7 @@ function useSignAndExecuteTransactionBlock({
|
|
|
1386
1423
|
const currentWallet = useCurrentWallet();
|
|
1387
1424
|
const currentAccount = useCurrentAccount();
|
|
1388
1425
|
const client = useSuiClient();
|
|
1389
|
-
return (0,
|
|
1426
|
+
return (0, import_react_query7.useMutation)({
|
|
1390
1427
|
mutationKey: walletMutationKeys.signAndExecuteTransactionBlock(mutationKey),
|
|
1391
1428
|
mutationFn: async ({ requestType, options, ...signTransactionBlockArgs }) => {
|
|
1392
1429
|
if (!currentWallet) {
|
|
@@ -1435,46 +1472,74 @@ function useSignAndExecuteTransactionBlock({
|
|
|
1435
1472
|
});
|
|
1436
1473
|
}
|
|
1437
1474
|
|
|
1438
|
-
// src/hooks/
|
|
1439
|
-
var import_react_query7 = require("@tanstack/react-query");
|
|
1440
|
-
function useSuiClientMutation(method, options = {}) {
|
|
1441
|
-
const suiContext = useSuiClientContext();
|
|
1442
|
-
return (0, import_react_query7.useMutation)({
|
|
1443
|
-
...options,
|
|
1444
|
-
mutationFn: async (params) => {
|
|
1445
|
-
return await suiContext.client[method](params);
|
|
1446
|
-
}
|
|
1447
|
-
});
|
|
1448
|
-
}
|
|
1449
|
-
|
|
1450
|
-
// src/hooks/useSuiClientQuery.ts
|
|
1475
|
+
// src/hooks/wallet/useSignPersonalMessage.ts
|
|
1451
1476
|
var import_react_query8 = require("@tanstack/react-query");
|
|
1452
|
-
function
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1477
|
+
function useSignPersonalMessage({
|
|
1478
|
+
mutationKey,
|
|
1479
|
+
...mutationOptions
|
|
1480
|
+
} = {}) {
|
|
1481
|
+
const currentWallet = useCurrentWallet();
|
|
1482
|
+
const currentAccount = useCurrentAccount();
|
|
1483
|
+
return (0, import_react_query8.useMutation)({
|
|
1484
|
+
mutationKey: walletMutationKeys.signPersonalMessage(mutationKey),
|
|
1485
|
+
mutationFn: async (signPersonalMessageArgs) => {
|
|
1486
|
+
if (!currentWallet) {
|
|
1487
|
+
throw new WalletNotConnectedError("No wallet is connected.");
|
|
1488
|
+
}
|
|
1489
|
+
const signerAccount = signPersonalMessageArgs.account ?? currentAccount;
|
|
1490
|
+
if (!signerAccount) {
|
|
1491
|
+
throw new WalletNoAccountSelectedError(
|
|
1492
|
+
"No wallet account is selected to sign the personal message with."
|
|
1493
|
+
);
|
|
1494
|
+
}
|
|
1495
|
+
const walletFeature = currentWallet.features["sui:signPersonalMessage"];
|
|
1496
|
+
if (!walletFeature) {
|
|
1497
|
+
throw new WalletFeatureNotSupportedError(
|
|
1498
|
+
"This wallet doesn't support the `signPersonalMessage` feature."
|
|
1499
|
+
);
|
|
1500
|
+
}
|
|
1501
|
+
return await walletFeature.signPersonalMessage({
|
|
1502
|
+
...signPersonalMessageArgs,
|
|
1503
|
+
account: signerAccount
|
|
1504
|
+
});
|
|
1505
|
+
},
|
|
1506
|
+
...mutationOptions
|
|
1461
1507
|
});
|
|
1462
1508
|
}
|
|
1463
1509
|
|
|
1464
|
-
// src/hooks/
|
|
1510
|
+
// src/hooks/wallet/useSignTransactionBlock.ts
|
|
1465
1511
|
var import_react_query9 = require("@tanstack/react-query");
|
|
1466
|
-
function
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1512
|
+
function useSignTransactionBlock({
|
|
1513
|
+
mutationKey,
|
|
1514
|
+
...mutationOptions
|
|
1515
|
+
} = {}) {
|
|
1516
|
+
const currentWallet = useCurrentWallet();
|
|
1517
|
+
const currentAccount = useCurrentAccount();
|
|
1518
|
+
return (0, import_react_query9.useMutation)({
|
|
1519
|
+
mutationKey: walletMutationKeys.signTransactionBlock(mutationKey),
|
|
1520
|
+
mutationFn: async (signTransactionBlockArgs) => {
|
|
1521
|
+
if (!currentWallet) {
|
|
1522
|
+
throw new WalletNotConnectedError("No wallet is connected.");
|
|
1523
|
+
}
|
|
1524
|
+
const signerAccount = signTransactionBlockArgs.account ?? currentAccount;
|
|
1525
|
+
if (!signerAccount) {
|
|
1526
|
+
throw new WalletNoAccountSelectedError(
|
|
1527
|
+
"No wallet account is selected to sign the transaction block with."
|
|
1528
|
+
);
|
|
1529
|
+
}
|
|
1530
|
+
const walletFeature = currentWallet.features["sui:signTransactionBlock"];
|
|
1531
|
+
if (!walletFeature) {
|
|
1532
|
+
throw new WalletFeatureNotSupportedError(
|
|
1533
|
+
"This wallet doesn't support the `SignTransactionBlock` feature."
|
|
1534
|
+
);
|
|
1535
|
+
}
|
|
1536
|
+
return await walletFeature.signTransactionBlock({
|
|
1537
|
+
...signTransactionBlockArgs,
|
|
1538
|
+
account: signerAccount,
|
|
1539
|
+
chain: signTransactionBlockArgs.chain ?? signerAccount.chains[0]
|
|
1540
|
+
});
|
|
1474
1541
|
},
|
|
1475
|
-
|
|
1476
|
-
return lastPage.nextCursor ?? null;
|
|
1477
|
-
}
|
|
1542
|
+
...mutationOptions
|
|
1478
1543
|
});
|
|
1479
1544
|
}
|
|
1480
1545
|
//# sourceMappingURL=index.js.map
|