fix(uni): fix uni in circulation calculation and make uni button always show up

src/components/Header/UniBalanceContent.tsx

@@ -6,6 +6,7 @@ import tokenLogo from '../../assets/images/token-logo.png'
 import { UNI } from '../../constants'
 import { useTotalSupply } from '../../data/TotalSupply'
 import { useActiveWeb3React } from '../../hooks'
+import { useMerkleDistributorContract } from '../../hooks/useContract'
 import useCurrentBlockTimestamp from '../../hooks/useCurrentBlockTimestamp'
 import { useTotalUniEarned } from '../../state/stake/hooks'
 import { useAggregateUniBalance, useTokenBalance } from '../../state/wallet/hooks'
@@ -45,15 +46,18 @@ export default function UniBalanceContent({ setShowUniBalanceModal }: { setShowU
 
   const total = useAggregateUniBalance()
   const uniBalance: TokenAmount | undefined = useTokenBalance(account ?? undefined, uni)
-  const uniUnHarvested: TokenAmount | undefined = useTotalUniEarned()
+  const uniToClaim: TokenAmount | undefined = useTotalUniEarned()
 
   const totalSupply: TokenAmount | undefined = useTotalSupply(uni)
   const uniPrice = useUSDCPrice(uni)
   const blockTimestamp = useCurrentBlockTimestamp()
+  const unclaimedUni = useTokenBalance(useMerkleDistributorContract()?.address, uni)
   const circulation: TokenAmount | undefined = useMemo(
     () =>
-      blockTimestamp && uni && chainId === ChainId.MAINNET ? computeUniCirculation(uni, blockTimestamp) : totalSupply,
-    [blockTimestamp, chainId, totalSupply, uni]
+      blockTimestamp && uni && chainId === ChainId.MAINNET
+        ? computeUniCirculation(uni, blockTimestamp, unclaimedUni)
+        : totalSupply,
+    [blockTimestamp, chainId, totalSupply, unclaimedUni, uni]
   )
 
   return (
@@ -63,11 +67,13 @@ export default function UniBalanceContent({ setShowUniBalanceModal }: { setShowU
         <CardNoise />
         <CardSection gap="md">
           <RowBetween>
-            <TYPE.white color="white">Your UNI Breakdown</TYPE.white>{' '}
+            <TYPE.white color="white">Your UNI Breakdown</TYPE.white>
             <StyledClose stroke="white" onClick={() => setShowUniBalanceModal(false)} />
           </RowBetween>
         </CardSection>
         <Break />
+        {account && (
+          <>
             <CardSection gap="sm">
               <AutoColumn gap="md" justify="center">
                 <UniTokenAnimated width="48px" src={tokenLogo} />{' '}
@@ -83,8 +89,8 @@ export default function UniBalanceContent({ setShowUniBalanceModal }: { setShowU
                 <RowBetween>
                   <TYPE.white color="white">Unclaimed:</TYPE.white>
                   <TYPE.white color="white">
-                {uniUnHarvested?.toFixed(4, { groupSeparator: ',' })}{' '}
-                {uniUnHarvested && (
+                    {uniToClaim?.toFixed(4, { groupSeparator: ',' })}{' '}
+                    {uniToClaim && uniToClaim.greaterThan('0') && (
                       <StyledInternalLink onClick={() => setShowUniBalanceModal(false)} to="/uni">
                         (claim)
                       </StyledInternalLink>
@@ -94,6 +100,8 @@ export default function UniBalanceContent({ setShowUniBalanceModal }: { setShowU
               </AutoColumn>
             </CardSection>
             <Break />
+          </>
+        )}
         <CardSection gap="sm">
           <AutoColumn gap="md">
             <RowBetween>

src/components/Header/index.tsx

-import { ChainId, TokenAmount, JSBI } from '@uniswap/sdk'
+import { ChainId, TokenAmount } from '@uniswap/sdk'
 import React, { useState } from 'react'
 import { Text } from 'rebass'
-import { NavLink, withRouter } from 'react-router-dom'
+import { NavLink } from 'react-router-dom'
 import { darken } from 'polished'
 import { useTranslation } from 'react-i18next'
 
@@ -264,7 +264,7 @@ const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.KOVAN]: 'Kovan'
 }
 
-function Header({ history }: { history: any }) {
+export default function Header() {
   const { account, chainId } = useActiveWeb3React()
   const { t } = useTranslation()
 
@@ -292,34 +292,32 @@ function Header({ history }: { history: any }) {
         <UniBalanceContent setShowUniBalanceModal={setShowUniBalanceModal} />
       </Modal>
       <HeaderRow>
-        <Title href="." style={{}}>
+        <Title href=".">
           <UniIcon>
             <img width={'24px'} src={isDark ? LogoDark : Logo} alt="logo" />
           </UniIcon>
         </Title>
         <HeaderLinks>
-          <StyledNavLink id={`swap-nav-link`} to={'/swap'} isActive={() => history.location.pathname.includes('/swap')}>
+          <StyledNavLink id={`swap-nav-link`} to={'/swap'}>
             {t('swap')}
           </StyledNavLink>
           <StyledNavLink
             id={`pool-nav-link`}
             to={'/pool'}
-            isActive={() =>
-              history.location.pathname.includes('/pool') ||
-              history.location.pathname.includes('/add') ||
-              history.location.pathname.includes('/remove')
+            isActive={(match, { pathname }) =>
+              Boolean(match) ||
+              pathname.startsWith('/add') ||
+              pathname.startsWith('/remove') ||
+              pathname.startsWith('/create') ||
+              pathname.startsWith('/find')
             }
           >
             {t('pool')}
           </StyledNavLink>
-          <StyledNavLink id={`stake-nav-link`} to={'/uni'} isActive={() => history.location.pathname.includes('/uni')}>
+          <StyledNavLink id={`stake-nav-link`} to={'/uni'}>
             UNI
           </StyledNavLink>
-          <StyledNavLink
-            id={`stake-nav-link`}
-            to={'/vote'}
-            isActive={() => history.location.pathname.includes('/vote')}
-          >
+          <StyledNavLink id={`stake-nav-link`} to={'/vote'}>
             Vote
           </StyledNavLink>
           <StyledExternalLink id={`stake-nav-link`} href={'https://uniswap.info'}>
@@ -344,9 +342,10 @@ function Header({ history }: { history: any }) {
               <CardNoise />
             </UNIWrapper>
           )}
-          {!availableClaim && aggregateBalance && JSBI.greaterThan(aggregateBalance.raw, JSBI.BigInt(0)) && (
+          {!availableClaim && aggregateBalance && (
             <UNIWrapper onClick={() => setShowUniBalanceModal(true)}>
               <UNIAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
+                {account && (
                   <HideSmall>
                     <TYPE.white
                       style={{
@@ -363,7 +362,8 @@ function Header({ history }: { history: any }) {
                       />
                     </TYPE.white>
                   </HideSmall>
-                {'UNI'}
+                )}
+                UNI
               </UNIAmount>
               <CardNoise />
             </UNIWrapper>
@@ -385,5 +385,3 @@ function Header({ history }: { history: any }) {
     </HeaderFrame>
   )
 }
-
-export default withRouter(Header)

src/utils/computeUniCirculation.test.ts

+import { ChainId, JSBI, Token, TokenAmount } from '@uniswap/sdk'
+import { BigNumber } from 'ethers'
+import { ZERO_ADDRESS } from '../constants'
+import { computeUniCirculation } from './computeUniCirculation'
+
+describe('computeUniCirculation', () => {
+  const token = new Token(ChainId.RINKEBY, ZERO_ADDRESS, 18)
+
+  function expandTo18Decimals(num: JSBI | string | number) {
+    return JSBI.multiply(JSBI.BigInt(num), JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(18)))
+  }
+
+  function tokenAmount(num: JSBI | string | number) {
+    return new TokenAmount(token, expandTo18Decimals(num))
+  }
+
+  it('before staking', () => {
+    expect(computeUniCirculation(token, BigNumber.from(0), undefined)).toEqual(tokenAmount(150_000_000))
+    expect(computeUniCirculation(token, BigNumber.from(1600387200), undefined)).toEqual(tokenAmount(150_000_000))
+  })
+  it('mid staking', () => {
+    expect(computeUniCirculation(token, BigNumber.from(1600387200 + 15 * 24 * 60 * 60), undefined)).toEqual(
+      tokenAmount(155_000_000)
+    )
+  })
+  it('after staking and treasury vesting cliff', () => {
+    expect(computeUniCirculation(token, BigNumber.from(1600387200 + 60 * 24 * 60 * 60), undefined)).toEqual(
+      tokenAmount(224_575_341)
+    )
+  })
+  it('subtracts unclaimed uni', () => {
+    expect(computeUniCirculation(token, BigNumber.from(1600387200 + 15 * 24 * 60 * 60), tokenAmount(1000))).toEqual(
+      tokenAmount(154_999_000)
+    )
+  })
+})

src/utils/computeUniCirculation.tsx → src/utils/computeUniCirculation.ts

@@ -38,7 +38,8 @@ function withVesting(before: JSBI, time: BigNumber, amount: number, start: numbe
   if (time.gt(start)) {
     if (time.gte(end)) {
       return JSBI.add(before, JSBI.BigInt(amount))
-    } else if (cliff && time.gte(cliff)) {
+    } else {
+      if ((typeof cliff === 'number' && time.gte(cliff)) || typeof cliff === 'undefined') {
         return JSBI.add(
           before,
           JSBI.divide(
@@ -48,11 +49,16 @@ function withVesting(before: JSBI, time: BigNumber, amount: number, start: numbe
         )
       }
     }
+  }
   return before
 }
 
-export function computeUniCirculation(uni: Token, blockTimestamp: BigNumber): TokenAmount {
-  let wholeAmount = JSBI.BigInt(USERS_AMOUNT) // users, 15%
+export function computeUniCirculation(
+  uni: Token,
+  blockTimestamp: BigNumber,
+  unclaimedUni: TokenAmount | undefined
+): TokenAmount {
+  let wholeAmount = JSBI.BigInt(USERS_AMOUNT)
 
   // staking rewards
   wholeAmount = withVesting(wholeAmount, blockTimestamp, STAKING_REWARDS_AMOUNT, STAKING_GENESIS, STAKING_END)
@@ -101,5 +107,6 @@ export function computeUniCirculation(uni: Token, blockTimestamp: BigNumber): To
   wholeAmount = withVesting(wholeAmount, blockTimestamp, TEAM_YEAR_3_AMOUNT, TREASURY_BEGIN_YEAR_3, TREASURY_END_YEAR_3)
   wholeAmount = withVesting(wholeAmount, blockTimestamp, TEAM_YEAR_4_AMOUNT, TREASURY_BEGIN_YEAR_4, TREASURY_END_YEAR_4)
 
-  return new TokenAmount(uni, JSBI.multiply(wholeAmount, JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(18))))
+  const total = new TokenAmount(uni, JSBI.multiply(wholeAmount, JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(18))))
+  return unclaimedUni ? total.subtract(unclaimedUni) : total
 }