Connect UI and vCow data

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

@@ -24,10 +24,7 @@ import { RefreshCcw } from 'react-feather'
 import Web3Status from 'components/Web3Status'
 import useReferralLink from 'hooks/useReferralLink'
 import useFetchProfile from 'hooks/useFetchProfile'
-import {
-  // formatSmartLocaleAware,
-  numberFormatter,
-} from 'utils/format'
+import { formatSmartLocaleAware, numberFormatter } from 'utils/format'
 import { getExplorerAddressLink } from 'utils/explorer'
 import useTimeAgo from 'hooks/useTimeAgo'
 import { MouseoverTooltipContent } from 'components/Tooltip'
@@ -42,10 +39,10 @@ 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 { isPr, isLocal } from 'utils/environments'
+import { useTokenBalance } from 'state/wallet/hooks'
+import { useVCowData } from 'state/claim/hooks'
+import { AMOUNT_PRECISION } from 'constants/index'
+import { COW } from 'constants/tokens'
 
 export default function Profile() {
   const referralLink = useReferralLink()
@@ -55,27 +52,25 @@ 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 vCowBalance = '10,240,800.32'
-  // const cowBalance = useTokenBalance(account || undefined, chainId ? COW[chainId] : undefined)
-  const cowBalance = '0'
+  // Cow balance
+  const cow = useTokenBalance(account || undefined, chainId ? COW[chainId] : undefined)
+
+  // vCow balance values
+  const { unvested, vested, total } = useVCowData()
 
-  // const { vested, total, unvested } = useVCowData()
-  const unvested = '9,240,800.32'
-  const vested = '1,240,800.32'
+  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'
 
-  // 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 hasCowBalance = cow && !cow.equalTo(0)
+  const hasVCowBalance = total && !total.equalTo(0)
 
   const tooltipText = {
     balanceBreakdown: (
       <div>
-        Unvested {unvested} vCOW Vested {vested} vCOW
+        <div>Unvested {vCowBalanceUnvested} vCOW</div>
+        <div>Vested {vCowBalanceVested} vCOW</div>
       </div>
     ),
     vested: (
@@ -113,7 +108,7 @@ export default function Profile() {
       <Title>Profile</Title>
 
       <CardsWrapper>
-        {vCowBalance && (
+        {hasVCowBalance && (
           <Card>
             <BalanceDisplay hAlign="left">
               <img src={vCOWImage} alt="vCOW token" width="56" height="56" />
@@ -135,7 +130,7 @@ export default function Profile() {
                     <HelpCircle size={14} />
                   </MouseoverTooltipContent>
                 </i>
-                <b>{vested}</b>
+                <b>{vCowBalanceVested}</b>
               </BalanceDisplay>
               <ButtonPrimary>
                 Convert to COW <SVG src={ArrowIcon} />
@@ -144,7 +139,7 @@ export default function Profile() {
           </Card>
         )}
 
-        {cowBalance && (
+        {hasCowBalance && (
           <Card>
             <BalanceDisplay titleSize={26}>
               <img src={CowImage} alt="Cow Balance" height="80" width="80" />

src/custom/pages/Profile/styled.tsx

@@ -286,6 +286,7 @@ export const BannerCard = styled(BannerExplainer)`
   padding: 0 100px 0 24px;
   flex: 1;
   overflow: hidden;
+  height: auto;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     text-align: center;

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

@@ -62,7 +62,9 @@ import useIsMounted from 'hooks/useIsMounted'
 import { ChainId } from '@uniswap/sdk'
 import { ClaimInfo } from 'state/claim/reducer'
 
-const CLAIMS_REPO_BRANCH = 'gip-13'
+// TODO: Revert this before it goes to production
+// const CLAIMS_REPO_BRANCH = 'gip-13'
+const CLAIMS_REPO_BRANCH = '2022-02-15_Rinkeby-full'
 export const CLAIMS_REPO = `https://raw.githubusercontent.com/gnosis/cow-merkle-drop/${CLAIMS_REPO_BRANCH}/`
 
 // Base amount = 1 VCOW