From 11599e54eadec35821a3a5ad77b43a8253adcba8 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Tue, 2 Jun 2026 10:33:59 +0800
Subject: [PATCH] fix: use RainbowKit picker for desktop browser-wallet login

Raw window.ethereum is unreliable when several extensions contend for it, so
desktop now opens the RainbowKit connect modal (EIP-6963 wallet discovery +
WalletConnect QR) when a project id is configured, falling back to the injected
flow otherwise. In-wallet mobile browsers keep the direct injected sign.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/wallet/WalletLoginModal.tsx | 35 +++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/wallet/WalletLoginModal.tsx b/src/wallet/WalletLoginModal.tsx
index 681eb42..a0faaed 100644
--- a/src/wallet/WalletLoginModal.tsx
+++ b/src/wallet/WalletLoginModal.tsx
@@ -146,6 +146,18 @@ export function WalletLoginModal() {
       .finally(() => setState("idle"));
   };
 
+  // Desktop: open the RainbowKit modal — it discovers every installed wallet
+  // via EIP-6963 (robust when several extensions fight over window.ethereum)
+  // and also offers a WalletConnect QR. Fall back to the raw injected flow only
+  // when WalletConnect has no project id configured.
+  const connectBrowserWallet = () => {
+    if (wc.available) {
+      wc.start();
+      return;
+    }
+    void signInjected();
+  };
+
   const openApp = (kind: WalletKind) => {
     setError("");
     setOpeningWallet(kind);
@@ -201,27 +213,30 @@ export function WalletLoginModal() {
         </div>
 
         <div className="mt-5 grid gap-3">
-          {/* Injected wallet: browser extension (desktop) or in-wallet browser. */}
-          {hasInjected ? (
+          {/* Browser wallet: in a wallet's in-app browser we sign directly with
+              the injected provider; on desktop we open the RainbowKit picker so
+              the user can choose among installed extensions reliably. */}
+          {mobileDevice && hasInjected ? (
             <button
               type="button"
               onClick={() => void signInjected()}
               disabled={busy}
               className="flex items-center justify-center gap-2 rounded-2xl bg-ark-gold px-4 py-4 text-base font-bold text-black transition hover:bg-ark-gold2 disabled:cursor-wait disabled:opacity-70"
             >
-              {state === "signing"
-                ? t("walletSigning")
-                : mobileDevice
-                  ? t("walletUseCurrent")
-                  : t("walletInjected")}
+              {state === "signing" ? t("walletSigning") : t("walletUseCurrent")}
             </button>
           ) : !mobileDevice ? (
             <button
               type="button"
-              onClick={() => void signInjected()}
-              className="flex items-center justify-center gap-2 rounded-2xl border border-ark-gold/50 bg-ark-gold/5 px-4 py-3 text-sm font-semibold text-ark-gold transition hover:bg-ark-gold/10"
+              onClick={connectBrowserWallet}
+              disabled={busy || wc.state !== "idle"}
+              className="flex items-center justify-center gap-2 rounded-2xl bg-ark-gold px-4 py-4 text-base font-bold text-black transition hover:bg-ark-gold2 disabled:cursor-wait disabled:opacity-70"
             >
-              {t("walletInjected")}
+              {wc.state === "connecting"
+                ? t("walletConnecting")
+                : wc.state === "signing" || state === "signing"
+                  ? t("walletSigning")
+                  : t("walletInjected")}
             </button>
           ) : null}