From 0a86619b6c5ad93109635dd6bceacaa7df49fbb4 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Thu, 4 Jun 2026 11:32:59 +0800
Subject: [PATCH] feat: guide desktop wallet connection

---
 src/locales/en.ts               |  8 +++++++
 src/locales/zh-CN.ts            |  6 +++++
 src/wallet/WalletLoginModal.tsx | 40 +++++++++++++++++++++++++++++++--
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index a47f5f5..7d5c2db 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -207,6 +207,14 @@ export const enDict: Dict = {
     "If no wallet opens after clicking, make sure the matching browser extension is installed and enabled.",
   walletInstallSelected:
     "No {wallet} browser extension detected. Install or enable it, then try again.",
+  walletDesktopHelpTitle: "We tried to open {wallet}. Next steps:",
+  walletDesktopHelpUnlock:
+    "Open the wallet extension in the browser toolbar and unlock it.",
+  walletDesktopHelpSelect:
+    "Make sure the wallet has an account, then select that account.",
+  walletDesktopHelpRetry: "Come back here and click “Reconnect {wallet}”.",
+  walletReconnectWallet: "Reconnect {wallet}",
+  walletInstallWallet: "Install {wallet} extension",
   walletOpen: "Open",
   walletQrLogin: "QR login",
   walletMobileQrDesc:
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 12588de..5a235e0 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -194,6 +194,12 @@ export const zhDict: Dict = {
   walletDesktopHint:
     "如果点击后没有弹出钱包，请确认已安装并启用对应的钱包浏览器插件。",
   walletInstallSelected: "未检测到 {wallet} 浏览器插件，请先安装或启用后再试。",
+  walletDesktopHelpTitle: "已尝试打开 {wallet}，接下来请这样操作：",
+  walletDesktopHelpUnlock: "打开浏览器右上角的钱包插件，并解锁钱包。",
+  walletDesktopHelpSelect: "确认钱包里已有账号，并选择一个账号。",
+  walletDesktopHelpRetry: "回到这里点击“重新连接 {wallet}”。",
+  walletReconnectWallet: "重新连接 {wallet}",
+  walletInstallWallet: "安装 {wallet} 插件",
   walletOpen: "打开",
   walletQrLogin: "扫码登录",
   walletMobileQrDesc: "适合用另一台设备扫描二维码登录当前浏览器。",
diff --git a/src/wallet/WalletLoginModal.tsx b/src/wallet/WalletLoginModal.tsx
index 3fdcd6a..6601775 100644
--- a/src/wallet/WalletLoginModal.tsx
+++ b/src/wallet/WalletLoginModal.tsx
@@ -1,7 +1,7 @@
 import { LoaderCircle, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useI18n } from "../i18n";
-import { walletDeepLink } from "./deepLinks";
+import { walletDeepLink, walletDownloadUrl } from "./deepLinks";
 import {
   connectInjectedWallet,
   getInjectedWallet,
@@ -59,6 +59,8 @@ export function WalletLoginModal() {
   if (!loginModalOpen) return null;
 
   const walletName = (kind: WalletKind) => t(walletNameKey(kind));
+  const walletText = (key: string, kind: WalletKind) =>
+    t(key).replace("{wallet}", walletName(kind));
   const walletHint = () =>
     mobileDevice ? t("walletChooseMobile") : t("walletDesktopHint");
   const busy = state !== "idle";
@@ -101,7 +103,11 @@ export function WalletLoginModal() {
       return;
     }
     setSelected(kind);
-    setError(t("walletInstallSelected").replace("{wallet}", walletName(kind)));
+    setError(walletText("walletInstallSelected", kind));
+  };
+
+  const openWalletInstall = (kind: WalletKind) => {
+    window.open(walletDownloadUrl(kind), "_blank", "noopener,noreferrer");
   };
 
   return (
@@ -183,6 +189,36 @@ export function WalletLoginModal() {
                     </button>
                   </div>
                 ) : null}
+
+                {!mobileDevice && active ? (
+                  <div className="mt-3 rounded-2xl border border-white/10 bg-black/20 p-3 text-sm text-neutral-300">
+                    <p className="font-semibold text-neutral-100">
+                      {walletText("walletDesktopHelpTitle", kind)}
+                    </p>
+                    <ol className="mt-2 list-decimal space-y-1 pl-5 leading-6 text-neutral-400">
+                      <li>{t("walletDesktopHelpUnlock")}</li>
+                      <li>{t("walletDesktopHelpSelect")}</li>
+                      <li>{walletText("walletDesktopHelpRetry", kind)}</li>
+                    </ol>
+                    <div className="mt-3 grid gap-2 sm:grid-cols-2">
+                      <button
+                        type="button"
+                        onClick={() => openWalletAppDirect(kind)}
+                        disabled={busy}
+                        className="rounded-full bg-ark-gold px-3 py-2 text-sm font-bold text-black transition hover:bg-ark-gold2 disabled:cursor-wait disabled:opacity-70"
+                      >
+                        {walletText("walletReconnectWallet", kind)}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => openWalletInstall(kind)}
+                        className="rounded-full border border-ark-gold/50 px-3 py-2 text-sm font-semibold text-ark-gold transition hover:bg-ark-gold/10"
+                      >
+                        {walletText("walletInstallWallet", kind)}
+                      </button>
+                    </div>
+                  </div>
+                ) : null}
               </div>
             );
           })}