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
*