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(