vCOW on profile (#2062)

# Summary

Adding vCOW balance to Profile page

Simply loading the balance (if any) to replace the placeholder data
<img width="930" alt="Screen Shot 2022-01-07 at 15 14 51" src="https://user-images.githubusercontent.com/43217/148619074-28e83425-678e-46bb-9bc4-c2481d625213.png">



  # To Test

1. Load the test PK on rinkeby `0x044a6c3636d0e4a7d3c3ead9f9a470efff0390f8531545c6d58018fe89f8a7a5`
2. Go to Profile page
* It should show how many vCOWs it has.
* Accounts with no vCOW will show 0
* Networks where vCOW is not deployed (anything but Rinkeby) will not show the badge at all

src/custom/pages/Profile/index.tsx

@@ -23,7 +23,7 @@ import { HelpCircle, RefreshCcw } from 'react-feather'
 import Web3Status from 'components/Web3Status'
 import useReferralLink from 'hooks/useReferralLink'
 import useFetchProfile from 'hooks/useFetchProfile'
-import { numberFormatter } from 'utils/format'
+import { formatMax, formatSmart, numberFormatter } from 'utils/format'
 import { getExplorerAddressLink } from 'utils/explorer'
 import useTimeAgo from 'hooks/useTimeAgo'
 import { MouseoverTooltipContent } from 'components/Tooltip'
@@ -33,6 +33,9 @@ import AffiliateStatusCheck from 'components/AffiliateStatusCheck'
 import { useHasOrders } from 'api/gnosisProtocol/hooks'
 import CowProtocolLogo from 'components/CowProtocolLogo'
 import { Title } from 'components/Page'
+import { useTokenBalance } from 'state/wallet/hooks'
+import { V_COW } from 'constants/tokens'
+import { AMOUNT_PRECISION } from 'constants/index'
 
 export default function Profile() {
   const referralLink = useReferralLink()
@@ -42,6 +45,8 @@ 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 renderNotificationMessages = (
     <>
       {error && (
@@ -64,15 +69,21 @@ export default function Profile() {
           <CardHead>
             <Title>Profile</Title>
           </CardHead>
-          <VCOWBalance>
-            <CowProtocolLogo size={46} />
-            <ProfileFlexCol>
-              <Txt fs={14}>Balance</Txt>
-              <Txt fs={18}>
-                <strong>102,02 vCOW</strong>
-              </Txt>
-            </ProfileFlexCol>
-          </VCOWBalance>
+          {vCowBalance && (
+            <VCOWBalance>
+              <CowProtocolLogo size={46} />
+              <ProfileFlexCol>
+                <Txt fs={14}>Balance</Txt>
+                <Txt fs={18} title={`${formatMax(vCowBalance)} vCOW`}>
+                  <strong>
+                    {formatSmart(vCowBalance, AMOUNT_PRECISION, { thousandSeparator: true, isLocaleAware: true }) ||
+                      '0'}{' '}
+                    vCOW
+                  </strong>
+                </Txt>
+              </ProfileFlexCol>
+            </VCOWBalance>
+          )}
         </ProfileGridWrap>
       </ProfileWrapper>
       {chainId && chainId === ChainId.MAINNET && <AffiliateStatusCheck />}