auto-update transactions until they reach max confirmation solana-lab…

…s#65
oJshua · Aug 20, 2020 · 7f3eb55 · 7f3eb55
1 parent 2fd2ace
commit 7f3eb55
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/explorer/src/pages/TransactionDetailsPage.tsx b/explorer/src/pages/TransactionDetailsPage.tsx
@@ -29,6 +29,8 @@ import { intoTransactionInstruction } from "utils/tx";
 import { TokenDetailsCard } from "components/instruction/token/TokenDetailsCard";
 import { FetchStatus } from "providers/cache";
 
+const AUTO_REFRESH_TIMEOUT = 2000;
+
 type Props = { signature: TransactionSignature };
 export function TransactionDetailsPage({ signature: raw }: Props) {
   let signature: TransactionSignature | undefined;
@@ -67,9 +69,10 @@ function StatusCard({ signature }: Props) {
   const fetchDetails = useFetchTransactionDetails();
   const details = useTransactionDetails(signature);
   const { firstAvailableBlock, status: clusterStatus } = useCluster();
+  const [isAutoRefresh, setIsAutoRefresh] = React.useState(false);
   const refresh = React.useCallback(
-    (signature: string) => {
-      fetchStatus(signature);
+    (signature: string, isAutoRefresh: boolean = false) => {
+      fetchStatus(signature, isAutoRefresh);
       fetchDetails(signature);
     },
     [fetchStatus, fetchDetails]
@@ -82,7 +85,7 @@ function StatusCard({ signature }: Props) {
     }
   }, [signature, clusterStatus]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  if (!status || status.status === FetchStatus.Fetching) {
+  if (!status || (status.status === FetchStatus.Fetching && !status.isAutoRefresh)) {
     return <LoadingCard />;
   } else if (status.status === FetchStatus.FetchFailed) {
     return (
@@ -102,6 +105,15 @@ function StatusCard({ signature }: Props) {
   }
 
   const { info } = status.data;
+
+  if (!isAutoRefresh && info.confirmations !== 'max') {
+    setIsAutoRefresh(true);
+    setTimeout(() => {
+      setIsAutoRefresh(false);
+      refresh(signature, true);
+    }, AUTO_REFRESH_TIMEOUT);
+  }
+
   const renderResult = () => {
     let statusClass = "success";
     let statusText = "Success";
@@ -231,14 +243,14 @@ function AccountsCard({ signature }: Props) {
 
   if (!status?.data?.info) {
     return null;
-  } else if (!details) {
+  } else if (!details || (status.isAutoRefresh && status.data.info.confirmations !== 'max')) {
     return (
       <ErrorCard
         retry={refreshStatus}
         text="Details are not available until the transaction reaches MAX confirmations"
       />
     );
-  } else if (details.status === FetchStatus.Fetching) {
+  } else if ((details.status === FetchStatus.Fetching && !details.isAutoRefresh)) {
     return <LoadingCard />;
   } else if (details.status === FetchStatus.FetchFailed) {
     return <ErrorCard retry={refreshDetails} text="Fetch Failed" />;

diff --git a/explorer/src/providers/cache.tsx b/explorer/src/providers/cache.tsx
@@ -9,6 +9,7 @@ export enum FetchStatus {
 export type CacheEntry<T> = {
   status: FetchStatus;
   data?: T;
+  isAutoRefresh?: boolean;
 };
 
 export type State<T> = {
@@ -29,6 +30,7 @@ export type Update<T> = {
   key: string;
   status: FetchStatus;
   data?: T;
+  isAutoRefresh?: boolean;
 };
 
 export type Clear = {
@@ -100,6 +102,7 @@ export function reducer<T, U>(
           ...entry,
           status: action.status,
           data: reconciler(entry?.data, action.data),
+          isAutoRefresh: action.isAutoRefresh
         },
       };
       return { ...state, entries };

diff --git a/explorer/src/providers/transactions/index.tsx b/explorer/src/providers/transactions/index.tsx
@@ -56,13 +56,15 @@ export function TransactionsProvider({ children }: TransactionsProviderProps) {
 export async function fetchTransactionStatus(
   dispatch: Dispatch,
   signature: TransactionSignature,
-  url: string
+  url: string,
+  isAutoRefresh: boolean
 ) {
   dispatch({
     type: ActionType.Update,
     key: signature,
     status: FetchStatus.Fetching,
     url,
+    isAutoRefresh
   });
 
   let fetchStatus;
@@ -117,6 +119,7 @@ export async function fetchTransactionStatus(
     status: fetchStatus,
     data,
     url,
+    isAutoRefresh
   });
 }
 
@@ -153,7 +156,7 @@ export function useFetchTransactionStatus() {
   }
 
   const { url } = useCluster();
-  return (signature: TransactionSignature) => {
-    fetchTransactionStatus(dispatch, signature, url);
+  return (signature: TransactionSignature, isAutoRefresh = false) => {
+    fetchTransactionStatus(dispatch, signature, url, isAutoRefresh);
   };
 }