Reset after confirmed swap (#70)

src/components/CurrencyInputPanel/index.js

@@ -44,12 +44,14 @@ class CurrencyInputPanel extends Component {
     }).isRequired,
     selectedTokens: PropTypes.array.isRequired,
     errorMessage: PropTypes.string,
+    selectedTokenAddress: PropTypes.string,
   };
 
   static defaultProps = {
     selectedTokens: [],
     onCurrencySelected() {},
     onValueChange() {},
+    selectedTokenAddress: '',
   };
 
   static contextTypes = {
@@ -59,7 +61,6 @@ class CurrencyInputPanel extends Component {
   state = {
     isShowingModal: false,
     searchQuery: '',
-    selectedTokenAddress: '',
   };
 
   createTokenList = () => {
@@ -80,7 +81,6 @@ class CurrencyInputPanel extends Component {
 
   onTokenSelect = (address) => {
     this.setState({
-      selectedTokenAddress: address || 'ETH',
       searchQuery: '',
       isShowingModal: false,
     });
@@ -195,10 +195,9 @@ class CurrencyInputPanel extends Component {
       errorMessage,
       value,
       onValueChange,
+      selectedTokenAddress,
     } = this.props;
 
-    const { selectedTokenAddress } = this.state;
-
     return (
       <div className="currency-input-panel">
         <div className={classnames('currency-input-panel__container', {

src/components/Web3Status/index.js

@@ -72,7 +72,6 @@ class Web3Status extends Component {
 
   render() {
     const { address, transactions, pendingTransactions, hasPendingTransactions } = this.props;
-    console.count('hi');
     let text = getText(address);
     if (hasPendingTransactions) {
       text = getPendingText(pendingTransactions);

src/ducks/swap.js

 const UPDATE_FIELD = 'app/swap/updateField';
 const ADD_ERROR = 'app/swap/addError';
 const REMOVE_ERROR = 'app/swap/removeError';
+const RESET_SWAP = 'app/swap/resetSwap';
 
-const initialState = {
-  input: '',
-  output: '',
-  inputCurrency: '',
-  outputCurrency: '',
-  lastEditedField: '',
-  inputErrors: [],
-  outputErrors: [],
+const getInitialState = () => {
+  return {
+    input: '',
+    output: '',
+    inputCurrency: '',
+    outputCurrency: '',
+    lastEditedField: '',
+    inputErrors: [],
+    outputErrors: [],
+  };
 };
 
 export const isValidSwap = (state) => {
@@ -38,6 +41,10 @@ export const removeError = ({ name, value }) => ({
   payload: { name, value },
 });
 
+export const resetSwap = () => ({
+  type: RESET_SWAP,
+});
+
 function reduceAddError(state, payload) {
   const { name, value } = payload;
   let nextErrors = state[name];
@@ -60,7 +67,7 @@ function reduceRemoveError(state, payload) {
   };
 }
 
-export default function swapReducer(state = initialState, { type, payload }) {
+export default function swapReducer(state = getInitialState(), { type, payload }) {
   switch (type) {
     case UPDATE_FIELD:
       return {
@@ -71,6 +78,8 @@ export default function swapReducer(state = initialState, { type, payload }) {
       return reduceAddError(state, payload);
     case REMOVE_ERROR:
       return reduceRemoveError(state, payload);
+    case RESET_SWAP:
+      return getInitialState();
     default:
       return state;
   }

src/helpers/approval-utils.js

@@ -54,14 +54,3 @@ export const approveExchange = async opts => {
     .send({ from: account })
     // .then((e, d) => console.log(e, d));
 };
-
-export const getApprovalTxStatus = opts => {
-  const {
-    drizzleCtx,
-    txId
-  } = opts;
-  const st = drizzleCtx.store.getState();
-  const tx = st.transactionStack[txId];
-  const status = st.transactions[tx] && st.transactions[tx].status;
-  return status;
-};

src/helpers/contract-utils.js

@@ -48,3 +48,14 @@ export function getBalance({ currency, address, drizzleCtx, contractStore }) {
     }
   });
 }
+
+export const getTxStatus = opts => {
+  const {
+    drizzleCtx,
+    txId
+  } = opts;
+  const st = drizzleCtx.store.getState();
+  const tx = st.transactionStack[txId];
+  const status = st.transactions[tx] && st.transactions[tx].status;
+  return status;
+};

src/helpers/exchange-utils.js

@@ -214,7 +214,7 @@ const ETH_TO_ERC20 = {
     const ALLOWED_SLIPPAGE = BN(0.025);
     const outputDecimals = await getDecimals({ address: outputCurrency, contractStore, drizzleCtx });
     const minOutput = BN(output).multipliedBy(10 ** outputDecimals).multipliedBy(BN(1).minus(ALLOWED_SLIPPAGE));
-    exchange.methods.ethToTokenSwapInput.cacheSend(minOutput.toFixed(0), deadline, {
+    return exchange.methods.ethToTokenSwapInput.cacheSend(minOutput.toFixed(0), deadline, {
       from: account,
       value: BN(input).multipliedBy(10 ** 18).toFixed(0),
     });
@@ -248,7 +248,7 @@ const ETH_TO_ERC20 = {
     const outputDecimals = await getDecimals({ address: outputCurrency, contractStore, drizzleCtx });
     const outputAmount = BN(output).multipliedBy(BN(10 ** outputDecimals));
     const maxInput = BN(input).multipliedBy(10 ** 18).multipliedBy(BN(1).plus(ALLOWED_SLIPPAGE));
-    exchange.methods.ethToTokenSwapOutput.cacheSend(outputAmount.toFixed(0), deadline, {
+    return exchange.methods.ethToTokenSwapOutput.cacheSend(outputAmount.toFixed(0), deadline, {
       from: account,
       value: maxInput.toFixed(0),
     });
@@ -374,7 +374,7 @@ const ERC20_TO_ETH = {
     const minOutput = BN(output).multipliedBy(10 ** 18).multipliedBy(BN(1).minus(ALLOWED_SLIPPAGE));
     const inputAmount = BN(input).multipliedBy(10 ** inputDecimals);
 
-    exchange.methods.tokenToEthSwapInput.cacheSend(
+    return exchange.methods.tokenToEthSwapInput.cacheSend(
       inputAmount.toFixed(0),
       minOutput.toFixed(0),
       deadline,
@@ -410,7 +410,7 @@ const ERC20_TO_ETH = {
     const maxInput = BN(input).multipliedBy(10 ** inputDecimals).multipliedBy(BN(1).plus(ALLOWED_SLIPPAGE));
     const outputAmount = BN(output).multipliedBy(10 ** 18);
 
-    exchange.methods.tokenToEthSwapOutput.cacheSend(
+    return exchange.methods.tokenToEthSwapOutput.cacheSend(
       outputAmount.toFixed(0),
       maxInput.toFixed(0),
       deadline,
@@ -501,7 +501,7 @@ const ERC20_TO_ERC20 = {
     const minTokensBought = outputAmount.multipliedBy(BN(1).plus(ALLOWED_SLIPPAGE)).toFixed(0);
     const minEthBought = 1;
 
-    exchange.methods.tokenToTokenSwapInput.cacheSend(
+    return exchange.methods.tokenToTokenSwapInput.cacheSend(
       tokensSold,
       minTokensBought,
       minEthBought,
@@ -561,7 +561,7 @@ const ERC20_TO_ERC20 = {
     const maxTokensSold = inputAmount.multipliedBy(BN(1).plus(ALLOWED_SLIPPAGE)).toFixed(0);
     const maxEthSold = inputAmountB.multipliedBy(1.2).toFixed(0);
 
-    exchange.methods.tokenToTokenSwapOutput.cacheSend(
+    return exchange.methods.tokenToTokenSwapOutput.cacheSend(
       tokensBought,
       maxTokensSold,
       maxEthSold,

src/pages/Swap/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {BigNumber as BN} from "bignumber.js";
 import deepEqual from 'deep-equal';
-import { isValidSwap, updateField, addError, removeError } from '../../ducks/swap';
+import { isValidSwap, updateField, addError, removeError, resetSwap } from '../../ducks/swap';
 import { selectors, sync } from '../../ducks/web3connect';
 import Header from '../../components/Header';
 import CurrencyInputPanel from '../../components/CurrencyInputPanel';
@@ -20,9 +20,12 @@ import {
 } from '../../helpers/exchange-utils';
 import {
   isExchangeUnapproved,
-  getApprovalTxStatus,
   approveExchange,
 } from '../../helpers/approval-utils';
+import {
+  getTxStatus,
+} from '../../helpers/contract-utils';
+import promisify from '../../helpers/web3-promisfy';
 
 import "./swap.scss";
 
@@ -52,35 +55,21 @@ class Swap extends Component {
   state = {
     exchangeRate: BN(0),
     approvalTxId: null,
+    swapTxId: null,
   };
 
-  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)}`);
-    //     }
-    //   });
-  }
-
   shouldComponentUpdate(nextProps, nextState) {
     return !deepEqual(nextProps, this.props) ||
       !deepEqual(nextState, this.state);
   }
 
   componentWillUnmount() {
-    this.props.updateField('output', '');
-    this.props.updateField('input', '');
-    this.props.updateField('outputCurrency', '');
-    this.props.updateField('inputCurrency', '');
-    this.props.updateField('lastEditedField', '');
+    this.resetSwap();
+  }
+
+  resetSwap() {
+    this.props.resetSwap();
+    this.setState({approvalTxId: null, swapTxId: null});
   }
 
   getTokenLabel(address) {
@@ -208,12 +197,21 @@ class Swap extends Component {
   getApprovalStatus() {
     const { drizzle } = this.context;
 
-    return getApprovalTxStatus({
+    return getTxStatus({
       drizzleCtx: drizzle,
       txId: this.state.approvalTxId,
     });
   }
 
+  getSwapStatus() {
+    const { drizzle } = this.context;
+
+    return getTxStatus({
+      drizzleCtx: drizzle,
+      txId: this.state.swapTxId,
+    });
+  }
+
   onSwap = async () => {
     const {
       input,
@@ -227,9 +225,10 @@ class Swap extends Component {
     } = this.props;
 
     const { drizzle } = this.context;
+    let swapTxId;
 
     if (lastEditedField === 'input') {
-      swapInput({
+      swapTxId = await swapInput({
         drizzleCtx: drizzle,
         contractStore: contracts,
         input,
@@ -242,7 +241,7 @@ class Swap extends Component {
     }
 
     if (lastEditedField === 'output') {
-      swapOutput({
+      swapTxId = await swapOutput({
         drizzleCtx: drizzle,
         contractStore: contracts,
         input,
@@ -253,6 +252,10 @@ class Swap extends Component {
         account,
       });
     }
+    
+    this.resetSwap();
+    this.setState({swapTxId});
+
     // 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, {
@@ -356,6 +359,7 @@ class Swap extends Component {
             removeError={error => this.props.removeError('inputErrors', error)}
             errors={inputErrors}
             value={input}
+            selectedTokenAddress={inputCurrency}
             shouldValidateBalance
             showSubButton={this.getIsUnapproved()}
             subButtonContent={this.renderSubButtonText()}
@@ -376,6 +380,7 @@ class Swap extends Component {
             removeError={error => this.props.removeError('outputErrors', error)}
             errors={outputErrors}
             value={output}
+            selectedTokenAddress={outputCurrency}
           />
           { this.renderExchangeRate() }
           {
@@ -437,6 +442,7 @@ export default withRouter(
       updateField: (name, value) => dispatch(updateField({ name, value })),
       addError: (name, value) => dispatch(addError({ name, value })),
       removeError: (name, value) => dispatch(removeError({ name, value })),
+      resetSwap: () => dispatch(resetSwap()),
       selectors: () => dispatch(selectors()),
     })
   ),