@movebridge/react 0.0.1 → 0.2.0

package/dist/index.d.mts

@@ -340,7 +340,7 @@ declare function useWaitForTransaction(hash: string | null | undefined, options?
 
 /**
  * @movebridge/react - WalletButton component
- * Drop-in wallet connect button
+ * Drop-in wallet connect button with improved UX
  */
 /**
  * Props for WalletButton component
@@ -354,6 +354,7 @@ interface WalletButtonProps {
 /**
  * WalletButton component
  * Shows connect button when disconnected, address when connected
+ * Supports Razor, Nightly, and OKX wallets
  *
  * @example
  * ```tsx
@@ -365,7 +366,7 @@ declare function WalletButton({ className, connectText }: WalletButtonProps): re
 
 /**
  * @movebridge/react - WalletModal component
- * Modal for wallet selection
+ * Modal for wallet selection with Razor, Nightly, and OKX wallet support
  */
 /**
  * Props for WalletModal component
@@ -378,7 +379,7 @@ interface WalletModalProps {
 }
 /**
  * WalletModal component
- * Displays available wallets for selection
+ * Displays available wallets for selection with improved UX
  *
  * @example
  * ```tsx

package/dist/index.d.ts

@@ -340,7 +340,7 @@ declare function useWaitForTransaction(hash: string | null | undefined, options?
 
 /**
  * @movebridge/react - WalletButton component
- * Drop-in wallet connect button
+ * Drop-in wallet connect button with improved UX
  */
 /**
  * Props for WalletButton component
@@ -354,6 +354,7 @@ interface WalletButtonProps {
 /**
  * WalletButton component
  * Shows connect button when disconnected, address when connected
+ * Supports Razor, Nightly, and OKX wallets
  *
  * @example
  * ```tsx
@@ -365,7 +366,7 @@ declare function WalletButton({ className, connectText }: WalletButtonProps): re
 
 /**
  * @movebridge/react - WalletModal component
- * Modal for wallet selection
+ * Modal for wallet selection with Razor, Nightly, and OKX wallet support
  */
 /**
  * Props for WalletModal component
@@ -378,7 +379,7 @@ interface WalletModalProps {
 }
 /**
  * WalletModal component
- * Displays available wallets for selection
+ * Displays available wallets for selection with improved UX
  *
  * @example
  * ```tsx

package/dist/index.js

@@ -409,35 +409,48 @@ function useWaitForTransaction(hash, options) {
 }
 
 // src/components/WalletButton.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/WalletModal.tsx
+var import_react6 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var WALLET_INFO = {
-  petra: {
-    name: "Petra",
-    icon: "\u{1F98A}",
-    description: "Recommended for Movement"
-  },
-  pontem: {
-    name: "Pontem",
-    icon: "\u{1F309}",
-    description: "Multi-chain with Movement support"
+  razor: {
+    name: "Razor Wallet",
+    icon: "\u26A1",
+    description: "Secure wallet for Movement",
+    installUrl: "https://razorwallet.xyz/"
   },
   nightly: {
     name: "Nightly",
     icon: "\u{1F319}",
-    description: "Movement & Aptos wallet"
+    description: "Multi-chain Movement wallet",
+    installUrl: "https://nightly.app/"
+  },
+  okx: {
+    name: "OKX Wallet",
+    icon: "\u{1F537}",
+    description: "OKX Web3 wallet",
+    installUrl: "https://www.okx.com/web3"
   }
 };
 function WalletModal({ open, onClose }) {
   const { wallets, connect, connecting } = useMovement();
+  const [connectingWallet, setConnectingWallet] = (0, import_react6.useState)(null);
   if (!open) return null;
   const handleConnect = async (wallet) => {
+    setConnectingWallet(wallet);
     try {
       await connect(wallet);
       onClose();
     } catch {
+    } finally {
+      setConnectingWallet(null);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      onClose();
     }
   };
   const overlayStyles = {
@@ -493,88 +506,148 @@ function WalletModal({ open, onClose }) {
     marginBottom: "8px",
     transition: "all 0.2s ease"
   };
+  const walletButtonDisabledStyles = {
+    ...walletButtonStyles,
+    opacity: 0.6,
+    cursor: "not-allowed"
+  };
+  const walletButtonConnectingStyles = {
+    ...walletButtonStyles,
+    backgroundColor: "#f3f4f6",
+    borderColor: "#6366f1"
+  };
   const emptyStyles = {
     textAlign: "center",
     color: "#6b7280",
     padding: "20px"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: overlayStyles, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: modalStyles, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: headerStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { style: titleStyles, children: "Connect Wallet" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: closeButtonStyles, onClick: onClose, children: "\xD7" })
-    ] }),
-    wallets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: emptyStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginBottom: "12px" }, children: "No wallets detected." }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: { marginBottom: "16px" }, children: [
-        "Install a wallet that supports ",
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "Movement Network" }),
-        ":"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "a",
-          {
-            href: "https://petra.app/",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            style: {
-              display: "inline-block",
-              padding: "8px 16px",
-              backgroundColor: "#4f46e5",
-              color: "white",
-              borderRadius: "6px",
-              textDecoration: "none",
-              fontSize: "14px"
-            },
-            children: "\u{1F98A} Get Petra (Recommended)"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "a",
+  const installLinkStyles = {
+    display: "inline-block",
+    padding: "10px 16px",
+    backgroundColor: "#6366f1",
+    color: "white",
+    borderRadius: "8px",
+    textDecoration: "none",
+    fontSize: "14px",
+    fontWeight: 500,
+    transition: "background-color 0.2s ease"
+  };
+  const getButtonStyle = (wallet) => {
+    if (connectingWallet === wallet) return walletButtonConnectingStyles;
+    if (connecting) return walletButtonDisabledStyles;
+    return walletButtonStyles;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: overlayStyles,
+      onClick: onClose,
+      onKeyDown: handleKeyDown,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "wallet-modal-title",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: modalStyles, onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: headerStyles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { id: "wallet-modal-title", style: titleStyles, children: "Connect Wallet" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              style: closeButtonStyles,
+              onClick: onClose,
+              "aria-label": "Close wallet modal",
+              children: "\xD7"
+            }
+          )
+        ] }),
+        wallets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: emptyStyles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginBottom: "12px" }, children: "No wallets detected." }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: { marginBottom: "16px" }, children: [
+            "Install a wallet that supports ",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "Movement Network" }),
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "a",
+              {
+                href: WALLET_INFO.razor.installUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: installLinkStyles,
+                "aria-label": "Install Razor Wallet",
+                children: [
+                  WALLET_INFO.razor.icon,
+                  " Get ",
+                  WALLET_INFO.razor.name
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "a",
+              {
+                href: WALLET_INFO.nightly.installUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: installLinkStyles,
+                "aria-label": "Install Nightly Wallet",
+                children: [
+                  WALLET_INFO.nightly.icon,
+                  " Get ",
+                  WALLET_INFO.nightly.name
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "a",
+              {
+                href: WALLET_INFO.okx.installUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: installLinkStyles,
+                "aria-label": "Install OKX Wallet",
+                children: [
+                  WALLET_INFO.okx.icon,
+                  " Get ",
+                  WALLET_INFO.okx.name
+                ]
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { role: "list", "aria-label": "Available wallets", children: wallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
           {
-            href: "https://pontem.network/pontem-wallet",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            style: {
-              display: "inline-block",
-              padding: "8px 16px",
-              backgroundColor: "#6366f1",
-              color: "white",
-              borderRadius: "6px",
-              textDecoration: "none",
-              fontSize: "14px"
-            },
-            children: "\u{1F309} Get Pontem"
-          }
-        )
+            style: getButtonStyle(wallet),
+            onClick: () => handleConnect(wallet),
+            disabled: connecting,
+            role: "listitem",
+            "aria-label": `Connect to ${WALLET_INFO[wallet].name}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "24px" }, "aria-hidden": "true", children: connectingWallet === wallet ? "\u23F3" : WALLET_INFO[wallet].icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { textAlign: "left", flex: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontWeight: 500 }, children: [
+                  WALLET_INFO[wallet].name,
+                  connectingWallet === wallet && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { marginLeft: "8px", fontSize: "12px", color: "#6366f1" }, children: "Connecting..." })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: "12px", color: "#6b7280" }, children: WALLET_INFO[wallet].description })
+              ] })
+            ]
+          },
+          wallet
+        )) })
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: wallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      "button",
-      {
-        style: walletButtonStyles,
-        onClick: () => handleConnect(wallet),
-        disabled: connecting,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "24px" }, children: WALLET_INFO[wallet].icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { textAlign: "left" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: WALLET_INFO[wallet].name }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: "12px", color: "#6b7280" }, children: WALLET_INFO[wallet].description })
-          ] })
-        ]
-      },
-      wallet
-    )) })
-  ] }) });
+    }
+  );
 }
 
 // src/components/WalletButton.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function truncateAddress(address) {
+  if (address.length <= 10) return address;
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
 function WalletButton({ className = "", connectText = "Connect Wallet" }) {
   const { address, connected, connecting, disconnect } = useMovement();
-  const [modalOpen, setModalOpen] = (0, import_react6.useState)(false);
+  const [modalOpen, setModalOpen] = (0, import_react7.useState)(false);
   const baseStyles = {
     padding: "10px 20px",
     borderRadius: "8px",
@@ -582,7 +655,11 @@ function WalletButton({ className = "", connectText = "Connect Wallet" }) {
     cursor: "pointer",
     fontSize: "14px",
     fontWeight: 500,
-    transition: "all 0.2s ease"
+    transition: "all 0.2s ease",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px"
   };
   const connectedStyles = {
     ...baseStyles,
@@ -594,15 +671,49 @@ function WalletButton({ className = "", connectText = "Connect Wallet" }) {
     backgroundColor: "#6366f1",
     color: "white"
   };
+  const connectingStyles = {
+    ...baseStyles,
+    backgroundColor: "#818cf8",
+    color: "white",
+    cursor: "wait"
+  };
   if (connected && address) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
       {
         className,
         style: connectedStyles,
         onClick: disconnect,
         title: "Click to disconnect",
-        children: truncateAddress(address)
+        "aria-label": `Connected as ${truncateAddress(address)}. Click to disconnect.`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: {
+            width: "8px",
+            height: "8px",
+            borderRadius: "50%",
+            backgroundColor: "#22c55e",
+            display: "inline-block"
+          }, "aria-hidden": "true" }),
+          truncateAddress(address)
+        ]
+      }
+    );
+  }
+  if (connecting) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        className,
+        style: connectingStyles,
+        disabled: true,
+        "aria-label": "Connecting to wallet",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: {
+            display: "inline-block",
+            animation: "spin 1s linear infinite"
+          }, "aria-hidden": "true", children: "\u23F3" }),
+          "Connecting..."
+        ]
       }
     );
   }
@@ -613,8 +724,8 @@ function WalletButton({ className = "", connectText = "Connect Wallet" }) {
         className,
         style: disconnectedStyles,
         onClick: () => setModalOpen(true),
-        disabled: connecting,
-        children: connecting ? "Connecting..." : connectText
+        "aria-label": connectText,
+        children: connectText
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WalletModal, { open: modalOpen, onClose: () => setModalOpen(false) })
@@ -622,7 +733,7 @@ function WalletButton({ className = "", connectText = "Connect Wallet" }) {
 }
 
 // src/components/AddressDisplay.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function truncateAddress2(address, startChars = 6, endChars = 4) {
   if (address.length <= startChars + endChars + 3) {
@@ -636,8 +747,8 @@ function AddressDisplay({
   copyable = true,
   className = ""
 }) {
-  const [copied, setCopied] = (0, import_react7.useState)(false);
-  const handleCopy = (0, import_react7.useCallback)(async () => {
+  const [copied, setCopied] = (0, import_react8.useState)(false);
+  const handleCopy = (0, import_react8.useCallback)(async () => {
     try {
       await navigator.clipboard.writeText(address);
       setCopied(true);

package/dist/index.mjs

@@ -375,35 +375,48 @@ function useWaitForTransaction(hash, options) {
 }
 
 // src/components/WalletButton.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 
 // src/components/WalletModal.tsx
+import { useState as useState6 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var WALLET_INFO = {
-  petra: {
-    name: "Petra",
-    icon: "\u{1F98A}",
-    description: "Recommended for Movement"
-  },
-  pontem: {
-    name: "Pontem",
-    icon: "\u{1F309}",
-    description: "Multi-chain with Movement support"
+  razor: {
+    name: "Razor Wallet",
+    icon: "\u26A1",
+    description: "Secure wallet for Movement",
+    installUrl: "https://razorwallet.xyz/"
   },
   nightly: {
     name: "Nightly",
     icon: "\u{1F319}",
-    description: "Movement & Aptos wallet"
+    description: "Multi-chain Movement wallet",
+    installUrl: "https://nightly.app/"
+  },
+  okx: {
+    name: "OKX Wallet",
+    icon: "\u{1F537}",
+    description: "OKX Web3 wallet",
+    installUrl: "https://www.okx.com/web3"
   }
 };
 function WalletModal({ open, onClose }) {
   const { wallets, connect, connecting } = useMovement();
+  const [connectingWallet, setConnectingWallet] = useState6(null);
   if (!open) return null;
   const handleConnect = async (wallet) => {
+    setConnectingWallet(wallet);
     try {
       await connect(wallet);
       onClose();
     } catch {
+    } finally {
+      setConnectingWallet(null);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      onClose();
     }
   };
   const overlayStyles = {
@@ -459,88 +472,148 @@ function WalletModal({ open, onClose }) {
     marginBottom: "8px",
     transition: "all 0.2s ease"
   };
+  const walletButtonDisabledStyles = {
+    ...walletButtonStyles,
+    opacity: 0.6,
+    cursor: "not-allowed"
+  };
+  const walletButtonConnectingStyles = {
+    ...walletButtonStyles,
+    backgroundColor: "#f3f4f6",
+    borderColor: "#6366f1"
+  };
   const emptyStyles = {
     textAlign: "center",
     color: "#6b7280",
     padding: "20px"
   };
-  return /* @__PURE__ */ jsx2("div", { style: overlayStyles, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: modalStyles, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
-      /* @__PURE__ */ jsx2("h2", { style: titleStyles, children: "Connect Wallet" }),
-      /* @__PURE__ */ jsx2("button", { style: closeButtonStyles, onClick: onClose, children: "\xD7" })
-    ] }),
-    wallets.length === 0 ? /* @__PURE__ */ jsxs("div", { style: emptyStyles, children: [
-      /* @__PURE__ */ jsx2("p", { style: { marginBottom: "12px" }, children: "No wallets detected." }),
-      /* @__PURE__ */ jsxs("p", { style: { marginBottom: "16px" }, children: [
-        "Install a wallet that supports ",
-        /* @__PURE__ */ jsx2("strong", { children: "Movement Network" }),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
-        /* @__PURE__ */ jsx2(
-          "a",
-          {
-            href: "https://petra.app/",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            style: {
-              display: "inline-block",
-              padding: "8px 16px",
-              backgroundColor: "#4f46e5",
-              color: "white",
-              borderRadius: "6px",
-              textDecoration: "none",
-              fontSize: "14px"
-            },
-            children: "\u{1F98A} Get Petra (Recommended)"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "a",
+  const installLinkStyles = {
+    display: "inline-block",
+    padding: "10px 16px",
+    backgroundColor: "#6366f1",
+    color: "white",
+    borderRadius: "8px",
+    textDecoration: "none",
+    fontSize: "14px",
+    fontWeight: 500,
+    transition: "background-color 0.2s ease"
+  };
+  const getButtonStyle = (wallet) => {
+    if (connectingWallet === wallet) return walletButtonConnectingStyles;
+    if (connecting) return walletButtonDisabledStyles;
+    return walletButtonStyles;
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: overlayStyles,
+      onClick: onClose,
+      onKeyDown: handleKeyDown,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "wallet-modal-title",
+      children: /* @__PURE__ */ jsxs("div", { style: modalStyles, onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
+          /* @__PURE__ */ jsx2("h2", { id: "wallet-modal-title", style: titleStyles, children: "Connect Wallet" }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              style: closeButtonStyles,
+              onClick: onClose,
+              "aria-label": "Close wallet modal",
+              children: "\xD7"
+            }
+          )
+        ] }),
+        wallets.length === 0 ? /* @__PURE__ */ jsxs("div", { style: emptyStyles, children: [
+          /* @__PURE__ */ jsx2("p", { style: { marginBottom: "12px" }, children: "No wallets detected." }),
+          /* @__PURE__ */ jsxs("p", { style: { marginBottom: "16px" }, children: [
+            "Install a wallet that supports ",
+            /* @__PURE__ */ jsx2("strong", { children: "Movement Network" }),
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: WALLET_INFO.razor.installUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: installLinkStyles,
+                "aria-label": "Install Razor Wallet",
+                children: [
+                  WALLET_INFO.razor.icon,
+                  " Get ",
+                  WALLET_INFO.razor.name
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: WALLET_INFO.nightly.installUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: installLinkStyles,
+                "aria-label": "Install Nightly Wallet",
+                children: [
+                  WALLET_INFO.nightly.icon,
+                  " Get ",
+                  WALLET_INFO.nightly.name
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: WALLET_INFO.okx.installUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: installLinkStyles,
+                "aria-label": "Install OKX Wallet",
+                children: [
+                  WALLET_INFO.okx.icon,
+                  " Get ",
+                  WALLET_INFO.okx.name
+                ]
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsx2("div", { role: "list", "aria-label": "Available wallets", children: wallets.map((wallet) => /* @__PURE__ */ jsxs(
+          "button",
           {
-            href: "https://pontem.network/pontem-wallet",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            style: {
-              display: "inline-block",
-              padding: "8px 16px",
-              backgroundColor: "#6366f1",
-              color: "white",
-              borderRadius: "6px",
-              textDecoration: "none",
-              fontSize: "14px"
-            },
-            children: "\u{1F309} Get Pontem"
-          }
-        )
+            style: getButtonStyle(wallet),
+            onClick: () => handleConnect(wallet),
+            disabled: connecting,
+            role: "listitem",
+            "aria-label": `Connect to ${WALLET_INFO[wallet].name}`,
+            children: [
+              /* @__PURE__ */ jsx2("span", { style: { fontSize: "24px" }, "aria-hidden": "true", children: connectingWallet === wallet ? "\u23F3" : WALLET_INFO[wallet].icon }),
+              /* @__PURE__ */ jsxs("div", { style: { textAlign: "left", flex: 1 }, children: [
+                /* @__PURE__ */ jsxs("div", { style: { fontWeight: 500 }, children: [
+                  WALLET_INFO[wallet].name,
+                  connectingWallet === wallet && /* @__PURE__ */ jsx2("span", { style: { marginLeft: "8px", fontSize: "12px", color: "#6366f1" }, children: "Connecting..." })
+                ] }),
+                /* @__PURE__ */ jsx2("div", { style: { fontSize: "12px", color: "#6b7280" }, children: WALLET_INFO[wallet].description })
+              ] })
+            ]
+          },
+          wallet
+        )) })
       ] })
-    ] }) : /* @__PURE__ */ jsx2("div", { children: wallets.map((wallet) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        style: walletButtonStyles,
-        onClick: () => handleConnect(wallet),
-        disabled: connecting,
-        children: [
-          /* @__PURE__ */ jsx2("span", { style: { fontSize: "24px" }, children: WALLET_INFO[wallet].icon }),
-          /* @__PURE__ */ jsxs("div", { style: { textAlign: "left" }, children: [
-            /* @__PURE__ */ jsx2("div", { children: WALLET_INFO[wallet].name }),
-            /* @__PURE__ */ jsx2("div", { style: { fontSize: "12px", color: "#6b7280" }, children: WALLET_INFO[wallet].description })
-          ] })
-        ]
-      },
-      wallet
-    )) })
-  ] }) });
+    }
+  );
 }
 
 // src/components/WalletButton.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function truncateAddress(address) {
+  if (address.length <= 10) return address;
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
 function WalletButton({ className = "", connectText = "Connect Wallet" }) {
   const { address, connected, connecting, disconnect } = useMovement();
-  const [modalOpen, setModalOpen] = useState6(false);
+  const [modalOpen, setModalOpen] = useState7(false);
   const baseStyles = {
     padding: "10px 20px",
     borderRadius: "8px",
@@ -548,7 +621,11 @@ function WalletButton({ className = "", connectText = "Connect Wallet" }) {
     cursor: "pointer",
     fontSize: "14px",
     fontWeight: 500,
-    transition: "all 0.2s ease"
+    transition: "all 0.2s ease",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px"
   };
   const connectedStyles = {
     ...baseStyles,
@@ -560,15 +637,49 @@ function WalletButton({ className = "", connectText = "Connect Wallet" }) {
     backgroundColor: "#6366f1",
     color: "white"
   };
+  const connectingStyles = {
+    ...baseStyles,
+    backgroundColor: "#818cf8",
+    color: "white",
+    cursor: "wait"
+  };
   if (connected && address) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsxs2(
       "button",
       {
         className,
         style: connectedStyles,
         onClick: disconnect,
         title: "Click to disconnect",
-        children: truncateAddress(address)
+        "aria-label": `Connected as ${truncateAddress(address)}. Click to disconnect.`,
+        children: [
+          /* @__PURE__ */ jsx3("span", { style: {
+            width: "8px",
+            height: "8px",
+            borderRadius: "50%",
+            backgroundColor: "#22c55e",
+            display: "inline-block"
+          }, "aria-hidden": "true" }),
+          truncateAddress(address)
+        ]
+      }
+    );
+  }
+  if (connecting) {
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        className,
+        style: connectingStyles,
+        disabled: true,
+        "aria-label": "Connecting to wallet",
+        children: [
+          /* @__PURE__ */ jsx3("span", { style: {
+            display: "inline-block",
+            animation: "spin 1s linear infinite"
+          }, "aria-hidden": "true", children: "\u23F3" }),
+          "Connecting..."
+        ]
       }
     );
   }
@@ -579,8 +690,8 @@ function WalletButton({ className = "", connectText = "Connect Wallet" }) {
         className,
         style: disconnectedStyles,
         onClick: () => setModalOpen(true),
-        disabled: connecting,
-        children: connecting ? "Connecting..." : connectText
+        "aria-label": connectText,
+        children: connectText
       }
     ),
     /* @__PURE__ */ jsx3(WalletModal, { open: modalOpen, onClose: () => setModalOpen(false) })
@@ -588,7 +699,7 @@ function WalletButton({ className = "", connectText = "Connect Wallet" }) {
 }
 
 // src/components/AddressDisplay.tsx
-import { useState as useState7, useCallback as useCallback5 } from "react";
+import { useState as useState8, useCallback as useCallback5 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function truncateAddress2(address, startChars = 6, endChars = 4) {
   if (address.length <= startChars + endChars + 3) {
@@ -602,7 +713,7 @@ function AddressDisplay({
   copyable = true,
   className = ""
 }) {
-  const [copied, setCopied] = useState7(false);
+  const [copied, setCopied] = useState8(false);
   const handleCopy = useCallback5(async () => {
     try {
       await navigator.clipboard.writeText(address);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movebridge/react",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "React hooks and components for Movement Network",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -16,7 +16,7 @@
     "dist"
   ],
   "dependencies": {
-    "@movebridge/core": "0.0.1"
+    "@movebridge/core": "0.2.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.0",