diff --git a/src/custom/pages/Claim/FooterNavButtons.tsx b/src/custom/pages/Claim/FooterNavButtons.tsx index 94eca56a6..6df0be2c5 100644 --- a/src/custom/pages/Claim/FooterNavButtons.tsx +++ b/src/custom/pages/Claim/FooterNavButtons.tsx @@ -1,7 +1,6 @@ -import { useMemo } from 'react' import { Trans } from '@lingui/macro' import { isAddress } from '@ethersproject/address' -import { useClaimDispatchers, useClaimState } from 'state/claim/hooks' +import { useClaimDispatchers, useClaimState, useHasClaimInvestmentFlowError } from 'state/claim/hooks' import { ButtonPrimary, ButtonSecondary } from 'components/Button' import { ClaimStatus } from 'state/claim/actions' import { FooterNavButtons as FooterNavButtonsWrapper } from 'pages/Claim/styled' @@ -34,7 +33,6 @@ export default function FooterNavButtons({ // claiming claimStatus, // investment - investFlowData, investFlowStep, isInvestFlowActive, // table select change @@ -47,9 +45,7 @@ export default function FooterNavButtons({ setIsInvestFlowActive, } = useClaimDispatchers() - const hasError = useMemo(() => { - return investFlowData.some(({ error }) => Boolean(error)) - }, [investFlowData]) + const hasError = useHasClaimInvestmentFlowError() const isInputAddressValid = isAddress(resolvedAddress || '') diff --git a/src/custom/pages/Claim/InvestmentFlow/index.tsx b/src/custom/pages/Claim/InvestmentFlow/index.tsx index ff13fb613..4ac267ad6 100644 --- a/src/custom/pages/Claim/InvestmentFlow/index.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/index.tsx @@ -14,7 +14,13 @@ import { ClaimSummaryView } from 'pages/Claim/ClaimSummary' import { Stepper } from 'components/Stepper' -import { ClaimType, useClaimState, useUserEnhancedClaimData, useClaimDispatchers } from 'state/claim/hooks' +import { + ClaimType, + useClaimState, + useUserEnhancedClaimData, + useClaimDispatchers, + useHasClaimInvestmentFlowError, +} from 'state/claim/hooks' import { ClaimStatus } from 'state/claim/actions' import { InvestClaim } from 'state/claim/reducer' import { calculateInvestmentAmounts } from 'state/claim/hooks/utils' @@ -119,6 +125,8 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro const { initInvestFlowData } = useClaimDispatchers() const claimData = useUserEnhancedClaimData(activeClaimAccount) + const hasError = useHasClaimInvestmentFlowError() + // Filtering and splitting claims into free and selected paid claims // `selectedClaims` are used on step 1 and 2 // `freeClaims` are used on step 2 @@ -202,7 +210,7 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro /> ))} - Approve all investment tokens before continuing + {hasError && Fix the errors before continuing} ) : null} {/* Invest flow: Step 2 > Review summary */} diff --git a/src/custom/state/claim/hooks/index.ts b/src/custom/state/claim/hooks/index.ts index 0e1efb659..d637d7f3b 100644 --- a/src/custom/state/claim/hooks/index.ts +++ b/src/custom/state/claim/hooks/index.ts @@ -784,6 +784,17 @@ export function useClaimState() { return useSelector((state: AppState) => state.claim) } +/** + * Returns a boolean indicating whehter there's an error on claim investment flow + */ +export function useHasClaimInvestmentFlowError(): boolean { + const { investFlowData } = useClaimState() + + return useMemo(() => { + return investFlowData.some(({ error }) => Boolean(error)) + }, [investFlowData]) +} + /** * Gets an array of available claims parsed and sorted for the UI *