New my tokens

server.js

@@ -10,6 +10,7 @@ const env = {
   'API_KEY': 0,
   'ALCHEMY': process.env.ALCHEMY || 0,
   }
+
 console.log('ENV',env.NETWORK_ID)
 app.enable('trust proxy');
 app.use(function(req, res, next) {

src/actions/orderActions.js

@@ -131,12 +131,9 @@ export const sendListOrder = (formValues, account) => async dispatch => {
   dispatch(setProcessing(true));
 
   let { token, tokenAmount, price } = formValues;
-  console.log('token')
-  console.log(token)
   try {
     var staticAddresses = FactoryProvider.getStaticAddresses();
     const exchange = await Exchange.at(staticAddresses.exchange);
-
     const response = await exchange.list(token, tokenAmount, price * 1e18, {
       from: account,
       gas: 400000

src/components/ApprovalFormComponent.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Field } from 'redux-form';
 import { InputGroup } from 'reactstrap';
 import InputNumber from './InputNumber';
-import Select from './Select.js';
 
 export const ApprovalFormComponent = ({
   handleSubmit,

src/components/ApprovalFormContainer.js

@@ -22,7 +22,6 @@ export let ApprovalFormContainer = props => {
     <ApprovalFormComponent
       handleSubmit={props.handleSubmit}
       onSubmit={submitForm}
-      selectOptions={props.userTokens}
       positionInfo={props.positionInfo}
     />
   );
@@ -31,12 +30,10 @@ export let ApprovalFormContainer = props => {
 ApprovalFormContainer.propTypes = {
   sendApproveOrder: PropTypes.func.isRequired,
   userAccount: PropTypes.string,
-  userTokens: PropTypes.array,
   positionInfo: PropTypes.object,
 };
 
 const mapStateToProps = state => ({
-  userTokens: state.user.userTokens,
   userAccount: state.user.userAccount
 });
 

src/components/List.js

@@ -1,95 +1,26 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import ListFormContainer from './ListFormContainer';
-import ApprovalFormContainer from './ApprovalFormContainer';
 
-export class List extends Component {
-  constructor() {
-    super();
-    this.state = {
-      formOpen: false,
-      resultsMessage: ''
-    };
-
-    this.toggleFormVisibility = this.toggleFormVisibility.bind(this);
+export default class List extends Component {
+  constructor(props){
+    super(props);
+    this.toggleForm = this.toggleForm.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.listOrderError !== null) {
-      this.setState({
-        resultsMessage: `Error: ${nextProps.listOrderError}`,
-        formOpen: false
-      });
-    } else if (nextProps.listOrderId) {
-      this.setState({ resultsMessage: '', formOpen: false });
-      this.props.refreshPage(true);
-    } else if (nextProps.listOrderApproveError) {
-      this.setState({
-        resultsMessage: `Error: ${nextProps.listOrderApproveError}`,
-        formOpen: true
-      });
-    } else if (nextProps.listOrderApproved) {
-      this.setState({
-        resultsMessage: `Order approval confirmed`,
-        formOpen: true
-      });
-    }
+  toggleForm(positionInfo){
+  this.props.toggleFormVisibility(positionInfo);
   }
 
-  toggleFormVisibility() {
-    this.setState({
-      formOpen: !this.state.formOpen
-    });
-  }
-  renderOrderModal = () => (
-    this.state.formOpen || this.state.resultsMessage ? (
-      <div>
-        <div className="order-modal-background" onClick={this.closeOrderModal} />
-        <div className="order-modal">
-          <div id="buy-form">
-            <h4 className="order-modal-head">
-              { this.props.listOrderApproved ? <span>List Order</span> : <span>Approve Order</span> }
-            </h4>
-            { this.props.listOrderApproved ? <ListFormContainer positionInfo={this.props.positionInfo}/> : <ApprovalFormContainer positionInfo={this.props.positionInfo}/> }
-            {this.state.resultsMessage && (
-              <div id="results-message" className="text-center">
-                {this.state.resultsMessage}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    ) : (
-        null
-      )
-  );
-  closeOrderModal = () => this.setState({ formOpen: false, resultsMessage: "" });
   render() {
     return (
       <div>
-        <button className='btn btn-theme btn-thin' onClick={this.toggleFormVisibility}>List</button>
-        <div className="order-buttons">
-          {this.renderOrderModal()}
-        </div>
+        <button className='btn btn-theme btn-thin' onClick={this.toggleForm.bind(this, this.props.positionInfo)}>List</button>
       </div>
     );
   }
 }
+
 List.propTypes = {
-  listOrderId: PropTypes.string,
-  listOrderError: PropTypes.string,
-  listOrderApproved: PropTypes.bool,
-  listOrderApproveError: PropTypes.string,
-  refreshPage: PropTypes.func,
   positionInfo: PropTypes.object,
+  toggleFormVisibility: PropTypes.func,
 };
-
-const mapStateToProps = state => ({
-  listOrderId: state.order.list.id,
-  listOrderError: state.order.listOrderError,
-  listOrderApproved: state.order.list.approved,
-  listOrderApproveError: state.order.listOrderFundsError
-});
-
-export default connect(mapStateToProps, { })(List);

src/components/MyPositionsBulletin.js

@@ -5,8 +5,24 @@ import Loading from './Loading';
 import { SET_USER_POSITIONS } from '../actions/types';
 import { formatter } from '../formatter'
 import List from './List'
+import ListFormContainer from './ListFormContainer';
+import ApprovalFormContainer from './ApprovalFormContainer';
 
 export class MyPositionsBulletin extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      cashoutOpen: false,
+      detailsOpen: false,
+      formOpen: false,
+      resultsMessage: false,
+      approvedPosition: null,
+      chosenPositionInfo: null,
+    };
+
+    this.toggleFormVisibility = this.toggleFormVisibility.bind(this);
+  }
   formatPercent (val, empty) {
     if (!val) { return <span> {empty || '$0'} </span> }
     var cls = val < 0 ? 'warning' : 'success'
@@ -38,14 +54,43 @@ export class MyPositionsBulletin extends Component {
           <td>{balance}</td>
           <td>{date}</td>
           <td>
-            <List positionInfo={position} refreshPage={this.props.refreshPage}/>
+            <List positionInfo={position} toggleFormVisibility={this.toggleFormVisibility}/>
           </td>
         </tr>
       );
     });
     return rows;
   };
 
+  toggleFormVisibility(chosenPositionInfo) {
+    this.setState({
+      formOpen: !this.state.formOpen,
+      chosenPositionInfo: chosenPositionInfo,
+    });
+  }
+  renderOrderModal = () => (
+    this.state.formOpen || this.state.resultsMessage ? (
+      <div>
+        <div className="order-modal-background" onClick={this.closeOrderModal} />
+        <div className="order-modal">
+          <div id="buy-form">
+            <h4 className="order-modal-head">
+              { this.props.listOrderApproved ? <span>List Order</span> : <span>Approve Order</span> }
+            </h4>
+            { this.props.listOrderApproved ? <ListFormContainer positionInfo={this.state.chosenPositionInfo}/> : <ApprovalFormContainer positionInfo={this.state.chosenPositionInfo}/> }
+            {this.state.resultsMessage && (
+              <div id="results-message" className="text-center">
+                {this.state.resultsMessage}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    ) : (
+        null
+      )
+  );
+  closeOrderModal = () => this.setState({ formOpen: false, resultsMessage: "" });
   render() {
     return (
       <div className="wide-table-container">
@@ -61,6 +106,9 @@ export class MyPositionsBulletin extends Component {
           </thead>
           <tbody>{this.renderRows()}</tbody>
         </table>
+        <div className="order-buttons">
+          {this.renderOrderModal()}
+        </div>
       </div>
     );
   }
@@ -69,12 +117,20 @@ export class MyPositionsBulletin extends Component {
 MyPositionsBulletin.propTypes = {
   handleList: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired,
-  userPositions: PropTypes.array
+  userPositions: PropTypes.array,
+  listOrderId: PropTypes.string,
+  listOrderError: PropTypes.string,
+  listOrderApproved: PropTypes.bool,
+  listOrderApproveError: PropTypes.string,
 };
 
 const mapStateToProps = state => ({
   loading: state.status.fetchInProgress.includes(SET_USER_POSITIONS),
-  userPositions: state.user.userPositions
+  userPositions: state.user.userPositions,
+  listOrderId: state.order.list.id,
+  listOrderError: state.order.listOrderError,
+  listOrderApproved: state.order.list.approved,
+  listOrderApproveError: state.order.listOrderFundsError
 });
 
 export default connect(mapStateToProps,{ })(MyPositionsBulletin);