explorer: Restore readonly / signer raw insturction fields (#13909)

This is a follow up to #13855 It consolidates the RawParsedDetails and
RawDetails fields so that readonly/ signer instruction fields are
availalbe to parsed-raw instructions
This commit is contained in:
kev zettler
2020-12-02 14:19:45 -08:00
committed by GitHub
parent a877f347f4
commit 9b143f030e
4 changed files with 33 additions and 69 deletions

View File

@ -11,6 +11,7 @@ import {
useTransactionDetails,
useFetchRawTransaction,
} from "providers/transactions/details";
import { Address } from "components/common/Address";
type InstructionProps = {
title: string;
@ -73,11 +74,21 @@ export function InstructionCard({
<table className="table table-sm table-nowrap card-table">
<tbody className="list">
{showRaw ? (
"parsed" in ix ? (
<RawParsedDetails ix={ix} raw={raw} />
) : (
<RawDetails ix={ix} />
)
<>
<tr>
<td>Program</td>
<td className="text-lg-right">
<Address pubkey={ix.programId} alignRight link />
</td>
</tr>
{"parsed" in ix ? (
<RawParsedDetails ix={ix}>
{raw ? <RawDetails ix={raw} /> : null}
</RawParsedDetails>
) : (
<RawDetails ix={ix} />
)}
</>
) : (
children
)}

View File

@ -7,13 +7,6 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
const data = wrap(ix.data.toString("hex"), 50);
return (
<>
<tr>
<td>Program</td>
<td className="text-lg-right">
<Address pubkey={ix.programId} alignRight link />
</td>
</tr>
{ix.keys.map(({ pubkey, isSigner, isWritable }, keyIndex) => (
<tr key={keyIndex}>
<td>

View File

@ -1,47 +1,16 @@
import React from "react";
import { ParsedInstruction, TransactionInstruction } from "@solana/web3.js";
import { Address } from "components/common/Address";
import { wrap } from "utils";
import { ParsedInstruction } from "@solana/web3.js";
type RawParsedDetailsProps = {
export function RawParsedDetails({
ix,
children,
}: {
ix: ParsedInstruction;
raw?: TransactionInstruction;
};
export function RawParsedDetails({ ix, raw }: RawParsedDetailsProps) {
let hex = null;
let b64 = null;
if (raw) {
hex = wrap(raw.data.toString("hex"), 50);
b64 = wrap(raw.data.toString("base64"), 50);
}
children?: React.ReactNode;
}) {
return (
<>
<tr>
<td>Program</td>
<td className="text-lg-right">
<Address pubkey={ix.programId} alignRight link />
</td>
</tr>
{hex ? (
<tr>
<td>Instruction Data (Hex)</td>
<td className="text-lg-right">
<pre className="d-inline-block text-left mb-0">{hex}</pre>
</td>
</tr>
) : null}
{b64 ? (
<tr>
<td>Instruction Data (Base64)</td>
<td className="text-lg-right">
<pre className="d-inline-block text-left mb-0">{b64}</pre>
</td>
</tr>
) : null}
{children}
<tr>
<td>Instruction Data (JSON)</td>

View File

@ -128,34 +128,25 @@ async function fetchRawTransaction(
cluster: Cluster,
url: string
) {
dispatch({
type: ActionType.Update,
status: FetchStatus.Fetching,
key: signature,
url,
});
let fetchStatus;
let transaction;
try {
transaction = await new Connection(url).getConfirmedTransaction(signature);
fetchStatus = FetchStatus.Fetched;
dispatch({
type: ActionType.Update,
status: fetchStatus,
key: signature,
data: {
raw: transaction,
},
url,
});
} catch (error) {
if (cluster !== Cluster.Custom) {
reportError(error, { url });
}
fetchStatus = FetchStatus.FetchFailed;
}
dispatch({
type: ActionType.Update,
status: fetchStatus,
key: signature,
data: {
raw: transaction,
},
url,
});
}
export function useFetchRawTransaction() {