From 06f13ba49e7b8ab4e0c31be9a42fe14b78a351ea Mon Sep 17 00:00:00 2001
From: Marc-Aurele Besner
 <82244926+marc-aurele-besner@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:39:10 -0400
Subject: [PATCH] pass in valueSuffix to add token symbol

---
 .../src/components/Leaderboard/LeaderboardList.tsx    |  3 +++
 explorer/src/components/Leaderboard/index.tsx         | 11 ++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/explorer/src/components/Leaderboard/LeaderboardList.tsx b/explorer/src/components/Leaderboard/LeaderboardList.tsx
index ceff51df0..e6dbf7648 100644
--- a/explorer/src/components/Leaderboard/LeaderboardList.tsx
+++ b/explorer/src/components/Leaderboard/LeaderboardList.tsx
@@ -40,6 +40,7 @@ type LeaderboardListProps = {
   idLink: (id: string) => string
   idLabel?: string
   valueType?: 'number' | 'bigNumber'
+  valueSuffix?: string
   showAccountIcon?: boolean
 }
 type Row = AccountTransferSenderTotalCountQuery['account_transfer_sender_total_count'][0]
@@ -51,6 +52,7 @@ export const LeaderboardList: FC<LeaderboardListProps> = ({
   idLink,
   idLabel = 'Account',
   valueType = 'bigNumber',
+  valueSuffix = '',
   showAccountIcon = true,
 }) => {
   const { ref, inView } = useInView()
@@ -102,6 +104,7 @@ export const LeaderboardList: FC<LeaderboardListProps> = ({
             {row.original.value
               ? `${numberWithCommas(valueType === 'bigNumber' ? bigNumberToNumber(row.original.value) : row.original.value)}`
               : 0}
+            {valueSuffix && ` ${valueSuffix}`}
           </div>
         ),
       },
diff --git a/explorer/src/components/Leaderboard/index.tsx b/explorer/src/components/Leaderboard/index.tsx
index bdb79adcb..f1abac871 100644
--- a/explorer/src/components/Leaderboard/index.tsx
+++ b/explorer/src/components/Leaderboard/index.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import { INTERNAL_ROUTES, Routes } from '@/constants'
 import useChains from '@/hooks/useChains'
 import { PageTabs } from 'components/common/PageTabs'
 import { Tab } from 'components/common/Tabs'
+import { TOKEN } from 'constants/general'
+import { INTERNAL_ROUTES, Routes } from 'constants/routes'
 import useMediaQuery from 'hooks/useMediaQuery'
 import useWallet from 'hooks/useWallet'
 import React, { FC } from 'react'
@@ -59,6 +60,7 @@ export const AccountLeaderboard: FC = () => {
             query={Query.QUERY_ACCOUNT_TRANSFER_SENDER_TOTAL_VALUE}
             table='account_transfer_sender_total_value'
             idLink={(id) => INTERNAL_ROUTES.accounts.id.page(network, Routes.consensus, id)}
+            valueSuffix={TOKEN.symbol}
           />
         </Tab>
         <Tab title='Transfer Receiver Count'>
@@ -76,6 +78,7 @@ export const AccountLeaderboard: FC = () => {
             query={Query.QUERY_ACCOUNT_TRANSFER_RECEIVER_TOTAL_VALUE}
             table='account_transfer_receiver_total_value'
             idLink={(id) => INTERNAL_ROUTES.accounts.id.page(network, Routes.consensus, id)}
+            valueSuffix={TOKEN.symbol}
           />
         </Tab>
         <Tab title='Remark Count'>
@@ -120,6 +123,7 @@ export const AccountLeaderboard: FC = () => {
             query={Query.QUERY_ACCOUNT_TRANSACTION_FEE_PAID_TOTAL_VALUE}
             table='account_transaction_fee_paid_total_value'
             idLink={(id) => INTERNAL_ROUTES.accounts.id.page(network, Routes.consensus, id)}
+            valueSuffix={TOKEN.symbol}
           />
         </Tab>
       </PageTabs>
@@ -151,6 +155,7 @@ export const FarmerLeaderboard: FC = () => {
             table='farmer_vote_and_block_total_value'
             idLabel='Farmer'
             idLink={(id) => INTERNAL_ROUTES.accounts.id.page(network, Routes.consensus, id)}
+            valueSuffix={TOKEN.symbol}
           />
         </Tab>
         <Tab title='Vote Count'>
@@ -170,6 +175,7 @@ export const FarmerLeaderboard: FC = () => {
             table='farmer_vote_total_value'
             idLabel='Farmer'
             idLink={(id) => INTERNAL_ROUTES.accounts.id.page(network, Routes.consensus, id)}
+            valueSuffix={TOKEN.symbol}
           />
         </Tab>
         <Tab title='Block Count'>
@@ -189,6 +195,7 @@ export const FarmerLeaderboard: FC = () => {
             table='farmer_block_total_value'
             idLabel='Farmer'
             idLink={(id) => INTERNAL_ROUTES.accounts.id.page(network, Routes.consensus, id)}
+            valueSuffix={TOKEN.symbol}
           />
         </Tab>
       </PageTabs>
@@ -252,6 +259,7 @@ export const OperatorLeaderboard: FC = () => {
             table='operator_deposits_total_value'
             idLabel='Operator'
             idLink={(id) => INTERNAL_ROUTES.operators.id.page(network, Routes.staking, id)}
+            valueSuffix={TOKEN.symbol}
             showAccountIcon={false}
           />
         </Tab>
@@ -295,6 +303,7 @@ export const NominatorLeaderboard: FC = () => {
             table='nominator_deposits_total_value'
             idLabel='Nominator'
             idLink={(id) => INTERNAL_ROUTES.accounts.id.page(network, Routes.consensus, id)}
+            valueSuffix={TOKEN.symbol}
           />
         </Tab>
         <Tab title='Withdrawals Count'>