Finish enter flow and add contract call

src/typescript/frontend/src/app/arena/page.tsx

@@ -1,8 +1,10 @@
 import { type fetchArenaInfo, fetchMarketStateByAddress } from "@/queries/arena";
 import { ArenaClient } from "components/pages/arena/ArenaClient";
-// import { PeriodicStateEventModel } from "@sdk/indexer-v2/types";
-// import { redirect } from "next/navigation";
-// import { parseJSON } from "utils";
+//import { PeriodicStateEventModel } from "@sdk/indexer-v2/types";
+//import { redirect } from "next/navigation";
+//import { parseJSON } from "utils";
+//import { GET as getCandlesticks, getCandlesticksRoute } from "../candlesticks/route";
+//import { Period } from "@sdk/const";
 
 export const revalidate = 2;
 
@@ -58,30 +60,24 @@ export default async function Arena() {
     }),
   ]);
 
-  const to = Math.ceil(new Date().getTime() / 1000).toString()
-  const countBack = '500';
-  const period = 'period_1m';
-
-  const paramsCandlesticksMarket0 = new URLSearchParams({
-    marketID: market0!.market.marketID.toString(),
-    period,
-    countBack,
-    to,
-  });
-
-  const paramsCandlesticksMarket1 = new URLSearchParams({
-    marketID: market1!.market.marketID.toString(),
-    period,
-    countBack,
-    to,
-  });
+  const to = Math.ceil(new Date().getTime() / 1000);
+  const countBack = 500;
+  const period = Period.Period1M;
 
   const [candlesticksMarket0, candlesticksMarket1] = await Promise.all([
-    fetch(`/candlesticks?${paramsCandlesticksMarket0.toString()}`)
-      .then(res => res.text())
+    getCandlesticksRoute(
+      Number(market0!.market.marketID),
+      to,
+      period,
+      countBack,
+    )
       .then(res => parseJSON<PeriodicStateEventModel[]>(res)),
-    fetch(`/candlesticks?${paramsCandlesticksMarket1.toString()}`)
-      .then(res => res.text())
+    getCandlesticksRoute(
+      Number(market1!.market.marketID),
+      to,
+      period,
+      countBack,
+    )
       .then(res => parseJSON<PeriodicStateEventModel[]>(res)),
   ]);
   /* */

src/typescript/frontend/src/app/candlesticks/route.ts

@@ -1,6 +1,6 @@
 // cspell:word timespan
 
-import { type AnyNumberString, getPeriodStartTimeFromTime, toPeriod } from "@sdk/index";
+import { type AnyNumberString, getPeriodStartTimeFromTime, type Period, toPeriod } from "@sdk/index";
 import { parseInt } from "lodash";
 import { type NextRequest } from "next/server";
 import {
@@ -104,38 +104,14 @@ const getCachedLatestProcessedEmojicoinTimestamp = unstable_cache(
   { revalidate: 5 }
 );
 
-/* eslint-disable-next-line import/no-unused-modules */
-export async function GET(request: NextRequest) {
-  const searchParams = request.nextUrl.searchParams;
-  const params: CandlesticksSearchParams = {
-    marketID: searchParams.get("marketID"),
-    to: searchParams.get("to"),
-    period: searchParams.get("period"),
-    countBack: searchParams.get("countBack"),
-  };
-
-  if (!isValidCandlesticksSearchParams(params)) {
-    return new Response("Invalid candlestick search params.", { status: 400 });
-  }
-
-  const marketID = parseInt(params.marketID);
-  const to = parseInt(params.to);
-  const period = toPeriod(params.period);
-  const countBack = parseInt(params.countBack);
-  const numParcels = parseInt(params.amount);
-
+export const getCandlesticksRoute = async (
+  marketID: number,
+  to: number,
+  period: Period,
+  countBack: number
+) => {
   const index = toIndex(to, period);
 
-  // Ensure that the last start date as calculated per the search params is valid.
-  // This is specifically the last parcel's start date- aka the last parcel's first candlestick's
-  // start time.
-  const lastParcelStartDate = indexToParcelStartDate(index + numParcels - 1, period);
-  if (lastParcelStartDate > new Date()) {
-    return new Response("The last parcel's start date cannot be later than the current time.", {
-      status: 400,
-    });
-  }
-
   let data: string = "[]";
 
   const processorTimestamp = new Date(await getCachedLatestProcessedEmojicoinTimestamp());
@@ -149,7 +125,7 @@ export async function GET(request: NextRequest) {
       (time) => new Date(Number(getPeriodStartTimeFromTime(time, period)))
     );
   } catch {
-    return new Response("Market has not been registered yet.", { status: 400 });
+    throw new Error("Market has not been registered yet.");
   }
 
   while (totalCount <= countBack) {
@@ -187,5 +163,32 @@ export async function GET(request: NextRequest) {
     i++;
   }
 
-  return new Response(data);
+  return data;
+};
+
+/* eslint-disable-next-line import/no-unused-modules */
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const params: CandlesticksSearchParams = {
+    marketID: searchParams.get("marketID"),
+    to: searchParams.get("to"),
+    period: searchParams.get("period"),
+    countBack: searchParams.get("countBack"),
+  };
+
+  if (!isValidCandlesticksSearchParams(params)) {
+    return new Response("Invalid candlestick search params.", { status: 400 });
+  }
+
+  const marketID = parseInt(params.marketID);
+  const to = parseInt(params.to);
+  const period = toPeriod(params.period);
+  const countBack = parseInt(params.countBack);
+
+  try {
+    const data = await getCandlesticksRoute(marketID, to, period, countBack);
+    return new Response(data);
+  } catch (e) {
+    return new Response((e as Error).message, { status: 400 });
+  }
 }

src/typescript/frontend/src/components/pages/arena/ArenaClient.tsx

@@ -72,7 +72,7 @@ const Desktop: React.FC<Props> = ({
     <div
       style={{
         display: "grid",
-        gridTemplateRows: "1fr 2.75fr",
+        gridTemplateRows: "1fr 3fr",
         gridTemplateColumns: "1fr 0.65fr 0.85fr 1fr",
         height: "100%",
         width: "100%",

src/typescript/frontend/src/components/pages/arena/PriceChart.tsx

@@ -6,39 +6,56 @@ import { Line } from "react-chartjs-2";
 import { FormattedNumber } from "components/FormattedNumber";
 import { useRef } from "react";
 import useNodeDimensions from "@hooks/use-node-dimensions";
+import { q64ToBig } from "@sdk/utils";
 
 const PriceChart: React.FC<Props & { height: number; width: number }> = ({
   market0,
   market1,
   height,
   width,
+  candlesticksMarket0,
+  candlesticksMarket1,
 }) => {
   const now = Math.floor(new Date().getTime() / 1000 / 60);
   const size = 15;
-  const labels = Array.from({ length: size }).map((_, i) => {
-    const date = new Date((now - size + i) * 60 * 1000);
+  const points = Array.from({ length: size }).map((_, i) => {
+    return new Date((now - size + i) * 60 * 1000);
+  });
+  const labels = points.map((date) => {
     const hour = date.getHours().toString().padStart(2, "0");
     const minute = date.getMinutes().toString().padStart(2, "0");
     return `${hour}:${minute}`;
   });
   const color0 = darkTheme.colors.econiaBlue;
   const color1 = darkTheme.colors.pink;
+  const dataset0 = points
+    .map((p) => {
+      return candlesticksMarket0.findLast(
+        (c) => Number(c.periodicMetadata.startTime / 1000n) <= p.getTime()
+      );
+    })
+    .map((c) => (c ? q64ToBig(c.periodicState.openPriceQ64).toNumber() : 0));
+  const dataset1 = points
+    .map((p) => {
+      return candlesticksMarket1.findLast(
+        (c) => Number(c.periodicMetadata.startTime / 1000n) <= p.getTime()
+      );
+    })
+    .map((c) => (c ? q64ToBig(c.periodicState.openPriceQ64).toNumber() : 0));
   const data: ChartData<"line", (number | null)[], string> = {
     labels,
     datasets: [
       {
         label: market0.market.symbolEmojis.join(""),
-        data: [1.1, 1.2, 1.3, 1.4, 1, 0.5, 0.69, 0.75, 1.3, 1.5, 2, 2.1, null, null, 2.3],
+        data: dataset0,
         borderColor: color0,
         spanGaps: true,
         yAxisID: "0",
         pointStyle: false,
       },
       {
         label: market1.market.symbolEmojis.join(""),
-        data: [2.9, 2.8, 2.7, 2.6, 3, 4, 3.5, 3.2, 2.6, 2.1, 2, 1.9, null, null, 1.5].map((e) =>
-          e !== null ? e * 0.01 : null
-        ),
+        data: dataset1,
         borderColor: color1,
         spanGaps: true,
         yAxisID: "1",
@@ -57,6 +74,18 @@ const PriceChart: React.FC<Props & { height: number; width: number }> = ({
       legend: {
         display: false,
       },
+      tooltip: {
+        callbacks: {
+          /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+          label: (context: any) => {
+            const format = {
+              maximumFractionDigits: 8,
+            };
+            const formatter = new Intl.NumberFormat("en-US", format);
+            return formatter.format(context.raw);
+          },
+        },
+      },
     },
     scales: {
       "0": {
@@ -66,12 +95,27 @@ const PriceChart: React.FC<Props & { height: number; width: number }> = ({
         },
         ticks: {
           color: color0,
+          /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+          callback: (value: any) => {
+            const format = {
+              maximumFractionDigits: 8,
+            };
+            const formatter = new Intl.NumberFormat("en-US", format);
+            return formatter.format(value);
+          },
         },
       },
       "1": {
         position: "right",
         ticks: {
           color: color1,
+          callback: (value: any) => {
+            const format = {
+              maximumFractionDigits: 8,
+            };
+            const formatter = new Intl.NumberFormat("en-US", format);
+            return formatter.format(value);
+          },
         },
       },
       x: {