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, useTransactionDetails,
useFetchRawTransaction, useFetchRawTransaction,
} from "providers/transactions/details"; } from "providers/transactions/details";
import { Address } from "components/common/Address";
type InstructionProps = { type InstructionProps = {
title: string; title: string;
@ -73,11 +74,21 @@ export function InstructionCard({
<table className="table table-sm table-nowrap card-table"> <table className="table table-sm table-nowrap card-table">
<tbody className="list"> <tbody className="list">
{showRaw ? ( {showRaw ? (
"parsed" in ix ? ( <>
<RawParsedDetails ix={ix} raw={raw} /> <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} /> <RawDetails ix={ix} />
) )}
</>
) : ( ) : (
children children
)} )}

View File

@ -7,13 +7,6 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
const data = wrap(ix.data.toString("hex"), 50); const data = wrap(ix.data.toString("hex"), 50);
return ( 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) => ( {ix.keys.map(({ pubkey, isSigner, isWritable }, keyIndex) => (
<tr key={keyIndex}> <tr key={keyIndex}>
<td> <td>

View File

@ -1,47 +1,16 @@
import React from "react"; import React from "react";
import { ParsedInstruction, TransactionInstruction } from "@solana/web3.js"; import { ParsedInstruction } from "@solana/web3.js";
import { Address } from "components/common/Address";
import { wrap } from "utils";
type RawParsedDetailsProps = { export function RawParsedDetails({
ix,
children,
}: {
ix: ParsedInstruction; ix: ParsedInstruction;
raw?: TransactionInstruction; children?: React.ReactNode;
}; }) {
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);
}
return ( return (
<> <>
<tr> {children}
<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}
<tr> <tr>
<td>Instruction Data (JSON)</td> <td>Instruction Data (JSON)</td>

View File

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