diff --git a/.unipi/docs/fix/2026-06-03-wallet-icon-figma-fix.md b/.unipi/docs/fix/2026-06-03-wallet-icon-figma-fix.md new file mode 100644 index 0000000..649e4e7 --- /dev/null +++ b/.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. diff --git a/src/components/icons/WalletIcon.tsx b/src/components/icons/WalletIcon.tsx new file mode 100644 index 0000000..7fa00db --- /dev/null +++ b/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) { + return ( + + ); +} diff --git a/src/wallet/WalletButton.tsx b/src/wallet/WalletButton.tsx index 83c18b1..2beb350 100644 --- a/src/wallet/WalletButton.tsx +++ b/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.status === "loading" ? t("loading") : t("walletConnect")}