@aptos-labs/wallet-adapter-ant-design 2.6.2 → 3.0.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +10 -0
  3. package/dist/index.css +84 -0
  4. package/dist/index.d.ts +4 -14
  5. package/dist/index.js +162 -95
  6. package/dist/index.mjs +172 -98
  7. package/package.json +3 -2
  8. package/src/WalletSelector.tsx +152 -103
  9. package/src/styles.css +94 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @aptos-labs/wallet-adapter-ant-design
2
2
 
3
+ ## 3.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 96df1f7: Renamed `sortDefaultWallets` prop to `sortAvailableWallets` and `sortMoreWallets` prop to `sortInstallableWallets`. Also added `sortAptosConnectWallets` prop.
8
+
9
+ ### Minor Changes
10
+
11
+ - 96df1f7: Added Aptos Connect education screens to the wallet selector modal.
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies [96df1f7]
16
+ - Updated dependencies [f23cf43]
17
+ - @aptos-labs/wallet-adapter-react@3.5.0
18
+
19
+ ## 2.6.3
20
+
21
+ ### Patch Changes
22
+
23
+ - @aptos-labs/wallet-adapter-react@3.4.3
24
+
3
25
  ## 2.6.2
4
26
 
5
27
  ### Patch Changes
package/README.md CHANGED
@@ -52,6 +52,16 @@ You can override these classes
52
52
  .aptos-connect-privacy-policy-text
53
53
  .aptos-connect-privacy-policy-link
54
54
  .aptos-connect-powered-by
55
+ .about-aptos-connect-trigger-wrapper
56
+ .about-aptos-connect-trigger
57
+ .about-aptos-connect-header
58
+ .about-aptos-connect-graphic-wrapper
59
+ .about-aptos-connect-text-wrapper
60
+ .about-aptos-connect-title
61
+ .about-aptos-connect-description
62
+ .about-aptos-connect-footer-wrapper
63
+ .about-aptos-connect-screen-indicators-wrapper
64
+ .about-aptos-connect-screen-indicator
55
65
  ```
56
66
 
57
67
  For example, to override the `connect wallet` button background color, you can use the `.wallet-button` class in your local `.css` file
package/dist/index.css CHANGED
@@ -79,6 +79,90 @@
79
79
  font-size: 16px;
80
80
  line-height: 32px;
81
81
  }
82
+ .about-aptos-connect-trigger-wrapper {
83
+ display: flex;
84
+ justify-content: center;
85
+ align-items: center;
86
+ gap: 4px;
87
+ color: rgba(0, 0, 0, 0.5);
88
+ font-size: 14px;
89
+ }
90
+ .about-aptos-connect-trigger {
91
+ background: none;
92
+ border: none;
93
+ font-family: inherit;
94
+ font-size: inherit;
95
+ cursor: pointer;
96
+ display: flex;
97
+ align-items: center;
98
+ gap: 4px;
99
+ padding-inline: 0;
100
+ padding-block: 12px;
101
+ color: black;
102
+ }
103
+ .about-aptos-connect-header {
104
+ display: grid;
105
+ grid-template-columns: 1fr 4fr 1fr;
106
+ align-items: center;
107
+ margin-bottom: 16px;
108
+ }
109
+ .about-aptos-connect-header > div {
110
+ margin: 0;
111
+ font-size: 18px;
112
+ }
113
+ .about-aptos-connect-graphic-wrapper {
114
+ display: flex;
115
+ height: 162px;
116
+ padding-bottom: 12px;
117
+ align-items: flex-end;
118
+ justify-content: center;
119
+ }
120
+ .about-aptos-connect-text-wrapper {
121
+ display: flex;
122
+ flex-direction: column;
123
+ gap: 8px;
124
+ text-align: center;
125
+ padding-bottom: 4px;
126
+ }
127
+ .about-aptos-connect-title {
128
+ font-size: 22px;
129
+ }
130
+ .about-aptos-connect-description {
131
+ font-size: 14px;
132
+ color: rgba(0, 0, 0, 0.5);
133
+ }
134
+ .about-aptos-connect-description > a {
135
+ color: black;
136
+ text-decoration: underline;
137
+ text-underline-offset: 4px;
138
+ }
139
+ .about-aptos-connect-footer-wrapper {
140
+ display: grid;
141
+ grid-template-columns: repeat(3, minmax(0, 1fr));
142
+ align-items: center;
143
+ }
144
+ .about-aptos-connect-screen-indicators-wrapper {
145
+ display: flex;
146
+ align-items: center;
147
+ gap: 8px;
148
+ place-self: center;
149
+ }
150
+ .about-aptos-connect-screen-indicator {
151
+ background: none;
152
+ border: none;
153
+ padding-inline: 0;
154
+ padding-block: 16px;
155
+ cursor: pointer;
156
+ }
157
+ .about-aptos-connect-screen-indicator > div {
158
+ height: 2px;
159
+ width: 24px;
160
+ background-color: rgba(0, 0, 0, 0.2);
161
+ transition: background-color 0.2s ease;
162
+ }
163
+ .about-aptos-connect-screen-indicator[data-active] > div {
164
+ background-color: black;
165
+ }
82
166
  :where(.wallet-selector-modal .ant-modal-body) {
83
167
  display: flex;
84
168
  flex-direction: column;
package/dist/index.d.ts CHANGED
@@ -1,21 +1,11 @@
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 { Dispatch, SetStateAction } from 'react';
4
4
 
5
- type WalletSelectorProps = {
5
+ interface WalletSelectorProps extends WalletSortingOptions {
6
6
  isModalOpen?: boolean;
7
7
  setModalOpen?: Dispatch<SetStateAction<boolean>>;
8
- /**
9
- * An optional function for sorting wallets that are currently installed or
10
- * loadable in the wallet selector 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 selector modal.
16
- */
17
- sortMoreWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
18
- };
19
- declare function WalletSelector({ isModalOpen, setModalOpen, sortDefaultWallets, sortMoreWallets, }: WalletSelectorProps): react_jsx_runtime.JSX.Element;
8
+ }
9
+ declare function WalletSelector({ isModalOpen, setModalOpen, ...walletSortingOptions }: WalletSelectorProps): react_jsx_runtime.JSX.Element;
20
10
 
21
11
  export { WalletSelector };
package/dist/index.js CHANGED
@@ -25,6 +25,7 @@ __export(src_exports, {
25
25
  module.exports = __toCommonJS(src_exports);
26
26
 
27
27
  // src/WalletSelector.tsx
28
+ var import_icons = require("@ant-design/icons");
28
29
  var import_wallet_adapter_react = require("@aptos-labs/wallet-adapter-react");
29
30
  var import_antd = require("antd");
30
31
  var import_react = require("react");
@@ -33,8 +34,7 @@ var { Text } = import_antd.Typography;
33
34
  function WalletSelector({
34
35
  isModalOpen,
35
36
  setModalOpen,
36
- sortDefaultWallets,
37
- sortMoreWallets
37
+ ...walletSortingOptions
38
38
  }) {
39
39
  const [walletSelectorModalOpen, setWalletSelectorModalOpen] = (0, import_react.useState)(false);
40
40
  (0, import_react.useEffect)(() => {
@@ -43,18 +43,7 @@ function WalletSelector({
43
43
  }
44
44
  }, [isModalOpen]);
45
45
  const { account, connected, disconnect, wallets = [] } = (0, import_wallet_adapter_react.useWallet)();
46
- const {
47
- aptosConnectWallets,
48
- otherWallets
49
- } = (0, import_wallet_adapter_react.getAptosConnectWallets)(wallets);
50
- const {
51
- defaultWallets,
52
- moreWallets
53
- } = (0, import_wallet_adapter_react.partitionWallets)(otherWallets);
54
- if (sortDefaultWallets)
55
- defaultWallets.sort(sortDefaultWallets);
56
- if (sortMoreWallets)
57
- moreWallets.sort(sortMoreWallets);
46
+ const { aptosConnectWallets, availableWallets, installableWallets } = (0, import_wallet_adapter_react.groupAndSortWallets)(wallets, walletSortingOptions);
58
47
  const hasAptosConnectWallets = !!aptosConnectWallets.length;
59
48
  const onWalletButtonClick = () => {
60
49
  if (connected) {
@@ -70,6 +59,75 @@ function WalletSelector({
70
59
  }
71
60
  };
72
61
  const buttonText = (account == null ? void 0 : account.ansName) || (0, import_wallet_adapter_react.truncateAddress)(account == null ? void 0 : account.address) || "Unknown";
62
+ const modalProps = {
63
+ centered: true,
64
+ open: walletSelectorModalOpen,
65
+ onCancel: closeModal,
66
+ footer: null,
67
+ zIndex: 9999,
68
+ className: "wallet-selector-modal"
69
+ };
70
+ const renderEducationScreens = (screen) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Modal, {
71
+ ...modalProps,
72
+ afterClose: screen.cancel,
73
+ title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
74
+ className: "about-aptos-connect-header",
75
+ children: [
76
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
77
+ type: "text",
78
+ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowLeftOutlined, {}),
79
+ onClick: screen.cancel
80
+ }),
81
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
82
+ className: "wallet-modal-title",
83
+ children: "About Aptos Connect"
84
+ })
85
+ ]
86
+ }),
87
+ children: [
88
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
89
+ className: "about-aptos-connect-graphic-wrapper",
90
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(screen.Graphic, {})
91
+ }),
92
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
93
+ className: "about-aptos-connect-text-wrapper",
94
+ children: [
95
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(screen.Title, {
96
+ className: "about-aptos-connect-title"
97
+ }),
98
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(screen.Description, {
99
+ className: "about-aptos-connect-description"
100
+ })
101
+ ]
102
+ }),
103
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
104
+ className: "about-aptos-connect-footer-wrapper",
105
+ children: [
106
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
107
+ type: "text",
108
+ style: { justifySelf: "start" },
109
+ onClick: screen.back,
110
+ children: "Back"
111
+ }),
112
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
113
+ className: "about-aptos-connect-screen-indicators-wrapper",
114
+ children: screen.screenIndicators.map((ScreenIndicator, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScreenIndicator, {
115
+ className: "about-aptos-connect-screen-indicator",
116
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
117
+ }, i))
118
+ }),
119
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
120
+ type: "text",
121
+ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowRightOutlined, {}),
122
+ iconPosition: "end",
123
+ style: { justifySelf: "end" },
124
+ onClick: screen.next,
125
+ children: screen.screenIndex === screen.totalScreens - 1 ? "Finish" : "Next"
126
+ })
127
+ ]
128
+ })
129
+ ]
130
+ });
73
131
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
74
132
  children: [
75
133
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
@@ -77,92 +135,101 @@ function WalletSelector({
77
135
  onClick: onWalletButtonClick,
78
136
  children: connected ? buttonText : "Connect Wallet"
79
137
  }),
80
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Modal, {
81
- title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
82
- className: "wallet-modal-title",
83
- children: hasAptosConnectWallets ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
84
- children: [
85
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
86
- children: "Log in or sign up"
87
- }),
88
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
89
- children: "with Social + Aptos Connect"
90
- })
91
- ]
92
- }) : "Connect Wallet"
93
- }),
94
- centered: true,
95
- open: walletSelectorModalOpen,
96
- onCancel: closeModal,
97
- footer: [],
98
- closable: false,
99
- zIndex: 9999,
100
- className: "wallet-selector-modal",
101
- children: !connected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
102
- children: [
103
- hasAptosConnectWallets && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
138
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AboutAptosConnect, {
139
+ renderEducationScreen: renderEducationScreens,
140
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Modal, {
141
+ ...modalProps,
142
+ title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
143
+ className: "wallet-modal-title",
144
+ children: hasAptosConnectWallets ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
104
145
  children: [
105
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, {
106
- vertical: true,
107
- gap: 12,
108
- children: aptosConnectWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AptosConnectWalletRow, {
109
- wallet,
110
- onConnect: closeModal
111
- }, wallet.name))
146
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
147
+ children: "Log in or sign up"
112
148
  }),
113
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_wallet_adapter_react.AptosPrivacyPolicy, {
114
- className: "aptos-connect-privacy-policy-wrapper",
115
- children: [
116
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
117
- className: "aptos-connect-privacy-policy-text",
118
- children: [
119
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AptosPrivacyPolicy.Disclaimer, {}),
120
- " ",
121
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AptosPrivacyPolicy.Link, {
122
- className: "aptos-connect-privacy-policy-link"
123
- }),
124
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
125
- children: "."
126
- })
127
- ]
128
- }),
129
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AptosPrivacyPolicy.PoweredBy, {
130
- className: "aptos-connect-powered-by"
131
- })
132
- ]
133
- }),
134
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Divider, {
135
- children: "Or"
149
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
150
+ children: "with Social + Aptos Connect"
136
151
  })
137
152
  ]
138
- }),
139
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, {
140
- vertical: true,
141
- gap: 12,
142
- children: defaultWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletRow, {
143
- wallet,
144
- onConnect: closeModal
145
- }, wallet.name))
146
- }),
147
- !!moreWallets.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Collapse, {
148
- ghost: true,
149
- expandIconPosition: "end",
150
- items: [
151
- {
152
- key: "more-wallets",
153
- label: "More Wallets",
154
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, {
155
- vertical: true,
156
- gap: 12,
157
- children: moreWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletRow, {
158
- wallet,
159
- onConnect: closeModal
160
- }, wallet.name))
153
+ }) : "Connect Wallet"
154
+ }),
155
+ children: !connected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
156
+ children: [
157
+ hasAptosConnectWallets && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Flex, {
158
+ vertical: true,
159
+ gap: 12,
160
+ children: [
161
+ aptosConnectWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AptosConnectWalletRow, {
162
+ wallet,
163
+ onConnect: closeModal
164
+ }, wallet.name)),
165
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
166
+ className: "about-aptos-connect-trigger-wrapper",
167
+ children: [
168
+ "Learn more about",
169
+ " ",
170
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_wallet_adapter_react.AboutAptosConnect.Trigger, {
171
+ className: "about-aptos-connect-trigger",
172
+ children: [
173
+ "Aptos Connect",
174
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowRightOutlined, {})
175
+ ]
176
+ })
177
+ ]
178
+ }),
179
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_wallet_adapter_react.AptosPrivacyPolicy, {
180
+ className: "aptos-connect-privacy-policy-wrapper",
181
+ children: [
182
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
183
+ className: "aptos-connect-privacy-policy-text",
184
+ children: [
185
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AptosPrivacyPolicy.Disclaimer, {}),
186
+ " ",
187
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AptosPrivacyPolicy.Link, {
188
+ className: "aptos-connect-privacy-policy-link"
189
+ }),
190
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
191
+ children: "."
192
+ })
193
+ ]
194
+ }),
195
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AptosPrivacyPolicy.PoweredBy, {
196
+ className: "aptos-connect-powered-by"
197
+ })
198
+ ]
199
+ }),
200
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Divider, {
201
+ children: "Or"
161
202
  })
162
- }
163
- ]
164
- })
165
- ]
203
+ ]
204
+ }),
205
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, {
206
+ vertical: true,
207
+ gap: 12,
208
+ children: availableWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletRow, {
209
+ wallet,
210
+ onConnect: closeModal
211
+ }, wallet.name))
212
+ }),
213
+ !!installableWallets.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Collapse, {
214
+ ghost: true,
215
+ expandIconPosition: "end",
216
+ items: [
217
+ {
218
+ key: "more-wallets",
219
+ label: "More Wallets",
220
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, {
221
+ vertical: true,
222
+ gap: 12,
223
+ children: installableWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletRow, {
224
+ wallet,
225
+ onConnect: closeModal
226
+ }, wallet.name))
227
+ })
228
+ }
229
+ ]
230
+ })
231
+ ]
232
+ })
166
233
  })
167
234
  })
168
235
  ]
package/dist/index.mjs CHANGED
@@ -1,22 +1,29 @@
1
1
  // src/WalletSelector.tsx
2
+ import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
2
3
  import {
4
+ AboutAptosConnect,
3
5
  AptosPrivacyPolicy,
4
6
  WalletItem,
5
- getAptosConnectWallets,
7
+ groupAndSortWallets,
6
8
  isInstallRequired,
7
- partitionWallets,
8
9
  truncateAddress,
9
10
  useWallet
10
11
  } from "@aptos-labs/wallet-adapter-react";
11
- import { Button, Collapse, Divider, Flex, Modal, Typography } from "antd";
12
+ import {
13
+ Button,
14
+ Collapse,
15
+ Divider,
16
+ Flex,
17
+ Modal,
18
+ Typography
19
+ } from "antd";
12
20
  import { useEffect, useState } from "react";
13
21
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
14
22
  var { Text } = Typography;
15
23
  function WalletSelector({
16
24
  isModalOpen,
17
25
  setModalOpen,
18
- sortDefaultWallets,
19
- sortMoreWallets
26
+ ...walletSortingOptions
20
27
  }) {
21
28
  const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
22
29
  useEffect(() => {
@@ -25,18 +32,7 @@ function WalletSelector({
25
32
  }
26
33
  }, [isModalOpen]);
27
34
  const { account, connected, disconnect, wallets = [] } = useWallet();
28
- const {
29
- aptosConnectWallets,
30
- otherWallets
31
- } = getAptosConnectWallets(wallets);
32
- const {
33
- defaultWallets,
34
- moreWallets
35
- } = partitionWallets(otherWallets);
36
- if (sortDefaultWallets)
37
- defaultWallets.sort(sortDefaultWallets);
38
- if (sortMoreWallets)
39
- moreWallets.sort(sortMoreWallets);
35
+ const { aptosConnectWallets, availableWallets, installableWallets } = groupAndSortWallets(wallets, walletSortingOptions);
40
36
  const hasAptosConnectWallets = !!aptosConnectWallets.length;
41
37
  const onWalletButtonClick = () => {
42
38
  if (connected) {
@@ -52,6 +48,75 @@ function WalletSelector({
52
48
  }
53
49
  };
54
50
  const buttonText = (account == null ? void 0 : account.ansName) || truncateAddress(account == null ? void 0 : account.address) || "Unknown";
51
+ const modalProps = {
52
+ centered: true,
53
+ open: walletSelectorModalOpen,
54
+ onCancel: closeModal,
55
+ footer: null,
56
+ zIndex: 9999,
57
+ className: "wallet-selector-modal"
58
+ };
59
+ const renderEducationScreens = (screen) => /* @__PURE__ */ jsxs(Modal, {
60
+ ...modalProps,
61
+ afterClose: screen.cancel,
62
+ title: /* @__PURE__ */ jsxs("div", {
63
+ className: "about-aptos-connect-header",
64
+ children: [
65
+ /* @__PURE__ */ jsx(Button, {
66
+ type: "text",
67
+ icon: /* @__PURE__ */ jsx(ArrowLeftOutlined, {}),
68
+ onClick: screen.cancel
69
+ }),
70
+ /* @__PURE__ */ jsx("div", {
71
+ className: "wallet-modal-title",
72
+ children: "About Aptos Connect"
73
+ })
74
+ ]
75
+ }),
76
+ children: [
77
+ /* @__PURE__ */ jsx("div", {
78
+ className: "about-aptos-connect-graphic-wrapper",
79
+ children: /* @__PURE__ */ jsx(screen.Graphic, {})
80
+ }),
81
+ /* @__PURE__ */ jsxs("div", {
82
+ className: "about-aptos-connect-text-wrapper",
83
+ children: [
84
+ /* @__PURE__ */ jsx(screen.Title, {
85
+ className: "about-aptos-connect-title"
86
+ }),
87
+ /* @__PURE__ */ jsx(screen.Description, {
88
+ className: "about-aptos-connect-description"
89
+ })
90
+ ]
91
+ }),
92
+ /* @__PURE__ */ jsxs("div", {
93
+ className: "about-aptos-connect-footer-wrapper",
94
+ children: [
95
+ /* @__PURE__ */ jsx(Button, {
96
+ type: "text",
97
+ style: { justifySelf: "start" },
98
+ onClick: screen.back,
99
+ children: "Back"
100
+ }),
101
+ /* @__PURE__ */ jsx("div", {
102
+ className: "about-aptos-connect-screen-indicators-wrapper",
103
+ children: screen.screenIndicators.map((ScreenIndicator, i) => /* @__PURE__ */ jsx(ScreenIndicator, {
104
+ className: "about-aptos-connect-screen-indicator",
105
+ children: /* @__PURE__ */ jsx("div", {})
106
+ }, i))
107
+ }),
108
+ /* @__PURE__ */ jsx(Button, {
109
+ type: "text",
110
+ icon: /* @__PURE__ */ jsx(ArrowRightOutlined, {}),
111
+ iconPosition: "end",
112
+ style: { justifySelf: "end" },
113
+ onClick: screen.next,
114
+ children: screen.screenIndex === screen.totalScreens - 1 ? "Finish" : "Next"
115
+ })
116
+ ]
117
+ })
118
+ ]
119
+ });
55
120
  return /* @__PURE__ */ jsxs(Fragment, {
56
121
  children: [
57
122
  /* @__PURE__ */ jsx(Button, {
@@ -59,92 +124,101 @@ function WalletSelector({
59
124
  onClick: onWalletButtonClick,
60
125
  children: connected ? buttonText : "Connect Wallet"
61
126
  }),
62
- /* @__PURE__ */ jsx(Modal, {
63
- title: /* @__PURE__ */ jsx("div", {
64
- className: "wallet-modal-title",
65
- children: hasAptosConnectWallets ? /* @__PURE__ */ jsxs(Fragment, {
66
- children: [
67
- /* @__PURE__ */ jsx("span", {
68
- children: "Log in or sign up"
69
- }),
70
- /* @__PURE__ */ jsx("span", {
71
- children: "with Social + Aptos Connect"
72
- })
73
- ]
74
- }) : "Connect Wallet"
75
- }),
76
- centered: true,
77
- open: walletSelectorModalOpen,
78
- onCancel: closeModal,
79
- footer: [],
80
- closable: false,
81
- zIndex: 9999,
82
- className: "wallet-selector-modal",
83
- children: !connected && /* @__PURE__ */ jsxs(Fragment, {
84
- children: [
85
- hasAptosConnectWallets && /* @__PURE__ */ jsxs(Fragment, {
127
+ /* @__PURE__ */ jsx(AboutAptosConnect, {
128
+ renderEducationScreen: renderEducationScreens,
129
+ children: /* @__PURE__ */ jsx(Modal, {
130
+ ...modalProps,
131
+ title: /* @__PURE__ */ jsx("div", {
132
+ className: "wallet-modal-title",
133
+ children: hasAptosConnectWallets ? /* @__PURE__ */ jsxs(Fragment, {
86
134
  children: [
87
- /* @__PURE__ */ jsx(Flex, {
88
- vertical: true,
89
- gap: 12,
90
- children: aptosConnectWallets.map((wallet) => /* @__PURE__ */ jsx(AptosConnectWalletRow, {
91
- wallet,
92
- onConnect: closeModal
93
- }, wallet.name))
94
- }),
95
- /* @__PURE__ */ jsxs(AptosPrivacyPolicy, {
96
- className: "aptos-connect-privacy-policy-wrapper",
97
- children: [
98
- /* @__PURE__ */ jsxs("p", {
99
- className: "aptos-connect-privacy-policy-text",
100
- children: [
101
- /* @__PURE__ */ jsx(AptosPrivacyPolicy.Disclaimer, {}),
102
- " ",
103
- /* @__PURE__ */ jsx(AptosPrivacyPolicy.Link, {
104
- className: "aptos-connect-privacy-policy-link"
105
- }),
106
- /* @__PURE__ */ jsx("span", {
107
- children: "."
108
- })
109
- ]
110
- }),
111
- /* @__PURE__ */ jsx(AptosPrivacyPolicy.PoweredBy, {
112
- className: "aptos-connect-powered-by"
113
- })
114
- ]
135
+ /* @__PURE__ */ jsx("span", {
136
+ children: "Log in or sign up"
115
137
  }),
116
- /* @__PURE__ */ jsx(Divider, {
117
- children: "Or"
138
+ /* @__PURE__ */ jsx("span", {
139
+ children: "with Social + Aptos Connect"
118
140
  })
119
141
  ]
120
- }),
121
- /* @__PURE__ */ jsx(Flex, {
122
- vertical: true,
123
- gap: 12,
124
- children: defaultWallets.map((wallet) => /* @__PURE__ */ jsx(WalletRow, {
125
- wallet,
126
- onConnect: closeModal
127
- }, wallet.name))
128
- }),
129
- !!moreWallets.length && /* @__PURE__ */ jsx(Collapse, {
130
- ghost: true,
131
- expandIconPosition: "end",
132
- items: [
133
- {
134
- key: "more-wallets",
135
- label: "More Wallets",
136
- children: /* @__PURE__ */ jsx(Flex, {
137
- vertical: true,
138
- gap: 12,
139
- children: moreWallets.map((wallet) => /* @__PURE__ */ jsx(WalletRow, {
140
- wallet,
141
- onConnect: closeModal
142
- }, wallet.name))
142
+ }) : "Connect Wallet"
143
+ }),
144
+ children: !connected && /* @__PURE__ */ jsxs(Fragment, {
145
+ children: [
146
+ hasAptosConnectWallets && /* @__PURE__ */ jsxs(Flex, {
147
+ vertical: true,
148
+ gap: 12,
149
+ children: [
150
+ aptosConnectWallets.map((wallet) => /* @__PURE__ */ jsx(AptosConnectWalletRow, {
151
+ wallet,
152
+ onConnect: closeModal
153
+ }, wallet.name)),
154
+ /* @__PURE__ */ jsxs("p", {
155
+ className: "about-aptos-connect-trigger-wrapper",
156
+ children: [
157
+ "Learn more about",
158
+ " ",
159
+ /* @__PURE__ */ jsxs(AboutAptosConnect.Trigger, {
160
+ className: "about-aptos-connect-trigger",
161
+ children: [
162
+ "Aptos Connect",
163
+ /* @__PURE__ */ jsx(ArrowRightOutlined, {})
164
+ ]
165
+ })
166
+ ]
167
+ }),
168
+ /* @__PURE__ */ jsxs(AptosPrivacyPolicy, {
169
+ className: "aptos-connect-privacy-policy-wrapper",
170
+ children: [
171
+ /* @__PURE__ */ jsxs("p", {
172
+ className: "aptos-connect-privacy-policy-text",
173
+ children: [
174
+ /* @__PURE__ */ jsx(AptosPrivacyPolicy.Disclaimer, {}),
175
+ " ",
176
+ /* @__PURE__ */ jsx(AptosPrivacyPolicy.Link, {
177
+ className: "aptos-connect-privacy-policy-link"
178
+ }),
179
+ /* @__PURE__ */ jsx("span", {
180
+ children: "."
181
+ })
182
+ ]
183
+ }),
184
+ /* @__PURE__ */ jsx(AptosPrivacyPolicy.PoweredBy, {
185
+ className: "aptos-connect-powered-by"
186
+ })
187
+ ]
188
+ }),
189
+ /* @__PURE__ */ jsx(Divider, {
190
+ children: "Or"
143
191
  })
144
- }
145
- ]
146
- })
147
- ]
192
+ ]
193
+ }),
194
+ /* @__PURE__ */ jsx(Flex, {
195
+ vertical: true,
196
+ gap: 12,
197
+ children: availableWallets.map((wallet) => /* @__PURE__ */ jsx(WalletRow, {
198
+ wallet,
199
+ onConnect: closeModal
200
+ }, wallet.name))
201
+ }),
202
+ !!installableWallets.length && /* @__PURE__ */ jsx(Collapse, {
203
+ ghost: true,
204
+ expandIconPosition: "end",
205
+ items: [
206
+ {
207
+ key: "more-wallets",
208
+ label: "More Wallets",
209
+ children: /* @__PURE__ */ jsx(Flex, {
210
+ vertical: true,
211
+ gap: 12,
212
+ children: installableWallets.map((wallet) => /* @__PURE__ */ jsx(WalletRow, {
213
+ wallet,
214
+ onConnect: closeModal
215
+ }, wallet.name))
216
+ })
217
+ }
218
+ ]
219
+ })
220
+ ]
221
+ })
148
222
  })
149
223
  })
150
224
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aptos-labs/wallet-adapter-ant-design",
3
- "version": "2.6.2",
3
+ "version": "3.0.0",
4
4
  "description": "Aptos Wallet Adapter ant-design",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -43,8 +43,9 @@
43
43
  "@aptos-labs/wallet-adapter-tsconfig": "0.0.1"
44
44
  },
45
45
  "dependencies": {
46
+ "@ant-design/icons": "^5.3.7",
46
47
  "antd": "^5.18.3",
47
- "@aptos-labs/wallet-adapter-react": "3.4.2"
48
+ "@aptos-labs/wallet-adapter-react": "3.5.0"
48
49
  },
49
50
  "peerDependencies": {
50
51
  "react": "^18",
package/src/WalletSelector.tsx CHANGED
@@ -1,39 +1,39 @@
1
+ import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
1
2
  import {
3
+ AboutAptosConnect,
4
+ AboutAptosConnectEducationScreen,
2
5
  AnyAptosWallet,
3
6
  AptosPrivacyPolicy,
4
7
  WalletItem,
5
- getAptosConnectWallets,
8
+ WalletSortingOptions,
9
+ groupAndSortWallets,
6
10
  isInstallRequired,
7
- partitionWallets,
8
11
  truncateAddress,
9
12
  useWallet,
10
13
  } from "@aptos-labs/wallet-adapter-react";
11
- import { Button, Collapse, Divider, Flex, Modal, Typography } from "antd";
14
+ import {
15
+ Button,
16
+ Collapse,
17
+ Divider,
18
+ Flex,
19
+ Modal,
20
+ ModalProps,
21
+ Typography,
22
+ } from "antd";
12
23
  import { Dispatch, SetStateAction, useEffect, useState } from "react";
13
24
  import "./styles.css";
14
25
 
15
26
  const { Text } = Typography;
16
27
 
17
- type WalletSelectorProps = {
28
+ interface WalletSelectorProps extends WalletSortingOptions {
18
29
  isModalOpen?: boolean;
19
30
  setModalOpen?: Dispatch<SetStateAction<boolean>>;
20
- /**
21
- * An optional function for sorting wallets that are currently installed or
22
- * loadable in the wallet selector modal.
23
- */
24
- sortDefaultWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
25
- /**
26
- * An optional function for sorting wallets that are NOT currently installed or
27
- * loadable in the wallet selector modal.
28
- */
29
- sortMoreWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
30
- };
31
+ }
31
32
 
32
33
  export function WalletSelector({
33
34
  isModalOpen,
34
35
  setModalOpen,
35
- sortDefaultWallets,
36
- sortMoreWallets,
36
+ ...walletSortingOptions
37
37
  }: WalletSelectorProps) {
38
38
  const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
39
39
 
@@ -47,22 +47,8 @@ export function WalletSelector({
47
47
 
48
48
  const { account, connected, disconnect, wallets = [] } = useWallet();
49
49
 
50
- const {
51
- /** Wallets that use social login to create an account on the blockchain */
52
- aptosConnectWallets,
53
- /** Wallets that use traditional wallet extensions */
54
- otherWallets,
55
- } = getAptosConnectWallets(wallets);
56
-
57
- const {
58
- /** Wallets that are currently installed or loadable. */
59
- defaultWallets,
60
- /** Wallets that are NOT currently installed or loadable. */
61
- moreWallets,
62
- } = partitionWallets(otherWallets);
63
-
64
- if (sortDefaultWallets) defaultWallets.sort(sortDefaultWallets);
65
- if (sortMoreWallets) moreWallets.sort(sortMoreWallets);
50
+ const { aptosConnectWallets, availableWallets, installableWallets } =
51
+ groupAndSortWallets(wallets, walletSortingOptions);
66
52
 
67
53
  const hasAptosConnectWallets = !!aptosConnectWallets.length;
68
54
 
@@ -84,36 +70,92 @@ export function WalletSelector({
84
70
  const buttonText =
85
71
  account?.ansName || truncateAddress(account?.address) || "Unknown";
86
72
 
73
+ const modalProps: ModalProps = {
74
+ centered: true,
75
+ open: walletSelectorModalOpen,
76
+ onCancel: closeModal,
77
+ footer: null,
78
+ zIndex: 9999,
79
+ className: "wallet-selector-modal",
80
+ };
81
+
82
+ const renderEducationScreens = (screen: AboutAptosConnectEducationScreen) => (
83
+ <Modal
84
+ {...modalProps}
85
+ afterClose={screen.cancel}
86
+ title={
87
+ <div className="about-aptos-connect-header">
88
+ <Button
89
+ type="text"
90
+ icon={<ArrowLeftOutlined />}
91
+ onClick={screen.cancel}
92
+ />
93
+ <div className="wallet-modal-title">About Aptos Connect</div>
94
+ </div>
95
+ }
96
+ >
97
+ <div className="about-aptos-connect-graphic-wrapper">
98
+ <screen.Graphic />
99
+ </div>
100
+ <div className="about-aptos-connect-text-wrapper">
101
+ <screen.Title className="about-aptos-connect-title" />
102
+ <screen.Description className="about-aptos-connect-description" />
103
+ </div>
104
+ <div className="about-aptos-connect-footer-wrapper">
105
+ <Button
106
+ type="text"
107
+ style={{ justifySelf: "start" }}
108
+ onClick={screen.back}
109
+ >
110
+ Back
111
+ </Button>
112
+ <div className="about-aptos-connect-screen-indicators-wrapper">
113
+ {screen.screenIndicators.map((ScreenIndicator, i) => (
114
+ <ScreenIndicator
115
+ key={i}
116
+ className="about-aptos-connect-screen-indicator"
117
+ >
118
+ <div />
119
+ </ScreenIndicator>
120
+ ))}
121
+ </div>
122
+ <Button
123
+ type="text"
124
+ icon={<ArrowRightOutlined />}
125
+ iconPosition="end"
126
+ style={{ justifySelf: "end" }}
127
+ onClick={screen.next}
128
+ >
129
+ {screen.screenIndex === screen.totalScreens - 1 ? "Finish" : "Next"}
130
+ </Button>
131
+ </div>
132
+ </Modal>
133
+ );
134
+
87
135
  return (
88
136
  <>
89
137
  <Button className="wallet-button" onClick={onWalletButtonClick}>
90
138
  {connected ? buttonText : "Connect Wallet"}
91
139
  </Button>
92
- <Modal
93
- title={
94
- <div className="wallet-modal-title">
95
- {hasAptosConnectWallets ? (
96
- <>
97
- <span>Log in or sign up</span>
98
- <span>with Social + Aptos Connect</span>
99
- </>
100
- ) : (
101
- "Connect Wallet"
102
- )}
103
- </div>
104
- }
105
- centered
106
- open={walletSelectorModalOpen}
107
- onCancel={closeModal}
108
- footer={[]}
109
- closable={false}
110
- zIndex={9999}
111
- className="wallet-selector-modal"
112
- >
113
- {!connected && (
114
- <>
115
- {hasAptosConnectWallets && (
116
- <>
140
+ <AboutAptosConnect renderEducationScreen={renderEducationScreens}>
141
+ <Modal
142
+ {...modalProps}
143
+ title={
144
+ <div className="wallet-modal-title">
145
+ {hasAptosConnectWallets ? (
146
+ <>
147
+ <span>Log in or sign up</span>
148
+ <span>with Social + Aptos Connect</span>
149
+ </>
150
+ ) : (
151
+ "Connect Wallet"
152
+ )}
153
+ </div>
154
+ }
155
+ >
156
+ {!connected && (
157
+ <>
158
+ {hasAptosConnectWallets && (
117
159
  <Flex vertical gap={12}>
118
160
  {aptosConnectWallets.map((wallet) => (
119
161
  <AptosConnectWalletRow
@@ -122,53 +164,60 @@ export function WalletSelector({
122
164
  onConnect={closeModal}
123
165
  />
124
166
  ))}
125
- </Flex>
126
- <AptosPrivacyPolicy className="aptos-connect-privacy-policy-wrapper">
127
- <p className="aptos-connect-privacy-policy-text">
128
- <AptosPrivacyPolicy.Disclaimer />{" "}
129
- <AptosPrivacyPolicy.Link className="aptos-connect-privacy-policy-link" />
130
- <span>.</span>
167
+ <p className="about-aptos-connect-trigger-wrapper">
168
+ Learn more about{" "}
169
+ <AboutAptosConnect.Trigger className="about-aptos-connect-trigger">
170
+ Aptos Connect
171
+ <ArrowRightOutlined />
172
+ </AboutAptosConnect.Trigger>
131
173
  </p>
132
- <AptosPrivacyPolicy.PoweredBy className="aptos-connect-powered-by" />
133
- </AptosPrivacyPolicy>
134
- <Divider>Or</Divider>
135
- </>
136
- )}
137
- <Flex vertical gap={12}>
138
- {defaultWallets.map((wallet) => (
139
- <WalletRow
140
- key={wallet.name}
141
- wallet={wallet}
142
- onConnect={closeModal}
174
+ <AptosPrivacyPolicy className="aptos-connect-privacy-policy-wrapper">
175
+ <p className="aptos-connect-privacy-policy-text">
176
+ <AptosPrivacyPolicy.Disclaimer />{" "}
177
+ <AptosPrivacyPolicy.Link className="aptos-connect-privacy-policy-link" />
178
+ <span>.</span>
179
+ </p>
180
+ <AptosPrivacyPolicy.PoweredBy className="aptos-connect-powered-by" />
181
+ </AptosPrivacyPolicy>
182
+ <Divider>Or</Divider>
183
+ </Flex>
184
+ )}
185
+ <Flex vertical gap={12}>
186
+ {availableWallets.map((wallet) => (
187
+ <WalletRow
188
+ key={wallet.name}
189
+ wallet={wallet}
190
+ onConnect={closeModal}
191
+ />
192
+ ))}
193
+ </Flex>
194
+ {!!installableWallets.length && (
195
+ <Collapse
196
+ ghost
197
+ expandIconPosition="end"
198
+ items={[
199
+ {
200
+ key: "more-wallets",
201
+ label: "More Wallets",
202
+ children: (
203
+ <Flex vertical gap={12}>
204
+ {installableWallets.map((wallet) => (
205
+ <WalletRow
206
+ key={wallet.name}
207
+ wallet={wallet}
208
+ onConnect={closeModal}
209
+ />
210
+ ))}
211
+ </Flex>
212
+ ),
213
+ },
214
+ ]}
143
215
  />
144
- ))}
145
- </Flex>
146
- {!!moreWallets.length && (
147
- <Collapse
148
- ghost
149
- expandIconPosition="end"
150
- items={[
151
- {
152
- key: "more-wallets",
153
- label: "More Wallets",
154
- children: (
155
- <Flex vertical gap={12}>
156
- {moreWallets.map((wallet) => (
157
- <WalletRow
158
- key={wallet.name}
159
- wallet={wallet}
160
- onConnect={closeModal}
161
- />
162
- ))}
163
- </Flex>
164
- ),
165
- },
166
- ]}
167
- />
168
- )}
169
- </>
170
- )}
171
- </Modal>
216
+ )}
217
+ </>
218
+ )}
219
+ </Modal>
220
+ </AboutAptosConnect>
172
221
  </>
173
222
  );
174
223
  }
package/src/styles.css CHANGED
@@ -37,7 +37,6 @@
37
37
  text-decoration: underline;
38
38
  text-underline-offset: 4px;
39
39
  }
40
-
41
40
  .aptos-connect-privacy-policy-link:hover {
42
41
  text-decoration: underline;
43
42
  }
@@ -92,6 +91,100 @@
92
91
  line-height: 32px;
93
92
  }
94
93
 
94
+ .about-aptos-connect-trigger-wrapper {
95
+ display: flex;
96
+ justify-content: center;
97
+ align-items: center;
98
+ gap: 4px;
99
+ color: rgba(0, 0, 0, 0.5);
100
+ font-size: 14px;
101
+ }
102
+
103
+ .about-aptos-connect-trigger {
104
+ background: none;
105
+ border: none;
106
+ font-family: inherit;
107
+ font-size: inherit;
108
+ cursor: pointer;
109
+ display: flex;
110
+ align-items: center;
111
+ gap: 4px;
112
+ padding-inline: 0;
113
+ padding-block: 12px;
114
+ color: black;
115
+ }
116
+
117
+ .about-aptos-connect-header {
118
+ display: grid;
119
+ grid-template-columns: 1fr 4fr 1fr;
120
+ align-items: center;
121
+ margin-bottom: 16px;
122
+ }
123
+ .about-aptos-connect-header > div {
124
+ margin: 0;
125
+ font-size: 18px;
126
+ }
127
+
128
+ .about-aptos-connect-graphic-wrapper {
129
+ display: flex;
130
+ height: 162px;
131
+ padding-bottom: 12px;
132
+ align-items: flex-end;
133
+ justify-content: center;
134
+ }
135
+
136
+ .about-aptos-connect-text-wrapper {
137
+ display: flex;
138
+ flex-direction: column;
139
+ gap: 8px;
140
+ text-align: center;
141
+ padding-bottom: 4px;
142
+ }
143
+
144
+ .about-aptos-connect-title {
145
+ font-size: 22px;
146
+ }
147
+
148
+ .about-aptos-connect-description {
149
+ font-size: 14px;
150
+ color: rgba(0, 0, 0, 0.5);
151
+ }
152
+ .about-aptos-connect-description > a {
153
+ color: black;
154
+ text-decoration: underline;
155
+ text-underline-offset: 4px;
156
+ }
157
+
158
+ .about-aptos-connect-footer-wrapper {
159
+ display: grid;
160
+ grid-template-columns: repeat(3, minmax(0, 1fr));
161
+ align-items: center;
162
+ }
163
+
164
+ .about-aptos-connect-screen-indicators-wrapper {
165
+ display: flex;
166
+ align-items: center;
167
+ gap: 8px;
168
+ place-self: center;
169
+ }
170
+
171
+ .about-aptos-connect-screen-indicator {
172
+ background: none;
173
+ border: none;
174
+ padding-inline: 0;
175
+ padding-block: 16px;
176
+ cursor: pointer;
177
+ }
178
+ .about-aptos-connect-screen-indicator > div {
179
+ height: 2px;
180
+ width: 24px;
181
+ background-color: rgba(0, 0, 0, 0.2);
182
+ transition: background-color 0.2s ease;
183
+ }
184
+ .about-aptos-connect-screen-indicator[data-active] > div {
185
+ background-color: black;
186
+ }
187
+
95
188
  /* Scoped Ant CSS overrides */
96
189
 
97
190
  :where(.wallet-selector-modal .ant-modal-body) {