@aptos-labs/wallet-adapter-ant-design 2.4.10 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @aptos-labs/wallet-adapter-ant-design
 
+## 2.5.0
+
+### Minor Changes
+
+- 9f0d3de: Updated wallet selector modal to new design for Aptos Connect.
+- 9f0d3de: Added `sortDefaultWallets` and `sortMoreWallets` props for controlling the order of wallets in the modal.
+
+### Patch Changes
+
+- @aptos-labs/wallet-adapter-react@3.3.1
+
+## 2.4.11
+
+### Patch Changes
+
+- Updated dependencies [07ee265]
+  - @aptos-labs/wallet-adapter-react@3.3.0
+
 ## 2.4.10
 
 ### Patch Changes

package/README.md

@@ -38,6 +38,8 @@ That would add a `Connect Wallet` button when clicked opens up a `wallet selecto
 You can override these classes
 
 ```
+.wallet-selector-modal
+.wallet-selector-icon
 .wallet-selector-text
 .wallet-menu-wrapper
 .wallet-name-wrapper
@@ -45,13 +47,14 @@ You can override these classes
 .wallet-connect-install
 .wallet-button
 .wallet-modal-title
+aptos-connect-button
 ```
 
 For example, to override the `connect wallet` button background color, you can use the `.wallet-button` class in your local `.css` file
 
 ```
 .wallet-button{
-  background-color:red;
+  background-color: red;
 }
 ```
 

package/dist/index.css

@@ -1,53 +1,76 @@
 /* src/styles.css */
-.ant-menu {
-  border: none !important;
-}
-.ant-menu-item {
-  background-color: rgba(0, 0, 0, 0.1);
-  padding: 15px;
-  height: auto !important;
-  margin-bottom: 10px !important;
-}
-.ant-menu-item-selected {
-  background-color: rgba(0, 0, 0, 0.06) !important;
-  color: black !important;
+.wallet-button {
+  padding: 10px 20px;
+  height: auto;
+  border-radius: 6px;
+  font-size: 16px;
+  background-color: #3f67ff;
+  color: white;
 }
-.wallet-selector-text {
-  font-size: 14px;
+.wallet-modal-title {
+  text-align: center;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 32px;
 }
-.wallet-connect-button-text {
-  color: white;
+.aptos-connect-button {
+  color: #3f67ff;
+  border-color: #3f67ff;
 }
 .wallet-menu-wrapper {
   display: flex;
   justify-content: space-between;
   font-size: 20px;
+  border: solid 1px;
+  border-color: rgba(0, 0, 0, 0.1);
+  padding-inline: 16px;
+  padding-block: 12px;
+  border-radius: 8px;
 }
 .wallet-name-wrapper {
   display: flex;
   align-items: center;
 }
+.wallet-selector-icon {
+  height: 24px;
+  width: 24px;
+  margin-right: 12px;
+}
+.wallet-selector-text {
+  font-size: 14px;
+}
 .wallet-connect-button {
   align-self: center;
   background-color: #3f67ff;
+  color: white;
   height: auto;
 }
 .wallet-connect-install {
   align-self: center;
   color: #3f67ff;
-  padding-right: 15px;
+  padding-right: 16px;
   font-size: 16px;
-  padding-top: 3px;
-  padding-bottom: 3px;
+  line-height: 32px;
 }
-.wallet-button {
-  padding: 10px 20px;
-  height: auto;
-  font-size: 16px;
-  background-color: #3f67ff;
-  color: white;
+:where(.wallet-selector-modal .ant-modal-body) {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
-.wallet-modal-title {
-  text-align: center;
-  font-size: 2rem;
+:where(.wallet-selector-modal .ant-divider-inner-text) {
+  color: rgba(0, 0, 0, 0.5);
+}
+:where(.wallet-selector-modal .ant-collapse-header) {
+  justify-content: center !important;
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+:where(.wallet-selector-modal .ant-collapse-header-text) {
+  flex: unset !important;
+  margin-inline-end: 0 !important;
+}
+:where(.wallet-selector-modal .ant-collapse-content-box) {
+  padding: 0px !important;
+  padding-top: 8px !important;
 }

package/dist/index.d.ts

@@ -1,10 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AnyAptosWallet } from '@aptos-labs/wallet-adapter-react';
 import { Dispatch, SetStateAction } from 'react';
 
 type WalletSelectorProps = {
     isModalOpen?: boolean;
     setModalOpen?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * An optional function for sorting wallets that are currently installed or
+     * loadable in the wallet selector modal.
+     */
+    sortDefaultWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
+    /**
+     * An optional function for sorting wallets that are NOT currently installed or
+     * loadable in the wallet selector modal.
+     */
+    sortMoreWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
 };
-declare function WalletSelector({ isModalOpen, setModalOpen, }: WalletSelectorProps): react_jsx_runtime.JSX.Element;
+declare function WalletSelector({ isModalOpen, setModalOpen, sortDefaultWallets, sortMoreWallets, }: WalletSelectorProps): react_jsx_runtime.JSX.Element;
 
 export { WalletSelector };

package/dist/index.js

@@ -25,23 +25,16 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/WalletSelector.tsx
-var import_react = require("react");
-var import_antd = require("antd");
 var import_wallet_adapter_react = require("@aptos-labs/wallet-adapter-react");
-
-// src/utils.ts
-var truncateAddress = (address) => {
-  if (!address)
-    return;
-  return `${address.slice(0, 6)}...${address.slice(-5)}`;
-};
-
-// src/WalletSelector.tsx
+var import_antd = require("antd");
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var { Text } = import_antd.Typography;
 function WalletSelector({
   isModalOpen,
-  setModalOpen
+  setModalOpen,
+  sortDefaultWallets,
+  sortMoreWallets
 }) {
   const [walletSelectorModalOpen, setWalletSelectorModalOpen] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
@@ -49,7 +42,20 @@ function WalletSelector({
       setWalletSelectorModalOpen(isModalOpen);
     }
   }, [isModalOpen]);
-  const { connect, disconnect, account, wallets, connected } = (0, import_wallet_adapter_react.useWallet)();
+  const { account, connected, disconnect, wallets = [] } = (0, import_wallet_adapter_react.useWallet)();
+  const {
+    aptosConnectWallets,
+    otherWallets
+  } = (0, import_wallet_adapter_react.getAptosConnectWallets)(wallets);
+  const {
+    defaultWallets,
+    moreWallets
+  } = (0, import_wallet_adapter_react.partitionWallets)(otherWallets);
+  if (sortDefaultWallets)
+    defaultWallets.sort(sortDefaultWallets);
+  if (sortMoreWallets)
+    moreWallets.sort(sortMoreWallets);
+  const hasAptosConnectWallets = !!aptosConnectWallets.length;
   const onWalletButtonClick = () => {
     if (connected) {
       disconnect();
@@ -57,118 +63,146 @@ function WalletSelector({
       setWalletSelectorModalOpen(true);
     }
   };
-  const onWalletSelected = (wallet) => {
-    connect(wallet);
+  const closeModal = () => {
     setWalletSelectorModalOpen(false);
     if (setModalOpen) {
       setModalOpen(false);
     }
   };
-  const onCancel = () => {
-    setWalletSelectorModalOpen(false);
-    if (setModalOpen) {
-      setModalOpen(false);
-    }
-  };
-  const buttonText = (account == null ? void 0 : account.ansName) ? account == null ? void 0 : account.ansName : truncateAddress(account == null ? void 0 : account.address);
+  const buttonText = (account == null ? void 0 : account.ansName) || (0, import_wallet_adapter_react.truncateAddress)(account == null ? void 0 : account.address) || "Unknown";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
         className: "wallet-button",
-        onClick: () => onWalletButtonClick(),
+        onClick: onWalletButtonClick,
         children: connected ? buttonText : "Connect Wallet"
       }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Modal, {
         title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
           className: "wallet-modal-title",
-          children: "Connect Wallet"
+          children: hasAptosConnectWallets ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                children: "Log in or sign up"
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                children: "with Social + Aptos Connect"
+              })
+            ]
+          }) : "Connect Wallet"
         }),
         centered: true,
         open: walletSelectorModalOpen,
-        onCancel,
+        onCancel: closeModal,
         footer: [],
         closable: false,
         zIndex: 9999,
-        children: !connected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Menu, {
-          children: wallets == null ? void 0 : wallets.map((wallet) => {
-            return walletView(wallet, onWalletSelected);
-          })
-        })
-      })
-    ]
-  });
-}
-var walletView = (wallet, onWalletSelected) => {
-  const isWalletReady = wallet.readyState === import_wallet_adapter_react.WalletReadyState.Installed || wallet.readyState === import_wallet_adapter_react.WalletReadyState.Loadable;
-  if (!isWalletReady && (0, import_wallet_adapter_react.isRedirectable)()) {
-    const mobileSupport = wallet.deeplinkProvider;
-    if (mobileSupport) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Menu.Item, {
-        onClick: () => onWalletSelected(wallet.name),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-          className: "wallet-menu-wrapper",
+        className: "wallet-selector-modal",
+        children: !connected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-              className: "wallet-name-wrapper",
+            hasAptosConnectWallets && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
-                  src: wallet.icon,
-                  width: 25,
-                  style: { marginRight: 10 }
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, {
+                  vertical: true,
+                  gap: 12,
+                  children: aptosConnectWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AptosConnectWalletRow, {
+                    wallet,
+                    onConnect: closeModal
+                  }, wallet.name))
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
-                  className: "wallet-selector-text",
-                  children: wallet.name
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Divider, {
+                  children: "Or"
                 })
               ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
-              className: "wallet-connect-button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
-                className: "wallet-connect-button-text",
-                children: "Connect"
-              })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, {
+              vertical: true,
+              gap: 12,
+              children: defaultWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletRow, {
+                wallet,
+                onConnect: closeModal
+              }, wallet.name))
+            }),
+            !!moreWallets.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Collapse, {
+              ghost: true,
+              expandIconPosition: "end",
+              items: [
+                {
+                  key: "more-wallets",
+                  label: "More Wallets",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, {
+                    vertical: true,
+                    gap: 12,
+                    children: moreWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WalletRow, {
+                      wallet,
+                      onConnect: closeModal
+                    }, wallet.name))
+                  })
+                }
+              ]
             })
           ]
         })
-      }, wallet.name);
-    }
-    return null;
-  } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Menu.Item, {
-      onClick: wallet.readyState === import_wallet_adapter_react.WalletReadyState.Installed || wallet.readyState === import_wallet_adapter_react.WalletReadyState.Loadable ? () => onWalletSelected(wallet.name) : () => window.open(wallet.url),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-        className: "wallet-menu-wrapper",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-            className: "wallet-name-wrapper",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
-                src: wallet.icon,
-                width: 25,
-                style: { marginRight: 10 }
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+      })
+    ]
+  });
+}
+function WalletRow({ wallet, onConnect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem, {
+    wallet,
+    onConnect,
+    asChild: true,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+      className: "wallet-menu-wrapper",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+          className: "wallet-name-wrapper",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.Icon, {
+              className: "wallet-selector-icon"
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.Name, {
+              asChild: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
                 className: "wallet-selector-text",
                 children: wallet.name
               })
-            ]
-          }),
-          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, {
-            className: "wallet-connect-button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
-              className: "wallet-connect-button-text",
-              children: "Connect"
             })
-          }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
-            className: "wallet-connect-install",
-            children: "Install"
+          ]
+        }),
+        (0, import_wallet_adapter_react.isInstallRequired)(wallet) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.InstallLink, {
+          className: "wallet-connect-install"
+        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.ConnectButton, {
+          asChild: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, {
+            className: "wallet-connect-button",
+            children: "Connect"
           })
+        })
+      ]
+    })
+  });
+}
+function AptosConnectWalletRow({ wallet, onConnect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem, {
+    wallet,
+    onConnect,
+    asChild: true,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.ConnectButton, {
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Button, {
+        size: "large",
+        className: "aptos-connect-button",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.Icon, {
+            className: "wallet-selector-icon"
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.Name, {})
         ]
       })
-    }, wallet.name);
-  }
-};
+    })
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   WalletSelector

package/dist/index.mjs

@@ -1,25 +1,21 @@
 // src/WalletSelector.tsx
-import { useEffect, useState } from "react";
-import { Button, Menu, Modal, Typography } from "antd";
 import {
-  isRedirectable,
-  useWallet,
-  WalletReadyState
+  WalletItem,
+  getAptosConnectWallets,
+  isInstallRequired,
+  partitionWallets,
+  truncateAddress,
+  useWallet
 } from "@aptos-labs/wallet-adapter-react";
-
-// src/utils.ts
-var truncateAddress = (address) => {
-  if (!address)
-    return;
-  return `${address.slice(0, 6)}...${address.slice(-5)}`;
-};
-
-// src/WalletSelector.tsx
+import { Button, Collapse, Divider, Flex, Modal, Typography } from "antd";
+import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { Text } = Typography;
 function WalletSelector({
   isModalOpen,
-  setModalOpen
+  setModalOpen,
+  sortDefaultWallets,
+  sortMoreWallets
 }) {
   const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
   useEffect(() => {
@@ -27,7 +23,20 @@ function WalletSelector({
       setWalletSelectorModalOpen(isModalOpen);
     }
   }, [isModalOpen]);
-  const { connect, disconnect, account, wallets, connected } = useWallet();
+  const { account, connected, disconnect, wallets = [] } = useWallet();
+  const {
+    aptosConnectWallets,
+    otherWallets
+  } = getAptosConnectWallets(wallets);
+  const {
+    defaultWallets,
+    moreWallets
+  } = partitionWallets(otherWallets);
+  if (sortDefaultWallets)
+    defaultWallets.sort(sortDefaultWallets);
+  if (sortMoreWallets)
+    moreWallets.sort(sortMoreWallets);
+  const hasAptosConnectWallets = !!aptosConnectWallets.length;
   const onWalletButtonClick = () => {
     if (connected) {
       disconnect();
@@ -35,118 +44,146 @@ function WalletSelector({
       setWalletSelectorModalOpen(true);
     }
   };
-  const onWalletSelected = (wallet) => {
-    connect(wallet);
-    setWalletSelectorModalOpen(false);
-    if (setModalOpen) {
-      setModalOpen(false);
-    }
-  };
-  const onCancel = () => {
+  const closeModal = () => {
     setWalletSelectorModalOpen(false);
     if (setModalOpen) {
       setModalOpen(false);
     }
   };
-  const buttonText = (account == null ? void 0 : account.ansName) ? account == null ? void 0 : account.ansName : truncateAddress(account == null ? void 0 : account.address);
+  const buttonText = (account == null ? void 0 : account.ansName) || truncateAddress(account == null ? void 0 : account.address) || "Unknown";
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx(Button, {
         className: "wallet-button",
-        onClick: () => onWalletButtonClick(),
+        onClick: onWalletButtonClick,
         children: connected ? buttonText : "Connect Wallet"
       }),
       /* @__PURE__ */ jsx(Modal, {
         title: /* @__PURE__ */ jsx("div", {
           className: "wallet-modal-title",
-          children: "Connect Wallet"
+          children: hasAptosConnectWallets ? /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                children: "Log in or sign up"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                children: "with Social + Aptos Connect"
+              })
+            ]
+          }) : "Connect Wallet"
         }),
         centered: true,
         open: walletSelectorModalOpen,
-        onCancel,
+        onCancel: closeModal,
         footer: [],
         closable: false,
         zIndex: 9999,
-        children: !connected && /* @__PURE__ */ jsx(Menu, {
-          children: wallets == null ? void 0 : wallets.map((wallet) => {
-            return walletView(wallet, onWalletSelected);
-          })
-        })
-      })
-    ]
-  });
-}
-var walletView = (wallet, onWalletSelected) => {
-  const isWalletReady = wallet.readyState === WalletReadyState.Installed || wallet.readyState === WalletReadyState.Loadable;
-  if (!isWalletReady && isRedirectable()) {
-    const mobileSupport = wallet.deeplinkProvider;
-    if (mobileSupport) {
-      return /* @__PURE__ */ jsx(Menu.Item, {
-        onClick: () => onWalletSelected(wallet.name),
-        children: /* @__PURE__ */ jsxs("div", {
-          className: "wallet-menu-wrapper",
+        className: "wallet-selector-modal",
+        children: !connected && /* @__PURE__ */ jsxs(Fragment, {
           children: [
-            /* @__PURE__ */ jsxs("div", {
-              className: "wallet-name-wrapper",
+            hasAptosConnectWallets && /* @__PURE__ */ jsxs(Fragment, {
               children: [
-                /* @__PURE__ */ jsx("img", {
-                  src: wallet.icon,
-                  width: 25,
-                  style: { marginRight: 10 }
+                /* @__PURE__ */ jsx(Flex, {
+                  vertical: true,
+                  gap: 12,
+                  children: aptosConnectWallets.map((wallet) => /* @__PURE__ */ jsx(AptosConnectWalletRow, {
+                    wallet,
+                    onConnect: closeModal
+                  }, wallet.name))
                 }),
-                /* @__PURE__ */ jsx(Text, {
-                  className: "wallet-selector-text",
-                  children: wallet.name
+                /* @__PURE__ */ jsx(Divider, {
+                  children: "Or"
                 })
               ]
             }),
-            /* @__PURE__ */ jsx(Button, {
-              className: "wallet-connect-button",
-              children: /* @__PURE__ */ jsx(Text, {
-                className: "wallet-connect-button-text",
-                children: "Connect"
-              })
+            /* @__PURE__ */ jsx(Flex, {
+              vertical: true,
+              gap: 12,
+              children: defaultWallets.map((wallet) => /* @__PURE__ */ jsx(WalletRow, {
+                wallet,
+                onConnect: closeModal
+              }, wallet.name))
+            }),
+            !!moreWallets.length && /* @__PURE__ */ jsx(Collapse, {
+              ghost: true,
+              expandIconPosition: "end",
+              items: [
+                {
+                  key: "more-wallets",
+                  label: "More Wallets",
+                  children: /* @__PURE__ */ jsx(Flex, {
+                    vertical: true,
+                    gap: 12,
+                    children: moreWallets.map((wallet) => /* @__PURE__ */ jsx(WalletRow, {
+                      wallet,
+                      onConnect: closeModal
+                    }, wallet.name))
+                  })
+                }
+              ]
             })
           ]
         })
-      }, wallet.name);
-    }
-    return null;
-  } else {
-    return /* @__PURE__ */ jsx(Menu.Item, {
-      onClick: wallet.readyState === WalletReadyState.Installed || wallet.readyState === WalletReadyState.Loadable ? () => onWalletSelected(wallet.name) : () => window.open(wallet.url),
-      children: /* @__PURE__ */ jsxs("div", {
-        className: "wallet-menu-wrapper",
-        children: [
-          /* @__PURE__ */ jsxs("div", {
-            className: "wallet-name-wrapper",
-            children: [
-              /* @__PURE__ */ jsx("img", {
-                src: wallet.icon,
-                width: 25,
-                style: { marginRight: 10 }
-              }),
-              /* @__PURE__ */ jsx(Text, {
+      })
+    ]
+  });
+}
+function WalletRow({ wallet, onConnect }) {
+  return /* @__PURE__ */ jsx(WalletItem, {
+    wallet,
+    onConnect,
+    asChild: true,
+    children: /* @__PURE__ */ jsxs("div", {
+      className: "wallet-menu-wrapper",
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          className: "wallet-name-wrapper",
+          children: [
+            /* @__PURE__ */ jsx(WalletItem.Icon, {
+              className: "wallet-selector-icon"
+            }),
+            /* @__PURE__ */ jsx(WalletItem.Name, {
+              asChild: true,
+              children: /* @__PURE__ */ jsx(Text, {
                 className: "wallet-selector-text",
                 children: wallet.name
               })
-            ]
-          }),
-          wallet.readyState === WalletReadyState.Installed || wallet.readyState === WalletReadyState.Loadable ? /* @__PURE__ */ jsx(Button, {
-            className: "wallet-connect-button",
-            children: /* @__PURE__ */ jsx(Text, {
-              className: "wallet-connect-button-text",
-              children: "Connect"
             })
-          }) : /* @__PURE__ */ jsx(Text, {
-            className: "wallet-connect-install",
-            children: "Install"
+          ]
+        }),
+        isInstallRequired(wallet) ? /* @__PURE__ */ jsx(WalletItem.InstallLink, {
+          className: "wallet-connect-install"
+        }) : /* @__PURE__ */ jsx(WalletItem.ConnectButton, {
+          asChild: true,
+          children: /* @__PURE__ */ jsx(Button, {
+            className: "wallet-connect-button",
+            children: "Connect"
           })
+        })
+      ]
+    })
+  });
+}
+function AptosConnectWalletRow({ wallet, onConnect }) {
+  return /* @__PURE__ */ jsx(WalletItem, {
+    wallet,
+    onConnect,
+    asChild: true,
+    children: /* @__PURE__ */ jsx(WalletItem.ConnectButton, {
+      asChild: true,
+      children: /* @__PURE__ */ jsxs(Button, {
+        size: "large",
+        className: "aptos-connect-button",
+        children: [
+          /* @__PURE__ */ jsx(WalletItem.Icon, {
+            className: "wallet-selector-icon"
+          }),
+          /* @__PURE__ */ jsx(WalletItem.Name, {})
         ]
       })
-    }, wallet.name);
-  }
-};
+    })
+  });
+}
 export {
   WalletSelector
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aptos-labs/wallet-adapter-ant-design",
-  "version": "2.4.10",
+  "version": "2.5.0",
   "description": "Aptos Wallet Adapter ant-design",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -43,8 +43,8 @@
     "@aptos-labs/wallet-adapter-tsconfig": "0.0.1"
   },
   "dependencies": {
-    "antd": "^5.1.2",
-    "@aptos-labs/wallet-adapter-react": "3.2.0"
+    "antd": "^5.18.3",
+    "@aptos-labs/wallet-adapter-react": "3.3.1"
   },
   "peerDependencies": {
     "react": "^18",

package/src/WalletSelector.tsx

@@ -1,35 +1,69 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { Button, Menu, Modal, Typography } from "antd";
 import {
-  isRedirectable,
+  AnyAptosWallet,
+  WalletItem,
+  getAptosConnectWallets,
+  isInstallRequired,
+  partitionWallets,
+  truncateAddress,
   useWallet,
-  Wallet,
-  WalletReadyState,
-  WalletName,
-  AptosStandardSupportedWallet,
 } from "@aptos-labs/wallet-adapter-react";
+import { Button, Collapse, Divider, Flex, Modal, Typography } from "antd";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import "./styles.css";
-import { truncateAddress } from "./utils";
+
 const { Text } = Typography;
 
 type WalletSelectorProps = {
   isModalOpen?: boolean;
   setModalOpen?: Dispatch<SetStateAction<boolean>>;
+  /**
+   * An optional function for sorting wallets that are currently installed or
+   * loadable in the wallet selector modal.
+   */
+  sortDefaultWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
+  /**
+   * An optional function for sorting wallets that are NOT currently installed or
+   * loadable in the wallet selector modal.
+   */
+  sortMoreWallets?: (a: AnyAptosWallet, b: AnyAptosWallet) => number;
 };
 
 export function WalletSelector({
   isModalOpen,
   setModalOpen,
+  sortDefaultWallets,
+  sortMoreWallets,
 }: WalletSelectorProps) {
   const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
 
   useEffect(() => {
+    // If the component is being used as a controlled component,
+    // sync the external and internal modal state.
     if (isModalOpen !== undefined) {
       setWalletSelectorModalOpen(isModalOpen);
     }
   }, [isModalOpen]);
 
-  const { connect, disconnect, account, wallets, connected } = useWallet();
+  const { account, connected, disconnect, wallets = [] } = useWallet();
+
+  const {
+    /** Wallets that use social login to create an account on the blockchain */
+    aptosConnectWallets,
+    /** Wallets that use traditional wallet extensions */
+    otherWallets,
+  } = getAptosConnectWallets(wallets);
+
+  const {
+    /** Wallets that are currently installed or loadable. */
+    defaultWallets,
+    /** Wallets that are NOT currently installed or loadable. */
+    moreWallets,
+  } = partitionWallets(otherWallets);
+
+  if (sortDefaultWallets) defaultWallets.sort(sortDefaultWallets);
+  if (sortMoreWallets) moreWallets.sort(sortMoreWallets);
+
+  const hasAptosConnectWallets = !!aptosConnectWallets.length;
 
   const onWalletButtonClick = () => {
     if (connected) {
@@ -39,107 +73,133 @@ export function WalletSelector({
     }
   };
 
-  const onWalletSelected = (wallet: WalletName) => {
-    connect(wallet);
-    setWalletSelectorModalOpen(false);
-    if (setModalOpen) {
-      setModalOpen(false);
-    }
-  };
-  const onCancel = () => {
+  const closeModal = () => {
     setWalletSelectorModalOpen(false);
     if (setModalOpen) {
       setModalOpen(false);
     }
   };
-  const buttonText = account?.ansName
-    ? account?.ansName
-    : truncateAddress(account?.address);
+
+  const buttonText =
+    account?.ansName || truncateAddress(account?.address) || "Unknown";
+
   return (
     <>
-      <Button className="wallet-button" onClick={() => onWalletButtonClick()}>
+      <Button className="wallet-button" onClick={onWalletButtonClick}>
         {connected ? buttonText : "Connect Wallet"}
       </Button>
       <Modal
-        title={<div className="wallet-modal-title">Connect Wallet</div>}
+        title={
+          <div className="wallet-modal-title">
+            {hasAptosConnectWallets ? (
+              <>
+                <span>Log in or sign up</span>
+                <span>with Social + Aptos Connect</span>
+              </>
+            ) : (
+              "Connect Wallet"
+            )}
+          </div>
+        }
         centered
         open={walletSelectorModalOpen}
-        onCancel={onCancel}
+        onCancel={closeModal}
         footer={[]}
         closable={false}
         zIndex={9999}
+        className="wallet-selector-modal"
       >
         {!connected && (
-          <Menu>
-            {wallets?.map((wallet: Wallet | AptosStandardSupportedWallet) => {
-              return walletView(wallet, onWalletSelected);
-            })}
-          </Menu>
+          <>
+            {hasAptosConnectWallets && (
+              <>
+                <Flex vertical gap={12}>
+                  {aptosConnectWallets.map((wallet) => (
+                    <AptosConnectWalletRow
+                      key={wallet.name}
+                      wallet={wallet}
+                      onConnect={closeModal}
+                    />
+                  ))}
+                </Flex>
+                <Divider>Or</Divider>
+              </>
+            )}
+            <Flex vertical gap={12}>
+              {defaultWallets.map((wallet) => (
+                <WalletRow
+                  key={wallet.name}
+                  wallet={wallet}
+                  onConnect={closeModal}
+                />
+              ))}
+            </Flex>
+            {!!moreWallets.length && (
+              <Collapse
+                ghost
+                expandIconPosition="end"
+                items={[
+                  {
+                    key: "more-wallets",
+                    label: "More Wallets",
+                    children: (
+                      <Flex vertical gap={12}>
+                        {moreWallets.map((wallet) => (
+                          <WalletRow
+                            key={wallet.name}
+                            wallet={wallet}
+                            onConnect={closeModal}
+                          />
+                        ))}
+                      </Flex>
+                    ),
+                  },
+                ]}
+              />
+            )}
+          </>
         )}
       </Modal>
     </>
   );
 }
 
-const walletView = (
-  wallet: Wallet | AptosStandardSupportedWallet,
-  onWalletSelected: (wallet: WalletName) => void
-) => {
-  const isWalletReady =
-    wallet.readyState === WalletReadyState.Installed ||
-    wallet.readyState === WalletReadyState.Loadable;
-
-  // The user is on a mobile device
-  if (!isWalletReady && isRedirectable()) {
-    const mobileSupport = (wallet as Wallet).deeplinkProvider;
-    // If the user has a deep linked app, show the wallet
-    if (mobileSupport) {
-      return (
-        <Menu.Item
-          key={wallet.name}
-          onClick={() => onWalletSelected(wallet.name)}
-        >
-          <div className="wallet-menu-wrapper">
-            <div className="wallet-name-wrapper">
-              <img src={wallet.icon} width={25} style={{ marginRight: 10 }} />
-              <Text className="wallet-selector-text">{wallet.name}</Text>
-            </div>
-            <Button className="wallet-connect-button">
-              <Text className="wallet-connect-button-text">Connect</Text>
-            </Button>
-          </div>
-        </Menu.Item>
-      );
-    }
-    // Otherwise don't show anything
-    return null;
-  } else {
-    // The user is on a desktop device
-    return (
-      <Menu.Item
-        key={wallet.name}
-        onClick={
-          wallet.readyState === WalletReadyState.Installed ||
-          wallet.readyState === WalletReadyState.Loadable
-            ? () => onWalletSelected(wallet.name)
-            : () => window.open(wallet.url)
-        }
-      >
-        <div className="wallet-menu-wrapper">
-          <div className="wallet-name-wrapper">
-            <img src={wallet.icon} width={25} style={{ marginRight: 10 }} />
+interface WalletRowProps {
+  wallet: AnyAptosWallet;
+  onConnect?: () => void;
+}
+
+function WalletRow({ wallet, onConnect }: WalletRowProps) {
+  return (
+    <WalletItem wallet={wallet} onConnect={onConnect} asChild>
+      <div className="wallet-menu-wrapper">
+        <div className="wallet-name-wrapper">
+          <WalletItem.Icon className="wallet-selector-icon" />
+          <WalletItem.Name asChild>
             <Text className="wallet-selector-text">{wallet.name}</Text>
-          </div>
-          {wallet.readyState === WalletReadyState.Installed ||
-          wallet.readyState === WalletReadyState.Loadable ? (
-            <Button className="wallet-connect-button">
-              <Text className="wallet-connect-button-text">Connect</Text>
-            </Button>
-          ) : (
-            <Text className="wallet-connect-install">Install</Text>
-          )}
+          </WalletItem.Name>
         </div>
-      </Menu.Item>
-    );
-  }
-};
+        {isInstallRequired(wallet) ? (
+          <WalletItem.InstallLink className="wallet-connect-install" />
+        ) : (
+          <WalletItem.ConnectButton asChild>
+            <Button className="wallet-connect-button">Connect</Button>
+          </WalletItem.ConnectButton>
+        )}
+      </div>
+    </WalletItem>
+  );
+}
+
+function AptosConnectWalletRow({ wallet, onConnect }: WalletRowProps) {
+  return (
+    <WalletItem wallet={wallet} onConnect={onConnect} asChild>
+      <WalletItem.ConnectButton asChild>
+        <Button size="large" className="aptos-connect-button">
+          <WalletItem.Icon className="wallet-selector-icon" />
+          <WalletItem.Name />
+        </Button>
+      </WalletItem.ConnectButton>
+    </WalletItem>
+  );
+}

package/src/styles.css

@@ -1,31 +1,35 @@
-.ant-menu {
-  border: none !important;
-}
-
-.ant-menu-item {
-  background-color: rgba(0, 0, 0, 0.1);
-  padding: 15px;
-  height: auto !important;
-  margin-bottom: 10px !important;
-}
-
-.ant-menu-item-selected {
-  background-color: rgba(0, 0, 0, 0.06) !important;
-  color: black !important;
+.wallet-button {
+  padding: 10px 20px;
+  height: auto;
+  border-radius: 6px;
+  font-size: 16px;
+  background-color: #3f67ff;
+  color: white;
 }
 
-.wallet-selector-text {
-  font-size: 14px;
+.wallet-modal-title {
+  text-align: center;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 32px;
 }
 
-.wallet-connect-button-text {
-  color: white;
+.aptos-connect-button {
+  color: #3f67ff;
+  border-color: #3f67ff;
 }
 
 .wallet-menu-wrapper {
   display: flex;
   justify-content: space-between;
   font-size: 20px;
+  border: solid 1px;
+  border-color: rgba(0, 0, 0, 0.1);
+  padding-inline: 16px;
+  padding-block: 12px;
+  border-radius: 8px;
 }
 
 .wallet-name-wrapper {
@@ -33,30 +37,53 @@
   align-items: center;
 }
 
+.wallet-selector-icon {
+  height: 24px;
+  width: 24px;
+  margin-right: 12px;
+}
+
+.wallet-selector-text {
+  font-size: 14px;
+}
+
 .wallet-connect-button {
   align-self: center;
   background-color: #3f67ff;
+  color: white;
   height: auto;
 }
 
 .wallet-connect-install {
   align-self: center;
   color: #3f67ff;
-  padding-right: 15px;
+  padding-right: 16px;
   font-size: 16px;
-  padding-top: 3px;
-  padding-bottom: 3px;
+  line-height: 32px;
 }
 
-.wallet-button {
-  padding: 10px 20px;
-  height: auto;
-  font-size: 16px;
-  background-color: #3f67ff;
-  color: white;
+/* Scoped Ant CSS overrides */
+
+:where(.wallet-selector-modal .ant-modal-body) {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.wallet-modal-title {
-  text-align: center;
-  font-size: 2rem;
+:where(.wallet-selector-modal .ant-divider-inner-text) {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+:where(.wallet-selector-modal .ant-collapse-header) {
+  justify-content: center !important;
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+:where(.wallet-selector-modal .ant-collapse-header-text) {
+  flex: unset !important;
+  margin-inline-end: 0 !important;
+}
+
+:where(.wallet-selector-modal .ant-collapse-content-box) {
+  padding: 0px !important;
+  padding-top: 8px !important;
 }

package/src/utils.ts

@@ -1,4 +0,0 @@
-export const truncateAddress = (address: string | undefined) => {
-  if (!address) return;
-  return `${address.slice(0, 6)}...${address.slice(-5)}`;
-};