48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
|
|
import { WagmiProvider } from "wagmi";
|
|
import "@rainbow-me/rainbowkit/styles.css";
|
|
import { WalletLoginControls } from "../../components/WalletLoginControls";
|
|
import { useI18n } from "../../i18n";
|
|
import { wagmiConfig } from "../../wagmiConfig";
|
|
|
|
export function WalletPage() {
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<div className="mx-auto max-w-lg space-y-6">
|
|
<h1 className="text-2xl font-bold">{t("walletPageTitle")}</h1>
|
|
<p className="text-neutral-300 text-sm leading-relaxed">
|
|
{t("walletPageIntro")}
|
|
</p>
|
|
<ul className="text-sm text-neutral-400 space-y-2 list-disc pl-5">
|
|
<li>{t("walletStepExtension")}</li>
|
|
<li>{t("walletStepQR")}</li>
|
|
<li>{t("walletStepSign")}</li>
|
|
</ul>
|
|
<div className="rounded-2xl border border-ark-line bg-ark-panel p-6 space-y-4">
|
|
{import.meta.env.VITE_WALLETCONNECT_PROJECT_ID ? (
|
|
<WagmiProvider config={wagmiConfig}>
|
|
<RainbowKitProvider
|
|
theme={darkTheme({
|
|
accentColor: "#d4af37",
|
|
accentColorForeground: "#0a0a0a",
|
|
borderRadius: "medium",
|
|
})}
|
|
modalSize="wide"
|
|
>
|
|
<WalletLoginControls />
|
|
</RainbowKitProvider>
|
|
</WagmiProvider>
|
|
) : (
|
|
<p
|
|
className="text-sm text-amber-500/90 leading-relaxed"
|
|
title={t("walletMissingProjectId")}
|
|
>
|
|
{t("walletSetupNeeded")}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|