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,37 +67,41 @@ 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 />
-        <CardSection gap="sm">
-          <AutoColumn gap="md" justify="center">
-            <UniTokenAnimated width="48px" src={tokenLogo} />{' '}
-            <TYPE.white fontSize={48} fontWeight={600} color="white">
-              {total?.toFixed(2, { groupSeparator: ',' })}
-            </TYPE.white>
-          </AutoColumn>
-          <AutoColumn gap="md">
-            <RowBetween>
-              <TYPE.white color="white">Balance:</TYPE.white>
-              <TYPE.white color="white">{uniBalance?.toFixed(2, { groupSeparator: ',' })}</TYPE.white>
-            </RowBetween>
-            <RowBetween>
-              <TYPE.white color="white">Unclaimed:</TYPE.white>
-              <TYPE.white color="white">
-                {uniUnHarvested?.toFixed(4, { groupSeparator: ',' })}{' '}
-                {uniUnHarvested && (
-                  <StyledInternalLink onClick={() => setShowUniBalanceModal(false)} to="/uni">
-                    (claim)
-                  </StyledInternalLink>
-                )}
-              </TYPE.white>
-            </RowBetween>
-          </AutoColumn>
-        </CardSection>
-        <Break />
+        {account && (
+          <>
+            <CardSection gap="sm">
+              <AutoColumn gap="md" justify="center">
+                <UniTokenAnimated width="48px" src={tokenLogo} />{' '}
+                <TYPE.white fontSize={48} fontWeight={600} color="white">
+                  {total?.toFixed(2, { groupSeparator: ',' })}
+                </TYPE.white>
+              </AutoColumn>
+              <AutoColumn gap="md">
+                <RowBetween>
+                  <TYPE.white color="white">Balance:</TYPE.white>
+                  <TYPE.white color="white">{uniBalance?.toFixed(2, { groupSeparator: ',' })}</TYPE.white>
+                </RowBetween>
+                <RowBetween>
+                  <TYPE.white color="white">Unclaimed:</TYPE.white>
+                  <TYPE.white color="white">
+                    {uniToClaim?.toFixed(4, { groupSeparator: ',' })}{' '}
+                    {uniToClaim && uniToClaim.greaterThan('0') && (
+                      <StyledInternalLink onClick={() => setShowUniBalanceModal(false)} to="/uni">
+                        (claim)
+                      </StyledInternalLink>
+                    )}
+                  </TYPE.white>
+                </RowBetween>
+              </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,26 +342,28 @@ 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' }}>
-                <HideSmall>
-                  <TYPE.white
-                    style={{
-                      paddingRight: '.4rem'
-                    }}
-                  >
-                    <CountUp
-                      key={countUpValue}
-                      isCounting
-                      start={parseFloat(countUpValuePrevious)}
-                      end={parseFloat(countUpValue)}
-                      thousandsSeparator={','}
-                      duration={1}
-                    />
-                  </TYPE.white>
-                </HideSmall>
-                {'UNI'}
+                {account && (
+                  <HideSmall>
+                    <TYPE.white
+                      style={{
+                        paddingRight: '.4rem'
+                      }}
+                    >
+                      <CountUp
+                        key={countUpValue}
+                        isCounting
+                        start={parseFloat(countUpValuePrevious)}
+                        end={parseFloat(countUpValue)}
+                        thousandsSeparator={','}
+                        duration={1}
+                      />
+                    </TYPE.white>
+                  </HideSmall>
+                )}
+                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,21 +38,27 @@ 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)) {
-      return JSBI.add(
-        before,
-        JSBI.divide(
-          JSBI.multiply(JSBI.BigInt(amount), JSBI.BigInt(time.sub(start).toString())),
-          JSBI.subtract(JSBI.BigInt(end), JSBI.BigInt(start))
+    } else {
+      if ((typeof cliff === 'number' && time.gte(cliff)) || typeof cliff === 'undefined') {
+        return JSBI.add(
+          before,
+          JSBI.divide(
+            JSBI.multiply(JSBI.BigInt(amount), JSBI.BigInt(time.sub(start).toString())),
+            JSBI.subtract(JSBI.BigInt(end), JSBI.BigInt(start))
+          )
         )
-      )
+      }
     }
   }
   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
 }