chart.tsx

"use client";

import {
  ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import BigNumber from "bignumber.js";
import Image from "next/image";
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";

class CL {
  public static getCLChartData(
    poolAddress: string,
    to: number,
    n: number,
    reserve: BigNumber,
    alpha: BigNumber,
    beta: BigNumber,
    k: BigNumber
  ) {
    const poolAddr = poolAddress as `0x${string}`;
    // alpha, beta, k, reserve, x
    const data = [];
    for (let i = 0; i < n; i++) {
      const x = (to / n) * i;
      const r = reserve.dividedBy(1e18).toNumber();
      const a = alpha.dividedBy(1e18).toNumber();
      const b = beta.dividedBy(1e18).toNumber();
      const K = k.dividedBy(1e18).toNumber();
      const phi = CL.longPayoff(x, r, a, K);
      const psi = CL.shortPayoff(x, r, b, K);
      console.log(phi, psi, phi + psi);

      data.push({
        x: x,
        longPayoff: phi,
        shortPayoff: psi,
        cl: r - phi - psi,
        reserve: r,
      });
    }
    return data;
  }
  public static longCondition(
    reserve: number,
    alpha: number,
    k: number
  ): number {
    return (reserve / (2 * alpha)) ** (1 / k);
  }

  public static shortCondition(
    reserve: number,
    beta: number,
    k: number
  ): number {
    return ((2 * beta) / reserve) ** (1 / k);
  }

  public static longPayoff(
    x: number,
    reserve: number,
    alpha: number,
    k: number
  ) {
    if (x <= this.longCondition(reserve, alpha, k)) return alpha * x ** k;
    else {
      return reserve - reserve ** 2 / (4 * alpha * x ** k);
    }
  }

  public static shortPayoff(
    x: number,
    reserve: number,
    beta: number,
    k: number
  ) {
    if (x >= this.shortCondition(reserve, beta, k))
      return beta * Math.pow(x, -k);
    else {
      return reserve - (reserve ** 2 * x ** k) / (4 * beta);
    }
  }
}
const alpha = BigNumber(0.5e18);
const beta = BigNumber(0.5e18);
const k = BigNumber(3e18);
const reserve = BigNumber(3e18);

const generateData = () => {
  return CL.getCLChartData(",", 5, 100, reserve, alpha, beta, k);
};
const chartData = generateData();

const chartConfig = {
  sin: {
    label: "sin(x)",
    color: "#fff",
  },
};

export default function Home() {
  return (
    <div className="w-1/2 mt-20">
      <ChartContainer config={chartConfig}>
        <LineChart
          accessibilityLayer
          data={chartData}
          margin={{
            left: 12,
            right: 12,
          }}
        >
          <CartesianGrid vertical={false} />
          <XAxis
            dataKey="x"
            tickLine={false}
            axisLine={false}
            tickMargin={8}
            tickFormatter={(value) => {
              return value.toFixed(2);
            }}
          />
          <YAxis
            domain={[0, reserve.dividedBy(1e18).toNumber()]}
            tickCount={5}
          />
          <ChartTooltip
            cursor={false}
            content={<ChartTooltipContent hideLabel />}
          />

          <Line
            type="monotone"
            dataKey="longPayoff"
            stroke="violet"
            dot={false}
          />
          <Line
            type="monotone"
            dataKey="shortPayoff"
            stroke="pink"
            dot={false}
          />
          <Line
            type="monotone"
            dataKey="cl"
            stroke="skyblue"
            strokeWidth={3}
            dot={false}
          />
          <ChartLegend content={<ChartLegendContent />} />
          <Line
            type="monotone"
            dataKey="reserve"
            stroke="green"
            strokeWidth={3}
            dot={false}
          />
        </LineChart>
      </ChartContainer>
    </div>
  );
}