@aptos-labs/wallet-adapter-ant-design 0.0.2 → 0.1.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 +7 -0
- package/README.md +53 -0
- package/dist/index.css +20 -3
- package/dist/index.js +36 -35
- package/dist/index.mjs +37 -36
- package/package.json +10 -10
- package/src/WalletSelector.tsx +12 -10
- package/src/styles.css +21 -8
package/CHANGELOG.md
ADDED
package/README.md
CHANGED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Aptos Wallet Adapter Selector Ant Design
|
|
2
|
+
|
|
3
|
+
Package for wallet selector modal using [Ant Design](https://ant.design/). Includes a `wallet connect` button when clicked, opens up `wallet select modal`.
|
|
4
|
+
|
|
5
|
+
If wallet is already connected, the button would display the connected account address truncated (i.e `0x123...abc`), in that case, clicking the button would disconect the wallet.
|
|
6
|
+
|
|
7
|
+
### Usage
|
|
8
|
+
|
|
9
|
+
Make sure you have [@aptos-labs/wallet-adapter-react](../wallet-adapter-react/README.md) installed
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
npm install @aptos-labs/wallet-adapter-ant-design
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
on `index.tsx` / `_app.tsx` import the `ant-design` package `.css` file as
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
import "@aptos-labs/wallet-adapter-ant-design/dist/index.css";
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
On the page you want to include the `wallet connect` button, import the `WalletSelector` module.
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
import { WalletSelector } from "@aptos-labs/wallet-adapter-ant-design";
|
|
25
|
+
...
|
|
26
|
+
return (
|
|
27
|
+
<WalletSelector />
|
|
28
|
+
)
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
That would add a `Connect Wallet` button when clicked opens up a `wallet selector` modal.
|
|
32
|
+
|
|
33
|
+
#### Override styles
|
|
34
|
+
|
|
35
|
+
You can override these classes
|
|
36
|
+
|
|
37
|
+
```
|
|
38
|
+
.wallet-selector-text
|
|
39
|
+
.wallet-menu-wrapper
|
|
40
|
+
.wallet-name-wrapper
|
|
41
|
+
.wallet-connect-button
|
|
42
|
+
.wallet-connect-install
|
|
43
|
+
.wallet-button
|
|
44
|
+
.wallet-modal-title
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
For example, to override the `connect wallet` button background color, you can use the `.wallet-button` class in your local `.css` file
|
|
48
|
+
|
|
49
|
+
```
|
|
50
|
+
.wallet-button{
|
|
51
|
+
background-color:red;
|
|
52
|
+
}
|
|
53
|
+
```
|
package/dist/index.css
CHANGED
|
@@ -4,13 +4,20 @@
|
|
|
4
4
|
}
|
|
5
5
|
.ant-menu-item {
|
|
6
6
|
background-color: rgba(0, 0, 0, 0.1);
|
|
7
|
-
padding:
|
|
7
|
+
padding: 15px;
|
|
8
8
|
height: auto !important;
|
|
9
|
+
margin-bottom: 10px !important;
|
|
9
10
|
}
|
|
10
11
|
.ant-menu-item-selected {
|
|
11
12
|
background-color: rgba(0, 0, 0, 0.06) !important;
|
|
12
13
|
color: black !important;
|
|
13
14
|
}
|
|
15
|
+
.wallet-selector-text {
|
|
16
|
+
font-size: 14px;
|
|
17
|
+
}
|
|
18
|
+
.wallet-connect-button-text {
|
|
19
|
+
color: white;
|
|
20
|
+
}
|
|
14
21
|
.wallet-menu-wrapper {
|
|
15
22
|
display: flex;
|
|
16
23
|
justify-content: space-between;
|
|
@@ -22,15 +29,25 @@
|
|
|
22
29
|
}
|
|
23
30
|
.wallet-connect-button {
|
|
24
31
|
align-self: center;
|
|
25
|
-
background-color: #
|
|
32
|
+
background-color: #3f67ff;
|
|
33
|
+
height: auto;
|
|
26
34
|
}
|
|
27
35
|
.wallet-connect-install {
|
|
28
36
|
align-self: center;
|
|
29
|
-
color: #
|
|
37
|
+
color: #3f67ff;
|
|
30
38
|
padding-right: 15px;
|
|
39
|
+
font-size: 16px;
|
|
40
|
+
padding-top: 3px;
|
|
41
|
+
padding-bottom: 3px;
|
|
31
42
|
}
|
|
32
43
|
.wallet-button {
|
|
33
44
|
padding: 10px 20px;
|
|
34
45
|
height: auto;
|
|
35
46
|
font-size: 16px;
|
|
47
|
+
background-color: #3f67ff;
|
|
48
|
+
color: white;
|
|
49
|
+
}
|
|
50
|
+
.wallet-modal-title {
|
|
51
|
+
text-align: center;
|
|
52
|
+
font-size: 2rem;
|
|
36
53
|
}
|
package/dist/index.js
CHANGED
|
@@ -38,6 +38,7 @@ var truncateAddress = (address) => {
|
|
|
38
38
|
|
|
39
39
|
// src/WalletSelector.tsx
|
|
40
40
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
41
|
+
var { Text } = import_antd.Typography;
|
|
41
42
|
function WalletSelector() {
|
|
42
43
|
const [walletSelectorModalOpen, setWalletSelectorModalOpen] = (0, import_react.useState)(false);
|
|
43
44
|
const { connect, disconnect, account, wallets, connected } = (0, import_wallet_adapter_react.useWallet)();
|
|
@@ -56,54 +57,54 @@ function WalletSelector() {
|
|
|
56
57
|
children: [
|
|
57
58
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
|
|
58
59
|
className: "wallet-button",
|
|
59
|
-
style: { backgroundColor: "#3F67FF", color: "white" },
|
|
60
60
|
onClick: () => onWalletButtonClick(),
|
|
61
61
|
children: connected ? truncateAddress(account == null ? void 0 : account.address) : "Connect Wallet"
|
|
62
62
|
}),
|
|
63
63
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Modal, {
|
|
64
64
|
title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
65
|
-
|
|
66
|
-
children:
|
|
67
|
-
children: "Connect Wallet"
|
|
68
|
-
})
|
|
65
|
+
className: "wallet-modal-title",
|
|
66
|
+
children: "Connect Wallet"
|
|
69
67
|
}),
|
|
70
68
|
centered: true,
|
|
71
69
|
open: walletSelectorModalOpen,
|
|
72
70
|
onCancel: () => setWalletSelectorModalOpen(false),
|
|
73
71
|
footer: [],
|
|
74
72
|
closable: false,
|
|
75
|
-
children: !connected && /* @__PURE__ */ (0, import_jsx_runtime.
|
|
76
|
-
children:
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
wallet
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
73
|
+
children: !connected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Menu, {
|
|
74
|
+
children: wallets.map((wallet) => {
|
|
75
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Menu.Item, {
|
|
76
|
+
onClick: wallet.readyState === import_wallet_adapter_react.WalletReadyState.Installed ? () => onWalletSelected(wallet.name) : () => window.open(wallet.url),
|
|
77
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
78
|
+
className: "wallet-menu-wrapper",
|
|
79
|
+
children: [
|
|
80
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
81
|
+
className: "wallet-name-wrapper",
|
|
82
|
+
children: [
|
|
83
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
|
|
84
|
+
src: wallet.icon,
|
|
85
|
+
width: 25,
|
|
86
|
+
style: { marginRight: 10 }
|
|
87
|
+
}),
|
|
88
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
|
|
89
|
+
className: "wallet-selector-text",
|
|
90
|
+
children: wallet.name
|
|
91
|
+
})
|
|
92
|
+
]
|
|
93
|
+
}),
|
|
94
|
+
wallet.readyState === import_wallet_adapter_react.WalletReadyState.Installed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
|
|
95
|
+
className: "wallet-connect-button",
|
|
96
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
|
|
97
|
+
className: "wallet-connect-button-text",
|
|
96
98
|
children: "Connect"
|
|
97
|
-
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
98
|
-
className: "wallet-connect-install",
|
|
99
|
-
children: "Install"
|
|
100
99
|
})
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
100
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
|
|
101
|
+
className: "wallet-connect-install",
|
|
102
|
+
children: "Install"
|
|
103
|
+
})
|
|
104
|
+
]
|
|
105
|
+
})
|
|
106
|
+
}, wallet.name);
|
|
107
|
+
})
|
|
107
108
|
})
|
|
108
109
|
})
|
|
109
110
|
]
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// src/WalletSelector.tsx
|
|
2
2
|
import { useState } from "react";
|
|
3
|
-
import { Button, Menu, Modal } from "antd";
|
|
3
|
+
import { Button, Menu, Modal, Typography } from "antd";
|
|
4
4
|
import {
|
|
5
5
|
useWallet,
|
|
6
6
|
WalletReadyState
|
|
@@ -15,6 +15,7 @@ var truncateAddress = (address) => {
|
|
|
15
15
|
|
|
16
16
|
// src/WalletSelector.tsx
|
|
17
17
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
18
|
+
var { Text } = Typography;
|
|
18
19
|
function WalletSelector() {
|
|
19
20
|
const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
|
|
20
21
|
const { connect, disconnect, account, wallets, connected } = useWallet();
|
|
@@ -33,54 +34,54 @@ function WalletSelector() {
|
|
|
33
34
|
children: [
|
|
34
35
|
/* @__PURE__ */ jsx(Button, {
|
|
35
36
|
className: "wallet-button",
|
|
36
|
-
style: { backgroundColor: "#3F67FF", color: "white" },
|
|
37
37
|
onClick: () => onWalletButtonClick(),
|
|
38
38
|
children: connected ? truncateAddress(account == null ? void 0 : account.address) : "Connect Wallet"
|
|
39
39
|
}),
|
|
40
40
|
/* @__PURE__ */ jsx(Modal, {
|
|
41
41
|
title: /* @__PURE__ */ jsx("div", {
|
|
42
|
-
|
|
43
|
-
children:
|
|
44
|
-
children: "Connect Wallet"
|
|
45
|
-
})
|
|
42
|
+
className: "wallet-modal-title",
|
|
43
|
+
children: "Connect Wallet"
|
|
46
44
|
}),
|
|
47
45
|
centered: true,
|
|
48
46
|
open: walletSelectorModalOpen,
|
|
49
47
|
onCancel: () => setWalletSelectorModalOpen(false),
|
|
50
48
|
footer: [],
|
|
51
49
|
closable: false,
|
|
52
|
-
children: !connected && /* @__PURE__ */
|
|
53
|
-
children:
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
wallet
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
50
|
+
children: !connected && /* @__PURE__ */ jsx(Menu, {
|
|
51
|
+
children: wallets.map((wallet) => {
|
|
52
|
+
return /* @__PURE__ */ jsx(Menu.Item, {
|
|
53
|
+
onClick: wallet.readyState === WalletReadyState.Installed ? () => onWalletSelected(wallet.name) : () => window.open(wallet.url),
|
|
54
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
55
|
+
className: "wallet-menu-wrapper",
|
|
56
|
+
children: [
|
|
57
|
+
/* @__PURE__ */ jsxs("div", {
|
|
58
|
+
className: "wallet-name-wrapper",
|
|
59
|
+
children: [
|
|
60
|
+
/* @__PURE__ */ jsx("img", {
|
|
61
|
+
src: wallet.icon,
|
|
62
|
+
width: 25,
|
|
63
|
+
style: { marginRight: 10 }
|
|
64
|
+
}),
|
|
65
|
+
/* @__PURE__ */ jsx(Text, {
|
|
66
|
+
className: "wallet-selector-text",
|
|
67
|
+
children: wallet.name
|
|
68
|
+
})
|
|
69
|
+
]
|
|
70
|
+
}),
|
|
71
|
+
wallet.readyState === WalletReadyState.Installed ? /* @__PURE__ */ jsx(Button, {
|
|
72
|
+
className: "wallet-connect-button",
|
|
73
|
+
children: /* @__PURE__ */ jsx(Text, {
|
|
74
|
+
className: "wallet-connect-button-text",
|
|
73
75
|
children: "Connect"
|
|
74
|
-
}) : /* @__PURE__ */ jsx("span", {
|
|
75
|
-
className: "wallet-connect-install",
|
|
76
|
-
children: "Install"
|
|
77
76
|
})
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
77
|
+
}) : /* @__PURE__ */ jsx(Text, {
|
|
78
|
+
className: "wallet-connect-install",
|
|
79
|
+
children: "Install"
|
|
80
|
+
})
|
|
81
|
+
]
|
|
82
|
+
})
|
|
83
|
+
}, wallet.name);
|
|
84
|
+
})
|
|
84
85
|
})
|
|
85
86
|
})
|
|
86
87
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aptos-labs/wallet-adapter-ant-design",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "Aptos Wallet Adapter ant-design",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -34,19 +34,13 @@
|
|
|
34
34
|
"Wallet Adapter Provider",
|
|
35
35
|
"React"
|
|
36
36
|
],
|
|
37
|
-
"scripts": {
|
|
38
|
-
"build": "tsup src/index.tsx --format esm,cjs --dts --external react",
|
|
39
|
-
"dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
|
|
40
|
-
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
|
|
41
|
-
"lint": "TIMING=1 eslint \"src/**/*.ts*\""
|
|
42
|
-
},
|
|
43
37
|
"devDependencies": {
|
|
44
|
-
"@aptos-labs/wallet-adapter-tsconfig": "workspace:*",
|
|
45
38
|
"@types/react": "^18.0.17",
|
|
46
39
|
"@types/react-dom": "^18.0.6",
|
|
47
40
|
"eslint": "^8.15.0",
|
|
48
41
|
"tsup": "^5.10.1",
|
|
49
|
-
"typescript": "^4.5.3"
|
|
42
|
+
"typescript": "^4.5.3",
|
|
43
|
+
"@aptos-labs/wallet-adapter-tsconfig": "0.0.0"
|
|
50
44
|
},
|
|
51
45
|
"dependencies": {
|
|
52
46
|
"@aptos-labs/wallet-adapter-react": "*",
|
|
@@ -54,5 +48,11 @@
|
|
|
54
48
|
"aptos": "^1.3.17",
|
|
55
49
|
"react": "^18",
|
|
56
50
|
"react-dom": "^18"
|
|
51
|
+
},
|
|
52
|
+
"scripts": {
|
|
53
|
+
"build": "tsup src/index.tsx --format esm,cjs --dts --external react",
|
|
54
|
+
"dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
|
|
55
|
+
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
|
|
56
|
+
"lint": "TIMING=1 eslint \"src/**/*.ts*\""
|
|
57
57
|
}
|
|
58
|
-
}
|
|
58
|
+
}
|
package/src/WalletSelector.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
|
-
import { Button, Menu, Modal } from "antd";
|
|
2
|
+
import { Button, Menu, Modal, Typography } from "antd";
|
|
3
3
|
import {
|
|
4
4
|
useWallet,
|
|
5
5
|
WalletName,
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
} from "@aptos-labs/wallet-adapter-react";
|
|
8
8
|
import "./styles.css";
|
|
9
9
|
import { truncateAddress } from "./utils";
|
|
10
|
+
const { Text } = Typography;
|
|
10
11
|
|
|
11
12
|
export function WalletSelector() {
|
|
12
13
|
const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
|
|
@@ -31,11 +32,7 @@ export function WalletSelector() {
|
|
|
31
32
|
{connected ? truncateAddress(account?.address) : "Connect Wallet"}
|
|
32
33
|
</Button>
|
|
33
34
|
<Modal
|
|
34
|
-
title={
|
|
35
|
-
<div className="wallet-modal-title">
|
|
36
|
-
<span>Connect Wallet</span>
|
|
37
|
-
</div>
|
|
38
|
-
}
|
|
35
|
+
title={<div className="wallet-modal-title">Connect Wallet</div>}
|
|
39
36
|
centered
|
|
40
37
|
open={walletSelectorModalOpen}
|
|
41
38
|
onCancel={() => setWalletSelectorModalOpen(false)}
|
|
@@ -61,18 +58,23 @@ export function WalletSelector() {
|
|
|
61
58
|
width={25}
|
|
62
59
|
style={{ marginRight: 10 }}
|
|
63
60
|
/>
|
|
64
|
-
|
|
61
|
+
<Text className="wallet-selector-text">
|
|
62
|
+
{wallet.name}
|
|
63
|
+
</Text>
|
|
65
64
|
</div>
|
|
66
65
|
{wallet.readyState === WalletReadyState.Installed ? (
|
|
67
|
-
<Button className="wallet-connect-button">
|
|
66
|
+
<Button className="wallet-connect-button">
|
|
67
|
+
<Text className="wallet-connect-button-text">
|
|
68
|
+
Connect
|
|
69
|
+
</Text>
|
|
70
|
+
</Button>
|
|
68
71
|
) : (
|
|
69
|
-
<
|
|
72
|
+
<Text className="wallet-connect-install">Install</Text>
|
|
70
73
|
)}
|
|
71
74
|
</div>
|
|
72
75
|
</Menu.Item>
|
|
73
76
|
);
|
|
74
77
|
})}
|
|
75
|
-
;
|
|
76
78
|
</Menu>
|
|
77
79
|
)}
|
|
78
80
|
</Modal>
|
package/src/styles.css
CHANGED
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
.ant-menu-item {
|
|
6
6
|
background-color: rgba(0, 0, 0, 0.1);
|
|
7
|
-
padding:
|
|
7
|
+
padding: 15px;
|
|
8
8
|
height: auto !important;
|
|
9
|
+
margin-bottom: 10px !important;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
.ant-menu-item-selected {
|
|
@@ -13,6 +14,14 @@
|
|
|
13
14
|
color: black !important;
|
|
14
15
|
}
|
|
15
16
|
|
|
17
|
+
.wallet-selector-text {
|
|
18
|
+
font-size: 14px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.wallet-connect-button-text {
|
|
22
|
+
color: white;
|
|
23
|
+
}
|
|
24
|
+
|
|
16
25
|
.wallet-menu-wrapper {
|
|
17
26
|
display: flex;
|
|
18
27
|
justify-content: space-between;
|
|
@@ -26,24 +35,28 @@
|
|
|
26
35
|
|
|
27
36
|
.wallet-connect-button {
|
|
28
37
|
align-self: center;
|
|
29
|
-
background-color: #
|
|
38
|
+
background-color: #3f67ff;
|
|
39
|
+
height: auto;
|
|
30
40
|
}
|
|
31
41
|
|
|
32
42
|
.wallet-connect-install {
|
|
33
43
|
align-self: center;
|
|
34
|
-
color: #
|
|
44
|
+
color: #3f67ff;
|
|
35
45
|
padding-right: 15px;
|
|
46
|
+
font-size: 16px;
|
|
47
|
+
padding-top: 3px;
|
|
48
|
+
padding-bottom: 3px;
|
|
36
49
|
}
|
|
37
50
|
|
|
38
51
|
.wallet-button {
|
|
39
52
|
padding: 10px 20px;
|
|
40
53
|
height: auto;
|
|
41
54
|
font-size: 16px;
|
|
42
|
-
background-color:
|
|
43
|
-
color:
|
|
55
|
+
background-color: #3f67ff;
|
|
56
|
+
color: white;
|
|
44
57
|
}
|
|
45
58
|
|
|
46
|
-
.wallet-modal-
|
|
47
|
-
text-align:
|
|
48
|
-
font-size:
|
|
59
|
+
.wallet-modal-title {
|
|
60
|
+
text-align: center;
|
|
61
|
+
font-size: 2rem;
|
|
49
62
|
}
|