Tokenomics page (#370)

Co-authored-by: cuteolaf <[email protected]>

src/components/Footer.tsx

@@ -75,7 +75,7 @@ export const Footer = () => {
 										<a href="/#blocks">Blocks</a>
 									</li>
 									<li>
-										<a href="https://taostats.io/tokenomics/">Tokenomics</a>
+										<a href="/tokenomics/">Tokenomics</a>
 									</li>
 									<li>
 										<a href="https://nx.taostats.io/">Nakamoto</a>

src/components/Header.tsx

@@ -296,9 +296,7 @@ export const Header = () => {
 													<a href="/subnets">Subnets</a>
 												</li>
 												<li>
-													<a href="https://taostats.io/tokenomics/">
-														Tokenomics
-													</a>
+													<a href="/tokenomics/">Tokenomics</a>
 												</li>
 												<li>
 													<a href="https://nx.taostats.io/">Nakamoto</a>

src/components/Link.tsx

@@ -1,25 +1,32 @@
 import { AnchorHTMLAttributes, forwardRef } from "react";
-import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router-dom";
-import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
+import {
+	Link as RouterLink,
+	LinkProps as RouterLinkProps,
+} from "react-router-dom";
+import { Link as MuiLink } from "@mui/material";
 
 export interface LinkProps extends Omit<RouterLinkProps, "to"> {
 	to?: RouterLinkProps["to"];
 	href?: AnchorHTMLAttributes<HTMLAnchorElement>["href"];
+	underline?: "none" | "always" | "hover";
 }
 
 export const Link = forwardRef<any, LinkProps>((props, ref) => {
-	const {href, to, ...restProps}  = props;
-
-	const linkProps: MuiLinkProps = {
-		...restProps,
-		underline: "none"
-	};
+	const { href, to, underline = "hover", ...restProps } = props;
 
 	if (to) {
-		return <MuiLink ref={ref} component={RouterLink} to={to} {...linkProps} />;
+		return (
+			<MuiLink
+				ref={ref}
+				component={RouterLink}
+				to={to}
+				underline={underline}
+				{...restProps}
+			/>
+		);
 	}
 
-	return <MuiLink href={href} {...linkProps} />;
+	return <MuiLink href={href} underline={underline} {...restProps} />;
 });
 
 Link.displayName = "Link";

src/components/tokenomics/HalveningChart.tsx

@@ -0,0 +1,202 @@
+/** @jsxImportSource @emotion/react */
+import { useTheme } from "@emotion/react";
+import { HTMLAttributes } from "react";
+import Chart from "react-apexcharts";
+
+export type HalveningChartProps = HTMLAttributes<HTMLDivElement> & {
+	halveningData: any;
+};
+
+export const HalveningChart = (props: HalveningChartProps) => {
+	const { halveningData } = props;
+
+	const theme = useTheme();
+
+	const taoIssued = [
+		{
+			x: "01/09/2021",
+			y: 0,
+		},
+		{
+			x: "05/12/2021",
+			y: 546113,
+		},
+		{
+			x: "11/21/2021",
+			y: 546113,
+		},
+		{
+			x: "05/08/2024",
+			y: 6727871,
+		},
+	];
+
+	const initialEvents: any = [
+		{ time: "09 Jan 2021", name: "Kusanagi Network" },
+		{ time: "12 May 2021", name: "Kusanagi Network Halted" },
+		{ time: "21 Nov 2021", name: "Nakamoto Network" },
+		{ time: "20 Mar 2023", name: "Finney Network" },
+	];
+
+	for (let i = 0; i <= 6; i++) {
+		taoIssued.push({
+			x: new Date(halveningData[i].time * 1000).toDateString(),
+			y: parseInt(halveningData[i].total.replace(/,/g, "")),
+		});
+	}
+
+	const events = [];
+
+	for (let i = 0; i < initialEvents.length; i++) {
+		const { time, name } = initialEvents[i];
+		events.push({
+			x: new Date(time).getTime(),
+			borderColor: "#fff",
+			label: {
+				style: {
+					color: "#000",
+				},
+				text: name,
+			},
+		});
+	}
+	for (let i = 1; i <= 6; i++) {
+		events.push({
+			x: new Date(halveningData[i].time * 1000).getTime(),
+			borderColor: "#fff",
+			label: {
+				style: {
+					color: "#000",
+				},
+				text: (i == 1 ? "1st" : i == 2 ? "2nd" : i == 3 ? "3rd" : `${i}th`) + " Halvening",
+			},
+		});
+	}
+
+	return (
+		<div>
+			<Chart
+				height={300}
+				series={[
+					{
+						name: "TAO",
+						type: "area",
+						data: taoIssued,
+					},
+				]}
+				options={{
+					annotations: {
+						xaxis: events,
+					},
+					chart: {
+						background: theme.palette.primary.main,
+						toolbar: {
+							show: true,
+							offsetX: 0,
+							offsetY: 0,
+							tools: {
+								download: true,
+								selection: false,
+								zoom: false,
+								zoomin: false,
+								zoomout: false,
+								pan: false,
+							},
+							export: {
+								csv: {
+									filename: "halvening-chart",
+									headerCategory: "Date",
+								},
+								png: {
+									filename: "halvening-chart",
+								},
+								svg: {
+									filename: "halvening-chart",
+								},
+							},
+						},
+						zoom: {
+							enabled: false,
+						},
+					},
+					colors: [theme.palette.neutral.main],
+					dataLabels: {
+						enabled: false,
+					},
+					fill: {
+						type: "gradient",
+						gradient: {
+							shade: "dark",
+							shadeIntensity: 1,
+							inverseColors: false,
+							type: "vertical",
+							opacityFrom: 0.6,
+							opacityTo: 0.1,
+							stops: [0, 90, 100],
+						},
+					},
+					grid: {
+						padding: {
+							left: 0,
+						},
+						show: true,
+						borderColor: "rgba(255, 255, 255, 0.04)",
+						strokeDashArray: 4,
+					},
+					markers: {
+						size: 3,
+						colors: ["#000"],
+						strokeColors: [theme.palette.neutral.main],
+						strokeWidth: 1,
+					},
+					responsive: [
+						{
+							breakpoint: 767,
+							options: {
+								chart: {
+									height: 320,
+								},
+							},
+						},
+						{
+							breakpoint: 599,
+							options: {
+								chart: {
+									height: 270,
+								},
+							},
+						},
+					],
+					stroke: {
+						curve: "straight",
+						width: 1,
+						lineCap: "butt",
+						dashArray: 0,
+					},
+					tooltip: {
+						enabled: false,
+					},
+					xaxis: {
+						type: "datetime",
+						labels: {
+							style: {
+								colors: "#a8a8a8",
+							},
+						},
+					},
+					yaxis: [
+						{
+							opposite: true,
+							max: 21000000,
+							labels: {
+								style: {
+									colors: theme.palette.secondary.dark,
+								},
+							},
+						},
+					],
+				}}
+			/>
+		</div>
+	);
+};

src/components/tokenomics/TokenomicsChart.tsx

@@ -0,0 +1,63 @@
+/** @jsxImportSource @emotion/react */
+import { HTMLAttributes } from "react";
+
+import { formatNumber, nFormatter } from "../../utils/number";
+
+import Decimal from "decimal.js";
+import { DonutChart } from "../DonutChart";
+
+export type TokenomicsChartProps = HTMLAttributes<HTMLDivElement> & {
+	totalSupply: Decimal;
+	circulatingSupply: Decimal;
+	unissued: Decimal;
+	stakedCirculatingSupply: Decimal;
+	freeCirculatingSupply: Decimal;
+};
+
+export const TokenomicsChart = (props: TokenomicsChartProps) => {
+	const {
+		totalSupply,
+		circulatingSupply,
+		unissued,
+		stakedCirculatingSupply,
+		freeCirculatingSupply,
+	} = props;
+
+	const unissuedPercent = unissued.mul(100).div(totalSupply);
+	const strUnissuedPercent = formatNumber(unissuedPercent, {decimalPlaces: 2 });
+
+	const stakedPercent = stakedCirculatingSupply.mul(100).div(circulatingSupply);
+	const strStakedPercent = formatNumber(stakedPercent, { decimalPlaces: 2 });
+
+	const freePercent = freeCirculatingSupply.mul(100).div(circulatingSupply);
+	const strFreePercent = formatNumber(freePercent, { decimalPlaces: 2 });
+
+	const strCirculatingSupply = nFormatter(circulatingSupply.toNumber(), 2);
+	const strTotalSupply = nFormatter(totalSupply.toNumber(), 2);
+
+	const strStaked = `Circulating Delegated/Staked (${strStakedPercent}% of ${strCirculatingSupply})`;
+	const strFree = `Circulating Free (${strFreePercent}% of ${strCirculatingSupply})`;
+	const strUnissued = `Unissued (${strUnissuedPercent}% of ${strTotalSupply})`;
+
+	return (
+		<div>
+			<DonutChart
+				height={560}
+				options={{
+					labels: [strStaked, strFree, strUnissued],
+					legend: {
+						position: "right",
+						labels: {
+							useSeriesColors: true,
+						},
+					},
+				}}
+				series={[
+					stakedCirculatingSupply.toDecimalPlaces(0).toNumber(),
+					freeCirculatingSupply.toDecimalPlaces(0).toNumber(),
+					unissued.toDecimalPlaces(0).toNumber(),
+				]}
+			/>
+		</div>
+	);
+};

src/router.tsx

@@ -18,6 +18,7 @@ import { RootSubnetPage } from "./screens/subnet";
 import { SubnetPage } from "./screens/subnet";
 import { ColdkeyPage } from "./screens/coldkey";
 import { HotkeyPage } from "./screens/hotkey";
+import { TokenomicsPage } from "./screens/tokenomics";
 
 export const router = createBrowserRouter(
 	[
@@ -93,6 +94,10 @@ export const router = createBrowserRouter(
 					path: "hotkey/:hkey",
 					element: <HotkeyPage />,
 				},
+				{
+					path: "tokenomics",
+					element: <TokenomicsPage />,
+				},
 				{
 					path: "*",
 					element: <NotFoundPage />,

src/screens/subnet.tsx

@@ -70,10 +70,6 @@ const subnetName = css`
 	font-size: 28px;
 `;
 
-const stakingDataItem = css`
-	padding: 0 35px 0 0;
-`;
-
 const subnetDescription = css`
 	padding: 0px 20px 20px;
 	display: block;