[Claim refactor index] - Part 1 - Extrapolate 5 small components (sum…

…mary, nav, claim messages) (#2072)

* move dummy ident

* common types file

* Component extrapolate: ClaimNav

* Component extrapolate: ClaimSummary

* Component extrapolate: ClaimAddress

* Component extrapolate: CanUserClaimMessage

* adds extrapolated components to index

src/custom/pages/Claim/CanUserClaimMessage.tsx

@@ -0,0 +1,49 @@
+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'
+
+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
+
+  // only show when active claim account
+  if (!activeClaimAccount) return null
+
+  if (canClaim) {
+    return (
+      <IntroDescription>
+        <p>
+          <Trans>
+            Thank you for being a supporter of CowSwap and the CoW protocol. As an important member of the CowSwap
+            Community you may claim vCOW to be used for voting and governance. You can claim your tokens until{' '}
+            <i>[XX-XX-XXXX - XX:XX GMT]</i>
+            <ExternalLink href="https://cow.fi/">Read more about vCOW</ExternalLink>
+          </Trans>
+        </p>
+      </IntroDescription>
+    )
+  } else {
+    return (
+      <IntroDescription>
+        <Trans>
+          Unfortunately this account is not eligible for any vCOW claims.{' '}
+          <ButtonSecondary onClick={() => dispatchers?.setActiveClaimAccount('')} padding="0">
+            Try another account
+          </ButtonSecondary>{' '}
+          or <ExternalLink href="https://cow.fi/">read more about vCOW</ExternalLink>
+        </Trans>
+      </IntroDescription>
+    )
+  }
+}

src/custom/pages/Claim/ClaimAddress.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from 'react'
+import { Trans } from '@lingui/macro'
+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'
+
+type ClaimAddressProps = Pick<ClaimCommonTypes, 'account'> & {
+  toggleWalletModal: () => void
+}
+
+export default function ClaimAddress({ account, toggleWalletModal }: ClaimAddressProps) {
+  const {
+    state: { activeClaimAccount, claimConfirmed, inputAddress },
+    dispatchers,
+  } = useClaimState()
+
+  const { loading, address: resolvedAddress } = useENS(inputAddress)
+
+  // Show input error
+  const showInputError = useMemo(
+    () => Boolean(inputAddress.length > 0 && !loading && !resolvedAddress),
+    [resolvedAddress, inputAddress, loading]
+  )
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const input = event.target.value
+    const withoutSpaces = input.replace(/\s+/g, '')
+
+    dispatchers?.setInputAddress(withoutSpaces)
+  }
+
+  if (activeClaimAccount || claimConfirmed) return null
+
+  return (
+    <CheckAddress>
+      <p>
+        Enter an address to check for any eligible vCOW claims. <br />
+        <i>Note: It is possible to claim for an account, using any wallet/account.</i>
+        {!account && (
+          <ButtonSecondary onClick={toggleWalletModal}>
+            <Trans>or connect a wallet</Trans>
+          </ButtonSecondary>
+        )}
+      </p>
+
+      <InputField>
+        <InputFieldTitle>
+          <b>Input address</b>
+          {loading && <CustomLightSpinner src={Circle} alt="loader" size={'10px'} />}
+        </InputFieldTitle>
+        <input placeholder="Address or ENS name" value={inputAddress} onChange={handleInputChange} />
+      </InputField>
+
+      {showInputError && (
+        <InputErrorText>
+          <TYPE.error error={true}>
+            <Trans>Enter valid token address or ENS</Trans>
+          </TYPE.error>
+        </InputErrorText>
+      )}
+    </CheckAddress>
+  )
+}

src/custom/pages/Claim/ClaimNav.tsx

@@ -0,0 +1,43 @@
+import { ButtonSecondary } from 'components/Button'
+import { shortenAddress } from 'utils'
+import useClaimState from './state'
+import { TopNav, ClaimAccount, ClaimAccountButtons } from './styled'
+import { ClaimCommonTypes } from './types'
+
+// should be updated
+const DUMMY_IDENTICON =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAA4ZJREFUeF7t3b1xFUEQReF5Jpj4BCC5CoIgiIFoSEAOyoEsZJEAPiaYojAxtWerWlvzye/96T5zb8/MW83t8enuZQ3+fb2/Dd59/tZffoymf90AMAsBACjAKIEUYDT9a1EACjCKIAUYTT8FWGYBZgHDY3D29noAPcAogXqA0fTrAfQAVgItBU+KEAuYzP5iASyABbCASRFiAZPZfwsW8PB8P7sUNVyA3W9/A8DeCABg7/ovAABAD7AzAxRg5+qvxQI2rz8AAGAdYGsG9ABbl18PsHn5AQAAS8F7M6AH2Lv+poGb1x8AAIjrAPXDhm8//6QafP74LsXX4Onnr19W5R4AALMAA4ACJBGjACl9a7GA+LPm6QTG+gNAD6AHSIOIArRZjCZQE5gGoCYwpU8TmP/LFQtgAWkMWgls31aygIQfC2ABw3sZZgFmAUnDWEBKHwtgAbtbQBxAGaB6/+n46uH1+bMF1Aeoewn1/tPxAIi7idMFrPcHAAAqQymeBaT09WAKQAE6ReEKFCAk74xQCkABzuDo8DUowOHUnRNIASjAOSQdvAoFOJi4s8IoAAU4i6VD16EAh9J2XhAFoADn0XTgShTgQNLODKEAFOBMnl59rawA09u50yPo6u8PgFePmf8DADAs4RTg4t8FxAE4fuoYBaAAleEUXxVQD5DSP3/wIwCGTx9nASwgakgLpwAUIBGkB0jp0wOMf9lTJTDW//LvTwEiAZpATWBEqIVXBaQALf8s4OoSGOsPAAC8VIZSfLaAx6e70TeoL3B1AKef/waANADzbiQA4kredAKvrmAUoAkABYj5u3wCKUAk4OoJvPrzs4DNAQYAAKwDFAZYQMneWprA4c00FrA5wAAAgB6gMKAHKNnTA4xvJ7OAzQEGAABaD1CPfYv5X1c/NWz6/bMCAKCdHQyAmAEK0A6epAARwKsrIAAAoAksDFCAeGxaSf6/WD2AHqAylOIpAAVIANXgqoCawFgBCkABIkItnAJc/PTwVv7eBLOAWAEWwAIiQi2cBbCARBALSOlb6/IW8PB8n/4/QP06tybw16f3sYQt/MP33+kCVcLrbxLH/0cQANpSLgAoQFIgCpDStxYLiJ82sQAWkMagJvDiR8ZQAApAAUIGzALMAgI+a5kFpPSZBeSPG/UAeoA0Bs0CzAISQDXYQpCFoMSQzaD4gxIWwALSCKzBV7eAv6T9ww6D8p2HAAAAAElFTkSuQmCC'
+
+type ClaimNavProps = Pick<ClaimCommonTypes, 'account' | 'handleChangeAccount'>
+
+export default function ClaimNav({ account, handleChangeAccount }: ClaimNavProps) {
+  const {
+    state: { activeClaimAccount, activeClaimAccountENS, claimAttempting },
+    dispatchers,
+  } = useClaimState()
+
+  if (!activeClaimAccount) return null
+
+  return (
+    <TopNav>
+      <ClaimAccount>
+        <div>
+          <img src={DUMMY_IDENTICON} alt={activeClaimAccount} />
+          <p>{activeClaimAccountENS ? activeClaimAccountENS : shortenAddress(activeClaimAccount)}</p>
+        </div>
+
+        <ClaimAccountButtons>
+          {!!account && account !== activeClaimAccount && (
+            <ButtonSecondary disabled={claimAttempting} onClick={() => dispatchers?.setActiveClaimAccount(account)}>
+              Your claims
+            </ButtonSecondary>
+          )}
+
+          <ButtonSecondary disabled={claimAttempting} onClick={handleChangeAccount}>
+            Change account
+          </ButtonSecondary>
+        </ClaimAccountButtons>
+      </ClaimAccount>
+    </TopNav>
+  )
+}

src/custom/pages/Claim/ClaimSummary.tsx

@@ -0,0 +1,41 @@
+import { Trans } from '@lingui/macro'
+import CowProtocolLogo from 'components/CowProtocolLogo'
+import { formatSmart } from 'utils/format'
+import useClaimState from './state'
+import { ClaimSummary as ClaimSummaryWrapper, ClaimSummaryTitle, ClaimTotal } from './styled'
+import { ClaimCommonTypes } from './types'
+
+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 hasClaimSummary = !claimAttempting && !claimConfirmed && !claimSubmitted && !isInvestFlowActive
+
+  if (!hasClaimSummary) return null
+
+  return (
+    <ClaimSummaryWrapper>
+      <CowProtocolLogo size={100} />
+      {!activeClaimAccount && !hasClaims && (
+        <ClaimSummaryTitle>
+          <Trans>
+            Claim <b>vCOW</b> token
+          </Trans>
+        </ClaimSummaryTitle>
+      )}
+      {activeClaimAccount && (
+        <div>
+          <ClaimTotal>
+            <b>Total available to claim</b>
+            <p>{formatSmart(unclaimedAmount)} vCOW</p>
+          </ClaimTotal>
+        </div>
+      )}
+    </ClaimSummaryWrapper>
+  )
+}