feat: guide desktop wallet connection

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:

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: "适合用另一台设备扫描二维码登录当前浏览器。",

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>
             );
           })}