@aptos-labs/wallet-adapter-mui-design 2.9.3 → 3.0.1

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/index.d.ts +3 -13
  3. package/dist/index.js +273 -136
  4. package/dist/index.mjs +277 -138
  5. package/package.json +2 -2
  6. package/src/WalletConnector.tsx +5 -17
  7. package/src/WalletModel.tsx +245 -116
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @aptos-labs/wallet-adapter-mui-design
2
2
 
3
+ ## 3.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - @aptos-labs/wallet-adapter-react@3.5.1
8
+
9
+ ## 3.0.0
10
+
11
+ ### Major Changes
12
+
13
+ - 96df1f7: Renamed `sortDefaultWallets` prop to `sortAvailableWallets` and `sortMoreWallets` prop to `sortInstallableWallets`. Also added `sortAptosConnectWallets` prop.
14
+
15
+ ### Minor Changes
16
+
17
+ - 96df1f7: Added Aptos Connect education screens to the wallet selector modal.
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies [96df1f7]
22
+ - Updated dependencies [f23cf43]
23
+ - @aptos-labs/wallet-adapter-react@3.5.0
24
+
3
25
  ## 2.9.3
4
26
 
5
27
  ### Patch Changes
package/dist/index.d.ts CHANGED
@@ -1,23 +1,13 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { AnyAptosWallet } from '@aptos-labs/wallet-adapter-react';
2
+ import { WalletSortingOptions } from '@aptos-labs/wallet-adapter-react';
3
3
  import { Breakpoint } from '@mui/material';
4
4
 
5
- interface WalletConnectorProps {
5
+ interface WalletConnectorProps extends WalletSortingOptions {
6
6
  networkSupport?: string;
7
7
  handleNavigate?: () => void;
8
- /**
9
- * An optional function for sorting wallets that are currently installed or
10
- * loadable in the wallet connector modal.
11
- */
12
- sortDefaultWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
13
- /**
14
- * An optional function for sorting wallets that are NOT currently installed or
15
- * loadable in the wallet connector modal.
16
- */
17
- sortMoreWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
18
8
  /** The max width of the wallet selector modal. Defaults to `xs`. */
19
9
  modalMaxWidth?: Breakpoint;
20
10
  }
21
- declare function WalletConnector({ networkSupport, handleNavigate, sortDefaultWallets, sortMoreWallets, modalMaxWidth, }: WalletConnectorProps): react_jsx_runtime.JSX.Element;
11
+ declare function WalletConnector({ networkSupport, handleNavigate, modalMaxWidth, ...walletSortingOptions }: WalletConnectorProps): react_jsx_runtime.JSX.Element;
22
12
 
23
13
  export { WalletConnector, WalletConnectorProps };
package/dist/index.js CHANGED
@@ -202,37 +202,23 @@ function WalletsModal({
202
202
  handleClose,
203
203
  modalOpen,
204
204
  networkSupport,
205
- sortDefaultWallets,
206
- sortMoreWallets,
207
- maxWidth
205
+ modalMaxWidth,
206
+ ...walletSortingOptions
208
207
  }) {
209
208
  const theme = (0, import_material3.useTheme)();
210
209
  const [expanded, setExpanded] = (0, import_react3.useState)(false);
211
210
  const { wallets = [] } = (0, import_wallet_adapter_react3.useWallet)();
212
- const {
213
- aptosConnectWallets,
214
- otherWallets
215
- } = (0, import_wallet_adapter_react3.getAptosConnectWallets)(wallets);
216
- const {
217
- defaultWallets,
218
- moreWallets
219
- } = (0, import_wallet_adapter_react3.partitionWallets)(otherWallets);
220
- if (sortDefaultWallets)
221
- defaultWallets.sort(sortDefaultWallets);
222
- if (sortMoreWallets)
223
- moreWallets.sort(sortMoreWallets);
211
+ const { aptosConnectWallets, availableWallets, installableWallets } = (0, import_wallet_adapter_react3.groupAndSortWallets)(wallets, walletSortingOptions);
224
212
  const hasAptosConnectWallets = !!aptosConnectWallets.length;
225
213
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Dialog, {
226
214
  open: modalOpen,
227
215
  onClose: handleClose,
228
216
  "aria-label": "wallet selector modal",
229
217
  sx: { borderRadius: `${theme.shape.borderRadius}px` },
230
- maxWidth: maxWidth != null ? maxWidth : "xs",
218
+ maxWidth: modalMaxWidth != null ? modalMaxWidth : "xs",
231
219
  fullWidth: true,
232
220
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Stack, {
233
221
  sx: {
234
- display: "flex",
235
- flexDirection: "column",
236
222
  top: "50%",
237
223
  left: "50%",
238
224
  bgcolor: "background.paper",
@@ -251,136 +237,177 @@ function WalletsModal({
251
237
  },
252
238
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material2.Close, {})
253
239
  }),
254
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Typography, {
255
- align: "center",
256
- variant: "h5",
257
- pt: 2,
258
- sx: {
259
- display: "flex",
260
- flexDirection: "column"
261
- },
262
- children: hasAptosConnectWallets ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
263
- children: [
264
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
265
- children: "Log in or sign up"
266
- }),
267
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
268
- children: "with Social + Aptos Connect"
269
- })
270
- ]
271
- }) : "Connect Wallet"
272
- }),
273
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Box, {
274
- sx: {
275
- display: "flex",
276
- gap: 0.5,
277
- alignItems: "center",
278
- justifyContent: "center"
279
- },
280
- children: networkSupport && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
281
- children: [
282
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material2.LanOutlined, {
283
- sx: {
284
- fontSize: "0.9rem",
285
- color: grey[400]
286
- }
287
- }),
288
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Typography, {
289
- sx: {
290
- display: "inline-flex",
291
- fontSize: "0.9rem",
292
- color: grey[400]
293
- },
294
- align: "center",
240
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_wallet_adapter_react3.AboutAptosConnect, {
241
+ renderEducationScreen,
242
+ children: [
243
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Typography, {
244
+ align: "center",
245
+ variant: "h5",
246
+ component: "h2",
247
+ pt: 2,
248
+ sx: {
249
+ display: "flex",
250
+ flexDirection: "column"
251
+ },
252
+ children: hasAptosConnectWallets ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
295
253
  children: [
296
- networkSupport,
297
- " only"
254
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
255
+ children: "Log in or sign up"
256
+ }),
257
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
258
+ children: "with Social + Aptos Connect"
259
+ })
298
260
  ]
299
- })
300
- ]
301
- })
302
- }),
303
- hasAptosConnectWallets && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
304
- children: [
305
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Stack, {
306
- sx: { gap: 1 },
307
- children: aptosConnectWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AptosConnectWalletRow, {
308
- wallet,
309
- onConnect: handleClose
310
- }, wallet.name))
261
+ }) : "Connect Wallet"
311
262
  }),
312
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Stack, {
313
- component: import_wallet_adapter_react3.AptosPrivacyPolicy,
314
- alignItems: "center",
263
+ networkSupport && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Box, {
264
+ sx: {
265
+ display: "flex",
266
+ gap: 0.5,
267
+ alignItems: "center",
268
+ justifyContent: "center"
269
+ },
315
270
  children: [
271
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material2.LanOutlined, {
272
+ sx: {
273
+ fontSize: "0.9rem",
274
+ color: grey[400]
275
+ }
276
+ }),
277
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Typography, {
278
+ sx: {
279
+ display: "inline-flex",
280
+ fontSize: "0.9rem",
281
+ color: grey[400]
282
+ },
283
+ align: "center",
284
+ children: [
285
+ networkSupport,
286
+ " only"
287
+ ]
288
+ })
289
+ ]
290
+ }),
291
+ hasAptosConnectWallets && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Stack, {
292
+ gap: 1,
293
+ children: [
294
+ aptosConnectWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AptosConnectWalletRow, {
295
+ wallet,
296
+ onConnect: handleClose
297
+ }, wallet.name)),
316
298
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Typography, {
317
299
  component: "p",
318
- fontSize: "12px",
319
- lineHeight: "20px",
300
+ fontSize: "14px",
301
+ sx: {
302
+ display: "flex",
303
+ gap: 0.5,
304
+ justifyContent: "center",
305
+ alignItems: "center",
306
+ color: grey[400]
307
+ },
320
308
  children: [
321
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react3.AptosPrivacyPolicy.Disclaimer, {}),
309
+ "Learn more about",
322
310
  " ",
311
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Box, {
312
+ component: import_wallet_adapter_react3.AboutAptosConnect.Trigger,
313
+ sx: {
314
+ background: "none",
315
+ border: "none",
316
+ fontFamily: "inherit",
317
+ fontSize: "inherit",
318
+ cursor: "pointer",
319
+ display: "flex",
320
+ gap: 0.5,
321
+ px: 0,
322
+ py: 1.5,
323
+ alignItems: "center",
324
+ color: theme.palette.text.primary,
325
+ appearance: "none"
326
+ },
327
+ children: [
328
+ "Aptos Connect ",
329
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material2.ArrowForward, {
330
+ sx: { height: 16, width: 16 }
331
+ })
332
+ ]
333
+ })
334
+ ]
335
+ }),
336
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Stack, {
337
+ component: import_wallet_adapter_react3.AptosPrivacyPolicy,
338
+ alignItems: "center",
339
+ py: 0.5,
340
+ children: [
341
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Typography, {
342
+ component: "p",
343
+ fontSize: "12px",
344
+ lineHeight: "20px",
345
+ children: [
346
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react3.AptosPrivacyPolicy.Disclaimer, {}),
347
+ " ",
348
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Box, {
349
+ component: import_wallet_adapter_react3.AptosPrivacyPolicy.Link,
350
+ sx: {
351
+ color: grey[400],
352
+ textDecoration: "underline",
353
+ textUnderlineOffset: "4px"
354
+ }
355
+ }),
356
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
357
+ children: "."
358
+ })
359
+ ]
360
+ }),
323
361
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Box, {
324
- component: import_wallet_adapter_react3.AptosPrivacyPolicy.Link,
362
+ component: import_wallet_adapter_react3.AptosPrivacyPolicy.PoweredBy,
325
363
  sx: {
326
- color: grey[400],
327
- textDecoration: "underline",
328
- textUnderlineOffset: "4px"
364
+ display: "flex",
365
+ alignItems: "center",
366
+ gap: 0.75,
367
+ fontSize: "12px",
368
+ lineHeight: "20px",
369
+ color: grey[400]
329
370
  }
330
- }),
331
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
332
- children: "."
333
371
  })
334
372
  ]
335
373
  }),
336
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Box, {
337
- component: import_wallet_adapter_react3.AptosPrivacyPolicy.PoweredBy,
338
- sx: {
339
- display: "flex",
340
- alignItems: "center",
341
- gap: 0.75,
342
- fontSize: "12px",
343
- lineHeight: "20px",
344
- color: grey[400]
345
- }
374
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Divider, {
375
+ sx: { color: grey[400], pt: 2 },
376
+ children: "Or"
346
377
  })
347
378
  ]
348
379
  }),
349
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Divider, {
350
- sx: { color: grey[400], pt: 2 },
351
- children: "Or"
352
- })
353
- ]
354
- }),
355
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Stack, {
356
- sx: { gap: 1 },
357
- children: [
358
- defaultWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletRow, {
359
- wallet,
360
- onConnect: handleClose
361
- }, wallet.name)),
362
- !!moreWallets.length && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
380
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Stack, {
381
+ sx: { gap: 1 },
363
382
  children: [
364
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Button, {
365
- variant: "text",
366
- size: "small",
367
- onClick: () => setExpanded((prev) => !prev),
368
- endIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material2.ExpandMore, {
369
- sx: { height: "20px", width: "20px" }
370
- }),
371
- children: "More Wallets"
372
- }),
373
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Collapse, {
374
- in: expanded,
375
- timeout: "auto",
376
- unmountOnExit: true,
377
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Stack, {
378
- sx: { gap: 1 },
379
- children: moreWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletRow, {
380
- wallet,
381
- onConnect: handleClose
382
- }, wallet.name))
383
- })
383
+ availableWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletRow, {
384
+ wallet,
385
+ onConnect: handleClose
386
+ }, wallet.name)),
387
+ !!installableWallets.length && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
388
+ children: [
389
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Button, {
390
+ variant: "text",
391
+ size: "small",
392
+ onClick: () => setExpanded((prev) => !prev),
393
+ endIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material2.ExpandMore, {
394
+ sx: { height: "20px", width: "20px" }
395
+ }),
396
+ children: "More Wallets"
397
+ }),
398
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Collapse, {
399
+ in: expanded,
400
+ timeout: "auto",
401
+ unmountOnExit: true,
402
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Stack, {
403
+ sx: { gap: 1 },
404
+ children: installableWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletRow, {
405
+ wallet,
406
+ onConnect: handleClose
407
+ }, wallet.name))
408
+ })
409
+ })
410
+ ]
384
411
  })
385
412
  ]
386
413
  })
@@ -463,15 +490,126 @@ function AptosConnectWalletRow({ wallet, onConnect }) {
463
490
  })
464
491
  });
465
492
  }
493
+ function renderEducationScreen(screen) {
494
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
495
+ children: [
496
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Box, {
497
+ sx: {
498
+ display: "grid",
499
+ gridTemplateColumns: "1fr 4fr 1fr",
500
+ alignItems: "center",
501
+ justifyItems: "start"
502
+ },
503
+ children: [
504
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.IconButton, {
505
+ onClick: screen.cancel,
506
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material2.ArrowBack, {})
507
+ }),
508
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Typography, {
509
+ variant: "body1",
510
+ component: "h2",
511
+ width: "100%",
512
+ align: "center",
513
+ children: "About Aptos Connect"
514
+ })
515
+ ]
516
+ }),
517
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Box, {
518
+ sx: {
519
+ display: "flex",
520
+ pb: 1.5,
521
+ alignItems: "end",
522
+ justifyContent: "center",
523
+ height: "162px"
524
+ },
525
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(screen.Graphic, {})
526
+ }),
527
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Stack, {
528
+ sx: { gap: 1, textAlign: "center", pb: 2 },
529
+ children: [
530
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Typography, {
531
+ component: screen.Title,
532
+ variant: "h6"
533
+ }),
534
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Typography, {
535
+ component: screen.Description,
536
+ variant: "body2",
537
+ color: (theme) => theme.palette.text.secondary,
538
+ sx: {
539
+ "&>a": {
540
+ color: (theme) => theme.palette.text.primary,
541
+ textDecoration: "underline",
542
+ textUnderlineOffset: "4px"
543
+ }
544
+ }
545
+ })
546
+ ]
547
+ }),
548
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material3.Box, {
549
+ sx: {
550
+ display: "grid",
551
+ gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
552
+ alignItems: "center"
553
+ },
554
+ children: [
555
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Button, {
556
+ size: "small",
557
+ variant: "text",
558
+ onClick: screen.back,
559
+ sx: { justifySelf: "start" },
560
+ children: "Back"
561
+ }),
562
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Box, {
563
+ sx: {
564
+ display: "flex",
565
+ alignItems: "center",
566
+ gap: 1,
567
+ placeSelf: "center"
568
+ },
569
+ children: screen.screenIndicators.map((ScreenIndicator, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Box, {
570
+ component: ScreenIndicator,
571
+ sx: {
572
+ px: 0,
573
+ py: 2,
574
+ background: "none",
575
+ border: "none",
576
+ cursor: "pointer"
577
+ },
578
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Box, {
579
+ sx: {
580
+ height: "2px",
581
+ width: "24px",
582
+ bgcolor: (theme) => theme.palette.text.disabled,
583
+ "[data-active]>&": {
584
+ bgcolor: (theme) => theme.palette.text.primary
585
+ }
586
+ }
587
+ })
588
+ }, i))
589
+ }),
590
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material3.Button, {
591
+ size: "small",
592
+ variant: "text",
593
+ onClick: screen.next,
594
+ sx: { justifySelf: "end" },
595
+ endIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material2.ArrowForward, {
596
+ sx: { height: 16, width: 16 }
597
+ }),
598
+ children: screen.screenIndex === screen.totalScreens - 1 ? "Finish" : "Next"
599
+ })
600
+ ]
601
+ })
602
+ ]
603
+ });
604
+ }
466
605
 
467
606
  // src/WalletConnector.tsx
468
607
  var import_jsx_runtime = require("react/jsx-runtime");
469
608
  function WalletConnector({
470
609
  networkSupport,
471
610
  handleNavigate,
472
- sortDefaultWallets,
473
- sortMoreWallets,
474
- modalMaxWidth
611
+ modalMaxWidth,
612
+ ...walletSortingOptions
475
613
  }) {
476
614
  const [modalOpen, setModalOpen] = (0, import_react4.useState)(false);
477
615
  const handleModalOpen = () => setModalOpen(true);
@@ -486,9 +624,8 @@ function WalletConnector({
486
624
  handleClose,
487
625
  modalOpen,
488
626
  networkSupport,
489
- sortDefaultWallets,
490
- sortMoreWallets,
491
- maxWidth: modalMaxWidth
627
+ modalMaxWidth,
628
+ ...walletSortingOptions
492
629
  })
493
630
  ]
494
631
  });