[ECO-1588] Add minimal JSON stats page to frontend

src/typescript/.gitignore

@@ -6,3 +6,4 @@ node_modules/
 .env*.local
 **/*.env*.local
 .env
+.vercel

src/typescript/frontend/package.json

@@ -29,13 +29,16 @@
     "@pontem/wallet-adapter-plugin": "^0.2.1",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@rise-wallet/wallet-adapter": "^0.1.2",
     "@tanstack/react-query": "^5.59.3",
     "@types/semver": "^7.5.8",
     "axios": ">=0.28.0",
     "big.js": "^6.2.2",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.5",
     "emoji-mart": "https://github.com/econia-labs/emoji-mart/raw/emojicoin-dot-fun/packages/emoji-mart/emoji-mart-v5.6.0.tgz",
@@ -59,6 +62,7 @@
     "styled-system": "^5.1.5",
     "stylis": "^4.3.4",
     "tailwind-merge": "^2.5.3",
+    "tailwindcss-animate": "^1.0.7",
     "use-scramble": "^2.2.15",
     "zustand": "^4.5.5"
   },

src/typescript/frontend/src/app/global.css

@@ -91,3 +91,9 @@
   position: relative !important;
   width: 100% !important;
 }
+
+@layer base {
+  :root {
+    --radius: 0.5rem;
+  }
+}

src/typescript/frontend/src/app/stats/ClientTable.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import React, { useCallback, useMemo, useState } from "react";
+import AptosIconBlack from "@icons/AptosBlack";
+import { Column, TableData } from "./TableData";
+import { type DatabaseModels } from "@sdk/indexer-v2/types";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+export type ClientTableProps = {
+  price: DatabaseModels["market_state"][];
+  allTimeVolume: DatabaseModels["market_state"][];
+  priceDelta: DatabaseModels["price_feed"][];
+  dailyVolume: DatabaseModels["market_state"][];
+  lastAvgExecutionPrice: DatabaseModels["market_state"][];
+  tvl: DatabaseModels["market_state"][];
+  marketCap: DatabaseModels["market_state"][];
+};
+
+const ColumnToTable: { [key in Column]: keyof ClientTableProps } = {
+  [Column.Price]: "price" as keyof ClientTableProps,
+  [Column.AllTimeVolume]: "allTimeVolume" as keyof ClientTableProps,
+  [Column.PriceDelta]: "priceDelta" as keyof ClientTableProps,
+  [Column.DailyVolume]: "dailyVolume" as keyof ClientTableProps,
+  [Column.LastAvgExecutionPrice]: "lastAvgExecutionPrice" as keyof ClientTableProps,
+  [Column.Tvl]: "tvl" as keyof ClientTableProps,
+  [Column.MarketCap]: "marketCap" as keyof ClientTableProps,
+};
+
+export const ClientTable = (props: ClientTableProps) => {
+  const [sortBy, setSortBy] = useState(Column.DailyVolume);
+  const [reversed, setReversed] = useState(false);
+  const table = useMemo(() => {
+    const data = props[ColumnToTable[sortBy]];
+    return <TableData data={data} k={sortBy} reversed={reversed} priceDeltas={props.priceDelta} />;
+  }, [props, sortBy, reversed]);
+
+  const getCN = useCallback(
+    (col: Column) =>
+      "hover:cursor-pointer" + (col === sortBy ? " bg-ec-blue bg-opacity-[0.2]" : ""),
+    [sortBy]
+  );
+  const PossibleSortButton = ({ col, reversed }: { col: Column; reversed: boolean }) =>
+    col === sortBy ? (
+      <div key={`${col}-sort`} className="hover:cursor-pointer w-fit">
+        {reversed ? (
+          <ChevronUp className="gap-1 h-4 w-4" />
+        ) : (
+          <ChevronDown className="gap-1 h-4 w-4" />
+        )}
+      </div>
+    ) : (
+      <></>
+    );
+
+  const handleSortByClick = (newColumn: Column) => {
+    if (sortBy !== newColumn) {
+      setSortBy(newColumn);
+      setReversed(false);
+    } else {
+      setReversed((r) => !r);
+    }
+  };
+
+  return (
+    <>
+      <table
+        className={
+          "[&_td]:px-4 [&_td]:py-2 [&_th]:px-4 [&_th]:py-2 m-auto [&_td]:border-solid [&_th]:border-solid " +
+          "[&_th]:border-[1px] [&_td]:border-[1px] [&_td]:border-dark-gray [&_th]:border-dark-gray"
+        }
+      >
+        <thead className="text-white opacity-[.95] font-forma tracking-wide text-md whitespace-nowrap">
+          <tr>
+            <th>{"symbol"}</th>
+            <th
+              onClick={() => handleSortByClick(Column.PriceDelta)}
+              className={getCN(Column.PriceDelta)}
+            >
+              <div className="flex flex-row gap-1 w-fit m-auto">
+                <span>delta</span>
+                <PossibleSortButton col={Column.PriceDelta} reversed={reversed} />
+              </div>
+            </th>
+            <th>{"market id"}</th>
+            <th onClick={() => handleSortByClick(Column.Price)} className={getCN(Column.Price)}>
+              <div className="flex flex-row gap-1 w-fit m-auto">
+                <span>price</span>
+                <PossibleSortButton col={Column.Price} reversed={reversed} />
+              </div>
+            </th>
+            <th
+              onClick={() => handleSortByClick(Column.AllTimeVolume)}
+              className={getCN(Column.AllTimeVolume)}
+            >
+              <div className="flex flex-row gap-1 w-fit m-auto">
+                <span>all time vol</span>
+                <AptosIconBlack className="m-auto" height={13} width={13} />
+                <PossibleSortButton col={Column.AllTimeVolume} reversed={reversed} />
+              </div>
+            </th>
+            <th
+              onClick={() => handleSortByClick(Column.DailyVolume)}
+              className={getCN(Column.DailyVolume)}
+            >
+              <div className="flex flex-row gap-1 w-fit m-auto">
+                <span>daily vol</span>
+                <AptosIconBlack className="m-auto" height={13} width={13} />
+                <PossibleSortButton col={Column.DailyVolume} reversed={reversed} />
+              </div>
+            </th>
+            <th onClick={() => handleSortByClick(Column.Tvl)} className={getCN(Column.Tvl)}>
+              <div className="flex flex-row gap-1 w-fit m-auto">
+                <span>tvl</span>
+                <AptosIconBlack className="m-auto" height={13} width={13} />
+                <PossibleSortButton col={Column.Tvl} reversed={reversed} />
+              </div>
+            </th>
+            <th
+              onClick={() => handleSortByClick(Column.LastAvgExecutionPrice)}
+              className={getCN(Column.LastAvgExecutionPrice)}
+            >
+              <div className="flex flex-row gap-1 w-fit m-auto">
+                <span>last avg price</span>
+                <PossibleSortButton col={Column.LastAvgExecutionPrice} reversed={reversed} />
+              </div>
+            </th>
+            <th
+              onClick={() => handleSortByClick(Column.MarketCap)}
+              className={getCN(Column.MarketCap)}
+            >
+              <div className="flex flex-row gap-1 w-fit m-auto">
+                <span>market cap</span>
+                <AptosIconBlack className="m-auto" height={13} width={13} />
+                <PossibleSortButton col={Column.MarketCap} reversed={reversed} />
+              </div>
+            </th>
+            <th>{"circulating supply"}</th>
+            <th>{"bonding curve"}</th>
+          </tr>
+        </thead>
+        <tbody className="">{table}</tbody>
+      </table>
+    </>
+  );
+};

src/typescript/frontend/src/app/stats/GlobalStats.tsx

@@ -0,0 +1,146 @@
+import { cn } from "lib/utils/class-name";
+import { type StatsPageProps } from "./StatsPage";
+import { type Types, type AnyNumberString } from "@sdk-types";
+import { useMemo } from "react";
+import { compareBigInt, compareNumber, sum } from "@sdk/utils";
+import { toCoinDecimalString } from "lib/utils/decimals";
+import AptosIconBlack from "@icons/AptosBlack";
+import { MS_IN_ONE_DAY } from "components/charts/const";
+import Big from "big.js";
+import { ONE_APT_BIGINT } from "@sdk/const";
+
+const formatter = new Intl.NumberFormat("en-us", { maximumFractionDigits: 2 });
+const fmt = (n: number | bigint) => formatter.format(n);
+
+const KeyAndValue = ({
+  field,
+  value = "undefined",
+  className,
+  apt = false,
+}: {
+  field: string;
+  value?: AnyNumberString | boolean | Date;
+  className?: string;
+  apt?: boolean;
+}) => (
+  <>
+    <div
+      className={cn(
+        "flex flex-row text-white font-forma text-[1rem] leading-[1.25rem] w-full pl-[17.5ch]",
+        className
+      )}
+    >
+      <div className="flex m-auto">
+        <span className="min-w-[35ch] m-auto">{field}</span>
+        <span
+          className={`min-w-[35ch] flex flex-row ${
+            typeof value === "string"
+              ? "text-orange-200"
+              : typeof value === "number" || typeof value === "bigint"
+                ? Math.floor(Number(value.toString())).toString() === value.toString()
+                  ? "text-green"
+                  : "text-ec-blue"
+                : typeof value === "boolean"
+                  ? value
+                    ? "text-green"
+                    : "text-error"
+                  : "text-light-gray"
+          }`}
+        >
+          {typeof value === "string"
+            ? `"${value}"`
+            : typeof value === "number" || typeof value === "bigint"
+              ? fmt(value)
+              : typeof value === "boolean"
+                ? value.toString()
+                : value.toLocaleString()}
+          {apt ? <AptosIconBlack className="ml-[5px]" width={"0.85rem"} height={"1rem"} /> : <></>}
+        </span>
+      </div>
+    </div>
+  </>
+);
+
+export const GlobalStats = (
+  props: StatsPageProps & { registryResource: Types["RegistryView"] }
+) => {
+  const { numMarkets, registryResource, allTimeVolumeData } = props;
+  const {
+    numPostBondingCurve,
+    numInBondingCurve,
+    numSignificantMarketCap,
+    numLowMarketCap,
+    ...data
+  } = useMemo(() => {
+    const normalizeCoinDecimal = (n: bigint) => Number(toCoinDecimalString(n));
+    return {
+      cumulativeDailyVolume: normalizeCoinDecimal(
+        sum(props.dailyVolumeData.map((v) => v.dailyVolume))
+      ),
+      numPostBondingCurve: allTimeVolumeData.filter((v) => !v.inBondingCurve).length,
+      numInBondingCurve: allTimeVolumeData.filter((v) => v.inBondingCurve).length,
+      numSignificantMarketCap: allTimeVolumeData.filter(
+        (v) => v.state.instantaneousStats.marketCap >= 100n * ONE_APT_BIGINT
+      ).length,
+      numLowMarketCap: allTimeVolumeData.filter(
+        (v) => v.state.instantaneousStats.marketCap < 100n * ONE_APT_BIGINT
+      ).length,
+      lastBumpTime: allTimeVolumeData
+        .map((v) => v.transaction.timestamp)
+        .sort((a, b) => compareNumber(a.getTime(), b.getTime()))
+        .at(-1),
+      numRecentlyActive: allTimeVolumeData.filter(({ transaction }) =>
+        Big(transaction.time.toString())
+          .div(1000)
+          .gt(new Date().getTime() - MS_IN_ONE_DAY)
+      ).length,
+      numRecentlyTraded: allTimeVolumeData.filter(({ lastSwap }) =>
+        Big(lastSwap.time.toString())
+          .div(1000)
+          .gt(new Date().getTime() - MS_IN_ONE_DAY)
+      ).length,
+      cumulativeQuoteVolume: normalizeCoinDecimal(registryResource.cumulativeQuoteVolume),
+      cumulativeIntegratorFees: normalizeCoinDecimal(registryResource.cumulativeIntegratorFees),
+      cumulativeSwaps: registryResource.cumulativeSwaps,
+      cumulativeChatMessages: registryResource.cumulativeChatMessages,
+      totalQuoteLocked: normalizeCoinDecimal(registryResource.totalQuoteLocked),
+      totalValueLocked: normalizeCoinDecimal(registryResource.totalValueLocked),
+      marketCap: normalizeCoinDecimal(registryResource.marketCap),
+      fullyDilutedValue: normalizeCoinDecimal(registryResource.fullyDilutedValue),
+      globalNonce: registryResource.nonce,
+      lastMarketRegister: allTimeVolumeData
+        .sort((a, b) => compareBigInt(a.market.marketID, b.market.marketID))
+        .at(-1)?.transaction.timestamp,
+      lastMarketRegistered: allTimeVolumeData
+        .sort((a, b) => compareBigInt(a.market.marketID, b.market.marketID))
+        .at(-1)?.market.symbolData.symbol,
+    };
+  }, [props, registryResource, allTimeVolumeData]);
+
+  return (
+    <div className="flex flex-col w-full">
+      <KeyAndValue field="Number of markets" value={numMarkets} />
+      <KeyAndValue field="Number of markets post-bonding curve" value={numPostBondingCurve} />
+      <KeyAndValue field="Number of markets in bonding curve" value={numInBondingCurve} />
+      <KeyAndValue field="Number of markets >= 100 APT mkt cap" value={numSignificantMarketCap} />
+      <KeyAndValue field="Number of markets < 100 APT mkt cap" value={numLowMarketCap} />
+      <br />
+      <KeyAndValue field="Daily volume (rolling 24h)" value={data.cumulativeDailyVolume} apt />
+      <KeyAndValue field="Number of markets active in last 24h" value={data.numRecentlyActive} />
+      <KeyAndValue field="Number of markets traded in last 24h" value={data.numRecentlyTraded} />
+      <br />
+      <KeyAndValue field="Last state bump" value={data.lastBumpTime} />
+      <KeyAndValue field="Last market registered" value={data.lastMarketRegistered} />
+      <KeyAndValue field="Last market register time" value={data.lastMarketRegister} />
+      <br />
+      <KeyAndValue field="Cumulative quote volume" value={data.cumulativeQuoteVolume} apt />
+      <KeyAndValue field="Total quote locked" value={data.totalQuoteLocked} apt />
+      <KeyAndValue field="Total value locked" value={data.totalValueLocked} apt />
+      <KeyAndValue field="Fully diluted value" value={data.fullyDilutedValue} apt />
+      <KeyAndValue field="Cumulative integrator fees" value={data.cumulativeIntegratorFees} apt />
+      <KeyAndValue field="Total market cap" value={data.marketCap} apt />
+      <KeyAndValue field="Total number of interactions" value={data.globalNonce} />
+      <br />
+    </div>
+  );
+};

src/typescript/frontend/src/app/stats/MiniBondingCurveProgress.tsx

@@ -0,0 +1,16 @@
+import { type StateEventData } from "@sdk/indexer-v2/types";
+import { getBondingCurveProgress } from "@sdk/utils";
+import { Progress } from "components/ui/Progress";
+
+export const MiniBondingCurveProgress = ({ state }: { state: StateEventData }) => {
+  const progress = getBondingCurveProgress(state.clammVirtualReserves.quote);
+  return (
+    <Progress
+      className={
+        "h-[7px] w-full" + `${progress === 100 ? " hue-rotate-[225deg] brightness-[0.25]" : ""}`
+      }
+      value={progress}
+      max={100}
+    />
+  );
+};