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

terry-staging #16

Merged
terry merged 96 commits from terry-staging into main 2026-06-05 16:33:12 +00:00
Conversation 0 Commits 96 Files Changed 76 +119 -72
3 changed files with 119 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4d38c4513d - Show all commits

82
src/wallet/WalletLoginModal.tsx
View File

@@ -51,9 +51,14 @@ export function WalletLoginModal() {
wc.reset();
};
const startWalletLogin = (kind: WalletKind) => {
const selectWallet = (kind: WalletKind) => {
setSelected(kind);
void wc.start(kind);
wc.reset();
};
const startWalletLogin = (kind: WalletKind, mode: "deeplink" | "qr") => {
setSelected(kind);
void wc.start(kind, mode);
};
return (
@@ -92,34 +97,63 @@ export function WalletLoginModal() {
const connecting = active && wc.state === "connecting";
const signing = active && wc.state === "signing";
return (
<button
<div
key={kind}
type="button"
onClick={() => startWalletLogin(kind)}
disabled={!wc.available || busy}
className={`flex items-center gap-3 rounded-2xl border px-4 py-4 text-left transition ${
className={`rounded-2xl border p-3 transition ${
active
? "border-ark-gold/60 bg-ark-gold/10"
: "border-white/10 bg-[#20202a] hover:border-ark-gold/50 hover:bg-ark-gold/10"
} disabled:cursor-wait disabled:opacity-70`}
: "border-white/10 bg-[#20202a]"
}`}
>
<WalletBrandIcon kind={kind} size={32} />
<span className="min-w-0 flex-1">
<span className="block text-base font-semibold text-neutral-100">
{walletName(kind)}
<button
type="button"
onClick={() =>
mobileDevice
? selectWallet(kind)
: startWalletLogin(kind, "qr")
}
disabled={!wc.available || busy}
className="flex w-full items-center gap-3 text-left disabled:cursor-wait disabled:opacity-70"
>
<WalletBrandIcon kind={kind} size={32} />
<span className="min-w-0 flex-1">
<span className="block text-base font-semibold text-neutral-100">
{walletName(kind)}
</span>
<span className="mt-1 block text-xs leading-5 text-neutral-400">
{connecting
? t("walletConnecting")
: signing
? t("walletSigning")
: walletHint(kind)}
</span>
</span>
<span className="mt-1 block text-xs leading-5 text-neutral-400">
{connecting
? t("walletConnecting")
: signing
? t("walletSigning")
: walletHint(kind)}
</span>
</span>
{connecting || signing ? (
<LoaderCircle className="h-4 w-4 animate-spin text-ark-gold" />
{connecting || signing ? (
<LoaderCircle className="h-4 w-4 animate-spin text-ark-gold" />
) : null}
</button>
{mobileDevice && active ? (
<div className="mt-3 grid grid-cols-2 gap-2">
<button
type="button"
onClick={() => startWalletLogin(kind, "deeplink")}
disabled={!wc.available || 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"
>
{t("walletOpenWalletApp")}
</button>
<button
type="button"
onClick={() => startWalletLogin(kind, "qr")}
disabled={!wc.available || busy}
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 disabled:cursor-wait disabled:opacity-70"
>
{t("walletQrLogin")}
</button>
</div>
) : null}
</button>
</div>
);
})}
</div>

19
src/wallet/WalletProvider.tsx
View File

@@ -15,6 +15,18 @@ import { clearWalletToken, readWalletToken, writeWalletToken } from "./token";
type WalletStatus = "loading" | "loggedOut" | "loggedIn";
const localWalletTokenPrefix = "local-wallet:";
export function localWalletToken(wallet: string): string {
return `${localWalletTokenPrefix}${wallet}`;
}
function walletFromLocalToken(token: string): string | null {
return token.startsWith(localWalletTokenPrefix)
? token.slice(localWalletTokenPrefix.length)
: null;
}
type WalletContextValue = {
address: string | null;
token: string | null;
@@ -52,6 +64,13 @@ export function WalletProvider({ children }: { children: ReactNode }) {
return;
}
const localWallet = walletFromLocalToken(token);
if (localWallet) {
setAddress(localWallet);
setStatus("loggedIn");
return;
}
setStatus("loading");
fetchWalletMe(token)
.then((me) => {

90
src/wallet/useWalletConnectLogin.ts
View File

@@ -1,12 +1,12 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { useAccount, useConnect, useDisconnect, useSignMessage } from "wagmi";
import { useAccount, useConnect, useDisconnect } from "wagmi";
import { bsc } from "wagmi/chains";
import { requestWalletNonce, verifyWalletSignature } from "./api";
import { hasWalletConnectProjectId } from "./RainbowWalletProvider";
import type { WalletKind } from "./injected";
import { useWallet } from "./WalletProvider";
import { localWalletToken, useWallet } from "./WalletProvider";
export type WalletConnectLoginState = "idle" | "connecting" | "signing";
export type WalletConnectLoginMode = "deeplink" | "qr";
function isMobileDevice(): boolean {
if (typeof navigator === "undefined") return false;
@@ -15,13 +15,28 @@ function isMobileDevice(): boolean {
);
}
function walletConnectDeeplink(
kind: WalletKind | undefined,
uri: string,
): string | null {
if (kind === "tokenPocket") {
return `tpoutside://wc?uri=${encodeURIComponent(uri)}`;
}
if (kind === "metaMask") {
return `https://metamask.app.link/wc?uri=${encodeURIComponent(uri)}`;
}
if (kind === "imToken") {
return `imtokenv2://wc?uri=${encodeURIComponent(uri)}`;
}
return null;
}
/**
* MetaMask / imToken QR fallback via RainbowKit + WalletConnect.
*
* Flow: open the RainbowKit connect modal (WalletConnect QR) -> once an account
* is connected, request a nonce, sign it with `personal_sign` through wagmi,
* verify against the backend and complete our own JWT login. The wagmi/WC
* session is only needed for the signature, so we disconnect right after.
* Flow: connect through RainbowKit/Wagmi on BNB Chain -> once an account is
* connected, complete a local frontend wallet session. No message signature,
* backend nonce, or verify call is required.
*
* Entirely gated behind a real `VITE_WALLETCONNECT_PROJECT_ID`: when it is
* missing `available` is false and `start` is a no-op, so callers can hide or
@@ -31,7 +46,6 @@ export function useWalletConnectLogin() {
const available = hasWalletConnectProjectId();
const { completeLogin } = useWallet();
const { address, isConnected } = useAccount();
const { signMessageAsync } = useSignMessage();
const { connectAsync, connectors } = useConnect();
const { disconnect } = useDisconnect();
const [state, setState] = useState<WalletConnectLoginState>("idle");
@@ -50,17 +64,24 @@ export function useWalletConnectLogin() {
}, []);
const start = useCallback(
async (preferredWallet?: WalletKind) => {
async (
preferredWallet?: WalletKind,
mode: WalletConnectLoginMode = "qr",
) => {
if (!available) return;
setError("");
setQrUri("");
pendingRef.current = true;
setState("connecting");
// This modal is QR/WalletConnect-only. RainbowKit also exposes wallet-
// specific injected connectors (for example `tokenPocket`) when an
// extension is installed; using those here makes the click try the local
// browser extension and can fail with "wallet must has at least one
// account" before a QR is shown.
const connector =
connectors.find((item) => item.id === preferredWallet) ??
connectors.find((item) => item.id === "walletConnect") ??
connectors.find((item) => item.type === "walletConnect");
connectors.find((item) => item.type === "walletConnect") ??
connectors.find((item) => item.id === "walletConnect");
if (!connector) {
pendingRef.current = false;
@@ -88,11 +109,10 @@ export function useWalletConnectLogin() {
preferredWallet,
connectorId: connector.id,
});
setQrUri(message.data);
if (preferredWallet === "tokenPocket" && isMobileDevice()) {
window.location.href = `tpoutside://wc?uri=${encodeURIComponent(
message.data,
)}`;
if (mode === "qr") setQrUri(message.data);
const deeplink = walletConnectDeeplink(preferredWallet, message.data);
if (mode === "deeplink" && deeplink && isMobileDevice()) {
window.location.href = deeplink;
}
};
@@ -120,37 +140,11 @@ export function useWalletConnectLogin() {
useEffect(() => {
if (!pendingRef.current || !isConnected || !address) return;
pendingRef.current = false;
setState("signing");
let cancelled = false;
void (async () => {
try {
const nonce = await requestWalletNonce(address);
const signature = await signMessageAsync({ message: nonce.message });
const verified = await verifyWalletSignature({
address,
message: nonce.message,
signature,
});
if (cancelled) return;
completeLogin(verified.token, verified.wallet);
setState("idle");
} catch (err) {
if (!cancelled) {
setError(
err instanceof Error ? err.message : "WalletConnect login failed",
);
setQrUri("");
setState("idle");
}
} finally {
// We only needed a one-off signature, not a persistent wagmi session.
disconnect();
}
})();
return () => {
cancelled = true;
};
}, [address, completeLogin, disconnect, isConnected, signMessageAsync]);
completeLogin(localWalletToken(address), address);
setQrUri("");
setState("idle");
disconnect();
}, [address, completeLogin, disconnect, isConnected]);
return { available, state, error, qrUri, start, reset };
}