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

Make explorer table views more mobile friendly (#11358)

This commit is contained in:
Justin Starry 2020-08-04 20:44:16 +08:00 committed by GitHub
parent 5b4cb083f1
commit 247e361d23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 162 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
explorer/src/components/AccountDetails.tsx
View File

@ -90,13 +90,13 @@ function UnknownAccountCard({ account }: { account: Account }) {
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={account.pubkey} alignRight /> <Address pubkey={account.pubkey} alignRight />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Balance (SOL)</td> <td>Balance (SOL)</td>
<td className="text-right text-uppercase"> <td className="text-lg-right text-uppercase">
{lamportsToSolString(lamports)} {lamportsToSolString(lamports)}
</td> </td>
</tr> </tr>
@ -104,14 +104,14 @@ function UnknownAccountCard({ account }: { account: Account }) {
{details && ( {details && (
<tr> <tr>
<td>Data (Bytes)</td> <td>Data (Bytes)</td>
<td className="text-right">{details.space}</td> <td className="text-lg-right">{details.space}</td>
</tr> </tr>
)} )}
{details && ( {details && (
<tr> <tr>
<td>Owner</td> <td>Owner</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={details.owner} alignRight link /> <Address pubkey={details.owner} alignRight link />
</td> </td>
</tr> </tr>
@ -120,7 +120,9 @@ function UnknownAccountCard({ account }: { account: Account }) {
{details && ( {details && (
<tr> <tr>
<td>Executable</td> <td>Executable</td>
<td className="text-right">{details.executable ? "Yes" : "No"}</td> <td className="text-lg-right">
{details.executable ? "Yes" : "No"}
</td>
</tr> </tr>
)} )}
</TableCardBody> </TableCardBody>
@ -281,13 +283,7 @@ function HistoryCard({ pubkey }: { pubkey: PublicKey }) {
detailsList.push( detailsList.push(
<tr key={signature}> <tr key={signature}>
{index === 0 ? ( <td className="w-1">{slot}</td>
<td className="w-1">{slot}</td>
) : (
<td className="text-muted text-center w-1">
<span className="fe fe-more-horizontal" />
</td>
)}
<td> <td>
<span className={`badge badge-soft-${statusClass}`}> <span className={`badge badge-soft-${statusClass}`}>

14
explorer/src/components/StatsCard.tsx
View File

@ -75,31 +75,31 @@ function StatsCardBody() {
<TableCardBody> <TableCardBody>
<tr> <tr>
<td className="w-100">Block</td> <td className="w-100">Block</td>
<td className="text-right text-monospace">{currentBlock}</td> <td className="text-lg-right text-monospace">{currentBlock}</td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Block time</td> <td className="w-100">Block time</td>
<td className="text-right text-monospace">{averageBlockTime}</td> <td className="text-lg-right text-monospace">{averageBlockTime}</td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Epoch</td> <td className="w-100">Epoch</td>
<td className="text-right text-monospace">{currentEpoch} </td> <td className="text-lg-right text-monospace">{currentEpoch} </td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Epoch progress</td> <td className="w-100">Epoch progress</td>
<td className="text-right text-monospace">{epochProgress} </td> <td className="text-lg-right text-monospace">{epochProgress} </td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Epoch time remaining</td> <td className="w-100">Epoch time remaining</td>
<td className="text-right text-monospace">{epochTimeRemaining} </td> <td className="text-lg-right text-monospace">{epochTimeRemaining} </td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Transaction count</td> <td className="w-100">Transaction count</td>
<td className="text-right text-monospace">{transactionCount} </td> <td className="text-lg-right text-monospace">{transactionCount} </td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Transactions per second</td> <td className="w-100">Transactions per second</td>
<td className="text-right text-monospace">{averageTps} </td> <td className="text-lg-right text-monospace">{averageTps} </td>
</tr> </tr>
</TableCardBody> </TableCardBody>
); );

8
explorer/src/components/SupplyCard.tsx
View File

@ -32,19 +32,21 @@ export default function SupplyCard() {
<TableCardBody> <TableCardBody>
<tr> <tr>
<td className="w-100">Total Supply (SOL)</td> <td className="w-100">Total Supply (SOL)</td>
<td className="text-right">{lamportsToSolString(supply.total, 0)}</td> <td className="text-lg-right">
{lamportsToSolString(supply.total, 0)}
</td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Circulating Supply (SOL)</td> <td className="w-100">Circulating Supply (SOL)</td>
<td className="text-right"> <td className="text-lg-right">
{lamportsToSolString(supply.circulating, 0)} {lamportsToSolString(supply.circulating, 0)}
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Non-Circulating Supply (SOL)</td> <td className="w-100">Non-Circulating Supply (SOL)</td>
<td className="text-right"> <td className="text-lg-right">
{lamportsToSolString(supply.nonCirculating, 0)} {lamportsToSolString(supply.nonCirculating, 0)}
</td> </td>
</tr> </tr>

16
explorer/src/components/TransactionDetails.tsx
View File

@ -114,19 +114,19 @@ function StatusCard({ signature }: Props) {
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Signature</td> <td>Signature</td>
<td className="text-right"> <td className="text-lg-right">
<Signature signature={signature} /> <Signature signature={signature} alignRight />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Result</td> <td>Result</td>
<td className="text-right">{renderResult()}</td> <td className="text-lg-right">{renderResult()}</td>
</tr> </tr>
<tr> <tr>
<td>Timestamp</td> <td>Timestamp</td>
<td className="text-right"> <td className="text-lg-right">
{info.timestamp !== "unavailable" ? ( {info.timestamp !== "unavailable" ? (
displayTimestamp(info.timestamp * 1000) displayTimestamp(info.timestamp * 1000)
) : ( ) : (
@ -143,12 +143,12 @@ function StatusCard({ signature }: Props) {
<tr> <tr>
<td>Confirmations</td> <td>Confirmations</td>
<td className="text-right text-uppercase">{info.confirmations}</td> <td className="text-lg-right text-uppercase">{info.confirmations}</td>
</tr> </tr>
<tr> <tr>
<td>Block</td> <td>Block</td>
<td className="text-right">{info.slot}</td> <td className="text-lg-right">{info.slot}</td>
</tr> </tr>
{blockhash && ( {blockhash && (
@ -162,7 +162,7 @@ function StatusCard({ signature }: Props) {
</InfoTooltip> </InfoTooltip>
)} )}
</td> </td>
<td className="text-right"> <td className="text-lg-right">
<code>{blockhash}</code> <code>{blockhash}</code>
</td> </td>
</tr> </tr>
@ -171,7 +171,7 @@ function StatusCard({ signature }: Props) {
{fee && ( {fee && (
<tr> <tr>
<td>Fee (SOL)</td> <td>Fee (SOL)</td>
<td className="text-right">{lamportsToSolString(fee)}</td> <td className="text-lg-right">{lamportsToSolString(fee)}</td>
</tr> </tr>
)} )}
</TableCardBody> </TableCardBody>

24
explorer/src/components/account/StakeAccountCards.tsx
View File

@ -63,20 +63,20 @@ function OverviewCard({
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={account.pubkey} alignRight /> <Address pubkey={account.pubkey} alignRight />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Balance (SOL)</td> <td>Balance (SOL)</td>
<td className="text-right text-uppercase"> <td className="text-lg-right text-uppercase">
{lamportsToSolString(account.lamports || 0)} {lamportsToSolString(account.lamports || 0)}
</td> </td>
</tr> </tr>
{stakeAccount.meta && ( {stakeAccount.meta && (
<tr> <tr>
<td>Rent Reserve (SOL)</td> <td>Rent Reserve (SOL)</td>
<td className="text-right"> <td className="text-lg-right">
{lamportsToSolString(stakeAccount.meta.rentExemptReserve)} {lamportsToSolString(stakeAccount.meta.rentExemptReserve)}
</td> </td>
</tr> </tr>
@ -84,7 +84,7 @@ function OverviewCard({
{!stakeAccount.meta && ( {!stakeAccount.meta && (
<tr> <tr>
<td>State</td> <td>State</td>
<td className="text-right">{stakeAccount.displayState()}</td> <td className="text-lg-right">{stakeAccount.displayState()}</td>
</tr> </tr>
)} )}
</TableCardBody> </TableCardBody>
@ -112,21 +112,21 @@ function DelegationCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Status</td> <td>Status</td>
<td className="text-right">{displayStatus()}</td> <td className="text-lg-right">{displayStatus()}</td>
</tr> </tr>
{stake && ( {stake && (
<> <>
<tr> <tr>
<td>Delegated Stake (SOL)</td> <td>Delegated Stake (SOL)</td>
<td className="text-right"> <td className="text-lg-right">
{lamportsToSolString(stake.delegation.stake)} {lamportsToSolString(stake.delegation.stake)}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Delegated Vote Address</td> <td>Delegated Vote Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address <Address
pubkey={stake.delegation.voterPubkey} pubkey={stake.delegation.voterPubkey}
alignRight alignRight
@ -137,7 +137,7 @@ function DelegationCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
<tr> <tr>
<td>Activation Epoch</td> <td>Activation Epoch</td>
<td className="text-right"> <td className="text-lg-right">
{stake.delegation.isBootstrapStake() {stake.delegation.isBootstrapStake()
? "-" ? "-"
: stake.delegation.activationEpoch} : stake.delegation.activationEpoch}
@ -146,7 +146,7 @@ function DelegationCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
<tr> <tr>
<td>Deactivation Epoch</td> <td>Deactivation Epoch</td>
<td className="text-right"> <td className="text-lg-right">
{stake.delegation.isDeactivated() {stake.delegation.isDeactivated()
? stake.delegation.deactivationEpoch ? stake.delegation.deactivationEpoch
: "-"} : "-"}
@ -171,14 +171,14 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Stake Authority Address</td> <td>Stake Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={meta.authorized.staker} alignRight link /> <Address pubkey={meta.authorized.staker} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Withdraw Authority Address</td> <td>Withdraw Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={meta.authorized.withdrawer} alignRight link /> <Address pubkey={meta.authorized.withdrawer} alignRight link />
</td> </td>
</tr> </tr>
@ -186,7 +186,7 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
{hasLockup && ( {hasLockup && (
<tr> <tr>
<td>Lockup Authority Address</td> <td>Lockup Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={meta.lockup.custodian} alignRight link /> <Address pubkey={meta.lockup.custodian} alignRight link />
</td> </td>
</tr> </tr>

29
explorer/src/components/common/Address.tsx
View File

@ -30,17 +30,9 @@ export default function Address({ pubkey, alignRight, link }: Props) {
<span className="fe fe-check-circle"></span> <span className="fe fe-check-circle"></span>
); );
const copyButton = ( const content = (
<span className="c-pointer font-size-tiny mr-2">{copyIcon}</span> <>
); <span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
return (
<div
className={`d-flex align-items-center ${
alignRight ? "justify-content-end" : ""
}`}
>
{copyButton}
<span className="text-monospace"> <span className="text-monospace">
{link ? ( {link ? (
<Link className="" to={clusterPath(`/accounts/${address}`)}> <Link className="" to={clusterPath(`/accounts/${address}`)}>
@ -51,6 +43,19 @@ export default function Address({ pubkey, alignRight, link }: Props) {
displayAddress(address) displayAddress(address)
)} )}
</span> </span>
</div> </>
);
return (
<>
<div
className={`d-none d-lg-flex align-items-center ${
alignRight ? "justify-content-end" : ""
}`}
>
{content}
</div>
<div className="d-flex d-lg-none align-items-center">{content}</div>
</>
); );
} }

14
explorer/src/components/common/Signature.tsx
View File

@ -4,9 +4,13 @@ import { TransactionSignature } from "@solana/web3.js";
import { clusterPath } from "utils/url"; import { clusterPath } from "utils/url";
type CopyState = "copy" | "copied"; type CopyState = "copy" | "copied";
type Props = { signature: TransactionSignature; link?: boolean }; type Props = {
signature: TransactionSignature;
alignRight?: boolean;
link?: boolean;
};
export default function Signature({ signature, link }: Props) { export default function Signature({ signature, alignRight, link }: Props) {
const [state, setState] = useState<CopyState>("copy"); const [state, setState] = useState<CopyState>("copy");
const copyToClipboard = () => navigator.clipboard.writeText(signature); const copyToClipboard = () => navigator.clipboard.writeText(signature);
@ -28,7 +32,11 @@ export default function Signature({ signature, link }: Props) {
); );
return ( return (
<div className="d-flex align-items-center justify-content-end"> <div
className={`d-flex align-items-center ${
alignRight ? "justify-content-end" : ""
}`}
>
{copyButton} {copyButton}
<span className="text-monospace"> <span className="text-monospace">
{link ? ( {link ? (

6
explorer/src/components/instruction/RawDetails.tsx
View File

@ -17,7 +17,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
<> <>
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={ix.programId} alignRight link /> <Address pubkey={ix.programId} alignRight link />
</td> </td>
</tr> </tr>
@ -33,7 +33,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
<span className="badge badge-soft-dark mr-1">Signer</span> <span className="badge badge-soft-dark mr-1">Signer</span>
)} )}
</td> </td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={pubkey} alignRight link /> <Address pubkey={pubkey} alignRight link />
</td> </td>
</tr> </tr>
@ -41,7 +41,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
<tr> <tr>
<td>Instruction Data (Base58)</td> <td>Instruction Data (Base58)</td>
<td className="text-right"> <td className="text-lg-right">
<Copyable text={data} right> <Copyable text={data} right>
<code>{displayData(data)}</code> <code>{displayData(data)}</code>
</Copyable> </Copyable>

10
explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx
View File

@ -46,35 +46,35 @@ export function AuthorizeDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.stakePubkey} alignRight link /> <Address pubkey={params.stakePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Old Authority Address</td> <td>Old Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.authorizedPubkey} alignRight link /> <Address pubkey={params.authorizedPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>New Authority Address</td> <td>New Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.newAuthorizedPubkey} alignRight link /> <Address pubkey={params.newAuthorizedPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Type</td> <td>Authority Type</td>
<td className="text-right">{authorizationType}</td> <td className="text-lg-right">{authorizationType}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

6
explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx
View File

@ -33,21 +33,21 @@ export function DeactivateDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.stakePubkey} alignRight link /> <Address pubkey={params.stakePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.authorizedPubkey} alignRight link /> <Address pubkey={params.authorizedPubkey} alignRight link />
</td> </td>
</tr> </tr>

8
explorer/src/components/instruction/stake/DelegateDetailsCard.tsx
View File

@ -33,28 +33,28 @@ export function DelegateDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.stakePubkey} alignRight link /> <Address pubkey={params.stakePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Delegated Vote Address</td> <td>Delegated Vote Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.votePubkey} alignRight link /> <Address pubkey={params.votePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.authorizedPubkey} alignRight link /> <Address pubkey={params.authorizedPubkey} alignRight link />
</td> </td>
</tr> </tr>

14
explorer/src/components/instruction/stake/InitializeDetailsCard.tsx
View File

@ -34,28 +34,28 @@ export function InitializeDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.stakePubkey} alignRight link /> <Address pubkey={params.stakePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Authority Address</td> <td>Stake Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.authorized.staker} alignRight link /> <Address pubkey={params.authorized.staker} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Withdraw Authority Address</td> <td>Withdraw Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.authorized.withdrawer} alignRight link /> <Address pubkey={params.authorized.withdrawer} alignRight link />
</td> </td>
</tr> </tr>
@ -63,14 +63,14 @@ export function InitializeDetailsCard(props: {
{params.lockup.epoch > 0 && ( {params.lockup.epoch > 0 && (
<tr> <tr>
<td>Lockup Expiry Epoch</td> <td>Lockup Expiry Epoch</td>
<td className="text-right">{params.lockup.epoch}</td> <td className="text-lg-right">{params.lockup.epoch}</td>
</tr> </tr>
)} )}
{params.lockup.unixTimestamp > 0 && ( {params.lockup.unixTimestamp > 0 && (
<tr> <tr>
<td>Lockup Expiry Timestamp</td> <td>Lockup Expiry Timestamp</td>
<td className="text-right"> <td className="text-lg-right">
{new Date(params.lockup.unixTimestamp * 1000).toUTCString()} {new Date(params.lockup.unixTimestamp * 1000).toUTCString()}
</td> </td>
</tr> </tr>
@ -79,7 +79,7 @@ export function InitializeDetailsCard(props: {
{!params.lockup.custodian.equals(SystemProgram.programId) && ( {!params.lockup.custodian.equals(SystemProgram.programId) && (
<tr> <tr>
<td>Lockup Custodian Address</td> <td>Lockup Custodian Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.lockup.custodian} alignRight link /> <Address pubkey={params.lockup.custodian} alignRight link />
</td> </td>
</tr> </tr>

12
explorer/src/components/instruction/stake/SplitDetailsCard.tsx
View File

@ -29,35 +29,37 @@ export function SplitDetailsCard(props: {
<InstructionCard ix={ix} index={index} result={result} title="Split Stake"> <InstructionCard ix={ix} index={index} result={result} title="Split Stake">
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.stakePubkey} alignRight link /> <Address pubkey={params.stakePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.authorizedPubkey} alignRight link /> <Address pubkey={params.authorizedPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>New Stake Address</td> <td>New Stake Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.splitStakePubkey} alignRight link /> <Address pubkey={params.splitStakePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Split Amount (SOL)</td> <td>Split Amount (SOL)</td>
<td className="text-right">{lamportsToSolString(params.lamports)}</td> <td className="text-lg-right">
{lamportsToSolString(params.lamports)}
</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

12
explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx
View File

@ -34,35 +34,37 @@ export function WithdrawDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.stakePubkey} alignRight link /> <Address pubkey={params.stakePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.authorizedPubkey} alignRight link /> <Address pubkey={params.authorizedPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>To Address</td> <td>To Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.toPubkey} alignRight link /> <Address pubkey={params.toPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Withdraw Amount (SOL)</td> <td>Withdraw Amount (SOL)</td>
<td className="text-right">{lamportsToSolString(params.lamports)}</td> <td className="text-lg-right">
{lamportsToSolString(params.lamports)}
</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

6
explorer/src/components/instruction/system/AllocateDetailsCard.tsx
View File

@ -33,21 +33,21 @@ export function AllocateDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.accountPubkey} alignRight link /> <Address pubkey={params.accountPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Allocated Space (Bytes)</td> <td>Allocated Space (Bytes)</td>
<td className="text-right">{params.space}</td> <td className="text-lg-right">{params.space}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

12
explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx
View File

@ -34,28 +34,28 @@ export function AllocateWithSeedDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.accountPubkey} alignRight link /> <Address pubkey={params.accountPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Address</td> <td>Base Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.basePubkey} alignRight link /> <Address pubkey={params.basePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Seed</td> <td>Seed</td>
<td className="text-right"> <td className="text-lg-right">
<Copyable right text={params.seed}> <Copyable right text={params.seed}>
<code>{params.seed}</code> <code>{params.seed}</code>
</Copyable> </Copyable>
@ -64,12 +64,12 @@ export function AllocateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Allocated Space (Bytes)</td> <td>Allocated Space (Bytes)</td>
<td className="text-right">{params.space}</td> <td className="text-lg-right">{params.space}</td>
</tr> </tr>
<tr> <tr>
<td>Assigned Owner</td> <td>Assigned Owner</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.programId} alignRight link /> <Address pubkey={params.programId} alignRight link />
</td> </td>
</tr> </tr>

6
explorer/src/components/instruction/system/AssignDetailsCard.tsx
View File

@ -33,21 +33,21 @@ export function AssignDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.accountPubkey} alignRight link /> <Address pubkey={params.accountPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Assigned Owner</td> <td>Assigned Owner</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.programId} alignRight link /> <Address pubkey={params.programId} alignRight link />
</td> </td>
</tr> </tr>

10
explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx
View File

@ -34,28 +34,28 @@ export function AssignWithSeedDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.accountPubkey} alignRight link /> <Address pubkey={params.accountPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Address</td> <td>Base Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.basePubkey} alignRight link /> <Address pubkey={params.basePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Seed</td> <td>Seed</td>
<td className="text-right"> <td className="text-lg-right">
<Copyable right text={params.seed}> <Copyable right text={params.seed}>
<code>{params.seed}</code> <code>{params.seed}</code>
</Copyable> </Copyable>
@ -64,7 +64,7 @@ export function AssignWithSeedDetailsCard(props: {
<tr> <tr>
<td>Assigned Owner</td> <td>Assigned Owner</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.programId} alignRight link /> <Address pubkey={params.programId} alignRight link />
</td> </td>
</tr> </tr>

14
explorer/src/components/instruction/system/CreateDetailsCard.tsx
View File

@ -34,38 +34,40 @@ export function CreateDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>From Address</td> <td>From Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.fromPubkey} alignRight link /> <Address pubkey={params.fromPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>New Address</td> <td>New Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.newAccountPubkey} alignRight link /> <Address pubkey={params.newAccountPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Transfer Amount (SOL)</td> <td>Transfer Amount (SOL)</td>
<td className="text-right">{lamportsToSolString(params.lamports)}</td> <td className="text-lg-right">
{lamportsToSolString(params.lamports)}
</td>
</tr> </tr>
<tr> <tr>
<td>Allocated Space (Bytes)</td> <td>Allocated Space (Bytes)</td>
<td className="text-right">{params.space}</td> <td className="text-lg-right">{params.space}</td>
</tr> </tr>
<tr> <tr>
<td>Assigned Owner</td> <td>Assigned Owner</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.programId} alignRight link /> <Address pubkey={params.programId} alignRight link />
</td> </td>
</tr> </tr>

18
explorer/src/components/instruction/system/CreateWithSeedDetailsCard.tsx
View File

@ -35,35 +35,35 @@ export function CreateWithSeedDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>From Address</td> <td>From Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.fromPubkey} alignRight link /> <Address pubkey={params.fromPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>New Address</td> <td>New Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.newAccountPubkey} alignRight link /> <Address pubkey={params.newAccountPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Address</td> <td>Base Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.basePubkey} alignRight link /> <Address pubkey={params.basePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Seed</td> <td>Seed</td>
<td className="text-right"> <td className="text-lg-right">
<Copyable right text={params.seed}> <Copyable right text={params.seed}>
<code>{params.seed}</code> <code>{params.seed}</code>
</Copyable> </Copyable>
@ -72,17 +72,19 @@ export function CreateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Transfer Amount (SOL)</td> <td>Transfer Amount (SOL)</td>
<td className="text-right">{lamportsToSolString(params.lamports)}</td> <td className="text-lg-right">
{lamportsToSolString(params.lamports)}
</td>
</tr> </tr>
<tr> <tr>
<td>Allocated Space (Bytes)</td> <td>Allocated Space (Bytes)</td>
<td className="text-right">{params.space}</td> <td className="text-lg-right">{params.space}</td>
</tr> </tr>
<tr> <tr>
<td>Assigned Owner</td> <td>Assigned Owner</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.programId} alignRight link /> <Address pubkey={params.programId} alignRight link />
</td> </td>
</tr> </tr>

6
explorer/src/components/instruction/system/NonceAdvanceDetailsCard.tsx
View File

@ -33,21 +33,21 @@ export function NonceAdvanceDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Nonce Address</td> <td>Nonce Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.noncePubkey} alignRight link /> <Address pubkey={params.noncePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.authorizedPubkey} alignRight link /> <Address pubkey={params.authorizedPubkey} alignRight link />
</td> </td>
</tr> </tr>

8
explorer/src/components/instruction/system/NonceAuthorizeDetailsCard.tsx
View File

@ -33,28 +33,28 @@ export function NonceAuthorizeDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Nonce Address</td> <td>Nonce Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.noncePubkey} alignRight link /> <Address pubkey={params.noncePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Old Authority Address</td> <td>Old Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.authorizedPubkey} alignRight link /> <Address pubkey={params.authorizedPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>New Authority Address</td> <td>New Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.newAuthorizedPubkey} alignRight link /> <Address pubkey={params.newAuthorizedPubkey} alignRight link />
</td> </td>
</tr> </tr>

6
explorer/src/components/instruction/system/NonceInitializeDetailsCard.tsx
View File

@ -33,21 +33,21 @@ export function NonceInitializeDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Nonce Address</td> <td>Nonce Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.noncePubkey} alignRight link /> <Address pubkey={params.noncePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.authorizedPubkey} alignRight link /> <Address pubkey={params.authorizedPubkey} alignRight link />
</td> </td>
</tr> </tr>

12
explorer/src/components/instruction/system/NonceWithdrawDetailsCard.tsx
View File

@ -34,35 +34,37 @@ export function NonceWithdrawDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Nonce Address</td> <td>Nonce Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.noncePubkey} alignRight link /> <Address pubkey={params.noncePubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.authorizedPubkey} alignRight link /> <Address pubkey={params.authorizedPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>To Address</td> <td>To Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={params.toPubkey} alignRight link /> <Address pubkey={params.toPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Withdraw Amount (SOL)</td> <td>Withdraw Amount (SOL)</td>
<td className="text-right">{lamportsToSolString(params.lamports)}</td> <td className="text-lg-right">
{lamportsToSolString(params.lamports)}
</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

10
explorer/src/components/instruction/system/TransferDetailsCard.tsx
View File

@ -29,28 +29,30 @@ export function TransferDetailsCard(props: {
<InstructionCard ix={ix} index={index} result={result} title="Transfer"> <InstructionCard ix={ix} index={index} result={result} title="Transfer">
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>From Address</td> <td>From Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={transfer.fromPubkey} alignRight link /> <Address pubkey={transfer.fromPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>To Address</td> <td>To Address</td>
<td className="text-right"> <td className="text-lg-right">
<Address pubkey={transfer.toPubkey} alignRight link /> <Address pubkey={transfer.toPubkey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Transfer Amount (SOL)</td> <td>Transfer Amount (SOL)</td>
<td className="text-right">{lamportsToSolString(transfer.lamports)}</td> <td className="text-lg-right">
{lamportsToSolString(transfer.lamports)}
</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );