Update vcow blog links based on chain id (#2408)

* Update vcow blog links based on chain id

* Updated the blog root link const name

* Updated the links hook name and const

src/custom/pages/Claim/CanUserClaimMessage.tsx

@@ -2,12 +2,11 @@ import { Trans } from '@lingui/macro'
 import { ButtonSecondary } from 'components/Button'
 import { IntroDescription, BannerExplainer } from './styled'
 import { ClaimCommonTypes } from './types'
-import { useClaimState, useClaimTimeInfo } from 'state/claim/hooks'
+import { useClaimState, useClaimTimeInfo, useClaimLinks } from 'state/claim/hooks'
 import { ClaimStatus } from 'state/claim/actions'
 import { formatDateWithTimezone } from 'utils/time'
 import useNetworkName from 'hooks/useNetworkName'
 import { ExternalLink } from 'theme/index'
-import { COW_LINKS } from '.'
 import SVG from 'react-inlinesvg'
 import CowProtocolImage from 'assets/cow-swap/cowprotocol.svg'
 
@@ -17,6 +16,8 @@ export default function CanUserClaimMessage({ hasClaims, isAirdropOnly, handleCh
   const { activeClaimAccount, claimStatus } = useClaimState()
   const network = useNetworkName()
 
+  const claimLinks = useClaimLinks()
+
   const { airdropDeadline } = useClaimTimeInfo()
 
   // only show when active claim account
@@ -34,7 +35,7 @@ export default function CanUserClaimMessage({ hasClaims, isAirdropOnly, handleCh
             </Trans>
           </p>
         </IntroDescription>
-        <ExternalLink href={COW_LINKS.vCowPost}>
+        <ExternalLink href={claimLinks.vCowPost}>
           <BannerExplainer>
             <SVG src={CowProtocolImage} description="Questions? Read More." />
             <span>

src/custom/pages/Claim/ClaimsTable.tsx

@@ -1,4 +1,4 @@
-import { ClaimType, useClaimDispatchers, useClaimState, useClaimTimeInfo } from 'state/claim/hooks'
+import { ClaimType, useClaimDispatchers, useClaimState, useClaimTimeInfo, useClaimLinks } from 'state/claim/hooks'
 import styled from 'styled-components/macro'
 import { ClaimTable, ClaimBreakdown, TokenLogo, BannerExplainer } from 'pages/Claim/styled'
 import CowProtocolLogo from 'components/CowProtocolLogo'
@@ -15,7 +15,6 @@ import { getPaidClaims, getIndexes } from 'state/claim/hooks/utils'
 import { useEffect } from 'react'
 import { AMOUNT_PRECISION } from 'constants/index'
 import { ExternalLink } from 'theme/index'
-import { COW_LINKS } from '.'
 import SVG from 'react-inlinesvg'
 import CowProtocolImage from 'assets/cow-swap/cowprotocol.svg'
 
@@ -119,6 +118,8 @@ export default function ClaimsTable({ isAirdropOnly, claims, hasClaims }: Claims
 
   const pendingClaimsSet = useAllClaimingTransactionIndices()
 
+  const claimLinks = useClaimLinks()
+
   const { deployment: start, investmentDeadline, airdropDeadline } = useClaimTimeInfo()
 
   const handleSelect = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
@@ -182,7 +183,7 @@ export default function ClaimsTable({ isAirdropOnly, claims, hasClaims }: Claims
           </tbody>
         </table>
       </ClaimTable>
-      <ExternalLink href={COW_LINKS.vCowPost}>
+      <ExternalLink href={claimLinks.vCowPost}>
         <BannerExplainer>
           <SVG src={CowProtocolImage} description="Questions? Read More." />
           <span>

src/custom/pages/Claim/InvestmentFlow/index.tsx

@@ -23,6 +23,7 @@ import {
   useClaimDispatchers,
   useHasClaimInvestmentFlowError,
   useSomeNotTouched,
+  useClaimLinks,
 } from 'state/claim/hooks'
 import { ClaimStatus } from 'state/claim/actions'
 import { InvestClaim } from 'state/claim/reducer'
@@ -32,7 +33,6 @@ import { useActiveWeb3React } from 'hooks/web3'
 
 import InvestOption from './InvestOption'
 import { ClaimCommonTypes, ClaimWithInvestmentData, EnhancedUserClaimData } from '../types'
-import { COW_LINKS } from 'pages/Claim'
 import { ExternalLink } from 'theme'
 import { ExplorerLink } from 'components/ExplorerLink'
 import { ExplorerDataType } from 'utils/getExplorerLink'
@@ -153,6 +153,7 @@ export default function InvestmentFlow({ claims, hasClaims, isAirdropOnly, modal
   const { selected, activeClaimAccount, claimStatus, isInvestFlowActive, investFlowStep, investFlowData } =
     useClaimState()
   const { initInvestFlowData } = useClaimDispatchers()
+  const claimLinks = useClaimLinks()
 
   const hasError = useHasClaimInvestmentFlowError()
   const someNotTouched = useSomeNotTouched()
@@ -203,7 +204,7 @@ export default function InvestmentFlow({ claims, hasClaims, isAirdropOnly, modal
           <p>
             You have chosen to exercise one or more investment opportunities alongside claiming your airdrop. Exercising
             your investment options will give you the chance to acquire vCOW tokens at a fixed price. Read{' '}
-            <ExternalLink href={COW_LINKS.stepGuide}> the step by step guide</ExternalLink> for more details on the
+            <ExternalLink href={claimLinks.stepGuide}> the step by step guide</ExternalLink> for more details on the
             claiming process.
           </p>
           <StepExplainer>
@@ -220,7 +221,7 @@ export default function InvestmentFlow({ claims, hasClaims, isAirdropOnly, modal
               </p>
             </span>
           </StepExplainer>
-          <ExternalLink href={COW_LINKS.vCowPost}>
+          <ExternalLink href={claimLinks.vCowPost}>
             <BannerExplainer>
               <SVG src={CowProtocolImage} description="Read more" />
               <span>

src/custom/pages/Claim/index.tsx

@@ -29,12 +29,6 @@ import { ClaimSummary } from './ClaimSummary'
 
 import usePrevious from 'hooks/usePrevious'
 
-/* TODO: Replace URLs with the actual final URL destinations */
-export const COW_LINKS = {
-  vCowPost: 'https://cow.fi/',
-  stepGuide: 'https://cow.fi/',
-}
-
 export default function Claim() {
   const { account, chainId } = useActiveWeb3React()
   const { error } = useWeb3React()

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

@@ -983,3 +983,19 @@ function _getPrice({ token, amount }: { amount: string; token: Token | GpEther }
     quoteAmount: CurrencyAmount.fromRawAmount(token, amount),
   }).invert()
 }
+
+/**
+ * Returns vCow claim blog posts based on chainId
+ */
+const COW_BLOG_LINKS_ROOT = 'https://cow-protocol.medium.com'
+export const useClaimLinks = () => {
+  const { chainId } = useActiveWeb3React()
+
+  return useMemo(
+    () => ({
+      vCowPost: `${COW_BLOG_LINKS_ROOT}/7689c4391373`,
+      stepGuide: `${COW_BLOG_LINKS_ROOT}/${chainId === SupportedChainId.XDAI ? 'b1a1442a3454' : '33ae0910d53f'}`,
+    }),
+    [chainId]
+  )
+}