blockworks-foundation
/
solana
mirror of https://github.com/blockworks-foundation/solana.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

explorer: add load button for largest accounts card (#14437)

This commit is contained in:
Josh 2021-01-05 11:22:15 -08:00 committed by GitHub
parent 54a5876c48
commit ecde98401b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
explorer/src/components/TopAccountsCard.tsx
View File

@ -19,19 +19,15 @@ export function TopAccountsCard() {
const [showDropdown, setDropdown] = React.useState(false);
const filter = useQueryFilter();
// Fetch on load
React.useEffect(() => {
if (richList === Status.Idle && typeof supply === "object") fetchRichList();
}, [supply]); // eslint-disable-line react-hooks/exhaustive-deps
if (typeof supply !== "object") return null;
if (richList === Status.Disconnected) {
return <ErrorCard text="Not connected to the cluster" />;
}
if (richList === Status.Idle || richList === Status.Connecting)
if (richList === Status.Connecting) {
return <LoadingCard />;
}
if (typeof richList === "string") {
return <ErrorCard text={richList} retry={fetchRichList} />;
@ -39,25 +35,28 @@ export function TopAccountsCard() {
let supplyCount: number;
let accounts, header;
switch (filter) {
case "nonCirculating": {
accounts = richList.nonCirculating;
supplyCount = supply.nonCirculating;
header = "Non-Circulating";
break;
}
case "all": {
accounts = richList.total;
supplyCount = supply.total;
header = "Total";
break;
}
case "circulating":
default: {
accounts = richList.circulating;
supplyCount = supply.circulating;
header = "Circulating";
break;
if (richList !== Status.Idle) {
switch (filter) {
case "nonCirculating": {
accounts = richList.nonCirculating;
supplyCount = supply.nonCirculating;
header = "Non-Circulating";
break;
}
case "all": {
accounts = richList.total;
supplyCount = supply.total;
header = "Total";
break;
}
case "circulating":
default: {
accounts = richList.circulating;
supplyCount = supply.circulating;
header = "Circulating";
break;
}
}
}
@ -84,23 +83,38 @@ export function TopAccountsCard() {
</div>
</div>
<div className="table-responsive mb-0">
<table className="table table-sm table-nowrap card-table">
<thead>
<tr>
<th className="text-muted">Rank</th>
<th className="text-muted">Address</th>
<th className="text-muted text-right">Balance (SOL)</th>
<th className="text-muted text-right">% of {header} Supply</th>
</tr>
</thead>
<tbody className="list">
{accounts.map((account, index) =>
renderAccountRow(account, index, supplyCount)
)}
</tbody>
</table>
</div>
{richList === Status.Idle && (
<div className="card-body">
<span
className="btn btn-white ml-3 d-none d-md-inline"
onClick={fetchRichList}
>
Load Largest Accounts
</span>
</div>
)}
{accounts && (
<div className="table-responsive mb-0">
<table className="table table-sm table-nowrap card-table">
<thead>
<tr>
<th className="text-muted">Rank</th>
<th className="text-muted">Address</th>
<th className="text-muted text-right">Balance (SOL)</th>
<th className="text-muted text-right">
% of {header} Supply
</th>
</tr>
</thead>
<tbody className="list">
{accounts.map((account, index) =>
renderAccountRow(account, index, supplyCount)
)}
</tbody>
</table>
</div>
)}
</div>
</>
);