@provablehq/aleo-wallet-adaptor-react-ui 0.3.0-alpha.2 → 0.3.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -53,7 +53,7 @@ var WalletIcon = ({ wallet, ...props }) => {
53
53
  return wallet && /* @__PURE__ */ jsx2(
54
54
  "img",
55
55
  {
56
- style: { borderRadius: "50%" },
56
+ style: { borderRadius: "22%" },
57
57
  src: wallet.adapter.icon,
58
58
  alt: `${wallet.adapter.name} icon`,
59
59
  ...props
@@ -102,7 +102,7 @@ var WalletConnectButton = ({
102
102
  };
103
103
 
104
104
  // src/WalletModal.tsx
105
- import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef2, useState } from "react";
105
+ import { useCallback as useCallback2, useEffect, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef2, useState } from "react";
106
106
  import { createPortal } from "react-dom";
107
107
 
108
108
  // src/Collapse.tsx
@@ -182,62 +182,15 @@ var WalletListItem = ({ handleClick, tabIndex, wallet }) => {
182
182
  ] }) });
183
183
  };
184
184
 
185
- // src/AleoIcon.tsx
186
- import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
187
- var AleoIcon = () => {
188
- return /* @__PURE__ */ jsxs3(
189
- "svg",
190
- {
191
- xmlns: "http://www.w3.org/2000/svg",
192
- width: "216",
193
- height: "80",
194
- viewBox: "0 0 216 80",
195
- fill: "none",
196
- children: [
197
- /* @__PURE__ */ jsx6("path", { d: "M73.426 0V8.93824H81.6842V78.8961H90.6045V0H73.426Z", fill: "#F5F5F5" }),
198
- /* @__PURE__ */ jsx6(
199
- "path",
200
- {
201
- d: "M154.145 51.4216C154.145 32.5518 143.683 21.297 127.604 21.297C111.526 21.297 100.954 32.0007 100.954 50.8687C100.954 69.7367 111.415 80 127.604 80C140.378 80 149.96 72.6061 152.603 62.3447H142.692C140.488 67.0902 135.975 71.2829 127.604 71.2829C116.812 71.2829 111.307 64.4419 110.205 54.6209H154.145V51.4216ZM110.316 46.125C111.636 36.6357 117.364 29.9035 127.604 29.9035C137.845 29.9035 143.242 36.5251 144.564 46.125H110.316Z",
202
- fill: "#F5F5F5"
203
- }
204
- ),
205
- /* @__PURE__ */ jsx6(
206
- "path",
207
- {
208
- d: "M189.272 21.297C173.083 21.297 162.622 32.0007 162.622 50.8687C162.622 69.7367 173.083 80 189.272 80C205.461 80 215.812 70.0684 215.812 50.8687C215.812 31.669 205.351 21.297 189.272 21.297ZM189.272 71.5041C177.709 71.5041 171.432 62.4553 171.432 50.76C171.432 39.0647 177.709 29.6842 189.272 29.6842C200.836 29.6842 207.003 38.8436 207.003 50.76C207.003 62.6764 200.946 71.5041 189.272 71.5041Z",
209
- fill: "#F5F5F5"
210
- }
211
- ),
212
- /* @__PURE__ */ jsx6(
213
- "path",
214
- {
215
- d: "M46.5565 0H28.3849L12.6134 46.125H22.2179L34.9933 8.49593H39.6189L52.3925 46.125H22.2179L19.2457 54.6209H55.2561L63.5143 78.8961H73.426L46.5565 0Z",
216
- fill: "#F5F5F5"
217
- }
218
- ),
219
- /* @__PURE__ */ jsx6(
220
- "path",
221
- {
222
- d: "M1.40508 78.8961H10.9857L19.2457 54.6209L9.7074 54.6209L1.40508 78.8961Z",
223
- fill: "#F5F5F5"
224
- }
225
- ),
226
- /* @__PURE__ */ jsx6("path", { d: "M3.0935 46.125L0.1875 54.6209H9.7074L12.6134 46.125H3.0935Z", fill: "#F5F5F5" })
227
- ]
228
- }
229
- );
230
- };
231
-
232
185
  // src/WalletModal.tsx
233
186
  import { useWallet as useWallet2 } from "@provablehq/aleo-wallet-adaptor-react";
234
187
  import { WalletReadyState as WalletReadyState2 } from "@provablehq/aleo-wallet-standard";
235
188
  import { Network as Network2 } from "@provablehq/aleo-types";
236
189
 
237
190
  // src/ProvableLogo.tsx
238
- import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
191
+ import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
239
192
  var ProvableLogo = () => {
240
- return /* @__PURE__ */ jsx7(
193
+ return /* @__PURE__ */ jsx6(
241
194
  "svg",
242
195
  {
243
196
  width: "115",
@@ -245,69 +198,69 @@ var ProvableLogo = () => {
245
198
  viewBox: "0 0 115 18",
246
199
  fill: "none",
247
200
  xmlns: "http://www.w3.org/2000/svg",
248
- children: /* @__PURE__ */ jsxs4("g", { opacity: "0.88", children: [
249
- /* @__PURE__ */ jsx7(
201
+ children: /* @__PURE__ */ jsxs3("g", { opacity: "0.88", children: [
202
+ /* @__PURE__ */ jsx6(
250
203
  "path",
251
204
  {
252
205
  d: "M0 3.89265C0 2.29508 1.29508 1 2.89265 1H13.1073C14.7048 1 15.9999 2.29508 15.9999 3.89265V14.1074C15.9999 15.7049 14.7049 17 13.1073 17H10.4926C10.0937 17 9.7702 16.6766 9.7702 16.2776V8.67463C9.7702 7.87665 9.12331 7.22976 8.32533 7.22976H0.722439C0.323447 7.22976 0 6.90631 0 6.50732L0 3.89265Z",
253
- fill: "#0B0605"
206
+ fill: "currentColor"
254
207
  }
255
208
  ),
256
- /* @__PURE__ */ jsx7(
209
+ /* @__PURE__ */ jsx6(
257
210
  "path",
258
211
  {
259
212
  d: "M6.22973 12.2151C6.22973 11.4171 5.58284 10.7702 4.78485 10.7702H0.722439C0.323447 10.7702 0 11.0937 0 11.4927L0 14.1074C0 15.7049 1.29508 17 2.89265 17H5.50729C5.90628 17 6.22973 16.6766 6.22973 16.2776V12.2151Z",
260
- fill: "#0B0605"
213
+ fill: "currentColor"
261
214
  }
262
215
  ),
263
- /* @__PURE__ */ jsx7(
216
+ /* @__PURE__ */ jsx6(
264
217
  "path",
265
218
  {
266
219
  d: "M108.725 17.272C105.098 17.272 102.695 14.7107 102.695 10.88C102.695 7.04935 105.098 4.48802 108.725 4.48802C112.85 4.48802 115.275 7.52535 114.686 11.968H106.118C106.39 13.6453 107.319 14.5973 108.793 14.5973C110.039 14.5973 110.901 14.0533 111.263 13.056H114.663C114.006 15.7533 111.898 17.272 108.725 17.272ZM106.118 9.70135H111.467C111.195 8.04668 110.266 7.16268 108.793 7.16268C107.342 7.16268 106.413 8.06935 106.118 9.70135Z",
267
- fill: "#0B0605"
220
+ fill: "currentColor"
268
221
  }
269
222
  ),
270
- /* @__PURE__ */ jsx7("path", { d: "M98.3672 17V0.317363L101.699 0.0453644V17H98.3672Z", fill: "#0B0605" }),
271
- /* @__PURE__ */ jsx7(
223
+ /* @__PURE__ */ jsx6("path", { d: "M98.3672 17V0.317363L101.699 0.0453644V17H98.3672Z", fill: "currentColor" }),
224
+ /* @__PURE__ */ jsx6(
272
225
  "path",
273
226
  {
274
227
  d: "M84.9072 17V0.317363L88.2392 0.0453644V6.50535H88.3752C89.1232 5.21336 90.3246 4.55602 92.0245 4.55602C95.2432 4.55602 97.3512 7.07202 97.3512 10.88C97.3512 14.688 95.2432 17.2267 92.0245 17.2267C90.3246 17.2267 89.1232 16.5693 88.3752 15.2547H88.2392V17H84.9072ZM91.0952 7.32135C89.3726 7.32135 88.2392 8.72668 88.2392 10.88C88.2392 13.056 89.3726 14.4613 91.0952 14.4613C92.8405 14.4613 93.9512 13.056 93.9512 10.88C93.9512 8.72668 92.8405 7.32135 91.0952 7.32135Z",
275
- fill: "#0B0605"
228
+ fill: "currentColor"
276
229
  }
277
230
  ),
278
- /* @__PURE__ */ jsx7(
231
+ /* @__PURE__ */ jsx6(
279
232
  "path",
280
233
  {
281
234
  d: "M76.3143 17.1813C73.9117 17.1813 72.3477 15.6853 72.3477 13.3733C72.3477 11.4013 73.685 10.1093 76.0423 9.83735L79.2836 9.47468C79.8956 9.38401 80.1903 9.11201 80.1903 8.61335C80.1903 7.68402 79.4876 7.11735 78.3543 7.11735C77.221 7.11735 76.4503 7.68402 76.3143 8.61335H72.8917C73.141 6.05202 75.249 4.48802 78.3996 4.48802C81.641 4.48802 83.5223 6.09735 83.5223 8.88535V17H80.1903V15.4133H80.0543C79.4423 16.456 77.9236 17.1813 76.3143 17.1813ZM77.4023 14.5973C78.8303 14.5973 80.1903 13.3507 80.1903 11.9V11.4693C80.0316 11.5827 79.8503 11.628 79.6236 11.6507L77.1983 11.9227C76.3143 12.0133 75.8157 12.4893 75.8157 13.2373C75.8157 14.076 76.4276 14.5973 77.4023 14.5973Z",
282
- fill: "#0B0605"
235
+ fill: "currentColor"
283
236
  }
284
237
  ),
285
- /* @__PURE__ */ jsx7(
238
+ /* @__PURE__ */ jsx6(
286
239
  "path",
287
240
  {
288
241
  d: "M64.509 17L60.1797 4.76003H63.5117L66.549 13.94H66.685L69.6997 4.76003H72.873L68.5437 17H64.509Z",
289
- fill: "#0B0605"
242
+ fill: "currentColor"
290
243
  }
291
244
  ),
292
- /* @__PURE__ */ jsx7(
245
+ /* @__PURE__ */ jsx6(
293
246
  "path",
294
247
  {
295
248
  d: "M54.3613 17.272C50.6666 17.272 48.1279 14.6653 48.1279 10.88C48.1279 7.09468 50.6666 4.48802 54.3613 4.48802C58.0559 4.48802 60.5946 7.09468 60.5946 10.88C60.5946 14.6653 58.0559 17.272 54.3613 17.272ZM54.3613 14.5067C56.1519 14.5067 57.2399 13.1467 57.2399 10.88C57.2399 8.61335 56.1519 7.25335 54.3613 7.25335C52.5706 7.25335 51.4826 8.61335 51.4826 10.88C51.4826 13.1467 52.5706 14.5067 54.3613 14.5067Z",
296
- fill: "#0B0605"
249
+ fill: "currentColor"
297
250
  }
298
251
  ),
299
- /* @__PURE__ */ jsx7(
252
+ /* @__PURE__ */ jsx6(
300
253
  "path",
301
254
  {
302
255
  d: "M40.0801 17V4.76002H43.4121V6.23335H43.5481C43.9561 5.10002 44.8401 4.48802 46.1094 4.48802H47.8094L48.0814 7.93335H45.6561C44.2054 7.93335 43.4121 8.56802 43.4121 9.74668V17H40.0801Z",
303
- fill: "#0B0605"
256
+ fill: "currentColor"
304
257
  }
305
258
  ),
306
- /* @__PURE__ */ jsx7(
259
+ /* @__PURE__ */ jsx6(
307
260
  "path",
308
261
  {
309
262
  d: "M26.3848 17V0.99736H33.0261C36.6981 0.99736 39.0554 3.08269 39.0554 6.34668C39.0554 9.63334 36.6981 11.764 33.0261 11.764H29.8754V17H26.3848ZM33.0261 8.72668C34.5674 8.72668 35.5647 7.82002 35.5647 6.41468C35.5647 5.00935 34.5674 4.10269 33.0261 4.10269H29.8754V8.72668H33.0261Z",
310
- fill: "#0B0605"
263
+ fill: "currentColor"
311
264
  }
312
265
  )
313
266
  ] })
@@ -316,7 +269,9 @@ var ProvableLogo = () => {
316
269
  };
317
270
 
318
271
  // src/WalletModal.tsx
319
- import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
272
+ import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
273
+ var INSTALL_REDIRECT_MAX_AGE_MS = 10 * 60 * 1e3;
274
+ var WALLET_INSTALL_REDIRECT_KEY = "aleo-wallet-adaptor-install-redirect-timestamp";
320
275
  var WalletModal = ({
321
276
  className = "",
322
277
  container = "body",
@@ -348,13 +303,28 @@ var WalletModal = ({
348
303
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
349
304
  installedWallets[0]
350
305
  ) : wallets.find(
351
- (wallet2) => wallet2.adapter.name === "Puzzle Wallet"
352
- // TODO: Add Provable Wallet
306
+ (wallet2) => wallet2.adapter.name.toLowerCase().includes("shield")
353
307
  ) || wallets.find(
354
308
  (wallet2) => wallet2.readyState === WalletReadyState2.LOADABLE
355
309
  ) || // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
356
310
  otherWallets[0];
357
311
  }, [installedWallets, wallets, otherWallets]);
312
+ useEffect(() => {
313
+ function handleVisibilityChange() {
314
+ if (document.visibilityState !== "visible") return;
315
+ try {
316
+ const raw = sessionStorage.getItem(WALLET_INSTALL_REDIRECT_KEY);
317
+ if (!raw) return;
318
+ const timestamp = Number(raw);
319
+ if (Number.isNaN(timestamp) || Date.now() - timestamp > INSTALL_REDIRECT_MAX_AGE_MS) return;
320
+ sessionStorage.removeItem(WALLET_INSTALL_REDIRECT_KEY);
321
+ window.location.reload();
322
+ } catch {
323
+ }
324
+ }
325
+ document.addEventListener("visibilitychange", handleVisibilityChange);
326
+ return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
327
+ }, []);
358
328
  const hideModal = useCallback2(() => {
359
329
  setFadeIn(false);
360
330
  setTimeout(() => setVisible(false), 150);
@@ -373,6 +343,22 @@ var WalletModal = ({
373
343
  },
374
344
  [selectWallet, handleClose]
375
345
  );
346
+ const handleNotInstalledWalletClick = useCallback2(
347
+ (event, walletName) => {
348
+ event.preventDefault();
349
+ const wallet2 = wallets.find(
350
+ (wallet3) => wallet3.adapter.name === walletName
351
+ );
352
+ if (wallet2) {
353
+ try {
354
+ sessionStorage.setItem(WALLET_INSTALL_REDIRECT_KEY, String(Date.now()));
355
+ } catch {
356
+ }
357
+ window.open(wallet2.adapter.url, "_blank");
358
+ }
359
+ },
360
+ [wallets]
361
+ );
376
362
  const handleCollapseClick = useCallback2(() => setExpanded(!expanded), [expanded]);
377
363
  const handleTabKey = useCallback2(
378
364
  (event) => {
@@ -421,7 +407,7 @@ var WalletModal = ({
421
407
  }
422
408
  }, [wallet]);
423
409
  return portal && createPortal(
424
- /* @__PURE__ */ jsxs5(
410
+ /* @__PURE__ */ jsxs4(
425
411
  "div",
426
412
  {
427
413
  "aria-labelledby": "wallet-adapter-modal-title",
@@ -430,12 +416,12 @@ var WalletModal = ({
430
416
  ref,
431
417
  role: "dialog",
432
418
  children: [
433
- /* @__PURE__ */ jsx8("div", { className: "wallet-adapter-modal-container", children: /* @__PURE__ */ jsxs5("div", { className: "wallet-adapter-modal-wrapper", children: [
434
- /* @__PURE__ */ jsx8("button", { onClick: handleClose, className: "wallet-adapter-modal-button-close", children: /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", children: /* @__PURE__ */ jsx8("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" }) }) }),
435
- installedWallets.length ? /* @__PURE__ */ jsxs5(Fragment, { children: [
436
- /* @__PURE__ */ jsx8("h1", { className: "wallet-adapter-modal-title", children: "Connect an Aleo wallet" }),
437
- /* @__PURE__ */ jsxs5("ul", { className: "wallet-adapter-modal-list", children: [
438
- installedWallets.map((wallet2) => /* @__PURE__ */ jsx8(
419
+ /* @__PURE__ */ jsx7("div", { className: "wallet-adapter-modal-container", children: /* @__PURE__ */ jsxs4("div", { className: "wallet-adapter-modal-wrapper", children: [
420
+ /* @__PURE__ */ jsx7("button", { onClick: handleClose, className: "wallet-adapter-modal-button-close", children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", children: /* @__PURE__ */ jsx7("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" }) }) }),
421
+ installedWallets.length ? /* @__PURE__ */ jsxs4(Fragment, { children: [
422
+ /* @__PURE__ */ jsx7("h1", { className: "wallet-adapter-modal-title", children: "Connect an Aleo wallet" }),
423
+ /* @__PURE__ */ jsxs4("ul", { className: "wallet-adapter-modal-list", children: [
424
+ installedWallets.map((wallet2) => /* @__PURE__ */ jsx7(
439
425
  WalletListItem,
440
426
  {
441
427
  handleClick: (event) => handleWalletClick(event, wallet2.adapter.name),
@@ -443,7 +429,7 @@ var WalletModal = ({
443
429
  },
444
430
  wallet2.adapter.name
445
431
  )),
446
- otherWallets.length ? /* @__PURE__ */ jsx8(Collapse, { expanded, id: "wallet-adapter-modal-collapse", children: otherWallets.map((wallet2) => /* @__PURE__ */ jsx8(
432
+ otherWallets.length ? /* @__PURE__ */ jsx7(Collapse, { expanded, id: "wallet-adapter-modal-collapse", children: otherWallets.map((wallet2) => /* @__PURE__ */ jsx7(
447
433
  WalletListItem,
448
434
  {
449
435
  handleClick: (event) => handleWalletClick(event, wallet2.adapter.name),
@@ -453,18 +439,18 @@ var WalletModal = ({
453
439
  wallet2.adapter.name
454
440
  )) }) : null
455
441
  ] }),
456
- otherWallets.length ? /* @__PURE__ */ jsxs5(
442
+ otherWallets.length ? /* @__PURE__ */ jsxs4(
457
443
  "button",
458
444
  {
459
445
  className: "wallet-adapter-modal-list-more",
460
446
  onClick: handleCollapseClick,
461
447
  tabIndex: 0,
462
448
  children: [
463
- /* @__PURE__ */ jsxs5("span", { children: [
449
+ /* @__PURE__ */ jsxs4("span", { children: [
464
450
  expanded ? "Less " : "More ",
465
451
  "options"
466
452
  ] }),
467
- /* @__PURE__ */ jsx8(
453
+ /* @__PURE__ */ jsx7(
468
454
  "svg",
469
455
  {
470
456
  width: "13",
@@ -472,39 +458,36 @@ var WalletModal = ({
472
458
  viewBox: "0 0 13 7",
473
459
  xmlns: "http://www.w3.org/2000/svg",
474
460
  className: `${expanded ? "wallet-adapter-modal-list-more-icon-rotate" : ""}`,
475
- children: /* @__PURE__ */ jsx8("path", { d: "M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z" })
461
+ children: /* @__PURE__ */ jsx7("path", { d: "M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z" })
476
462
  }
477
463
  )
478
464
  ]
479
465
  }
480
466
  ) : null
481
- ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
482
- /* @__PURE__ */ jsx8("h1", { className: "wallet-adapter-modal-title", children: "Get an Aleo wallet to continue" }),
483
- /* @__PURE__ */ jsxs5("div", { className: "wallet-adapter-modal-middle", children: [
484
- /* @__PURE__ */ jsx8(AleoIcon, {}),
485
- /* @__PURE__ */ jsx8(
486
- "button",
487
- {
488
- type: "button",
489
- className: "wallet-adapter-modal-middle-button",
490
- onClick: (event) => handleWalletClick(event, getStartedWallet.adapter.name),
491
- children: "Get started"
492
- }
493
- )
494
- ] }),
495
- otherWallets.length ? /* @__PURE__ */ jsxs5(Fragment, { children: [
496
- /* @__PURE__ */ jsxs5(
467
+ ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
468
+ /* @__PURE__ */ jsx7("h1", { className: "wallet-adapter-modal-title", children: "Get an Aleo wallet to continue" }),
469
+ /* @__PURE__ */ jsx7("div", { className: "wallet-adapter-modal-middle", children: /* @__PURE__ */ jsx7(
470
+ "button",
471
+ {
472
+ type: "button",
473
+ className: "wallet-adapter-modal-middle-button",
474
+ onClick: (event) => handleNotInstalledWalletClick(event, getStartedWallet?.adapter.name),
475
+ children: "Get started"
476
+ }
477
+ ) }),
478
+ otherWallets.length ? /* @__PURE__ */ jsxs4(Fragment, { children: [
479
+ /* @__PURE__ */ jsxs4(
497
480
  "button",
498
481
  {
499
482
  className: "wallet-adapter-modal-list-more",
500
483
  onClick: handleCollapseClick,
501
484
  tabIndex: 0,
502
485
  children: [
503
- /* @__PURE__ */ jsxs5("span", { children: [
486
+ /* @__PURE__ */ jsxs4("span", { children: [
504
487
  expanded ? "Hide " : "View other ",
505
488
  "options"
506
489
  ] }),
507
- /* @__PURE__ */ jsx8(
490
+ /* @__PURE__ */ jsx7(
508
491
  "svg",
509
492
  {
510
493
  width: "13",
@@ -512,16 +495,16 @@ var WalletModal = ({
512
495
  viewBox: "0 0 13 7",
513
496
  xmlns: "http://www.w3.org/2000/svg",
514
497
  className: `${expanded ? "wallet-adapter-modal-list-more-icon-rotate" : ""}`,
515
- children: /* @__PURE__ */ jsx8("path", { d: "M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z" })
498
+ children: /* @__PURE__ */ jsx7("path", { d: "M0.71418 1.626L5.83323 6.26188C5.91574 6.33657 6.0181 6.39652 6.13327 6.43762C6.24844 6.47872 6.37371 6.5 6.50048 6.5C6.62725 6.5 6.75252 6.47872 6.8677 6.43762C6.98287 6.39652 7.08523 6.33657 7.16774 6.26188L12.2868 1.626C12.7753 1.1835 12.3703 0.5 11.6195 0.5H1.37997C0.629216 0.5 0.224175 1.1835 0.71418 1.626Z" })
516
499
  }
517
500
  )
518
501
  ]
519
502
  }
520
503
  ),
521
- /* @__PURE__ */ jsx8(Collapse, { expanded, id: "wallet-adapter-modal-collapse", children: /* @__PURE__ */ jsx8("ul", { className: "wallet-adapter-modal-list", children: otherWallets.map((wallet2) => /* @__PURE__ */ jsx8(
504
+ /* @__PURE__ */ jsx7(Collapse, { expanded, id: "wallet-adapter-modal-collapse", children: /* @__PURE__ */ jsx7("ul", { className: "wallet-adapter-modal-list", children: otherWallets.map((wallet2) => /* @__PURE__ */ jsx7(
522
505
  WalletListItem,
523
506
  {
524
- handleClick: (event) => handleWalletClick(event, wallet2.adapter.name),
507
+ handleClick: (event) => handleNotInstalledWalletClick(event, wallet2.adapter.name),
525
508
  tabIndex: expanded ? 0 : -1,
526
509
  wallet: wallet2
527
510
  },
@@ -529,18 +512,18 @@ var WalletModal = ({
529
512
  )) }) })
530
513
  ] }) : null
531
514
  ] }),
532
- /* @__PURE__ */ jsx8(
515
+ /* @__PURE__ */ jsx7(
533
516
  "a",
534
517
  {
535
518
  className: "wallet-adapter-modal-footer",
536
519
  href: "https://provable.com/",
537
520
  target: "_blank",
538
521
  rel: "noopener noreferrer",
539
- children: /* @__PURE__ */ jsx8(ProvableLogo, {})
522
+ children: /* @__PURE__ */ jsx7(ProvableLogo, {})
540
523
  }
541
524
  )
542
525
  ] }) }),
543
- /* @__PURE__ */ jsx8("div", { className: "wallet-adapter-modal-overlay", onMouseDown: handleClose })
526
+ /* @__PURE__ */ jsx7("div", { className: "wallet-adapter-modal-overlay", onMouseDown: handleClose })
544
527
  ]
545
528
  }
546
529
  ),
@@ -550,7 +533,7 @@ var WalletModal = ({
550
533
 
551
534
  // src/WalletModalButton.tsx
552
535
  import { useCallback as useCallback3 } from "react";
553
- import { jsx as jsx9 } from "react/jsx-runtime";
536
+ import { jsx as jsx8 } from "react/jsx-runtime";
554
537
  var WalletModalButton = ({
555
538
  children = "Connect Wallet",
556
539
  onClick,
@@ -564,15 +547,15 @@ var WalletModalButton = ({
564
547
  },
565
548
  [onClick, setVisible, visible]
566
549
  );
567
- return /* @__PURE__ */ jsx9(Button, { className: "wallet-adapter-button-trigger", onClick: handleClick, ...props, children });
550
+ return /* @__PURE__ */ jsx8(Button, { className: "wallet-adapter-button-trigger", onClick: handleClick, ...props, children });
568
551
  };
569
552
 
570
553
  // src/WalletModalProvider.tsx
571
554
  import { useState as useState2 } from "react";
572
- import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
555
+ import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
573
556
  var WalletModalProvider = ({ children, ...props }) => {
574
557
  const [visible, setVisible] = useState2(false);
575
- return /* @__PURE__ */ jsxs6(
558
+ return /* @__PURE__ */ jsxs5(
576
559
  WalletModalContext.Provider,
577
560
  {
578
561
  value: {
@@ -581,7 +564,7 @@ var WalletModalProvider = ({ children, ...props }) => {
581
564
  },
582
565
  children: [
583
566
  children,
584
- visible && /* @__PURE__ */ jsx10(WalletModal, { ...props })
567
+ visible && /* @__PURE__ */ jsx9(WalletModal, { ...props })
585
568
  ]
586
569
  }
587
570
  );
@@ -590,7 +573,7 @@ var WalletModalProvider = ({ children, ...props }) => {
590
573
  // src/WalletDisconnectButton.tsx
591
574
  import { useCallback as useCallback4, useMemo as useMemo3 } from "react";
592
575
  import { useWallet as useWallet3 } from "@provablehq/aleo-wallet-adaptor-react";
593
- import { jsx as jsx11 } from "react/jsx-runtime";
576
+ import { jsx as jsx10 } from "react/jsx-runtime";
594
577
  var WalletDisconnectButton = ({
595
578
  children,
596
579
  disabled,
@@ -612,12 +595,12 @@ var WalletDisconnectButton = ({
612
595
  if (wallet) return "Disconnect";
613
596
  return "Disconnect Wallet";
614
597
  }, [children, disconnecting, wallet]);
615
- return /* @__PURE__ */ jsx11(
598
+ return /* @__PURE__ */ jsx10(
616
599
  Button,
617
600
  {
618
601
  className: "wallet-adapter-button-trigger",
619
602
  disabled: disabled || !wallet,
620
- startIcon: wallet ? /* @__PURE__ */ jsx11(WalletIcon, { wallet }) : void 0,
603
+ startIcon: wallet ? /* @__PURE__ */ jsx10(WalletIcon, { wallet }) : void 0,
621
604
  onClick: handleClick,
622
605
  ...props,
623
606
  children: content
@@ -626,12 +609,12 @@ var WalletDisconnectButton = ({
626
609
  };
627
610
 
628
611
  // src/WalletMultiButton.tsx
629
- import { useCallback as useCallback5, useEffect, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
612
+ import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
630
613
  import { useWallet as useWallet4 } from "@provablehq/aleo-wallet-adaptor-react";
631
614
 
632
615
  // src/icons.tsx
633
- import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
634
- var CopyIcon = () => /* @__PURE__ */ jsxs7(
616
+ import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
617
+ var CopyIcon = () => /* @__PURE__ */ jsxs6(
635
618
  "svg",
636
619
  {
637
620
  xmlns: "http://www.w3.org/2000/svg",
@@ -644,12 +627,12 @@ var CopyIcon = () => /* @__PURE__ */ jsxs7(
644
627
  strokeLinecap: "round",
645
628
  strokeLinejoin: "round",
646
629
  children: [
647
- /* @__PURE__ */ jsx12("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
648
- /* @__PURE__ */ jsx12("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
630
+ /* @__PURE__ */ jsx11("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
631
+ /* @__PURE__ */ jsx11("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
649
632
  ]
650
633
  }
651
634
  );
652
- var CheckIcon = () => /* @__PURE__ */ jsx12(
635
+ var CheckIcon = () => /* @__PURE__ */ jsx11(
653
636
  "svg",
654
637
  {
655
638
  xmlns: "http://www.w3.org/2000/svg",
@@ -661,10 +644,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx12(
661
644
  strokeWidth: "2",
662
645
  strokeLinecap: "round",
663
646
  strokeLinejoin: "round",
664
- children: /* @__PURE__ */ jsx12("path", { d: "M20 6 9 17l-5-5" })
647
+ children: /* @__PURE__ */ jsx11("path", { d: "M20 6 9 17l-5-5" })
665
648
  }
666
649
  );
667
- var GenericWalletIcon = () => /* @__PURE__ */ jsxs7(
650
+ var GenericWalletIcon = () => /* @__PURE__ */ jsxs6(
668
651
  "svg",
669
652
  {
670
653
  xmlns: "http://www.w3.org/2000/svg",
@@ -677,14 +660,14 @@ var GenericWalletIcon = () => /* @__PURE__ */ jsxs7(
677
660
  strokeLinecap: "round",
678
661
  strokeLinejoin: "round",
679
662
  children: [
680
- /* @__PURE__ */ jsx12("path", { d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" }),
681
- /* @__PURE__ */ jsx12("path", { d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" })
663
+ /* @__PURE__ */ jsx11("path", { d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" }),
664
+ /* @__PURE__ */ jsx11("path", { d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" })
682
665
  ]
683
666
  }
684
667
  );
685
668
 
686
669
  // src/WalletMultiButton.tsx
687
- import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
670
+ import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
688
671
  var WalletMultiButton = ({ children, ...props }) => {
689
672
  const { address, wallet, disconnect } = useWallet4();
690
673
  const { setVisible } = useWalletModal();
@@ -718,7 +701,7 @@ var WalletMultiButton = ({ children, ...props }) => {
718
701
  disconnect();
719
702
  closeDropdown();
720
703
  }, [disconnect, closeDropdown]);
721
- useEffect(() => {
704
+ useEffect2(() => {
722
705
  const listener = (event) => {
723
706
  const node = ref.current;
724
707
  if (!node || node.contains(event.target)) return;
@@ -731,22 +714,22 @@ var WalletMultiButton = ({ children, ...props }) => {
731
714
  document.removeEventListener("touchstart", listener);
732
715
  };
733
716
  }, [ref, closeDropdown]);
734
- if (!wallet) return /* @__PURE__ */ jsx13(WalletModalButton, { ...props, children });
735
- if (!base58) return /* @__PURE__ */ jsx13(WalletConnectButton, { ...props, children });
736
- return /* @__PURE__ */ jsxs8("div", { className: "wallet-adapter-dropdown", children: [
737
- /* @__PURE__ */ jsx13(
717
+ if (!wallet) return /* @__PURE__ */ jsx12(WalletModalButton, { ...props, children });
718
+ if (!base58) return /* @__PURE__ */ jsx12(WalletConnectButton, { ...props, children });
719
+ return /* @__PURE__ */ jsxs7("div", { className: "wallet-adapter-dropdown", children: [
720
+ /* @__PURE__ */ jsx12(
738
721
  Button,
739
722
  {
740
723
  "aria-expanded": active,
741
724
  className: "wallet-adapter-button-trigger",
742
725
  style: { pointerEvents: active ? "none" : "auto", ...props.style },
743
726
  onClick: openDropdown,
744
- startIcon: /* @__PURE__ */ jsx13(WalletIcon, { wallet }),
727
+ startIcon: /* @__PURE__ */ jsx12(WalletIcon, { wallet }),
745
728
  ...props,
746
729
  children: content
747
730
  }
748
731
  ),
749
- /* @__PURE__ */ jsxs8(
732
+ /* @__PURE__ */ jsxs7(
750
733
  "ul",
751
734
  {
752
735
  "aria-label": "dropdown-list",
@@ -754,18 +737,18 @@ var WalletMultiButton = ({ children, ...props }) => {
754
737
  ref,
755
738
  role: "menu",
756
739
  children: [
757
- /* @__PURE__ */ jsx13("li", { onClick: copyAddress, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: copied ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
740
+ /* @__PURE__ */ jsx12("li", { onClick: copyAddress, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: copied ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
758
741
  "Copied",
759
- /* @__PURE__ */ jsx13(CheckIcon, {})
760
- ] }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
742
+ /* @__PURE__ */ jsx12(CheckIcon, {})
743
+ ] }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
761
744
  "Copy address ",
762
- /* @__PURE__ */ jsx13(CopyIcon, {})
745
+ /* @__PURE__ */ jsx12(CopyIcon, {})
763
746
  ] }) }),
764
- /* @__PURE__ */ jsxs8("li", { onClick: openModal, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: [
747
+ /* @__PURE__ */ jsxs7("li", { onClick: openModal, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: [
765
748
  "Change wallet ",
766
- /* @__PURE__ */ jsx13(GenericWalletIcon, {})
749
+ /* @__PURE__ */ jsx12(GenericWalletIcon, {})
767
750
  ] }),
768
- /* @__PURE__ */ jsx13("li", { onClick: onDisconnect, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: "Disconnect" })
751
+ /* @__PURE__ */ jsx12("li", { onClick: onDisconnect, className: "wallet-adapter-dropdown-list-item", role: "menuitem", children: "Disconnect" })
769
752
  ]
770
753
  }
771
754
  )