Merge pull request #446 from dynamic-amm/refactor-reward-tokens

fix: Rewards In Vesting Not Show After Reloading

src/hooks/useVesting.tsx

@@ -1,23 +1,18 @@
-import { BigNumber } from '@ethersproject/bignumber'
-import { KNC, ZERO_ADDRESS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import { useCallback, useEffect, useState } from 'react'
 import { useBlockNumber } from 'state/application/hooks'
 import { useRewardLockerContract } from './useContract'
 import { useTransactionAdder } from '../state/transactions/hooks'
 import { useRewardTokensFullInfo } from 'utils/dmm'
-import { ChainId, Token, WETH } from 'libs/sdk/src'
-import { useRewardTokens } from 'state/farms/hooks'
-import { useAllTokens } from './Tokens'
-import { useActiveListUrls } from 'state/lists/hooks'
 
-const useVesting = (rewardTokens: Token[]) => {
+const useVesting = () => {
   // SLP is usually 18, KMP is 6
   const addTransaction = useTransactionAdder()
   const [schedules, setSchedules] = useState([])
   const { account, chainId } = useActiveWeb3React()
   const currentBlockNumber = useBlockNumber()
   const lockerContract = useRewardLockerContract()
+  const rewardTokens = useRewardTokensFullInfo()
 
   const fetchSchedules = useCallback(async () => {
     const getSchedules = async (address: string): Promise<any> => {

src/index.tsx

@@ -13,7 +13,6 @@ import ListsUpdater from './state/lists/updater'
 import MulticallUpdater from './state/multicall/updater'
 import TransactionUpdater from './state/transactions/updater'
 import UserUpdater from './state/user/updater'
-import FarmUpdater from './state/farms/updater'
 import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from './theme'
 import getLibrary from './utils/getLibrary'
 import SEO from './components/SEO'
@@ -32,7 +31,6 @@ function Updaters() {
       <ApplicationUpdater />
       <TransactionUpdater />
       <MulticallUpdater />
-      <FarmUpdater />
     </>
   )
 }

src/pages/Farms/index.tsx

@@ -11,7 +11,7 @@ import { useFarmsData } from 'state/farms/hooks'
 import { useActiveWeb3React } from 'hooks'
 import { BigNumber } from '@ethersproject/bignumber'
 import { ExternalLink } from 'theme'
-import { useBlockNumber, useFarmHistoryModalToggle, useKNCPrice } from 'state/application/hooks'
+import { useBlockNumber, useFarmHistoryModalToggle } from 'state/application/hooks'
 import { AVERAGE_BLOCK_TIME_IN_SECSS, FAIRLAUNCH_ADDRESSES } from '../../constants'
 import { getFormattedTimeFromSecond } from 'utils/formatTime'
 import Loader from 'components/Loader'
@@ -40,8 +40,6 @@ import {
   RewardToken,
   Plus,
   RewardUSD,
-  RemainingTimeContainer,
-  EndInTitle,
   HistoryButton
 } from './styleds'
 import { formattedNum, getTokenSymbol } from 'utils'
@@ -52,18 +50,14 @@ import RainMakerMobileBanner from '../../assets/images/rain-maker-mobile.png'
 import FarmHistoryModal from 'components/FarmHistoryModal'
 import InfoHelper from 'components/InfoHelper'
 import { Reward } from 'state/farms/types'
-import { useFarmRewards, useFarmRewardsUSD, useRewardTokensFullInfo } from 'utils/dmm'
+import { useFarmRewards, useFarmRewardsUSD } from 'utils/dmm'
 import { useFairLaunchContracts } from 'hooks/useContract'
 import useFairLaunch from 'hooks/useFairLaunch'
 
-const FARM_ENDED = 'Ended'
-
 const Farms = () => {
   const { chainId } = useActiveWeb3React()
   const blockNumber = useBlockNumber()
-  const kncPrice = useKNCPrice()
   const lgBreakpoint = useMedia('(min-width: 992px)')
-  const xxlBreakpoint = useMedia('(min-width: 1200px)')
   const { loading, data: farms } = useFarmsData()
   const [activeTab, setActiveTab] = useState(0)
   const [pendingTx, setPendingTx] = useState(false)
@@ -140,8 +134,6 @@ const Farms = () => {
     return canHarvest
   }
 
-  const rewardTokens = useRewardTokensFullInfo()
-
   return (
     <>
       <PageWrapper>
@@ -244,7 +236,7 @@ const Farms = () => {
             </Panel>
           </>
         ) : (
-          <Vesting rewardTokens={rewardTokens} />
+          <Vesting />
         )}
       </PageWrapper>
       <FarmHistoryModal farms={farmsList} />

src/pages/Farms/styleds.tsx

@@ -241,18 +241,6 @@ export const RewardUSD = styled.span`
   color: ${({ theme }) => theme.text11};
 `
 
-export const RemainingTimeContainer = styled.div`
-  display: flex;
-  font-size: 16px;
-  margin-bottom: 20px;
-`
-
-export const EndInTitle = styled.div`
-  margin-right: 12px;
-  font-size: 16px;
-  font-weight: 500;
-`
-
 export const HistoryButton = styled.div`
   margin-left: auto;
   cursor: pointer;

src/pages/Farms/vesting.tsx

@@ -51,18 +51,18 @@ const Seperator = styled.div`
   border: 1px solid #404b51;
 `
 
-const Vesting = ({ rewardTokens }: { rewardTokens: Token[] }) => {
+const fixedFormatting = (value: BigNumber, decimals: number) => {
+  const res = new Fraction(value.toString(), JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(decimals))).toFixed(6)
+  return parseFloat(res).toString()
+}
+
+const Vesting = () => {
   const above1400 = useMedia('(min-width: 1400px)') // Extra large screen
   const theme = useContext(ThemeContext)
-  const kncPrice = useKNCPrice()
 
-  const toUSD = useCallback(
-    value => kncPrice && value && `$${(parseFloat(kncPrice) * parseFloat(fixedFormatting(value, 18))).toFixed(2)}`,
-    [kncPrice]
-  )
   const { account, chainId } = useActiveWeb3React()
   const currentBlockNumber = useBlockNumber()
-  const { schedules } = useVesting(rewardTokens)
+  const { schedules, vestMultipleTokensAtIndices } = useVesting()
 
   const info = schedules.reduce<{
     [key: string]: {
@@ -152,7 +152,6 @@ const Vesting = ({ rewardTokens }: { rewardTokens: Token[] }) => {
   )
 
   const [pendingTx, setPendingTx] = useState(false)
-  const { vestAtIndex, vestMultipleTokensAtIndices } = useVesting(rewardTokens)
   const onClaimAll = async () => {
     if (!chainId || !account) return
     setPendingTx(true)
@@ -305,26 +304,21 @@ const Vesting = ({ rewardTokens }: { rewardTokens: Token[] }) => {
           (s, index) =>
             !BigNumber.from(s[2])
               .sub(BigNumber.from(s[3]))
-              .isZero() && <Schedule schedule={s} key={index} rewardTokens={rewardTokens} />
+              .isZero() && <Schedule schedule={s} key={index} />
         )}
 
         {schedules.map(
           (s, index) =>
             BigNumber.from(s[2])
               .sub(BigNumber.from(s[3]))
-              .isZero() && <Schedule schedule={s} key={index} rewardTokens={rewardTokens} />
+              .isZero() && <Schedule schedule={s} key={index} />
         )}
       </ExpandedContent>
     </>
   )
 }
 
-const fixedFormatting = (value: BigNumber, decimals: number) => {
-  const res = new Fraction(value.toString(), JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(decimals))).toFixed(6)
-  return parseFloat(res).toString()
-}
-
-const Schedule = ({ schedule, rewardTokens }: { schedule: any; rewardTokens: Token[] }) => {
+const Schedule = ({ schedule }: { schedule: any }) => {
   const { account, chainId } = useActiveWeb3React()
   const above1400 = useMedia('(min-width: 1400px)') // Extra large screen
   const theme = useContext(ThemeContext)
@@ -383,7 +377,7 @@ const Schedule = ({ schedule, rewardTokens }: { schedule: any; rewardTokens: Tok
     .mul(BigNumber.from(100).sub(vestedAndVestablePercent))
     .div(100)
   const [pendingTx, setPendingTx] = useState(false)
-  const { vestAtIndex } = useVesting(rewardTokens)
+  const { vestAtIndex } = useVesting()
   const onVest = async () => {
     if (!chainId || !account) return
     setPendingTx(true)

src/utils/dmm.ts

@@ -1,29 +1,12 @@
+import { useMemo } from 'react'
 import { BigNumber } from '@ethersproject/bignumber'
 import { Fraction, JSBI, Price, Pair, Token, Currency, WETH } from 'libs/sdk/src'
 import { ZERO, ONE, ChainId } from 'libs/sdk/src/constants'
 import { UserLiquidityPosition } from 'state/pools/hooks'
 import { formattedNum } from 'utils'
-
-import {
-  Currency as CurrencySUSHI,
-  TokenAmount as TokenAmountSUSHI,
-  Token as TokenSUSHI,
-  ChainId as ChainIdSUSHI
-} from '@sushiswap/sdk'
-
-import {
-  Currency as CurrencyUNI,
-  TokenAmount as TokenAmountUNI,
-  Token as TokenUNI,
-  ChainId as ChainIdUNI
-} from '@uniswap/sdk'
-
-import {
-  Currency as CurrencyDMM,
-  Token as TokenDMM,
-  TokenAmount as TokenAmountDMM,
-  ChainId as ChainIdDMM
-} from 'libs/sdk/src'
+import { TokenAmount as TokenAmountSUSHI, Token as TokenSUSHI, ChainId as ChainIdSUSHI } from '@sushiswap/sdk'
+import { TokenAmount as TokenAmountUNI, Token as TokenUNI, ChainId as ChainIdUNI } from '@uniswap/sdk'
+import { Token as TokenDMM, TokenAmount as TokenAmountDMM, ChainId as ChainIdDMM } from 'libs/sdk/src'
 import { BLOCKS_PER_YEAR, FARMING_POOLS, KNC, ZERO_ADDRESS } from '../constants'
 import { useActiveWeb3React } from 'hooks'
 import { Farm, Reward, RewardPerBlock } from 'state/farms/types'
@@ -429,12 +412,12 @@ export function useFarmRewardsUSD(rewards?: Reward[]): number {
   return rewardUSD
 }
 
-export function useFarmRewardPerBlocks(farms?: Farm[]): Reward[] {
+export function useFarmRewardPerBlocks(farms?: Farm[]): RewardPerBlock[] {
   if (!farms) {
     return []
   }
 
-  const initialRewardPerBlocks: Reward[] = []
+  const initialRewardPerBlocks: RewardPerBlock[] = []
 
   const farmRewardPerBlocks = farms.reduce((total, farm) => {
     if (farm.rewardPerBlocks) {
@@ -469,13 +452,19 @@ export function useRewardTokensFullInfo(): Token[] {
       : chainId && [43113, 43114].includes(chainId)
       ? 'AVAX'
       : 'ETH'
-  return !!rewardTokens
-    ? rewardTokens.map(address =>
-        address.toLowerCase() === ZERO_ADDRESS.toLowerCase()
-          ? new Token(chainId as ChainId, ZERO_ADDRESS.toLowerCase(), 18, nativeName, nativeName)
-          : allTokens[address]
-      )
-    : []
+
+  return useMemo(
+    () =>
+      !!rewardTokens
+        ? rewardTokens.map(address =>
+            address.toLowerCase() === ZERO_ADDRESS.toLowerCase()
+              ? new Token(chainId as ChainId, ZERO_ADDRESS.toLowerCase(), 18, nativeName, nativeName)
+              : allTokens[address]
+          )
+        : [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [chainId, nativeName, JSON.stringify(rewardTokens)]
+  )
 }
 
 export function checkIsFarmingPool(address: string, chainId?: ChainId): boolean {