approvals

package.json

@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "dotenv-flow": "^3.2.0",
+    "ethers": "^5.0.8",
     "ganache-core": "^2.11.2"
   },
   "devDependencies": {

yam-www/src/App.tsx

@@ -12,7 +12,6 @@ import ModalsProvider from './contexts/Modals'
 import YamProvider from './contexts/YamProvider'
 import TransactionProvider from './contexts/Transactions'
 
-import About from './views/About'
 import Farms from './views/Farms'
 import Home from './views/Home'
 
@@ -24,14 +23,11 @@ const App: React.FC = () => {
       <Router>
         <Switch>
           <Route path="/" exact>
-            <Home />
+            <Farms />
           </Route>
           <Route path="/farms">
             <Farms />
           </Route>
-          <Route path="/about">
-            <About />
-          </Route>
         </Switch>
       </Router>
     </Providers>

yam-www/src/components/TopBar/TopBar.tsx

@@ -22,7 +22,6 @@ const TopBar: React.FC = () => {
             display: 'flex',
             justifyContent: 'flex-end'
           }}>
-            <TxButton />
             <AccountButton />
           </div>
         </StyledTopBarInner>

yam-www/src/components/TopBar/components/Nav.tsx

@@ -5,9 +5,7 @@ import { NavLink } from 'react-router-dom'
 const Nav: React.FC = () => {
   return (
     <StyledNav>
-      <StyledLink exact activeClassName="active" to="/">Home</StyledLink>
       <StyledLink activeClassName="active" to="/farms">Farms</StyledLink>
-      <StyledLink activeClassName="active" to="/about">About</StyledLink>
     </StyledNav>
   )
 }

yam-www/src/hooks/useAllowance.ts

@@ -3,23 +3,24 @@ import { useCallback, useEffect, useState } from 'react'
 import BigNumber from 'bignumber.js'
 import { useWallet } from 'use-wallet'
 import { provider } from 'web3-core'
+import { Contract } from "web3-eth-contract"
 
 import { getAllowance } from '../utils/erc20'
 
-const useAllowance = (tokenAddress: string, contractAddress: string) => {
+const useAllowance = (tokenContract: Contract, poolContract: Contract) => {
   const [allowance, setAllowance] = useState(new BigNumber(0))
-  const { account, ethereum }: { account: string, ethereum: provider } = useWallet()
+  const { account }: { account: string, ethereum: provider } = useWallet()
 
   const fetchAllowance = useCallback(async () => {
-    const allowance = await getAllowance(ethereum, tokenAddress, account)
+    const allowance = await getAllowance(tokenContract, poolContract, account)
     setAllowance(new BigNumber(allowance))
-  }, [account, ethereum, tokenAddress])
+  }, [account, poolContract, tokenContract])
 
   useEffect(() => {
-    if (account && ethereum) {
+    if (account && poolContract && tokenContract) {
       fetchAllowance()
     }
-  }, [account, ethereum, setAllowance, tokenAddress])
+  }, [account, poolContract, tokenContract])
 
   return allowance
 }

yam-www/src/hooks/useApprove.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'react'
+
+import { useWallet } from 'use-wallet'
+import { provider } from 'web3-core'
+import { Contract } from "web3-eth-contract"
+
+import { approve } from '../yamUtils'
+
+const useApprove = (tokenContract: Contract, poolContract: Contract) => {
+  const { account }: { account: string, ethereum: provider } = useWallet()
+
+  const handleApprove = useCallback(async () => {
+    const txHash = await approve(tokenContract, poolContract, account)
+    console.log(txHash)
+  }, [tokenContract, poolContract])
+
+  return { onApprove: handleApprove }
+}
+
+export default useApprove

yam-www/src/utils/erc20.ts

@@ -1,20 +1,20 @@
 import Web3 from 'web3'
 import { provider } from 'web3-core'
 import { AbiItem } from 'web3-utils'
-import { Contract } from 'web3-eth-contract'
 
 import ERC20ABI from '../constants/abi/ERC20.json'
+import { Contract } from "web3-eth-contract"
 
 export const getContract = (provider: provider, address: string) => {
   const web3 = new Web3(provider)
   const contract = new web3.eth.Contract(ERC20ABI.abi as unknown as AbiItem, address)
   return contract
 }
 
-export const getAllowance = async (provider: provider, tokenAddress: string, userAddress: string): Promise<string> => {
-  const tokenContract = getContract(provider, tokenAddress)
+export const getAllowance = async (tokenContract: Contract, poolContract: Contract, account: string): Promise<string> => {
   try {
-    const allowance: string = await tokenContract.methods.allowance(userAddress).call()
+    const allowance: string = await tokenContract.methods.allowance(account, poolContract.options.address).call()
+    console.log(allowance)
     return allowance
   } catch (e) {
     return '0'

yam-www/src/views/Farm/Farm.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useEffect } from 'react'
+import React, { useMemo } from 'react'
 import styled from 'styled-components'
 
-import BigNumber from 'bignumber.js'
 import { useParams } from 'react-router-dom'
 import { useWallet } from 'use-wallet'
-
+import { provider } from 'web3-core'
 import Button from '../../components/Button'
 import Card from '../../components/Card'
 import CardContent from '../../components/CardContent'
@@ -17,14 +16,15 @@ import PageHeader from '../../components/PageHeader'
 import { AddIcon, RemoveIcon } from '../../components/icons'
 
 import useAllowance from '../../hooks/useAllowance'
+import useApprove from '../../hooks/useApprove'
 import useEarnings from '../../hooks/useEarnings'
 import useFarm from '../../hooks/useFarm'
 import useModal from '../../hooks/useModal'
 import useStakedBalance from '../../hooks/useStakedBalance'
 import useTokenBalance from '../../hooks/useTokenBalance'
-import useYam from '../../hooks/useYam'
 
 import { getDisplayBalance } from '../../utils/formatBalance'
+import { getContract } from '../../utils/erc20'
 
 import DepositModal from './components/DepositModal'
 import WithdrawModal from './components/WithdrawModal'
@@ -47,22 +47,22 @@ const Farm: React.FC = () => {
     icon: ''
   }
 
-  const allowance = useAllowance(depositTokenAddress, contract ? contract.options.address : '')
+  const { ethereum } = useWallet()
+
+  const tokenContract = useMemo(() => {
+    return getContract(ethereum as provider, depositTokenAddress)
+  }, [ethereum, depositTokenAddress])
+
+  const allowance = useAllowance(tokenContract, contract)
+  const { onApprove } = useApprove(tokenContract, contract)
   const earnings = useEarnings(contract)
   const tokenBalance = useTokenBalance(depositTokenAddress)
   const stakedBalance = useStakedBalance(contract)
   const [onPresentDeposit] = useModal(<DepositModal max={tokenBalance} tokenName={depositToken} />)
   const [onPresentWithdraw] = useModal(<WithdrawModal max={stakedBalance} tokenName={depositToken} />)
 
-  const { account } = useWallet()
-  const yam = useYam()
-
-  useEffect(() => {
-
-  }, [contract, account, yam])
-
   return (
-    <Page>
+    <>
       <PageHeader
         icon={icon}
         subtitle={`Deposit ${depositToken} and earn ${earnToken}`}
@@ -81,7 +81,7 @@ const Farm: React.FC = () => {
                   </StyledCardHeader>
                   <StyledCardActions>
                     {!allowance.toNumber() ? (
-                      <Button text={`Approve ${depositToken}`} />
+                      <Button onClick={onApprove} text={`Approve ${depositToken}`} />
                     ) : (
                       <>
                         <IconButton onClick={onPresentWithdraw}>
@@ -119,7 +119,7 @@ const Farm: React.FC = () => {
           </StyledCardWrapper>
         </StyledCardsWrapper>
       </StyledFarm>
-    </Page>
+    </>
   )
 }
 

yam-www/src/views/Farms/Farms.tsx

@@ -4,8 +4,11 @@ import {
   Switch,
   useRouteMatch,
 } from 'react-router-dom'
+import { useWallet } from 'use-wallet'
 
 import farmer from '../../assets/img/farmer.png'
+
+import Button from '../../components/Button'
 import Page from '../../components/Page'
 import PageHeader from '../../components/PageHeader'
 
@@ -15,21 +18,38 @@ import FarmCards from './components/FarmCards'
 
 const Farms: React.FC = () => {
   const { path } = useRouteMatch()
+  const { account, connect } = useWallet()
   return (
     <Switch>
-      <Route exact path={path}>
-        <Page>
-          <PageHeader
-            icon={<img src={farmer} height="96" />}
-            subtitle="Earn YAM tokens by providing liquidity."
-            title="Select a farm."
+      <Page>
+      {!!account ? (
+        <>
+          <Route exact path={path}>
+              <PageHeader
+                icon={<img src={farmer} height="96" />}
+                subtitle="Earn YAM tokens by providing liquidity."
+                title="Select a farm."
+              />
+              <FarmCards />
+          </Route>
+          <Route path={`${path}/:farmId`}>
+            <Farm />
+          </Route>
+        </>
+      ) : (
+        <div style={{
+          alignItems: 'center',
+          display: 'flex',
+          flex: 1,
+          justifyContent: 'center',
+        }}>
+          <Button
+            onClick={() => connect('injected')}
+            text="Unlock Wallet"
           />
-          <FarmCards />
-        </Page>
-      </Route>
-      <Route path={`${path}/:farmId`}>
-        <Farm />
-      </Route>
+        </div>
+      )}
+      </Page>
     </Switch>
   )
 }

yam-www/src/yamUtils/index.js

@@ -1,3 +1,15 @@
+import {ethers} from 'ethers'
+
+export const approve = async (tokenContract, poolContract, account) => {
+  return tokenContract.methods
+    .approve(poolContract.options.address, ethers.constants.MaxUint256)
+    .send({ from: account, gas: 80000 })
+    .on('transactionHash', (tx) => {
+      console.log(tx)
+      return tx.transactionHash
+    })
+}
+
 export const getPoolContracts = async (yam) => {
   const pools = Object.keys(yam.contracts)
     .filter(c => c.indexOf('_pool') !== -1)