2021-02-24 12:38:53 -08:00
|
|
|
import React from "react";
|
|
|
|
import { SignatureProps } from "pages/TransactionDetailsPage";
|
|
|
|
import { useTransactionDetails } from "providers/transactions";
|
2021-11-27 17:11:58 -08:00
|
|
|
import { ProgramLogsCardBody } from "components/ProgramLogsCardBody";
|
|
|
|
import { prettyProgramLogs } from "utils/program-logs";
|
|
|
|
import { useCluster } from "providers/cluster";
|
2021-02-24 12:38:53 -08:00
|
|
|
|
|
|
|
export function ProgramLogSection({ signature }: SignatureProps) {
|
2022-04-06 10:22:49 -07:00
|
|
|
const { cluster, url } = useCluster();
|
2021-02-24 12:38:53 -08:00
|
|
|
const details = useTransactionDetails(signature);
|
|
|
|
|
2021-11-27 17:11:58 -08:00
|
|
|
const transaction = details?.data?.transaction;
|
|
|
|
if (!transaction) return null;
|
|
|
|
const message = transaction.transaction.message;
|
2021-07-26 13:54:50 -07:00
|
|
|
|
2021-11-27 17:11:58 -08:00
|
|
|
const logMessages = transaction.meta?.logMessages || null;
|
|
|
|
const err = transaction.meta?.err || null;
|
2022-01-06 16:48:20 -08:00
|
|
|
|
|
|
|
let prettyLogs = null;
|
|
|
|
if (logMessages !== null) {
|
|
|
|
prettyLogs = prettyProgramLogs(logMessages, err, cluster);
|
|
|
|
}
|
2021-02-24 12:38:53 -08:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className="card">
|
2021-11-27 17:11:58 -08:00
|
|
|
<div className="card-header">
|
2022-04-28 01:46:15 -07:00
|
|
|
<h3 className="card-header-title">Program Instruction Logs</h3>
|
2021-11-27 17:11:58 -08:00
|
|
|
</div>
|
2022-01-06 16:48:20 -08:00
|
|
|
{prettyLogs !== null ? (
|
|
|
|
<ProgramLogsCardBody
|
|
|
|
message={message}
|
|
|
|
logs={prettyLogs}
|
|
|
|
cluster={cluster}
|
2022-04-06 10:22:49 -07:00
|
|
|
url={url}
|
2022-01-06 16:48:20 -08:00
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<div className="card-body">
|
|
|
|
Logs not supported for this transaction
|
|
|
|
</div>
|
|
|
|
)}
|
2021-02-24 12:38:53 -08:00
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|