Skip to content

Commit

Permalink
Rich List Page Updated
Browse files Browse the repository at this point in the history 
Added Top Balance, Top Holders, Top Stakers
  • Loading branch information
@LibreBlocksDev
LibreBlocksDev committed Feb 19, 2024
1 parent 44d742e commit d4cd70a
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 92 deletions.
Binary file modified public/images/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/icondark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
136 changes: 45 additions & 91 deletions src/views/rich-list/table.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
))}
Expand All @@ -131,4 +85,4 @@ export default function RichListTable({ data, data2 }: RichListTableProps) {
</div>
</>
);
}
}
3 changes: 2 additions & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}'],
Expand All @@ -11,7 +12,7 @@ module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)'],
sans: ['Inter', 'sans-serif'],
},
fontSize: {
'4.5xl': ['2.5rem', '3rem'],
Expand Down

0 comments on commit d4cd70a

Please sign in to comment.