diff --git a/explorer/src/pages/TransactionDetailsPage.tsx b/explorer/src/pages/TransactionDetailsPage.tsx
index 8c3d144d6..bb25c2706 100644
--- a/explorer/src/pages/TransactionDetailsPage.tsx
+++ b/explorer/src/pages/TransactionDetailsPage.tsx
@@ -105,10 +105,7 @@ export function TransactionDetailsPage({ signature: raw }: SignatureProps) {
) : (
-
-
-
-
+
)}
@@ -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 (
-
- );
- } else if (autoRefresh === AutoRefresh.Active) {
- return (
-
- );
- } else if (!details || details.status === FetchStatus.Fetching) {
+ } else if (!details) {
return ;
} else if (details.status === FetchStatus.FetchFailed) {
return ;
@@ -348,7 +334,26 @@ function AccountsCard({
return ;
}
- const { meta } = details.data.transaction;
+ return (
+ <>
+
+
+
+
+ >
+ );
+}
+
+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 ;
}
diff --git a/explorer/src/providers/transactions/parsed.tsx b/explorer/src/providers/transactions/parsed.tsx
index 33b214cd9..73c9d9a13 100644
--- a/explorer/src/providers/transactions/parsed.tsx
+++ b/explorer/src/providers/transactions/parsed.tsx
@@ -56,7 +56,8 @@ async function fetchDetails(
let transaction;
try {
transaction = await new Connection(url).getParsedConfirmedTransaction(
- signature
+ signature,
+ "confirmed"
);
fetchStatus = FetchStatus.Fetched;
} catch (error) {