diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx
index 2bb44d3f..7d771fc8 100644
--- a/packages/react-app/src/components/modals/challenge-modal.tsx
+++ b/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 && (
)}
-
}
buttons={[
diff --git a/packages/react-app/src/components/modals/modal-base.tsx b/packages/react-app/src/components/modals/modal-base.tsx
index 19dd747b..bf322fc6 100644
--- a/packages/react-app/src/components/modals/modal-base.tsx
+++ b/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 (
<>
{openButton}
@@ -128,10 +144,12 @@ export default function ModalBase({
{transaction ? : children}
- {buttons && (
+ {(buttons || txCompleted) && (
-
- {!transaction && buttons}
+
+ {transaction
+ ? txCompleted &&
+ : buttons}
)}
diff --git a/packages/react-app/src/components/modals/schedule-claim-modal.tsx b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
index 6e459d30..7fdd5619 100644
--- a/packages/react-app/src/components/modals/schedule-claim-modal.tsx
+++ b/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(