feat: simplify wallet login options

src/wallet/WalletBrandIcon.tsx

@@ -1,11 +1,8 @@
 import type { WalletKind } from "./injected";
 
-type Brand = { bg: string; label: string };
-
-const brands: Record<WalletKind, Brand> = {
-  tokenPocket: { bg: "#2980FE", label: "TP" },
-  metaMask: { bg: "#F6851B", label: "M" },
-  imToken: { bg: "#11C4D1", label: "im" },
+const logos: Partial<Record<WalletKind, string>> = {
+  tokenPocket: "/assets/ark-library/wallets/tokenpocket.svg",
+  imToken: "/assets/ark-library/wallets/imtoken.svg",
 };
 
 export function WalletBrandIcon({
@@ -15,14 +12,17 @@ export function WalletBrandIcon({
   kind: WalletKind;
   size?: number;
 }) {
-  const brand = brands[kind];
+  const logo = logos[kind];
+  if (!logo) return null;
+
   return (
-    <span
+    <img
+      src={logo}
+      alt=""
       aria-hidden="true"
-      style={{ width: size, height: size, backgroundColor: brand.bg }}
-      className="inline-flex shrink-0 items-center justify-center rounded-lg text-[11px] font-bold leading-none text-white"
-    >
-      {brand.label}
-    </span>
+      width={size}
+      height={size}
+      className="inline-flex shrink-0 rounded-lg"
+    />
   );
 }