terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(wallet): redesign drawer wallet states to match Figma 4476-15287/15669

Browse Source 
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.
This commit is contained in:
TerryM
2026-06-05 12:22:41 +08:00
parent e73e25077e
commit 292c745549
8 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/wallet/WalletButton.tsx
View File

@@ -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 (
<div className="grid w-full gap-2">
<div className="inline-flex h-10 w-full items-center justify-center rounded-full border border-ark-gold/45 bg-ark-gold/10 px-3 text-sm font-semibold text-ark-gold2">
<span className="mr-2 h-2 w-2 rounded-full bg-emerald-400" />
{shortenAddress(wallet.address)}
<div className="flex w-full flex-col gap-1">
<div className="flex flex-col gap-2 px-4 py-3">
<div className="text-[13px] font-bold leading-[21px] text-[#E5E5E5]">
{t("walletLoginAddress")}
</div>
<div className="break-all text-[13px] leading-[21px]">
<span className="font-bold text-white">
{wallet.address.slice(0, 5)}
</span>
<span className="font-medium text-[#A8A9AE]">
{wallet.address.slice(5, -5)}
</span>
<span className="font-bold text-white">
{wallet.address.slice(-5)}
</span>
</div>
</div>
<button
type="button"
onClick={() => wallet.logout()}
className="h-10 w-full rounded-full border border-red-400/35 bg-red-500/10 px-4 text-sm font-semibold text-red-200 transition hover:bg-red-500/15"
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-[#2A1B20] px-4 text-[15px] font-medium text-[#F36161] outline-none transition hover:bg-[#3a242a] focus-visible:ring-2 focus-visible:ring-[#F36161]/60"
>
{t("walletDisconnect")}
<span>{t("walletDisconnect")}</span>
<LogOut className="h-4 w-4" strokeWidth={2.3} aria-hidden />
</button>
</div>
);
@@ -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(" ")}
>
<WalletIcon className="h-[18px] w-[18px]" />