Update COW balance button

src/custom/components/CowBalanceButton/index.tsx

@@ -0,0 +1,61 @@
+import { Trans } from '@lingui/macro'
+import styled from 'styled-components/macro'
+import CowProtocolLogo from 'components/CowProtocolLogo'
+import { useCombinedBalance } from 'state/cowToken/hooks'
+import { ChainId } from 'state/lists/actions/actionsMod'
+import { formatMax, formatSmartLocaleAware } from 'utils/format'
+import { AMOUNT_PRECISION } from 'constants/index'
+
+export const Wrapper = styled.div`
+  ${({ theme }) => theme.card.boxShadow};
+  color: ${({ theme }) => theme.text1};
+  padding: 0 12px;
+  font-size: 15px;
+  font-weight: 500;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-radius: 12px;
+  pointer-events: auto;
+
+  > b {
+    margin: 0 0 0 5px;
+    color: inherit;
+    font-weight: inherit;
+    white-space: nowrap;
+
+    ${({ theme }) => theme.mediaWidth.upToMedium`
+      overflow: hidden;
+      max-width: 100px;
+      text-overflow: ellipsis;
+    `};
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      overflow: visible;
+      max-width: initial;
+    `};
+  }
+`
+
+interface CowBalanceButtonProps {
+  account?: string | null | undefined
+  chainId: ChainId | undefined
+  onClick?: () => void
+}
+
+export default function CowBalanceButton({ onClick }: CowBalanceButtonProps) {
+  const combinedBalance = useCombinedBalance()
+
+  const formattedBalance = formatSmartLocaleAware(combinedBalance, AMOUNT_PRECISION)
+  const formattedMaxBalance = formatMax(combinedBalance, AMOUNT_PRECISION)
+
+  return (
+    <Wrapper onClick={onClick}>
+      <CowProtocolLogo />
+      <b title={formattedMaxBalance && `${formattedMaxBalance} (v)COW`}>
+        <Trans>{formattedBalance} (v)COW</Trans>
+      </b>
+    </Wrapper>
+  )
+}

src/custom/components/Header/index.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { SupportedChainId as ChainId } from 'constants/chains'
 // import { ExternalLink } from 'theme'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 
 import HeaderMod, {
   Title as TitleMod,
@@ -44,7 +44,7 @@ import {
 import Modal from 'components/Modal'
 // import ClaimModal from 'components/claim/ClaimModal'
 import UniBalanceContent from 'components/Header/UniBalanceContent'
-import CowClaimButton from 'components/CowClaimButton'
+import CowBalanceButton from 'components/CowBalanceButton'
 
 export const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.RINKEBY]: 'Rinkeby',
@@ -221,9 +221,6 @@ const VCowWrapper = styled(UNIWrapper)`
 `
 
 export default function Header() {
-  const location = useLocation()
-  const isClaimPage = location.pathname === '/claim'
-
   const { account, chainId: connectedChainId } = useActiveWeb3React()
   const chainId = supportedChainId(connectedChainId)
 
@@ -242,7 +239,7 @@ export default function Header() {
   const isMenuOpen = useModalOpen(ApplicationModal.MENU)
 
   const history = useHistory()
-  const handleOnClickClaim = () => history.push('/claim')
+  const handleBalanceButtonClick = () => history.push('/profile')
 
   // Toggle the 'noScroll' class on body, whenever the orders panel or flyout menu is open.
   // This removes the inner scrollbar on the page body, to prevent showing double scrollbars.
@@ -276,12 +273,7 @@ export default function Header() {
           </HeaderElement>
           <HeaderElement>
             <VCowWrapper>
-              <CowClaimButton
-                isClaimPage={isClaimPage}
-                account={account}
-                chainId={chainId}
-                handleOnClickClaim={handleOnClickClaim}
-              />
+              <CowBalanceButton onClick={handleBalanceButtonClick} account={account} chainId={chainId} />
             </VCowWrapper>
 
             <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
@@ -303,7 +295,7 @@ export default function Header() {
               {darkMode ? <Moon size={20} /> : <Sun size={20} />}
             </StyledMenuButton>
           </HeaderElementWrap>
-          <Menu isClaimPage={isClaimPage} darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+          <Menu darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
         </HeaderControls>
         {isOrdersPanelOpen && <OrdersPanel closeOrdersPanel={closeOrdersPanel} />}
       </HeaderModWrapper>

src/custom/components/Menu/index.tsx

@@ -19,7 +19,7 @@ import { ApplicationModal } from 'state/application/reducer'
 import { getExplorerAddressLink } from 'utils/explorer'
 import { useHasOrders } from 'api/gnosisProtocol/hooks'
 import { useHistory } from 'react-router-dom'
-import CowClaimButton, { Wrapper as ClaimButtonWrapper } from 'components/CowClaimButton'
+import CowBalanceButton, { Wrapper as BalanceButtonWrapper } from 'components/CowBalanceButton'
 
 import twitterImage from 'assets/cow-swap/twitter.svg'
 import discordImage from 'assets/cow-swap/discord.svg'
@@ -58,7 +58,7 @@ const MenuItemResponsive = styled(MenuItemResponsiveBase)`
   }
 `
 
-export const StyledMenu = styled(MenuMod)<{ isClaimPage: boolean }>`
+export const StyledMenu = styled(MenuMod)`
   hr {
     margin: 15px 0;
   }
@@ -98,7 +98,7 @@ export const StyledMenu = styled(MenuMod)<{ isClaimPage: boolean }>`
     padding: 0 6px 0 0;
   }
 
-  ${ClaimButtonWrapper} {
+  ${BalanceButtonWrapper} {
     margin: 0 0 12px;
     display: none;
 
@@ -272,30 +272,23 @@ export const CloseMenu = styled.button`
 interface MenuProps {
   darkMode: boolean
   toggleDarkMode: () => void
-  isClaimPage: boolean
 }
 
-export function Menu({ darkMode, toggleDarkMode, isClaimPage }: MenuProps) {
+export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
   const { account, chainId } = useActiveWeb3React()
   const hasOrders = useHasOrders(account)
   const showOrdersLink = account && hasOrders
-  /* const showVCOWClaimOption = Boolean(!!account && !!chainId) */
   const close = useToggleModal(ApplicationModal.MENU)
   const history = useHistory()
-  const handleOnClickClaim = () => {
+  const handleBalanceButtonClick = () => {
     close()
-    history.push('/claim')
+    history.push('/profile')
   }
 
   return (
-    <StyledMenu isClaimPage={isClaimPage}>
+    <StyledMenu>
       <MenuFlyout>
-        <CowClaimButton
-          isClaimPage={isClaimPage}
-          handleOnClickClaim={handleOnClickClaim}
-          account={account}
-          chainId={chainId}
-        />
+        <CowBalanceButton onClick={handleBalanceButtonClick} account={account} chainId={chainId} />
 
         <ResponsiveInternalMenuItem to="/" onClick={close}>
           <Repeat size={14} /> Swap

src/custom/state/cowToken/hooks.ts

@@ -7,12 +7,13 @@ import { useVCowContract } from 'hooks/useContract'
 import { useActiveWeb3React } from 'hooks/web3'
 import { useSingleCallResult, Result } from 'state/multicall/hooks'
 import { useTransactionAdder } from 'state/enhancedTransactions/hooks'
-import { V_COW } from 'constants/tokens'
+import { V_COW, COW } from 'constants/tokens'
 import { AppState } from 'state'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { setSwapVCowStatus, SwapVCowStatus } from './actions'
 import { OperationType } from 'components/TransactionConfirmationModal'
 import { APPROVE_GAS_LIMIT_DEFAULT } from 'hooks/useApproveCallback/useApproveCallbackMod'
+import { useTokenBalance } from 'state/wallet/hooks'
 
 export type SetSwapVCowStatusCallback = (payload: SwapVCowStatus) => void
 
@@ -150,3 +151,29 @@ export function useSetSwapVCowStatus(): SetSwapVCowStatusCallback {
 export function useSwapVCowStatus() {
   return useAppSelector((state: AppState) => state.cowToken.swapVCowStatus)
 }
+
+/**
+ * Hook that returns COW balance
+ */
+export function useCowBalance() {
+  const { chainId, account } = useActiveWeb3React()
+  const cowToken = chainId ? COW[chainId] : undefined
+  return useTokenBalance(account || undefined, cowToken)
+}
+
+/**
+ * Hook that returns combined vCOW + COW balance
+ */
+export function useCombinedBalance() {
+  const { total: vCowBalance } = useVCowData()
+  const cowBalance = useCowBalance()
+
+  return useMemo(() => {
+    if (!vCowBalance || !cowBalance) {
+      return
+    }
+
+    const sum = vCowBalance.asFraction.add(cowBalance.asFraction)
+    return CurrencyAmount.fromRawAmount(cowBalance.currency, sum.quotient)
+  }, [cowBalance, vCowBalance])
+}