Pools user redux (pancakeswap#206)

* feat: Add user data to redux

* feat: Add a refresh context

* chore: Clean hooks

Author: RabbitDoge

.eslintrc

@@ -16,6 +16,7 @@
     "no-console": ["warn", { "allow": ["info", "warn", "error"] }],
     "no-plusplus": 0,
     "prefer-destructuring": ["warn", { "object": true, "array": false }],
+    "no-underscore-dangle": 0,
     // Start temporary rules
     // These rules are here just to keep the lint error to 0 during the migration to the new rule set
     // They need to be removed and fixed as soon as possible

src/App.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import { useWallet } from 'use-wallet'
 import { ResetCSS, Footer } from '@pancakeswap-libs/uikit'
-import useStateInit from 'state/hooks'
+import { useFetchPublicData } from 'state/hooks'
 import GlobalStyle from './style/Global'
 import Menu from './components/Menu'
 import Farms from './views/Farms'
@@ -24,7 +24,7 @@ const App: React.FC = () => {
     }
   }, [account, connect])
 
-  useStateInit()
+  useFetchPublicData()
 
   return (
     <Router>

src/Providers.tsx

@@ -7,6 +7,7 @@ import SushiProvider from 'contexts/SushiProvider'
 import { LanguageContextProvider } from 'contexts/Localisation/languageContext'
 import { ThemeContextProvider } from 'contexts/ThemeContext'
 import { BlockContextProvider } from 'contexts/BlockContext'
+import { RefreshContextProvider } from 'contexts/RefreshContext'
 import store from 'state'
 
 const Providers: React.FC = ({ children }) => {
@@ -24,7 +25,9 @@ const Providers: React.FC = ({ children }) => {
           >
             <BlockContextProvider>
               <SushiProvider>
-                <ModalProvider>{children}</ModalProvider>
+                <RefreshContextProvider>
+                  <ModalProvider>{children}</ModalProvider>
+                </RefreshContextProvider>
               </SushiProvider>
             </BlockContextProvider>
           </UseWalletProvider>

src/contexts/BlockContext.tsx

@@ -15,7 +15,7 @@ const BlockContextProvider = ({ children }) => {
         previousBlock.current = blockNumber
         setBlock(blockNumber)
       }
-    }, 5000)
+    }, 6000)
 
     return () => clearInterval(interval)
   }, [])

src/contexts/RefreshContext.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react'
+
+const FAST_INTERVAL = 10000
+const SLOW_INTERVAL = 60000
+
+const RefreshContext = React.createContext({ slow: 0, fast: 0 })
+
+// This context maintain 2 counters that can be used as a dependencies on other hooks to force a periodic refresh
+const RefreshContextProvider = ({ children }) => {
+  const [slow, setSlow] = useState(0)
+  const [fast, setFast] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      setFast((prev) => prev + 1)
+    }, FAST_INTERVAL)
+    return () => clearInterval(interval)
+  }, [])
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      setSlow((prev) => prev + 1)
+    }, SLOW_INTERVAL)
+    return () => clearInterval(interval)
+  }, [])
+
+  return <RefreshContext.Provider value={{ slow, fast }}>{children}</RefreshContext.Provider>
+}
+
+export { RefreshContext, RefreshContextProvider }

src/hooks/rework/useAllowance.ts

@@ -4,17 +4,17 @@ import multicall from 'utils/multicall'
 import masterChefABI from 'sushi/lib/abi/masterchef.json'
 import addresses from 'sushi/lib/constants/contracts'
 import { farmsConfig } from 'sushi/lib/constants'
-import useBlock from './useBlock'
+import useRefresh from './useRefresh'
 
 const useAllEarnings = () => {
   const [balances, setBalance] = useState([])
   const { account }: { account: string } = useWallet()
-  const block = useBlock()
+  const { fastRefresh } = useRefresh()
 
   useEffect(() => {
     const fetchAllBalances = async () => {
       const calls = farmsConfig.map((farm) => ({
-        address: addresses.masterChef[56],
+        address: addresses.masterChef[process.env.REACT_APP_CHAIN_ID],
         name: 'pendingCake',
         params: [farm.pid, account],
       }))
@@ -27,7 +27,7 @@ const useAllEarnings = () => {
     if (account) {
       fetchAllBalances()
     }
-  }, [account, block])
+  }, [account, fastRefresh])
 
   return balances
 }

src/hooks/rework/useApprove.ts

@@ -4,50 +4,49 @@ import { useWallet } from 'use-wallet'
 import { Contract } from 'web3-eth-contract'
 import useSushi from './useSushi'
 import { getAllowance } from '../utils/erc20'
-import { getSushiContract, getSousChefContract } from '../sushi/utils'
+import { getSushiContract } from '../sushi/utils'
 import { getLotteryContract } from '../sushi/lotteryUtils'
 
-export const useSousAllowance = (lpContract: Contract, sousId) => {
+// Retrieve lottery allowance
+export const useLotteryAllowance = () => {
   const [allowance, setAllowance] = useState(new BigNumber(0))
   const { account }: { account: string } = useWallet()
   const sushi = useSushi()
-  const sousChefContract = getSousChefContract(sushi, sousId)
+  const lotteryContract = getLotteryContract(sushi)
+  const cakeContract = getSushiContract(sushi)
 
   useEffect(() => {
     const fetchAllowance = async () => {
-      const res = await getAllowance(lpContract, sousChefContract, account)
+      const res = await getAllowance(cakeContract, lotteryContract, account)
       setAllowance(new BigNumber(res))
     }
 
-    if (account && sousChefContract && lpContract) {
+    if (account && cakeContract && cakeContract) {
       fetchAllowance()
     }
     const refreshInterval = setInterval(fetchAllowance, 10000)
     return () => clearInterval(refreshInterval)
-  }, [account, sousChefContract, lpContract])
+  }, [account, cakeContract, lotteryContract])
 
   return allowance
 }
 
-export const useLotteryAllowance = () => {
-  const [allowance, setAllowance] = useState(new BigNumber(0))
+// Retrieve IFO allowance
+export const useIfoAllowance = (tokenContract: Contract, spenderAddress: string, dependency?: any) => {
   const { account }: { account: string } = useWallet()
-  const sushi = useSushi()
-  const lotteryContract = getLotteryContract(sushi)
-  const cakeContract = getSushiContract(sushi)
+  const [allowance, setAllowance] = useState(null)
 
   useEffect(() => {
-    const fetchAllowance = async () => {
-      const res = await getAllowance(cakeContract, lotteryContract, account)
-      setAllowance(new BigNumber(res))
-    }
-
-    if (account && cakeContract && cakeContract) {
-      fetchAllowance()
+    const fetch = async () => {
+      try {
+        const res = await tokenContract.methods.allowance(account, spenderAddress).call()
+        setAllowance(new BigNumber(res))
+      } catch (e) {
+        setAllowance(null)
+      }
     }
-    const refreshInterval = setInterval(fetchAllowance, 10000)
-    return () => clearInterval(refreshInterval)
-  }, [account, cakeContract, lotteryContract])
+    fetch()
+  }, [account, spenderAddress, tokenContract, dependency])
 
   return allowance
 }

src/hooks/rework/useBnbBalance.ts

@@ -1,44 +1,54 @@
 import { useCallback } from 'react'
 import { useWallet } from 'use-wallet'
 import { Contract } from 'web3-eth-contract'
+import { ethers } from 'ethers'
+import { useDispatch } from 'react-redux'
+import { updateUserAllowance, fetchFarmUserDataAsync } from 'state/actions'
+import { getSushiContract, approve, getMasterChefContract, getSousChefContract } from 'sushi/utils'
+import { getLotteryContract } from 'sushi/lotteryUtils'
 import useSushi from './useSushi'
-import { getSushiContract, approve, getMasterChefContract, getSousChefContract } from '../sushi/utils'
-import { getLotteryContract } from '../sushi/lotteryUtils'
 
-const useApprove = (lpContract: Contract) => {
+// Approve a Farm
+export const useApprove = (lpContract: Contract, pid: number) => {
+  const dispatch = useDispatch()
   const { account }: { account: string } = useWallet()
   const sushi = useSushi()
   const masterChefContract = getMasterChefContract(sushi)
 
   const handleApprove = useCallback(async () => {
     try {
       const tx = await approve(lpContract, masterChefContract, account)
+      dispatch(fetchFarmUserDataAsync(pid, account))
       return tx
     } catch (e) {
       return false
     }
-  }, [account, lpContract, masterChefContract])
+  }, [account, dispatch, lpContract, masterChefContract, pid])
 
   return { onApprove: handleApprove }
 }
 
+// Approve a Pool
 export const useSousApprove = (lpContract: Contract, sousId) => {
+  const dispatch = useDispatch()
   const { account }: { account: string } = useWallet()
   const sushi = useSushi()
   const sousChefContract = getSousChefContract(sushi, sousId)
 
   const handleApprove = useCallback(async () => {
     try {
       const tx = await approve(lpContract, sousChefContract, account)
+      dispatch(updateUserAllowance(sousId, account))
       return tx
     } catch (e) {
       return false
     }
-  }, [account, lpContract, sousChefContract])
+  }, [account, dispatch, lpContract, sousChefContract, sousId])
 
   return { onApprove: handleApprove }
 }
 
+// Approve the lottery
 export const useLotteryApprove = () => {
   const { account }: { account: string } = useWallet()
   const sushi = useSushi()
@@ -57,4 +67,19 @@ export const useLotteryApprove = () => {
   return { onApprove: handleApprove }
 }
 
-export default useApprove
+// Approve an IFO
+export const useIfoApprove = (tokenContract: Contract, spenderAddress: string) => {
+  const { account } = useWallet()
+  const onApprove = useCallback(async () => {
+    try {
+      const tx = await tokenContract.methods
+        .approve(spenderAddress, ethers.constants.MaxUint256)
+        .send({ from: account })
+      return tx
+    } catch {
+      return false
+    }
+  }, [account, spenderAddress, tokenContract])
+
+  return onApprove
+}

src/hooks/useAllEarnings.ts

@@ -1,10 +1,8 @@
 import { useContext } from 'react'
-
 import { BlockContext } from 'contexts/BlockContext'
 
 const useBlock = () => {
   const block: number = useContext(BlockContext)
-
   return block
 }
 

src/hooks/useAllowance.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { AbiItem } from 'web3-utils'
 import { ContractOptions } from 'web3-eth-contract'
-import useWeb3 from 'hooks/rework/useWeb3'
+import useWeb3 from 'hooks/useWeb3'
 import ifo from 'sushi/lib/abi/ifo.json'
 import erc20 from 'sushi/lib/abi/erc20.json'
 import rabbitmintingfarm from 'sushi/lib/abi/rabbitmintingfarm.json'