Add asset item

App/components/AssetList/Item.js

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+import { View } from "react-native";
+import { Text } from "react-native-elements";
+
+export default class AssetItem extends Component {
+  render() {
+    let { token, balance } = this.props;
+
+    return (
+      <View style={[{ flex: 1, flexDirection: "row", justifyContent: "flex-start", alignItems: "center", }]}>
+        <Text>{token.symbol.toString()}</Text>
+        <Text>{balance}</Text>
+      </View>
+    );
+  }
+}

App/components/AssetList/List.js

@@ -0,0 +1,33 @@
+import PropTypes from "prop-types";
+import React, { Component } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { List, ListItem } from "react-native-elements";
+import { connect } from "react-redux";
+import AssetItem from "./Item";
+
+class AssetList extends Component {
+  render() {
+    return (
+      <List containerStyle={{
+        marginBottom: 20,
+        flex: 1,
+        width: this.props.width
+      }}>
+        {
+          this.props.tokens
+          .filter(({ address }) => (Boolean(this.props.assets[token.address])))
+          .map((token, index) => (
+            <TouchableOpacity key={`asset-${index}`} onPress={() => (this.props.onPress(order))}>
+              <ListItem
+                title={<AssetItem token={token} balance={this.props.assets[token.address]} />}
+                leftIcon={{ name: "add" }}
+              />
+            </TouchableOpacity>
+          ))
+        }
+      </List>
+    );
+  }
+}
+
+export default connect((state) => ({ ...state.device.layout, ...state.settings, tokens: state.tokens, assets: state.assets }), (dispatch) => ({ dispatch }))(AssetList);

App/components/AssetList/index.js

@@ -0,0 +1,3 @@
+import AssetList from "./List";
+
+export default AssetList;

App/screens/OrderDetailsScreen.js

@@ -11,7 +11,7 @@ class OrderDetailsScreen extends Component {
     return {
       header: <NormalHeader navigation={navigation} />
     };
-  };  
+  };
 
   constructor(props) {
     super(props);

App/screens/PortfolioScreen.js

@@ -0,0 +1,15 @@
+import React, { Component } from "react";
+import { View, Text, TouchableHighlight } from "react-native";
+import { Card, Header, Icon } from "react-native-elements";
+import { connect } from "react-redux";
+import NormalHeader from "../headers/Normal";
+
+class PortfolioScreen extends Component {
+  render() {
+    return (
+      <AssetList tokens={this.props.tokens} />
+    );
+  }
+}
+
+export default connect(state => ({ address: state.wallet.address, tokens: state.tokens }), dispatch => ({ dispatch }))(PortfolioScreen);

App/screens/SendTokensScreen.js

@@ -2,8 +2,15 @@ import React, { Component } from "react";
 import { View, Text, TouchableHighlight } from "react-native";
 import { Card, Header, Icon } from "react-native-elements";
 import { connect } from "react-redux";
+import NormalHeader from "../headers/Normal";
 
 class SendTokensScreen extends Component {
+  static navigationOptions = ({ navigation }) => {
+    return {
+      header: <NormalHeader navigation={navigation} />
+    };
+  };
+
   render() {
     return (
       <Card title={this.props.address} />

constants/actions.js

@@ -7,4 +7,5 @@ export const SET_WALLET = "SET_WALLET";
 export const SET_BASE_TOKEN = "SET_BASE_TOKEN";
 export const SET_QUOTE_TOKEN = "SET_QUOTE_TOKEN";
 export const SET_TOKENS = "SET_TOKENS";
+export const SET_BALANCE = "SET_BALANCE";
 export const SET_NETWORK = "SET_NETWORK";

navigation.js

@@ -45,6 +45,7 @@ const TradingStack = StackNavigator({
 const WalletStack = StackNavigator({
   ReceiveTokens: { screen: ReceiveTokensScreen },
   SendTokens: { screen: SendTokensScreen },
+  Portfolio: { screen: PortfolioScreen },
 }, {
   initialRouteName: "ReceiveTokens",
   navigationOptions: ({ navigation }) => {
@@ -75,7 +76,7 @@ export default TabNavigator({
   Trading: { screen: TradingStack },
   Transactions: { screen: TransactionsStack }
 }, {
-  initialRouteName: "Trading",
+  initialRouteName: "Wallet",
   navigationOptions: ({ navigation }) => ({
     tabBarIcon: ({ focused, tintColor }) => {
       const { routeName } = navigation.state;

reducers/assets.js

@@ -0,0 +1,12 @@
+import * as _ from "lodash";
+import { handleActions } from "redux-actions";
+import * as Actions from "../constants/actions";
+
+export default handleActions({
+  [Actions.SET_BALANCE]: (state, action) => {
+    return {
+      ...state,
+      [ action.payload.address ]: action.payload.balance
+    }
+  }
+}, {});

reducers/index.js

@@ -1,4 +1,5 @@
 import { combineReducers } from "redux";
+import assets from "./assets";
 import device from "./device";
 import errors from "./errors";
 import navigation from "./navigation";
@@ -10,6 +11,7 @@ import transactions from "./transactions";
 import wallet from "./wallet";
 
 export default combineReducers({
+  assets,
   device,
   errors,
   navigation,

thunks/index.js

@@ -1,3 +1,4 @@
-export * from "./ethereum";
-export * from "./startup";
 export * from "./trade";
+export * from "./transactions";
+export * from "./tokens";
+export * from "./wallet";

thunks/startup.js → thunks/tokens.js

@@ -4,20 +4,6 @@ import Wallet from "ethereumjs-wallet";
 import { setWallet, setTokens, setQuoteToken, setBaseToken, finishedLoadingTokens, finishedLoadingWallet } from "../actions";
 import { getZeroExClient } from "../utils/ethereum";
 
-export function loadWallet() {
-  return async (dispatch) => {
-    let privateKey = await AsyncStorage.getItem("wallet");
-    if (privateKey) {
-      let wallet = Wallet.fromPrivateKey(Buffer.from(privateKey, "hex"));
-      dispatch(setWallet(wallet));
-      dispatch(finishedLoadingWallet());
-      return wallet;
-    } else {
-      return null;
-    }
-  };
-}
-
 export function loadTokens() {
   return async (dispatch, getState) => {
     let { wallet: { web3 } } = getState();

thunks/wallet.js

@@ -0,0 +1,29 @@
+import * as _ from "lodash";
+import { AsyncStorage } from "react-native";
+import Wallet from "ethereumjs-wallet";
+import { setWallet, setTokens, setQuoteToken, setBaseToken, finishedLoadingTokens, finishedLoadingWallet } from "../actions";
+import { getZeroExClient } from "../utils/ethereum";
+
+// Would like to password protect using Ethereum Secret Storage
+// `wallet.toV3("nopass")` is very expensive.
+export function generateWallet() {
+  return async (dispatch) => {
+    let wallet = await Wallet.generate();
+    await AsyncStorage.setItem("wallet", wallet.getPrivateKey().toString("hex"));
+    dispatch(setWallet(wallet));
+  };
+}
+
+export function loadWallet() {
+  return async (dispatch) => {
+    let privateKey = await AsyncStorage.getItem("wallet");
+    if (privateKey) {
+      let wallet = Wallet.fromPrivateKey(Buffer.from(privateKey, "hex"));
+      dispatch(setWallet(wallet));
+      dispatch(finishedLoadingWallet());
+      return wallet;
+    } else {
+      return null;
+    }
+  };
+}