@moveindustries/wallet-adapter-move-design 1.0.2 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @moveindustries/wallet-adapter-move-design
 
-Movement Design System wallet modal for the Movement Wallet Adapter. Provides a styled `WalletModal` component for connecting wallets in Movement dApps.
+Movement Design System wallet components for the Movement Wallet Adapter. Provides a styled `WalletModal` for connecting wallets and a `WalletSelector` drop-in button component for Movement dApps.
 
 ## Installation
 
@@ -26,11 +26,11 @@ Add the following import to your main CSS file (e.g., `globals.css`), **after**
 @import "@moveindustries/wallet-adapter-move-design/styles";
 ```
 
-This `@source` directive tells Tailwind to scan the package's source files for class names. Without it, the modal will render without styles.
+This `@source` directive tells Tailwind to scan the package's source files for class names. Without it, the components will render without styles.
 
 ### Fonts
 
-The wallet modal uses the following fonts. Host them in your `public/fonts/` directory and add the corresponding `@font-face` declarations to your CSS:
+The wallet components use the following fonts. Host them in your `public/fonts/` directory and add the corresponding `@font-face` declarations to your CSS:
 
 - **TWK Everett Mono** (Regular 400, Medium 500, Bold 700)
 - **Neue Haas Unica Pro** (Regular 400)
@@ -69,7 +69,40 @@ The wallet modal uses the following fonts. Host them in your `public/fonts/` dir
 }
 ```
 
-## Usage
+## Components
+
+### WalletSelector
+
+A complete, drop-in wallet button that handles the full connect/disconnect flow. Renders a gradient "CONNECT" button when disconnected, and a pill-shaped address display with dropdown when connected.
+
+```tsx
+import { WalletSelector } from "@moveindustries/wallet-adapter-move-design";
+
+function Header() {
+  return (
+    <nav>
+      <WalletSelector />
+    </nav>
+  );
+}
+```
+
+#### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `className` | `string` | Optional class name applied to the outermost element |
+
+The `WalletSelector` includes:
+- Skeleton loading state before hydration
+- Gradient connect button with hover effects
+- Connected state with wallet icon, truncated address, and Move network badge
+- Dropdown with copy address and disconnect actions
+- Automatic wallet modal integration
+
+### WalletModal
+
+A lower-level modal component for wallet selection. Use this if you want to build your own connect button but use the standard wallet picker UI.
 
 ```tsx
 import { WalletModal } from "@moveindustries/wallet-adapter-move-design";
@@ -89,7 +122,7 @@ function WalletConnectButton() {
 }
 ```
 
-### Props
+#### Props
 
 | Prop | Type | Description |
 |------|------|-------------|

package/dist/index.d.mts

@@ -6,4 +6,9 @@ interface ConnectWalletDialogProps extends WalletSortingOptions {
 }
 declare function WalletModal({ onClose, ...walletSortingOptions }: ConnectWalletDialogProps): react_jsx_runtime.JSX.Element | null;
 
-export { type ConnectWalletDialogProps, WalletModal };
+interface WalletSelectorProps {
+    className?: string;
+}
+declare function WalletSelector({ className }: WalletSelectorProps): react_jsx_runtime.JSX.Element;
+
+export { type ConnectWalletDialogProps, WalletModal, WalletSelector, type WalletSelectorProps };

package/dist/index.d.ts

@@ -6,4 +6,9 @@ interface ConnectWalletDialogProps extends WalletSortingOptions {
 }
 declare function WalletModal({ onClose, ...walletSortingOptions }: ConnectWalletDialogProps): react_jsx_runtime.JSX.Element | null;
 
-export { type ConnectWalletDialogProps, WalletModal };
+interface WalletSelectorProps {
+    className?: string;
+}
+declare function WalletSelector({ className }: WalletSelectorProps): react_jsx_runtime.JSX.Element;
+
+export { type ConnectWalletDialogProps, WalletModal, WalletSelector, type WalletSelectorProps };

package/dist/index.js

@@ -59,7 +59,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  WalletModal: () => WalletModal
+  WalletModal: () => WalletModal,
+  WalletSelector: () => WalletSelector
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -696,7 +697,342 @@ function IconWalletCard({ wallet, onConnect }) {
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "pointer-events-none absolute bottom-[-0.5rem] left-1/2 -translate-x-1/2 text-xs whitespace-nowrap text-white/60 opacity-0 transition-opacity duration-200 ease-in-out hover:opacity-100", children: "Click to connect" })
   ] }) }) });
 }
+
+// src/WalletSelector.tsx
+var import_wallet_adapter_react2 = require("@moveindustries/wallet-adapter-react");
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function WalletIcon({
+  width = 24,
+  height = 24,
+  fill = "#002CD6"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "path",
+          {
+            d: "M17.4845 4C17.7146 4 17.9357 4.09412 18.0984 4.26242C18.2611 4.43072 18.3521 4.65942 18.3521 4.89744V7.58974H19.2197V13.2308H17.4845V9.38462H11.4113C10.721 9.38462 10.0586 9.66797 9.57051 10.1729C9.08239 10.6778 8.80845 11.3629 8.80845 12.0769C8.80845 12.791 9.08239 13.4761 9.57051 13.981C10.0586 14.4859 10.721 14.7692 11.4113 14.7692H16.5085V16.5641H11.4113C10.2608 16.5641 9.1572 16.0915 8.34366 15.25C7.53012 14.4085 7.07324 13.267 7.07324 12.0769C7.07324 10.8868 7.53012 9.74536 8.34366 8.90385C9.1572 8.06234 10.2608 7.58974 11.4113 7.58974H16.6169V5.79487H2.73521V18.359H12.5684V20.239H1.8831C1.653 20.239 1.4319 20.1449 1.26919 19.9766C1.10648 19.8083 1.01549 19.5796 1.01549 19.3415L1 4.89744C1 4.65942 1.09099 4.43072 1.2537 4.26242C1.4164 4.09412 1.6375 4 1.86761 4H17.4845Z",
+            fill
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "path",
+          {
+            d: "M19.2197 14.7692V16.5641H18.3521L18.3676 19.3415C18.3676 19.5796 18.2766 19.8083 18.1139 19.9766C17.9512 20.1449 17.7301 20.239 17.5 20.239H14.0141V18.359H17.5V14.7692H19.2197Z",
+            fill
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "path",
+          {
+            d: "M14.0141 12.9744H11.4113V11.1795H14.0141V12.9744Z",
+            fill
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "path",
+          {
+            d: "M19.2197 18.359H23V20.239H19.2197V24H17.5V20.239H14.0141V18.359H17.5V14.7692H19.2197V18.359Z",
+            fill
+          }
+        )
+      ]
+    }
+  );
+}
+function CaretDownIcon2({
+  size = 18,
+  className,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          d: "M6 9L12 15L18 9",
+          stroke: color,
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function CopyIcon({
+  size = 14,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z",
+          stroke: color,
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function DisconnectIcon({ size = 16 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function MoveIcon({
+  width = 10,
+  height = 10
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 10 10",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "5", cy: "5", r: "5", fill: "#81FFBA" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 5L5 3L7 5L5 7L3 5Z", fill: "black" })
+      ]
+    }
+  );
+}
+function reduceAddress(address) {
+  if (!address) return "\u2026";
+  try {
+    return `${address.slice(0, 5)}\u2026${address.slice(-4)}`;
+  } catch (e) {
+    return address;
+  }
+}
+function WalletOptionsDropdown({
+  address,
+  disconnect,
+  onClose,
+  triggerRef
+}) {
+  const dropdownRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isClickOutside = dropdownRef.current && !dropdownRef.current.contains(target);
+      const isClickOnTrigger = (triggerRef == null ? void 0 : triggerRef.current) && triggerRef.current.contains(target);
+      if (isClickOutside && !isClickOnTrigger) {
+        onClose();
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose, triggerRef]);
+  const copyAddress = () => {
+    navigator.clipboard.writeText(address);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "z-9999 relative", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      ref: dropdownRef,
+      className: "absolute top-[calc(100%+8px)] right-0 w-48 rounded-lg border border-white/10 bg-black/95 backdrop-blur-xl overflow-visible",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 px-3 h-10 rounded text-[#81FFBA] font-['TWK_Everett_Mono',monospace] text-sm font-medium leading-[140%] hover:bg-white/5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WalletIcon, { width: 14, height: 14, fill: "#81FFBA" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1", children: reduceAddress(address) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              onClick: copyAddress,
+              className: "cursor-pointer border-none bg-transparent p-0",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CopyIcon, { size: 14, color: "#81FFBA" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            className: "group flex cursor-pointer items-center gap-2 rounded-b px-3 py-3.5 h-10 text-white/64 hover:bg-[#81FFBA] hover:text-[#00135C]",
+            onClick: disconnect,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DisconnectIcon, { size: 16 }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "disconnect" })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function WalletSelector({ className }) {
+  var _a;
+  const [isModalOpen, setIsModalOpen] = (0, import_react2.useState)(false);
+  const [showDropdown, setShowDropdown] = (0, import_react2.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react2.useState)(false);
+  const [mounted, setMounted] = (0, import_react2.useState)(false);
+  const { connected, disconnect, account, wallet } = (0, import_wallet_adapter_react2.useWallet)();
+  const triggerButtonRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex h-10 w-40 min-w-24 rounded-full bg-white/8 md:h-12",
+          className
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pointer-events-none inset-0 -z-hide h-full w-full animate-pulse overflow-hidden rounded-[inherit] bg-linear-to-r from-white/5 via-white/10 to-white/5 bg-[length:200%_100%]" })
+      }
+    );
+  }
+  if (!connected) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "button",
+        {
+          className: cn(
+            "group relative flex h-10 w-40 min-w-24 cursor-pointer items-center justify-center gap-1 overflow-hidden rounded-full border-none p-0 text-[#002CD6] transition-all duration-200 group-hover:text-black md:h-12",
+            className
+          ),
+          style: {
+            background: "linear-gradient(130deg, #81FFBA 33.64%, #00FFF9 79.2%)"
+          },
+          onClick: () => setIsModalOpen(true),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute inset-0 rounded-full bg-white opacity-0 transition-opacity duration-200 group-hover:opacity-100" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative z-10 flex items-center justify-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WalletIcon, { width: 20, height: 20, fill: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hidden items-center font-['TWK_Everett_Mono',monospace] text-base leading-[1.3rem] font-medium md:flex", children: "CONNECT" })
+            ] })
+          ]
+        }
+      ),
+      isModalOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WalletModal, { onClose: () => setIsModalOpen(false) })
+    ] });
+  }
+  const address = ((_a = account == null ? void 0 : account.address) == null ? void 0 : _a.toString()) || "";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("relative inline-block", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        ref: triggerButtonRef,
+        className: "group flex h-10 w-24 cursor-pointer items-center justify-center gap-1 rounded-full border-none bg-white/8 pl-0 pr-0 text-white/64 transition-all duration-200 hover:bg-white hover:text-black md:h-12 md:w-50 md:pl-4 md:pr-4",
+        onClick: () => setShowDropdown(!showDropdown),
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative group-hover:[&_svg]:text-black", children: [
+            (wallet == null ? void 0 : wallet.icon) ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "img",
+                {
+                  src: wallet.icon,
+                  alt: "Wallet",
+                  width: 20,
+                  height: 20,
+                  className: "transition-all duration-200"
+                }
+              )
+            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "svg",
+              {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                className: "text-white",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "path",
+                  {
+                    d: "M21 18V19C21 20.1 20.1 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.89 3 5 3H19C20.1 3 21 3.9 21 5V6H12C10.89 6 10 6.9 10 8V16C10 17.1 10.89 18 12 18H21ZM12 16H22V8H12V16ZM16 13.5C15.17 13.5 14.5 12.83 14.5 12C14.5 11.17 15.17 10.5 16 10.5C16.83 10.5 17.5 11.17 17.5 12C17.5 12.83 16.83 13.5 16 13.5Z",
+                    fill: "currentColor"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute -right-1 -bottom-1 rounded-full bg-black transition-all duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MoveIcon, { width: 10, height: 10 }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hidden max-w-[140px] items-baseline gap-1 font-['Neue_Haas_Unica_Pro',sans-serif] text-sm leading-[1.225rem] font-medium md:inline-flex", children: (account == null ? void 0 : account.mnsName) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: account.mnsName }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "shrink-0 -translate-y-[1px] rounded-sm bg-[#81FFBA]/15 px-1 py-0.5 font-['TWK_Everett_Mono',monospace] text-[9px] font-bold leading-none tracking-wider text-[#81FFBA]", children: ".move" })
+          ] }) : reduceAddress(address) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            CaretDownIcon2,
+            {
+              size: 18,
+              className: `transition-transform duration-200 ${showDropdown ? "rotate-180" : ""}`,
+              color: isHovered ? "black" : "rgba(255, 255, 255, 0.64)"
+            }
+          )
+        ]
+      }
+    ),
+    showDropdown && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      WalletOptionsDropdown,
+      {
+        address,
+        onClose: () => setShowDropdown(false),
+        disconnect: () => {
+          disconnect();
+          setShowDropdown(false);
+        },
+        triggerRef: triggerButtonRef
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  WalletModal
+  WalletModal,
+  WalletSelector
 });

package/dist/index.mjs

@@ -669,6 +669,341 @@ function IconWalletCard({ wallet, onConnect }) {
     /* @__PURE__ */ jsx4("span", { className: "pointer-events-none absolute bottom-[-0.5rem] left-1/2 -translate-x-1/2 text-xs whitespace-nowrap text-white/60 opacity-0 transition-opacity duration-200 ease-in-out hover:opacity-100", children: "Click to connect" })
   ] }) }) });
 }
+
+// src/WalletSelector.tsx
+import { useWallet as useWallet2 } from "@moveindustries/wallet-adapter-react";
+import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function WalletIcon({
+  width = 24,
+  height = 24,
+  fill = "#002CD6"
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx5(
+          "path",
+          {
+            d: "M17.4845 4C17.7146 4 17.9357 4.09412 18.0984 4.26242C18.2611 4.43072 18.3521 4.65942 18.3521 4.89744V7.58974H19.2197V13.2308H17.4845V9.38462H11.4113C10.721 9.38462 10.0586 9.66797 9.57051 10.1729C9.08239 10.6778 8.80845 11.3629 8.80845 12.0769C8.80845 12.791 9.08239 13.4761 9.57051 13.981C10.0586 14.4859 10.721 14.7692 11.4113 14.7692H16.5085V16.5641H11.4113C10.2608 16.5641 9.1572 16.0915 8.34366 15.25C7.53012 14.4085 7.07324 13.267 7.07324 12.0769C7.07324 10.8868 7.53012 9.74536 8.34366 8.90385C9.1572 8.06234 10.2608 7.58974 11.4113 7.58974H16.6169V5.79487H2.73521V18.359H12.5684V20.239H1.8831C1.653 20.239 1.4319 20.1449 1.26919 19.9766C1.10648 19.8083 1.01549 19.5796 1.01549 19.3415L1 4.89744C1 4.65942 1.09099 4.43072 1.2537 4.26242C1.4164 4.09412 1.6375 4 1.86761 4H17.4845Z",
+            fill
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "path",
+          {
+            d: "M19.2197 14.7692V16.5641H18.3521L18.3676 19.3415C18.3676 19.5796 18.2766 19.8083 18.1139 19.9766C17.9512 20.1449 17.7301 20.239 17.5 20.239H14.0141V18.359H17.5V14.7692H19.2197Z",
+            fill
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "path",
+          {
+            d: "M14.0141 12.9744H11.4113V11.1795H14.0141V12.9744Z",
+            fill
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "path",
+          {
+            d: "M19.2197 18.359H23V20.239H19.2197V24H17.5V20.239H14.0141V18.359H17.5V14.7692H19.2197V18.359Z",
+            fill
+          }
+        )
+      ]
+    }
+  );
+}
+function CaretDownIcon2({
+  size = 18,
+  className,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d: "M6 9L12 15L18 9",
+          stroke: color,
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function CopyIcon({
+  size = 14,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z",
+          stroke: color,
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function DisconnectIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function MoveIcon({
+  width = 10,
+  height = 10
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 10 10",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "5", cy: "5", r: "5", fill: "#81FFBA" }),
+        /* @__PURE__ */ jsx5("path", { d: "M3 5L5 3L7 5L5 7L3 5Z", fill: "black" })
+      ]
+    }
+  );
+}
+function reduceAddress(address) {
+  if (!address) return "\u2026";
+  try {
+    return `${address.slice(0, 5)}\u2026${address.slice(-4)}`;
+  } catch (e) {
+    return address;
+  }
+}
+function WalletOptionsDropdown({
+  address,
+  disconnect,
+  onClose,
+  triggerRef
+}) {
+  const dropdownRef = useRef(null);
+  useEffect3(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isClickOutside = dropdownRef.current && !dropdownRef.current.contains(target);
+      const isClickOnTrigger = (triggerRef == null ? void 0 : triggerRef.current) && triggerRef.current.contains(target);
+      if (isClickOutside && !isClickOnTrigger) {
+        onClose();
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose, triggerRef]);
+  const copyAddress = () => {
+    navigator.clipboard.writeText(address);
+  };
+  return /* @__PURE__ */ jsx5("div", { className: "z-9999 relative", children: /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: dropdownRef,
+      className: "absolute top-[calc(100%+8px)] right-0 w-48 rounded-lg border border-white/10 bg-black/95 backdrop-blur-xl overflow-visible",
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 px-3 h-10 rounded text-[#81FFBA] font-['TWK_Everett_Mono',monospace] text-sm font-medium leading-[140%] hover:bg-white/5", children: [
+          /* @__PURE__ */ jsx5(WalletIcon, { width: 14, height: 14, fill: "#81FFBA" }),
+          /* @__PURE__ */ jsx5("span", { className: "flex-1", children: reduceAddress(address) }),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onClick: copyAddress,
+              className: "cursor-pointer border-none bg-transparent p-0",
+              children: /* @__PURE__ */ jsx5(CopyIcon, { size: 14, color: "#81FFBA" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: "group flex cursor-pointer items-center gap-2 rounded-b px-3 py-3.5 h-10 text-white/64 hover:bg-[#81FFBA] hover:text-[#00135C]",
+            onClick: disconnect,
+            children: [
+              /* @__PURE__ */ jsx5(DisconnectIcon, { size: 16 }),
+              /* @__PURE__ */ jsx5("span", { children: "disconnect" })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function WalletSelector({ className }) {
+  var _a;
+  const [isModalOpen, setIsModalOpen] = useState3(false);
+  const [showDropdown, setShowDropdown] = useState3(false);
+  const [isHovered, setIsHovered] = useState3(false);
+  const [mounted, setMounted] = useState3(false);
+  const { connected, disconnect, account, wallet } = useWallet2();
+  const triggerButtonRef = useRef(null);
+  useEffect3(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: cn(
+          "flex h-10 w-40 min-w-24 rounded-full bg-white/8 md:h-12",
+          className
+        ),
+        children: /* @__PURE__ */ jsx5("div", { className: "pointer-events-none inset-0 -z-hide h-full w-full animate-pulse overflow-hidden rounded-[inherit] bg-linear-to-r from-white/5 via-white/10 to-white/5 bg-[length:200%_100%]" })
+      }
+    );
+  }
+  if (!connected) {
+    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          className: cn(
+            "group relative flex h-10 w-40 min-w-24 cursor-pointer items-center justify-center gap-1 overflow-hidden rounded-full border-none p-0 text-[#002CD6] transition-all duration-200 group-hover:text-black md:h-12",
+            className
+          ),
+          style: {
+            background: "linear-gradient(130deg, #81FFBA 33.64%, #00FFF9 79.2%)"
+          },
+          onClick: () => setIsModalOpen(true),
+          children: [
+            /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 rounded-full bg-white opacity-0 transition-opacity duration-200 group-hover:opacity-100" }),
+            /* @__PURE__ */ jsxs5("div", { className: "relative z-10 flex items-center justify-center gap-1", children: [
+              /* @__PURE__ */ jsx5(WalletIcon, { width: 20, height: 20, fill: "currentColor" }),
+              /* @__PURE__ */ jsx5("span", { className: "hidden items-center font-['TWK_Everett_Mono',monospace] text-base leading-[1.3rem] font-medium md:flex", children: "CONNECT" })
+            ] })
+          ]
+        }
+      ),
+      isModalOpen && /* @__PURE__ */ jsx5(WalletModal, { onClose: () => setIsModalOpen(false) })
+    ] });
+  }
+  const address = ((_a = account == null ? void 0 : account.address) == null ? void 0 : _a.toString()) || "";
+  return /* @__PURE__ */ jsxs5("div", { className: cn("relative inline-block", className), children: [
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        ref: triggerButtonRef,
+        className: "group flex h-10 w-24 cursor-pointer items-center justify-center gap-1 rounded-full border-none bg-white/8 pl-0 pr-0 text-white/64 transition-all duration-200 hover:bg-white hover:text-black md:h-12 md:w-50 md:pl-4 md:pr-4",
+        onClick: () => setShowDropdown(!showDropdown),
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: "relative group-hover:[&_svg]:text-black", children: [
+            (wallet == null ? void 0 : wallet.icon) ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx5(
+                "img",
+                {
+                  src: wallet.icon,
+                  alt: "Wallet",
+                  width: 20,
+                  height: 20,
+                  className: "transition-all duration-200"
+                }
+              )
+            ) : /* @__PURE__ */ jsx5(
+              "svg",
+              {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                className: "text-white",
+                children: /* @__PURE__ */ jsx5(
+                  "path",
+                  {
+                    d: "M21 18V19C21 20.1 20.1 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.89 3 5 3H19C20.1 3 21 3.9 21 5V6H12C10.89 6 10 6.9 10 8V16C10 17.1 10.89 18 12 18H21ZM12 16H22V8H12V16ZM16 13.5C15.17 13.5 14.5 12.83 14.5 12C14.5 11.17 15.17 10.5 16 10.5C16.83 10.5 17.5 11.17 17.5 12C17.5 12.83 16.83 13.5 16 13.5Z",
+                    fill: "currentColor"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx5("div", { className: "absolute -right-1 -bottom-1 rounded-full bg-black transition-all duration-200", children: /* @__PURE__ */ jsx5(MoveIcon, { width: 10, height: 10 }) })
+          ] }),
+          /* @__PURE__ */ jsx5("span", { className: "hidden max-w-[140px] items-baseline gap-1 font-['Neue_Haas_Unica_Pro',sans-serif] text-sm leading-[1.225rem] font-medium md:inline-flex", children: (account == null ? void 0 : account.mnsName) ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsx5("span", { className: "truncate", children: account.mnsName }),
+            /* @__PURE__ */ jsx5("span", { className: "shrink-0 -translate-y-[1px] rounded-sm bg-[#81FFBA]/15 px-1 py-0.5 font-['TWK_Everett_Mono',monospace] text-[9px] font-bold leading-none tracking-wider text-[#81FFBA]", children: ".move" })
+          ] }) : reduceAddress(address) }),
+          /* @__PURE__ */ jsx5(
+            CaretDownIcon2,
+            {
+              size: 18,
+              className: `transition-transform duration-200 ${showDropdown ? "rotate-180" : ""}`,
+              color: isHovered ? "black" : "rgba(255, 255, 255, 0.64)"
+            }
+          )
+        ]
+      }
+    ),
+    showDropdown && /* @__PURE__ */ jsx5(
+      WalletOptionsDropdown,
+      {
+        address,
+        onClose: () => setShowDropdown(false),
+        disconnect: () => {
+          disconnect();
+          setShowDropdown(false);
+        },
+        triggerRef: triggerButtonRef
+      }
+    )
+  ] });
+}
 export {
-  WalletModal
+  WalletModal,
+  WalletSelector
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moveindustries/wallet-adapter-move-design",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "Movement Wallet Adapter Move Design System - WalletModal component",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -55,7 +55,7 @@
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.0.1",
     "class-variance-authority": "^0.7.1",
-    "@moveindustries/wallet-adapter-react": "7.2.3"
+    "@moveindustries/wallet-adapter-react": "7.3.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/WalletSelector.tsx

@@ -0,0 +1,347 @@
+"use client";
+
+import { useWallet } from "@moveindustries/wallet-adapter-react";
+import { useEffect, useRef, useState } from "react";
+import { WalletModal } from "./WalletModal";
+import { cn } from "./utils";
+
+function WalletIcon({
+  width = 24,
+  height = 24,
+  fill = "#002CD6",
+}: {
+  width?: number;
+  height?: number;
+  fill?: string;
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.4845 4C17.7146 4 17.9357 4.09412 18.0984 4.26242C18.2611 4.43072 18.3521 4.65942 18.3521 4.89744V7.58974H19.2197V13.2308H17.4845V9.38462H11.4113C10.721 9.38462 10.0586 9.66797 9.57051 10.1729C9.08239 10.6778 8.80845 11.3629 8.80845 12.0769C8.80845 12.791 9.08239 13.4761 9.57051 13.981C10.0586 14.4859 10.721 14.7692 11.4113 14.7692H16.5085V16.5641H11.4113C10.2608 16.5641 9.1572 16.0915 8.34366 15.25C7.53012 14.4085 7.07324 13.267 7.07324 12.0769C7.07324 10.8868 7.53012 9.74536 8.34366 8.90385C9.1572 8.06234 10.2608 7.58974 11.4113 7.58974H16.6169V5.79487H2.73521V18.359H12.5684V20.239H1.8831C1.653 20.239 1.4319 20.1449 1.26919 19.9766C1.10648 19.8083 1.01549 19.5796 1.01549 19.3415L1 4.89744C1 4.65942 1.09099 4.43072 1.2537 4.26242C1.4164 4.09412 1.6375 4 1.86761 4H17.4845Z"
+        fill={fill}
+      />
+      <path
+        d="M19.2197 14.7692V16.5641H18.3521L18.3676 19.3415C18.3676 19.5796 18.2766 19.8083 18.1139 19.9766C17.9512 20.1449 17.7301 20.239 17.5 20.239H14.0141V18.359H17.5V14.7692H19.2197Z"
+        fill={fill}
+      />
+      <path
+        d="M14.0141 12.9744H11.4113V11.1795H14.0141V12.9744Z"
+        fill={fill}
+      />
+      <path
+        d="M19.2197 18.359H23V20.239H19.2197V24H17.5V20.239H14.0141V18.359H17.5V14.7692H19.2197V18.359Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}
+
+function CaretDownIcon({
+  size = 18,
+  className,
+  color = "currentColor",
+}: {
+  size?: number;
+  className?: string;
+  color?: string;
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 9L12 15L18 9"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CopyIcon({
+  size = 14,
+  color = "currentColor",
+}: {
+  size?: number;
+  color?: string;
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function DisconnectIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MoveIcon({
+  width = 10,
+  height = 10,
+}: {
+  width?: number;
+  height?: number;
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="5" cy="5" r="5" fill="#81FFBA" />
+      <path d="M3 5L5 3L7 5L5 7L3 5Z" fill="black" />
+    </svg>
+  );
+}
+
+function reduceAddress(address: string | undefined) {
+  if (!address) return "\u2026";
+  try {
+    return `${address.slice(0, 5)}\u2026${address.slice(-4)}`;
+  } catch {
+    return address;
+  }
+}
+
+function WalletOptionsDropdown({
+  address,
+  disconnect,
+  onClose,
+  triggerRef,
+}: {
+  address: string;
+  disconnect: () => void;
+  onClose: () => void;
+  triggerRef?: React.RefObject<HTMLButtonElement | null>;
+}) {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      const isClickOutside =
+        dropdownRef.current && !dropdownRef.current.contains(target);
+      const isClickOnTrigger =
+        triggerRef?.current && triggerRef.current.contains(target);
+      if (isClickOutside && !isClickOnTrigger) {
+        onClose();
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose, triggerRef]);
+
+  const copyAddress = () => {
+    navigator.clipboard.writeText(address);
+  };
+
+  return (
+    <div className="z-9999 relative">
+      <div
+        ref={dropdownRef}
+        className="absolute top-[calc(100%+8px)] right-0 w-48 rounded-lg border border-white/10 bg-black/95 backdrop-blur-xl overflow-visible"
+      >
+        <div className="flex items-center gap-2 px-3 h-10 rounded text-[#81FFBA] font-['TWK_Everett_Mono',monospace] text-sm font-medium leading-[140%] hover:bg-white/5">
+          <WalletIcon width={14} height={14} fill="#81FFBA" />
+          <span className="flex-1">{reduceAddress(address)}</span>
+          <button
+            onClick={copyAddress}
+            className="cursor-pointer border-none bg-transparent p-0"
+          >
+            <CopyIcon size={14} color="#81FFBA" />
+          </button>
+        </div>
+        <div
+          className="group flex cursor-pointer items-center gap-2 rounded-b px-3 py-3.5 h-10 text-white/64 hover:bg-[#81FFBA] hover:text-[#00135C]"
+          onClick={disconnect}
+        >
+          <DisconnectIcon size={16} />
+          <span>disconnect</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export interface WalletSelectorProps {
+  className?: string;
+}
+
+export function WalletSelector({ className }: WalletSelectorProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const { connected, disconnect, account, wallet } = useWallet();
+  const triggerButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <div
+        className={cn(
+          "flex h-10 w-40 min-w-24 rounded-full bg-white/8 md:h-12",
+          className
+        )}
+      >
+        <div className="pointer-events-none inset-0 -z-hide h-full w-full animate-pulse overflow-hidden rounded-[inherit] bg-linear-to-r from-white/5 via-white/10 to-white/5 bg-[length:200%_100%]" />
+      </div>
+    );
+  }
+
+  if (!connected) {
+    return (
+      <>
+        <button
+          className={cn(
+            "group relative flex h-10 w-40 min-w-24 cursor-pointer items-center justify-center gap-1 overflow-hidden rounded-full border-none p-0 text-[#002CD6] transition-all duration-200 group-hover:text-black md:h-12",
+            className
+          )}
+          style={{
+            background:
+              "linear-gradient(130deg, #81FFBA 33.64%, #00FFF9 79.2%)",
+          }}
+          onClick={() => setIsModalOpen(true)}
+        >
+          <div className="absolute inset-0 rounded-full bg-white opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+          <div className="relative z-10 flex items-center justify-center gap-1">
+            <WalletIcon width={20} height={20} fill="currentColor" />
+            <span className="hidden items-center font-['TWK_Everett_Mono',monospace] text-base leading-[1.3rem] font-medium md:flex">
+              CONNECT
+            </span>
+          </div>
+        </button>
+        {isModalOpen && (
+          <WalletModal onClose={() => setIsModalOpen(false)} />
+        )}
+      </>
+    );
+  }
+
+  const address = account?.address?.toString() || "";
+
+  return (
+    <div className={cn("relative inline-block", className)}>
+      <button
+        ref={triggerButtonRef}
+        className="group flex h-10 w-24 cursor-pointer items-center justify-center gap-1 rounded-full border-none bg-white/8 pl-0 pr-0 text-white/64 transition-all duration-200 hover:bg-white hover:text-black md:h-12 md:w-50 md:pl-4 md:pr-4"
+        onClick={() => setShowDropdown(!showDropdown)}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <div className="relative group-hover:[&_svg]:text-black">
+          {wallet?.icon ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={wallet.icon}
+              alt="Wallet"
+              width={20}
+              height={20}
+              className="transition-all duration-200"
+            />
+          ) : (
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              className="text-white"
+            >
+              <path
+                d="M21 18V19C21 20.1 20.1 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.89 3 5 3H19C20.1 3 21 3.9 21 5V6H12C10.89 6 10 6.9 10 8V16C10 17.1 10.89 18 12 18H21ZM12 16H22V8H12V16ZM16 13.5C15.17 13.5 14.5 12.83 14.5 12C14.5 11.17 15.17 10.5 16 10.5C16.83 10.5 17.5 11.17 17.5 12C17.5 12.83 16.83 13.5 16 13.5Z"
+                fill="currentColor"
+              />
+            </svg>
+          )}
+          <div className="absolute -right-1 -bottom-1 rounded-full bg-black transition-all duration-200">
+            <MoveIcon width={10} height={10} />
+          </div>
+        </div>
+
+        <span className="hidden max-w-[140px] items-baseline gap-1 font-['Neue_Haas_Unica_Pro',sans-serif] text-sm leading-[1.225rem] font-medium md:inline-flex">
+          {account?.mnsName ? (
+            <>
+              <span className="truncate">{account.mnsName}</span>
+              <span className="shrink-0 -translate-y-[1px] rounded-sm bg-[#81FFBA]/15 px-1 py-0.5 font-['TWK_Everett_Mono',monospace] text-[9px] font-bold leading-none tracking-wider text-[#81FFBA]">.move</span>
+            </>
+          ) : (
+            reduceAddress(address)
+          )}
+        </span>
+
+        <CaretDownIcon
+          size={18}
+          className={`transition-transform duration-200 ${showDropdown ? "rotate-180" : ""}`}
+          color={isHovered ? "black" : "rgba(255, 255, 255, 0.64)"}
+        />
+      </button>
+      {showDropdown && (
+        <WalletOptionsDropdown
+          address={address}
+          onClose={() => setShowDropdown(false)}
+          disconnect={() => {
+            disconnect();
+            setShowDropdown(false);
+          }}
+          triggerRef={triggerButtonRef}
+        />
+      )}
+    </div>
+  );
+}

package/src/index.tsx

@@ -1,2 +1,4 @@
 export { WalletModal } from "./WalletModal";
 export type { ConnectWalletDialogProps } from "./WalletModal";
+export { WalletSelector } from "./WalletSelector";
+export type { WalletSelectorProps } from "./WalletSelector";