Claim refactor index redux (#2077)

* Refactored to use redux instead of context

* Use one state property for claim status instead of multiple

* Remove some left commented-out code

src/custom/pages/Claim/CanUserClaimMessage.tsx

@@ -1,26 +1,23 @@
 import { Trans } from '@lingui/macro'
 import { ButtonSecondary } from 'components/Button'
 import { ExternalLink } from 'theme'
-import useClaimState from './state'
 import { IntroDescription } from './styled'
 import { ClaimCommonTypes } from './types'
+import { useClaimDispatchers, useClaimState } from 'state/claim/hooks'
+import { ClaimStatus } from 'state/claim/actions'
 
 type ClaimIntroductionProps = Pick<ClaimCommonTypes, 'hasClaims'> & {
   isAirdropOnly: boolean
 }
 
 export default function CanUserClaimMessage({ hasClaims, isAirdropOnly }: ClaimIntroductionProps) {
-  const {
-    state: { activeClaimAccount, claimAttempting, claimConfirmed },
-    dispatchers,
-  } = useClaimState()
-
-  const canClaim = !claimAttempting && !claimConfirmed && hasClaims && isAirdropOnly
+  const { activeClaimAccount, claimStatus } = useClaimState()
+  const { setActiveClaimAccount } = useClaimDispatchers()
 
   // only show when active claim account
-  if (!activeClaimAccount) return null
+  if (!activeClaimAccount || claimStatus !== ClaimStatus.DEFAULT) return null
 
-  if (canClaim) {
+  if (isAirdropOnly && hasClaims) {
     return (
       <IntroDescription>
         <p>
@@ -33,17 +30,21 @@ export default function CanUserClaimMessage({ hasClaims, isAirdropOnly }: ClaimI
         </p>
       </IntroDescription>
     )
-  } else {
+  }
+
+  if (!hasClaims) {
     return (
-      <IntroDescription>
+      <IntroDescription center>
         <Trans>
-          Unfortunately this account is not eligible for any vCOW claims.{' '}
-          <ButtonSecondary onClick={() => dispatchers?.setActiveClaimAccount('')} padding="0">
+          Unfortunately this account is not eligible for any vCOW claims. <br />
+          <ButtonSecondary onClick={() => setActiveClaimAccount('')} padding="0">
             Try another account
           </ButtonSecondary>{' '}
           or <ExternalLink href="https://cow.fi/">read more about vCOW</ExternalLink>
         </Trans>
       </IntroDescription>
     )
   }
+
+  return null
 }

src/custom/pages/Claim/ClaimAddress.tsx

@@ -4,19 +4,18 @@ import { ButtonSecondary } from 'components/Button'
 import Circle from 'assets/images/blue-loader.svg'
 import { CustomLightSpinner, TYPE } from 'theme'
 import { CheckAddress, InputField, InputFieldTitle, InputErrorText } from './styled'
-import useClaimState from './state'
 import { ClaimCommonTypes } from './types'
 import useENS from 'hooks/useENS'
+import { useClaimDispatchers, useClaimState } from 'state/claim/hooks'
+import { ClaimStatus } from 'state/claim/actions'
 
 type ClaimAddressProps = Pick<ClaimCommonTypes, 'account'> & {
   toggleWalletModal: () => void
 }
 
 export default function ClaimAddress({ account, toggleWalletModal }: ClaimAddressProps) {
-  const {
-    state: { activeClaimAccount, claimConfirmed, inputAddress },
-    dispatchers,
-  } = useClaimState()
+  const { activeClaimAccount, claimStatus, inputAddress } = useClaimState()
+  const { setInputAddress } = useClaimDispatchers()
 
   const { loading, address: resolvedAddress } = useENS(inputAddress)
 
@@ -30,10 +29,10 @@ export default function ClaimAddress({ account, toggleWalletModal }: ClaimAddres
     const input = event.target.value
     const withoutSpaces = input.replace(/\s+/g, '')
 
-    dispatchers?.setInputAddress(withoutSpaces)
+    setInputAddress(withoutSpaces)
   }
 
-  if (activeClaimAccount || claimConfirmed) return null
+  if (activeClaimAccount || claimStatus === ClaimStatus.CONFIRMED) return null
 
   return (
     <CheckAddress>

src/custom/pages/Claim/ClaimNav.tsx

@@ -1,8 +1,10 @@
+import { useMemo } from 'react'
 import { ButtonSecondary } from 'components/Button'
 import { shortenAddress } from 'utils'
-import useClaimState from './state'
 import { TopNav, ClaimAccount, ClaimAccountButtons } from './styled'
 import { ClaimCommonTypes } from './types'
+import { useClaimDispatchers, useClaimState } from 'state/claim/hooks'
+import { ClaimStatus } from 'state/claim/actions'
 
 // should be updated
 const DUMMY_IDENTICON =
@@ -11,10 +13,10 @@ const DUMMY_IDENTICON =
 type ClaimNavProps = Pick<ClaimCommonTypes, 'account' | 'handleChangeAccount'>
 
 export default function ClaimNav({ account, handleChangeAccount }: ClaimNavProps) {
-  const {
-    state: { activeClaimAccount, activeClaimAccountENS, claimAttempting },
-    dispatchers,
-  } = useClaimState()
+  const { activeClaimAccount, activeClaimAccountENS, claimStatus } = useClaimState()
+  const { setActiveClaimAccount } = useClaimDispatchers()
+
+  const isAttempting = useMemo(() => claimStatus === ClaimStatus.ATTEMPTING, [claimStatus])
 
   if (!activeClaimAccount) return null
 
@@ -28,12 +30,12 @@ export default function ClaimNav({ account, handleChangeAccount }: ClaimNavProps
 
         <ClaimAccountButtons>
           {!!account && account !== activeClaimAccount && (
-            <ButtonSecondary disabled={claimAttempting} onClick={() => dispatchers?.setActiveClaimAccount(account)}>
+            <ButtonSecondary disabled={isAttempting} onClick={() => setActiveClaimAccount(account)}>
               Your claims
             </ButtonSecondary>
           )}
 
-          <ButtonSecondary disabled={claimAttempting} onClick={handleChangeAccount}>
+          <ButtonSecondary disabled={isAttempting} onClick={handleChangeAccount}>
             Change account
           </ButtonSecondary>
         </ClaimAccountButtons>

src/custom/pages/Claim/ClaimSummary.tsx

@@ -1,20 +1,19 @@
 import { Trans } from '@lingui/macro'
 import CowProtocolLogo from 'components/CowProtocolLogo'
 import { formatSmart } from 'utils/format'
-import useClaimState from './state'
+import { useClaimState } from 'state/claim/hooks'
 import { ClaimSummary as ClaimSummaryWrapper, ClaimSummaryTitle, ClaimTotal } from './styled'
 import { ClaimCommonTypes } from './types'
+import { ClaimStatus } from 'state/claim/actions'
 
 type ClaimSummaryProps = Pick<ClaimCommonTypes, 'hasClaims'> & {
   unclaimedAmount: ClaimCommonTypes['tokenCurrencyAmount'] | undefined
 }
 
 export default function ClaimSummary({ hasClaims, unclaimedAmount }: ClaimSummaryProps) {
-  const {
-    state: { activeClaimAccount, claimAttempting, claimConfirmed, claimSubmitted, isInvestFlowActive },
-  } = useClaimState()
+  const { activeClaimAccount, claimStatus, isInvestFlowActive } = useClaimState()
 
-  const hasClaimSummary = !claimAttempting && !claimConfirmed && !claimSubmitted && !isInvestFlowActive
+  const hasClaimSummary = claimStatus === ClaimStatus.DEFAULT && !isInvestFlowActive
 
   if (!hasClaimSummary) return null
 

src/custom/pages/Claim/EligibleBanner.tsx

@@ -1,14 +1,12 @@
 import { Trans } from '@lingui/macro'
-import useClaimState from './state'
+import { useClaimState } from 'state/claim/hooks'
 import { CheckIcon, EligibleBanner as EligibleBannerWrapper } from './styled'
+import { ClaimStatus } from 'state/claim/actions'
 
 export default function EligibleBanner({ hasClaims }: { hasClaims: boolean }) {
-  const {
-    state: { claimAttempting, claimConfirmed, claimSubmitted, activeClaimAccount, isInvestFlowActive },
-  } = useClaimState()
+  const { claimStatus, activeClaimAccount, isInvestFlowActive } = useClaimState()
 
-  const isEligible =
-    !claimAttempting && !claimConfirmed && !claimSubmitted && !!activeClaimAccount && !isInvestFlowActive && hasClaims
+  const isEligible = claimStatus === ClaimStatus.DEFAULT && !!activeClaimAccount && !isInvestFlowActive && hasClaims
 
   if (!isEligible) return null