Add all smart trade methods to swap (#45)

* wip

* ETH to ERC20 swap input

* ERC20 to ETH swap input

* Add ERC20 to ETH swapInput

* Add ETH to ERC20 swapOutput

* Add ERC20 to ETH swapOutput

* Add ERC20 to ERC20 swapInput

* Add ERC20 to ERC20 swapOutput

* Remove console.log

src/components/CurrencyInputPanel/index.js

@@ -103,7 +103,7 @@ class CurrencyInputPanel extends Component {
     }
 
     if (selectedTokenAddress === 'ETH') {
-      return `Balance: ${web3.utils.fromWei(balance, 'ether')}`;
+      return `Balance: ${BN(web3.utils.fromWei(balance, 'ether')).toFixed(2)}`;
     }
 
     const tokenData = this.getTokenData(selectedTokenAddress);
@@ -145,32 +145,36 @@ class CurrencyInputPanel extends Component {
     this.props.onCurrencySelected(address);
 
     if (address && address !== 'ETH') {
-      // Add Token Contract
       const { drizzle } = this.context;
       const { fromToken } = this.props.exchangeAddresses;
       const { web3 } = drizzle;
-      const tokenConfig = {
-        contractName: address,
-        web3Contract: new web3.eth.Contract(ERC20_ABI, address),
-      };
-      const tokenEvents = ['Approval', 'Transfer'];
 
-      this.context.drizzle.addContract(tokenConfig, tokenEvents, { from: this.props.account });
+      // Add Token Contract
+      if (!this.props.contracts[address]) {
+        // console.log(`Adding Token Contract - ${address}`);
+        const tokenConfig = {
+          contractName: address,
+          web3Contract: new web3.eth.Contract(ERC20_ABI, address),
+        };
+        const tokenEvents = ['Approval', 'Transfer'];
+        this.context.drizzle.addContract(tokenConfig, tokenEvents, { from: this.props.account });
+      }
 
       // Add Exchange Contract
       const exchangeAddress = fromToken[address];
-
       if (!exchangeAddress) {
         return;
       }
 
-      const exchangeConfig = {
-        contractName: exchangeAddress,
-        web3Contract: new web3.eth.Contract(EXCHANGE_ABI, exchangeAddress),
-      };
-      const exchangeEvents = ['Approval', 'Transfer', 'TokenPurchase', 'EthPurchase', 'AddLiquidity', 'RemoveLiquidity'];
-
-      this.context.drizzle.addContract(exchangeConfig, exchangeEvents , { from: this.props.account });
+      if (!this.props.contracts[exchangeAddress]) {
+        // console.log(`Adding Exchange Contract - ${exchangeAddress}`);
+        const exchangeConfig = {
+          contractName: exchangeAddress,
+          web3Contract: new web3.eth.Contract(EXCHANGE_ABI, exchangeAddress),
+        };
+        const exchangeEvents = ['Approval', 'Transfer', 'TokenPurchase', 'EthPurchase', 'AddLiquidity', 'RemoveLiquidity'];
+        this.context.drizzle.addContract(exchangeConfig, exchangeEvents , { from: this.props.account });
+      }
     }
   };
 

src/helpers/web3-promisfy.js

+export default function promisify(web3, methodName, ...args) {
+  return new Promise((resolve, reject) => {
+    if (!web3) {
+      reject(new Error('No Web3 object'));
+      return;
+    }
+
+    const method = web3.eth[methodName];
+
+    if (!method) {
+      reject(new Error(`Cannot find web3.eth.${methodName}`));
+      return;
+    }
+
+    method(...args, (error, data) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+
+      resolve(data);
+    })
+  });
+}

src/index.js

@@ -6,9 +6,6 @@ import store from './store';
 
 import './index.scss';
 
-import registerServiceWorker from './registerServiceWorker';
-
-
 window.addEventListener('load', function() {
   ReactDOM.render(
     <DrizzleProvider options={{
@@ -20,7 +17,5 @@ window.addEventListener('load', function() {
     </DrizzleProvider>
     , document.getElementById('root')
   );
-
-  registerServiceWorker();
 });
 

src/pages/Swap/index.js

@@ -9,7 +9,13 @@ import Header from '../../components/Header';
 import CurrencyInputPanel from '../../components/CurrencyInputPanel';
 import OversizedPanel from '../../components/OversizedPanel';
 import ArrowDown from '../../assets/images/arrow-down-blue.svg';
-import { calculateExchangeRateFromInput, calculateExchangeRateFromOutput } from '../../helpers/exchange-utils';
+import {
+  calculateExchangeRateFromInput,
+  calculateExchangeRateFromOutput,
+  swapInput,
+  swapOutput,
+} from '../../helpers/exchange-utils';
+import promisify from '../../helpers/web3-promisfy';
 
 import "./swap.scss";
 
@@ -36,6 +42,30 @@ class Swap extends Component {
     exchangeRate: BN(0),
   };
 
+  componentWillReceiveProps(nextProps) {
+    this.getExchangeRate(nextProps)
+      .then(exchangeRate => {
+        this.setState({ exchangeRate });
+        if (!exchangeRate) {
+          return;
+        }
+
+        if (nextProps.lastEditedField === 'input') {
+          this.props.updateField('output', `${BN(nextProps.input).multipliedBy(exchangeRate).toFixed(7)}`);
+        } else if (nextProps.lastEditedField === 'output') {
+          this.props.updateField('input', `${BN(nextProps.output).multipliedBy(BN(1).dividedBy(exchangeRate)).toFixed(7)}`);
+        }
+      });
+  }
+
+  componentWillUnmount() {
+    this.props.updateField('output', '');
+    this.props.updateField('input', '');
+    this.props.updateField('outputCurrency', '');
+    this.props.updateField('inputCurrency', '');
+    this.props.updateField('lastEditedField', '');
+  }
+
   getTokenLabel(address) {
     if (address === 'ETH') {
       return 'ETH';
@@ -113,41 +143,60 @@ class Swap extends Component {
       }) ;
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.getExchangeRate(nextProps)
-      .then(exchangeRate => {
-        this.setState({ exchangeRate });
-        if (!exchangeRate) {
-          return;
-        }
+  onSwap = async () => {
+    const {
+      input,
+      output,
+      inputCurrency,
+      outputCurrency,
+      exchangeAddresses,
+      lastEditedField,
+      account,
+      contracts,
+    } = this.props;
 
-        if (nextProps.lastEditedField === 'input') {
-          this.props.updateField('output', `${BN(nextProps.input).multipliedBy(exchangeRate).toFixed(7)}`);
-        } else if (nextProps.lastEditedField === 'output') {
-          this.props.updateField('input', `${BN(nextProps.output).multipliedBy(BN(1).dividedBy(exchangeRate)).toFixed(7)}`);
-        }
-      });
-  }
+    const { drizzle } = this.context;
 
-  componentWillUnmount() {
-    this.props.updateField('output', '');
-    this.props.updateField('input', '');
-    this.props.updateField('outputCurrency', '');
-    this.props.updateField('inputCurrency', '');
-    this.props.updateField('lastEditedField', '');
-  }
+    if (lastEditedField === 'input') {
+      swapInput({
+        drizzleCtx: drizzle,
+        contractStore: contracts,
+        input,
+        output,
+        inputCurrency,
+        outputCurrency,
+        exchangeAddresses,
+        account,
+      });
+    }
 
-  onCurrencySelected(field, data) {
-    this.props.updateField(field, data);
-    // this.props
-  }
+    if (lastEditedField === 'output') {
+      swapOutput({
+        drizzleCtx: drizzle,
+        contractStore: contracts,
+        input,
+        output,
+        inputCurrency,
+        outputCurrency,
+        exchangeAddresses,
+        account,
+      });
+    }
+    // this.context.drizzle.web3.eth.getBlockNumber((_, d) => this.context.drizzle.web3.eth.getBlock(d, (_,d) => {
+    //   const deadline = d.timestamp + 300;
+    //   const id = exchange.methods.ethToTokenSwapInput.cacheSend(`${output * 10 ** 18}`, deadline, {
+    //     from: "0xCf1dE0b4d1e492080336909f70413a5F4E7eEc62",
+    //     value: `${input * 10 ** 18}`,
+    //   }, );
+    // }));
+  };
 
   render() {
     const { lastEditedField, inputCurrency, outputCurrency, input, output } = this.props;
     const { exchangeRate } = this.state;
     const inputLabel = this.getTokenLabel(inputCurrency);
     const outputLabel = this.getTokenLabel(outputCurrency);
-    const estimatedText = '(estimated)'
+    const estimatedText = '(estimated)';
 
     return (
       <div className="swap">
@@ -202,6 +251,7 @@ class Swap extends Component {
           className={classnames('swap__cta-btn', {
             'swap--inactive': !this.props.isConnected,
           })}
+          onClick={this.onSwap}
         >
           Swap
         </button>