import { useSpring, animated } from "@react-spring/web"; import { useEffect, useState } from "react"; import { Pie } from "react-chartjs-2"; import "chart.js/auto"; import { Chart as ChartJS, ArcElement, Tooltip, Legend, ChartData, } from "chart.js"; import ChartDataLabels from "chartjs-plugin-datalabels"; import { Context } from "chartjs-plugin-datalabels"; import tokenomicChart from "../../../assets/images/tokenomic-chart.png"; import "animate.css"; import { useTranslation } from "react-i18next"; type Props = {}; ChartJS.register(ArcElement, Tooltip, Legend); const tokenomics = [ { name: "Treasury", title: "Treasury - 14%", precent: "14", description: " ", color: "#86eae9", bgcolor: "bg-[#86eae9]", }, { name: "Liquidity", title: "Liquidity - 5%", precent: "5", description: " ", color: "#5dbdd3", bgcolor: "bg-[#5dbdd3]", }, { name: "Private sale", title: "Private sale - 15%", precent: "15", description: " ", color: "#4591b8", bgcolor: "bg-[#4591b8]", }, { name: "Seed sale", title: "Seed sale - 19%", precent: "19", description: " ", color: "#3b6696", bgcolor: "bg-[#3b6696]", }, { name: "Public sale", title: "Public sale - 5%", precent: "5", description: " ", color: "#353c6e", bgcolor: "bg-[#353c6e]", }, { name: "Staking & Farming", title: "Staking & Farming - 15%", precent: "15", description: " ", color: "#705788", bgcolor: "bg-[#705788]", }, { name: "Team", title: "Team - 10%", precent: "10", description: " ", color: "#a5769e", bgcolor: "bg-[#a5769e]", }, { name: "Marketing", title: "Marketing - 15%", precent: "15", description: " ", color: "#d59ab3", bgcolor: "bg-[#d59ab3]", }, { name: "Advisor", title: "Advisor - 2%", precent: "2", description: " ", color: "#705788", bgcolor: "bg-[#705788]", }, ]; // const dataSchedule = [ // { // title: "Ecosystem Growth", // description: // "5 years vesting, 30% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from year 2.", // }, // { // title: "Community Development", // description: // "5 years vesting, 30% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from the 2nd year.", // }, // { // title: "Team", // description: // "5 years vesting, 1 year course, and lock pattern are in each block from the 2nd year.", // }, // { // title: "Strategic Sale", // description: // "2 years vesting, 1 year course, and lock pattern are all block by block from 2nd year.", // }, // { // title: "Treasury", // description: // "5 years vesting, 10% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from year 2.", // }, // { // title: "Seed Sale", // description: // "3 years vesting, 1 year lock and unlock in each block from the 2nd year.", // }, // { // title: "Binance Launchpad Sale", // description: "100% key at TGE.", // }, // { // title: "Advisors", // description: // "3 years vesting, 1-year lock, and lock pattern are all block by block from 2nd year.", // }, // ]; const TokenomicsSection = (props: Props) => { const { t } = useTranslation("tokenomicHome"); const [isVisible, setIsVisible] = useState(false); const [tokenomicData, setTokenomicData] = useState([]); useEffect(() => { setTokenomicData(t("array", { returnObjects: true })); const section = document.getElementById("tokenomics"); const observer = new IntersectionObserver( ([entry]) => { setIsVisible(entry.isIntersecting); }, { threshold: 0.2 } ); if (!section) { return; } observer.observe(section); return () => { observer.unobserve(section); }; }, [t]); useEffect(() => { console.log("isVisible", isVisible); }, [isVisible]); const styles = useSpring({ opacity: isVisible ? 1 : 0, transform: isVisible ? "scaleX(1)" : "scaleX(0.5)", config: { duration: 300, }, }); const plugins = { id: "textCenter", datalabels: {}, }; const [userData, setUserData] = useState({ labels: tokenomics.map((data) => data.name), datasets: [ { label: "text", data: tokenomics.map((data) => data.precent), backgroundColor: tokenomics.map((data) => data.color), borderWidth: 1, datalabels: { font: { weight: "bold", }, anchor: "center", rotation: function (ctx: any) { const valuesBefore = ctx.dataset.data .slice(0, ctx.dataIndex) .reduce( (a: number, b: number) => Number(a) + Number(b), 1 as number ); const sum = ctx.dataset.data.reduce( (a: number, b: number) => Number(a) + Number(b), 1 as number ); const rotation = ((valuesBefore + ctx.dataset.data[ctx.dataIndex] / 2) / sum) * 360; return rotation < 180 ? rotation - 95 : rotation + 90; }, align: "center", offset: -30, }, }, ], }); const options = { layout: {}, hoverBorderWidth: 4, plugins: { legend: { display: false, }, datalabels: { font: { size: window.innerWidth > 1024 ? 20 : window.innerWidth > 768 ? 16 : 10, }, color: "#fff", formatter: (context: any, agrs: any) => { const index = agrs.dataIndex; return agrs.chart.data.labels[index]; }, }, tooltip: { callbacks: { label: (context: any) => { return ` ${tokenomics[context.dataIndex].title}`; }, }, }, }, }; ChartJS.register(ChartDataLabels); return (
{item?.description}
{index < tokenomicData.length - 1 && ( )}