terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: guide desktop wallet connection

Browse Source
This commit is contained in:
TerryM
2026-06-04 11:32:59 +08:00
parent ae64f96bbe
commit 0a86619b6c
3 changed files with 52 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/wallet/WalletLoginModal.tsx
View File

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