Skip to content

Commit

Permalink
Merge pull request #43 from soaresa/feat/sort-validators
Browse files Browse the repository at this point in the history 
feat: Add Sortable Functionality to Validators Table
  • Loading branch information
@minaxolone
minaxolone authored Jun 1, 2024
2 parents 3791436 + 61eef90 commit 7feb5f5
Show file tree
Hide file tree
Showing 4 changed files with 321 additions and 114 deletions.
118 changes: 4 additions & 114 deletions web-app/src/modules/core/routes/Validators/Validators.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { FC } from 'react';
import { gql, useQuery } from '@apollo/client';
import Page from '../../../ui/Page';
import AccountAddress from '../../../ui/AccountAddress';
import Money from '../../../ui/Money';
import clsx from 'clsx';
import { CheckIcon, XMarkIcon } from '@heroicons/react/20/solid';
import ValidatorsTable from './components/ValidatorsTable';
import ValidatorsStats from './components/ValidatorsStats';

const GET_VALIDATORS = gql`
query GetValidators {
Expand Down Expand Up @@ -70,119 +68,11 @@ const Validators: FC = () => {
}

if (data) {
const validatorSet = data.validators.filter((it) => it.inSet);
const eligible = data.validators.length - validatorSet.length;

return (
<Page __deprecated_grayBg>
<section className="my-2 flow-root">
<div>
<dl className="md:w-1/2 grid gap-0.5 shadow overflow-hidden rounded-lg text-center grid-cols-2 m-2">
<div className="flex flex-col bg-white p-4">
<dt className="text-sm font-semibold leading-6 text-gray-600">Validator Set</dt>
<dd className="order-first text-3xl tracking-tight text-gray-900 font-mono">
{validatorSet.length}
</dd>
</div>
<div className="flex flex-col bg-white p-4">
<dt className="text-sm font-semibold leading-6 text-gray-600">Eligible</dt>
<dd className="order-first text-3xl tracking-tight text-gray-900 font-mono">
{eligible}
</dd>
</div>
</dl>
</div>

<div className="overflow-x-auto">
<div className="inline-block min-w-full py-2 align-middle px-2">
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-300">
<thead className="bg-gray-50">
<tr
className={clsx(
'divide-x divide-gray-200',
'text-left text-sm font-semibold text-gray-900 text-center',
)}
>
<th scope="col" className="py-3 px-2">
Address
</th>
<th scope="col" className="py-3 px-2">
In Set
</th>
<th scope="col" className="py-3 px-2">
Voting Power
</th>
<th scope="col" className="py-3 px-2">
Grade
</th>
<th scope="col" className="py-3 px-2">
Active Vouches
</th>
<th scope="col" className="py-3 px-2 text-right">
Current Bid (Expiration Epoch)
</th>
<th scope="col" className="py-3 px-2 text-right">
Balance
</th>
<th scope="col" className="py-3 px-2 text-right">
Unlocked
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
{data.validators.map((validator) => (
<tr
key={validator.address}
className={clsx(
'divide-x divide-gray-200',
'whitespace-nowrap text-sm text-gray-500 even:bg-gray-50 text-center',
)}
>
<td className="px-2 py-2 pl-3">
<AccountAddress address={validator.address} />
</td>
<td className="px-2 py-2">
{validator.inSet ? (
<CheckIcon className="w-5 h-5 text-green-500 inline" />
) : (
<XMarkIcon className="w-5 h-5 text-red-500 inline" />
)}
</td>
<td className="px-2 py-2">
{Number(validator.votingPower).toLocaleString()}
</td>
<td className="px-2 py-2">
{validator.grade.compliant ? (
<CheckIcon className="w-5 h-5 text-green-500 inline" />
) : (
<XMarkIcon className="w-5 h-5 text-red-500 inline" />
)}
{`${validator.grade.proposedBlocks.toLocaleString()} / ${validator.grade.failedBlocks.toLocaleString()}`}
</td>
<td className="px-2 py-2 text-center">
{validator.vouches.length.toLocaleString()}
</td>
<td className="px-2 py-2 font-mono text-right">
{`${validator.currentBid.currentBid.toLocaleString()} (${validator.currentBid.expirationEpoch.toLocaleString()})`}
</td>
<td className="px-2 py-2 font-mono text-right">
<Money>{Number(validator.account.balance)}</Money>
</td>
<td className="px-2 py-2 font-mono text-right">
{validator.account.slowWallet ? (
<Money>{Number(validator.account.slowWallet.unlocked)}</Money>
) : (
''
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
<ValidatorsStats validators={data.validators} />
<ValidatorsTable validators={data.validators} />
</section>
</Page>
);
Expand Down
32 changes: 32 additions & 0 deletions web-app/src/modules/core/routes/Validators/components/ValidatorsStats.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { FC } from 'react';
import { IValidator } from '../../../../interface/Validator.interface';

interface ValidatorsStatsProps {
validators: IValidator[];
}

const ValidatorsStats: FC<ValidatorsStatsProps> = ({ validators }) => {
const validatorSet = validators.filter((it) => it.inSet);
const eligible = validators.length - validatorSet.length;

return (
<div>
<dl className="md:w-1/2 grid gap-0.5 shadow overflow-hidden rounded-lg text-center grid-cols-2 m-2">
<div className="flex flex-col bg-white p-4">
<dt className="text-sm font-semibold leading-6 text-gray-600">Validator Set</dt>
<dd className="order-first text-3xl tracking-tight text-gray-900 font-mono">
{validatorSet.length}
</dd>
</div>
<div className="flex flex-col bg-white p-4">
<dt className="text-sm font-semibold leading-6 text-gray-600">Eligible</dt>
<dd className="order-first text-3xl tracking-tight text-gray-900 font-mono">
{eligible}
</dd>
</div>
</dl>
</div>
);
};

export default ValidatorsStats;
Loading

0 comments on commit 7feb5f5

Please sign in to comment.