|
| 1 | +import type { Metadata } from "next"; |
| 2 | +import { getAlternates, Link } from "@workspace/i18n/routing"; |
| 3 | +import { getTranslations } from "@workspace/i18n/server"; |
| 4 | +import Reveal from "@/components/epoch1000/Reveal"; |
| 5 | +import { tierFor } from "@/lib/epoch1000/tiers"; |
| 6 | + |
| 7 | +interface Props { |
| 8 | + params: Promise<{ locale: string }>; |
| 9 | + searchParams: Promise<Record<string, string | string[] | undefined>>; |
| 10 | +} |
| 11 | + |
| 12 | +function first(v: string | string[] | undefined): string { |
| 13 | + return Array.isArray(v) ? (v[0] ?? "") : (v ?? ""); |
| 14 | +} |
| 15 | + |
| 16 | +function ogQuery( |
| 17 | + sp: Record<string, string | string[] | undefined>, |
| 18 | + locale?: string, |
| 19 | +): string { |
| 20 | + const p = new URLSearchParams(); |
| 21 | + for (const key of ["s", "fe", "c", "t", "x", "w", "k", "vl"]) { |
| 22 | + const v = first(sp[key]); |
| 23 | + if (v) p.set(key, v); |
| 24 | + } |
| 25 | + if (!p.has("k")) p.set("k", "validator"); |
| 26 | + if (locale) p.set("l", locale); |
| 27 | + return p.toString(); |
| 28 | +} |
| 29 | + |
| 30 | +export async function generateMetadata({ |
| 31 | + params, |
| 32 | + searchParams, |
| 33 | +}: Props): Promise<Metadata> { |
| 34 | + const { locale } = await params; |
| 35 | + const t = await getTranslations({ |
| 36 | + locale, |
| 37 | + namespace: "epoch1000.validator.card", |
| 38 | + }); |
| 39 | + const sp = await searchParams; |
| 40 | + const survived = first(sp.s) || "0"; |
| 41 | + const capped = first(sp.x) === "1"; |
| 42 | + const firstEpoch = first(sp.fe); |
| 43 | + const tier = tierFor(parseInt(survived, 10) || 0); |
| 44 | + const survivedLabel = `${survived}${capped ? "+" : ""}`; |
| 45 | + const title = t("meta.title", { survived: survivedLabel }); |
| 46 | + const description = t( |
| 47 | + firstEpoch |
| 48 | + ? "meta.description.withFirstEpoch" |
| 49 | + : "meta.description.withoutFirstEpoch", |
| 50 | + { |
| 51 | + survived: survivedLabel, |
| 52 | + firstEpoch, |
| 53 | + tierLine: t(`tiers.${tier.id}.line`), |
| 54 | + }, |
| 55 | + ); |
| 56 | + const image = `/api/epoch1000/og?${ogQuery(sp, locale)}`; |
| 57 | + return { |
| 58 | + title, |
| 59 | + description, |
| 60 | + alternates: getAlternates("/epoch1000/validator/card", locale), |
| 61 | + openGraph: { |
| 62 | + title, |
| 63 | + description, |
| 64 | + images: [{ url: image, width: 1200, height: 630 }], |
| 65 | + }, |
| 66 | + twitter: { |
| 67 | + card: "summary_large_image", |
| 68 | + title, |
| 69 | + description, |
| 70 | + images: [image], |
| 71 | + }, |
| 72 | + }; |
| 73 | +} |
| 74 | + |
| 75 | +export default async function ValidatorCardPage({ |
| 76 | + params, |
| 77 | + searchParams, |
| 78 | +}: Props) { |
| 79 | + const { locale } = await params; |
| 80 | + const t = await getTranslations({ |
| 81 | + locale, |
| 82 | + namespace: "epoch1000.validator.card", |
| 83 | + }); |
| 84 | + const sp = await searchParams; |
| 85 | + const query = ogQuery(sp, locale); |
| 86 | + const survived = Math.max(0, parseInt(first(sp.s), 10) || 0); |
| 87 | + const capped = first(sp.x) === "1"; |
| 88 | + const firstEpoch = first(sp.fe); |
| 89 | + const voteAccount = first(sp.w); |
| 90 | + const tier = tierFor(survived); |
| 91 | + const tierName = t(`tiers.${tier.id}.name`); |
| 92 | + const survivedLabel = `${survived}${capped ? "+" : ""}`; |
| 93 | + const voteAccountLabel = voteAccount || t("summary.defaultVoteAccount"); |
| 94 | + |
| 95 | + return ( |
| 96 | + <main className="w-full max-w-3xl mx-auto px-5 sm:px-8 py-12 sm:py-20 flex flex-col items-center text-center gap-8 sm:gap-10 min-h-screen"> |
| 97 | + <header className="flex flex-col items-center gap-4 sm:gap-5"> |
| 98 | + <p className="font-brand-mono text-xs sm:text-sm tracking-[0.2em] text-ep-dust uppercase"> |
| 99 | + {t("eyebrow")} |
| 100 | + </p> |
| 101 | + <h1 |
| 102 | + className="font-black tracking-tight text-4xl sm:text-6xl leading-none" |
| 103 | + style={{ color: tier.color }} |
| 104 | + > |
| 105 | + {t("heading", { survived: survivedLabel })} |
| 106 | + </h1> |
| 107 | + <p className="text-sm sm:text-base text-ep-dim max-w-xl"> |
| 108 | + {t.rich( |
| 109 | + firstEpoch ? "summary.withFirstEpoch" : "summary.withoutFirstEpoch", |
| 110 | + { |
| 111 | + voteAccountLabel, |
| 112 | + survived: survivedLabel, |
| 113 | + firstEpoch, |
| 114 | + voteAccount: (chunks) => |
| 115 | + voteAccount ? ( |
| 116 | + <span className="font-mono text-ep-ink">{chunks}</span> |
| 117 | + ) : ( |
| 118 | + <>{chunks}</> |
| 119 | + ), |
| 120 | + strong: (chunks) => ( |
| 121 | + <span className="font-semibold text-ep-ink">{chunks}</span> |
| 122 | + ), |
| 123 | + }, |
| 124 | + )} |
| 125 | + </p> |
| 126 | + </header> |
| 127 | + |
| 128 | + <Reveal className="w-full"> |
| 129 | + <img |
| 130 | + src={`/api/epoch1000/og?${query}`} |
| 131 | + alt={t("imageAlt", { tier: tierName, survived: survivedLabel })} |
| 132 | + className="w-full rounded-xl border border-ep-edge" |
| 133 | + style={{ boxShadow: `0 20px 100px -30px ${tier.color}66` }} |
| 134 | + width={1200} |
| 135 | + height={630} |
| 136 | + /> |
| 137 | + </Reveal> |
| 138 | + |
| 139 | + <Reveal className="flex flex-col items-center gap-6 sm:gap-8"> |
| 140 | + <div className="flex flex-col items-center gap-3"> |
| 141 | + <div className="flex flex-wrap justify-center gap-3"> |
| 142 | + <Link |
| 143 | + href="/epoch1000/validator#checker" |
| 144 | + className="bg-ep-ink text-ep-void font-semibold rounded-full px-7 py-3 text-sm hover:bg-ep-dim transition-colors duration-200" |
| 145 | + > |
| 146 | + {t("ctaCheck")} |
| 147 | + </Link> |
| 148 | + <Link |
| 149 | + href="/epoch1000/validator" |
| 150 | + className="border border-ep-edge rounded-full px-7 py-3 text-sm text-ep-dim hover:text-ep-ink transition-colors duration-200" |
| 151 | + > |
| 152 | + {t("ctaExplore")} |
| 153 | + </Link> |
| 154 | + </div> |
| 155 | + <p className="text-xs text-ep-dust">{t("privacyNote")}</p> |
| 156 | + </div> |
| 157 | + </Reveal> |
| 158 | + </main> |
| 159 | + ); |
| 160 | +} |
0 commit comments