Overview
+
+
+ Inspect
+
{autoRefresh === AutoRefresh.Active ? (
) : (
@@ -288,7 +297,9 @@ function StatusCard({
{fee && (
| Fee (SOL) |
- {lamportsToSolString(fee)} |
+
+
+ |
)}
@@ -357,7 +368,9 @@ function AccountsCard({
|
-
{lamportsToSolString(post)} |
+
+
+ |
{index === 0 && (
Fee Payer
diff --git a/explorer/src/pages/inspector/AccountsCard.tsx b/explorer/src/pages/inspector/AccountsCard.tsx
new file mode 100644
index 000000000..b8ddbea52
--- /dev/null
+++ b/explorer/src/pages/inspector/AccountsCard.tsx
@@ -0,0 +1,121 @@
+import React from "react";
+import { Message, PublicKey } from "@solana/web3.js";
+import { TableCardBody } from "components/common/TableCardBody";
+import { AddressWithContext } from "./AddressWithContext";
+import { ErrorCard } from "components/common/ErrorCard";
+
+export function AccountsCard({ message }: { message: Message }) {
+ const [expanded, setExpanded] = React.useState(true);
+
+ const { validMessage, error } = React.useMemo(() => {
+ const {
+ numRequiredSignatures,
+ numReadonlySignedAccounts,
+ numReadonlyUnsignedAccounts,
+ } = message.header;
+
+ if (numReadonlySignedAccounts >= numRequiredSignatures) {
+ return { validMessage: undefined, error: "Invalid header" };
+ } else if (numReadonlyUnsignedAccounts >= message.accountKeys.length) {
+ return { validMessage: undefined, error: "Invalid header" };
+ } else if (message.accountKeys.length === 0) {
+ return { validMessage: undefined, error: "Message has no accounts" };
+ }
+
+ return {
+ validMessage: message,
+ error: undefined,
+ };
+ }, [message]);
+
+ const accountRows = React.useMemo(() => {
+ const message = validMessage;
+ if (!message) return;
+ return message.accountKeys.map((publicKey, accountIndex) => {
+ const {
+ numRequiredSignatures,
+ numReadonlySignedAccounts,
+ numReadonlyUnsignedAccounts,
+ } = message.header;
+
+ let readOnly = false;
+ let signer = false;
+ if (accountIndex < numRequiredSignatures) {
+ signer = true;
+ if (accountIndex >= numRequiredSignatures - numReadonlySignedAccounts) {
+ readOnly = true;
+ }
+ } else if (
+ accountIndex >=
+ message.accountKeys.length - numReadonlyUnsignedAccounts
+ ) {
+ readOnly = true;
+ }
+
+ const props = {
+ accountIndex,
+ publicKey,
+ signer,
+ readOnly,
+ };
+
+ return ;
+ });
+ }, [validMessage]);
+
+ if (error) {
+ return ;
+ }
+
+ return (
+
+
+
+ {`Account List (${message.accountKeys.length})`}
+
+
+
+ {expanded && {accountRows}}
+ |
+ |
+
+ Account #{accountIndex + 1}
+
+ {signer && (
+ Signer
+ )}
+ {!readOnly && (
+ Writable
+ )}
+
+
+ |
+
+
+ |
+
+ );
+}
diff --git a/explorer/src/pages/inspector/AddressWithContext.tsx b/explorer/src/pages/inspector/AddressWithContext.tsx
new file mode 100644
index 000000000..39b869994
--- /dev/null
+++ b/explorer/src/pages/inspector/AddressWithContext.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import { PublicKey, SystemProgram } from "@solana/web3.js";
+import { Address } from "components/common/Address";
+import {
+ Account,
+ useAccountInfo,
+ useFetchAccountInfo,
+} from "providers/accounts";
+import { ClusterStatus, useCluster } from "providers/cluster";
+import { addressLabel } from "utils/tx";
+import { lamportsToSolString } from "utils";
+
+type AccountValidator = (account: Account) => string | undefined;
+
+export const createFeePayerValidator = (
+ feeLamports: number
+): AccountValidator => {
+ return (account: Account): string | undefined => {
+ if (account.details === undefined) return "Account doesn't exist";
+ if (!account.details.owner.equals(SystemProgram.programId))
+ return "Only system-owned accounts can pay fees";
+ // TODO: Actually nonce accounts can pay fees too
+ if (account.details.space > 0)
+ return "Only unallocated accounts can pay fees";
+ if (account.lamports < feeLamports) {
+ return "Insufficient funds for fees";
+ }
+ return;
+ };
+};
+
+export const programValidator = (account: Account): string | undefined => {
+ if (account.details === undefined) return "Account doesn't exist";
+ if (!account.details.executable)
+ return "Only executable accounts can be invoked";
+ return;
+};
+
+export function AddressWithContext({
+ pubkey,
+ validator,
+}: {
+ pubkey: PublicKey;
+ validator?: AccountValidator;
+}) {
+ return (
+
+ );
+}
+
+function AccountInfo({
+ pubkey,
+ validator,
+}: {
+ pubkey: PublicKey;
+ validator?: AccountValidator;
+}) {
+ const address = pubkey.toBase58();
+ const fetchAccount = useFetchAccountInfo();
+ const info = useAccountInfo(address);
+ const { cluster, status } = useCluster();
+
+ // Fetch account on load
+ React.useEffect(() => {
+ if (!info && status === ClusterStatus.Connected && pubkey) {
+ fetchAccount(pubkey);
+ }
+ }, [address, status]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ if (!info?.data)
+ return (
+
+
+ Loading
+
+ );
+
+ const errorMessage = validator && validator(info.data);
+ if (errorMessage) return
{errorMessage};
+
+ if (info.data.details?.executable) {
+ return
Executable Program;
+ }
+
+ const owner = info.data.details?.owner;
+ const ownerAddress = owner?.toBase58();
+ const ownerLabel = ownerAddress && addressLabel(ownerAddress, cluster);
+
+ return (
+
+ {ownerAddress
+ ? `Owned by ${
+ ownerLabel || ownerAddress
+ }. Balance is ${lamportsToSolString(info.data.lamports)} SOL`
+ : "Account doesn't exist"}
+
+ );
+}
diff --git a/explorer/src/pages/inspector/InspectorPage.tsx b/explorer/src/pages/inspector/InspectorPage.tsx
new file mode 100644
index 000000000..25720365f
--- /dev/null
+++ b/explorer/src/pages/inspector/InspectorPage.tsx
@@ -0,0 +1,275 @@
+import React from "react";
+import { Message, PACKET_DATA_SIZE } from "@solana/web3.js";
+
+import { TableCardBody } from "components/common/TableCardBody";
+import { SolBalance } from "utils";
+import { useQuery } from "utils/url";
+import { useHistory, useLocation } from "react-router";
+import {
+ useFetchRawTransaction,
+ useRawTransactionDetails,
+} from "providers/transactions/raw";
+import { FetchStatus } from "providers/cache";
+import { LoadingCard } from "components/common/LoadingCard";
+import { ErrorCard } from "components/common/ErrorCard";
+import { TransactionSignatures } from "./SignaturesCard";
+import { AccountsCard } from "./AccountsCard";
+import {
+ AddressWithContext,
+ createFeePayerValidator,
+} from "./AddressWithContext";
+import { SimulatorCard } from "./SimulatorCard";
+import { RawInput } from "./RawInputCard";
+import { InstructionsSection } from "./InstructionsSection";
+
+export type TransactionData = {
+ rawMessage: Uint8Array;
+ message: Message;
+ signatures?: (string | null)[];
+};
+
+export function TransactionInspectorPage({
+ signature,
+}: {
+ signature?: string;
+}) {
+ const [transaction, setTransaction] = React.useState
();
+ const query = useQuery();
+ const history = useHistory();
+ const location = useLocation();
+ const [paramString, setParamString] = React.useState();
+
+ // Sync message with url search params
+ React.useEffect(() => {
+ if (signature) return;
+ if (transaction) {
+ const base64 = btoa(
+ String.fromCharCode.apply(null, [...transaction.rawMessage])
+ );
+ const newParam = encodeURIComponent(base64);
+ if (query.get("message") === newParam) return;
+ query.set("message", newParam);
+ history.push({ ...location, search: query.toString() });
+ }
+ }, [query, transaction, signature, history, location]);
+
+ const reset = React.useCallback(() => {
+ query.delete("message");
+ history.push({ ...location, search: query.toString() });
+ setTransaction(undefined);
+ }, [query, location, history]);
+
+ // Decode the message url param whenever it changes
+ React.useEffect(() => {
+ if (transaction || signature) return;
+
+ let messageParam = query.get("message");
+ if (messageParam !== null) {
+ let messageString;
+ try {
+ messageString = decodeURIComponent(messageParam);
+ } catch (err) {
+ query.delete("message");
+ history.push({ ...location, search: query.toString() });
+ return;
+ }
+
+ try {
+ const buffer = Uint8Array.from(atob(messageString), (c) =>
+ c.charCodeAt(0)
+ );
+
+ if (buffer.length < 36) {
+ query.delete("message");
+ history.push({ ...location, search: query.toString() });
+ throw new Error("buffer is too short");
+ }
+
+ const message = Message.from(buffer);
+ setParamString(undefined);
+ setTransaction({
+ message,
+ rawMessage: buffer,
+ });
+ } catch (err) {
+ setParamString(messageString);
+ }
+ } else {
+ setParamString(undefined);
+ }
+ }, [query, transaction, signature, history, location]);
+
+ return (
+
+
+
+
Transaction Inspector
+
+
+ {signature ? (
+
+ ) : transaction ? (
+
+ ) : (
+
+ )}
+
+
+
Transaction Overview
+
+
+
+
+ | Serialized Size |
+
+
+ {size} bytes
+
+ Max transaction size is {PACKET_DATA_SIZE} bytes
+
+
+ |
+
+
+ | Fees |
+
+
+
+
+ {`Each signature costs ${DEFAULT_FEES.lamportsPerSignature} lamports`}
+
+
+ |
+
+
+ |
+
+ Fee payer
+
+ Signer
+ Writable
+
+
+ |
+
+ {message.accountKeys.length === 0 ? (
+ "No Fee Payer"
+ ) : (
+
+ )}
+ |
+
+
+
+
+
+ #{index + 1}
+ {programName} Instruction
+
+
+
+
+ {expanded && (
+
+
+ | Program |
+
+
+ |
+
+ {ix.accounts.map((accountIndex, index) => {
+ return (
+
+ |
+
+ Account #{index + 1}
+
+ {accountIndex < message.header.numRequiredSignatures && (
+
+ Signer
+
+ )}
+ {message.isAccountWritable(accountIndex) && (
+
+ Writable
+
+ )}
+
+
+ |
+
+
+ |
+
+ );
+ })}
+
+ |
+ Instruction Data (Hex)
+ |
+
+
+ {data}
+
+ |
+
+
+ )}
+
+
+
Encoded Transaction Message
+
+
+
+
+
+ {error && (
+ <>
+
+
+
+
+ {error}
+
+ )}
+
+
+
+
+
Instructions
+
+ -
+ CLI: Use
--dump-transaction-message{" "}
+ flag
+
+ -
+ Rust: Add
base64 crate dependency and{" "}
+
+ println!("{}", base64::encode(&transaction.message_data()));
+
+
+ -
+ JavaScript: Add{" "}
+
console.log(tx.serializeMessage().toString("base64"));
+
+
+
+
+
+
Signatures
+
+
+
+
+
+ | # |
+ Signature |
+ Signer |
+ Validity |
+ Details |
+
+
+ {signatureRows}
+
+
+
+ |
+ {index + 1}
+ |
+
+ {signature ? (
+
+ ) : (
+ "Missing Signature"
+ )}
+ |
+
+
+ |
+
+ {verified === undefined ? (
+ "N/A"
+ ) : verified ? (
+ Valid
+ ) : (
+ Invalid
+ )}
+ |
+
+ {index === 0 && (
+ Fee Payer
+ )}
+ |
+
+ );
+}
diff --git a/explorer/src/pages/inspector/SimulatorCard.tsx b/explorer/src/pages/inspector/SimulatorCard.tsx
new file mode 100644
index 000000000..aba5e99dc
--- /dev/null
+++ b/explorer/src/pages/inspector/SimulatorCard.tsx
@@ -0,0 +1,249 @@
+import React from "react";
+import bs58 from "bs58";
+import { Connection, Message, Transaction } from "@solana/web3.js";
+import { useCluster } from "providers/cluster";
+import { TableCardBody } from "components/common/TableCardBody";
+import { programLabel } from "utils/tx";
+
+type LogMessage = {
+ text: string;
+ prefix: string;
+ style: "muted" | "info" | "success" | "warning";
+};
+
+type InstructionLogs = {
+ logs: LogMessage[];
+ failed: boolean;
+};
+
+const DEFAULT_SIGNATURE = bs58.encode(Buffer.alloc(64).fill(0));
+
+export function SimulatorCard({ message }: { message: Message }) {
+ const { cluster } = useCluster();
+ const { simulate, simulating, simulationLogs: logs } = useSimulator(message);
+ if (simulating) {
+ return (
+
+
+
Transaction Simulation
+
+
+
+ Simulating
+
+
+
+
Transaction Simulation
+
+
+
+
+ -
+ Simulation is free and will run this transaction against the
+ latest confirmed ledger state.
+
+ -
+ No state changes will be persisted and all signature checks will
+ be disabled.
+
+
+
+
+
+
Transaction Simulation
+
+
+
+ {message.instructions.map((ix, index) => {
+ const programId = message.accountKeys[ix.programIdIndex];
+ const programName =
+ programLabel(programId.toBase58(), cluster) || "Unknown";
+ const programLogs: InstructionLogs | undefined = logs[index];
+
+ let badgeColor = "white";
+ if (programLogs) {
+ badgeColor = programLogs.failed ? "warning" : "success";
+ }
+
+ return (
+
+ |
+
+
+ #{index + 1}
+
+ {programName} Instruction
+
+ {programLogs && (
+
+ {programLogs.logs.map((log, key) => {
+ return (
+
+ {log.prefix}
+
+ {log.text}
+
+
+ );
+ })}
+
+ )}
+ |
+
+ );
+ })}
+
+
;
@@ -121,53 +119,3 @@ export function useTransactionDetailsCache(): TransactionDetailsCache {
return context.entries;
}
-
-async function fetchRawTransaction(
- dispatch: Dispatch,
- signature: TransactionSignature,
- cluster: Cluster,
- url: string
-) {
- let fetchStatus;
- try {
- const response = await new Connection(url).getTransaction(signature);
- fetchStatus = FetchStatus.Fetched;
-
- let data: Details = { raw: null };
- if (response !== null) {
- const { message, signatures } = response.transaction;
- data = {
- raw: Transaction.populate(message, signatures),
- };
- }
-
- dispatch({
- type: ActionType.Update,
- status: fetchStatus,
- key: signature,
- data,
- url,
- });
- } catch (error) {
- if (cluster !== Cluster.Custom) {
- reportError(error, { url });
- }
- }
-}
-
-export function useFetchRawTransaction() {
- const dispatch = React.useContext(DispatchContext);
- if (!dispatch) {
- throw new Error(
- `useFetchRawTransaaction must be used within a TransactionsProvider`
- );
- }
-
- const { cluster, url } = useCluster();
- return React.useCallback(
- (signature: TransactionSignature) => {
- url && fetchRawTransaction(dispatch, signature, cluster, url);
- },
- [dispatch, cluster, url]
- );
-}
diff --git a/explorer/src/providers/transactions/raw.tsx b/explorer/src/providers/transactions/raw.tsx
new file mode 100644
index 000000000..3e928b20e
--- /dev/null
+++ b/explorer/src/providers/transactions/raw.tsx
@@ -0,0 +1,113 @@
+import React from "react";
+import {
+ Connection,
+ TransactionSignature,
+ Transaction,
+ Message,
+} from "@solana/web3.js";
+import { useCluster, Cluster } from "../cluster";
+import * as Cache from "providers/cache";
+import { ActionType, FetchStatus } from "providers/cache";
+import { reportError } from "utils/sentry";
+
+export interface Details {
+ raw?: {
+ transaction: Transaction;
+ message: Message;
+ signatures: string[];
+ } | null;
+}
+
+type State = Cache.State;
+type Dispatch = Cache.Dispatch;
+
+export const StateContext = React.createContext(undefined);
+export const DispatchContext = React.createContext(
+ undefined
+);
+
+type DetailsProviderProps = { children: React.ReactNode };
+export function RawDetailsProvider({ children }: DetailsProviderProps) {
+ const { url } = useCluster();
+ const [state, dispatch] = Cache.useReducer(url);
+
+ React.useEffect(() => {
+ dispatch({ type: ActionType.Clear, url });
+ }, [dispatch, url]);
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export function useRawTransactionDetails(
+ signature: TransactionSignature
+): Cache.CacheEntry | undefined {
+ const context = React.useContext(StateContext);
+
+ if (!context) {
+ throw new Error(
+ `useRawTransactionDetails must be used within a TransactionsProvider`
+ );
+ }
+
+ return context.entries[signature];
+}
+
+async function fetchRawTransaction(
+ dispatch: Dispatch,
+ signature: TransactionSignature,
+ cluster: Cluster,
+ url: string
+) {
+ let fetchStatus;
+ try {
+ const response = await new Connection(url).getTransaction(signature);
+ fetchStatus = FetchStatus.Fetched;
+
+ let data: Details = { raw: null };
+ if (response !== null) {
+ const { message, signatures } = response.transaction;
+ data = {
+ raw: {
+ message,
+ signatures,
+ transaction: Transaction.populate(message, signatures),
+ },
+ };
+ }
+
+ dispatch({
+ type: ActionType.Update,
+ status: fetchStatus,
+ key: signature,
+ data,
+ url,
+ });
+ } catch (error) {
+ if (cluster !== Cluster.Custom) {
+ reportError(error, { url });
+ }
+ }
+}
+
+export function useFetchRawTransaction() {
+ const dispatch = React.useContext(DispatchContext);
+ if (!dispatch) {
+ throw new Error(
+ `useFetchRawTransaction must be used within a TransactionsProvider`
+ );
+ }
+
+ const { cluster, url } = useCluster();
+ return React.useCallback(
+ (signature: TransactionSignature) => {
+ url && fetchRawTransaction(dispatch, signature, cluster, url);
+ },
+ [dispatch, cluster, url]
+ );
+}
diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss
index 8989decbd..53e020564 100644
--- a/explorer/src/scss/_solana.scss
+++ b/explorer/src/scss/_solana.scss
@@ -91,6 +91,10 @@ ul.log-messages {
bottom: 0;
}
+.border-bottom-none {
+ border-bottom: 0px;
+}
+
.opacity-50 {
opacity: 0.5;
}
diff --git a/explorer/src/utils/index.tsx b/explorer/src/utils/index.tsx
index 29d45f525..9f81b093a 100644
--- a/explorer/src/utils/index.tsx
+++ b/explorer/src/utils/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React from "react";
import BN from "bn.js";
import {
HumanizeDuration,
@@ -51,15 +51,25 @@ export function lamportsToSol(lamports: number | BN): number {
export function lamportsToSolString(
lamports: number | BN,
maximumFractionDigits: number = 9
-): ReactNode {
+): string {
const sol = lamportsToSol(lamports);
+ return new Intl.NumberFormat("en-US", { maximumFractionDigits }).format(sol);
+}
+
+export function SolBalance({
+ lamports,
+ maximumFractionDigits = 9,
+}: {
+ lamports: number | BN;
+ maximumFractionDigits?: number;
+}) {
return (
- <>
+
◎
- {new Intl.NumberFormat("en-US", { maximumFractionDigits }).format(sol)}
+ {lamportsToSolString(lamports, maximumFractionDigits)}
-
+
);
}
diff --git a/explorer/src/utils/url.ts b/explorer/src/utils/url.ts
index dad9e6a27..8dc658f96 100644
--- a/explorer/src/utils/url.ts
+++ b/explorer/src/utils/url.ts
@@ -5,20 +5,23 @@ export function useQuery() {
return new URLSearchParams(useLocation().search);
}
-export const clusterPath = (pathname: string) => {
+export const clusterPath = (pathname: string, params?: URLSearchParams) => {
return (location: Location) => ({
- ...pickClusterParams(location),
+ ...pickClusterParams(location, params),
pathname,
});
};
-export function pickClusterParams(location: Location): Location {
+export function pickClusterParams(
+ location: Location,
+ newParams?: URLSearchParams
+): Location {
const urlParams = new URLSearchParams(location.search);
const cluster = urlParams.get("cluster");
const customUrl = urlParams.get("customUrl");
// Pick the params we care about
- const newParams = new URLSearchParams();
+ newParams = newParams || new URLSearchParams();
if (cluster) newParams.set("cluster", cluster);
if (customUrl) newParams.set("customUrl", customUrl);
@@ -27,36 +30,3 @@ export function pickClusterParams(location: Location): Location {
search: newParams.toString(),
};
}
-
-export function findGetParameter(parameterName: string): string | null {
- let result = null,
- tmp = [];
- window.location.search
- .substr(1)
- .split("&")
- .forEach(function (item) {
- tmp = item.split("=");
- if (tmp[0].toLowerCase() === parameterName.toLowerCase()) {
- if (tmp.length === 2) {
- result = decodeURIComponent(tmp[1]);
- } else if (tmp.length === 1) {
- result = "";
- }
- }
- });
- return result;
-}
-
-export function findPathSegment(pathName: string): string | null {
- const segments = window.location.pathname.substr(1).split("/");
- if (segments.length < 2) return null;
-
- // remove all but last two segments
- segments.splice(0, segments.length - 2);
-
- if (segments[0] === pathName) {
- return segments[1];
- }
-
- return null;
-}