feat: address feedback and swap tab order

Author: kemuru

public/staking-rewards.html

@@ -79,10 +79,10 @@
         return { path, label: dateMatch ? dateMatch[1] : "2021-01 & 02" };
       }
 
-      function parseSnapshots(byChainId) {
+      function parseSnapshots(snapshotsByChainId) {
         return {
-          mainnet: (byChainId?.["1"] ?? []).map(toSnapshot),
-          gnosis: (byChainId?.["100"] ?? []).map(toSnapshot),
+          mainnet: (snapshotsByChainId?.["1"] ?? []).map(toSnapshot),
+          gnosis: (snapshotsByChainId?.["100"] ?? []).map(toSnapshot),
         };
       }
 
@@ -448,8 +448,8 @@
         const [errors, setErrors] = useState([]);
         const [monthData, setMonthData] = useState(null);
         const [grandTotals, setGrandTotals] = useState(null);
-        const [activeTab, setActiveTab] = useState("Summary");
-        const [tabList, setTabList] = useState(["Summary"]);
+        const [activeTab, setActiveTab] = useState("Monthly Totals");
+        const [tabList, setTabList] = useState(["Monthly Totals"]);
         const [sourceError, setSourceError] = useState(null);
 
         // Auto-start everything on mount
@@ -527,8 +527,8 @@
 
           setMonthData(md);
           setGrandTotals(gt);
-          setTabList(["Summary", "Monthly Totals", ...sorted]);
-          setActiveTab("Summary");
+          setTabList(["Monthly Totals", "Summary", ...sorted]);
+          setActiveTab("Monthly Totals");
           setErrors(errs);
           setPhase("done");
         }
@@ -568,6 +568,9 @@
           if (!grandTotals || !monthData) return;
           const wb = XLSX.utils.book_new();
 
+          const monthlyTotalRows = sortedMonths.map((label) => monthTotalRow(label, monthData[label]));
+          addSheet(wb, "Monthly Totals", monthlyTotalRows, [14, 18, 18, 18]);
+
           const summaryRows = Object.entries(grandTotals)
             .map(([addr, t]) => ({
               Address: addr,
@@ -578,9 +581,6 @@
             .sort((a, b) => b["Grand Total PNK"] - a["Grand Total PNK"]);
           addSheet(wb, "Summary", summaryRows, [44, 20, 20, 20]);
 
-          const monthlyTotalRows = sortedMonths.map((label) => monthTotalRow(label, monthData[label]));
-          addSheet(wb, "Monthly Totals", monthlyTotalRows, [14, 18, 18, 18]);
-
           for (const label of sortedMonths) {
             const rows = monthWalletRows(monthData[label]);
             if (rows.length === 0) continue;

scripts/emit-snapshots.js

@@ -23,8 +23,14 @@ const source = path.join(root, "src", "assets", "snapshots.json");
 const claimModal = path.join(root, "src", "components", "claim-modal.js");
 const destination = path.join(root, "public", "snapshots.json");
 
-const CHAIN_IDS = ["1", "100"];
-const FILENAME_PREFIX = { 1: "snapshot-", 100: "xdai-snapshot-" };
+// Every chain the reward snapshots cover, declared once. To support a new chain, add one entry
+// here (with its filename prefix); CHAIN_IDS and the prefix lookup derive from it, so the set of
+// chains and their prefixes can never drift apart.
+const CHAINS = {
+  1: { filenamePrefix: "snapshot-" },
+  100: { filenamePrefix: "xdai-snapshot-" },
+};
+const CHAIN_IDS = Object.keys(CHAINS);
 const ENTRY = /^[A-Za-z0-9]+\/[A-Za-z0-9._-]+\.json$/;
 
 // rewards.js derives the IPFS url, the month and the chain from these strings alone, so a
@@ -35,9 +41,10 @@ function assertEntriesAreWellFormed(entries, chainId) {
       throw new Error(`snapshots.json: chain ${chainId} entry "${entry}" is not of the form "<cid>/<filename>.json"`);
     }
     const filename = entry.split("/")[1];
-    if (!filename.startsWith(FILENAME_PREFIX[chainId])) {
+    const { filenamePrefix } = CHAINS[chainId];
+    if (!filename.startsWith(filenamePrefix)) {
       throw new Error(
-        `snapshots.json: chain ${chainId} entry "${entry}" must start with "${FILENAME_PREFIX[chainId]}" ` +
+        `snapshots.json: chain ${chainId} entry "${entry}" must start with "${filenamePrefix}" ` +
           `— rewards.js tells the chains apart by that prefix.`
       );
     }
@@ -49,14 +56,27 @@ function assertEntriesAreWellFormed(entries, chainId) {
 function assertNewestMonthIsOnEveryChain(snapshots) {
   const newestMonth = (chainId) => {
     const entries = snapshots[chainId];
-    return (entries[entries.length - 1].match(/(\d{4}-\d{2})/) || [])[1];
+    const newest = entries[entries.length - 1];
+    const month = (newest.match(/(\d{4}-\d{2})/) || [])[1];
+    if (!month) {
+      throw new Error(
+        `snapshots.json: chain ${chainId}'s newest entry "${newest}" has no YYYY-MM, ` +
+          `so it can't be checked against the other chains.`
+      );
+    }
+    return month;
   };
-  const [mainnet, gnosis] = CHAIN_IDS.map(newestMonth);
-  if (mainnet !== gnosis) {
-    throw new Error(
-      `snapshots.json: newest month differs per chain (mainnet ${mainnet}, gnosis ${gnosis}). Add both, or the ` +
-        `monthly reward total will be missing a chain.`
-    );
+  const [referenceChain, ...otherChains] = CHAIN_IDS;
+  const referenceMonth = newestMonth(referenceChain);
+  for (const chainId of otherChains) {
+    const month = newestMonth(chainId);
+    if (month !== referenceMonth) {
+      throw new Error(
+        `snapshots.json: newest month differs per chain ` +
+          `(chain ${referenceChain} ${referenceMonth}, chain ${chainId} ${month}). ` +
+          `Add the missing month, or the monthly reward total will be missing a chain.`
+      );
+    }
   }
 }
 
@@ -84,6 +104,17 @@ function assertParity(snapshots) {
 }
 
 const snapshots = JSON.parse(fs.readFileSync(source, "utf8"));
+
+// Everything below is verified per chain in CHAIN_IDS, but the whole object is written out. Reject
+// any other chain so nothing reaches public/snapshots.json without being validated first.
+const unverifiedChains = Object.keys(snapshots).filter((chainId) => !CHAIN_IDS.includes(chainId));
+if (unverifiedChains.length > 0) {
+  throw new Error(
+    `snapshots.json: chain(s) ${unverifiedChains.join(", ")} are not verified. Add them to CHAINS ` +
+      `(and claim-modal.js) so they are validated before being published.`
+  );
+}
+
 for (const chainId of CHAIN_IDS) {
   if (!Array.isArray(snapshots[chainId]) || snapshots[chainId].length === 0) {
     throw new Error(`snapshots.json is missing snapshots for chain ${chainId}`);

src/helpers/rewards.js

@@ -3,9 +3,9 @@ import PNKAbi from "../assets/contracts/pinakion.json";
 import Web3 from "web3";
 import { klerosboardSubgraph } from "../bootstrap/subgraph";
 import { getReadOnlyRpcUrl } from "../bootstrap/web3";
+import { IPFS_GATEWAY } from "../utils/ipfs";
 import snapshotsByChainId from "../assets/snapshots.json";
 
-const ipfsEndpoint = "https://cdn.kleros.link";
 const allSnapshotPaths = [...snapshotsByChainId["1"], ...snapshotsByChainId["100"]];
 
 function getTarget() {
@@ -47,7 +47,7 @@ function snapshotUrlsForMonth(year, month) {
   return allSnapshotPaths
     .filter((path) => filenames.some((filename) => path.endsWith(`/${filename}`)))
     .map((path) => ({
-      url: `${ipfsEndpoint}/ipfs/${path}`,
+      url: `${IPFS_GATEWAY}/ipfs/${path}`,
       isGnosis: path.includes("/xdai-snapshot-"),
     }));
 }