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:

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:

src/locales/ja.ts

@@ -175,6 +175,7 @@ export const jaDict: Dict = {
   close: "閉じる",
   walletConnect: "ウォレット接続",
   walletConnectedAs: "接続中のウォレット",
+  walletLoginAddress: "ログインアドレス",
   walletDisconnect: "切断",
   walletLoginTitle: "ウォレットを接続",
   walletLoginDesc:

src/locales/ko.ts

@@ -174,6 +174,7 @@ export const koDict: Dict = {
   close: "닫기",
   walletConnect: "지갑 연결",
   walletConnectedAs: "연결된 지갑",
+  walletLoginAddress: "로그인 주소",
   walletDisconnect: "연결 해제",
   walletLoginTitle: "지갑 연결",
   walletLoginDesc:

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:

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:

src/locales/zh-CN.ts

@@ -167,6 +167,7 @@ export const zhDict: Dict = {
   close: "关闭",
   walletConnect: "连接钱包",
   walletConnectedAs: "已连接钱包",
+  walletLoginAddress: "登录地址",
   walletDisconnect: "断开连接",
   walletLoginTitle: "连接钱包",
   walletLoginDesc: "签名验证钱包地址，不会发起交易，也不需要 Gas。",

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 (
-        <div className="grid w-full gap-2">
+        <div className="flex w-full flex-col gap-1">
-          <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">
+          <div className="flex flex-col gap-2 px-4 py-3">
-            <span className="mr-2 h-2 w-2 rounded-full bg-emerald-400" />
+            <div className="text-[13px] font-bold leading-[21px] text-[#E5E5E5]">
-            {shortenAddress(wallet.address)}
+              {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",
+        "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 ? "w-full" : "min-w-[124px] shrink-0 whitespace-nowrap",
+        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]" />