gaspersic/solana
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Linkify all explorer addresses (#11339)

Browse Source
This commit is contained in:
Justin Starry
2020-08-03 01:44:47 +08:00
committed by GitHub
parent d1b2e6cdf2
commit f401ef7996
26 changed files with 212 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,4 @@
import React from "react";
import { Link } from "react-router-dom";
import { PublicKey, StakeProgram, TokenAccountInfo } from "@solana/web3.js";
import {
FetchStatus,
@@ -9,8 +8,6 @@ import {
Account,
} from "providers/accounts";
import { lamportsToSolString } from "utils";
import Copyable from "./Copyable";
import { displayAddress } from "utils/tx";
import { StakeAccountCards } from "components/account/StakeAccountCards";
import ErrorCard from "components/common/ErrorCard";
import LoadingCard from "components/common/LoadingCard";
@@ -21,6 +18,8 @@ import {
useAccountOwnedTokens,
} from "providers/accounts/tokens";
import { useCluster, ClusterStatus } from "providers/cluster";
import Address from "./common/Address";
import Signature from "./common/Signature";
type Props = { address: string };
export default function AccountDetails({ address }: Props) {
@@ -92,9 +91,7 @@ function UnknownAccountCard({ account }: { account: Account }) {
<tr>
<td>Address</td>
<td className="text-right">
<Copyable text={account.pubkey.toBase58()} right bottom>
<code>{displayAddress(account.pubkey.toBase58())}</code>
</Copyable>
<Address pubkey={account.pubkey} alignRight />
</td>
</tr>
<tr>
@@ -115,9 +112,7 @@ function UnknownAccountCard({ account }: { account: Account }) {
<tr>
<td>Owner</td>
<td className="text-right">
<Copyable text={details.owner.toBase58()} right>
<code>{displayAddress(details.owner.toBase58())}</code>
</Copyable>
<Address pubkey={details.owner} alignRight link />
</td>
</tr>
)}
@@ -178,24 +173,9 @@ function TokensCard({ pubkey }: { pubkey: PublicKey }) {
detailsList.push(
<tr key={mintAddress}>
<td>
<Copyable text={mintAddress}>
<code>{mintAddress}</code>
</Copyable>
<Address pubkey={new PublicKey(mintAddress)} link />
</td>
<td>{balance}</td>
<td>
<Link
to={(location) => ({
...location,
pathname: "/account/" + mintAddress,
})}
className="btn btn-rounded-circle btn-white btn-sm"
>
<span className="fe fe-arrow-right"></span>
</Link>
</td>
</tr>
);
});
@@ -229,7 +209,6 @@ function TokensCard({ pubkey }: { pubkey: PublicKey }) {
<tr>
<th className="text-muted">Token Address</th>
<th className="text-muted">Balance</th>
<th className="text-muted">Details</th>
</tr>
</thead>
<tbody className="list">{detailsList}</tbody>
@@ -317,21 +296,7 @@ function HistoryCard({ pubkey }: { pubkey: PublicKey }) {
</td>
<td>
<Copyable text={signature}>
<code>{signature}</code>
</Copyable>
</td>
<td>
<Link
to={(location) => ({
...location,
pathname: "/tx/" + signature,
})}
className="btn btn-rounded-circle btn-white btn-sm"
>
<span className="fe fe-arrow-right"></span>
</Link>
<Signature signature={signature} link />
</td>
</tr>
);
@@ -369,7 +334,6 @@ function HistoryCard({ pubkey }: { pubkey: PublicKey }) {
<th className="text-muted w-1">Slot</th>
<th className="text-muted">Result</th>
<th className="text-muted">Transaction Signature</th>
<th className="text-muted">Details</th>
</tr>
</thead>
<tbody className="list">{detailsList}</tbody>

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

@@ -2,13 +2,13 @@ import React from "react";
import { Link } from "react-router-dom";
import { Location } from "history";
import { AccountBalancePair } from "@solana/web3.js";
import Copyable from "./Copyable";
import { useRichList, useFetchRichList, Status } from "providers/richList";
import LoadingCard from "./common/LoadingCard";
import ErrorCard from "./common/ErrorCard";
import { lamportsToSolString } from "utils";
import { useQuery } from "utils/url";
import { useSupply } from "providers/supply";
import Address from "./common/Address";
type Filter = "circulating" | "nonCirculating" | "all" | null;
@@ -91,8 +91,7 @@ export default function TopAccountsCard() {
<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-center">% of {header} Supply</th>
<th className="text-muted">Details</th>
<th className="text-muted text-right">% of {header} Supply</th>
</tr>
</thead>
<tbody className="list">
@@ -112,33 +111,19 @@ const renderAccountRow = (
index: number,
supply: number
) => {
const base58AccountPubkey = account.address.toBase58();
return (
<tr key={index}>
<td>
<span className="badge badge-soft-dark badge-pill">{index + 1}</span>
</td>
<td>
<Copyable text={base58AccountPubkey}>
<code>{base58AccountPubkey}</code>
</Copyable>
<Address pubkey={account.address} link />
</td>
<td className="text-right">{lamportsToSolString(account.lamports, 0)}</td>
<td className="text-center">{`${(
<td className="text-right">{`${(
(100 * account.lamports) /
supply
).toFixed(3)}%`}</td>
<td>
<Link
to={(location) => ({
...location,
pathname: "/account/" + base58AccountPubkey,
})}
className="btn btn-rounded-circle btn-white btn-sm"
>
<span className="fe fe-arrow-right"></span>
</Link>
</td>
</tr>
);
};

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

@@ -14,8 +14,6 @@ import {
SystemInstruction,
} from "@solana/web3.js";
import { lamportsToSolString } from "utils";
import { displayAddress } from "utils/tx";
import Copyable from "./Copyable";
import { UnknownDetailsCard } from "./instruction/UnknownDetailsCard";
import { SystemDetailsCard } from "./instruction/system/SystemDetailsCard";
import { StakeDetailsCard } from "./instruction/stake/StakeDetailsCard";
@@ -25,6 +23,8 @@ import TableCardBody from "./common/TableCardBody";
import { displayTimestamp } from "utils/date";
import InfoTooltip from "components/InfoTooltip";
import { isCached } from "providers/transactions/cached";
import Address from "./common/Address";
import Signature from "./common/Signature";
type Props = { signature: TransactionSignature };
export default function TransactionDetails({ signature }: Props) {
@@ -115,9 +115,7 @@ function StatusCard({ signature }: Props) {
<tr>
<td>Signature</td>
<td className="text-right">
<Copyable text={signature} right bottom>
<code>{signature}</code>
</Copyable>
<Signature signature={signature} />
</td>
</tr>
@@ -239,9 +237,7 @@ function AccountsCard({ signature }: Props) {
return (
<tr key={key}>
<td>
<Copyable text={key}>
<code>{displayAddress(pubkey.toBase58())}</code>
</Copyable>
<Address pubkey={pubkey} link />
</td>
<td>{renderChange()}</td>
<td>{lamportsToSolString(post)}</td>

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

@@ -2,10 +2,9 @@ import React from "react";
import { StakeAccount, Meta } from "solana-sdk-wasm";
import TableCardBody from "components/common/TableCardBody";
import { lamportsToSolString } from "utils";
import Copyable from "components/Copyable";
import { displayAddress } from "utils/tx";
import { displayTimestamp } from "utils/date";
import { Account, useFetchAccountInfo } from "providers/accounts";
import Address from "components/common/Address";
export function StakeAccountCards({
account,
@@ -65,9 +64,7 @@ function OverviewCard({
<tr>
<td>Address</td>
<td className="text-right">
<Copyable text={account.pubkey.toBase58()} bottom right>
<code>{account.pubkey.toBase58()}</code>
</Copyable>
<Address pubkey={account.pubkey} alignRight />
</td>
</tr>
<tr>
@@ -130,11 +127,11 @@ function DelegationCard({ stakeAccount }: { stakeAccount: StakeAccount }) {
<tr>
<td>Delegated Vote Address</td>
<td className="text-right">
<Copyable text={stake.delegation.voterPubkey.toBase58()} right>
<code>
{displayAddress(stake.delegation.voterPubkey.toBase58())}
</code>
</Copyable>
<Address
pubkey={stake.delegation.voterPubkey}
alignRight
link
/>
</td>
</tr>
@@ -175,18 +172,14 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
<tr>
<td>Stake Authority Address</td>
<td className="text-right">
<Copyable text={meta.authorized.staker.toBase58()} bottom right>
<code>{meta.authorized.staker.toBase58()}</code>
</Copyable>
<Address pubkey={meta.authorized.staker} alignRight link />
</td>
</tr>
<tr>
<td>Withdraw Authority Address</td>
<td className="text-right">
<Copyable text={meta.authorized.withdrawer.toBase58()} right>
<code>{meta.authorized.withdrawer.toBase58()}</code>
</Copyable>
<Address pubkey={meta.authorized.withdrawer} alignRight link />
</td>
</tr>
@@ -194,9 +187,7 @@ function AuthoritiesCard({ meta }: { meta: Meta }) {
<tr>
<td>Lockup Authority Address</td>
<td className="text-right">
<Copyable text={meta.lockup.custodian.toBase58()} right>
<code>{displayAddress(meta.lockup.custodian.toBase58())}</code>
</Copyable>
<Address pubkey={meta.lockup.custodian} alignRight link />
</td>
</tr>
)}

56
explorer/src/components/common/Address.tsx Normal file
View File

@@ -0,0 +1,56 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { PublicKey } from "@solana/web3.js";
import { clusterPath } from "utils/url";
import { displayAddress } from "utils/tx";
import { Pubkey } from "solana-sdk-wasm";
type CopyState = "copy" | "copied";
type Props = {
pubkey: PublicKey | Pubkey;
alignRight?: boolean;
link?: boolean;
};
export default function Address({ pubkey, alignRight, link }: Props) {
const [state, setState] = useState<CopyState>("copy");
const address = pubkey.toBase58();
const copyToClipboard = () => navigator.clipboard.writeText(address);
const handleClick = () =>
copyToClipboard().then(() => {
setState("copied");
setTimeout(() => setState("copy"), 1000);
});
const copyIcon =
state === "copy" ? (
<span className="fe fe-copy" onClick={handleClick}></span>
) : (
<span className="fe fe-check-circle"></span>
);
const copyButton = (
<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">
{link ? (
<Link className="" to={clusterPath(`/accounts/${address}`)}>
{displayAddress(address)}
<span className="fe fe-external-link ml-2"></span>
</Link>
) : (
displayAddress(address)
)}
</span>
</div>
);
}

45
explorer/src/components/common/Signature.tsx Normal file
View File

@@ -0,0 +1,45 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { TransactionSignature } from "@solana/web3.js";
import { clusterPath } from "utils/url";
type CopyState = "copy" | "copied";
type Props = { signature: TransactionSignature; link?: boolean };
export default function Signature({ signature, link }: Props) {
const [state, setState] = useState<CopyState>("copy");
const copyToClipboard = () => navigator.clipboard.writeText(signature);
const handleClick = () =>
copyToClipboard().then(() => {
setState("copied");
setTimeout(() => setState("copy"), 1000);
});
const copyIcon =
state === "copy" ? (
<span className="fe fe-copy" onClick={handleClick}></span>
) : (
<span className="fe fe-check-circle"></span>
);
const copyButton = (
<span className="c-pointer font-size-tiny mr-2">{copyIcon}</span>
);
return (
<div className="d-flex align-items-center justify-content-end">
{copyButton}
<span className="text-monospace">
{link ? (
<Link className="" to={clusterPath(`/tx/${signature}`)}>
{signature}
<span className="fe fe-external-link ml-2"></span>
</Link>
) : (
signature
)}
</span>
</div>
);
}

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

@@ -1,8 +1,8 @@
import React from "react";
import bs58 from "bs58";
import { TransactionInstruction } from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import Copyable from "components/Copyable";
import Address from "components/common/Address";
function displayData(data: string) {
if (data.length > 50) {
@@ -18,9 +18,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable text={ix.programId.toBase58()} bottom right>
<code>{displayAddress(ix.programId.toBase58())}</code>
</Copyable>
<Address pubkey={ix.programId} alignRight link />
</td>
</tr>
@@ -36,9 +34,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
)}
</td>
<td className="text-right">
<Copyable text={pubkey.toBase58()} right>
<code>{pubkey.toBase58()}</code>
</Copyable>
<Address pubkey={pubkey} alignRight link />
</td>
</tr>
))}

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

@@ -5,10 +5,9 @@ import {
StakeInstruction,
StakeProgram,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function AuthorizeDetailsCard(props: {
ix: TransactionInstruction;
@@ -25,10 +24,6 @@ export function AuthorizeDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const stakePubkey = params.stakePubkey.toBase58();
const authorizedPubkey = params.authorizedPubkey.toBase58();
const newAuthorizedPubkey = params.newAuthorizedPubkey.toBase58();
let authorizationType;
switch (params.stakeAuthorizationType.index) {
case 0:
@@ -52,36 +47,28 @@ export function AuthorizeDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={StakeProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Stake Address</td>
<td className="text-right">
<Copyable right text={stakePubkey}>
<code>{stakePubkey}</code>
</Copyable>
<Address pubkey={params.stakePubkey} alignRight link />
</td>
</tr>
<tr>
<td>Old Authority Address</td>
<td className="text-right">
<Copyable right text={authorizedPubkey}>
<code>{authorizedPubkey}</code>
</Copyable>
<Address pubkey={params.authorizedPubkey} alignRight link />
</td>
</tr>
<tr>
<td>New Authority Address</td>
<td className="text-right">
<Copyable right text={newAuthorizedPubkey}>
<code>{newAuthorizedPubkey}</code>
</Copyable>
<Address pubkey={params.newAuthorizedPubkey} alignRight link />
</td>
</tr>

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

@@ -5,10 +5,9 @@ import {
StakeInstruction,
StakeProgram,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function DeactivateDetailsCard(props: {
ix: TransactionInstruction;
@@ -25,9 +24,6 @@ export function DeactivateDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const stakePubkey = params.stakePubkey.toBase58();
const authorizedPubkey = params.authorizedPubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -38,27 +34,21 @@ export function DeactivateDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={StakeProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Stake Address</td>
<td className="text-right">
<Copyable right text={stakePubkey}>
<code>{stakePubkey}</code>
</Copyable>
<Address pubkey={params.stakePubkey} alignRight link />
</td>
</tr>
<tr>
<td>Authority Address</td>
<td className="text-right">
<Copyable right text={authorizedPubkey}>
<code>{authorizedPubkey}</code>
</Copyable>
<Address pubkey={params.authorizedPubkey} alignRight link />
</td>
</tr>
</InstructionCard>

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

@@ -5,10 +5,9 @@ import {
StakeInstruction,
StakeProgram,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function DelegateDetailsCard(props: {
ix: TransactionInstruction;
@@ -25,10 +24,6 @@ export function DelegateDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const stakePubkey = params.stakePubkey.toBase58();
const votePubkey = params.votePubkey.toBase58();
const authorizedPubkey = params.authorizedPubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -39,36 +34,28 @@ export function DelegateDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={StakeProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Stake Address</td>
<td className="text-right">
<Copyable right text={stakePubkey}>
<code>{stakePubkey}</code>
</Copyable>
<Address pubkey={params.stakePubkey} alignRight link />
</td>
</tr>
<tr>
<td>Delegated Vote Address</td>
<td className="text-right">
<Copyable right text={votePubkey}>
<code>{votePubkey}</code>
</Copyable>
<Address pubkey={params.votePubkey} alignRight link />
</td>
</tr>
<tr>
<td>Authority Address</td>
<td className="text-right">
<Copyable right text={authorizedPubkey}>
<code>{authorizedPubkey}</code>
</Copyable>
<Address pubkey={params.authorizedPubkey} alignRight link />
</td>
</tr>
</InstructionCard>

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

@@ -6,10 +6,9 @@ import {
StakeProgram,
SystemProgram,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function InitializeDetailsCard(props: {
ix: TransactionInstruction;
@@ -26,10 +25,6 @@ export function InitializeDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const stakerPubkey = params.authorized.staker.toBase58();
const withdrawerPubkey = params.authorized.withdrawer.toBase58();
const stakePubkey = params.stakePubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -40,36 +35,28 @@ export function InitializeDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={StakeProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Stake Address</td>
<td className="text-right">
<Copyable right text={stakePubkey}>
<code>{stakePubkey}</code>
</Copyable>
<Address pubkey={params.stakePubkey} alignRight link />
</td>
</tr>
<tr>
<td>Stake Authority Address</td>
<td className="text-right">
<Copyable right text={stakerPubkey}>
<code>{stakerPubkey}</code>
</Copyable>
<Address pubkey={params.authorized.staker} alignRight link />
</td>
</tr>
<tr>
<td>Withdraw Authority Address</td>
<td className="text-right">
<Copyable right text={withdrawerPubkey}>
<code>{withdrawerPubkey}</code>
</Copyable>
<Address pubkey={params.authorized.withdrawer} alignRight link />
</td>
</tr>
@@ -93,9 +80,7 @@ export function InitializeDetailsCard(props: {
<tr>
<td>Lockup Custodian Address</td>
<td className="text-right">
<Copyable right text={params.lockup.custodian.toBase58()}>
<code>{displayAddress(params.lockup.custodian.toBase58())}</code>
</Copyable>
<Address pubkey={params.lockup.custodian} alignRight link />
</td>
</tr>
)}

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

@@ -5,11 +5,10 @@ import {
StakeInstruction,
StakeProgram,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { lamportsToSolString } from "utils";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function SplitDetailsCard(props: {
ix: TransactionInstruction;
@@ -26,45 +25,33 @@ export function SplitDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const stakePubkey = params.stakePubkey.toBase58();
const authorizedPubkey = params.authorizedPubkey.toBase58();
const splitStakePubkey = params.splitStakePubkey.toBase58();
return (
<InstructionCard ix={ix} index={index} result={result} title="Split Stake">
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={StakeProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Stake Address</td>
<td className="text-right">
<Copyable right text={stakePubkey}>
<code>{stakePubkey}</code>
</Copyable>
<Address pubkey={params.stakePubkey} alignRight link />
</td>
</tr>
<tr>
<td>Authority Address</td>
<td className="text-right">
<Copyable right text={authorizedPubkey}>
<code>{authorizedPubkey}</code>
</Copyable>
<Address pubkey={params.authorizedPubkey} alignRight link />
</td>
</tr>
<tr>
<td>New Stake Address</td>
<td className="text-right">
<Copyable right text={splitStakePubkey}>
<code>{splitStakePubkey}</code>
</Copyable>
<Address pubkey={params.splitStakePubkey} alignRight link />
</td>
</tr>

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

@@ -6,10 +6,9 @@ import {
StakeProgram,
} from "@solana/web3.js";
import { lamportsToSolString } from "utils";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function WithdrawDetailsCard(props: {
ix: TransactionInstruction;
@@ -26,10 +25,6 @@ export function WithdrawDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const stakePubkey = params.stakePubkey.toBase58();
const toPubkey = params.toPubkey.toBase58();
const authorizedPubkey = params.authorizedPubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -40,36 +35,28 @@ export function WithdrawDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={StakeProgram.programId.toBase58()}>
<code>{displayAddress(StakeProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={StakeProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Stake Address</td>
<td className="text-right">
<Copyable right text={stakePubkey}>
<code>{stakePubkey}</code>
</Copyable>
<Address pubkey={params.stakePubkey} alignRight link />
</td>
</tr>
<tr>
<td>Authority Address</td>
<td className="text-right">
<Copyable right text={authorizedPubkey}>
<code>{authorizedPubkey}</code>
</Copyable>
<Address pubkey={params.authorizedPubkey} alignRight link />
</td>
</tr>
<tr>
<td>To Address</td>
<td className="text-right">
<Copyable right text={toPubkey}>
<code>{toPubkey}</code>
</Copyable>
<Address pubkey={params.toPubkey} alignRight link />
</td>
</tr>

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

@@ -5,10 +5,9 @@ import {
SignatureResult,
SystemInstruction,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function AllocateDetailsCard(props: {
ix: TransactionInstruction;
@@ -25,8 +24,6 @@ export function AllocateDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const accountKey = params.accountPubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -37,18 +34,14 @@ export function AllocateDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Account Address</td>
<td className="text-right">
<Copyable right text={accountKey}>
<code>{accountKey}</code>
</Copyable>
<Address pubkey={params.accountPubkey} alignRight link />
</td>
</tr>

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

@@ -5,10 +5,10 @@ import {
SignatureResult,
SystemInstruction,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function AllocateWithSeedDetailsCard(props: {
ix: TransactionInstruction;
@@ -25,9 +25,6 @@ export function AllocateWithSeedDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const accountKey = params.accountPubkey.toBase58();
const baseKey = params.basePubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -38,27 +35,21 @@ export function AllocateWithSeedDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Account Address</td>
<td className="text-right">
<Copyable right text={accountKey}>
<code>{accountKey}</code>
</Copyable>
<Address pubkey={params.accountPubkey} alignRight link />
</td>
</tr>
<tr>
<td>Base Address</td>
<td className="text-right">
<Copyable right text={baseKey}>
<code>{baseKey}</code>
</Copyable>
<Address pubkey={params.basePubkey} alignRight link />
</td>
</tr>
@@ -79,9 +70,7 @@ export function AllocateWithSeedDetailsCard(props: {
<tr>
<td>Assigned Owner</td>
<td className="text-right">
<Copyable right text={params.programId.toBase58()}>
<code>{displayAddress(params.programId.toBase58())}</code>
</Copyable>
<Address pubkey={params.programId} alignRight link />
</td>
</tr>
</InstructionCard>

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

@@ -5,10 +5,9 @@ import {
SignatureResult,
SystemInstruction,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function AssignDetailsCard(props: {
ix: TransactionInstruction;
@@ -25,8 +24,6 @@ export function AssignDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const accountKey = params.accountPubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -37,27 +34,21 @@ export function AssignDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Account Address</td>
<td className="text-right">
<Copyable right text={accountKey}>
<code>{accountKey}</code>
</Copyable>
<Address pubkey={params.accountPubkey} alignRight link />
</td>
</tr>
<tr>
<td>Assigned Owner</td>
<td className="text-right">
<Copyable right text={params.programId.toBase58()}>
<code>{displayAddress(params.programId.toBase58())}</code>
</Copyable>
<Address pubkey={params.programId} alignRight link />
</td>
</tr>
</InstructionCard>

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

@@ -5,10 +5,10 @@ import {
SignatureResult,
SystemInstruction,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function AssignWithSeedDetailsCard(props: {
ix: TransactionInstruction;
@@ -25,9 +25,6 @@ export function AssignWithSeedDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const accountKey = params.accountPubkey.toBase58();
const baseKey = params.basePubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -38,27 +35,21 @@ export function AssignWithSeedDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Account Address</td>
<td className="text-right">
<Copyable right text={accountKey}>
<code>{accountKey}</code>
</Copyable>
<Address pubkey={params.accountPubkey} alignRight link />
</td>
</tr>
<tr>
<td>Base Address</td>
<td className="text-right">
<Copyable right text={baseKey}>
<code>{baseKey}</code>
</Copyable>
<Address pubkey={params.basePubkey} alignRight link />
</td>
</tr>
@@ -74,9 +65,7 @@ export function AssignWithSeedDetailsCard(props: {
<tr>
<td>Assigned Owner</td>
<td className="text-right">
<Copyable right text={params.programId.toBase58()}>
<code>{displayAddress(params.programId.toBase58())}</code>
</Copyable>
<Address pubkey={params.programId} alignRight link />
</td>
</tr>
</InstructionCard>

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

@@ -6,10 +6,9 @@ import {
SystemInstruction,
} from "@solana/web3.js";
import { lamportsToSolString } from "utils";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function CreateDetailsCard(props: {
ix: TransactionInstruction;
@@ -26,9 +25,6 @@ export function CreateDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const from = params.fromPubkey.toBase58();
const newKey = params.newAccountPubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -39,27 +35,21 @@ export function CreateDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>From Address</td>
<td className="text-right">
<Copyable right text={from}>
<code>{from}</code>
</Copyable>
<Address pubkey={params.fromPubkey} alignRight link />
</td>
</tr>
<tr>
<td>New Address</td>
<td className="text-right">
<Copyable right text={newKey}>
<code>{newKey}</code>
</Copyable>
<Address pubkey={params.newAccountPubkey} alignRight link />
</td>
</tr>
@@ -76,9 +66,7 @@ export function CreateDetailsCard(props: {
<tr>
<td>Assigned Owner</td>
<td className="text-right">
<Copyable right text={params.programId.toBase58()}>
<code>{displayAddress(params.programId.toBase58())}</code>
</Copyable>
<Address pubkey={params.programId} alignRight link />
</td>
</tr>
</InstructionCard>

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

@@ -6,10 +6,10 @@ import {
SystemInstruction,
} from "@solana/web3.js";
import { lamportsToSolString } from "utils";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function CreateWithSeedDetailsCard(props: {
ix: TransactionInstruction;
@@ -26,10 +26,6 @@ export function CreateWithSeedDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const from = params.fromPubkey.toBase58();
const newKey = params.newAccountPubkey.toBase58();
const baseKey = params.basePubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -40,36 +36,28 @@ export function CreateWithSeedDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>From Address</td>
<td className="text-right">
<Copyable right text={from}>
<code>{from}</code>
</Copyable>
<Address pubkey={params.fromPubkey} alignRight link />
</td>
</tr>
<tr>
<td>New Address</td>
<td className="text-right">
<Copyable right text={newKey}>
<code>{newKey}</code>
</Copyable>
<Address pubkey={params.newAccountPubkey} alignRight link />
</td>
</tr>
<tr>
<td>Base Address</td>
<td className="text-right">
<Copyable right text={baseKey}>
<code>{baseKey}</code>
</Copyable>
<Address pubkey={params.basePubkey} alignRight link />
</td>
</tr>
@@ -95,9 +83,7 @@ export function CreateWithSeedDetailsCard(props: {
<tr>
<td>Assigned Owner</td>
<td className="text-right">
<Copyable right text={params.programId.toBase58()}>
<code>{displayAddress(params.programId.toBase58())}</code>
</Copyable>
<Address pubkey={params.programId} alignRight link />
</td>
</tr>
</InstructionCard>

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

@@ -5,10 +5,9 @@ import {
SignatureResult,
SystemInstruction,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function NonceAdvanceDetailsCard(props: {
ix: TransactionInstruction;
@@ -25,9 +24,6 @@ export function NonceAdvanceDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const nonceKey = params.noncePubkey.toBase58();
const authorizedKey = params.authorizedPubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -38,27 +34,21 @@ export function NonceAdvanceDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Nonce Address</td>
<td className="text-right">
<Copyable right text={nonceKey}>
<code>{nonceKey}</code>
</Copyable>
<Address pubkey={params.noncePubkey} alignRight link />
</td>
</tr>
<tr>
<td>Authority Address</td>
<td className="text-right">
<Copyable right text={authorizedKey}>
<code>{authorizedKey}</code>
</Copyable>
<Address pubkey={params.authorizedPubkey} alignRight link />
</td>
</tr>
</InstructionCard>

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

@@ -5,10 +5,9 @@ import {
SignatureResult,
SystemInstruction,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function NonceAuthorizeDetailsCard(props: {
ix: TransactionInstruction;
@@ -25,10 +24,6 @@ export function NonceAuthorizeDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const nonceKey = params.noncePubkey.toBase58();
const authorizedKey = params.authorizedPubkey.toBase58();
const newAuthorizedKey = params.newAuthorizedPubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -39,36 +34,28 @@ export function NonceAuthorizeDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Nonce Address</td>
<td className="text-right">
<Copyable right text={nonceKey}>
<code>{nonceKey}</code>
</Copyable>
<Address pubkey={params.noncePubkey} alignRight link />
</td>
</tr>
<tr>
<td>Old Authority Address</td>
<td className="text-right">
<Copyable right text={authorizedKey}>
<code>{authorizedKey}</code>
</Copyable>
<Address pubkey={params.authorizedPubkey} alignRight link />
</td>
</tr>
<tr>
<td>New Authority Address</td>
<td className="text-right">
<Copyable right text={newAuthorizedKey}>
<code>{newAuthorizedKey}</code>
</Copyable>
<Address pubkey={params.newAuthorizedPubkey} alignRight link />
</td>
</tr>
</InstructionCard>

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

@@ -5,10 +5,9 @@ import {
SignatureResult,
SystemInstruction,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function NonceInitializeDetailsCard(props: {
ix: TransactionInstruction;
@@ -25,9 +24,6 @@ export function NonceInitializeDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const nonceKey = params.noncePubkey.toBase58();
const authorizedKey = params.authorizedPubkey.toBase58();
return (
<InstructionCard
ix={ix}
@@ -38,27 +34,21 @@ export function NonceInitializeDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Nonce Address</td>
<td className="text-right">
<Copyable right text={nonceKey}>
<code>{nonceKey}</code>
</Copyable>
<Address pubkey={params.noncePubkey} alignRight link />
</td>
</tr>
<tr>
<td>Authority Address</td>
<td className="text-right">
<Copyable right text={authorizedKey}>
<code>{authorizedKey}</code>
</Copyable>
<Address pubkey={params.authorizedPubkey} alignRight link />
</td>
</tr>
</InstructionCard>

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

@@ -5,11 +5,10 @@ import {
SignatureResult,
SystemInstruction,
} from "@solana/web3.js";
import { displayAddress } from "utils/tx";
import { lamportsToSolString } from "utils";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function NonceWithdrawDetailsCard(props: {
ix: TransactionInstruction;
@@ -26,11 +25,6 @@ export function NonceWithdrawDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const nonceKey = params.noncePubkey.toBase58();
const toKey = params.toPubkey.toBase58();
const authorizedKey = params.authorizedPubkey.toBase58();
const lamports = params.lamports;
return (
<InstructionCard
ix={ix}
@@ -41,42 +35,34 @@ export function NonceWithdrawDetailsCard(props: {
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Nonce Address</td>
<td className="text-right">
<Copyable right text={nonceKey}>
<code>{nonceKey}</code>
</Copyable>
<Address pubkey={params.noncePubkey} alignRight link />
</td>
</tr>
<tr>
<td>Authority Address</td>
<td className="text-right">
<Copyable right text={authorizedKey}>
<code>{authorizedKey}</code>
</Copyable>
<Address pubkey={params.authorizedPubkey} alignRight link />
</td>
</tr>
<tr>
<td>To Address</td>
<td className="text-right">
<Copyable right text={toKey}>
<code>{toKey}</code>
</Copyable>
<Address pubkey={params.toPubkey} alignRight link />
</td>
</tr>
<tr>
<td>Withdraw Amount (SOL)</td>
<td className="text-right">{lamportsToSolString(lamports)}</td>
<td className="text-right">{lamportsToSolString(params.lamports)}</td>
</tr>
</InstructionCard>
);

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

@@ -6,10 +6,9 @@ import {
SystemInstruction,
} from "@solana/web3.js";
import { lamportsToSolString } from "utils";
import { displayAddress } from "utils/tx";
import { InstructionCard } from "../InstructionCard";
import Copyable from "components/Copyable";
import { UnknownDetailsCard } from "../UnknownDetailsCard";
import Address from "components/common/Address";
export function TransferDetailsCard(props: {
ix: TransactionInstruction;
@@ -26,34 +25,26 @@ export function TransferDetailsCard(props: {
return <UnknownDetailsCard {...props} />;
}
const from = transfer.fromPubkey.toBase58();
const to = transfer.toPubkey.toBase58();
return (
<InstructionCard ix={ix} index={index} result={result} title="Transfer">
<tr>
<td>Program</td>
<td className="text-right">
<Copyable bottom right text={SystemProgram.programId.toBase58()}>
<code>{displayAddress(SystemProgram.programId.toBase58())}</code>
</Copyable>
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>From Address</td>
<td className="text-right">
<Copyable right text={from}>
<code>{from}</code>
</Copyable>
<Address pubkey={transfer.fromPubkey} alignRight link />
</td>
</tr>
<tr>
<td>To Address</td>
<td className="text-right">
<Copyable right text={to}>
<code>{to}</code>
</Copyable>
<Address pubkey={transfer.toPubkey} alignRight link />
</td>
</tr>

4
explorer/src/scss/_solana-variables.scss
View File

@@ -20,7 +20,7 @@ $gray-300: #e5ebe9;
$gray-400: #c6e6de;
$gray-500: #abd5c6;
$gray-600: #86b8b6;
$gray-700: #409088;
$gray-700: #698582;
$gray-800: #387462;
$gray-900: #1b4e3f;
$black: #232323;
@@ -31,8 +31,8 @@ $rainbow-3: #79abd2;
$rainbow-4: #38d0bd;
$rainbow-5: #1dd79b;
$primary: #358c70;
$success: #42ba96;
$primary: $success;
$primary-desat: #42ba96;
$secondary: $gray-700;
$info: #b45be1;

1
explorer/src/utils/tx.ts
View File

@@ -18,6 +18,7 @@ const PROGRAM_IDS = {
[SystemProgram.programId.toBase58()]: "System",
Vest111111111111111111111111111111111111111: "Vest",
[VOTE_PROGRAM_ID.toBase58()]: "Vote",
TokenSVp5gheXUvJ6jGWGeCsgPKgnE3YgdGKRVCMY9o: "Token",
};
const LOADER_IDS = {