solana/explorer/src/components/account/VoteAccountSection.tsx

88 lines
2.3 KiB
TypeScript

import React from "react";
import { Account, useFetchAccountInfo } from "providers/accounts";
import { TableCardBody } from "components/common/TableCardBody";
import { Address } from "components/common/Address";
import { VoteAccount } from "validators/accounts/vote";
import { displayTimestamp } from "utils/date";
import {
AccountHeader,
AccountAddressRow,
AccountBalanceRow,
} from "components/common/Account";
import { Slot } from "components/common/Slot";
export function VoteAccountSection({
account,
voteAccount,
}: {
account: Account;
voteAccount: VoteAccount;
}) {
const refresh = useFetchAccountInfo();
const rootSlot = voteAccount.info.rootSlot;
return (
<div className="card">
<AccountHeader
title="Vote Account"
refresh={() => refresh(account.pubkey, "parsed")}
/>
<TableCardBody>
<AccountAddressRow account={account} />
<AccountBalanceRow account={account} />
<tr>
<td>
Authorized Voter
{voteAccount.info.authorizedVoters.length > 1 ? "s" : ""}
</td>
<td className="text-lg-end">
{voteAccount.info.authorizedVoters.map((voter) => {
return (
<Address
pubkey={voter.authorizedVoter}
key={voter.authorizedVoter.toString()}
alignRight
raw
link
/>
);
})}
</td>
</tr>
<tr>
<td>Authorized Withdrawer</td>
<td className="text-lg-end">
<Address
pubkey={voteAccount.info.authorizedWithdrawer}
alignRight
raw
link
/>
</td>
</tr>
<tr>
<td>Last Timestamp</td>
<td className="text-lg-end font-monospace">
{displayTimestamp(voteAccount.info.lastTimestamp.timestamp * 1000)}
</td>
</tr>
<tr>
<td>Commission</td>
<td className="text-lg-end">{voteAccount.info.commission + "%"}</td>
</tr>
<tr>
<td>Root Slot</td>
<td className="text-lg-end">
{rootSlot !== null ? <Slot slot={rootSlot} link /> : "N/A"}
</td>
</tr>
</TableCardBody>
</div>
);
}