SGPT/src/shared/components/home/TokenomicsSection.tsx

import { useSpring, animated } from "@react-spring/web";
import { useEffect, useState } from "react";
import tokenomicChart from "../../../assets/images/tokenomic-chart.png";
import { Pie } from "react-chartjs-2";
import "chart.js/auto";
type Props = {};

const tokenomics = [
  {
    title: "Liquidity - 5% 1,000,000 SGPT",
    precent: "5",
    description: " ",
    color: "#86eae9",
    bgcolor: "bg-[#86eae9]",
  },
  {
    title: "Private Sale - 17% 3,400,000 SGPT",
    description: " ",
    precent: "17",
    color: "#5dbdd3",
    bgcolor: "bg-[#5dbdd3]",
  },
  {
    title: "Stacking & Farming - 15% 3,000,000 SGPT",
    description: " ",
    precent: "15",
    color: "#4591b8",
    bgcolor: "bg-[#4591b8]",
  },
  {
    title: "Marketing & Promotion - 15% 3,000,000 SGPT",
    description: " ",
    precent: "15",
    color: "#3b6696",
    bgcolor: "bg-[#3b6696]",
  },
  {
    title: "Public Sale - 14% 2,800,000 SGPT",
    description: " ",
    precent: "14",
    color: "#353c6e",
    bgcolor: "bg-[#353c6e]",
  },
  {
    title: "Reward & Q&A - 10% 2,000,000 SGPT",
    description: " ",
    precent: "10",
    color: "#705788",
    bgcolor: "bg-[#705788]",
  },
  {
    title: "Advisor - 10% 2,000,000 SGPT",
    description: " ",
    precent: "10",
    color: "#a5769e",
    bgcolor: "bg-[#a5769e]",
  },
  {
    title: "Treasury - 14% 2,800,000 SGPT",
    description: " ",
    precent: "14",
    color: "#d59ab3",
    bgcolor: "bg-[#d59ab3]",
  },
];

const TokenomicsSection = (props: Props) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const section = document.getElementById("tokenomics");
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      { threshold: 0.5 }
    );

    if (!section) {
      return;
    }
    observer.observe(section);

    return () => {
      observer.unobserve(section);
    };
  }, []);

  useEffect(() => {
    console.log("isVisible", isVisible);
  }, [isVisible]);

  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    transform: isVisible ? "translateY(0)" : "translateY(100px)",
    config: {
      duration: 500,
    },
  });

  const textCenter = {
    id: "textCenter",
    beforeDatasetsDraw(chart: any, arg: any, pluginsOptions: any) {
      const { ctx, data } = chart;
      ctx.save();
      ctx.fillStyle = "#fff";
      ctx.font = "bolder 30px sen";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText(
        `TOTAL SUPPLE`,
        chart.getDatasetMeta(0).data[0].x,
        chart.getDatasetMeta(0).data[0].y - 20
      );
      ctx.fillText(
        `20,000,000 SGPT`,
        chart.getDatasetMeta(0).data[0].x,
        chart.getDatasetMeta(0).data[0].y + 25
      );
    },
  };
  const [userData, setUserData] = useState({
    labels: tokenomics.map((data) => data.title),
    datasets: [
      {
        // label: "text",
        data: tokenomics.map((data) => data.precent),
        backgroundColor: tokenomics.map((data) => data.color),
        // cutout: "10%",
        borderWidth: 2,
        delay: 100,
      },
    ],
  });
  const labelText = {
    hoverBorderWidth: 4,
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        callbacks: {
          label: (context: any) => {
            return ` ${context.label}`;
          },
        },
      },
    },
  };

  return (
    <div className="w-full pb-24" id="tokenomics">
      <div className="container mx-auto">
        <h1 className="text-4xl text-white font-bold text-center mb-20">
          Tokenomics
        </h1>
        <div className="w-full flex justify-center items-center lg:justify-between flex-col gap-y-12 gap-x-4 lg:flex-row">
          <div className="w-full lg:w-1/2 flex justify-center">
            <animated.div style={{ width: "500px", ...styles }}>
              <Pie data={userData} plugins={[textCenter]} options={labelText} />
            </animated.div>
          </div>

          <div className="w-full justify-center">
            <ul className="flex flex-col items-end justify-center h-full gap-3 px-3 max-sm:pt-10 cursor-pointer">
              {tokenomics.map((item, index) => {
                return (
                  <animated.li
                    key={index}
                    className={`text-center w-full lg:w-3/4 bg-slate-200 py-3 relative`}
                    style={styles}
                  >
                    <div
                      className={`absolute h-full top-0 w-2 ${item.bgcolor}`}
                    ></div>
                    <h4 className="text-xl font-bold text-gray-700">
                      {item.title}
                    </h4>
                    <p className="text-gray-500">{item.description}</p>
                  </animated.li>
                );
              })}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TokenomicsSection;