@aptos-labs/wallet-adapter-ant-design 1.0.5 → 1.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/index.js +92 -32
  3. package/dist/index.mjs +93 -32
  4. package/package.json +2 -2
  5. package/src/WalletSelector.tsx +73 -35
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @aptos-labs/wallet-adapter-ant-design
2
2
 
3
+ ## 1.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 1672a0e: Add mobile wallet support on Ant Design wallet selector modal
8
+
9
+ ## 1.0.6
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies [1605d28]
14
+ - @aptos-labs/wallet-adapter-react@1.2.0
15
+
3
16
  ## 1.0.5
4
17
 
5
18
  ### Patch Changes
package/dist/index.js CHANGED
@@ -73,44 +73,104 @@ function WalletSelector() {
73
73
  closable: false,
74
74
  children: !connected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Menu, {
75
75
  children: wallets.map((wallet) => {
76
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Menu.Item, {
77
- onClick: wallet.readyState === import_wallet_adapter_react.WalletReadyState.Installed || wallet.readyState === import_wallet_adapter_react.WalletReadyState.Loadable ? () => onWalletSelected(wallet.name) : () => window.open(wallet.url),
78
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
79
- className: "wallet-menu-wrapper",
80
- children: [
81
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
82
- className: "wallet-name-wrapper",
83
- children: [
84
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
85
- src: wallet.icon,
86
- width: 25,
87
- style: { marginRight: 10 }
88
- }),
89
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
90
- className: "wallet-selector-text",
91
- children: wallet.name
92
- })
93
- ]
94
- }),
95
- wallet.readyState === import_wallet_adapter_react.WalletReadyState.Installed || wallet.readyState === import_wallet_adapter_react.WalletReadyState.Loadable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
96
- className: "wallet-connect-button",
97
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
98
- className: "wallet-connect-button-text",
99
- children: "Connect"
100
- })
101
- }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
102
- className: "wallet-connect-install",
103
- children: "Install"
104
- })
105
- ]
106
- })
107
- }, wallet.name);
76
+ return walletView(wallet, onWalletSelected);
108
77
  })
109
78
  })
110
79
  })
111
80
  ]
112
81
  });
113
82
  }
83
+ var walletView = (wallet, onWalletSelected) => {
84
+ const isWalletReady = wallet.readyState === import_wallet_adapter_react.WalletReadyState.Installed || wallet.readyState === import_wallet_adapter_react.WalletReadyState.Loadable;
85
+ const mobileSupport = wallet.deeplinkProvider;
86
+ if (!isWalletReady && (0, import_wallet_adapter_react.isRedirectable)()) {
87
+ if (mobileSupport) {
88
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Menu.Item, {
89
+ onClick: () => onWalletSelected(wallet.name),
90
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
91
+ className: "wallet-menu-wrapper",
92
+ children: [
93
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
94
+ className: "wallet-name-wrapper",
95
+ children: [
96
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
97
+ src: wallet.icon,
98
+ width: 25,
99
+ style: { marginRight: 10 }
100
+ }),
101
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
102
+ className: "wallet-selector-text",
103
+ children: wallet.name
104
+ })
105
+ ]
106
+ }),
107
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
108
+ className: "wallet-connect-button",
109
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
110
+ className: "wallet-connect-button-text",
111
+ children: "Connect"
112
+ })
113
+ })
114
+ ]
115
+ })
116
+ }, wallet.name);
117
+ } else {
118
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Menu.Item, {
119
+ disabled: true,
120
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
121
+ className: "wallet-menu-wrapper",
122
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
123
+ className: "wallet-name-wrapper",
124
+ children: [
125
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
126
+ src: wallet.icon,
127
+ width: 25,
128
+ style: { marginRight: 10 }
129
+ }),
130
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
131
+ className: "wallet-selector-text",
132
+ children: wallet.name
133
+ })
134
+ ]
135
+ })
136
+ })
137
+ }, wallet.name);
138
+ }
139
+ } else {
140
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Menu.Item, {
141
+ onClick: wallet.readyState === import_wallet_adapter_react.WalletReadyState.Installed || wallet.readyState === import_wallet_adapter_react.WalletReadyState.Loadable ? () => onWalletSelected(wallet.name) : () => window.open(wallet.url),
142
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
143
+ className: "wallet-menu-wrapper",
144
+ children: [
145
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
146
+ className: "wallet-name-wrapper",
147
+ children: [
148
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
149
+ src: wallet.icon,
150
+ width: 25,
151
+ style: { marginRight: 10 }
152
+ }),
153
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
154
+ className: "wallet-selector-text",
155
+ children: wallet.name
156
+ })
157
+ ]
158
+ }),
159
+ wallet.readyState === import_wallet_adapter_react.WalletReadyState.Installed || wallet.readyState === import_wallet_adapter_react.WalletReadyState.Loadable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
160
+ className: "wallet-connect-button",
161
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
162
+ className: "wallet-connect-button-text",
163
+ children: "Connect"
164
+ })
165
+ }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
166
+ className: "wallet-connect-install",
167
+ children: "Install"
168
+ })
169
+ ]
170
+ })
171
+ }, wallet.name);
172
+ }
173
+ };
114
174
  // Annotate the CommonJS export names for ESM import in node:
115
175
  0 && (module.exports = {
116
176
  WalletSelector
package/dist/index.mjs CHANGED
@@ -2,6 +2,7 @@
2
2
  import { useState } from "react";
3
3
  import { Button, Menu, Modal, Typography } from "antd";
4
4
  import {
5
+ isRedirectable,
5
6
  useWallet,
6
7
  WalletReadyState
7
8
  } from "@aptos-labs/wallet-adapter-react";
@@ -50,44 +51,104 @@ function WalletSelector() {
50
51
  closable: false,
51
52
  children: !connected && /* @__PURE__ */ jsx(Menu, {
52
53
  children: wallets.map((wallet) => {
53
- return /* @__PURE__ */ jsx(Menu.Item, {
54
- onClick: wallet.readyState === WalletReadyState.Installed || wallet.readyState === WalletReadyState.Loadable ? () => onWalletSelected(wallet.name) : () => window.open(wallet.url),
55
- children: /* @__PURE__ */ jsxs("div", {
56
- className: "wallet-menu-wrapper",
57
- children: [
58
- /* @__PURE__ */ jsxs("div", {
59
- className: "wallet-name-wrapper",
60
- children: [
61
- /* @__PURE__ */ jsx("img", {
62
- src: wallet.icon,
63
- width: 25,
64
- style: { marginRight: 10 }
65
- }),
66
- /* @__PURE__ */ jsx(Text, {
67
- className: "wallet-selector-text",
68
- children: wallet.name
69
- })
70
- ]
71
- }),
72
- wallet.readyState === WalletReadyState.Installed || wallet.readyState === WalletReadyState.Loadable ? /* @__PURE__ */ jsx(Button, {
73
- className: "wallet-connect-button",
74
- children: /* @__PURE__ */ jsx(Text, {
75
- className: "wallet-connect-button-text",
76
- children: "Connect"
77
- })
78
- }) : /* @__PURE__ */ jsx(Text, {
79
- className: "wallet-connect-install",
80
- children: "Install"
81
- })
82
- ]
83
- })
84
- }, wallet.name);
54
+ return walletView(wallet, onWalletSelected);
85
55
  })
86
56
  })
87
57
  })
88
58
  ]
89
59
  });
90
60
  }
61
+ var walletView = (wallet, onWalletSelected) => {
62
+ const isWalletReady = wallet.readyState === WalletReadyState.Installed || wallet.readyState === WalletReadyState.Loadable;
63
+ const mobileSupport = wallet.deeplinkProvider;
64
+ if (!isWalletReady && isRedirectable()) {
65
+ if (mobileSupport) {
66
+ return /* @__PURE__ */ jsx(Menu.Item, {
67
+ onClick: () => onWalletSelected(wallet.name),
68
+ children: /* @__PURE__ */ jsxs("div", {
69
+ className: "wallet-menu-wrapper",
70
+ children: [
71
+ /* @__PURE__ */ jsxs("div", {
72
+ className: "wallet-name-wrapper",
73
+ children: [
74
+ /* @__PURE__ */ jsx("img", {
75
+ src: wallet.icon,
76
+ width: 25,
77
+ style: { marginRight: 10 }
78
+ }),
79
+ /* @__PURE__ */ jsx(Text, {
80
+ className: "wallet-selector-text",
81
+ children: wallet.name
82
+ })
83
+ ]
84
+ }),
85
+ /* @__PURE__ */ jsx(Button, {
86
+ className: "wallet-connect-button",
87
+ children: /* @__PURE__ */ jsx(Text, {
88
+ className: "wallet-connect-button-text",
89
+ children: "Connect"
90
+ })
91
+ })
92
+ ]
93
+ })
94
+ }, wallet.name);
95
+ } else {
96
+ return /* @__PURE__ */ jsx(Menu.Item, {
97
+ disabled: true,
98
+ children: /* @__PURE__ */ jsx("div", {
99
+ className: "wallet-menu-wrapper",
100
+ children: /* @__PURE__ */ jsxs("div", {
101
+ className: "wallet-name-wrapper",
102
+ children: [
103
+ /* @__PURE__ */ jsx("img", {
104
+ src: wallet.icon,
105
+ width: 25,
106
+ style: { marginRight: 10 }
107
+ }),
108
+ /* @__PURE__ */ jsx(Text, {
109
+ className: "wallet-selector-text",
110
+ children: wallet.name
111
+ })
112
+ ]
113
+ })
114
+ })
115
+ }, wallet.name);
116
+ }
117
+ } else {
118
+ return /* @__PURE__ */ jsx(Menu.Item, {
119
+ onClick: wallet.readyState === WalletReadyState.Installed || wallet.readyState === WalletReadyState.Loadable ? () => onWalletSelected(wallet.name) : () => window.open(wallet.url),
120
+ children: /* @__PURE__ */ jsxs("div", {
121
+ className: "wallet-menu-wrapper",
122
+ children: [
123
+ /* @__PURE__ */ jsxs("div", {
124
+ className: "wallet-name-wrapper",
125
+ children: [
126
+ /* @__PURE__ */ jsx("img", {
127
+ src: wallet.icon,
128
+ width: 25,
129
+ style: { marginRight: 10 }
130
+ }),
131
+ /* @__PURE__ */ jsx(Text, {
132
+ className: "wallet-selector-text",
133
+ children: wallet.name
134
+ })
135
+ ]
136
+ }),
137
+ wallet.readyState === WalletReadyState.Installed || wallet.readyState === WalletReadyState.Loadable ? /* @__PURE__ */ jsx(Button, {
138
+ className: "wallet-connect-button",
139
+ children: /* @__PURE__ */ jsx(Text, {
140
+ className: "wallet-connect-button-text",
141
+ children: "Connect"
142
+ })
143
+ }) : /* @__PURE__ */ jsx(Text, {
144
+ className: "wallet-connect-install",
145
+ children: "Install"
146
+ })
147
+ ]
148
+ })
149
+ }, wallet.name);
150
+ }
151
+ };
91
152
  export {
92
153
  WalletSelector
93
154
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aptos-labs/wallet-adapter-ant-design",
3
- "version": "1.0.5",
3
+ "version": "1.1.0",
4
4
  "description": "Aptos Wallet Adapter ant-design",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -43,7 +43,7 @@
43
43
  "@aptos-labs/wallet-adapter-tsconfig": "0.0.0"
44
44
  },
45
45
  "dependencies": {
46
- "@aptos-labs/wallet-adapter-react": "1.1.0",
46
+ "@aptos-labs/wallet-adapter-react": "1.2.0",
47
47
  "antd": "^5.1.2",
48
48
  "aptos": "^1.3.17",
49
49
  "react": "^18",
package/src/WalletSelector.tsx CHANGED
@@ -1,7 +1,9 @@
1
1
  import React, { useState } from "react";
2
2
  import { Button, Menu, Modal, Typography } from "antd";
3
3
  import {
4
+ isRedirectable,
4
5
  useWallet,
6
+ Wallet,
5
7
  WalletName,
6
8
  WalletReadyState,
7
9
  } from "@aptos-labs/wallet-adapter-react";
@@ -43,41 +45,8 @@ export function WalletSelector() {
43
45
  >
44
46
  {!connected && (
45
47
  <Menu>
46
- {wallets.map((wallet) => {
47
- return (
48
- <Menu.Item
49
- key={wallet.name}
50
- onClick={
51
- wallet.readyState === WalletReadyState.Installed ||
52
- wallet.readyState === WalletReadyState.Loadable
53
- ? () => onWalletSelected(wallet.name)
54
- : () => window.open(wallet.url)
55
- }
56
- >
57
- <div className="wallet-menu-wrapper">
58
- <div className="wallet-name-wrapper">
59
- <img
60
- src={wallet.icon}
61
- width={25}
62
- style={{ marginRight: 10 }}
63
- />
64
- <Text className="wallet-selector-text">
65
- {wallet.name}
66
- </Text>
67
- </div>
68
- {wallet.readyState === WalletReadyState.Installed ||
69
- wallet.readyState === WalletReadyState.Loadable ? (
70
- <Button className="wallet-connect-button">
71
- <Text className="wallet-connect-button-text">
72
- Connect
73
- </Text>
74
- </Button>
75
- ) : (
76
- <Text className="wallet-connect-install">Install</Text>
77
- )}
78
- </div>
79
- </Menu.Item>
80
- );
48
+ {wallets.map((wallet: Wallet) => {
49
+ return walletView(wallet, onWalletSelected);
81
50
  })}
82
51
  </Menu>
83
52
  )}
@@ -85,3 +54,72 @@ export function WalletSelector() {
85
54
  </>
86
55
  );
87
56
  }
57
+
58
+ const walletView = (
59
+ wallet: Wallet,
60
+ onWalletSelected: (wallet: WalletName) => void
61
+ ) => {
62
+ const isWalletReady =
63
+ wallet.readyState === WalletReadyState.Installed ||
64
+ wallet.readyState === WalletReadyState.Loadable;
65
+ const mobileSupport = wallet.deeplinkProvider;
66
+
67
+ if (!isWalletReady && isRedirectable()) {
68
+ if (mobileSupport) {
69
+ return (
70
+ <Menu.Item
71
+ key={wallet.name}
72
+ onClick={() => onWalletSelected(wallet.name)}
73
+ >
74
+ <div className="wallet-menu-wrapper">
75
+ <div className="wallet-name-wrapper">
76
+ <img src={wallet.icon} width={25} style={{ marginRight: 10 }} />
77
+ <Text className="wallet-selector-text">{wallet.name}</Text>
78
+ </div>
79
+ <Button className="wallet-connect-button">
80
+ <Text className="wallet-connect-button-text">Connect</Text>
81
+ </Button>
82
+ </div>
83
+ </Menu.Item>
84
+ );
85
+ } else {
86
+ return (
87
+ <Menu.Item key={wallet.name} disabled={true}>
88
+ <div className="wallet-menu-wrapper">
89
+ <div className="wallet-name-wrapper">
90
+ <img src={wallet.icon} width={25} style={{ marginRight: 10 }} />
91
+ <Text className="wallet-selector-text">{wallet.name}</Text>
92
+ </div>
93
+ </div>
94
+ </Menu.Item>
95
+ );
96
+ }
97
+ } else {
98
+ return (
99
+ <Menu.Item
100
+ key={wallet.name}
101
+ onClick={
102
+ wallet.readyState === WalletReadyState.Installed ||
103
+ wallet.readyState === WalletReadyState.Loadable
104
+ ? () => onWalletSelected(wallet.name)
105
+ : () => window.open(wallet.url)
106
+ }
107
+ >
108
+ <div className="wallet-menu-wrapper">
109
+ <div className="wallet-name-wrapper">
110
+ <img src={wallet.icon} width={25} style={{ marginRight: 10 }} />
111
+ <Text className="wallet-selector-text">{wallet.name}</Text>
112
+ </div>
113
+ {wallet.readyState === WalletReadyState.Installed ||
114
+ wallet.readyState === WalletReadyState.Loadable ? (
115
+ <Button className="wallet-connect-button">
116
+ <Text className="wallet-connect-button-text">Connect</Text>
117
+ </Button>
118
+ ) : (
119
+ <Text className="wallet-connect-install">Install</Text>
120
+ )}
121
+ </div>
122
+ </Menu.Item>
123
+ );
124
+ }
125
+ };