From 448c38b7ee34f7c58d4738f5008ce693db3fb0ef Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Wed, 6 Feb 2019 18:02:03 -0500
Subject: [PATCH] allow user to enable/disable token transfers to vault

---
 app/components/CreateFunding.jsx | 300 ++++++++++++++++++-------------
 app/utils/currencies.js          |   5 +-
 app/utils/initialize.js          |  12 +-
 3 files changed, 188 insertions(+), 129 deletions(-)

diff --git a/app/components/CreateFunding.jsx b/app/components/CreateFunding.jsx
index db64ee1..b2b6aee 100644
--- a/app/components/CreateFunding.jsx
+++ b/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,125 +23,178 @@ const addFunderSucessMsg = response => {
   return `Funder created with ID of ${idGiver}`
 }
 
-const CreateFunding = ({ refreshTable }) => (
-  <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 CreateFunding = ({ refreshTable }) => {
+  const context = useContext(FundingContext)
+  const { account } = context
+  const [balances, setBalances] = useState({})
+  const [allowances, setAllowances] = useState({})
 
-      const estimateGas = await toSend.estimateGas();
-      
-      toSend.send({ from: account, gas: estimateGas + 2000 })
-            .then(res => {
-              console.log({res})
-              setStatus({
-                snackbar: { variant: 'success', message: 'funding provided!' }
-              })
-              refreshTable()
-            })
-            .catch(e => {
-              console.log({e})
-              setStatus({
-                snackbar: { variant: 'error', message: 'There was an error' }
-              })
-            })
-    }}
-  >
-    {({
-      values,
-      errors,
-      touched,
-      handleChange,
-      handleBlur,
-      handleSubmit,
-      setFieldValue,
-      setStatus,
-      status
-    }) => (
-      <form autoComplete="off" onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column' }}>
-        <TextField
-          id="funderId"
-          name="funderId"
-          label="Funder Id"
-          placeholder="Funder Id"
-          margin="normal"
-          variant="outlined"
-          onChange={handleChange}
-          onBlur={handleBlur}
-          value={values.funderId || ''}
-        />
-        <TextField
-          id="receiverId"
-          name="receiverId"
-          label="Receiver Id"
-          placeholder="Receiver Id"
-          margin="normal"
-          variant="outlined"
-          helperText="The receiver of the funding can be any admin, giver, delegate or a project"
-          onChange={handleChange}
-          onBlur={handleBlur}
-          value={values.receiverId || ''}
-        />
-        <TextField
-          id="tokenAddress"
-          name="tokenAddress"
-          select
-          label="Select token for funding"
-          placeholder="Select token for funding"
-          margin="normal"
-          variant="outlined"
-          onChange={handleChange}
-          onBlur={handleBlur}
-          value={values.tokenAddress || ''}
-        >
-          {currencies.map(option => (
-            <MenuItem style={{ display: 'flex', alignItems: 'center' }} key={option.value} value={option.value}>
-              <div style={{ display: 'flex', alignItems: 'center' }} >
-                {option.icon || <img
-                                  src={option.img || `${TOKEN_ICON_API}/${option.value}.png`}
-                                  style={{ width: option.width, marginRight: '3%' }}
-                />}
-                {option.label}
-              </div>
-            </MenuItem>
-          ))}
-        </TextField>
-        <TextField
-          id="amount"
-          name="amount"
-          label={`Amount of ${getTokenLabel(values.tokenAddress) || 'tokens'} to provide`}
-          placeholder="Amount of tokens to provide"
-          margin="normal"
-          variant="outlined"
-          onChange={handleChange}
-          onBlur={handleBlur}
-          value={values.amount || ''}
-        />
-        <Button variant="contained" color="primary" type="submit">
-          PROVIDE FUNDING
-        </Button>
-        {status && <Snackbar
-                     anchorOrigin={{
-                       vertical: 'bottom',
-                       horizontal: 'left',
-                     }}
-                     open={!!status.snackbar}
-                     autoHideDuration={6000}
-                     onClose={() => setStatus(null)}
-                   >
-          <MySnackbarContentWrapper
-            onClose={() => setStatus(null)}
-            variant={status.snackbar.variant}
-            message={status.snackbar.message}
+  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 args = [funderId, receiverId, tokenAddress, web3.utils.toWei(amount, 'ether')];
+
+        const toSend =  donate(...args);
+
+        const estimateGas = await toSend.estimateGas()
+
+        toSend.send({ from: account, gas: estimateGas + 2000 })
+                                        .then(res => {
+                                          console.log({res})
+                                          setStatus({
+                                            snackbar: { variant: 'success', message: 'funding provided!' }
+                                          })
+                                          refreshTable()
+                                        })
+                                        .catch(e => {
+                                          console.log({e})
+                                          setStatus({
+                                            snackbar: { variant: 'error', message: 'There was an error' }
+                                          })
+                                        })
+      }}
+    >
+      {({
+        values,
+        errors,
+        touched,
+        handleChange,
+        handleBlur,
+        handleSubmit,
+        setFieldValue,
+        setStatus,
+        status
+      }) => (
+        <form autoComplete="off" onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column' }}>
+          <TextField
+            id="funderId"
+            name="funderId"
+            label="Funder Id"
+            placeholder="Funder Id"
+            margin="normal"
+            variant="outlined"
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={values.funderId || ''}
           />
-        </Snackbar>}
-      </form>
-    )}
-  </Formik>
-)
+          <TextField
+            id="receiverId"
+            name="receiverId"
+            label="Receiver Id"
+            placeholder="Receiver Id"
+            margin="normal"
+            variant="outlined"
+            helperText="The receiver of the funding can be any admin, giver, delegate or a project"
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={values.receiverId || ''}
+          />
+          <TextField
+            id="tokenAddress"
+            name="tokenAddress"
+            select
+            label="Select token for funding"
+            placeholder="Select token for funding"
+            margin="normal"
+            variant="outlined"
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={values.tokenAddress || ''}
+          >
+            {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
+                                    src={option.img || `${TOKEN_ICON_API}/${option.value}.png`}
+                                    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>
+            ))}
+          </TextField>
+          <TextField
+            id="amount"
+            name="amount"
+            label={`Amount of ${getTokenLabel(values.tokenAddress) || 'tokens'} to provide`}
+            placeholder="Amount of tokens to provide"
+            margin="normal"
+            variant="outlined"
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={values.amount || ''}
+          />
+          <Button variant="contained" color="primary" type="submit">
+            PROVIDE FUNDING
+          </Button>
+          {status && <Snackbar
+                       anchorOrigin={{
+                         vertical: 'bottom',
+                         horizontal: 'left',
+                       }}
+                       open={!!status.snackbar}
+                       autoHideDuration={6000}
+                       onClose={() => setStatus(null)}
+                     >
+            <MySnackbarContentWrapper
+              onClose={() => setStatus(null)}
+              variant={status.snackbar.variant}
+              message={status.snackbar.message}
+            />
+          </Snackbar>}
+        </form>
+      )}
+    </Formik>
+  )}
 
 export default CreateFunding
diff --git a/app/utils/currencies.js b/app/utils/currencies.js
index f2b7295..53a659f 100644
--- a/app/utils/currencies.js
+++ b/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',
diff --git a/app/utils/initialize.js b/app/utils/initialize.js
index a57ecb7..18cc75b 100644
--- a/app/utils/initialize.js
+++ b/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
 }