approval closes #223

src/assets/css/spartan-icons.css

@@ -250,6 +250,10 @@
 
 
 /* Lock */
+.icon-lock.icon-light {
+    background-image: url('/src/assets/icons/icon-lock-light.svg#light');
+}
+
 .icon-lock.icon-dark {
     background-image: url('/src/assets/icons/icon-lock-dark.svg#dark');
 }

src/components/Approval/Approval.js

@@ -1,9 +1,14 @@
 import React, { useEffect } from 'react'
-import ReactBSAlert from 'react-bootstrap-sweetalert'
 import { useDispatch } from 'react-redux'
 import { Button } from 'reactstrap'
-import { getAllowance, getApproval, useWeb3 } from '../../store/web3'
+import {
+  getAllowance1,
+  getAllowance2,
+  getApproval,
+  useWeb3,
+} from '../../store/web3'
 import { BN } from '../../utils/bigNumber'
+
 // import { usePoolFactory } from '../../store/poolFactory'
 
 /**
@@ -13,96 +18,105 @@ import { BN } from '../../utils/bigNumber'
  * @param {address} walletAddress
  * @param {address} contractAddress
  * @param {string} txnAmount
+ * @param {string} assetNumber (1 or 2)
  */
 const Approval = ({
   tokenAddress,
   symbol,
   walletAddress,
   contractAddress,
   txnAmount,
+  assetNumber,
 }) => {
   const dispatch = useDispatch()
-  const [alert, setAlert] = React.useState(null)
   const web3 = useWeb3()
 
-  useEffect(() => {
-    const checkAllowance = () => {
-      if (tokenAddress && walletAddress && contractAddress) {
-        dispatch(getAllowance(tokenAddress, walletAddress, contractAddress))
+  const getAllowance = () => {
+    if (tokenAddress && walletAddress && contractAddress) {
+      if (assetNumber === '1') {
+        dispatch(getAllowance1(tokenAddress, walletAddress, contractAddress))
+      } else if (assetNumber === '2') {
+        dispatch(getAllowance2(tokenAddress, walletAddress, contractAddress))
       }
     }
-    checkAllowance()
-  }, [contractAddress, tokenAddress, walletAddress, dispatch, web3.approval])
-
-  const hideAlert = () => {
-    setAlert(null)
   }
 
-  const successDelete = () => {
-    dispatch(getApproval(tokenAddress, contractAddress))
-    setAlert(
-      <ReactBSAlert
-        success
-        style={{ display: 'block', marginTop: '-100px' }}
-        title="Transaction successfully!"
-        onConfirm={() => hideAlert()}
-        onCancel={() => hideAlert()}
-        confirmBtnBsStyle="info"
-        btnSize=""
-      >
-        0xce2fd7544e0b2cc94692d4a704debef7bcb61328 <br />
-        <br />
-        Copy
-        <span data-notify="icon" className="bd-icons icon-single-copy-04" />
-      </ReactBSAlert>,
-    )
+  const handleApproval = async () => {
+    await dispatch(getApproval(tokenAddress, contractAddress))
+    getAllowance()
   }
 
-  const warningWithConfirmMessage = () => {
-    setAlert(
-      <ReactBSAlert
-        warning
-        style={{ display: 'block', marginTop: '-100px' }}
-        title="Are you sure?"
-        onConfirm={() => successDelete()}
-        onCancel={() => hideAlert()}
-        confirmBtnBsStyle="primary"
-        cancelBtnBsStyle="danger"
-        confirmBtnText="Approve"
-        cancelBtnText="Cancel"
-        showCancel
-        btnSize=""
-      >
-        Proceed to approve {symbol}
-      </ReactBSAlert>,
-    )
-  }
+  useEffect(() => {
+    getAllowance()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    tokenAddress,
+    symbol,
+    walletAddress,
+    contractAddress,
+    txnAmount,
+    assetNumber,
+    web3.approval,
+  ])
 
   return (
     <>
-      {BN(web3.allowance._hex).comparedTo(txnAmount) === -1 && (
+      {assetNumber === '1' && (
         <>
-          {alert}
-          <Button
-            className="btn-fill w-100 h-100"
-            color="default"
-            onClick={warningWithConfirmMessage}
-          >
-            <i className="icon-extra-small icon-lock icon-dark align-middle" />
-            <i className="icon-extra-small icon-close icon-light align-middle" />
-            <br />
-            Approve {symbol}
-          </Button>
+          {BN(web3.allowance1.toString()).comparedTo(txnAmount) === -1 && (
+            <>
+              <Button
+                className="btn-fill w-100 h-100"
+                color="neutral"
+                onClick={() => {
+                  handleApproval()
+                }}
+              >
+                <i className="icon-extra-small icon-lock icon-light align-middle" />
+                <br />
+                Approve {symbol}
+              </Button>
+            </>
+          )}
+          {BN(web3.allowance1.toString()).comparedTo(txnAmount) === 1 && (
+            <>
+              <Button className="btn-fill w-100 h-100" color="success">
+                <i className="icon-extra-small icon-lock icon-dark align-middle" />
+                <i className="icon-extra-small icon-check icon-light align-middle" />
+                <br />
+                {symbol} Ready
+              </Button>
+            </>
+          )}
         </>
       )}
-      {BN(web3.allowance._hex).comparedTo(txnAmount) === 1 && (
+      {assetNumber === '2' && (
         <>
-          <Button className="btn-fill w-100 h-100" color="secondary">
-            <i className="icon-extra-small icon-lock icon-dark align-middle" />
-            <i className="icon-extra-small icon-check icon-light align-middle" />
-            <br />
-            {symbol} Ready
-          </Button>
+          {BN(web3.allowance2.toString()).comparedTo(txnAmount) === -1 && (
+            <>
+              <Button
+                className="btn-fill w-100 h-100"
+                color="neutral"
+                onClick={async () => {
+                  handleApproval()
+                }}
+              >
+                <i className="icon-extra-small icon-lock icon-light align-middle" />
+                <br />
+                Approve {symbol}
+              </Button>
+            </>
+          )}
+          {BN(web3.allowance2.toString()).comparedTo(txnAmount) === 1 && (
+            <>
+              <Button className="btn-fill w-100 h-100" color="success">
+                <i className="icon-extra-small icon-lock icon-dark align-middle" />
+                <i className="icon-extra-small icon-check icon-light align-middle" />
+                <br />
+                {symbol} Ready
+              </Button>
+            </>
+          )}
         </>
       )}
     </>

src/store/web3/actions.js

@@ -8,6 +8,7 @@ import {
   bscRpcsTN,
   getNetwork,
   getProviderGasPrice,
+  getWalletProvider,
 } from '../../utils/web3'
 import { errorToDispatch, payloadToDispatch } from '../helpers'
 
@@ -99,16 +100,20 @@ export const getApproval = (tokenAddress, contractAddress) => async (
 ) => {
   dispatch(web3Loading())
   const contract = getTokenContract(tokenAddress)
+  let provider = getWalletProvider()
+  if (provider._isSigner === true) {
+    provider = provider.provider
+  }
 
   try {
     const supply = await contract.totalSupply()
     const gPrice = await getProviderGasPrice()
     // const gLimit = await contract.estimateGas.approve(contractAddress, supply)
-    const approval = await contract.approve(contractAddress, supply, {
+    let approval = await contract.approve(contractAddress, supply, {
       gasPrice: gPrice,
       // gasLimit: gLimit,
     })
-
+    approval = await provider.waitForTransaction(approval.hash, 1)
     dispatch(payloadToDispatch(Types.GET_APPROVAL, approval))
   } catch (error) {
     dispatch(errorToDispatch(Types.WEB3_ERROR, error))
@@ -120,7 +125,7 @@ export const getApproval = (tokenAddress, contractAddress) => async (
  * @param {string} address - Address of the token being transferred & the address of the smart contract handling the token
  * @returns {BigNumber?}
  */
-export const getAllowance = (
+export const getAllowance1 = (
   tokenAddress,
   userAddress,
   contractAddress,
@@ -129,9 +134,29 @@ export const getAllowance = (
   const contract = getTokenContract(tokenAddress)
 
   try {
-    const allowance = await contract.allowance(userAddress, contractAddress)
+    const allowance1 = await contract.allowance(userAddress, contractAddress)
+    dispatch(payloadToDispatch(Types.GET_ALLOWANCE1, allowance1))
+  } catch (error) {
+    dispatch(errorToDispatch(Types.WEB3_ERROR, error))
+  }
+}
 
-    dispatch(payloadToDispatch(Types.GET_ALLOWANCE, allowance))
+/**
+ * Get the current allowance-limit for a smart contract to handle transferring a token on behlf of a wallet
+ * @param {string} address - Address of the token being transferred & the address of the smart contract handling the token
+ * @returns {BigNumber?}
+ */
+export const getAllowance2 = (
+  tokenAddress,
+  userAddress,
+  contractAddress,
+) => async (dispatch) => {
+  dispatch(web3Loading())
+  const contract = getTokenContract(tokenAddress)
+
+  try {
+    const allowance2 = await contract.allowance(userAddress, contractAddress)
+    dispatch(payloadToDispatch(Types.GET_ALLOWANCE2, allowance2))
   } catch (error) {
     dispatch(errorToDispatch(Types.WEB3_ERROR, error))
   }

src/store/web3/index.js

@@ -3,6 +3,7 @@ export { web3Reducer } from './reducer'
 export { addNetworkMM } from './actions'
 export { addNetworkBC } from './actions'
 export { getApproval } from './actions'
-export { getAllowance } from './actions'
+export { getAllowance1 } from './actions'
+export { getAllowance2 } from './actions'
 export { watchAsset } from './actions'
 export { getSpartaPrice } from './actions'

src/store/web3/reducer.js

@@ -4,7 +4,8 @@ const initialState = {
   addedNetworkMM: {},
   addedNetworkBC: {},
   approval: false,
-  allowance: {},
+  allowance1: {},
+  allowance2: {},
   watchingAsset: false,
   spartaPrice: 0,
   loading: false,
@@ -40,10 +41,19 @@ export const web3Reducer = (state = initialState, action) => {
       }
     }
 
-    case Types.GET_ALLOWANCE: {
+    case Types.GET_ALLOWANCE1: {
       return {
         ...state,
-        allowance: action.payload,
+        allowance1: action.payload,
+        loading: false,
+        error: null,
+      }
+    }
+
+    case Types.GET_ALLOWANCE2: {
+      return {
+        ...state,
+        allowance2: action.payload,
         loading: false,
         error: null,
       }

src/store/web3/types.js

@@ -1,7 +1,8 @@
 export const ADD_NETWORK_MM = 'ADD_NETWORK_MM'
 export const ADD_NETWORK_BC = 'ADD_NETWORK_BC'
 export const GET_APPROVAL = 'GET_APPROVAL'
-export const GET_ALLOWANCE = 'GET_ALLOWANCE'
+export const GET_ALLOWANCE1 = 'GET_ALLOWANCE1'
+export const GET_ALLOWANCE2 = 'GET_ALLOWANCE2'
 export const WATCH_ASSET = 'WATCH_ASSET'
 export const SPARTA_PRICE = 'SPARTA_PRICE'
 export const WEB3_LOADING = 'WEB3_LOADING'

src/views/pages/Pools/AddLiquidity.js

@@ -472,6 +472,7 @@ const AddLiquidity = () => {
                       walletAddress={wallet?.account}
                       contractAddress={addr.router}
                       txnAmount={convertToWei(addInput1?.value)}
+                      assetNumber="1"
                     />
                   )}
               </Col>
@@ -510,6 +511,7 @@ const AddLiquidity = () => {
                       walletAddress={wallet?.account}
                       contractAddress={addr.router}
                       txnAmount={convertToWei(addInput2?.value)}
+                      assetNumber="2"
                     />
                   )}
               </Col>