From 7090c1e92c3681d361013e1980efa5ba601dac50 Mon Sep 17 00:00:00 2001
From: "vien.nguyen2-tiki" <vien.nguyen2@tiki.vn>
Date: Fri, 3 Mar 2023 10:56:22 +0700
Subject: [PATCH] feat: add fee burned chart

---
 pages/charts.tsx         |  2 ++
 views/charts/FeeBurn.tsx | 52 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 views/charts/FeeBurn.tsx

diff --git a/pages/charts.tsx b/pages/charts.tsx
index 4c884a38..5d340efc 100644
--- a/pages/charts.tsx
+++ b/pages/charts.tsx
@@ -4,6 +4,7 @@ import Head from 'next/head'
 import React from 'react'
 import Address from 'views/charts/Address'
 import Fee from 'views/charts/Fee'
+import FeeBurn from 'views/charts/FeeBurn'
 import Gas from 'views/charts/Gas'
 import Transactions from 'views/charts/Transactions'
 import Overview from 'views/homepage/Overview'
@@ -22,6 +23,7 @@ const Charts: React.FC<NextPage> = _ => {
 					<Address />
 					<Gas />
 					<Fee />
+					<FeeBurn />
 				</div>
 			</Container>
 		</Layout>
diff --git a/views/charts/FeeBurn.tsx b/views/charts/FeeBurn.tsx
new file mode 100644
index 00000000..119c723a
--- /dev/null
+++ b/views/charts/FeeBurn.tsx
@@ -0,0 +1,52 @@
+import { Col, Row } from '@astraprotocol/astra-ui'
+import API_LIST from 'api/api_list'
+import { ethers } from 'ethers'
+import { isNumber } from 'lodash'
+import useSWR from 'swr'
+import { convertBigNumberToString } from 'utils/helper'
+import ChartHeader from './components/Header'
+import LineChart from './components/LineChart'
+
+function convertFeeToDataSet(history: FeeItem[], convertDecimal?: boolean): [string[], number[]] {
+	const data = history.map(({ totalTransactionFees }) =>
+		parseFloat(ethers.utils.formatEther(`${convertBigNumberToString((totalTransactionFees || 0) / 2)}`))
+	)
+
+	const labels = history.map(({ date, year, month }) => (date ? date : `${year}-${month}-01`))
+	return [labels, data]
+}
+
+export default function FeeBurn() {
+	const { data: feeDailyRes } = useSWR<FeeResponse>(
+		API_LIST.GET_FEE_DAILY.replace('#YEAR', new Date().getFullYear().toString())
+	)
+	const feeDaily = feeDailyRes?.result?.totalFeesHistory || []
+	const [feeDailyLabels, feeDailyData] = convertFeeToDataSet(feeDaily)
+
+	return (
+		<Col>
+			<ChartHeader text="Fees Burned" />
+			<Row className="md-flex-column">
+				<LineChart
+					leftTitle="Total fees burned | Daily"
+					rightTitle={{
+						title: 'Daily Average',
+						value: parseFloat(
+							ethers.utils.formatEther(
+								`${
+									isNumber(feeDailyRes?.result?.dailyAverage)
+										? convertBigNumberToString((feeDailyRes?.result?.dailyAverage || 0) / 2)
+										: 0
+								}`
+							)
+						)
+					}}
+					data={feeDailyData}
+					labels={feeDailyLabels}
+					label="Fee Burned"
+					unitName="ASA"
+				/>
+			</Row>
+		</Col>
+	)
+}