Claim balance on vcow button (#2316)

# Summary Pipes into #2314 Show claimed vCOW balance for connected wallet on vCOW button ![Screen Shot 2022-01-26 at 10 52 39](https://user-images.githubusercontent.com/43217/151229604-734a8584-54f5-4327-9478-3c4b7928e996.png) # To Test 1. With an account that has claimed vCOW, connect to the app * You should see the vCOW balance in the vCOW button on top
gnosis · Jan 26, 2022 · 5ca9174 · 5ca9174
1 parent 97d3beb
commit 5ca9174
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git a/src/custom/components/CowClaimButton/index.tsx b/src/custom/components/CowClaimButton/index.tsx
@@ -1,6 +1,11 @@
 import { Trans } from '@lingui/macro'
 import styled, { css } from 'styled-components/macro'
 import CowProtocolLogo from 'components/CowProtocolLogo'
+import { useTokenBalance } from 'state/wallet/hooks'
+import { V_COW } from 'constants/tokens'
+import { ChainId } from 'state/lists/actions/actionsMod'
+import { formatMax, formatSmartLocaleAware } from 'utils/format'
+import { AMOUNT_PRECISION } from 'constants/index'
 
 export const Wrapper = styled.div<{ isClaimPage?: boolean | null }>`
   ${({ theme }) => theme.card.boxShadow};
@@ -73,15 +78,22 @@ export const Wrapper = styled.div<{ isClaimPage?: boolean | null }>`
 interface CowClaimButtonProps {
   isClaimPage?: boolean | null | undefined
   account?: string | null | undefined
+  chainId: ChainId | undefined
   handleOnClickClaim?: () => void
 }
 
-export default function CowClaimButton({ isClaimPage, handleOnClickClaim }: CowClaimButtonProps) {
+export default function CowClaimButton({ isClaimPage, account, chainId, handleOnClickClaim }: CowClaimButtonProps) {
+  const vCowToken = chainId ? V_COW[chainId] : undefined
+  const vCowBalance = useTokenBalance(account || undefined, vCowToken)
+
+  const formattedVCowBalance = formatSmartLocaleAware(vCowBalance, AMOUNT_PRECISION)
+  const formattedMaxVCowBalance = formatMax(vCowBalance, vCowToken?.decimals)
+
   return (
     <Wrapper isClaimPage={isClaimPage} onClick={handleOnClickClaim}>
       <CowProtocolLogo />
-      <b>
-        <Trans>vCOW</Trans>
+      <b title={formattedMaxVCowBalance && `${formattedMaxVCowBalance} vCOW`}>
+        <Trans>{formattedVCowBalance} vCOW</Trans>
       </b>
     </Wrapper>
   )

diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx
@@ -261,7 +261,12 @@ export default function Header() {
           <HeaderElement>
             {IS_CLAIMING_ENABLED && (
               <VCowWrapper>
-                <CowClaimButton isClaimPage={isClaimPage} account={account} handleOnClickClaim={handleOnClickClaim} />
+                <CowClaimButton
+                  isClaimPage={isClaimPage}
+                  account={account}
+                  chainId={chainId}
+                  handleOnClickClaim={handleOnClickClaim}
+                />
               </VCowWrapper>
             )}
 

diff --git a/src/custom/components/Menu/index.tsx b/src/custom/components/Menu/index.tsx
@@ -291,7 +291,12 @@ export function Menu({ darkMode, toggleDarkMode, isClaimPage }: MenuProps) {
   return (
     <StyledMenu isClaimPage={isClaimPage}>
       <MenuFlyout>
-        <CowClaimButton isClaimPage={isClaimPage} handleOnClickClaim={handleOnClickClaim} />
+        <CowClaimButton
+          isClaimPage={isClaimPage}
+          handleOnClickClaim={handleOnClickClaim}
+          account={account}
+          chainId={chainId}
+        />
 
         <ResponsiveInternalMenuItem to="/" onClick={close}>
           <Repeat size={14} /> Swap

diff --git a/src/custom/pages/Profile/VCOWDropdown.tsx b/src/custom/pages/Profile/VCOWDropdown.tsx
@@ -5,7 +5,7 @@ import { ChevronDown } from 'react-feather'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { Txt } from 'assets/styles/styled'
 import CowProtocolLogo from 'components/CowProtocolLogo'
-import { formatMax, formatSmart } from 'utils/format'
+import { formatMax, formatSmartLocaleAware } from 'utils/format'
 import { AMOUNT_PRECISION } from '@src/custom/constants'
 
 type VCOWDropdownProps = {
@@ -30,10 +30,8 @@ export default function VCOWDropdown({ balance }: VCOWDropdownProps) {
             <CowProtocolLogo size={46} />
             <ProfileFlexCol>
               <Txt fs={14}>Balance</Txt>
-              <Txt fs={18} title={`${formatMax(balance)} vCOW`}>
-                <strong>
-                  {formatSmart(balance, AMOUNT_PRECISION, { thousandSeparator: true, isLocaleAware: true }) ?? '0'} vCOW
-                </strong>
+              <Txt fs={18} title={`${formatMax(balance, balance?.currency.decimals)} vCOW`}>
+                <strong>{formatSmartLocaleAware(balance, AMOUNT_PRECISION) || '0'} vCOW</strong>
               </Txt>
             </ProfileFlexCol>
           </VCOWBalance>