Explorer: Show empty state when block has no transactions (#13259)
This commit is contained in:
@ -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>
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user