feat(explorer): load and display transaction details when commitment is confirmed (#20053)
* feat(explorer): load and display transaction details when commitment is confirmed * feat: rename DetailsCard to DetailsSection * fix: prevent details from showing when transaction unavailable
This commit is contained in:
parent
0bd3ae063e
commit
5c35ab619d
|
@ -105,10 +105,7 @@ export function TransactionDetailsPage({ signature: raw }: SignatureProps) {
|
|||
) : (
|
||||
<SignatureContext.Provider value={signature}>
|
||||
<StatusCard signature={signature} autoRefresh={autoRefresh} />
|
||||
<AccountsCard signature={signature} autoRefresh={autoRefresh} />
|
||||
<TokenBalancesCard signature={signature} />
|
||||
<InstructionsSection signature={signature} />
|
||||
<ProgramLogSection signature={signature} />
|
||||
<DetailsSection signature={signature} />
|
||||
</SignatureContext.Provider>
|
||||
)}
|
||||
</div>
|
||||
|
@ -307,40 +304,29 @@ function StatusCard({
|
|||
);
|
||||
}
|
||||
|
||||
function AccountsCard({
|
||||
signature,
|
||||
autoRefresh,
|
||||
}: SignatureProps & AutoRefreshProps) {
|
||||
function DetailsSection({ signature }: SignatureProps) {
|
||||
const details = useTransactionDetails(signature);
|
||||
const fetchDetails = useFetchTransactionDetails();
|
||||
const fetchStatus = useFetchTransactionStatus();
|
||||
const refreshDetails = () => fetchDetails(signature);
|
||||
const refreshStatus = () => fetchStatus(signature);
|
||||
const status = useTransactionStatus(signature);
|
||||
const transaction = details?.data?.transaction?.transaction;
|
||||
const message = transaction?.message;
|
||||
const status = useTransactionStatus(signature);
|
||||
const { status: clusterStatus } = useCluster();
|
||||
const refreshDetails = () => fetchDetails(signature);
|
||||
|
||||
// Fetch details on load
|
||||
React.useEffect(() => {
|
||||
if (status?.data?.info?.confirmations === "max" && !details) {
|
||||
if (
|
||||
!details &&
|
||||
clusterStatus === ClusterStatus.Connected &&
|
||||
status?.status === FetchStatus.Fetched
|
||||
) {
|
||||
fetchDetails(signature);
|
||||
}
|
||||
}, [signature, details, status, fetchDetails]);
|
||||
}, [signature, clusterStatus, status]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
if (!status?.data?.info) {
|
||||
return null;
|
||||
} else if (autoRefresh === AutoRefresh.BailedOut) {
|
||||
return (
|
||||
<ErrorCard
|
||||
text="Details are not available until the transaction reaches MAX confirmations"
|
||||
retry={refreshStatus}
|
||||
/>
|
||||
);
|
||||
} else if (autoRefresh === AutoRefresh.Active) {
|
||||
return (
|
||||
<ErrorCard text="Details are not available until the transaction reaches MAX confirmations" />
|
||||
);
|
||||
} else if (!details || details.status === FetchStatus.Fetching) {
|
||||
} else if (!details) {
|
||||
return <LoadingCard />;
|
||||
} else if (details.status === FetchStatus.FetchFailed) {
|
||||
return <ErrorCard retry={refreshDetails} text="Failed to fetch details" />;
|
||||
|
@ -348,7 +334,26 @@ function AccountsCard({
|
|||
return <ErrorCard text="Details are not available" />;
|
||||
}
|
||||
|
||||
const { meta } = details.data.transaction;
|
||||
return (
|
||||
<>
|
||||
<AccountsCard signature={signature} />
|
||||
<TokenBalancesCard signature={signature} />
|
||||
<InstructionsSection signature={signature} />
|
||||
<ProgramLogSection signature={signature} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function AccountsCard({ signature }: SignatureProps) {
|
||||
const details = useTransactionDetails(signature);
|
||||
|
||||
if (!details?.data?.transaction) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { meta, transaction } = details.data.transaction;
|
||||
const { message } = transaction;
|
||||
|
||||
if (!meta) {
|
||||
return <ErrorCard text="Transaction metadata is missing" />;
|
||||
}
|
||||
|
|
|
@ -56,7 +56,8 @@ async function fetchDetails(
|
|||
let transaction;
|
||||
try {
|
||||
transaction = await new Connection(url).getParsedConfirmedTransaction(
|
||||
signature
|
||||
signature,
|
||||
"confirmed"
|
||||
);
|
||||
fetchStatus = FetchStatus.Fetched;
|
||||
} catch (error) {
|
||||
|
|
Loading…
Reference in New Issue