From 8544df7484b07e76ef6c6fad1b3a0e26c1678ffa Mon Sep 17 00:00:00 2001 From: Corantin Noll Date: Wed, 20 Apr 2022 14:46:31 -0400 Subject: [PATCH 1/2] Transaction index + Back button when transaction --- .../src/components/modals/challenge-modal.tsx | 8 +++---- .../src/components/modals/modal-base.tsx | 21 ++++++++++++------- .../modals/schedule-claim-modal.tsx | 5 ++--- 3 files changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx index 2bb44d3f..8904d9ac 100644 --- a/packages/react-app/src/components/modals/challenge-modal.tsx +++ b/packages/react-app/src/components/modals/challenge-modal.tsx @@ -124,7 +124,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 +168,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 +203,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( diff --git a/packages/react-app/src/components/modals/modal-base.tsx b/packages/react-app/src/components/modals/modal-base.tsx index 19dd747b..75276ba5 100644 --- a/packages/react-app/src/components/modals/modal-base.tsx +++ b/packages/react-app/src/components/modals/modal-base.tsx @@ -1,4 +1,4 @@ -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 { ENUM_TRANSACTION_STATUS } from 'src/constants'; @@ -111,6 +111,10 @@ export default function ModalBase({ } }; + const onBackButtonClick = () => { + setTransaction(undefined); + }; + return ( <>
{openButton}
@@ -128,13 +132,14 @@ export default function ModalBase({ {transaction ? : children} - {buttons && ( - - - {!transaction && buttons} - - - )} + {buttons || + (transaction && ( + + + {transaction ? : 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( From b64b8ec1eff97b17efc28c58f8e8d56f5a2bfd94 Mon Sep 17 00:00:00 2001 From: Corantin Noll Date: Wed, 20 Apr 2022 16:57:07 -0400 Subject: [PATCH 2/2] Back on completed --- .../src/components/modals/challenge-modal.tsx | 2 -- .../src/components/modals/modal-base.tsx | 31 +++++++++++++------ 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx index 8904d9ac..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 @@ -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 75276ba5..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, 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 @@ -132,14 +144,15 @@ export default function ModalBase({ {transaction ? : children} - {buttons || - (transaction && ( - - - {transaction ? : buttons} - - - ))} + {(buttons || txCompleted) && ( + + + {transaction + ? txCompleted && + : buttons} + + + )} );