Transaction index + Back button when transaction

packages/react-app/src/components/modals/challenge-modal.tsx

@@ -20,7 +20,6 @@ import * as QuestService from '../../services/quest.service';
 import AmountFieldInput from '../field-input/amount-field-input';
 import TextFieldInput from '../field-input/text-field-input';
 import { Outset } from '../utils/spacer-util';
-import { HelpTooltip } from '../field-input/help-tooltip';
 import { WalletBallance } from '../wallet-balance';
 
 // #region StyledComponents
@@ -124,7 +123,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           setTransaction({
             id: uniqueId(),
             estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.TokenAproval,
-            message: 'Approving challenge fee',
+            message: `Approving challenge fee (1/3)`,
             status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
           });
           const approveTxReceipt = await QuestService.approveTokenAmount(
@@ -168,8 +167,8 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
             id: uniqueId(),
             estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.ClaimChallenging,
             message: isFeeDepositSameToken
-              ? 'Approving challenge fee + deposit'
-              : 'Approving challenge deposit',
+              ? 'Approving challenge fee + deposit (1/2)'
+              : 'Approving challenge deposit  (2/3)',
             status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
           });
           const approveTxReceipt = await QuestService.approveTokenAmount(
@@ -203,7 +202,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
         setTransaction({
           id: uniqueId(),
           estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.TokenAproval,
-          message: 'Challenging Quest',
+          message: `Challenging Quest (${isFeeDepositSameToken ? '2/2' : '3/3'})`,
           status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
         });
         const challengeTxReceipt = await QuestService.challengeQuestClaim(
@@ -278,7 +277,6 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           {!loading && challengeTimeout === false && claim.executionTimeMs && (
             <Timer end={new Date(claim.executionTimeMs)} />
           )}
-          <HelpTooltip tooltip="A challenge allows you to deny a claim. It will be raised to Celeste and disputable voting will be used to determine the validity of this challenge." />
         </OpenButtonWrapperStyled>
       }
       buttons={[

packages/react-app/src/components/modals/modal-base.tsx

@@ -1,6 +1,6 @@
-import { Modal, ScrollView, textStyle } from '@1hive/1hive-ui';
+import { Modal, ScrollView, textStyle, Button } from '@1hive/1hive-ui';
 import { noop } from 'lodash-es';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { ENUM_TRANSACTION_STATUS } from 'src/constants';
 import { useTransactionContext } from 'src/contexts/transaction.context';
 import { GUpx } from 'src/utils/style.util';
@@ -53,6 +53,8 @@ export default function ModalBase({
 }: Props) {
   const openButtonId = `open-${id}`;
   const { transaction, setTransaction } = useTransactionContext();
+  const [txCompleted, setTxCompleted] = useState(false);
+
   const width = useMemo(() => {
     switch (size) {
       case 'small':
@@ -63,6 +65,16 @@ export default function ModalBase({
         return 800;
     }
   }, [size]);
+
+  useEffect(() => {
+    setTxCompleted(
+      (transaction &&
+        (transaction?.status === ENUM_TRANSACTION_STATUS.Confirmed ||
+          transaction?.status === ENUM_TRANSACTION_STATUS.Failed)) ??
+        false,
+    );
+  }, [transaction?.status]);
+
   useEffect(() => {
     if (isOpen) {
       // Clear tx if a tx is still there and already completed
@@ -111,6 +123,10 @@ export default function ModalBase({
     }
   };
 
+  const onBackButtonClick = () => {
+    setTransaction(undefined);
+  };
+
   return (
     <>
       <div id={openButtonId}>{openButton}</div>
@@ -128,10 +144,12 @@ export default function ModalBase({
         <ScrollViewStyled vertical>
           {transaction ? <TransactionProgressComponent /> : children}
         </ScrollViewStyled>
-        {buttons && (
+        {(buttons || txCompleted) && (
           <ModalFooterStyled>
-            <ChildSpacer justify="start" align="center" buttonEnd>
-              {!transaction && buttons}
+            <ChildSpacer justify="start" align="center" buttonEnd={!txCompleted}>
+              {transaction
+                ? txCompleted && <Button onClick={onBackButtonClick}>Back</Button>
+                : buttons}
             </ChildSpacer>
           </ModalFooterStyled>
         )}

packages/react-app/src/components/modals/schedule-claim-modal.tsx

@@ -109,7 +109,7 @@ export default function ScheduleClaimModal({
       setLoading(true);
       const { governQueueAddress } = getNetwork();
       const scheduleDeposit = (await QuestService.fetchDeposits()).claim;
-      let message = 'Approving claim deposit';
+      const message = 'Approving claim deposit (1/2)';
       toast(message);
       setTransaction({
         id: uniqueId(),
@@ -142,11 +142,10 @@ export default function ScheduleClaimModal({
           },
       );
       if (!approveTxReceipt?.status) throw new Error('Failed to approve deposit');
-      message = 'Scheduling claim';
       setTransaction({
         id: uniqueId(),
         estimatedDuration: ENUM.ENUM_ESTIMATED_TX_TIME_MS.ClaimScheduling,
-        message,
+        message: 'Scheduling claim (2/2)',
         status: ENUM_TRANSACTION_STATUS.WaitingForSignature,
       });
       const scheduleReceipt = await QuestService.scheduleQuestClaim(