feat(web): predict flow with Foresight credits, slippage settings and a money-checked run

.gitignore

@@ -31,5 +31,5 @@ coverage/
 
 # agent config: shared rules and skills are committed;
 # local settings and personal notes are not
-.claude/settings.local.json
+.claude/settings.local.json*
 packages/mock-atlas/.store/

apps/indexer/package.json

@@ -12,7 +12,7 @@
     "codegen:gnosis": "envio codegen --config config.gnosis.yaml",
     "dev": "envio dev --config config.localhost.yaml",
     "dev:gnosis": "node --env-file=.env.gnosis \"$(yarn bin envio)\" dev --config config.gnosis.yaml",
-    "dev:gnosis-fork": "node --env-file=.env.gnosis-fork \"$(yarn bin envio)\" dev --config config.gnosis-fork.yaml",
+    "dev:gnosis-fork": "node --env-file=.env.gnosis-fork.example --env-file-if-exists=.env.gnosis-fork \"$(yarn bin envio)\" dev --config config.gnosis-fork.yaml",
     "start": "envio start",
     "start:local": "envio start --config config.localhost.yaml",
     "stop": "envio stop",

apps/indexer/schema.graphql

@@ -80,6 +80,10 @@ type ChildMarket {
 
   downToken: String! @index
   upToken: String! @index
+
+  "burnt alongside DOWN and UP when a set is merged back; the router takes the whole partition"
+  invalidToken: String!
+
   underlyingToken: String! @index
 
   keyword: String!

apps/indexer/src/handlers/SessionFactory.ts

@@ -144,6 +144,7 @@ indexer.onEvent({ contract: "SessionFactory", event: "ChildMarketDeployed" }, as
     upperBound: market.upperBound,
     downToken: market.down,
     upToken: market.up,
+    invalidToken: market.invalid,
     underlyingToken: market.underlying,
     displayName: display?.displayName,
     color: display?.color,

apps/indexer/src/utils/contracts/fetchChildMarket.ts

@@ -14,6 +14,7 @@ export const fetchChildMarket = createEffect(
       upperBound: S.bigint,
       down: S.string,
       up: S.string,
+      invalid: S.string,
       underlying: S.string,
     }),
     cache: true,
@@ -24,13 +25,14 @@ export const fetchChildMarket = createEffect(
     const market = getSeerMarketContract(input.address);
 
     try {
-      // outcome 0 is DOWN and outcome 1 is UP
-      const [marketName, lowerBound, upperBound, down, up, underlying] = await Promise.all([
+      // outcome 0 is DOWN and 1 is UP; Seer wraps INVALID one past the named outcomes
+      const [marketName, lowerBound, upperBound, down, up, invalid, underlying] = await Promise.all([
         client.readContract({ ...market, functionName: "marketName" }),
         client.readContract({ ...market, functionName: "lowerBound" }),
         client.readContract({ ...market, functionName: "upperBound" }),
         client.readContract({ ...market, functionName: "wrappedOutcome", args: [0n] }),
         client.readContract({ ...market, functionName: "wrappedOutcome", args: [1n] }),
+        client.readContract({ ...market, functionName: "wrappedOutcome", args: [2n] }),
         client.readContract({ ...market, functionName: "parentWrappedOutcome" }),
       ]);
 
@@ -40,6 +42,7 @@ export const fetchChildMarket = createEffect(
         upperBound,
         down: down[0].toLowerCase(),
         up: up[0].toLowerCase(),
+        invalid: invalid[0].toLowerCase(),
         underlying: underlying[0].toLowerCase(),
       };
     } catch (error) {
@@ -51,6 +54,7 @@ export const fetchChildMarket = createEffect(
         upperBound: 0n,
         down: UNAVAILABLE,
         up: UNAVAILABLE,
+        invalid: UNAVAILABLE,
         underlying: UNAVAILABLE,
       };
     }

apps/indexer/tests/handlers/SessionFactory.test.ts

@@ -38,18 +38,20 @@ const PARENT_OUTCOME_0 = "0x00000000000000000000000000000000000000a1" as const;
 const PARENT_OUTCOME_1 = "0x00000000000000000000000000000000000000a2" as const;
 const CHILD_MARKET_0 = "0x0000000000000000000000000000000000000c00" as const;
 const CHILD_MARKET_1 = "0x0000000000000000000000000000000000000c01" as const;
+const CHILD_0_INVALID = "0x0000000000000000000000000000000000000d10" as const;
+const CHILD_1_INVALID = "0x0000000000000000000000000000000000000d11" as const;
 const DEPLOYER = "0x0000000000000000000000000000000000000de9" as const;
 
 const ESCAPING_METADATA_URI = "ipfs://../../admin/purge";
 
 /** `wrappedOutcome` and `parentWrappedOutcome` both answer (token, data). */
 const wrapped = (token: string) => [token, "0x"];
 
-const childReads = (down: string, up: string, underlying: string) => ({
+const childReads = (down: string, up: string, underlying: string, invalid: string) => ({
   marketName: CHILD_MARKET_NAME,
   lowerBound: LOWER_BOUND,
   upperBound: UPPER_BOUND,
-  wrappedOutcome: [wrapped(down), wrapped(up)],
+  wrappedOutcome: [wrapped(down), wrapped(up), wrapped(invalid)],
   parentWrappedOutcome: wrapped(underlying),
 });
 
@@ -63,8 +65,8 @@ const marketReads: Record<string, Record<string, unknown>> = {
     wrappedOutcome: [wrapped(PARENT_OUTCOME_0), wrapped(PARENT_OUTCOME_1), wrapped(PARENT_INVALID)],
   },
   // a child on outcome i prices against the parent's wrapped outcome i
-  [CHILD_MARKET_0]: childReads(CHILD_0_DOWN, CHILD_0_UP, PARENT_OUTCOME_0),
-  [CHILD_MARKET_1]: childReads(CHILD_1_DOWN, CHILD_1_UP, PARENT_OUTCOME_1),
+  [CHILD_MARKET_0]: childReads(CHILD_0_DOWN, CHILD_0_UP, PARENT_OUTCOME_0, CHILD_0_INVALID),
+  [CHILD_MARKET_1]: childReads(CHILD_1_DOWN, CHILD_1_UP, PARENT_OUTCOME_1, CHILD_1_INVALID),
   [CHILD_0_DOWN]: { decimals: 18, symbol: "DUNE0-DOWN" },
   [CHILD_0_UP]: { decimals: 18, symbol: "DUNE0-UP" },
   [PARENT_OUTCOME_0]: { decimals: 18, symbol: "VILLENEUVE" },
@@ -224,6 +226,7 @@ describe("SessionFactory indexing", () => {
 
     const child = await indexer.ChildMarket.getOrThrow(CHILD_MARKET_0);
     t.expect(child.session_id).toBe("0");
+    t.expect(child.invalidToken).toBe(CHILD_0_INVALID);
     t.expect(child.parentOutcomeIndex).toBe(0n);
     t.expect(child.parentOutcome).toBe("Villeneuve");
     t.expect(child.marketName).toBe(CHILD_MARKET_NAME);

apps/indexer/tests/support/harness.ts

@@ -113,6 +113,7 @@ export const seedMarket = async (indexer: TestIndexer, market: SeededMarket) =>
     upperBound: market.upperBound,
     downToken: market.down,
     upToken: market.up,
+    invalidToken: `${market.id}-invalid`,
     underlyingToken: market.underlying,
     displayName: undefined,
     color: undefined,

apps/web/.env.gnosis-fork.example

@@ -1,3 +1,4 @@
+NEXT_PUBLIC_REOWN_PROJECT_ID=fork-placeholder
 NEXT_PUBLIC_ENABLE_LOCAL_CHAIN=false
 NEXT_PUBLIC_GNOSIS_RPC=http://127.0.0.1:8545
 NEXT_PUBLIC_SUBGRAPH_URL=http://localhost:8080/v1/graphql

apps/web/README.md

@@ -23,6 +23,10 @@ fails the build with the offending names rather than at runtime.
 | `NEXT_PUBLIC_SUBGRAPH_URL`       | yes      | Indexer GraphQL endpoint. Locally `http://localhost:8080/v1/graphql`   |
 | `NEXT_PUBLIC_ENABLE_LOCAL_CHAIN` | no       | Unset follows `NODE_ENV`; `"false"` offers gnosis only                 |
 
+In production, point `NEXT_PUBLIC_GNOSIS_RPC` at an archive node. Finding a held send reads the
+owner's transaction count at past blocks; a pruned node refuses those reads, and the app falls back
+to reading blocks one by one from the send's block to the head, which is slow.
+
 ```bash
 cp .env.gnosis.example .env.gnosis
 yarn dev:gnosis

apps/web/e2e/fixtures/hardhat.ts

@@ -1,6 +1,18 @@
 import { test as base } from "@playwright/test";
-import { createTestClient, http, publicActions, walletActions } from "viem";
-import { hardhat } from "viem/chains";
+import {
+  createTestClient,
+  encodeFunctionData,
+  http,
+  isAddressEqual,
+  parseAbi,
+  parseEther,
+  publicActions,
+  walletActions,
+  type Address,
+} from "viem";
+import { gnosis, hardhat } from "viem/chains";
+
+import { LOCAL_RPC_URL } from "@/config/chains";
 
 const client = createTestClient({
   chain: hardhat,
@@ -18,3 +30,39 @@ export const test = base.extend<{ hardhat: HardhatClient }>({
     await use(client);
   },
 });
+
+/** Gnosis' Foresight credits governor: an admin of the token and the manager's governor. */
+const CREDITS_GOVERNOR: Address = "0x4EDCA105188a0783Ab3A6f09c50567D1E3F8591D";
+
+const CREDITS_ADMIN_ABI = parseAbi([
+  "function governor() view returns (address)",
+  "function mint(address to, uint256 amount)",
+]);
+
+// signs as chain 100, which the gnosis fork answers to; the `hardhat` client signs as 31337
+const fork = createTestClient({ chain: gnosis, mode: "hardhat", transport: http(LOCAL_RPC_URL) })
+  .extend(publicActions)
+  .extend(walletActions);
+
+/** Mints `amount` Foresight credits to `to` on the gnosis fork, as the governor impersonated for the one call. */
+export async function grantCredits(token: Address, to: Address, amount: bigint) {
+  const governor = await fork.readContract({ address: token, abi: CREDITS_ADMIN_ABI, functionName: "governor" });
+  if (!isAddressEqual(governor, CREDITS_GOVERNOR)) {
+    throw new Error(`The credits governor is ${governor}, not the ${CREDITS_GOVERNOR} the fixture acts as.`);
+  }
+  await fork.impersonateAccount({ address: CREDITS_GOVERNOR });
+  try {
+    if ((await fork.getBalance({ address: CREDITS_GOVERNOR })) < parseEther("1")) {
+      await fork.setBalance({ address: CREDITS_GOVERNOR, value: parseEther("1") });
+    }
+    const hash = await fork.sendTransaction({
+      account: CREDITS_GOVERNOR,
+      to: token,
+      data: encodeFunctionData({ abi: CREDITS_ADMIN_ABI, functionName: "mint", args: [to, amount] }),
+    });
+    const receipt = await fork.waitForTransactionReceipt({ hash });
+    if (receipt.status !== "success") throw new Error(`Minting ${amount} credits to ${to} reverted.`);
+  } finally {
+    await fork.stopImpersonatingAccount({ address: CREDITS_GOVERNOR });
+  }
+}

apps/web/e2e/harness/estimate-slider/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Estimate slider harness</title>
+  </head>
+  <body class="bg-fs-surface antialiased">
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

apps/web/e2e/harness/estimate-slider/main.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { EstimateSlider } from "@/features/predict/components/EstimateSlider";
+
+import "@/styles/global.css";
+import "../inter.css";
+
+const params = new URLSearchParams(window.location.search);
+const number = (name: string, fallback: number) => Number(params.get(name) ?? fallback);
+/** `?track=` the slider's width in px, as an option card gives it at 375 (311) or 1280 (1112). */
+const track = number("track", 311);
+const lowerBound = number("lower", 0);
+const upperBound = number("upper", 100);
+const marketEstimate = number("market", 75);
+/** `?value=` a saved estimate; without it the slider rests at the market. */
+const initial = params.has("value") ? number("value", 0) : undefined;
+if (params.get("theme") === "dark") document.documentElement.classList.add("dark");
+/** `?locked=1` a session that takes no estimates, as a closed one. */
+const lockedReason = params.get("locked") === "1" ? "Trading has closed." : undefined;
+
+function Harness() {
+  const [value, setValue] = useState(initial);
+  return (
+    <div className="bg-fs-surface p-4" style={{ width: track + 32 }}>
+      <EstimateSlider
+        scale={{
+          market: "0x1111111111111111111111111111111111111111",
+          name: "Movie A",
+          color: params.get("color") ?? "#7e1bd4",
+          unit: params.get("unit") ?? "%",
+          lowerBound,
+          upperBound,
+        }}
+        marketEstimate={marketEstimate}
+        isMarketPending={false}
+        value={value}
+        onCommit={setValue}
+        onClear={() => setValue(undefined)}
+        lockedReason={lockedReason}
+      />
+    </div>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(<Harness />);

apps/web/e2e/harness/inter.css

@@ -0,0 +1,25 @@
+/* The files src/app/layout.tsx loads through next/font, which Vite does not run. */
+@font-face {
+  font-family: "Inter";
+  font-weight: 400;
+  font-display: swap;
+  src: url("../../../../node_modules/@fontsource/inter/files/inter-latin-400-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-weight: 500;
+  font-display: swap;
+  src: url("../../../../node_modules/@fontsource/inter/files/inter-latin-500-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-weight: 600;
+  font-display: swap;
+  src: url("../../../../node_modules/@fontsource/inter/files/inter-latin-600-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-weight: 700;
+  font-display: swap;
+  src: url("../../../../node_modules/@fontsource/inter/files/inter-latin-700-normal.woff2") format("woff2");
+}

apps/web/e2e/harness/option-card/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Option card harness</title>
+  </head>
+  <body class="bg-fs-surface antialiased">
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

apps/web/e2e/harness/option-card/main.tsx

@@ -0,0 +1,56 @@
+import { createRoot } from "react-dom/client";
+
+import { useEstimateStore } from "@/features/predict/stores/estimateStore";
+import type { SessionStatus } from "@/features/sessions/types";
+
+import { OptionCard } from "@/app/market/[parentMarket]/_components/OptionCard";
+
+import "@/styles/global.css";
+import "../inter.css";
+
+const params = new URLSearchParams(window.location.search);
+const number = (name: string, fallback: number) => Number(params.get(name) ?? fallback);
+const PARENT = "0x7777777777777777777777777777777777777777";
+const MARKET = "0x1111111111111111111111111111111111111111";
+const WAD = 10n ** 18n;
+/** `?market=none` for an option with no trading. `?up=` and `?down=` a held position in whole tokens, decimals allowed; with neither there is none. */
+const tokens = (name: string) => {
+  const [whole = "0", fraction = ""] = (params.get(name) ?? "0").split(".");
+  return BigInt(whole) * WAD + BigInt(fraction.padEnd(18, "0").slice(0, 18) || "0");
+};
+const position = params.has("up") || params.has("down") ? { up: tokens("up"), down: tokens("down") } : undefined;
+if (params.get("theme") === "dark") document.documentElement.classList.add("dark");
+useEstimateStore.setState({ estimates: params.has("value") ? { [PARENT]: { [MARKET]: number("value", 0) } } : {} });
+
+function Harness() {
+  return (
+    <div className="p-4">
+      <OptionCard
+        option={{
+          market: MARKET,
+          outcomeIndex: 0,
+          name: params.get("name") ?? "Movie A",
+          color: params.get("color") ?? "#7e1bd4",
+          unit: params.get("unit") ?? "%",
+          lowerBound: number("lower", 0),
+          upperBound: number("upper", 100),
+          question: "What percentile score will Scooby assign to Movie A? (session #2)",
+          upToken: null,
+          downToken: null,
+          invalidToken: null,
+          underlyingToken: null,
+          blocks: [
+            { type: "markdown", body: "Resolves to the score Scooby gives after watching. 0 if he does not watch it." },
+          ],
+        }}
+        parentMarket={PARENT}
+        status={(params.get("status") as SessionStatus | null) ?? "trading"}
+        marketEstimate={params.get("market") === "none" ? undefined : number("market", 75)}
+        isMarketPending={false}
+        position={position}
+      />
+    </div>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(<Harness />);

apps/web/e2e/harness/predict-card/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Predict card harness</title>
+  </head>
+  <body class="bg-klerosUIComponentsLightBackground flex min-h-screen flex-col antialiased">
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>