Explorer: Add toggle for raw tx logs (#29765)
Add toggle for raw tx logs
This commit is contained in:
parent
1753a0e3af
commit
2c728bb172
|
@ -4,8 +4,10 @@ import { useTransactionDetails } from "providers/transactions";
|
||||||
import { ProgramLogsCardBody } from "components/ProgramLogsCardBody";
|
import { ProgramLogsCardBody } from "components/ProgramLogsCardBody";
|
||||||
import { parseProgramLogs } from "utils/program-logs";
|
import { parseProgramLogs } from "utils/program-logs";
|
||||||
import { useCluster } from "providers/cluster";
|
import { useCluster } from "providers/cluster";
|
||||||
|
import { TableCardBody } from "components/common/TableCardBody";
|
||||||
|
|
||||||
export function ProgramLogSection({ signature }: SignatureProps) {
|
export function ProgramLogSection({ signature }: SignatureProps) {
|
||||||
|
const [showRaw, setShowRaw] = React.useState(false);
|
||||||
const { cluster, url } = useCluster();
|
const { cluster, url } = useCluster();
|
||||||
const details = useTransactionDetails(signature);
|
const details = useTransactionDetails(signature);
|
||||||
|
|
||||||
|
@ -26,14 +28,27 @@ export function ProgramLogSection({ signature }: SignatureProps) {
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card-header">
|
<div className="card-header">
|
||||||
<h3 className="card-header-title">Program Instruction Logs</h3>
|
<h3 className="card-header-title">Program Instruction Logs</h3>
|
||||||
|
<button
|
||||||
|
className={`btn btn-sm d-flex ${
|
||||||
|
showRaw ? "btn-black active" : "btn-white"
|
||||||
|
}`}
|
||||||
|
onClick={() => setShowRaw((r) => !r)}
|
||||||
|
>
|
||||||
|
<span className="fe fe-code me-1"></span>
|
||||||
|
Raw
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{prettyLogs !== null ? (
|
{prettyLogs !== null ? (
|
||||||
<ProgramLogsCardBody
|
showRaw ? (
|
||||||
message={message}
|
<RawProgramLogs raw={logMessages!} />
|
||||||
logs={prettyLogs}
|
) : (
|
||||||
cluster={cluster}
|
<ProgramLogsCardBody
|
||||||
url={url}
|
message={message}
|
||||||
/>
|
logs={prettyLogs}
|
||||||
|
cluster={cluster}
|
||||||
|
url={url}
|
||||||
|
/>
|
||||||
|
)
|
||||||
) : (
|
) : (
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
Logs not supported for this transaction
|
Logs not supported for this transaction
|
||||||
|
@ -43,3 +58,15 @@ export function ProgramLogSection({ signature }: SignatureProps) {
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const RawProgramLogs = ({ raw }: { raw: string[] }) => {
|
||||||
|
return (
|
||||||
|
<TableCardBody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<pre className="text-start">{JSON.stringify(raw, null, 2)}</pre>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</TableCardBody>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue