From 292c7455491029a2a863eedb9806018fa96e229e Mon Sep 17 00:00:00 2001 From: TerryM Date: Fri, 5 Jun 2026 12:22:41 +0800 Subject: [PATCH] feat(wallet): redesign drawer wallet states to match Figma 4476-15287/15669 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Disconnected state (Figma 4476-15287): bump the compact CTA to the spec'd dimensions — h-12 (48px), text-[15px], font-medium — so the yellow 链接钱包 button matches the Figma pill exactly while leaving the desktop header pill (compact=false) untouched. Connected state (Figma 4476-15669/16024): rebuild the compact branch as the spec'd info card + danger button: - A transparent 登录地址 label (text-[13px] font-bold #E5E5E5) with an 8px gap to the full 0x… address, which uses Figma's character-level styling: first 5 and last 5 chars rendered bold white, middle 32 chars rendered #A8A9AE / font-medium, replicating Figma's characterStyleOverrides. - A full-width 48px disconnect pill at bg-[#2A1B20] with #F36161 text and the LogOut glyph on the right at 15px font-medium. Add a new walletLoginAddress i18n key across all 7 locales (en, zh-CN, ja, ko, vi, id, ms) for the new 登录地址 label. --- src/locales/en.ts | 1 + src/locales/id.ts | 1 + src/locales/ja.ts | 1 + src/locales/ko.ts | 1 + src/locales/ms.ts | 1 + src/locales/vi.ts | 1 + src/locales/zh-CN.ts | 1 + src/wallet/WalletButton.tsx | 33 ++++++++++++++++++++++++--------- 8 files changed, 31 insertions(+), 9 deletions(-) diff --git a/src/locales/en.ts b/src/locales/en.ts index 95cdf62..c3e97cf 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -176,6 +176,7 @@ export const enDict: Dict = { close: "Close", walletConnect: "Connect Wallet", walletConnectedAs: "Connected wallet", + walletLoginAddress: "Login address", walletDisconnect: "Disconnect", walletLoginTitle: "Connect wallet", walletLoginDesc: diff --git a/src/locales/id.ts b/src/locales/id.ts index c240f0c..2111f0d 100644 --- a/src/locales/id.ts +++ b/src/locales/id.ts @@ -176,6 +176,7 @@ export const idDict: Dict = { close: "Tutup", walletConnect: "Hubungkan Dompet", walletConnectedAs: "Dompet terhubung", + walletLoginAddress: "Alamat login", walletDisconnect: "Putuskan", walletLoginTitle: "Hubungkan dompet", walletLoginDesc: diff --git a/src/locales/ja.ts b/src/locales/ja.ts index f6d0015..0eedd3a 100644 --- a/src/locales/ja.ts +++ b/src/locales/ja.ts @@ -175,6 +175,7 @@ export const jaDict: Dict = { close: "閉じる", walletConnect: "ウォレット接続", walletConnectedAs: "接続中のウォレット", + walletLoginAddress: "ログインアドレス", walletDisconnect: "切断", walletLoginTitle: "ウォレットを接続", walletLoginDesc: diff --git a/src/locales/ko.ts b/src/locales/ko.ts index 7142e4c..17a8f73 100644 --- a/src/locales/ko.ts +++ b/src/locales/ko.ts @@ -174,6 +174,7 @@ export const koDict: Dict = { close: "닫기", walletConnect: "지갑 연결", walletConnectedAs: "연결된 지갑", + walletLoginAddress: "로그인 주소", walletDisconnect: "연결 해제", walletLoginTitle: "지갑 연결", walletLoginDesc: diff --git a/src/locales/ms.ts b/src/locales/ms.ts index ceb109b..69d482d 100644 --- a/src/locales/ms.ts +++ b/src/locales/ms.ts @@ -174,6 +174,7 @@ export const msDict: Dict = { close: "Tutup", walletConnect: "Sambung Dompet", walletConnectedAs: "Dompet disambungkan", + walletLoginAddress: "Alamat log masuk", walletDisconnect: "Putuskan", walletLoginTitle: "Sambung dompet", walletLoginDesc: diff --git a/src/locales/vi.ts b/src/locales/vi.ts index 61a985d..ebd3e2c 100644 --- a/src/locales/vi.ts +++ b/src/locales/vi.ts @@ -173,6 +173,7 @@ export const viDict: Dict = { close: "Đóng", walletConnect: "Kết nối ví", walletConnectedAs: "Ví đã kết nối", + walletLoginAddress: "Địa chỉ đăng nhập", walletDisconnect: "Ngắt kết nối", walletLoginTitle: "Kết nối ví", walletLoginDesc: diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index cde1b97..d0a3791 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -167,6 +167,7 @@ export const zhDict: Dict = { close: "关闭", walletConnect: "连接钱包", walletConnectedAs: "已连接钱包", + walletLoginAddress: "登录地址", walletDisconnect: "断开连接", walletLoginTitle: "连接钱包", walletLoginDesc: "签名验证钱包地址，不会发起交易，也不需要 Gas。", diff --git a/src/wallet/WalletButton.tsx b/src/wallet/WalletButton.tsx index 2beb350..a6ce384 100644 --- a/src/wallet/WalletButton.tsx +++ b/src/wallet/WalletButton.tsx @@ -1,4 +1,4 @@ -import { Heart } from "lucide-react"; +import { Heart, LogOut } from "lucide-react"; import { useEffect, useRef, useState } from "react"; import { Link } from "react-router-dom"; import { WalletIcon } from "../components/icons/WalletIcon"; @@ -40,17 +40,30 @@ export function WalletButton({ if (wallet.status === "loggedIn" && wallet.address) { if (compact) { return ( -
-
- - {shortenAddress(wallet.address)} +
+
+
+ {t("walletLoginAddress")} +
+
+ + {wallet.address.slice(0, 5)} + + + {wallet.address.slice(5, -5)} + + + {wallet.address.slice(-5)} + +
); @@ -108,8 +121,10 @@ export function WalletButton({ wallet.openLoginModal(); }} className={[ - "inline-flex h-10 items-center justify-center gap-2 rounded-full border border-ark-gold bg-ark-gold px-4 text-sm font-bold text-black outline-none transition hover:bg-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg", - compact ? "w-full" : "min-w-[124px] shrink-0 whitespace-nowrap", + "inline-flex items-center justify-center gap-2 rounded-full border border-ark-gold bg-ark-gold px-4 text-black outline-none transition hover:bg-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg", + compact + ? "h-12 w-full text-[15px] font-medium" + : "h-10 min-w-[124px] shrink-0 whitespace-nowrap text-sm font-bold", ].join(" ")} >