Add link read more in footer, and inform about changing networks

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

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 = (

src/custom/pages/Claim/styled.ts

@@ -678,6 +678,7 @@ export const ClaimBreakdown = styled.div`
 `
 
 export const FooterNavButtons = styled.div`
+  margin-top: 20px;
   display: flex;
   width: 100%;
   flex-flow: column wrap;
@@ -698,6 +699,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;