Show banner if the user has claimed already (#2393)

* Show banner if the user has claimed already

* Update claimed banner message and color

* Change one const name

src/custom/pages/Claim/ClaimBanner.tsx

@@ -0,0 +1,31 @@
+import { Trans } from '@lingui/macro'
+import { useClaimState } from 'state/claim/hooks'
+import { ClaimBanner as ClaimBannerWrapper } from './styled'
+import CheckCircle from 'assets/cow-swap/check.svg'
+import { ClaimStatus } from 'state/claim/actions'
+import SVG from 'react-inlinesvg'
+import { ClaimCommonTypes } from 'pages/Claim/types'
+
+type ClaimBannerProps = Pick<ClaimCommonTypes, 'hasClaims'> & {
+  isClaimed: boolean
+}
+
+export default function ClaimBanner({ hasClaims, isClaimed }: ClaimBannerProps) {
+  const { claimStatus, activeClaimAccount, isInvestFlowActive } = useClaimState()
+
+  const shouldShowBanner =
+    claimStatus === ClaimStatus.DEFAULT && !!activeClaimAccount && !isInvestFlowActive && (hasClaims || isClaimed)
+
+  if (!shouldShowBanner) return null
+
+  return (
+    <ClaimBannerWrapper isClaimed={isClaimed}>
+      <SVG src={CheckCircle} description="eligible" />
+      <Trans>
+        {hasClaims
+          ? 'This account is eligible for vCOW token claims!'
+          : 'This account has already claimed vCOW tokens!'}
+      </Trans>
+    </ClaimBannerWrapper>
+  )
+}

src/custom/pages/Claim/index.tsx

@@ -22,7 +22,7 @@ import ClaimNav from './ClaimNav'
 import ClaimingStatus from './ClaimingStatus'
 import ClaimsOnOtherChainsBanner from './ClaimsOnOtherChainsBanner'
 import ClaimsTable from './ClaimsTable'
-import EligibleBanner from './EligibleBanner'
+import ClaimBanner from './ClaimBanner'
 import FooterNavButtons from './FooterNavButtons'
 import InvestmentFlow from './InvestmentFlow'
 import { ClaimSummary } from './ClaimSummary'
@@ -87,7 +87,11 @@ export default function Claim() {
   const { handleCloseError, handleSetError, ErrorModal } = useErrorModal()
 
   // get user claim data
-  const { claims: userClaimData, isLoading: isClaimDataLoading } = useUserEnhancedClaimData(activeClaimAccount)
+  const {
+    isClaimed,
+    claims: userClaimData,
+    isLoading: isClaimDataLoading,
+  } = useUserEnhancedClaimData(activeClaimAccount)
 
   // get total unclaimed amount
   const unclaimedAmount = useUserUnclaimedAmount(activeClaimAccount)
@@ -247,8 +251,8 @@ export default function Claim() {
             <Confetti start={claimStatus === ClaimStatus.CONFIRMED} />
             {/* Top nav buttons */}
             <ClaimNav account={account} handleChangeAccount={handleChangeClick} />
-            {/* Show general title OR total to claim (user has airdrop or airdrop+investment) --------------------------- */}
-            <EligibleBanner hasClaims={hasClaims} />
+            {/* Show banner that tells if user has available claims or has already claimed all */}
+            <ClaimBanner isClaimed={isClaimed} hasClaims={hasClaims} />
             {/* Show total to claim (user has airdrop or airdrop+investment) */}
             <ClaimSummary hasClaims={hasClaims} unclaimedAmount={unclaimedAmount} />
             {/* Get address/ENS (user not connected yet or opted for checking 'another' account) */}

src/custom/pages/Claim/styled.ts

@@ -746,16 +746,16 @@ export const NegativeIcon = styled(Frown)`
   stroke: ${({ theme }) => theme.primary1};
 `
 
-export const EligibleBanner = styled.div`
+export const ClaimBanner = styled.div<{ isClaimed: boolean }>`
   width: 100%;
   border-radius: var(--border-radius);
   padding: 12px;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: ${({ theme }) => transparentize(0.9, theme.success)};
-  color: ${({ theme }) => theme.success};
+  background: ${({ theme, isClaimed }) => transparentize(0.9, !isClaimed ? theme.success : theme.blue2)};
+  color: ${({ theme, isClaimed }) => (!isClaimed ? theme.success : theme.blue2)};
   margin: 0 auto 16px;
   font-weight: 600;
 
@@ -770,7 +770,7 @@ export const EligibleBanner = styled.div`
     height: 21px;
 
     > path {
-      fill: ${({ theme }) => theme.success};
+      fill: ${({ theme, isClaimed }) => (!isClaimed ? theme.success : theme.blue2)};
     }
 
     ${({ theme }) => theme.mediaWidth.upToSmall`

src/custom/state/claim/hooks/index.ts

@@ -915,6 +915,7 @@ export function useHasZeroInvested(): boolean {
 type UseUserEnhancedClaimDataResult = {
   claims: EnhancedUserClaimData[]
   isLoading: boolean
+  isClaimed: boolean
 }
 
 /**
@@ -925,7 +926,7 @@ type UseUserEnhancedClaimDataResult = {
  * @param account
  */
 export function useUserEnhancedClaimData(account: Account): UseUserEnhancedClaimDataResult {
-  const { available, isLoading } = useClassifiedUserClaims(account)
+  const { available, claimed, isLoading } = useClassifiedUserClaims(account)
   const { chainId: preCheckChainId } = useActiveWeb3React()
   const native = useNativeTokenPrice()
   const gno = useGnoPrice()
@@ -940,7 +941,11 @@ export function useUserEnhancedClaimData(account: Account): UseUserEnhancedClaim
     return sorted.map((claim) => _enhanceClaimData(claim, chainId, { native, gno, usdc }))
   }, [available, gno, native, preCheckChainId, usdc])
 
-  return { claims, isLoading }
+  const isClaimed = useMemo(() => {
+    return Boolean(!available.length && claimed.length)
+  }, [available.length, claimed.length])
+
+  return { claims, isClaimed, isLoading }
 }
 
 function _sortTypes(a: UserClaimData, b: UserClaimData): number {