allow user to enable/disable token transfers to vault

app/components/CreateFunding.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { Formik } from 'formik';
 import EmbarkJS from 'Embark/EmbarkJS';
 import LPVault from 'Embark/contracts/LPVault';
@@ -7,9 +7,14 @@ import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import Snackbar from '@material-ui/core/Snackbar';
 import MenuItem from '@material-ui/core/MenuItem';
-import web3 from 'Embark/web3';
-import { MySnackbarContentWrapper } from './base/SnackBars';
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import Switch from '@material-ui/core/Switch'
+import web3 from 'Embark/web3'
+import { MySnackbarContentWrapper } from './base/SnackBars'
 import { currencies, TOKEN_ICON_API, getTokenLabel } from '../utils/currencies'
+import { toEther } from '../utils/conversions'
+import { getLpAllowance, standardTokenApproval } from '../utils/initialize'
+import { FundingContext } from '../context'
 
 const { donate } = LiquidPledging.methods
 const hoursToSeconds = hours => hours * 60 * 60
@@ -18,17 +23,56 @@ const addFunderSucessMsg = response => {
   return `Funder created with ID of ${idGiver}`
 }
 
-const CreateFunding = ({ refreshTable }) => (
+const CreateFunding = ({ refreshTable }) => {
+  const context = useContext(FundingContext)
+  const { account } = context
+  const [balances, setBalances] = useState({})
+  const [allowances, setAllowances] = useState({})
+
+  const updateBalancesAllowances = () => {
+    const latestBalances = {}
+    const latestAllowances = {}
+    currencies.forEach(async c => {
+      if (c.contract) {
+        const amount = await c.contract.methods.balanceOf(account).call()
+        const allowance = await getLpAllowance(c.contract)
+        latestBalances[c.value] = toEther(amount)
+        latestAllowances[c.value] = toEther(allowance)
+      } else {
+        latestBalances[c.value] = '0'
+        latestAllowances[c.value] = '0'
+      }
+    })
+    setBalances(latestBalances)
+    setAllowances(latestAllowances)
+  }
+
+  const toggleAllowance = e => {
+    const token = currencies[e.target.value]
+    const allowance = allowances[token.value]
+    standardTokenApproval(
+      token.contract,
+      Number(allowance) ? '0' : undefined
+    ).then(res => {
+      const { events: { Approval: { returnValues: { value } } } } = res
+      setAllowances(state => ({ ...state, [token.value]: toEther(value) }))
+    })
+  }
+
+  useEffect(() => {
+    if (account) updateBalancesAllowances()
+  }, account)
+
+  return (
     <Formik
       initialValues={{ funderId: '', receiverId: '', tokenAddress : '', amount: '' }}
       onSubmit={async (values, { setSubmitting, resetForm, setStatus }) => {
         const { funderId, receiverId, tokenAddress, amount } = values
-      const account = await web3.eth.getCoinbase()
         const args = [funderId, receiverId, tokenAddress, web3.utils.toWei(amount, 'ether')];
 
         const toSend =  donate(...args);
 
-      const estimateGas = await toSend.estimateGas();
+        const estimateGas = await toSend.estimateGas()
 
         toSend.send({ from: account, gas: estimateGas + 2000 })
                                         .then(res => {
@@ -93,7 +137,7 @@ const CreateFunding = ({ refreshTable }) => (
             onBlur={handleBlur}
             value={values.tokenAddress || ''}
           >
-          {currencies.map(option => (
+            {currencies.map((option, idx) => (
               <MenuItem style={{ display: 'flex', alignItems: 'center' }} key={option.value} value={option.value}>
                 <div style={{ display: 'flex', alignItems: 'center' }} >
                   {option.icon || <img
@@ -101,6 +145,20 @@ const CreateFunding = ({ refreshTable }) => (
                                     style={{ width: option.width, marginRight: '3%' }}
                   />}
                   {option.label}
+                  <span style={{ marginLeft: '10%' }}>Your Balance: <strong>{balances[option.value]}</strong></span>
+                  <FormControlLabel
+                    style={{ marginLeft: '10%' }}
+                    onClick={e => e.stopPropagation()}
+                    control={
+                      <Switch
+                        checked={!!Number(allowances[option.value])}
+                        onChange={toggleAllowance}
+                        value={idx}
+                        color="primary"
+                      />
+                    }
+                    label="Enabled"
+                  />
                 </div>
               </MenuItem>
             ))}
@@ -137,6 +195,6 @@ const CreateFunding = ({ refreshTable }) => (
         </form>
       )}
     </Formik>
-)
+  )}
 
 export default CreateFunding

app/utils/currencies.js

@@ -1,4 +1,4 @@
-import StandardToken from 'Embark/contracts/StandardToken'
+import web3 from 'Embark/web3'
 import SNT from 'Embark/contracts/SNT'
 import sntIco from 'cryptocurrency-icons/svg/color/snt.svg'
 
@@ -15,7 +15,8 @@ export const currencies = [
   {
     value: SNT._address,
     label: 'Status (SNT)',
-    img: sntIco
+    img: sntIco,
+    contract: SNT
   },
   {
     value: '0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359',

app/utils/initialize.js

@@ -25,19 +25,19 @@ export const vaultPledgingNeedsInit = async () => {
   return needsInit
 }
 
-export const standardTokenApproval = async () => {
-  const { approve } = SNT.methods
+export const standardTokenApproval = async (contract, amount = '10000000') => {
+  const { methods: { approve } } = contract || SNT
   const spender = LiquidPledging._address
   return await approve(
     spender,
-    web3.utils.toWei('10000000', 'tether')
+    web3.utils.toWei(amount, 'tether')
   ).send()
 }
 
-export const getLpAllowance = async () => {
-  const { allowance } = SNT.methods
+export const getLpAllowance = async contract => {
+  const { methods: { allowance } } = contract || SNT
   const account = await web3.eth.getCoinbase()
   const spender = LiquidPledging._address
-  const allowanceAmt = Number(await allowance(account, spender).call())
+  const allowanceAmt = await allowance(account, spender).call()
   return allowanceAmt
 }