Merge pull request #2875 from JoinColony/fix/2835-tx-status-issues

JoinColony · Aug 13, 2024 · 5f7afa2 · 5f7afa2
2 parents fd3c2bb + e19eabd
commit 5f7afa2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 71 deletions.
diff --git a/...common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransactionContent.tsx b/...common/Extensions/UserHub/partials/TransactionsTab/partials/GroupedTransactionContent.tsx
@@ -68,7 +68,6 @@ const GroupedTransactionContent: FC<GroupedTransactionContentProps> = ({
     isShowingCancelConfirmation,
     toggleCancelConfirmation,
     handleCancelTransaction,
-    canBeSigned,
   } = useGroupedTransactionContent({
     id,
     status,
@@ -93,15 +92,7 @@ const GroupedTransactionContent: FC<GroupedTransactionContentProps> = ({
           {`${(group?.index || idx) + 1}. `} {titleText}
         </div>
 
-        {isCancelable && canBeSigned ? (
-          <CancelTransaction
-            isShowingCancelConfirmation={isShowingCancelConfirmation}
-            handleCancelTransaction={handleCancelTransaction}
-            toggleCancelConfirmation={toggleCancelConfirmation}
-          />
-        ) : (
-          <TransactionStatus status={status} hasError={!!error} />
-        )}
+        <TransactionStatus status={status} hasError={!!error} />
       </div>
       {failed && error && retryable && (
         <div className="mt-2 md:mr-2">

diff --git a/src/components/v5/shared/TxButton/TxButton.tsx b/src/components/v5/shared/TxButton/TxButton.tsx
@@ -5,7 +5,6 @@ import React, { useMemo, type FC, useState, useEffect } from 'react';
 import { TransactionStatus } from '~gql';
 import { useMobile } from '~hooks/index.ts';
 import {
-  TransactionGroupStatus,
   useGroupedTransactions,
   getGroupStatus,
 } from '~state/transactionState.ts';
@@ -23,7 +22,7 @@ const displayName = 'v5.TxButton';
 const TxButton: FC<Props> = ({ onClick }) => {
   const isMobile = useMobile();
 
-  const { transactions, groupState } = useGroupedTransactions();
+  const { transactions } = useGroupedTransactions();
 
   // This will calculate the following from all transaction groups:
   // Total number of succeeded txs within pending groups / total number of txs in pending groups
@@ -50,26 +49,51 @@ const TxButton: FC<Props> = ({ onClick }) => {
       );
   }, [transactions]);
 
+  const groupStatus = useMemo(() => {
+    if (
+      transactions &&
+      transactions.some((txGroup) => {
+        const status = getGroupStatus(txGroup);
+        if (status === TransactionStatus.Pending) {
+          return true;
+        }
+        return false;
+      })
+    ) {
+      return TransactionStatus.Pending;
+    }
+    if (
+      transactions &&
+      transactions[0] &&
+      getGroupStatus(transactions[0]) === TransactionStatus.Succeeded
+    ) {
+      return TransactionStatus.Succeeded;
+    }
+    return TransactionStatus.Ready;
+  }, [transactions]);
+
   const [showCompleted, setShowCompleted] = useState(false);
   const [showPending, setShowPending] = useState(false);
   // Shows the "Completed" messasge just a little longer after all transactions are completed
   useEffect(() => {
-    if (groupState === TransactionGroupStatus.Pending) {
+    if (groupStatus === TransactionStatus.Pending) {
       setShowPending(true);
-    } else if (groupState === TransactionGroupStatus.Done && showPending) {
+    } else if (groupStatus === TransactionStatus.Succeeded && showPending) {
       setShowPending(false);
       setShowCompleted(true);
       const timeoutId = setTimeout(() => {
         setShowCompleted(false);
       }, 5000);
       return () => {
-        if (!(groupState === TransactionGroupStatus.Done && showPending)) {
+        if (!(groupStatus === TransactionStatus.Succeeded && showPending)) {
           clearTimeout(timeoutId);
         }
       };
+    } else {
+      setShowPending(false);
     }
     return noop;
-  }, [groupState, showPending]);
+  }, [groupStatus, showPending]);
 
   if (showPending) {
     return (

diff --git a/src/redux/sagas/transactions/transactionChannel.ts b/src/redux/sagas/transactions/transactionChannel.ts
@@ -168,12 +168,6 @@ const channelStart = async ({
   try {
     const sentTx = await channelSendTransaction(tx, txPromise, emit);
     if (!sentTx) {
-      emit(
-        transactionUnsuccessfulError(
-          tx.id,
-          new Error('The transaction was unsuccessful'),
-        ),
-      );
       return null;
     }
 
@@ -192,16 +186,6 @@ const channelStart = async ({
         client,
         emit,
       });
-    } else {
-      /**
-       * @todo Use revert reason strings (once supported) in transactions.
-       */
-      emit(
-        transactionUnsuccessfulError(
-          tx.id,
-          new Error('The transaction was unsuccessful'),
-        ),
-      );
     }
 
     return null;

diff --git a/src/state/transactionState.ts b/src/state/transactionState.ts
@@ -95,12 +95,6 @@ export const convertTransactionType = ({
   };
 };
 
-export enum TransactionGroupStatus {
-  Loading = 'Loading',
-  Pending = 'Pending',
-  Done = 'Done',
-}
-
 // Get the joint status of one transaction group
 export const getGroupStatus = (txGroup: TransactionType[]) => {
   if (txGroup.some((tx) => tx.status === TransactionStatus.Failed)) {
@@ -112,31 +106,6 @@ export const getGroupStatus = (txGroup: TransactionType[]) => {
   return TransactionStatus.Pending;
 };
 
-// Get the joint status of all transaction groups (not failed or succeeded)
-export const getGroupStatusAll = (
-  transactions: TransactionType[][],
-  loading: boolean,
-) => {
-  if (loading) {
-    return TransactionGroupStatus.Loading;
-  }
-  if (
-    transactions.some((txGroup) => {
-      const groupStatus = getGroupStatus(txGroup);
-      if (
-        groupStatus !== TransactionStatus.Succeeded &&
-        groupStatus !== TransactionStatus.Failed
-      ) {
-        return true;
-      }
-      return false;
-    })
-  ) {
-    return TransactionGroupStatus.Pending;
-  }
-  return TransactionGroupStatus.Done;
-};
-
 // Get the index of the first transaction in a group that is ready to sign
 export const getActiveTransactionIdx = (txGroup: TransactionType[]) => {
   // Select the pending selection so that the user can't sign the next one
@@ -172,11 +141,7 @@ export const transactionCount = (transactions: TransactionType[]) =>
 export const useGroupedTransactions = () => {
   const { user } = useAppContext();
   const userAddress = utils.getAddress(user?.walletAddress as string);
-  const {
-    data,
-    loading,
-    fetchMore: fetchMoreApollo,
-  } = useGetUserTransactionsQuery({
+  const { data, fetchMore: fetchMoreApollo } = useGetUserTransactionsQuery({
     variables: {
       userAddress,
       limit: TX_PAGE_SIZE,
@@ -205,8 +170,6 @@ export const useGroupedTransactions = () => {
     );
   }, [data?.getTransactionsByUser?.items]);
 
-  const groupState = getGroupStatusAll(transactions, loading);
-
   const fetchMore = async () => {
     const nextToken = data?.getTransactionsByUser?.nextToken;
     if (!nextToken) {
@@ -222,7 +185,6 @@ export const useGroupedTransactions = () => {
   return {
     canFetchMore: !!data?.getTransactionsByUser?.nextToken,
     fetchMore,
-    groupState,
     onePageOnly: transactions.length <= TX_PAGE_SIZE,
     transactions,
   };