Claim invest general error msg (#2254)

# Summary

Waterfalls onto #2250 

Hide/show investment error msg when there are errors
Also updated the msg to be more general.

![Screen Shot 2022-01-21 at 15 15 47](https://user-images.githubusercontent.com/43217/150612049-ec644178-2dce-4823-9f6d-566659883f0f.png)

Of course feel free to suggest something else

  # To Test

1. Try to claim something paid and make sure to fail the validation

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 || '')
 

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
             />
           ))}
 
-          <InvestFlowValidation>Approve all investment tokens before continuing</InvestFlowValidation>
+          {hasError && <InvestFlowValidation>Fix the errors before continuing</InvestFlowValidation>}
         </InvestContent>
       ) : null}
       {/* Invest flow: Step 2 > Review summary */}

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
  *