Rich List Page Updated

Added Top Balance, Top Holders, Top Stakers

Author: LibreBlocksDev

public/images/icon.png

@@ -1,128 +1,82 @@
-'use client';
-
+import React, { useState, useEffect } from 'react';
 import { Table, TableHead, TableRow } from '@mui/material';
 import * as S from '@/styles/table';
 import { motion } from 'framer-motion';
-import type { RichListTableProps } from './types';
 import Link from 'next/link';
-import * as React from 'react';
-
-import * as Switch from '@radix-ui/react-switch';
 import clsx from 'clsx';
+import type { RichListTableProps } from './types';
+
 const MotionTableRow = motion(TableRow);
 
 interface DataItem {
-  rank: number; 
+  rank: number;
   account: string;
   amount: number;
-  url?: string;
-}
-
-interface ValidatorsTableProps {
-  liquidData: DataItem[];
-  stakedData: DataItem[];
 }
 
 export default function RichListTable({ data, data2 }: RichListTableProps) {
   const numberFormat = new Intl.NumberFormat('en-US', { style: 'decimal' });
+  const [selectedTab, setSelectedTab] = useState('balance');
+
+  const calculateTotalData = () => {
+    const combinedData = [...data, ...data2];
+    const accountMap = new Map();
+
+    combinedData.forEach((item) => {
+      if (accountMap.has(item.account)) {
+        const existing = accountMap.get(item.account);
+        accountMap.set(item.account, { ...item, amount: existing.amount + item.amount });
+      } else {
+        accountMap.set(item.account, item);
+      }
+    });
+
+    return Array.from(accountMap.values()).sort((a, b) => b.amount - a.amount);
+  };
 
-  const [showLiquid, setShowLiquid] = React.useState(false); // if (true) default:topstakers 
-  const toggleDataView = () => setShowLiquid(!showLiquid);
-  const dataToDisplay = showLiquid ? data : data2;
+  const [totalData, setTotalData] = useState<DataItem[]>(calculateTotalData());
 
+  useEffect(() => {
+    setTotalData(calculateTotalData());
+  }, [data, data2, selectedTab]);
+
+  const dataToDisplay = selectedTab === 'holders' ? data : selectedTab === 'stakers' ? data2 : totalData;
 
   return (
     <>
       <div className='flex items-center mb-6 justify-center'>
-        <div
-          className={clsx('text-base font-medium leading-none transition', {
-            'text-shade-400': showLiquid,
-            'text-black': !showLiquid,
-          })}
-        >
-          Top Holders
-        </div>
-        <Switch.Root
-          checked={showLiquid}
-          onCheckedChange={toggleDataView}
-          className='relative mx-4 w-16 rounded-full bg-shade-100 py-1.5 outline-none border'
-          style={{ WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)' }}
-        >
-          <Switch.Thumb className='block h-6 w-6 translate-x-1.5 rounded-full bg-indigo-500 transition will-change-transform data-[state=checked]:translate-x-[34px]' />
-        </Switch.Root>
-        <div className='relative'>
-          <div
-            className={clsx('text-base font-medium leading-none transition', {
-              'text-shade-400': !showLiquid, 
-              'text-black': showLiquid, 
-            })}
-          >
-            Top Stakers
-          </div>
+        <div className="flex gap-4">
+          <button onClick={() => setSelectedTab('balance')} className={clsx('px-4 py-2 rounded', { 'bg-indigo-500 text-white': selectedTab === 'balance', 'bg-shade-100 text-shade-400': selectedTab !== 'balance' })}>Top Balance</button>
+          <button onClick={() => setSelectedTab('holders')} className={clsx('px-4 py-2 rounded', { 'bg-indigo-500 text-white': selectedTab === 'holders', 'bg-shade-100 text-shade-400': selectedTab !== 'holders' })}>Top Holders</button>
+          <button onClick={() => setSelectedTab('stakers')} className={clsx('px-4 py-2 rounded', { 'bg-indigo-500 text-white': selectedTab === 'stakers', 'bg-shade-100 text-shade-400': selectedTab !== 'stakers' })}>Top Stakers</button>
         </div>
       </div>
 
-
       <div className='w-full overflow-x-auto rounded-md border border-shade-200 bg-white'>
-        <Table aria-label='Validators Table'>
+        <Table aria-label='Rich List Table'>
           <TableHead>
             <S.StyledTableRow>
-              <S.StyledTableHeadCell size='medium'>RANK</S.StyledTableHeadCell>
-              <S.StyledTableHeadCell size='medium'>
-                ACCOUNT
-              </S.StyledTableHeadCell>
-              <S.StyledTableHeadCell size='medium'>
-                TOTAL
-              </S.StyledTableHeadCell>
-
+              <S.StyledTableHeadCell>RANK</S.StyledTableHeadCell>
+              <S.StyledTableHeadCell>ACCOUNT</S.StyledTableHeadCell>
+              <S.StyledTableHeadCell>TOTAL</S.StyledTableHeadCell>
             </S.StyledTableRow>
           </TableHead>
           <S.StyledTableBody>
             {dataToDisplay.map((item, index) => (
               <MotionTableRow
                 key={index}
-                initial={{ height: 0, opacity: 0 }}
-                animate={{
-                  height: 'auto',
-                  display: 'table-row',
-                  opacity: 1,
-                  transition: {
-                    duration: 0.6,
-                  },
-                }}
-                exit={{
-                  height: 0,
-                  opacity: 0,
-                  display: 'none',
-                  transition: {
-                    duration: 0.2,
-                  },
-                }}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1, transition: { duration: 0.5 } }}
+                exit={{ opacity: 0, transition: { duration: 0.3 } }}
               >
-                <S.StyledTableCell size='medium'>
-                  <span className='text-primary'>{index+1}</span>
-                </S.StyledTableCell>
-                <S.StyledTableCell size='medium'>
-                  <Link
-                    href={`/address/${item.account}`}
-                    className='inline-block max-w-full truncate align-middle hover:underline'
-                  >
-                    <span className=''>{item.account}</span>
+                <S.StyledTableCell>{index + 1}</S.StyledTableCell>
+                <S.StyledTableCell>
+                  <Link href={`/address/${item.account}`}>
+                    {item.account}
                   </Link>
                 </S.StyledTableCell>
-                <S.StyledTableCell size='medium'>
-                  <span className=''>{numberFormat.format(item.amount)}</span>
-                </S.StyledTableCell>
-
-
-                <S.StyledTableCell size='medium'>
-                  <a
-                    href="{row.url}"
-                    target='_blank'
-                    className='text-primary hover:underline'
-                  >
-
-                  </a>
+                <S.StyledTableCell>
+                  {numberFormat.format(item.amount)}
                 </S.StyledTableCell>
               </MotionTableRow>
             ))}
@@ -131,4 +85,4 @@ export default function RichListTable({ data, data2 }: RichListTableProps) {
       </div>
     </>
   );
-}
+}

public/images/icondark.png

@@ -2,6 +2,7 @@
 const plugin = require('tailwindcss/plugin');
 const colors = require('tailwindcss/colors');
 
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
@@ -11,7 +12,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['var(--font-inter)'],
+        sans: ['Inter', 'sans-serif'],
       },
       fontSize: {
         '4.5xl': ['2.5rem', '3rem'],