Turns transaction polling to a custom hook for use on single transaction page and list

Author: cgjohn

renderer/components/NoteRow/NoteRow.tsx

@@ -5,10 +5,10 @@ import type {
   TransactionStatus,
   TransactionType,
 } from "@ironfish/sdk";
-import { useState, useEffect, ReactNode, useMemo } from "react";
+import { ReactNode, useMemo } from "react";
 import { MessageDescriptor, useIntl } from "react-intl";
 
-import { trpcReact } from "@/providers/TRPCProvider";
+import { useTransactionPolling } from "@/hooks/useTransactionPolling";
 import { MaybeLink } from "@/ui/ChakraLink/ChakraLink";
 import { COLORS } from "@/ui/colors";
 import { ShadowCard } from "@/ui/ShadowCard/ShadowCard";
@@ -132,25 +132,12 @@ export function NoteRow({
   isBridge?: boolean;
 }) {
   const { formatMessage } = useIntl();
-  const [status, setStatus] = useState<TransactionStatus>(initialStatus);
-
-  const { data: transactionData } = trpcReact.getTransaction.useQuery(
-    { accountName, transactionHash },
-    {
-      enabled:
-        status === "pending" ||
-        status === "unconfirmed" ||
-        status === "unknown",
-      refetchInterval: 5000,
-    },
+  const { status = initialStatus } = useTransactionPolling(
+    accountName,
+    transactionHash,
+    initialStatus,
   );
 
-  useEffect(() => {
-    if (transactionData && transactionData.transaction.status !== status) {
-      setStatus(transactionData.transaction.status);
-    }
-  }, [transactionData, status]);
-
   const statusDisplay = getNoteStatusDisplay(
     type,
     status,

renderer/hooks/useTransactionPolling.ts

@@ -0,0 +1,34 @@
+import type { TransactionStatus } from "@ironfish/sdk";
+import { useState, useEffect } from "react";
+
+import { trpcReact } from "@/providers/TRPCProvider";
+
+export function useTransactionPolling(
+  accountName: string,
+  transactionHash: string,
+  initialStatus?: TransactionStatus,
+) {
+  const [status, setStatus] = useState<TransactionStatus | undefined>(
+    initialStatus,
+  );
+
+  const { data: transactionData } = trpcReact.getTransaction.useQuery(
+    { accountName, transactionHash },
+    {
+      enabled:
+        !status ||
+        status === "pending" ||
+        status === "unconfirmed" ||
+        status === "unknown",
+      refetchInterval: 5000,
+    },
+  );
+
+  useEffect(() => {
+    if (transactionData && transactionData.transaction.status !== status) {
+      setStatus(transactionData.transaction.status);
+    }
+  }, [transactionData, status]);
+
+  return { status, transactionData };
+}

renderer/pages/accounts/[account-name]/transaction/[transaction-hash].tsx

@@ -7,6 +7,7 @@ import { BridgeTransactionProgressIndicator } from "@/components/BridgeTransacti
 import { CopyAddress } from "@/components/CopyAddress/CopyAddress";
 import { NotesList } from "@/components/NotesList/NotesList";
 import { TransactionInformation } from "@/components/TransactionInformation/TransactionInformation";
+import { useTransactionPolling } from "@/hooks/useTransactionPolling";
 import MainLayout from "@/layouts/MainLayout";
 import { trpcReact } from "@/providers/TRPCProvider";
 import { asQueryString } from "@/utils/parseRouteQuery";
@@ -38,10 +39,10 @@ function SingleTransactionContent({
     name: accountName,
   });
 
-  const { data: transactionData } = trpcReact.getTransaction.useQuery({
+  const { transactionData } = useTransactionPolling(
     accountName,
     transactionHash,
-  });
+  );
 
   if (!accountData) {
     return null;