feat(stake): count toward the next milestone, not just the 100k ladder (#252)

* feat(stake): count toward the next milestone, not just the 100k ladder

The campaign tells people to "track progress toward the 10,000 MOR milestone",
but the only progress on the page measured against SUBNET_GOAL_MOR (100,000).
At 7,453 MOR staked it answered 7% to a reader who arrived expecting 74% — a
tenth of what the announcement had promised, from a page that was not wrong,
just answering a different question.

Lead with the active tier: "7,453 / 10,000 MOR — 74%" plus what it unlocks. The
100k bar stays underneath as macro context, demoted to micro type and a neutral
fill so green marks the figure that matters now.

Derived, never pinned to 10k. `nextMilestone()` returns the lowest tier the
subnet has not reached, so the day 10k lands the page starts counting toward
15k on its own; once every tier is behind us it returns null and the block says
so instead of dividing by a milestone that no longer exists.

`floor` rather than `round` on both percentages: at 9,999 of 10,000 rounding
prints "100%" next to a milestone that has not been reached, which is the same
kind of misreport this change exists to remove.

Same on-chain figure as before — one read, two framings, no second source.
useGnarsSubnet now reports loading/ready/error because `totalStaked` starts at
0, and rendering that 0 as fact claims "nobody has staked" while the RPC is in
flight. A failed refetch after a good read keeps the last good figure.

`milestones.<id>` now holds only the deliverable, with `milestoneRow` composing
"{n} MOR staked: {what}" for the ladder, so the indicator and the checklist
share one copy source instead of duplicating twelve strings across two locales.
Drops `goal` and `morStaked`, dead once the old header went. EN and pt-BR stay
at 287 keys each, same order.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix(stake): keep the tier figure and its percentage on one line at 390px

At 390px the pair needed 252px of a 254px column — two pixels short — so the
percentage wrapped onto its own line, left-aligned under the figure, where it
read as a separate statistic rather than the share OF the number above it, and
pushed the progress bar down.

One step down the type scale at base, full size from `sm`. The pair now needs
217px, leaving 37px of headroom — which also covers the wider labels the ladder
produces later ("10,000 / 15,000 MOR" is longer than today's). Desktop is
untouched: still 24px, still one line.

No structural change — three utility classes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: sktbrd

messages/en/stake.json

@@ -278,22 +278,29 @@
     "subnet": {
       "title": "Co-sponsor the Gnars Builder subnet",
       "desc": "This one pays you nothing. Staked MOR powers the Gnars Builder subnet, which funds what the DAO ships. Your MOR stays yours and unlocks 7 days after you stake.",
-      "morStaked": "MOR staked",
-      "goal": "goal {n, number}",
       "cta": "Back the subnet",
       "milestonesTitle": "Amplification milestones",
       "milestonesNote": "As staked MOR grows, Gnars amplifies Morpheus — Gnars's own commitment, building on Morpheus's open protocol.",
+      "milestoneRow": "{n, number} MOR staked: {what}",
+      "nextMilestone": {
+        "label": "Next milestone",
+        "unlocks": "Unlocks: {what}",
+        "loading": "Reading the subnet…",
+        "error": "Can't reach the subnet right now",
+        "allDone": "Every milestone reached",
+        "macro": "{staked, number} of {target, number} MOR toward the full ladder"
+      },
       "firmness": {
         "committed": "committed",
         "proposed": "proposed"
       },
       "milestones": {
-        "10k": "{n, number} MOR staked: Morpheus ad on Gnars TV",
-        "15k": "{n, number} MOR staked: Morpheus on the Gnars banner + a pinned post",
-        "25k": "{n, number} MOR staked: Morpheus featured in a Gnars edit",
-        "30k": "{n, number} MOR staked: Morpheus swag in the Skater Vaults",
-        "50k": "{n, number} MOR staked: Morpheus at an IRL Gnars activation",
-        "100k": "{n, number} MOR staked: Morpheus flagship spotlight"
+        "10k": "Morpheus ad on Gnars TV",
+        "15k": "Morpheus on the Gnars banner + a pinned post",
+        "25k": "Morpheus featured in a Gnars edit",
+        "30k": "Morpheus swag in the Skater Vaults",
+        "50k": "Morpheus at an IRL Gnars activation",
+        "100k": "Morpheus flagship spotlight"
       },
       "roadmap": {
         "title": "What comes next",

messages/pt-br/stake.json

@@ -278,22 +278,29 @@
     "subnet": {
       "title": "Co-patrocine a subnet Gnars Builder",
       "desc": "Esse aqui não te paga nada. O MOR em stake sustenta a subnet Gnars Builder, que financia o que a DAO entrega. Seu MOR continua seu e libera 7 dias depois do stake.",
-      "morStaked": "MOR em stake",
-      "goal": "meta {n, number}",
       "cta": "Apoiar a subnet",
       "milestonesTitle": "Metas de amplificação",
       "milestonesNote": "Conforme o MOR em stake cresce, a Gnars amplifica a Morpheus — compromisso unilateral da Gnars, construindo sobre o protocolo aberto da Morpheus.",
+      "milestoneRow": "{n, number} MOR em stake: {what}",
+      "nextMilestone": {
+        "label": "Próximo marco",
+        "unlocks": "Destrava: {what}",
+        "loading": "Lendo a subnet…",
+        "error": "Não dá pra ler a subnet agora",
+        "allDone": "Todos os marcos atingidos",
+        "macro": "{staked, number} de {target, number} MOR rumo à escada completa"
+      },
       "firmness": {
         "committed": "confirmado",
         "proposed": "proposto"
       },
       "milestones": {
-        "10k": "{n, number} MOR em stake: anúncio da Morpheus na Gnars TV",
-        "15k": "{n, number} MOR em stake: Morpheus no banner da Gnars + post fixado",
-        "25k": "{n, number} MOR em stake: Morpheus em destaque num edit da Gnars",
-        "30k": "{n, number} MOR em stake: swag da Morpheus nos Skater Vaults",
-        "50k": "{n, number} MOR em stake: Morpheus numa ativação IRL da Gnars",
-        "100k": "{n, number} MOR em stake: spotlight principal da Morpheus"
+        "10k": "anúncio da Morpheus na Gnars TV",
+        "15k": "Morpheus no banner da Gnars + post fixado",
+        "25k": "Morpheus em destaque num edit da Gnars",
+        "30k": "swag da Morpheus nos Skater Vaults",
+        "50k": "Morpheus numa ativação IRL da Gnars",
+        "100k": "spotlight principal da Morpheus"
       },
       "roadmap": {
         "title": "O que vem depois",

src/components/stake/GnarsStakeDialog.tsx

@@ -221,7 +221,7 @@ export function GnarsStakeDialog({ open, onOpenChange }: Props) {
                         done ? "font-semibold text-foreground" : "text-muted-foreground",
                       )}
                     >
-                      {t("milestones." + m.id, { n: m.amountMor })}{" "}
+                      {t("milestoneRow", { n: m.amountMor, what: t("milestones." + m.id) })}{" "}
                       {/* Same committed/proposed label the page ladder carries.
                           Dropping it here would make the dialog read as six firm
                           promises while the section behind it says five are not. */}

src/components/stake/SubnetSection.tsx

@@ -4,7 +4,15 @@
 // and into a section at the end of the page.
 //
 // useGnarsSubnet resolves totalStaked BEFORE it bails on a missing wallet, so the
-// goal bar paints for a disconnected visitor — this section works cold.
+// progress paints for a disconnected visitor — this section works cold.
+//
+// TWO PROGRESS READINGS, ONE FIGURE. The lead indicator counts toward the next
+// unreached tier; the thin bar under it counts toward the whole 100k ladder.
+// They exist because the campaign tells people to "track progress toward the
+// 10,000 MOR milestone" while the only bar here used to measure against 100,000
+// — so at 7,453 MOR the page answered 7% to a reader expecting 74%, a tenth of
+// what the announcement had promised. The lead figure is derived from
+// `nextMilestone()`, never pinned to 10k, so it walks the ladder on its own.
 //
 // Colour rule from the spec: this is the ONLY section allowed to use Morpheus
 // green, and only on the progress fill and the MOR total. The CTA is gold like
@@ -44,7 +52,12 @@ import {
 import { Button } from "@/components/ui/button";
 import { useGnarsSubnet } from "@/hooks/use-gnars-subnet";
 import { useUserAddress } from "@/hooks/use-user-address";
-import { isMilestoneDone, SUBNET_GOAL_MOR, SUBNET_MILESTONES } from "@/lib/stake-milestones";
+import {
+  isMilestoneDone,
+  nextMilestone,
+  SUBNET_GOAL_MOR,
+  SUBNET_MILESTONES,
+} from "@/lib/stake-milestones";
 import { cn } from "@/lib/utils";
 
 const fmtMor = (n: number, locale: string) =>
@@ -54,10 +67,20 @@ export function SubnetSection() {
   const t = useTranslations("stake.page.subnet");
   const locale = useLocale();
   const { address: you } = useUserAddress();
-  const { totalStaked } = useGnarsSubnet(you);
+  const { totalStaked, status } = useGnarsSubnet(you);
   const [open, setOpen] = useState(false);
 
-  const pct = Math.min(100, (totalStaked / SUBNET_GOAL_MOR) * 100);
+  // Two readings of the same on-chain figure, never a second source: `next` is
+  // the tier the campaign tells people to watch, `macro` is the whole ladder.
+  // Both percentages measure from zero, which is what makes "7,453 / 10,000 —
+  // 74%" arithmetic a visitor can check rather than a number they must trust.
+  //
+  // `floor`, not `round`: at 9,999 of 10,000 rounding prints "100%" beside a
+  // milestone that has not been reached, which is the same kind of lie this
+  // indicator exists to remove. Flooring says 99% until it is actually true.
+  const next = nextMilestone(totalStaked);
+  const tierPct = next ? Math.min(100, Math.floor((totalStaked / next.amountMor) * 100)) : 100;
+  const macroPct = Math.min(100, Math.floor((totalStaked / SUBNET_GOAL_MOR) * 100));
 
   return (
     // The section IS its own card (no wrapping island, no inner panel): header,
@@ -70,29 +93,62 @@ export function SubnetSection() {
       <RevealItem delay={50}>
         <div className="flex items-start justify-between gap-4">
           <div className="min-w-0 flex-1">
-            <div className="mb-2 flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
-              <span className="font-mono text-lg font-bold tabular-nums">
-                <span className={MOR_TEXT}>{fmtMor(totalStaked, locale)}</span>{" "}
-                <span className={cn("text-xs font-normal", MUTED)}>{t("morStaked")}</span>
-              </span>
-              <span className={cn("font-mono text-xs tabular-nums", MICRO)}>
-                {t("goal", { n: SUBNET_GOAL_MOR })}
-              </span>
-            </div>
-            {/* The fill is full width and scaled, not a growing `width`: animating
-                width lays out and paints on every frame, a transform does neither.
-                500ms is over the UI budget on purpose — this is a value arriving
-                from chain, and it should be legible as "it filled to here". */}
-            <div className="h-1.5 w-full overflow-hidden rounded-full bg-foreground/[0.10]">
-              <div
-                // ease token: EASE_OUT in src/lib/motion.ts.
-                className={cn(
-                  "h-full w-full origin-left rounded-full transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
-                  MOR_FILL,
-                )}
-                style={{ transform: `scaleX(${pct / 100})` }}
-              />
-            </div>
+            <p className={cn("font-mono text-[11px] tracking-[0.08em] uppercase", MICRO)}>
+              {t("nextMilestone.label")}
+            </p>
+
+            {/* Loading and error are their own states, never a rendered 0. The
+                hook starts `totalStaked` at 0, and painting that as a figure
+                would read as "nobody has staked" mid-flight. */}
+            {status !== "ready" ? (
+              <p className={cn("mt-1.5 text-sm", MUTED)}>
+                {t(status === "loading" ? "nextMilestone.loading" : "nextMilestone.error")}
+              </p>
+            ) : next ? (
+              <>
+                {/* One step down at base, full size from sm. At 390px the pair
+                    needed 252px of a 254px column — two pixels short — so the
+                    percentage wrapped onto its own line and read as a separate
+                    statistic instead of the share OF the figure above it. The
+                    margin also shrinks as the ladder climbs ("10,000 / 15,000
+                    MOR" is wider than today's label), so this is not just about
+                    the current number. */}
+                <div className="mt-1 flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
+                  <span className="font-mono text-xl font-bold tabular-nums sm:text-2xl">
+                    <span className={MOR_TEXT}>{fmtMor(totalStaked, locale)}</span>
+                    <span className={cn("text-sm font-normal sm:text-base", MUTED)}>
+                      {" / "}
+                      {fmtMor(next.amountMor, locale)} MOR
+                    </span>
+                  </span>
+                  <span className="font-mono text-xl font-bold tabular-nums sm:text-2xl">
+                    {tierPct}%
+                  </span>
+                </div>
+
+                {/* The fill is full width and scaled, not a growing `width`:
+                    animating width lays out and paints on every frame, a
+                    transform does neither. 500ms is over the UI budget on
+                    purpose — this is a value arriving from chain, and it should
+                    be legible as "it filled to here". */}
+                <div className="mt-2 h-2.5 w-full overflow-hidden rounded-full bg-foreground/[0.10]">
+                  <div
+                    // ease token: EASE_OUT in src/lib/motion.ts.
+                    className={cn(
+                      "h-full w-full origin-left rounded-full transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
+                      MOR_FILL,
+                    )}
+                    style={{ transform: `scaleX(${tierPct / 100})` }}
+                  />
+                </div>
+
+                <p className="mt-2 text-sm">
+                  {t("nextMilestone.unlocks", { what: t(`milestones.${next.id}`) })}
+                </p>
+              </>
+            ) : (
+              <p className="mt-1.5 text-sm font-semibold">{t("nextMilestone.allDone")}</p>
+            )}
           </div>
           <Image
             src="/logos/morpheus.webp"
@@ -103,6 +159,31 @@ export function SubnetSection() {
           />
         </div>
 
+        {/* The 100k ladder, demoted to context. It answers "how far through the
+            whole programme", which is a different question from the one above —
+            and the one the campaign does NOT ask people to track. Micro type and
+            a neutral 1px fill: green stays on the figure that matters now, so
+            two bars never compete for the same attention. */}
+        {status === "ready" ? (
+          <div className="mt-5">
+            <div className="flex items-baseline justify-between gap-3">
+              <span className={cn("font-mono text-xs tabular-nums", MICRO)}>
+                {t("nextMilestone.macro", {
+                  staked: Math.round(totalStaked),
+                  target: SUBNET_GOAL_MOR,
+                })}
+              </span>
+              <span className={cn("font-mono text-xs tabular-nums", MICRO)}>{macroPct}%</span>
+            </div>
+            <div className="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-foreground/[0.08]">
+              <div
+                className="h-full w-full origin-left rounded-full bg-foreground/30 transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none"
+                style={{ transform: `scaleX(${macroPct / 100})` }}
+              />
+            </div>
+          </div>
+        ) : null}
+
         {/* The ladder needs naming and framing before it is read: without these
             two lines it looks like a reward schedule, which is the other axis
             entirely and the one the stake dialog's disclaimer contradicts. */}
@@ -125,7 +206,7 @@ export function SubnetSection() {
                   )}
                 />
                 <span className={done ? "" : MUTED}>
-                  {t(`milestones.${m.id}`, { n: m.amountMor })}{" "}
+                  {t("milestoneRow", { n: m.amountMor, what: t(`milestones.${m.id}`) })}{" "}
                   {/* Inline rather than a right-aligned column: these labels are
                       long enough to wrap on a phone, and a pinned column would
                       squeeze them to two words a line. Not a PILL either — a pill

src/hooks/use-gnars-subnet.ts

@@ -3,42 +3,83 @@
 // Read-only view of the Gnars Builder subnet on Base: the wallet's staked MOR +
 // unlock time + spendable MOR balance, and the subnet's total staked. Nothing
 // here moves money.
-
 import { useEffect, useState } from "react";
-import { createPublicClient, http, fallback, formatUnits, type Address } from "viem";
+import { createPublicClient, fallback, formatUnits, http, type Address } from "viem";
 import { base } from "viem/chains";
 import {
-  BUILDERS, GNARS_SUBNET_ID, MOR_BASE, MOR_DECIMALS, SUBNET_WITHDRAW_LOCK_SECONDS,
-  BASE_RPCS, buildersAbi, erc20AbiMin, type GnarsSubnetPosition,
+  BASE_RPCS,
+  BUILDERS,
+  buildersAbi,
+  erc20AbiMin,
+  GNARS_SUBNET_ID,
+  MOR_BASE,
+  MOR_DECIMALS,
+  SUBNET_WITHDRAW_LOCK_SECONDS,
+  type GnarsSubnetPosition,
 } from "@/lib/morpheus-builder";
 
-const client = createPublicClient({ chain: base, transport: fallback(BASE_RPCS.map((u) => http(u))) });
+const client = createPublicClient({
+  chain: base,
+  transport: fallback(BASE_RPCS.map((u) => http(u))),
+});
+
+/**
+ * `loading` until the subnet read lands, then `ready`; `error` only if it never
+ * landed at all. Callers need this because `totalStaked` starts at 0, and a UI
+ * that renders that 0 as a real figure states "nobody has staked" while the RPC
+ * is still in flight — a confident wrong number, which is worse than a spinner.
+ *
+ * Once `ready`, a later failed refetch keeps `ready` and the last good figure
+ * rather than blanking a number the visitor already read.
+ */
+export type GnarsSubnetStatus = "loading" | "ready" | "error";
 
 export type GnarsSubnetState = {
   position: GnarsSubnetPosition | null;
   /** Total MOR staked across all backers of the subnet. */
   totalStaked: number;
+  status: GnarsSubnetStatus;
 };
 
 export function useGnarsSubnet(wallet?: string, nonce = 0): GnarsSubnetState {
-  const [state, setState] = useState<GnarsSubnetState>({ position: null, totalStaked: 0 });
+  const [state, setState] = useState<GnarsSubnetState>({
+    position: null,
+    totalStaked: 0,
+    status: "loading",
+  });
 
   useEffect(() => {
     let cancelled = false;
 
     (async () => {
       try {
         const subnetData = await client.readContract({
-          address: BUILDERS, abi: buildersAbi, functionName: "subnetsData", args: [GNARS_SUBNET_ID],
+          address: BUILDERS,
+          abi: buildersAbi,
+          functionName: "subnetsData",
+          args: [GNARS_SUBNET_ID],
         });
         const totalStaked = Number(formatUnits(subnetData[1], MOR_DECIMALS));
-        if (!cancelled) setState((s) => ({ ...s, totalStaked }));
+        if (!cancelled) setState((s) => ({ ...s, totalStaked, status: "ready" }));
 
-        if (!wallet) { if (!cancelled) setState((s) => ({ ...s, position: null })); return; }
+        if (!wallet) {
+          if (!cancelled) setState((s) => ({ ...s, position: null }));
+          return;
+        }
 
         const [user, bal] = await Promise.all([
-          client.readContract({ address: BUILDERS, abi: buildersAbi, functionName: "usersData", args: [wallet as Address, GNARS_SUBNET_ID] }),
-          client.readContract({ address: MOR_BASE, abi: erc20AbiMin, functionName: "balanceOf", args: [wallet as Address] }),
+          client.readContract({
+            address: BUILDERS,
+            abi: buildersAbi,
+            functionName: "usersData",
+            args: [wallet as Address, GNARS_SUBNET_ID],
+          }),
+          client.readContract({
+            address: MOR_BASE,
+            abi: erc20AbiMin,
+            functionName: "balanceOf",
+            args: [wallet as Address],
+          }),
         ]);
         const lastDeposit = Number(user[0]);
         const deposited = user[2];
@@ -49,11 +90,20 @@ export function useGnarsSubnet(wallet?: string, nonce = 0): GnarsSubnetState {
         };
         if (!cancelled) setState((s) => ({ ...s, position }));
       } catch {
-        if (!cancelled) setState((s) => ({ ...s, position: null }));
+        // Only downgrade to `error` if we never had a good read. A wallet-scoped
+        // failure after the subnet total already landed must not blank it.
+        if (!cancelled)
+          setState((s) => ({
+            ...s,
+            position: null,
+            status: s.status === "ready" ? "ready" : "error",
+          }));
       }
     })();
 
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   }, [wallet, nonce]);
 
   return state;