From 3feaf617b5625999b8e43da5dbb2ec21fefd681a Mon Sep 17 00:00:00 2001 From: KevinMansour <77366744+KevinMansour@users.noreply.github.com> Date: Wed, 8 Jun 2022 00:56:24 -0400 Subject: [PATCH 1/2] done for challenge modal and schedule claim modal --- .../src/components/modals/challenge-modal.tsx | 23 ++++++++--- .../components/modals/create-quest-modal.tsx | 1 - .../modals/schedule-claim-modal.tsx | 39 +++++++++++++------ 3 files changed, 46 insertions(+), 17 deletions(-) diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx index b0b100c6..847d2d76 100644 --- a/packages/react-app/src/components/modals/challenge-modal.tsx +++ b/packages/react-app/src/components/modals/challenge-modal.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-nested-ternary */ import { Button, useToast, IconFlag } from '@1hive/1hive-ui'; -import { noop, uniqueId } from 'lodash-es'; -import { useState, useRef, useEffect, useMemo } from 'react'; +import { debounce, noop, uniqueId } from 'lodash-es'; +import { useState, useRef, useEffect, useMemo, useCallback } from 'react'; import styled from 'styled-components'; import { Formik, Form, FormikErrors } from 'formik'; import { ClaimModel } from 'src/models/claim.model'; @@ -64,10 +64,18 @@ const ButtonLinkStyled = styled(Button)` type Props = { claim: ClaimModel; challengeDeposit: TokenAmountModel; + challengeData?: ChallengeModel; onClose?: ModalCallback; }; -export default function ChallengeModal({ claim, challengeDeposit, onClose = noop }: Props) { +const emptyChallengeData = {} as ChallengeModel; + +export default function ChallengeModal({ + claim, + challengeData = emptyChallengeData, + challengeDeposit, + onClose = noop, +}: Props) { const toast = useToast(); const [opened, setOpened] = useState(false); const [isEnoughBalance, setIsEnoughBalance] = useState(false); @@ -75,6 +83,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop const [challengeFee, setChallengeFee] = useState(undefined); const [isFormValid, setIsFormValid] = useState(false); const [showPreview, setShowPreview] = useState(false); + const [challengeDataState, setChallengeDataState] = useState(challengeData); const { setTransaction } = useTransactionContext(); const formRef = useRef(null); const { walletAddress } = useWallet(); @@ -88,6 +97,10 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop }; fetchFee(); }, []); + const debounceSave = useCallback( + debounce((data: ChallengeModel) => setChallengeDataState(data), 500), + [], + ); useEffect(() => { if (challengeFee) @@ -191,7 +204,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop const validate = (values: ChallengeModel) => { const errors = {} as FormikErrors; if (!values.reason) errors.reason = 'Challenge reason is required'; - + debounceSave(values); setIsFormValid(Object.keys(errors).length === 0); return errors; }; @@ -264,7 +277,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop isOpen={opened} > { validate(values); // validate one last time before submiting if (isFormValid) { diff --git a/packages/react-app/src/components/modals/create-quest-modal.tsx b/packages/react-app/src/components/modals/create-quest-modal.tsx index 85438df4..8722500b 100644 --- a/packages/react-app/src/components/modals/create-quest-modal.tsx +++ b/packages/react-app/src/components/modals/create-quest-modal.tsx @@ -170,7 +170,6 @@ export default function QuestModal({ if (data.expireTime.getTime() < Date.now()) errors.expireTime = 'Expiration have to be later than now'; - debounceSave(data); setIsFormValid(Object.keys(errors).length === 0); 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 dded740a..ab408915 100644 --- a/packages/react-app/src/components/modals/schedule-claim-modal.tsx +++ b/packages/react-app/src/components/modals/schedule-claim-modal.tsx @@ -1,10 +1,15 @@ /* eslint-disable no-nested-ternary */ import { Button } from '@1hive/1hive-ui'; -import { noop, uniqueId } from 'lodash-es'; -import { useState, useRef, useMemo } from 'react'; +import { debounce, noop, uniqueId } from 'lodash-es'; +import { useState, useRef, useMemo, useCallback } from 'react'; import styled from 'styled-components'; import { Formik, Form } from 'formik'; -import { ENUM_TRANSACTION_STATUS, ENUM, DEFAULT_CLAIM_EXECUTION_DELAY_MS } from 'src/constants'; +import { + ENUM_TRANSACTION_STATUS, + ENUM, + DEFAULT_CLAIM_EXECUTION_DELAY_MS, + ENUM_QUEST_STATE, +} from 'src/constants'; import { TokenAmountModel } from 'src/models/token-amount.model'; import { ClaimModel } from 'src/models/claim.model'; import { useTransactionContext } from 'src/contexts/transaction.context'; @@ -74,13 +79,17 @@ type Props = { questAddress: string; questTotalBounty?: TokenAmountModel | null; claimDeposit: TokenAmountModel; + claimData?: ClaimModel; onClose?: ModalCallback; }; - +const emptyClaimData = { + state: ENUM_QUEST_STATE.Draft, +} as ClaimModel; export default function ScheduleClaimModal({ questAddress, questTotalBounty, claimDeposit, + claimData = emptyClaimData, onClose = noop, }: Props) { const { walletAddress } = useWallet(); @@ -88,6 +97,7 @@ export default function ScheduleClaimModal({ const [isFormValid, setIsFormValid] = useState(false); const [isEnoughBalance, setIsEnoughBalance] = useState(false); const [showPreview, setShowPreview] = useState(false); + const [claimDataState, setClaimDataState] = useState(claimData); const formRef = useRef(null); const { setTransaction } = useTransactionContext(); const modalId = useMemo(() => uniqueId('schedule-claim-modal'), []); @@ -97,8 +107,12 @@ export default function ScheduleClaimModal({ setOpened(false); onClose(succeed); }; + const debounceSave = useCallback( + debounce((data: ClaimModel) => setClaimDataState(data), 500), + [], // will be created only once initially + ); - const validate = (values: ClaimModel & { claimAll: boolean }) => { + const validate = (values: ClaimModel) => { const errors = {} as FormErrors; if (!values.evidence) errors.evidence = 'Evidence of completion is required'; if (!values.claimAll) { @@ -114,11 +128,12 @@ export default function ScheduleClaimModal({ errors.playerAddress = 'Player address is not valid'; } } + debounceSave(values); setIsFormValid(Object.keys(errors).length === 0); return errors; }; - const onClaimSubmit = (values: ClaimModel & { claimAll: boolean }) => { + const onClaimSubmit = (values: ClaimModel) => { validate(values); // Validate one last time before submitting if (isFormValid) { if (values.claimAll) { @@ -210,11 +225,13 @@ export default function ScheduleClaimModal({ { From cd8078f2b9c62d2c6a48ff400db63e89821f928b Mon Sep 17 00:00:00 2001 From: KevinMansour <77366744+KevinMansour@users.noreply.github.com> Date: Sat, 18 Jun 2022 13:38:24 -0400 Subject: [PATCH 2/2] done my g --- .../react-app/src/components/modals/challenge-modal.tsx | 3 +++ .../src/components/modals/schedule-claim-modal.tsx | 7 +++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx index 847d2d76..514495b5 100644 --- a/packages/react-app/src/components/modals/challenge-modal.tsx +++ b/packages/react-app/src/components/modals/challenge-modal.tsx @@ -188,6 +188,9 @@ export default function ChallengeModal({ : ENUM_TRANSACTION_STATUS.Failed, }); if (!challengeTxReceipt?.status) throw new Error('Failed to challenge the quest'); + if (isMountedRef.current) { + setChallengeDataState(emptyChallengeData); + } } catch (e: any) { setTransaction( (oldTx) => 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 ab408915..993d4f7f 100644 --- a/packages/react-app/src/components/modals/schedule-claim-modal.tsx +++ b/packages/react-app/src/components/modals/schedule-claim-modal.tsx @@ -191,6 +191,9 @@ export default function ScheduleClaimModal({ }); if (!scheduleReceipt?.status) throw new Error('Failed to schedule the claim, please retry in a few seconds'); + if (isMountedRef.current) { + setClaimDataState(emptyClaimData); + } } catch (e: any) { if (isMountedRef.current) { setTransaction( @@ -230,8 +233,8 @@ export default function ScheduleClaimModal({ claimDataState.claimedAmount ?? ({ parsedAmount: 0, token: questTotalBounty?.token } as TokenAmountModel), claimAll: claimDataState.claimAll ?? false, - contactInformation: claimDataState.contactInformation ?? undefined, - playerAddress: claimDataState.playerAddress ?? undefined, + contactInformation: claimDataState.contactInformation, + playerAddress: claimDataState.playerAddress, } as any } onSubmit={(values) => {