.unipi/docs/fix/2026-06-03-wallet-icon-figma-fix.md

@@ -0,0 +1,30 @@
+---
+title: "Wallet CTA — swap lucide outline for Figma filled glyph"
+type: quick-fix
+date: 2026-06-03
+---
+
+# Wallet CTA — swap lucide outline for Figma filled glyph
+
+## Bug
+The 链接钱包 CTA in the mobile drawer (and in the header on desktop while logged out) was using the `Wallet` outline icon from `lucide-react`, which doesn't match the filled wallet glyph in Figma `4414:12829`.
+
+## Root Cause
+`WalletButton` imported `lucide-react`'s outline `Wallet` and rendered it with `strokeWidth={2.5}`. Figma's wallet glyph is a solid filled shape with a dot, not an outline.
+
+## Fix
+Created a local `WalletIcon` component from the exact Figma 24x24 path. The path uses `fill="currentColor"` so callers control the paint via Tailwind `text-…` utilities (currently `text-black` on the yellow CTA, matching Figma's `#08070C` fill).
+
+### Files Modified
+- `src/components/icons/WalletIcon.tsx` (new) — Figma 4414:12829 path as a React SVG component.
+- `src/wallet/WalletButton.tsx` — drop the `Wallet` import from `lucide-react`, import `WalletIcon`, render it at `h-[18px] w-[18px]` to match the Figma 18x18 inner glyph size inside the 24x24 icon slot.
+
+## Verification
+- `npx tsc --noEmit` — clean.
+- `npm run format` then `npm run format:check` — clean.
+- `npm test` — 49/49 passing.
+- Expected visual: yellow `链接钱包` CTA now shows the filled Figma wallet glyph in dark (`text-black` resolves `currentColor`), matching the design.
+
+## Notes
+- `currentColor` keeps the icon themable. If a future surface needs the wallet glyph in gold or white, the caller just changes the parent `text-…` utility.
+- The lucide `Wallet` import was removed from `WalletButton.tsx`; `Heart` stays because the wallet dropdown still uses it for the favorites entry.

src/components/icons/WalletIcon.tsx

@@ -0,0 +1,27 @@
+import type { SVGProps } from "react";
+
+/**
+ * Figma wallet glyph (`4414:12829`). Filled body so it reads as a solid mark
+ * on the yellow CTA button. Uses `currentColor` so callers control the
+ * paint via `text-…` utilities.
+ */
+export function WalletIcon({
+  className = "h-4 w-4",
+  ...rest
+}: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={className}
+      {...rest}
+    >
+      <path
+        d="M20.0725 7.93967H6.22476C5.86926 7.93967 5.58191 7.64444 5.58191 7.28069C5.58191 6.91693 5.86926 6.62171 6.22476 6.62171H17.521V4.15053C17.521 3.79929 17.3674 3.47178 17.1 3.25234C16.8313 3.03158 16.4835 2.95185 16.1518 3.02829L4.06991 5.80918C3.55498 5.9278 3.19434 6.38975 3.19434 6.93143V19.8494C3.19434 20.4834 3.69769 21 4.31612 21H20.0725C20.691 21 21.1943 20.484 21.1943 19.8494V9.08959C21.1943 8.45565 20.691 7.93967 20.0725 7.93967ZM18.0482 15.6445C17.4471 15.6445 16.9585 15.143 16.9585 14.5268C16.9585 13.9107 17.4478 13.4092 18.0482 13.4092C18.6499 13.4092 19.1385 13.9107 19.1385 14.5268C19.1385 15.143 18.6499 15.6445 18.0482 15.6445Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

src/wallet/WalletButton.tsx

@@ -1,6 +1,7 @@
-import { Heart, Wallet } from "lucide-react";
+import { Heart } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
+import { WalletIcon } from "../components/icons/WalletIcon";
 import { useI18n } from "../i18n";
 import { useLocalizedPath } from "../useLocalizedPath";
 import { shortenAddress, useWallet } from "./WalletProvider";
@@ -111,7 +112,7 @@ export function WalletButton({
         compact ? "w-full" : "min-w-[124px] shrink-0 whitespace-nowrap",
       ].join(" ")}
     >
-      <Wallet className="h-4 w-4" strokeWidth={2.5} aria-hidden />
+      <WalletIcon className="h-[18px] w-[18px]" />
       <span>
         {wallet.status === "loading" ? t("loading") : t("walletConnect")}
       </span>