feat: add wallet login modal
This commit is contained in:
TerryM
279
src/wallet/WalletLoginModal.tsx
Normal file
279
src/wallet/WalletLoginModal.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
import { useConnectModal } from "@rainbow-me/rainbowkit";
|
||||
import { QRCodeSVG } from "qrcode.react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useAccount, useSignMessage } from "wagmi";
|
||||
import { useToast } from "../components/Toast";
|
||||
import { useI18n } from "../i18n";
|
||||
import {
|
||||
createTokenPocketLoginRequest,
|
||||
fetchTokenPocketLoginResult,
|
||||
requestWalletNonce,
|
||||
verifyWalletSignature,
|
||||
type TokenPocketLoginRequest,
|
||||
} from "./api";
|
||||
import { openWalletDeepLink } from "./deepLinks";
|
||||
import { useWallet } from "./WalletProvider";
|
||||
|
||||
const pollIntervalMs = 1800;
|
||||
|
||||
type ModalState = "idle" | "tpLoading" | "tpPolling" | "rainbowSigning";
|
||||
|
||||
export function WalletLoginModal() {
|
||||
const { t } = useI18n();
|
||||
const { showToast } = useToast();
|
||||
const wallet = useWallet();
|
||||
const { openConnectModal } = useConnectModal();
|
||||
const { address, isConnected } = useAccount();
|
||||
const { signMessageAsync } = useSignMessage();
|
||||
const [state, setState] = useState<ModalState>("idle");
|
||||
const [error, setError] = useState("");
|
||||
const [tpRequest, setTpRequest] = useState<TokenPocketLoginRequest | null>(
|
||||
null,
|
||||
);
|
||||
const [rainbowPending, setRainbowPending] = useState(false);
|
||||
const rainbowSigningRef = useRef(false);
|
||||
|
||||
const close = () => {
|
||||
if (state === "tpLoading" || state === "rainbowSigning") return;
|
||||
wallet.closeLoginModal();
|
||||
setError("");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!wallet.loginModalOpen || !tpRequest) return;
|
||||
if (state !== "tpPolling") return;
|
||||
|
||||
let cancelled = false;
|
||||
const poll = async () => {
|
||||
try {
|
||||
const result = await fetchTokenPocketLoginResult(tpRequest.actionId);
|
||||
if (cancelled) return;
|
||||
if (result.status === "completed") {
|
||||
const verified = await verifyWalletSignature({
|
||||
address: result.address,
|
||||
message: result.message,
|
||||
signature: result.signature,
|
||||
});
|
||||
if (cancelled) return;
|
||||
wallet.completeLogin(verified.token, verified.wallet);
|
||||
showToast(t("walletLoginSuccess"));
|
||||
setState("idle");
|
||||
setTpRequest(null);
|
||||
return;
|
||||
}
|
||||
if (result.status === "expired" || result.status === "failed") {
|
||||
setState("idle");
|
||||
setError(result.error || t("walletTpExpired"));
|
||||
}
|
||||
} catch {
|
||||
if (!cancelled) setError(t("walletLoginFailed"));
|
||||
}
|
||||
};
|
||||
|
||||
void poll();
|
||||
const timer = window.setInterval(() => void poll(), pollIntervalMs);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
window.clearInterval(timer);
|
||||
};
|
||||
}, [state, tpRequest, t, showToast, wallet]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!rainbowPending || !isConnected || !address) return;
|
||||
if (rainbowSigningRef.current) return;
|
||||
rainbowSigningRef.current = true;
|
||||
setState("rainbowSigning");
|
||||
setError("");
|
||||
|
||||
void (async () => {
|
||||
try {
|
||||
const nonce = await requestWalletNonce(address);
|
||||
const signature = await signMessageAsync({ message: nonce.message });
|
||||
const verified = await verifyWalletSignature({
|
||||
address,
|
||||
message: nonce.message,
|
||||
signature,
|
||||
});
|
||||
wallet.completeLogin(verified.token, verified.wallet);
|
||||
showToast(t("walletLoginSuccess"));
|
||||
} catch (err) {
|
||||
const message =
|
||||
err instanceof Error ? err.message : t("walletLoginFailed");
|
||||
setError(message || t("walletLoginFailed"));
|
||||
showToast(t("walletLoginFailed"), "error");
|
||||
} finally {
|
||||
setState("idle");
|
||||
setRainbowPending(false);
|
||||
rainbowSigningRef.current = false;
|
||||
}
|
||||
})();
|
||||
}, [
|
||||
address,
|
||||
isConnected,
|
||||
rainbowPending,
|
||||
showToast,
|
||||
signMessageAsync,
|
||||
t,
|
||||
wallet,
|
||||
]);
|
||||
|
||||
if (!wallet.loginModalOpen) return null;
|
||||
|
||||
const startInjected = async () => {
|
||||
setError("");
|
||||
setState("idle");
|
||||
await wallet.signInInjected().catch(() => undefined);
|
||||
};
|
||||
|
||||
const startTokenPocketQr = async () => {
|
||||
setError("");
|
||||
setState("tpLoading");
|
||||
try {
|
||||
const req = await createTokenPocketLoginRequest();
|
||||
setTpRequest(req);
|
||||
setState("tpPolling");
|
||||
} catch {
|
||||
setState("idle");
|
||||
setError(t("walletTpQrFailed"));
|
||||
}
|
||||
};
|
||||
|
||||
const startRainbowFallback = () => {
|
||||
setError("");
|
||||
setRainbowPending(true);
|
||||
openConnectModal?.();
|
||||
if (!openConnectModal) setError(t("walletRainbowUnavailable"));
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[120] flex items-end justify-center bg-black/70 px-3 pb-3 pt-10 backdrop-blur-sm md:items-center md:p-6"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="wallet-login-title"
|
||||
>
|
||||
<div className="max-h-[92dvh] w-full max-w-[520px] overflow-y-auto rounded-3xl border border-white/10 bg-[#17171d] p-5 shadow-2xl shadow-black/70 md:p-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h2
|
||||
id="wallet-login-title"
|
||||
className="text-xl font-semibold text-white"
|
||||
>
|
||||
{t("walletLoginTitle")}
|
||||
</h2>
|
||||
<p className="mt-2 text-sm leading-6 text-neutral-400">
|
||||
{t("walletLoginDesc")}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={close}
|
||||
className="rounded-full border border-white/10 px-3 py-1.5 text-sm text-neutral-300 transition hover:border-ark-gold/50 hover:text-ark-gold"
|
||||
>
|
||||
{t("close")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void startInjected()}
|
||||
className="rounded-2xl border border-ark-gold/40 bg-ark-gold/10 p-4 text-left transition hover:bg-ark-gold/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80"
|
||||
>
|
||||
<span className="block font-semibold text-ark-gold2">
|
||||
{t("walletInjected")}
|
||||
</span>
|
||||
<span className="mt-1 block text-sm text-neutral-400">
|
||||
{t("walletInjectedDesc")}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">
|
||||
{t("walletTokenPocketQr")}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm leading-6 text-neutral-400">
|
||||
{t("walletTokenPocketQrDesc")}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void startTokenPocketQr()}
|
||||
disabled={state === "tpLoading"}
|
||||
className="shrink-0 rounded-full bg-ark-gold px-4 py-2 text-sm font-semibold text-black transition hover:bg-ark-gold2 disabled:cursor-wait disabled:opacity-70"
|
||||
>
|
||||
{state === "tpLoading" ? t("loading") : t("walletGenerateQr")}
|
||||
</button>
|
||||
</div>
|
||||
{tpRequest ? (
|
||||
<div className="mt-4 grid place-items-center gap-3 rounded-2xl bg-white p-4 text-center">
|
||||
<QRCodeSVG value={tpRequest.qrUrl} size={196} level="M" />
|
||||
<p className="text-xs font-medium text-neutral-700">
|
||||
{t("walletQrUseAnotherDevice")}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2 sm:grid-cols-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openWalletDeepLink("tokenPocket")}
|
||||
className="rounded-2xl border border-white/10 bg-[#20202a] px-4 py-3 text-sm font-semibold text-neutral-100 transition hover:border-ark-gold/40"
|
||||
>
|
||||
{t("walletOpenTokenPocket")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openWalletDeepLink("metaMask")}
|
||||
className="rounded-2xl border border-white/10 bg-[#20202a] px-4 py-3 text-sm font-semibold text-neutral-100 transition hover:border-ark-gold/40"
|
||||
>
|
||||
{t("walletOpenMetaMask")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openWalletDeepLink("imToken")}
|
||||
className="rounded-2xl border border-white/10 bg-[#20202a] px-4 py-3 text-sm font-semibold text-neutral-100 transition hover:border-ark-gold/40"
|
||||
>
|
||||
{t("walletOpenImToken")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-dashed border-white/15 p-4">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">
|
||||
{t("walletRainbowFallback")}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm leading-6 text-neutral-400">
|
||||
{t("walletRainbowFallbackDesc")}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={startRainbowFallback}
|
||||
disabled={state === "rainbowSigning"}
|
||||
className="shrink-0 rounded-full border border-ark-gold/50 px-4 py-2 text-sm font-semibold text-ark-gold transition hover:bg-ark-gold/10 disabled:cursor-wait disabled:opacity-70"
|
||||
>
|
||||
{state === "rainbowSigning"
|
||||
? t("walletSigning")
|
||||
: t("walletOpenRainbow")}
|
||||
</button>
|
||||
</div>
|
||||
<p className="mt-3 text-xs leading-5 text-yellow-200/80">
|
||||
{t("walletNetworkWarning")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<p className="mt-4 rounded-2xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user