Show real vCow and Cow data on profile page

src/custom/assets/cow-swap/question.ts

@@ -0,0 +1,10 @@
+export function questionIcon(darkMode: boolean): string {
+  return `<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 0H6a6 6 0 0 0-6 6v2a6 6 0 0 0 6 6h2a6 6 0 0 0 6-6V6a6 6 0 0 0-6-6Z" fill="${
+      darkMode ? '#C9DAED' : '#FFFFFF'
+    }"/>
+    <path fill="${
+      darkMode ? '#1E385E' : '#000000'
+    }" fill-rule="evenodd" clip-rule="evenodd" d="M10.258 5.734c-.2 1.8-1.5 2.4-2.8 3-1.3.4-1.9-1.5-.6-1.8.4-.2 1.5-.8 1.4-1.2 0-.9-1-1.4-1.7-1-.29.145-.423.396-.55.638-.048.09-.095.18-.15.262-.4.6-1.4.4-1.6-.2-.4-1 .5-1.9 1.3-2.4 1.9-1.3 4.7.3 4.7 2.7Zm-3.1 3.9c-1.3 0-1.3 2 0 2 1.3-.1 1.3-2 0-2Z" />
+  </svg>`
+}

src/custom/components/Page/index.tsx

@@ -3,6 +3,29 @@ import { PropsWithChildren } from 'react'
 import styled, { css } from 'styled-components/macro'
 import AppBody from 'pages/AppBody'
 import { WithClassName } from 'types'
+import { useIsDarkMode } from 'state/user/hooks'
+import SVG from 'react-inlinesvg'
+import { questionIcon } from 'assets/cow-swap/question'
+
+const HelpCircleWrapper = styled.div`
+  > svg {
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`
+
+export function HelpCircle({ size }: { size: number }) {
+  const darkMode = useIsDarkMode()
+  return (
+    <HelpCircleWrapper>
+      <SVG width={size ? size : 14} height={size ? size : 14} src={questionIcon(darkMode)} />
+    </HelpCircleWrapper>
+  )
+}
 
 export const PageWrapper = styled(AppBody)`
   padding: 0 24px 24px;
@@ -14,11 +37,17 @@ export const Title = styled.h1`
   font-size: 32px;
   margin: 24px 0 16px;
   color: ${({ theme }) => theme.text1};
+
   ${({ theme }) => theme.mediaWidth.upToVerySmall`
     font-size: 24px;
   `}
 `
 
+export const SectionTitle = styled(Title)`
+  font-size: 21px;
+  margin: 12px 0 16px;
+`
+
 export const Content = styled.div`
   font-size: 15px;
   margin: 0 0 28px;

src/custom/constants/index.ts

@@ -60,13 +60,13 @@ export const GP_VAULT_RELAYER: Partial<Record<number, string>> = {
 export const V_COW_CONTRACT_ADDRESS: Record<number, string> = {
   [ChainId.MAINNET]: '0xd057b63f5e69cf1b929b356b579cba08d7688048',
   [ChainId.XDAI]: '0xc20C9C13E853fc64d054b73fF21d3636B2d97eaB',
-  [ChainId.RINKEBY]: '0x5Bf4d1f8d1cB35E0aeA69B220beb97b8807504eA',
+  [ChainId.RINKEBY]: '0x9386177e95A853070076Df2403b9D547D653126D',
 }
 
 export const COW_CONTRACT_ADDRESS: Record<number, string> = {
   [ChainId.MAINNET]: '0xDEf1CA1fb7FBcDC777520aa7f396b4E015F497aB',
   [ChainId.XDAI]: '0x177127622c4A00F3d409B75571e12cB3c8973d3c',
-  [ChainId.RINKEBY]: '0x263D0C7a63D25564cFDc299C97Fd92A61B5fc7d1',
+  [ChainId.RINKEBY]: '0xbdf1e19f8c78A77fb741b44EbA5e4c0C8DBAeF91',
 }
 
 // See https://github.com/gnosis/gp-v2-contracts/commit/821b5a8da213297b0f7f1d8b17c893c5627020af#diff-12bbbe13cd5cf42d639e34a39d8795021ba40d3ee1e1a8282df652eb161a11d6R13

src/custom/pages/Profile/index.tsx

@@ -12,12 +12,15 @@ import {
   ChildWrapper,
   Loader,
   ExtLink,
-  ProfileWrapper,
-  ProfileGridWrap,
+  CardsWrapper,
+  Card,
+  BannerCard,
+  BalanceDisplay,
+  ConvertWrapper,
 } from 'pages/Profile/styled'
 import { useActiveWeb3React } from 'hooks/web3'
 import Copy from 'components/Copy/CopyMod'
-import { HelpCircle, RefreshCcw } from 'react-feather'
+import { RefreshCcw } from 'react-feather'
 import Web3Status from 'components/Web3Status'
 import useReferralLink from 'hooks/useReferralLink'
 import useFetchProfile from 'hooks/useFetchProfile'
@@ -29,13 +32,17 @@ import NotificationBanner from 'components/NotificationBanner'
 import { SupportedChainId as ChainId } from 'constants/chains'
 import AffiliateStatusCheck from 'components/AffiliateStatusCheck'
 import { useHasOrders } from 'api/gnosisProtocol/hooks'
-import { Title } from 'components/Page'
+import { Title, SectionTitle, HelpCircle } from 'components/Page'
+import { ButtonPrimary } from 'custom/components/Button'
+import vCOWImage from 'assets/cow-swap/vCOW.png'
+import SVG from 'react-inlinesvg'
+import ArrowIcon from 'assets/cow-swap/arrow.svg'
+import CowImage from 'assets/cow-swap/cow_v2.svg'
+import CowProtocolImage from 'assets/cow-swap/cowprotocol.svg'
 import { useTokenBalance } from 'state/wallet/hooks'
 import { useVCowData } from 'state/claim/hooks'
-import { V_COW, COW } from 'constants/tokens'
-import VCOWDropdown from './VCOWDropdown'
-import { isPr, isLocal } from 'utils/environments'
-import { IS_CLAIMING_ENABLED } from 'pages/Claim/const'
+import { AMOUNT_PRECISION } from 'constants/index'
+import { COW } from 'constants/tokens'
 
 export default function Profile() {
   const referralLink = useReferralLink()
@@ -45,17 +52,39 @@ export default function Profile() {
   const isTradesTooltipVisible = account && chainId == 1 && !!profileData?.totalTrades
   const hasOrders = useHasOrders(account)
 
-  const vCowBalance = useTokenBalance(account || undefined, chainId ? V_COW[chainId] : undefined)
-  const cowBalance = useTokenBalance(account || undefined, chainId ? COW[chainId] : undefined)
+  // Cow balance
+  const cow = useTokenBalance(account || undefined, chainId ? COW[chainId] : undefined)
 
-  const { vested, total, unvested } = useVCowData()
+  // vCow balance values
+  const { unvested, vested, total } = useVCowData()
 
-  // TODO: remove once this is not needed anymore
-  if (isPr || isLocal) {
-    console.force.log('vested', formatSmartLocaleAware(vested, vested?.currency.decimals))
-    console.force.log('total', formatSmartLocaleAware(total, total?.currency.decimals))
-    console.force.log('unvested', formatSmartLocaleAware(unvested, unvested?.currency.decimals))
-    console.force.log('cowBalance', formatSmartLocaleAware(cowBalance, cowBalance?.currency.decimals))
+  const cowBalance = formatSmartLocaleAware(cow, AMOUNT_PRECISION) || '0'
+  const vCowBalanceVested = formatSmartLocaleAware(vested, AMOUNT_PRECISION) || '0'
+  const vCowBalanceUnvested = formatSmartLocaleAware(unvested, AMOUNT_PRECISION) || '0'
+  const vCowBalance = formatSmartLocaleAware(total, AMOUNT_PRECISION) || '0'
+
+  const hasCowBalance = cow && !cow.equalTo(0)
+  const hasVCowBalance = total && !total.equalTo(0)
+
+  const tooltipText = {
+    balanceBreakdown: (
+      <div>
+        <div>Unvested {vCowBalanceUnvested} vCOW</div>
+        <div>Vested {vCowBalanceVested} vCOW</div>
+      </div>
+    ),
+    vested: (
+      <div>
+        <p>
+          <strong>Vested vCOW</strong> is the portion of your vCOW token balance, which is fully available to convert to
+          COW token.
+        </p>
+        <p>
+          This includes any vCOW received through an <strong>airdrop.</strong>
+        </p>
+        <p>When converting your vested vCOW balance to COW, your entire vested balance will be converted.</p>
+      </div>
+    ),
   }
 
   const renderNotificationMessages = (
@@ -76,18 +105,70 @@ export default function Profile() {
   return (
     <Container>
       {chainId && chainId === ChainId.MAINNET && <AffiliateStatusCheck />}
-      <ProfileWrapper>
-        <ProfileGridWrap horizontal>
-          <CardHead>
-            <Title>Profile</Title>
-          </CardHead>
-          {IS_CLAIMING_ENABLED && vCowBalance && <VCOWDropdown balance={vCowBalance} />}
-        </ProfileGridWrap>
-      </ProfileWrapper>
+      <Title>Profile</Title>
+
+      <CardsWrapper>
+        {hasVCowBalance && (
+          <Card>
+            <BalanceDisplay hAlign="left">
+              <img src={vCOWImage} alt="vCOW token" width="56" height="56" />
+              <span>
+                <i>Total vCOW balance</i>
+                <b>
+                  {vCowBalance} vCOW{' '}
+                  <MouseoverTooltipContent content={tooltipText.balanceBreakdown}>
+                    <HelpCircle size={14} />
+                  </MouseoverTooltipContent>
+                </b>
+              </span>
+            </BalanceDisplay>
+            <ConvertWrapper>
+              <BalanceDisplay titleSize={18} altColor={true}>
+                <i>
+                  Vested{' '}
+                  <MouseoverTooltipContent content={tooltipText.vested}>
+                    <HelpCircle size={14} />
+                  </MouseoverTooltipContent>
+                </i>
+                <b>{vCowBalanceVested}</b>
+              </BalanceDisplay>
+              <ButtonPrimary>
+                Convert to COW <SVG src={ArrowIcon} />
+              </ButtonPrimary>
+            </ConvertWrapper>
+          </Card>
+        )}
+
+        {hasCowBalance && (
+          <Card>
+            <BalanceDisplay titleSize={26}>
+              <img src={CowImage} alt="Cow Balance" height="80" width="80" />
+              <span>
+                <i>Available COW balance</i>
+                <b>{cowBalance} COW</b>
+              </span>
+            </BalanceDisplay>
+          </Card>
+        )}
+
+        <BannerCard>
+          <span>
+            <b>CoW DAO Governance</b>
+            <small>Use your (v)COW balance to vote on important proposals or participate in forum discussions.</small>
+            <span>
+              {' '}
+              <ExtLink href={'https://snapshot.org/#/cow.eth'}>View proposals ↗</ExtLink>
+              <ExtLink href={'https://forum.cow.fi/'}>CoW Forum ↗</ExtLink>
+            </span>
+          </span>
+          <SVG src={CowProtocolImage} description="CoWDAO Governance" />
+        </BannerCard>
+      </CardsWrapper>
+
       <Wrapper>
         <GridWrap>
           <CardHead>
-            <Title>Affiliate Program</Title>
+            <SectionTitle>Affiliate Program</SectionTitle>
             {account && (
               <Loader isLoading={isLoading}>
                 <StyledContainer>