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>
This commit is contained in:
TerryM
2026-06-02 10:33:59 +08:00
parent 8821058c0a
commit 11599e54ea

View File

@@ -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}