Change error handling

webnandroid · Mar 2, 2018 · 2ffc49d · 2ffc49d
1 parent a9853f7
commit 2ffc49d
Show file tree

Hide file tree

Showing 23 changed files with 280 additions and 191 deletions.
diff --git a/App/Error.js b/App/Error.js
@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+import { Button, Card } from "react-native-elements";
+import Icon from "react-native-vector-icons/MaterialIcons";
+import { connect } from "react-redux";
+import { setError } from "../actions";
+
+class Err extends Component {
+  leave = () => {
+    this.props.dispatch(setError(null));
+  };
+
+  render() {
+    let { message } = this.props.error;
+
+    return (
+      <Card title={message}>
+        <Button
+            large
+            text="Get Out Of Here"
+            icon={<Icon name="refresh" color="white" />}
+            buttonStyle={{ borderRadius: 0 }}
+            onPress={this.leave} />
+      </Card>
+    );
+  }
+}
+
+export default connect((state) => ({ }), dispatch => ({ dispatch }))(Err);
diff --git a/App/Onboarding.js b/App/Onboarding.js
@@ -15,13 +15,12 @@ class Onboarding extends Component {
         <Card title="Create Your Wallet">
           <Button
             large
-            icon={{ name: "cached" }}
-            title="Generate"
+            text="Generate"
             onPress={this.submit} />
         </Card>
       </View>
     );
   }
 }
 
-export default connect(() => ({}), dispatch => ({ dispatch }))(Onboarding);
+export default connect(() => ({}), dispatch => ({ dispatch }))(Onboarding);
diff --git a/App/Startup.js b/App/Startup.js
@@ -2,47 +2,56 @@ import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { View, Text } from "react-native";
 import { connect } from "react-redux";
-import { finishedStartup } from "../actions";
+import { setError } from "../actions";
 import { loadAssets, loadWallet, loadProductsAndTokens } from "../thunks";
 
 class Startup extends Component {
-  componentDidMount() {
-    this.props.dispatch(loadWallet());
-  }
+  constructor(props) {
+    super(props);
 
-  async componentWillReceiveProps(nextProps) {
-    if (nextProps.wallet && !nextProps.products) {
-      this.props.dispatch(loadProductsAndTokens())
+    this.state = {
+      finished: false
     }
+  }
 
-    if (nextProps.wallet && nextProps.products && !nextProps.assets) {
-      this.props.dispatch(loadAssets())
+  async componentDidMount(nextProps) {
+    try {
+      await this.props.dispatch(loadWallet());
+      await this.props.dispatch(loadProductsAndTokens());
+      await this.props.dispatch(loadAssets(true));
+    } catch(err) {
+      setError(err);
+    } finally {
+      this.setState({ finished: true });
     }
   }
 
   render() {
     let Splash = this.props.splashComponent;
     let Main = this.props.mainComponent;
     let Onboarding = this.props.onboardingComponent;
+    let Err = this.props.errorComponent;
+
+    if (this.props.error) {
+      return <Err error={this.props.error} />;
+    }
 
-    if (this.props.wallet && this.props.products) {
-      if (this.props.web3) {
-        return (
-          <Main />
-        );
-      } else {
-        return (
-          <Onboarding />
-        );
-      }
-    } else {
+    if (!this.state.finished) {
       return (
         <Splash />
       );
     }
 
-
+    if (!this.props.web3) {
+      return (
+        <Onboarding />
+      );
+    }
+
+    return (
+      <Main />
+    );
   }
 }
 
-export default connect((state) => ({ ...state.startup, web3: state.wallet.web3 }), dispatch => ({ dispatch }))(Startup);
+export default connect((state) => ({ web3: state.wallet.web3, error: state.error }), dispatch => ({ dispatch }))(Startup);
diff --git a/App/components/OrderList/Item.js b/App/components/OrderList/Item.js
@@ -27,9 +27,6 @@ class OrderItem extends Component {
       // This should not happen... get of here!
     }
 
-    console.warn(price, quoteToken.decimals);
-    console.warn(amount, baseToken.decimals);
-
     return (
       <View>
         <View style={styles.container}>

diff --git a/App/headers/Trading.js b/App/headers/Trading.js
@@ -10,6 +10,11 @@ export default class extends Component {
 
     return (
       <Header
+        leftComponent={(
+          <TouchableOpacity onPress={() => this.props.navigation.navigate("MyOrders")}>
+            <Icon name="person" color="white" />
+          </TouchableOpacity>
+        )}
         centerComponent={{ text: "Mobidex", style: { color: "white" } }}
         rightComponent={(
           <TouchableOpacity onPress={() => this.props.navigation.navigate("CreateOrder")}>

diff --git a/App/index.js b/App/index.js
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { StackNavigator, TabNavigator } from "react-navigation";
 import { Provider } from "react-redux";
 import configureStore from "../store";
+import Err from "./Error";
 import Main from "./Main";
 import Onboarding from "./Onboarding";
 import Startup from "./Startup";
@@ -13,7 +14,7 @@ export default class App extends Component {
   render() {
     return (
       <Provider store={store}>
-        <Startup splashComponent={Splash} mainComponent={Main} onboardingCompnent={Onboarding} />
+        <Startup splashComponent={Splash} mainComponent={Main} onboardingCompnent={Onboarding} errorComponent={Err} />
       </Provider>
     );
   }

diff --git a/App/screens/MyOrdersScreen.js b/App/screens/MyOrdersScreen.js
@@ -0,0 +1,69 @@
+import * as _ from "lodash";
+import React, { Component } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { List, ListItem } from "react-native-elements";
+import { connect } from "react-redux";
+import { setBaseToken, setQuoteToken } from "../../actions";
+import { loadOrders } from "../../thunks";
+import { productTokenAddresses } from "../../utils/orders";
+import OrderList from "../components/OrderList";
+import TokenFilterBar from "../components/TokenFilterBar";
+import NormalHeader from "../headers/Normal";
+
+class MyOrdersScreen extends Component {
+  static navigationOptions = ({ navigation }) => {
+    return {
+      header: <NormalHeader navigation={navigation} />
+    };
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      filteredOrders: [],
+      quoteTokens: [],
+      baseTokens: []
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    let { address, tokens, orders, products, quoteToken, baseToken } = nextProps;
+
+    let filteredOrders = orders
+    .filter(order => order.maker === address || order.taker === address)
+    .filter(order => order.makerTokenAddress === quoteToken.address || order.takerTokenAddress === quoteToken.address);
+    let quoteTokens = productTokenAddresses(products, "tokenB").map(address => _.find(tokens, { address }));
+    let baseTokens = productTokenAddresses(products, "tokenA").map(address => _.find(tokens, { address }));
+
+    this.setState({ filteredOrders, quoteTokens, baseTokens });
+  }
+
+  componentDidMount() {
+    this.props.dispatch(loadOrders());
+  }
+
+  render() {
+    let { quoteToken, baseToken } = this.props;
+    let { filteredOrders, quoteTokens, baseTokens } = this.state;
+
+    return (
+      <View>
+        <TokenFilterBar
+            quoteTokens={quoteTokens}
+            baseTokens={baseTokens}
+            selectedQuoteToken={quoteToken}
+            selectedBaseToken={baseToken}
+            onQuoteTokenSelect={quoteToken => this.props.dispatch(setQuoteToken(quoteToken))}
+            onBaseTokenSelect={baseToken => this.props.dispatch(setBaseToken(baseToken))} />
+        <OrderList
+            quoteToken={quoteToken}
+            baseToken={baseToken}
+            orders={filteredOrders}
+            onPress={order => (this.props.navigation.navigate("OrderDetails", { order, quoteToken, baseToken }))} />
+      </View>
+    );
+  }
+}
+
+export default connect((state) => ({ ...state.device, ...state.settings, ...state.wallet, ...state.relayer }), (dispatch) => ({ dispatch }))(MyOrdersScreen);
diff --git a/App/screens/OrderDetailsScreen.js b/App/screens/OrderDetailsScreen.js
@@ -32,10 +32,16 @@ class OrderDetailsScreen extends Component {
     this.props.dispatch(fillOrder(order));
   };
 
+  cancelOrder = async () => {
+    const { navigation: { state: { params: { order } } } } = this.props;
+
+    this.props.dispatch(cancelOrder(order));
+  };
+
   render() {
     const { navigation: { state: { params: { order, quoteToken } } } } = this.props;
     const { tokens, address } = this.props;
-    const isMine = order.maker === address && false;
+    const isMine = order.maker === address;
     const orderType = quoteToken.address === order.makerTokenAddress ? "bid" : "ask";
     let amount = null;
     let amountSymbol = null;
@@ -99,10 +105,17 @@ class OrderDetailsScreen extends Component {
         </View>
 
         {!isMine ? (<Button
-                    large
-                    icon={<Icon name="send" size={20} color="white" />}
-                    onPress={this.fillOrder}
-                    text="Fill Order" />) : null}
+            large
+            icon={<Icon name="send" size={20} color="white" />}
+            onPress={this.fillOrder}
+            text="Fill Order"
+            style={[ styles.button ]} />) : null}
+        {isMine ? (<Button
+            large
+            icon={<Icon name="cancel" size={20} color="white" />}
+            onPress={this.cancelOrder}
+            text="Cancel Order"
+            style={[ styles.button ]} />) : null}
       </Card>
     );
   }
@@ -125,8 +138,11 @@ function getStyles(height) {
     },
     container: {
       height: height
+    },
+    button: {
+      marginTop: 10
     }
   });
 }
 
-export default connect(state => ({ ...state.relayer, ...state.wallet, ...state.device.layout }), dispatch => ({ dispatch }))(OrderDetailsScreen);
+export default connect(state => ({ ...state.device, ...state.settings, ...state.wallet, ...state.relayer }), dispatch => ({ dispatch }))(OrderDetailsScreen);
diff --git a/App/screens/TradingScreen.js b/App/screens/TradingScreen.js
@@ -5,32 +5,40 @@ import { List, ListItem } from "react-native-elements";
 import { connect } from "react-redux";
 import { setBaseToken, setQuoteToken } from "../../actions";
 import { loadOrders } from "../../thunks";
+import { productTokenAddresses } from "../../utils/orders";
 import OrderList from "../components/OrderList";
 import TradingInfo from "../components/TradingInfo";
 import TokenFilterBar from "../components/TokenFilterBar";
 
 class TradingScreen extends Component {
-  componentDidMount() {
-    this.props.dispatch(loadOrders());
-  }
+  constructor(props) {
+    super(props);
 
-  filteredOrders() {
-    return this.props.orders.filter(order => order.makerTokenAddress === this.props.quoteToken.address || order.takerTokenAddress === this.props.quoteToken.address)
+    this.state = {
+      filteredOrders: [],
+      quoteTokens: [],
+      baseTokens: []
+    };
   }
 
-  quoteTokens() {
-    return _.uniqBy(this.props.products.map(p => p.tokenB).map(t => _.find(this.props.tokens, { address: t.address })), "address");
+  componentWillReceiveProps(nextProps) {
+    let { tokens, orders, products, quoteToken, baseToken } = nextProps;
+
+    let filteredOrders = orders
+    .filter(order => order.makerTokenAddress === quoteToken.address || order.takerTokenAddress === quoteToken.address);
+    let quoteTokens = productTokenAddresses(products, "tokenB").map(address => _.find(tokens, { address }));
+    let baseTokens = productTokenAddresses(products, "tokenA").map(address => _.find(tokens, { address }));
+
+    this.setState({ filteredOrders, quoteTokens, baseTokens });
   }
 
-  baseTokens() {
-    return _.uniqBy(this.props.products.map(p => p.tokenA).map(t => _.find(this.props.tokens, { address: t.address })), "address");
+  componentDidMount() {
+    this.props.dispatch(loadOrders());
   }
 
   render() {
     let { quoteToken, baseToken } = this.props;
-    let quoteTokens = this.quoteTokens();
-    let baseTokens = this.baseTokens();
-    let orders = this.filteredOrders();
+    let { filteredOrders, quoteTokens, baseTokens } = this.state;
 
     return (
       <View>
@@ -41,11 +49,11 @@ class TradingScreen extends Component {
             selectedBaseToken={baseToken}
             onQuoteTokenSelect={quoteToken => this.props.dispatch(setQuoteToken(quoteToken))}
             onBaseTokenSelect={baseToken => this.props.dispatch(setBaseToken(baseToken))} />
-        <TradingInfo orders={orders} />
+        <TradingInfo orders={filteredOrders} />
         <OrderList
             quoteToken={quoteToken}
             baseToken={baseToken}
-            orders={orders}
+            orders={filteredOrders}
             onPress={order => (this.props.navigation.navigate("OrderDetails", { order, quoteToken, baseToken }))} />
       </View>
     );

diff --git a/App/screens/LoadingScreen.js → App/screens/TransactionsProcessingScreen.js b/App/screens/LoadingScreen.js → App/screens/TransactionsProcessingScreen.js
@@ -1,10 +1,10 @@
 import React, { Component } from "react";
 import { Card } from "react-native-elements";
 
-export default class LoadingScreen extends Component {
+export default class TransactionsProcessingScreen extends Component {
   render() {
     return (
-      <Card title="Loading" />
+      <Card title="Processing Transactions" />
     );
   }
 }
diff --git a/actions/index.js b/actions/index.js
@@ -1,18 +1,14 @@
 import { createAction } from "redux-actions";
 import * as Actions from "../constants/actions";
 
-export const addErrors = createAction(Actions.ADD_ERRORS);
 export const addOrders = createAction(Actions.ADD_ORDERS);
-export const addProcessingOrders = createAction(Actions.ADD_PROCESSING_ORDERS);
 export const addTransactions = createAction(Actions.ADD_TRANSACTIONS);
 export const addAssets = createAction(Actions.ADD_ASSETS);
-export const finishedLoadingProducts = createAction(Actions.FINISHED_LOADING_PRODUCTS);
-export const finishedLoadingWallet = createAction(Actions.FINISHED_LOADING_WALLET);
-export const removeProcessingOrders = createAction(Actions.REMOVE_PROCESSING_ORDERS);
-export const setWallet = createAction(Actions.SET_WALLET);
-export const setProducts = createAction(Actions.SET_PRODUCTS);
 export const setBaseToken = createAction(Actions.SET_BASE_TOKEN);
+export const setError = createAction(Actions.SET_ERROR);
 export const setQuoteToken = createAction(Actions.SET_QUOTE_TOKEN);
+export const setProducts = createAction(Actions.SET_PRODUCTS);
+export const setWallet = createAction(Actions.SET_WALLET);
 export const setTokens = createAction(Actions.SET_TOKENS);
 export const setNetwork = createAction(Actions.SET_NETWORK);