You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
286 lines
7.9 KiB
286 lines
7.9 KiB
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 (
|
|
<div className="w-full pb-24 scroll-mt-16" id="tokenomics">
|
|
<div className="container w-[94%] mx-auto">
|
|
<h1 className="text-4xl text-white font-bold text-center mb-12 hover:text-orange-400">
|
|
Tokenomics
|
|
</h1>
|
|
<div className="w-full flex justify-center items-center lg:justify-between lg:flex-row flex-wrap gap-10">
|
|
<div className="w-full lg:w-[45%] flex justify-center">
|
|
<animated.div
|
|
style={{ ...styles }}
|
|
className="w-[300px] sm:w-[350px] md:w-[500px] lg:w-[550px]"
|
|
>
|
|
<Pie
|
|
data={userData as any}
|
|
plugins={[plugins]}
|
|
options={options}
|
|
/>
|
|
</animated.div>
|
|
</div>
|
|
<div className="w-full lg:w-[45%] justify-center">
|
|
<animated.li style={{ ...styles }} className={``}>
|
|
<h2 className="text-white text-center font-bold text-xl pb-4 md:pb-6 lg:pb-8">
|
|
{t("heading")}
|
|
</h2>
|
|
<ul className="flex flex-col items-end justify-center w-3/4 md:w-full h-full gap-8 px-3 mx-auto">
|
|
{tokenomicData.map((item: any, index) => {
|
|
return (
|
|
<div
|
|
key={index + 1}
|
|
className="w-full relative text-center border-2 border-[#06B6D4] text-white py-3 animate__backInDown rounded-lg px-4"
|
|
>
|
|
<h4 className="text-xl font-bold">{item?.title}</h4>
|
|
<p>{item?.description}</p>
|
|
{index < tokenomicData.length - 1 && (
|
|
<div className="absolute bottom-[-24px] left-1/2 translate-x-[-50%] h-3 w-3 bg-[#06B6D4] border-2 border-white rounded-[50%]"></div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</ul>
|
|
</animated.li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TokenomicsSection;
|
|
|