@aptos-labs/wallet-adapter-ant-design 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @aptos-labs/wallet-adapter-ant-design
 
+## 5.1.0
+
+### Minor Changes
+
+- 4d0b4ec: Modify the wallet button to have a dropdown with two options: "Copy Address" and "Disconnect"
+
+## 5.0.1
+
+### Patch Changes
+
+- @aptos-labs/wallet-adapter-react@7.0.1
+
 ## 5.0.0
 
 ### Major Changes

package/dist/index.js

@@ -94,6 +94,29 @@ function WalletSelector(_a) {
       setWalletSelectorModalOpen(true);
     }
   };
+  const handleCopyAddress = () => {
+    if (account == null ? void 0 : account.address) {
+      navigator.clipboard.writeText(account.address.toString());
+      import_antd.message.success("Address copied to clipboard");
+    }
+  };
+  const handleDisconnect = () => {
+    disconnect();
+  };
+  const dropdownItems = [
+    {
+      key: "copy",
+      label: "Copy Address",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CopyOutlined, {}),
+      onClick: handleCopyAddress
+    },
+    {
+      key: "disconnect",
+      label: "Disconnect",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DisconnectOutlined, {}),
+      onClick: handleDisconnect
+    }
+  ];
   const closeModal = () => {
     setWalletSelectorModalOpen(false);
     if (setModalOpen) {
@@ -164,7 +187,7 @@ function WalletSelector(_a) {
     })
   );
   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, children: connected ? buttonText : "Connect Wallet" }),
+    connected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Dropdown, { menu: { items: dropdownItems }, trigger: ["click"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { className: "wallet-button", children: buttonText }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { className: "wallet-button", onClick: onWalletButtonClick, children: "Connect Wallet" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AboutAptosConnect, { renderEducationScreen: renderEducationScreens, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_antd.Modal,
       __spreadProps(__spreadValues({}, modalProps), {

package/dist/index.mjs

@@ -31,7 +31,12 @@ var __objRest = (source, exclude) => {
 };
 
 // src/WalletSelector.tsx
-import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
+import {
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  CopyOutlined,
+  DisconnectOutlined
+} from "@ant-design/icons";
 import {
   AboutAptosConnect,
   AptosPrivacyPolicy,
@@ -45,9 +50,11 @@ import {
   Button,
   Collapse,
   Divider,
+  Dropdown,
   Flex,
   Modal,
-  Typography
+  Typography,
+  message
 } from "antd";
 import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -86,6 +93,29 @@ function WalletSelector(_a) {
       setWalletSelectorModalOpen(true);
     }
   };
+  const handleCopyAddress = () => {
+    if (account == null ? void 0 : account.address) {
+      navigator.clipboard.writeText(account.address.toString());
+      message.success("Address copied to clipboard");
+    }
+  };
+  const handleDisconnect = () => {
+    disconnect();
+  };
+  const dropdownItems = [
+    {
+      key: "copy",
+      label: "Copy Address",
+      icon: /* @__PURE__ */ jsx(CopyOutlined, {}),
+      onClick: handleCopyAddress
+    },
+    {
+      key: "disconnect",
+      label: "Disconnect",
+      icon: /* @__PURE__ */ jsx(DisconnectOutlined, {}),
+      onClick: handleDisconnect
+    }
+  ];
   const closeModal = () => {
     setWalletSelectorModalOpen(false);
     if (setModalOpen) {
@@ -156,7 +186,7 @@ function WalletSelector(_a) {
     })
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Button, { className: "wallet-button", onClick: onWalletButtonClick, children: connected ? buttonText : "Connect Wallet" }),
+    connected ? /* @__PURE__ */ jsx(Dropdown, { menu: { items: dropdownItems }, trigger: ["click"], children: /* @__PURE__ */ jsx(Button, { className: "wallet-button", children: buttonText }) }) : /* @__PURE__ */ jsx(Button, { className: "wallet-button", onClick: onWalletButtonClick, children: "Connect Wallet" }),
     /* @__PURE__ */ jsx(AboutAptosConnect, { renderEducationScreen: renderEducationScreens, children: /* @__PURE__ */ jsx(
       Modal,
       __spreadProps(__spreadValues({}, modalProps), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aptos-labs/wallet-adapter-ant-design",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Aptos Wallet Adapter ant-design",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -45,7 +45,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
     "antd": "^5.18.3",
-    "@aptos-labs/wallet-adapter-react": "7.0.0"
+    "@aptos-labs/wallet-adapter-react": "7.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/WalletSelector.tsx

@@ -1,4 +1,9 @@
-import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
+import {
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  CopyOutlined,
+  DisconnectOutlined,
+} from "@ant-design/icons";
 import {
   AboutAptosConnect,
   AboutAptosConnectEducationScreen,
@@ -16,10 +21,13 @@ import {
   Button,
   Collapse,
   Divider,
+  Dropdown,
   Flex,
+  MenuProps,
   Modal,
   ModalProps,
   Typography,
+  message,
 } from "antd";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import "./styles.css";
@@ -57,7 +65,7 @@ export function WalletSelector({
   const { aptosConnectWallets, availableWallets, installableWallets } =
     groupAndSortWallets(
       [...wallets, ...notDetectedWallets],
-      walletSortingOptions,
+      walletSortingOptions
     );
 
   const hasAptosConnectWallets = !!aptosConnectWallets.length;
@@ -70,6 +78,32 @@ export function WalletSelector({
     }
   };
 
+  const handleCopyAddress = () => {
+    if (account?.address) {
+      navigator.clipboard.writeText(account.address.toString());
+      message.success("Address copied to clipboard");
+    }
+  };
+
+  const handleDisconnect = () => {
+    disconnect();
+  };
+
+  const dropdownItems: MenuProps["items"] = [
+    {
+      key: "copy",
+      label: "Copy Address",
+      icon: <CopyOutlined />,
+      onClick: handleCopyAddress,
+    },
+    {
+      key: "disconnect",
+      label: "Disconnect",
+      icon: <DisconnectOutlined />,
+      onClick: handleDisconnect,
+    },
+  ];
+
   const closeModal = () => {
     setWalletSelectorModalOpen(false);
     if (setModalOpen) {
@@ -146,9 +180,15 @@ export function WalletSelector({
 
   return (
     <>
-      <Button className="wallet-button" onClick={onWalletButtonClick}>
-        {connected ? buttonText : "Connect Wallet"}
-      </Button>
+      {connected ? (
+        <Dropdown menu={{ items: dropdownItems }} trigger={["click"]}>
+          <Button className="wallet-button">{buttonText}</Button>
+        </Dropdown>
+      ) : (
+        <Button className="wallet-button" onClick={onWalletButtonClick}>
+          Connect Wallet
+        </Button>
+      )}
       <AboutAptosConnect renderEducationScreen={renderEducationScreens}>
         <Modal
           {...modalProps}