Realt

README.md

@@ -1,3 +1,5 @@
+# Futarchy
+
 This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
 ## Getting Started

functions/realt-proxy.ts

@@ -0,0 +1,132 @@
+import { getStore } from "@netlify/blobs";
+
+/**
+ * Cache TTL in milliseconds (24 hours).
+ */
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * RealT property UUIDs to fetch.
+ */
+const REALT_UUIDS = [
+  "0x0f388d7e65a969dbcbfab21bc3ab6629af78f4cf",
+  "0x5c4e3fa9704d4212c6434190af6379cfbda47e13",
+  "0x854a0cfa24012937d3d15682ecc3d5b474bfa97e",
+  "0xd8b19f31186fc7350be018651aa1383175923bb3",
+  "0xc7697f5e86a102eaf4000719a2dc477d65beea7d",
+  "0x4ae9d3343bbc6a894b7ee7f843c224c953f1661b",
+  "0x90d280b6456f8233e115e6aabb2ca89249dafd39",
+  "0x19f824662ba9df78e368022f085b708fccc201c8",
+  "0xa83cbd26964ea953f86c741871a1ab2a256cb82d",
+];
+
+/**
+ * Edge route that proxies a rate-limited upstream API
+ * (allowed to be called once per 24 hours), caches the
+ * response using Netlify Blobs, and serves cached data
+ * to all clients.
+ *
+ * @returns RealT properties data
+ */
+export default async function handler(): Promise<Response> {
+  const store = getStore("realt-api-cache");
+  const now = Date.now();
+  type CachedResponse = {
+    data: Record<string, unknown>;
+    fetchedAt: number;
+  };
+  const apiUrl = process.env.REALT_API_URL;
+  const apiKey = process.env.REALT_API_KEY;
+
+  if (!apiUrl || !apiKey) {
+    console.error("[realt-proxy] Missing required env vars", {
+      UPSTREAM_API_URL: !!apiUrl,
+      UPSTREAM_API_KEY: !!apiKey,
+    });
+
+    return new Response("Server misconfigured", { status: 500 });
+  }
+
+  // Read cached response
+  const cached = (await store.get("response", {
+    type: "json",
+  })) as CachedResponse | null;
+
+  // Serve cached response if still valid
+  if (cached && now - cached.fetchedAt < CACHE_TTL_MS) {
+    console.log("[realt-proxy] Serving from cache");
+    return Response.json(cached.data, {
+      headers: {
+        "Cache-Control": "public, max-age=300",
+      },
+    });
+  }
+
+  try {
+    // Call realT API (should happen ~once per day)
+    console.log("[realt-proxy] Calling RealT API");
+
+    const res = await fetch(apiUrl, {
+      headers: {
+        "X-AUTH-REALT-TOKEN": apiKey,
+      },
+    });
+
+    if (!res.ok) {
+      throw new Error(`RealT API failed with status ${res.status}`);
+    }
+
+    const allProperties = (await res.json()) as Array<{
+      uuid: string;
+      [key: string]: unknown;
+    }>;
+
+    /**
+     * Filter only the UUIDs we need
+     */
+    const uuidSet = new Set(REALT_UUIDS.map((uuid) => uuid.toLowerCase()));
+
+    const filtered = allProperties.filter(
+      (item) =>
+        typeof item.uuid === "string" && uuidSet.has(item.uuid.toLowerCase()),
+    );
+
+    const normalized = filtered.map((item) => ({
+      ...item,
+      uuid: item.uuid.toLowerCase(),
+    }));
+
+    const byUuid = Object.fromEntries(
+      normalized.map((item) => [item.uuid, item]),
+    );
+
+    console.log(
+      `[realt-proxy] Filtered ${filtered.length} / ${allProperties.length} properties`,
+    );
+
+    // Persist fresh response
+    await store.setJSON("response", {
+      data: byUuid,
+      fetchedAt: now,
+    } satisfies CachedResponse);
+
+    return Response.json(byUuid, {
+      headers: {
+        "Cache-Control": "public, max-age=300",
+      },
+    });
+  } catch (error) {
+    console.error("[realt-proxy] RealT API fetch failed:", error);
+
+    // serve stale cache if available
+    if (cached) {
+      return Response.json(cached.data, {
+        headers: {
+          "Cache-Control": "public, max-age=300",
+        },
+      });
+    }
+
+    return new Response("RealT API unavailable", { status: 502 });
+  }
+}

netlify.toml

@@ -0,0 +1,2 @@
+[functions]
+    directory = "functions"

next.config.mjs

@@ -9,6 +9,13 @@ const nextConfig = {
         pathname: "/**",
         search: "",
       },
+      {
+        protocol: "https",
+        hostname: "realt.co",
+        port: "",
+        pathname: "/**",
+        search: "",
+      },
     ],
   },
   webpack: (config) => {

package.json

@@ -14,6 +14,7 @@
     "@cowprotocol/cow-sdk": "^5.10.3",
     "@kleros/kleros-app": "^2.3.0",
     "@kleros/ui-components-library": "^3.7.0",
+    "@netlify/blobs": "^10.6.0",
     "@reown/appkit": "^1.7.11",
     "@reown/appkit-adapter-wagmi": "^1.7.11",
     "@swapr/sdk": "https://github.com/seer-pm/swapr-sdk/archive/6dea7e63f7e05c84a4374717ee1ad5baca86f7de.tar.gz",
@@ -37,6 +38,7 @@
     "react-jdenticon": "^1.4.0",
     "react-toastify": "^11.1.0",
     "react-use": "^17.6.0",
+    "swiper": "^12.0.2",
     "viem": "^2.31.4",
     "wagmi": "^2.15.6",
     "zustand": "^5.0.8"

src/app/(homepage)/components/AdvancedSection.tsx

@@ -1,12 +1,32 @@
+import { useCallback } from "react";
+
 import { Card } from "@kleros/ui-components-library";
 import clsx from "clsx";
 import Link from "next/link";
 
+import { useAllRealtMarketData } from "@/hooks/useRealtMarketData";
+
+import LightButton from "@/components/LightButton";
 import SeerLogo from "@/components/SeerLogo";
 
+import DownloadIcon from "@/assets/svg/download.svg";
 import ExternalArrow from "@/assets/svg/external-arrow.svg";
 
+import { downloadCsvFile, generateRealtDataCsv } from "@/utils/csv";
+
+import { markets, seerMarketLink } from "@/consts/markets";
+
+const contractAddresses = markets.map((m) => m.realtContract);
+
 const AdvancedSection: React.FC = () => {
+  const { data: allRealtData, isLoading } = useAllRealtMarketData();
+
+  const handleDownloadCsv = useCallback(() => {
+    if (!allRealtData) return;
+    const csv = generateRealtDataCsv(allRealtData, contractAddresses);
+    downloadCsvFile("realt-market-data.csv", csv);
+  }, [allRealtData]);
+
   return (
     <Card
       round
@@ -24,16 +44,34 @@ const AdvancedSection: React.FC = () => {
           Check the opportunities if you want to LP or Trade specific outcome
           tokens in Seer.&nbsp;
           <Link
-            href={
-              "https://app.seer.pm/markets/100/which-movies-will-clement-watch-as-part-of-the-distilled-clements-judgement-expe-2"
-            }
+            href={seerMarketLink}
             target="_blank"
             rel="noreferrer noopener"
             className="text-klerosUIComponentsPrimaryBlue items-center text-sm"
           >
             Check it out <ExternalArrow className="ml-2 inline size-4" />
           </Link>
         </p>
+        <div>
+          <span className="text-klerosUIComponentsSecondaryText mr-1 text-sm">
+            Download the latest data (updated in the last 24 hours) for the 9
+            properties in CSV format
+          </span>
+          <LightButton
+            text={isLoading ? "Loading..." : "here"}
+            onPress={handleDownloadCsv}
+            isDisabled={isLoading || !allRealtData}
+            small
+            className={clsx(
+              "inline-flex flex-row-reverse p-0",
+              "[&_.button-text]:text-klerosUIComponentsPrimaryBlue [&_.button-text]:text-sm",
+              "hover:bg-transparent",
+            )}
+            icon={
+              <DownloadIcon className="[&_path]:fill-klerosUIComponentsPrimaryBlue! ml-2" />
+            }
+          />
+        </div>
       </div>
       <SeerLogo className="shrink-0" />
     </Card>

src/app/(homepage)/components/Chart/Legend.tsx

@@ -4,6 +4,8 @@ import clsx from "clsx";
 import ChartBarIcon from "@/assets/svg/chart-bar.svg";
 import StatsBarIcon from "@/assets/svg/stats-bar.svg";
 
+import { formatCompactUsd } from "@/utils/formatCompactUsd";
+
 import { type MarketsData } from ".";
 
 interface ILegend {
@@ -38,7 +40,7 @@ const Legend: React.FC<ILegend> = ({
                   onMouseLeave={() => onHoverMarket?.(null)}
                 >
                   <Tag
-                    text={`${name} ${data.at(-1)?.value?.toFixed(2) ?? "0.00"}%`}
+                    text={`${name} ${formatCompactUsd(data.at(-1)?.value ?? 0)}`}
                     active={isVisible}
                     onClick={() => onToggleMarket(name)}
                     className={clsx(

src/app/(homepage)/components/Chart/index.tsx

@@ -15,6 +15,7 @@ import {
 import { type IChartData } from "@/hooks/useChartData";
 
 import { shortenName } from "@/utils";
+import { formatCompactUsd } from "@/utils/formatCompactUsd";
 
 import { IMarket, startTime, endTime } from "@/consts/markets";
 
@@ -123,12 +124,13 @@ const Chart: React.FC<{ data: IChartData[] }> = ({ data }) => {
       Object.entries(marketsData).forEach(([marketName, marketInfo]) => {
         const { data, market } = marketInfo;
 
-        const maxValue = market.maxValue;
+        const { minValue, maxValue } = market;
 
         // Find valid start index (skip extreme values)
         let validStartIndex = 0;
         for (let i = 0; i < data.length; i++) {
-          const isExtreme = data[i].value === maxValue || data[i].value < 0.1;
+          const isExtreme =
+            data[i].value === maxValue || data[i].value < minValue + 0.1;
           if (!isExtreme && i > 0) {
             validStartIndex = i;
             break;
@@ -188,7 +190,7 @@ const Chart: React.FC<{ data: IChartData[] }> = ({ data }) => {
         ensureEdgeTickMarksVisible: true,
       },
       localization: {
-        priceFormatter: (val: number) => `${val.toFixed(2)}%`,
+        priceFormatter: (val: number) => formatCompactUsd(val),
       },
       leftPriceScale: {
         borderVisible: false,
@@ -252,7 +254,7 @@ const Chart: React.FC<{ data: IChartData[] }> = ({ data }) => {
         onHoverMarket={handleHoverMarket}
       />
       <h2 className="text-klerosUIComponentsPrimaryText mt-6 mb-4 text-base font-semibold">
-        Market Estimate Scores
+        Market estimates (USD)
       </h2>
       <div ref={chartContainerRef} />
     </div>

src/app/(homepage)/components/Header/index.tsx

@@ -3,7 +3,6 @@ import Image from "next/image";
 
 import { useWinningAnswers } from "@/hooks/useWinningAnswers";
 
-import ExternalLink from "@/components/ExternalLink";
 import SeerLogo from "@/components/SeerLogo";
 
 import SeerHeaderBackground from "@/assets/png/seer-header-bg.png";
@@ -56,14 +55,7 @@ const Header: React.FC = () => {
           </p>
         </div>
         <p className="text-klerosUIComponentsSecondaryText px-6 pb-3.75 text-xs whitespace-pre-line">
-          You can look at{" "}
-          <ExternalLink
-            text="previous assessments"
-            url="https://www.criticker.com/profile/clesaege/"
-            showIcon={false}
-            className="text-xs"
-          />
-          , to get an idea of what he would like/dislike.
+          {marketMetadata.questionDescription}
         </p>
       </div>
       {!isLoading && winningMarkets.length > 0 ? (

src/app/(homepage)/components/ParticipateSection/CsvUpload/index.tsx

@@ -31,8 +31,8 @@ const CsvUploadPopup: React.FC<ICsvUploadPopup> = ({
       const csvText = await file.text();
       const records = parseMarketCSV(csvText);
 
-      Object.entries(records).forEach(([marketId, score]) => {
-        setPrediction(marketId, score);
+      Object.entries(records).forEach(([marketId, predictionUsd]) => {
+        setPrediction(marketId, predictionUsd);
       });
 
       toggleIsOpen();
@@ -48,7 +48,7 @@ const CsvUploadPopup: React.FC<ICsvUploadPopup> = ({
       {...{ isOpen }}
     >
       <div className="flex size-full flex-col justify-center gap-6">
-        <h2 className="w-full. text-klerosUIComponentsPrimaryText text-center text-2xl font-semibold">
+        <h2 className="text-klerosUIComponentsPrimaryText w-full text-center text-2xl font-semibold">
           Upload CSV Predictions
         </h2>
         <div
@@ -70,18 +70,18 @@ const CsvUploadPopup: React.FC<ICsvUploadPopup> = ({
               marketName,score
             </span>
             <span className="text-klerosUIComponentsPrimaryText text-sm">
-              Judge Dredd (1995),49.45
+              23750 W 7 Mile,1200000
             </span>
             <span className="text-klerosUIComponentsPrimaryText text-sm">
-              Bacurau (2019),53.52
+              18881 Mound,450000
             </span>
             <span className="text-klerosUIComponentsSecondaryText text-sm">
               ...
             </span>
           </div>
           <span className="text-klerosUIComponentsPrimaryText text-sm">
-            Each row represents a prediction for a movie&apos;s score in the
-            Gnosis ecosystem.
+            Each row is a property name and a predicted price in USD (whole
+            dollars, within that property&apos;s min/max range).
           </span>
         </div>
         <CsvDownload />

src/app/(homepage)/components/ParticipateSection/TradeWallet/ProjectBalances/index.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { useTradeWallet } from "@/context/TradeWalletContext";
 import { useTokensBalances } from "@/hooks/useTokenBalances";
 
-import MovieIcon from "@/assets/svg/movie.svg";
+import HomeIcon from "@/assets/svg/homes.svg";
 
 import { markets } from "@/consts/markets";
 
@@ -26,9 +26,9 @@ const ProjectBalances: React.FC = () => {
         {
           title: (
             <div className="flex items-center gap-2">
-              <MovieIcon className="size-6" />
+              <HomeIcon className="size-6" />
               <label className="text-klerosUIComponentsPrimaryText text-sm">
-                Movie tokens
+                Property tokens
               </label>
             </div>
           ),