From 803d3d57c198093a2559546ad977377e7d6f3891 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Tue, 2 Jun 2026 21:25:05 +0800
Subject: [PATCH] refactor(wallet): use unified rainbowkit login

---
 src/layouts/PublicLayout.tsx    |   8 +-
 src/wallet/WalletLoginModal.tsx | 323 ++++++++------------------------
 src/wallet/injected.ts          | 144 ++++++++++++--
 3 files changed, 219 insertions(+), 256 deletions(-)

diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index bb194c0..39cb841 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -806,7 +806,7 @@ export function PublicLayout() {
       </main>
 
       <nav className="fixed inset-x-0 bottom-0 z-40 select-none bg-[#0C0D0F]/95 pb-[max(env(safe-area-inset-bottom),0px)] backdrop-blur md:hidden">
-        <div className="grid h-[68px] grid-cols-3 gap-3 px-5 py-[10px] text-center text-[11px] leading-[17.6px]">
+        <div className="grid h-[68px] grid-cols-4 gap-2 px-4 py-[10px] text-center text-[11px] leading-[17.6px]">
           <BottomNavIcon
             to={homePath}
             label={t("home")}
@@ -822,6 +822,12 @@ export function PublicLayout() {
               !new URLSearchParams(search).get("sort")
             }
           />
+          <BottomNavIcon
+            to={lp("/favorites")}
+            label={t("favorites")}
+            icon="bookmark"
+            active={na("favorites")}
+          />
           <BottomNavIcon
             to={popularHref}
             label={t("popular")}
diff --git a/src/wallet/WalletLoginModal.tsx b/src/wallet/WalletLoginModal.tsx
index bfef98f..562e711 100644
--- a/src/wallet/WalletLoginModal.tsx
+++ b/src/wallet/WalletLoginModal.tsx
@@ -1,47 +1,26 @@
 import { QRCodeSVG } from "qrcode.react";
-import { ChevronLeft, ChevronRight, LoaderCircle, X } from "lucide-react";
+import { LoaderCircle, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useI18n } from "../i18n";
-
-import { openWalletDeepLink } from "./deepLinks";
-import { getInjectedWallet, type WalletKind } from "./injected";
+import type { WalletKind } from "./injected";
 import { useWallet } from "./WalletProvider";
 import { useWalletConnectLogin } from "./useWalletConnectLogin";
 import { WalletBrandIcon } from "./WalletBrandIcon";
 
-type ModalState = "idle" | "signing";
-type Step = "wallet" | "method";
-
 const wallets: WalletKind[] = ["tokenPocket", "metaMask", "imToken"];
 
 function isMobileDevice(): boolean {
   if (typeof navigator === "undefined") return false;
-  const ua = navigator.userAgent || "";
-  if (
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(
-      ua,
-    )
-  ) {
-    return true;
-  }
-  // iPadOS 13+ reports a desktop "Macintosh" UA. A genuine touch-primary iPad
-  // exposes a coarse pointer; a Mac (even with a touch peripheral) keeps a fine
-  // pointer, so it stays on the desktop flow instead of the wallet-app jump.
-  const coarsePointer =
-    typeof window !== "undefined" &&
-    typeof window.matchMedia === "function" &&
-    window.matchMedia("(pointer: coarse)").matches;
-  return /Macintosh/i.test(ua) && navigator.maxTouchPoints > 1 && coarsePointer;
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(
+    navigator.userAgent || "",
+  );
 }
 
 export function WalletLoginModal() {
   const { t } = useI18n();
-  const { closeLoginModal, loginModalOpen, signInInjected } = useWallet();
+  const { closeLoginModal, loginModalOpen } = useWallet();
   const wc = useWalletConnectLogin();
-  const [step, setStep] = useState<Step>("wallet");
   const [selected, setSelected] = useState<WalletKind | null>(null);
-  const [state, setState] = useState<ModalState>("idle");
-  const [error, setError] = useState("");
   const [mobileDevice, setMobileDevice] = useState(false);
 
   const resetWalletConnect = wc.reset;
@@ -49,74 +28,34 @@ export function WalletLoginModal() {
   useEffect(() => {
     if (!loginModalOpen) return;
     setMobileDevice(isMobileDevice());
-    setStep("wallet");
     setSelected(null);
-    setState("idle");
-    setError("");
     resetWalletConnect();
   }, [loginModalOpen, resetWalletConnect]);
 
-  const busy = state === "signing";
-
-  const close = () => {
-    if (busy) return;
-    closeLoginModal();
-    setError("");
-  };
-
   if (!loginModalOpen) return null;
 
   const walletName = (kind: WalletKind) => t(walletNameKey(kind));
-  // A wallet's browser flow only works if THAT wallet is injected right now
-  // (its desktop extension, or its in-app browser on mobile).
-  const injectedAvailable = (kind: WalletKind) =>
-    Boolean(getInjectedWallet(kind));
-  // All scan/app login paths use RainbowKit/WalletConnect on BNB Chain.
-  const qrAvailable = () => wc.available;
+  const walletHint = (kind: WalletKind) => {
+    if (kind === "tokenPocket") {
+      return mobileDevice
+        ? t("walletTpMobileDesc")
+        : t("walletTokenPocketQrDesc");
+    }
+    return t("walletRainbowFallbackDesc");
+  };
+  const busy = wc.state !== "idle";
 
-  const resetFlow = () => {
-    setError("");
-    setState("idle");
+  const close = () => {
+    closeLoginModal();
+    setSelected(null);
     wc.reset();
   };
 
-  const pickWallet = (kind: WalletKind) => {
-    resetFlow();
+  const startWalletLogin = (kind: WalletKind) => {
     setSelected(kind);
-    setStep("method");
-  };
-
-  const back = () => {
-    if (busy) return;
-    resetFlow();
-    setSelected(null);
-    setStep("wallet");
-  };
-
-  const signInjectedFor = async (kind: WalletKind) => {
-    setError("");
-    if (!getInjectedWallet(kind)) {
-      setError(
-        t("walletInstallSelected").replace("{wallet}", walletName(kind)),
-      );
-      return;
-    }
-    setState("signing");
-    await signInInjected(kind)
-      .catch((err) => {
-        setError(err instanceof Error ? err.message : t("walletLoginFailed"));
-      })
-      .finally(() => setState("idle"));
-  };
-
-  const chooseQr = (kind: WalletKind) => {
-    setError("");
     void wc.start(kind);
   };
 
-  const iconButtonClass =
-    "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-white/10 text-neutral-300 transition hover:border-ark-gold/50 hover:text-ark-gold";
-
   return (
     <div
       className="fixed inset-0 z-[120] flex items-end justify-center bg-black/70 px-3 pb-3 pt-10 backdrop-blur-sm md:items-center md:p-6"
@@ -126,191 +65,91 @@ export function WalletLoginModal() {
     >
       <div className="max-h-[92dvh] w-full max-w-[460px] overflow-y-auto rounded-3xl border border-white/10 bg-[#17171d] p-5 shadow-2xl shadow-black/70 md:p-6">
         <div className="flex items-start justify-between gap-3">
-          <div className="flex min-w-0 items-start gap-2">
-            {step === "method" ? (
-              <button
-                type="button"
-                onClick={back}
-                aria-label={t("walletBack")}
-                className={`${iconButtonClass} mt-0.5`}
-              >
-                <ChevronLeft size={18} />
-              </button>
-            ) : null}
-            <div className="min-w-0">
-              <h2
-                id="wallet-login-title"
-                className="text-xl font-semibold text-white"
-              >
-                {t("walletLoginTitle")}
-              </h2>
-              <p className="mt-2 text-sm leading-6 text-neutral-400">
-                {step === "wallet"
-                  ? t("walletLoginDesc")
-                  : t("walletChooseMethod")}
-              </p>
-            </div>
+          <div className="min-w-0">
+            <h2
+              id="wallet-login-title"
+              className="text-xl font-semibold text-white"
+            >
+              {t("walletLoginTitle")}
+            </h2>
+            <p className="mt-2 text-sm leading-6 text-neutral-400">
+              {t("walletLoginDesc")}
+            </p>
           </div>
           <button
             type="button"
             onClick={close}
             aria-label={t("close")}
-            className={iconButtonClass}
+            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-white/10 text-neutral-300 transition hover:border-ark-gold/50 hover:text-ark-gold"
           >
             <X size={18} />
           </button>
         </div>
 
-        {/* Step 1 — choose a wallet. */}
-        {step === "wallet" ? (
-          <div className="mt-5 grid gap-2">
-            {wallets.map((kind) => (
+        <div className="mt-5 grid gap-2">
+          {wallets.map((kind) => {
+            const active = selected === kind;
+            const connecting = active && wc.state === "connecting";
+            const signing = active && wc.state === "signing";
+            return (
               <button
                 key={kind}
                 type="button"
-                onClick={() => pickWallet(kind)}
-                className="flex items-center gap-3 rounded-2xl border border-white/10 bg-[#20202a] px-4 py-4 text-left transition hover:border-ark-gold/50 hover:bg-ark-gold/10"
+                onClick={() => startWalletLogin(kind)}
+                disabled={!wc.available || busy}
+                className={`flex items-center gap-3 rounded-2xl border px-4 py-4 text-left transition ${
+                  active
+                    ? "border-ark-gold/60 bg-ark-gold/10"
+                    : "border-white/10 bg-[#20202a] hover:border-ark-gold/50 hover:bg-ark-gold/10"
+                } disabled:cursor-wait disabled:opacity-70`}
               >
                 <WalletBrandIcon kind={kind} size={32} />
-                <span className="flex-1 text-base font-semibold text-neutral-100">
-                  {walletName(kind)}
-                </span>
-                <ChevronRight size={18} className="text-neutral-500" />
-              </button>
-            ))}
-          </div>
-        ) : selected ? (
-          <div className="mt-5 grid gap-3">
-            {/* Selected wallet header. */}
-            <div className="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
-              <WalletBrandIcon kind={selected} size={28} />
-              <span className="text-base font-semibold text-white">
-                {walletName(selected)}
-              </span>
-            </div>
-
-            {!mobileDevice && !injectedAvailable(selected) ? (
-              <p className="rounded-2xl border border-amber-400/30 bg-amber-400/10 px-4 py-3 text-sm leading-6 text-amber-100">
-                {t("walletInstallSelected").replace(
-                  "{wallet}",
-                  walletName(selected),
-                )}
-              </p>
-            ) : null}
-
-            {mobileDevice ? (
-              <button
-                type="button"
-                onClick={() => openWalletDeepLink(selected)}
-                className="flex flex-col items-start gap-1 rounded-2xl border border-white/10 bg-[#20202a] px-4 py-3 text-left transition hover:border-ark-gold/50 hover:bg-ark-gold/10"
-              >
-                <span className="text-base font-semibold text-neutral-100">
-                  {t("walletOpenWalletApp")}
-                </span>
-                <span className="text-xs leading-5 text-neutral-400">
-                  {t("walletOpenWalletAppDesc")}
-                </span>
-              </button>
-            ) : null}
-
-            {/* Method: browser wallet (injected). Hidden on normal mobile browsers,
-                because only wallet in-app browsers expose an injected wallet. */}
-            {(() => {
-              const ok = injectedAvailable(selected);
-              if (mobileDevice) return null;
-              return (
-                <button
-                  type="button"
-                  onClick={() => void signInjectedFor(selected)}
-                  disabled={!ok || busy}
-                  className={`flex flex-col items-start gap-1 rounded-2xl border px-4 py-3 text-left transition ${
-                    ok
-                      ? "border-white/10 bg-[#20202a] hover:border-ark-gold/50 hover:bg-ark-gold/10"
-                      : "cursor-not-allowed border-white/5 bg-white/[0.02] opacity-60"
-                  }`}
-                >
-                  <span className="flex items-center gap-2 text-base font-semibold text-neutral-100">
-                    {state === "signing" ? (
-                      <LoaderCircle className="h-4 w-4 animate-spin text-ark-gold" />
-                    ) : null}
-                    {mobileDevice ? t("walletUseCurrent") : t("walletInjected")}
+                <span className="min-w-0 flex-1">
+                  <span className="block text-base font-semibold text-neutral-100">
+                    {walletName(kind)}
                   </span>
-                  <span className="text-xs leading-5 text-neutral-400">
-                    {ok
-                      ? t("walletInjectedDesc")
-                      : mobileDevice
-                        ? t("walletOpenWalletAppDesc")
-                        : t("walletInstallSelected").replace(
-                            "{wallet}",
-                            walletName(selected),
-                          )}
+                  <span className="mt-1 block text-xs leading-5 text-neutral-400">
+                    {connecting
+                      ? t("walletConnecting")
+                      : signing
+                        ? t("walletSigning")
+                        : walletHint(kind)}
                   </span>
-                </button>
-              );
-            })()}
+                </span>
+                {connecting || signing ? (
+                  <LoaderCircle className="h-4 w-4 animate-spin text-ark-gold" />
+                ) : null}
+              </button>
+            );
+          })}
+        </div>
 
-            {/* Method: scan to log in. */}
-            {(() => {
-              const ok = qrAvailable();
-              const isTp = selected === "tokenPocket";
-              const qrBusy = wc.state !== "idle";
-              const qrLabel =
-                wc.state === "connecting"
-                  ? t("walletConnecting")
-                  : wc.state === "signing"
-                    ? t("walletSigning")
-                    : t("walletQrLogin");
-              return (
-                <div className="grid gap-2">
-                  <button
-                    type="button"
-                    onClick={() => chooseQr(selected)}
-                    disabled={!ok || qrBusy || busy}
-                    className={`flex flex-col items-start gap-1 rounded-2xl border px-4 py-3 text-left transition ${
-                      ok
-                        ? "border-white/10 bg-[#20202a] hover:border-ark-gold/50 hover:bg-ark-gold/10"
-                        : "cursor-not-allowed border-white/5 bg-white/[0.02] opacity-60"
-                    }`}
-                  >
-                    <span className="text-base font-semibold text-neutral-100">
-                      {qrLabel}
-                    </span>
-                    <span className="text-xs leading-5 text-neutral-400">
-                      {ok
-                        ? isTp
-                          ? mobileDevice
-                            ? t("walletTpMobileDesc")
-                            : t("walletTokenPocketQrDesc")
-                          : t("walletRainbowFallbackDesc")
-                        : t("walletRainbowUnavailable")}
-                    </span>
-                  </button>
+        {!wc.available ? (
+          <p className="mt-4 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-neutral-400">
+            {t("walletRainbowUnavailable")}
+          </p>
+        ) : null}
 
-                  {ok ? (
-                    <p className="text-xs leading-5 text-amber-300/80">
-                      {t("walletNetworkWarning")}
-                    </p>
-                  ) : null}
-
-                  {wc.qrUri ? (
-                    <div className="grid place-items-center gap-2 rounded-2xl bg-white p-4 text-center">
-                      <QRCodeSVG value={wc.qrUri} size={180} level="M" />
-                      <p className="text-xs font-medium text-neutral-700">
-                        {mobileDevice
-                          ? t("walletTpWaiting")
-                          : t("walletQrUseAnotherDevice")}
-                      </p>
-                    </div>
-                  ) : null}
-                </div>
-              );
-            })()}
+        {selected && wc.qrUri ? (
+          <div className="mt-4 grid place-items-center gap-2 rounded-2xl bg-white p-4 text-center">
+            <QRCodeSVG value={wc.qrUri} size={180} level="M" />
+            <p className="text-xs font-medium text-neutral-700">
+              {mobileDevice
+                ? t("walletTpWaiting")
+                : t("walletQrUseAnotherDevice")}
+            </p>
           </div>
         ) : null}
 
-        {error || wc.error ? (
+        {wc.error ? (
           <p className="mt-4 rounded-2xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200">
-            {error || wc.error}
+            {wc.error}
+          </p>
+        ) : null}
+
+        {selected ? (
+          <p className="mt-4 text-xs leading-5 text-amber-300/80">
+            {t("walletNetworkWarning")}
           </p>
         ) : null}
       </div>
diff --git a/src/wallet/injected.ts b/src/wallet/injected.ts
index 036d3a9..ec67e38 100644
--- a/src/wallet/injected.ts
+++ b/src/wallet/injected.ts
@@ -2,6 +2,15 @@ import { requestWalletNonce, verifyWalletSignature } from "./api";
 
 export type WalletKind = "tokenPocket" | "metaMask" | "imToken";
 
+const BNB_CHAIN_ID_HEX = "0x38";
+const BNB_CHAIN_PARAMS = {
+  chainId: BNB_CHAIN_ID_HEX,
+  chainName: "BNB Smart Chain",
+  nativeCurrency: { name: "BNB", symbol: "BNB", decimals: 18 },
+  rpcUrls: ["https://bsc-dataseed.binance.org"],
+  blockExplorerUrls: ["https://bscscan.com"],
+};
+
 export type EthereumProvider = {
   isMetaMask?: boolean;
   isTokenPocket?: boolean;
@@ -13,6 +22,116 @@ export type EthereumProvider = {
   }) => Promise<T>;
 };
 
+function isAddress(value: unknown): value is string {
+  return typeof value === "string" && /^0x[a-fA-F0-9]{40}$/.test(value);
+}
+
+function utf8ToHex(value: string): string {
+  return `0x${Array.from(new TextEncoder().encode(value), (byte) =>
+    byte.toString(16).padStart(2, "0"),
+  ).join("")}`;
+}
+
+function errorText(error: unknown): string {
+  if (!error || typeof error !== "object") return String(error ?? "");
+  const parts: string[] = [];
+  const record = error as Record<string, unknown>;
+  for (const key of ["shortMessage", "message", "details"]) {
+    const value = record[key];
+    if (typeof value === "string") parts.push(value);
+  }
+  if (record.cause) parts.push(errorText(record.cause));
+  return parts.join("\n");
+}
+
+function isNoAccountError(error: unknown): boolean {
+  return /wallet must has at least one account|wallet must has one account|must have at least one account|no wallet account returned/i.test(
+    errorText(error),
+  );
+}
+
+function normalizeWalletError(error: unknown): Error {
+  if (isNoAccountError(error)) return new Error("walletNoAccount");
+  if (error instanceof Error) return error;
+  const message = errorText(error);
+  return new Error(message || "Wallet login failed");
+}
+
+function shouldRetryPersonalSign(error: unknown): boolean {
+  const text = errorText(error);
+  return /wallet must has at least one account|wallet must has one account|must have at least one account|invalid params|invalid account|account not found/i.test(
+    text,
+  );
+}
+
+async function ensureBnbChain(ethereum: EthereumProvider): Promise<void> {
+  const chainId = await ethereum
+    .request<string>({ method: "eth_chainId" })
+    .catch(() => "");
+  if (chainId.toLowerCase() === BNB_CHAIN_ID_HEX) return;
+
+  try {
+    await ethereum.request({
+      method: "wallet_switchEthereumChain",
+      params: [{ chainId: BNB_CHAIN_ID_HEX }],
+    });
+  } catch (error) {
+    const code = (error as { code?: number | string } | null)?.code;
+    if (code !== 4902 && code !== "4902") throw error;
+    await ethereum.request({
+      method: "wallet_addEthereumChain",
+      params: [BNB_CHAIN_PARAMS],
+    });
+  }
+}
+
+async function requestInjectedAddress(
+  ethereum: EthereumProvider,
+): Promise<string> {
+  const existingAccounts: unknown[] = await ethereum
+    .request<unknown[]>({ method: "eth_accounts" })
+    .catch((): unknown[] => []);
+  const existingAddress = existingAccounts.find(isAddress);
+  if (existingAddress) return existingAddress;
+
+  const requestedAccounts = await ethereum
+    .request<unknown[]>({
+      method: "eth_requestAccounts",
+    })
+    .catch((error: unknown): never => {
+      throw normalizeWalletError(error);
+    });
+  const requestedAddress = requestedAccounts.find(isAddress);
+  if (!requestedAddress) throw new Error("walletNoAccount");
+  return requestedAddress;
+}
+
+async function personalSign(params: {
+  ethereum: EthereumProvider;
+  message: string;
+  address: string;
+}): Promise<string> {
+  const { ethereum, message, address } = params;
+  const hexMessage = utf8ToHex(message);
+  try {
+    return await ethereum.request<string>({
+      method: "personal_sign",
+      params: [hexMessage, address],
+    });
+  } catch (error) {
+    if (!shouldRetryPersonalSign(error)) throw error;
+    // Some injected wallets incorrectly expect the legacy param order.
+    return ethereum
+      .request<string>({
+        method: "personal_sign",
+        params: [address, hexMessage],
+      })
+      .catch((retryError: unknown): never => {
+        throw normalizeWalletError(retryError);
+      });
+  }
+}
+
 export function getInjectedEthereum(): EthereumProvider | null {
   if (typeof window === "undefined") return null;
   const maybeWindow = window as typeof window & { ethereum?: EthereumProvider };
@@ -69,23 +188,22 @@ export async function signInWithInjectedWallet(kind?: WalletKind): Promise<{
     throw new Error("No injected wallet found");
   }
 
-  // Login is signature-only (EIP-191 personal_sign). The backend verifies the
-  // recovered address and never inspects chainId, so we deliberately do NOT
-  // switch or add any chain — that only adds a failure-prone wallet popup.
-  console.info("[wallet-login] requesting accounts (eth_requestAccounts)…");
-  const accounts = await ethereum.request<string[]>({
-    method: "eth_requestAccounts",
-  });
-  console.info("[wallet-login] accounts", accounts);
-  const address = accounts[0];
-  if (!address) throw new Error("No wallet account returned");
+  // BNB Smart Chain is EVM-compatible, so browser wallets still expose the
+  // standard EIP-1193 method names (`eth_*`) while operating on BNB chain 56.
+  console.info("[wallet-login] requesting BNB wallet account…");
+  const address = await requestInjectedAddress(ethereum);
+  console.info("[wallet-login] account", address);
+
+  console.info("[wallet-login] ensuring BNB Chain (0x38)…");
+  await ensureBnbChain(ethereum);
 
   console.info("[wallet-login] requesting nonce for", address);
   const nonce = await requestWalletNonce(address);
   console.info("[wallet-login] got nonce, requesting personal_sign…");
-  const signature = await ethereum.request<string>({
-    method: "personal_sign",
-    params: [nonce.message, address],
+  const signature = await personalSign({
+    ethereum,
+    message: nonce.message,
+    address,
   });
   console.info("[wallet-login] signed, verifying with backend…");
   const result = await verifyWalletSignature({