Claim available on profile

src/custom/components/Header/index.tsx

@@ -205,7 +205,7 @@ const UniIcon = styled.div`
   }
 `
 
-const VCowAmount = styled(UNIAmountMod)`
+export const VCowButton = styled(UNIAmountMod)`
   ${({ theme }) => theme.cowToken.background};
   ${({ theme }) => theme.cowToken.boxShadow};
   color: white;
@@ -265,7 +265,7 @@ export default function Header() {
           <NetworkCard />
           <HeaderElement>
             <UNIWrapper onClick={handleOnClickClaim}>
-              <VCowAmount active={!!account} style={{ pointerEvents: 'auto' }}>
+              <VCowButton active={!!account} style={{ pointerEvents: 'auto' }}>
                 {claimTxn && !claimTxn?.receipt ? (
                   <Dots>
                     <Trans>Claiming vCOW...</Trans>
@@ -276,7 +276,7 @@ export default function Header() {
                     <Trans>vCOW</Trans>
                   </>
                 )}
-              </VCowAmount>
+              </VCowButton>
             </UNIWrapper>
             <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
               {account && userEthBalance && (

src/custom/pages/Profile/index.tsx

@@ -1,3 +1,6 @@
+import { useHistory } from 'react-router-dom'
+import { Trans } from '@lingui/macro'
+
 import { Txt } from 'assets/styles/styled'
 import {
   FlexCol,
@@ -23,7 +26,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 +36,12 @@ 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'
+import { useUserUnclaimedAmount } from 'state/claim/hooks'
+import { UNIWrapper } from 'components/Header/HeaderMod'
+import { VCowButton } from 'components/Header'
 
 export default function Profile() {
   const referralLink = useReferralLink()
@@ -42,6 +51,12 @@ 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 availableClaim = useUserUnclaimedAmount(account)
+
+  const history = useHistory()
+  const handleOnClickClaim = () => history.push('/claim')
+
   const renderNotificationMessages = (
     <>
       {error && (
@@ -60,19 +75,35 @@ export default function Profile() {
   return (
     <Container>
       <ProfileWrapper>
-        <ProfileGridWrap horizontal>
+        {/* TODO: please fix this horrible thing I did */}
+        <ProfileGridWrap horizontal style={{ display: 'flex' }}>
           <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>
+          {availableClaim?.greaterThan('0') && (
+            <VCOWBalance>
+              You have {formatSmart(availableClaim)} vCOW unclaimed
+              <UNIWrapper onClick={handleOnClickClaim}>
+                <VCowButton active>
+                  <>
+                    <CowProtocolLogo />
+                    <Trans>Claim</Trans>
+                  </>
+                </VCowButton>
+              </UNIWrapper>
+            </VCOWBalance>
+          )}
+          {vCowBalance && (
+            <VCOWBalance>
+              <CowProtocolLogo size={46} />
+              <ProfileFlexCol>
+                <Txt fs={14}>Balance</Txt>
+                <Txt fs={18} title={`${formatMax(vCowBalance)} vCOW`}>
+                  <strong>{formatSmart(vCowBalance, AMOUNT_PRECISION) || '0'} vCOW</strong>
+                </Txt>
+              </ProfileFlexCol>
+            </VCOWBalance>
+          )}
         </ProfileGridWrap>
       </ProfileWrapper>
       {chainId && chainId === ChainId.MAINNET && <AffiliateStatusCheck />}