Explorer: Show empty state when block has no transactions (#13259)

This commit is contained in:
Justin Starry
2020-10-29 09:51:19 +08:00
committed by GitHub
parent de71fb9bdd
commit 2cf44a9e14

View File

@ -68,57 +68,61 @@ export function BlockHistoryCard({ slot }: { slot: number }) {
</TableCardBody> </TableCardBody>
</div> </div>
<div className="card"> {confirmedBlock.data.transactions.length === 0 ? (
<div className="card-header align-items-center"> <ErrorCard text="This block has no transactions" />
<h3 className="card-header-title">Block Transactions</h3> ) : (
</div> <div className="card">
<div className="card-header align-items-center">
<h3 className="card-header-title">Block Transactions</h3>
</div>
<div className="table-responsive mb-0"> <div className="table-responsive mb-0">
<table className="table table-sm table-nowrap card-table"> <table className="table table-sm table-nowrap card-table">
<thead> <thead>
<tr> <tr>
<th className="text-muted">Result</th> <th className="text-muted">Result</th>
<th className="text-muted">Transaction Signature</th> <th className="text-muted">Transaction Signature</th>
</tr> </tr>
</thead> </thead>
<tbody className="list"> <tbody className="list">
{confirmedBlock.data.transactions.map((tx, i) => { {confirmedBlock.data.transactions.map((tx, i) => {
let statusText; let statusText;
let statusClass; let statusClass;
let signature: React.ReactNode; let signature: React.ReactNode;
if (tx.meta?.err || !tx.transaction.signature) { if (tx.meta?.err || !tx.transaction.signature) {
statusClass = "warning"; statusClass = "warning";
statusText = "Failed"; statusText = "Failed";
} else { } else {
statusClass = "success"; statusClass = "success";
statusText = "Success"; statusText = "Success";
} }
if (tx.transaction.signature) { if (tx.transaction.signature) {
signature = ( signature = (
<Signature <Signature
signature={bs58.encode(tx.transaction.signature)} signature={bs58.encode(tx.transaction.signature)}
link link
/> />
);
}
return (
<tr key={i}>
<td>
<span className={`badge badge-soft-${statusClass}`}>
{statusText}
</span>
</td>
<td>{signature}</td>
</tr>
); );
} })}
</tbody>
return ( </table>
<tr key={i}> </div>
<td>
<span className={`badge badge-soft-${statusClass}`}>
{statusText}
</span>
</td>
<td>{signature}</td>
</tr>
);
})}
</tbody>
</table>
</div> </div>
</div> )}
</> </>
); );
} }