Add link read more in footer, and inform about changing networks (#2265)

* Add link read more in footer, and inform about changing networks * Add network name * Remove link * Remove unused
gnosis · Jan 24, 2022 · f4dd347 · f4dd347
1 parent 142baaf
commit f4dd347
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/src/custom/pages/Claim/CanUserClaimMessage.tsx b/src/custom/pages/Claim/CanUserClaimMessage.tsx
@@ -1,19 +1,19 @@
 import { Trans } from '@lingui/macro'
 import { ButtonSecondary } from 'components/Button'
-import { ExternalLink } from 'theme'
 import { IntroDescription } from './styled'
 import { ClaimCommonTypes } from './types'
 import { useClaimState, useClaimTimeInfo } from 'state/claim/hooks'
 import { ClaimStatus } from 'state/claim/actions'
 import { formatDateWithTimezone } from 'utils/time'
-import { COW_LINKS } from 'pages/Claim/index'
+import useNetworkName from 'hooks/useNetworkName'
 
 type ClaimIntroductionProps = Pick<ClaimCommonTypes, 'hasClaims' | 'handleChangeAccount'> & {
   isAirdropOnly: boolean
 }
 
 export default function CanUserClaimMessage({ hasClaims, isAirdropOnly, handleChangeAccount }: ClaimIntroductionProps) {
   const { activeClaimAccount, claimStatus } = useClaimState()
+  const network = useNetworkName()
 
   const { airdropDeadline } = useClaimTimeInfo()
 
@@ -28,7 +28,6 @@ export default function CanUserClaimMessage({ hasClaims, isAirdropOnly, handleCh
             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>{formatDateWithTimezone(airdropDeadline)}</i>
-            <ExternalLink href={COW_LINKS.vCowPost}>Read more about vCOW</ExternalLink>
           </Trans>
         </p>
       </IntroDescription>
@@ -39,11 +38,11 @@ export default function CanUserClaimMessage({ hasClaims, isAirdropOnly, handleCh
     return (
       <IntroDescription center>
         <Trans>
-          Unfortunately this account is not eligible for any vCOW claims. <br />
+          Unfortunately this account is not eligible for any vCOW claims in {network}. <br />
           <ButtonSecondary onClick={handleChangeAccount} padding="0">
             Try another account
           </ButtonSecondary>{' '}
-          or <ExternalLink href={COW_LINKS.vCowPost}>read more about vCOW</ExternalLink>
+          or try in a different network.
         </Trans>
       </IntroDescription>
     )

diff --git a/src/custom/pages/Claim/FooterNavButtons.tsx b/src/custom/pages/Claim/FooterNavButtons.tsx
@@ -3,11 +3,13 @@ import { isAddress } from '@ethersproject/address'
 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'
+import { FooterNavButtons as FooterNavButtonsWrapper, ReadMoreText } from './styled'
 import { useActiveWeb3React } from 'hooks/web3'
 import { ClaimsTableProps } from './ClaimsTable'
 import { ClaimAddressProps } from './ClaimAddress'
 import { ReactNode } from 'react'
+import { ExternalLink } from 'theme/index'
+import { COW_LINKS } from '.'
 
 type FooterNavButtonsProps = Pick<ClaimsTableProps, 'hasClaims' | 'isAirdropOnly'> &
   Pick<ClaimAddressProps, 'toggleWalletModal'> & {
@@ -17,6 +19,14 @@ type FooterNavButtonsProps = Pick<ClaimsTableProps, 'hasClaims' | 'isAirdropOnly
     handleCheckClaim: () => void
   }
 
+function ReadMore() {
+  return (
+    <ReadMoreText>
+      <ExternalLink href={COW_LINKS.vCowPost}>Read more about vCOW</ExternalLink>
+    </ReadMoreText>
+  )
+}
+
 export default function FooterNavButtons({
   hasClaims,
   isAirdropOnly,
@@ -66,19 +76,25 @@ export default function FooterNavButtons({
   // User has no set active claim account and/or has claims, show claim account search
   if ((!activeClaimAccount || !hasClaims) && claimStatus === ClaimStatus.DEFAULT) {
     buttonContent = (
-      <ButtonPrimary disabled={!isInputAddressValid} type="text" onClick={handleCheckClaim}>
-        <Trans>Check claimable vCOW</Trans>
-      </ButtonPrimary>
+      <>
+        <ButtonPrimary disabled={!isInputAddressValid} type="text" onClick={handleCheckClaim}>
+          <Trans>Check claimable vCOW</Trans>
+        </ButtonPrimary>
+        <ReadMore />
+      </>
     )
   }
 
   // USER is CONNECTED + HAS SOMETHING TO CLAIM
   if (isConnectedAndHasClaims) {
     if (!isInvestFlowActive) {
       buttonContent = (
-        <ButtonPrimary onClick={handleSubmitClaim} disabled={isPaidClaimsOnly && noPaidClaimsSelected}>
-          <Trans>Claim vCOW</Trans>
-        </ButtonPrimary>
+        <>
+          <ButtonPrimary onClick={handleSubmitClaim} disabled={isPaidClaimsOnly && noPaidClaimsSelected}>
+            <Trans>Claim vCOW</Trans>
+          </ButtonPrimary>
+          <ReadMore />
+        </>
       )
     } else if (!isAirdropOnly) {
       buttonContent = (

diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts
@@ -680,6 +680,7 @@ export const ClaimBreakdown = styled.div`
 `
 
 export const FooterNavButtons = styled.div`
+  margin-top: 20px;
   display: flex;
   width: 100%;
   flex-flow: column wrap;
@@ -700,6 +701,12 @@ export const FooterNavButtons = styled.div`
   }
 `
 
+export const ReadMoreText = styled.div`
+  margin: 18px 0;
+  text-align: center;
+  font-size: 15px;
+`
+
 export const TopNav = styled.div`
   width: 100%;
   display: flex;