Data-driven UI

src/content/contract-addresses.mdx

@@ -5,33 +5,55 @@ description: The addresses of smart contracts.
 import { Table, Tabs, Code } from "nextra/components";
 import HumanodeChainInfo from "../components/HumanodeChainInfo";
 import BridgedChainsInfo from "../components/BridgedChainsInfo";
+import {
+  bridgedChainsDisplayOrder,
+  stages,
+  stagesDisplayOrder,
+} from "../data/stages";
 
 # Contract Addresses
 
 ## Humanode
 
 See the chain details at [Chains](https://link.humanode.io/docs/chains).
 
-<Tabs items={["Mainnet", "Testnet 5"]}>
-  <Tabs.Tab>
-    <HumanodeChainInfo
-      biomapperAddress="0x45E7F628eFd31774De8299EABC80D73Be3E751B3"
-      biomapperLogAddress="0x877Bb6c2d22918563c4688e68b62c2F678Cc0BFD"
-      uiUrl="https://mainnet.biomapper.hmnd.app/"
-    />
-  </Tabs.Tab>
-  <Tabs.Tab>
-    <HumanodeChainInfo
-      biomapperAddress="0x82309C161eD219A0f36C5915A4a3e710B1141C7C"
-      biomapperLogAddress="0x3f2B3E471b207475519989369d5E4F2cAbd0A39F"
-      uiUrl="https://testnet5.biomapper.hmnd.app/"
-    />
-  </Tabs.Tab>
+<Tabs
+  storageKey="stage"
+  items={stagesDisplayOrder.map((stageId) => stages[stageId].displayName)}
+>
+  {stagesDisplayOrder.map((stageId) => (
+    <Tabs.Tab key={stageId}>
+      <HumanodeChainInfo
+        biomapperAddress={stages[stageId].humanode.addresses.biomapper}
+        biomapperLogAddress={stages[stageId].humanode.addresses.biomapperLog}
+        uiUrl={stages[stageId].humanode.uiUrl}
+      />
+    </Tabs.Tab>
+  ))}
 </Tabs>
 
 You can find smart contract descriptions
 at [Biomapper SDK docs](https://link.humanode.io/docs/biomapper-sdk).
 
 ## Bridged Chains
 
-<BridgedChainsInfo chains={[]} />
+<Tabs
+  storageKey="stage"
+  items={stagesDisplayOrder.map((stageId) => stages[stageId].displayName)}
+>
+  {stagesDisplayOrder.map((stageId) => (
+    <Tabs.Tab key={stageId}>
+      <BridgedChainsInfo
+        chains={bridgedChainsDisplayOrder.map((bridgedChainId) => {
+          const bridgedChainInfo = stages[stageId].bridged[bridgedChainId];
+          return {
+            chainName: bridgedChainInfo.displayName,
+            addresses: {
+              bridgedBiomapper: bridgedChainInfo.addresses.bridgedBiomapper,
+            },
+          };
+        })}
+      />
+    </Tabs.Tab>
+  ))}
+</Tabs>

src/data/stages.derived.ts

@@ -0,0 +1,16 @@
+// This file is not supposed to be edited when the data is edited.
+// It contains mainly the support types and values that are derived from
+// the manually entered values.
+
+import { TuplifyUnionAnyOrder } from "../types/unionToTuple";
+import { bridgedChainIds, stages } from "./stages";
+
+export type Stages = typeof stages;
+
+export type StageId = keyof Stages;
+
+export type StageIdsOrder = TuplifyUnionAnyOrder<StageId>;
+
+export type BridgedChainId = (typeof bridgedChainIds)[number];
+
+export type BridgedChainIdsOrder = TuplifyUnionAnyOrder<BridgedChainId>;

src/data/stages.internal.ts

@@ -0,0 +1,13 @@
+// This file is not supposed to be edited when the data is edited.
+// This file not supposed to be imported from the outside of the data dir.
+// It contains mainly the support types and values needed for strict type
+// definitions of the data.
+
+import { BridgedChainId } from "./stages.derived";
+import { Stage } from "./stages.types";
+
+// Any stages, but each must have same bridged chains.
+export type StagesShape = Record<string, Stage<BridgedChainId>>;
+
+// Any shape of a list of bridged chain ids.
+export type BridgedChainIdsShape = string[];

src/data/stages.ts

@@ -0,0 +1,38 @@
+import { BridgedChainIdsOrder, StageIdsOrder } from "./stages.derived";
+import { BridgedChainIdsShape, StagesShape } from "./stages.internal";
+
+// Wait for announcements!
+export const bridgedChainIds = [] as const satisfies BridgedChainIdsShape;
+
+export const stages = {
+  mainnet: {
+    displayName: "Mainnet",
+    humanode: {
+      addresses: {
+        biomapper: "0x45E7F628eFd31774De8299EABC80D73Be3E751B3",
+        biomapperLog: "0x877Bb6c2d22918563c4688e68b62c2F678Cc0BFD",
+      },
+      uiUrl: "https://mainnet.biomapper.hmnd.app/",
+    },
+    bridged: {},
+  },
+  testnet5: {
+    displayName: "Testnet 5",
+    humanode: {
+      addresses: {
+        biomapper: "0x82309C161eD219A0f36C5915A4a3e710B1141C7C",
+        biomapperLog: "0x3f2B3E471b207475519989369d5E4F2cAbd0A39F",
+      },
+      uiUrl: "https://testnet5.biomapper.hmnd.app/",
+    },
+    bridged: {},
+  },
+} as const satisfies StagesShape;
+
+export const stagesDisplayOrder = [
+  "mainnet",
+  "testnet5",
+] as const satisfies StageIdsOrder;
+
+export const bridgedChainsDisplayOrder =
+  [] as const satisfies BridgedChainIdsOrder;

src/data/stages.types.ts

@@ -0,0 +1,22 @@
+import { Hex } from "../types/Hex";
+
+export type HumanodeChainInfo = {
+  addresses: {
+    biomapper: Hex;
+    biomapperLog: Hex;
+  };
+  uiUrl: string;
+};
+
+export type BridgedChainInfo = {
+  displayName: string;
+  addresses: {
+    bridgedBiomapper: Hex;
+  };
+};
+
+export type Stage<BridgedChainIds extends string> = {
+  displayName: string;
+  humanode: HumanodeChainInfo;
+  bridged: Record<BridgedChainIds, BridgedChainInfo>;
+};

src/types/Hex.ts

@@ -0,0 +1 @@
+export type Hex = `0x${string}`;

src/types/unionToTuple.ts

@@ -0,0 +1,32 @@
+// Fixed order.
+
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+  k: infer I,
+) => void
+  ? I
+  : never;
+
+type LastOf<T> =
+  UnionToIntersection<T extends any ? () => T : never> extends () => infer R
+    ? R
+    : never;
+
+type Push<T extends any[], V> = [...T, V];
+
+export type TuplifyUnionFixedOrder<
+  T,
+  L = LastOf<T>,
+  N = [T] extends [never] ? true : false,
+> = true extends N ? [] : Push<TuplifyUnionFixedOrder<Exclude<T, L>>, L>;
+
+// Any order.
+
+type TuplifyUnionAnyOrderRecurse<U extends string> = {
+  [S in U]: Exclude<U, S> extends never
+    ? [S]
+    : [...TuplifyUnionAnyOrderRecurse<Exclude<U, S>>, S];
+}[U];
+
+export type TuplifyUnionAnyOrder<U extends string | never> = [U] extends [never]
+  ? []
+  : TuplifyUnionAnyOrderRecurse<U>;