Attempt to improve performance

App/components/UnlockButton.js

@@ -18,14 +18,12 @@ class UnlockButton extends React.Component {
 
   render() {
     const { assetData, dispatch, ...rest } = this.props;
-    const assetOrWETH =
-      assetData !== null
-        ? AssetService.findAssetByData(assetData)
-        : AssetService.getWETHAsset();
+    const asset = AssetService.findAssetByData(assetData);
+
     return (
       <Button
         icon={<FontAwesome name="lock" size={20} color="white" />}
-        title={`Unlock ${formatSymbol(assetOrWETH.symbol)}`}
+        title={`Unlock ${formatSymbol(asset.symbol)}`}
         {...rest}
         onPress={this.toggleApprove}
       />
@@ -34,13 +32,12 @@ class UnlockButton extends React.Component {
 
   toggleApprove = () => {
     const { assetData } = this.props;
-    const assetOrWETH =
-      assetData !== null
-        ? AssetService.findAssetByData(assetData)
-        : AssetService.getWETHAsset();
+    const asset = assetData
+      ? AssetService.findAssetByData(assetData)
+      : AssetService.getWETHAsset();
 
     this.props.dispatch(
-      approve(this.props.navigation.componentId, assetOrWETH.assetData)
+      approve(this.props.navigation.componentId, asset.assetData)
     );
   };
 }

App/screens/trade/ProductScreen/QuoteLoadingItem.js

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { fonts } from '../../../../styles';
+import DayChange from '../../../components/DayChange';
+import OrderbookPrice from '../../../views/OrderbookPrice';
+import TokenItem from './TokenItem';
+
+class QuoteLoadingItem extends Component {
+  static get propTypes() {
+    return {
+      quoteToken: PropTypes.object,
+      baseToken: PropTypes.object
+    };
+  }
+
+  render() {
+    const { quoteToken, baseToken } = this.props;
+
+    if (!quoteToken) return null;
+    if (!baseToken) return null;
+
+    return (
+      <TokenItem
+        change={
+          <DayChange
+            quoteAssetData={quoteToken.assetData}
+            baseAssetData={baseToken.assetData}
+            style={[fonts.large]}
+          />
+        }
+        price={
+          <OrderbookPrice
+            quoteAssetData={quoteToken.assetData}
+            baseAssetData={baseToken.assetData}
+            side={'buy'}
+            style={[fonts.large]}
+          />
+        }
+        {...this.props}
+      />
+    );
+  }
+}
+
+export default connect(state => ({ ticker: state.ticker }))(QuoteLoadingItem);

App/screens/trade/ProductScreen/base.js

@@ -6,10 +6,92 @@ import * as AssetService from '../../../../services/AssetService';
 import { initialLoad } from '../../../../thunks';
 import { connect as connectNavigation } from '../../../../navigation';
 import { navigationProp } from '../../../../types/props';
+import {
+  loadOrderbook,
+  updateForexTicker,
+  updateForexTickers,
+  updateTokenTicker,
+  updateTokenTickers
+} from '../../../../thunks';
 import EmptyList from '../../../components/EmptyList';
 import MutedText from '../../../components/MutedText';
 import QuoteForexItem from './QuoteForexItem';
 import QuoteTokenItem from './QuoteTokenItem';
+import QuoteLoadingItem from './QuoteLoadingItem';
+
+class BaseProductItem extends Component {
+  static get propTypes() {
+    return {
+      navigation: navigationProp.isRequired,
+      quoteAssetData: PropTypes.string.isRequired,
+      baseAssetData: PropTypes.string.isRequired,
+      showForexPrices: PropTypes.bool.isRequired,
+      dispatch: PropTypes.func.isRequired
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      loading: true
+    };
+  }
+
+  componentDidMount() {
+    this.onRefresh(false);
+  }
+
+  render() {
+    const quote = AssetService.findAssetByData(this.props.quoteAssetData);
+    const base = AssetService.findAssetByData(this.props.baseAssetData);
+
+    if (this.state.loading) {
+      <QuoteLoadingItem quoteToken={quote} baseToken={base} />;
+    }
+
+    const Component = this.props.showForexPrices
+      ? QuoteForexItem
+      : QuoteTokenItem;
+
+    return (
+      <TouchableOpacity
+        onPress={() =>
+          this.props.navigation.push('navigation.trade.ProductDetails', {
+            base,
+            quote
+          })
+        }
+      >
+        <Component quoteToken={quote} baseToken={base} />
+      </TouchableOpacity>
+    );
+  }
+
+  async onRefresh(reload = true) {
+    const quote = AssetService.findAssetByData(this.props.quoteAssetData);
+    const base = AssetService.findAssetByData(this.props.baseAssetData);
+
+    this.setState({ loading: true });
+    await Promise.all([
+      this.props.dispatch(updateForexTicker(base.symbol, reload)),
+      this.props.dispatch(updateTokenTicker(base.symbol, quote.symbol, reload)),
+      this.props.dispatch(
+        loadOrderbook(base.assetData, quote.assetData, reload)
+      )
+    ]);
+    this.setState({ loading: false });
+  }
+}
+
+const ProductItem = connect(
+  state => ({
+    assets: state.relayer.assets,
+    products: state.relayer.products,
+    showForexPrices: state.settings.showForexPrices
+  }),
+  dispatch => ({ dispatch })
+)(connectNavigation(BaseProductItem));
 
 class BaseProductScreen extends Component {
   static get propTypes() {
@@ -32,30 +114,18 @@ class BaseProductScreen extends Component {
 
   render() {
     const { products } = this.props;
-    const ProductItem = this.props.showForexPrices
-      ? QuoteForexItem
-      : QuoteTokenItem;
 
     return (
       <FlatList
         data={products}
         keyExtractor={(item, index) => `token-${index}`}
-        renderItem={({ item, index }) => {
-          const quote = AssetService.findAssetByData(item.assetDataA.assetData);
-          const base = AssetService.findAssetByData(item.assetDataB.assetData);
-          return (
-            <TouchableOpacity
-              onPress={() =>
-                this.props.navigation.push('navigation.trade.ProductDetails', {
-                  base,
-                  quote
-                })
-              }
-            >
-              <ProductItem quoteToken={quote} baseToken={base} />
-            </TouchableOpacity>
-          );
-        }}
+        renderItem={({ item, index }) => (
+          <ProductItem
+            quoteAssetData={item.assetDataA.assetData}
+            baseAssetData={item.assetDataB.assetData}
+            key={`product-${index}`}
+          />
+        )}
         refreshing={this.state.refreshing}
         onRefresh={() => this.onRefresh()}
         ListEmptyComponent={() => (
@@ -76,6 +146,8 @@ class BaseProductScreen extends Component {
   async onRefresh(reload = true) {
     this.setState({ refreshing: true });
     await this.props.dispatch(initialLoad(reload ? 3 : 0));
+    this.props.dispatch(updateForexTickers(reload));
+    this.props.dispatch(updateTokenTickers(reload));
     this.setState({ refreshing: false });
   }
 }

App/views/ForexBalanceByAssetData.js

@@ -1,4 +1,3 @@
-import { assetDataUtils } from '0x.js';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { ZERO } from '../../constants/0x';
@@ -26,9 +25,7 @@ export default class ForexBalanceByAssetData extends Component {
       return <FormattedForexAmount {...this.props} amount={ZERO} />;
     }
 
-    const balance = WalletService.getBalanceByAddress(
-      assetDataUtils.decodeERC20AssetData(asset.assetData).tokenAddress
-    );
+    const balance = WalletService.getBalanceByAssetData(this.props.assetData);
     const price = TickerService.getCurrentPrice(
       TickerService.getForexTicker(asset.symbol)
     );

App/views/TokenBalanceByAssetData.js

@@ -1,4 +1,3 @@
-import { assetDataUtils } from '0x.js';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { ZERO } from '../../constants/0x';
@@ -18,9 +17,7 @@ export default class TokenBalanceByAssetData extends Component {
 
   render() {
     const { assetData, showSymbol } = this.props;
-    const asset = assetData
-      ? AssetService.findAssetByData(assetData)
-      : AssetService.getWETHAsset();
+    const asset = AssetService.findAssetByData(assetData);
 
     if (!asset) {
       return (
@@ -33,10 +30,7 @@ export default class TokenBalanceByAssetData extends Component {
       );
     }
 
-    const { tokenAddress } = assetDataUtils.decodeERC20AssetData(
-      asset.assetData
-    );
-    const balance = WalletService.getBalanceByAddress(tokenAddress);
+    const balance = WalletService.getBalanceByAssetData(asset.assetData);
 
     return (
       <FormattedTokenAmount

App/views/TokenBalanceBySymbol.js

@@ -1,4 +1,3 @@
-import { assetDataUtils } from '0x.js';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { ZERO } from '../../constants/0x';
@@ -18,9 +17,7 @@ export default class TokenBalanceBySymbol extends Component {
 
   render() {
     const { symbol, showSymbol } = this.props;
-    const asset = symbol
-      ? AssetService.findAssetBySymbol(symbol)
-      : AssetService.getWETHAsset();
+    const asset = AssetService.findAssetBySymbol(symbol);
 
     if (!asset) {
       return (
@@ -33,10 +30,7 @@ export default class TokenBalanceBySymbol extends Component {
       );
     }
 
-    const { tokenAddress } = assetDataUtils.decodeERC20AssetData(
-      asset.assetData
-    );
-    const balance = WalletService.getBalanceByAddress(tokenAddress);
+    const balance = WalletService.getBalanceByAssetData(asset.assetData);
 
     return (
       <FormattedTokenAmount

App/views/TokenLockByAssetData.js

@@ -1,4 +1,3 @@
-import { assetDataUtils } from '0x.js';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Icon from 'react-native-vector-icons/FontAwesome';
@@ -16,17 +15,13 @@ export default class TokenLockByAssetData extends Component {
 
   render() {
     const { assetData } = this.props;
-    const asset = assetData
-      ? AssetService.findAssetByData(assetData)
-      : AssetService.getWETHAsset();
+    const asset = AssetService.findAssetByData(assetData);
 
     if (!asset) {
       return <Icon color="white" {...this.props} name="lock" size={20} />;
     }
 
-    const isUnlocked = WalletService.isUnlockedByAddress(
-      assetDataUtils.decodeERC20AssetData(asset.assetData).tokenAddress
-    );
+    const isUnlocked = WalletService.isUnlockedByAssetData(asset.assetData);
 
     if (isUnlocked) {
       return <Icon color="white" {...this.props} name="unlock" size={20} />;

services/WalletService.js

@@ -265,8 +265,12 @@ export function getAllowanceBySymbol(symbol) {
 }
 
 export function isUnlockedByAssetData(assetData) {
-  const address = assetDataUtils.decodeERC20AssetData(assetData).tokenAddress;
-  return isUnlockedByAddress(address);
+  if (assetData) {
+    const address = assetDataUtils.decodeERC20AssetData(assetData).tokenAddress;
+    return isUnlockedByAddress(address);
+  } else {
+    return true;
+  }
 }
 
 export function isUnlockedByAddress(address) {

thunks/boot.js

@@ -13,8 +13,8 @@ export function initialLoad(forceLevel = 0) {
     await Promise.all([
       dispatch(loadAllowances(forceLevel > 2)),
       dispatch(loadBalances(forceLevel > 2)),
-      dispatch(updateForexTickers(forceLevel > 1)),
-      dispatch(updateTokenTickers(forceLevel > 1)),
+      // dispatch(updateForexTickers(forceLevel > 1)),
+      // dispatch(updateTokenTickers(forceLevel > 1)),
       dispatch(loadOrderbooks(forceLevel > 1)),
       dispatch(loadOrders(forceLevel > 1)),
       dispatch(loadActiveTransactions(forceLevel > 0))

thunks/inf0x.js

@@ -1,5 +1,8 @@
 import * as _ from 'lodash';
-import { updateForexTicker, updateTokenTicker } from '../actions';
+import {
+  updateForexTicker as _updateForexTicker,
+  updateTokenTicker as _updateTokenTicker
+} from '../actions';
 import Inf0xClient from '../clients/inf0x';
 
 export function updateForexTickers(force = false) {
@@ -11,7 +14,19 @@ export function updateForexTickers(force = false) {
     const client = new Inf0xClient(inf0xEndpoint, { network });
     const products = assets.map(({ symbol }) => `${symbol}-${forexCurrency}`);
     const jsonResponse = await client.getForexTicker(products, force);
-    dispatch(updateForexTicker(jsonResponse));
+    dispatch(_updateForexTicker(jsonResponse));
+  };
+}
+
+export function updateForexTicker(symbol, force = false) {
+  return async (dispatch, getState) => {
+    let {
+      settings: { network, forexCurrency, inf0xEndpoint }
+    } = getState();
+    const client = new Inf0xClient(inf0xEndpoint, { network });
+    const product = `${symbol}-${forexCurrency}`;
+    const jsonResponse = await client.getForexTicker([product], force);
+    dispatch(_updateForexTicker(jsonResponse));
   };
 }
 
@@ -30,6 +45,18 @@ export function updateTokenTickers(force = false) {
       .filter(([tokenA, tokenB]) => tokenA && tokenB)
       .map(([tokenA, tokenB]) => `${tokenB.symbol}-${tokenA.symbol}`);
     const jsonResponse = await client.getTokenTicker(_products, force);
-    dispatch(updateTokenTicker(jsonResponse));
+    dispatch(_updateTokenTicker(jsonResponse));
+  };
+}
+
+export function updateTokenTicker(baseSymbol, quoteSymbol, force = false) {
+  return async (dispatch, getState) => {
+    const {
+      settings: { network, inf0xEndpoint }
+    } = getState();
+    const client = new Inf0xClient(inf0xEndpoint, { network });
+    const product = `${baseSymbol}-${quoteSymbol}`;
+    const jsonResponse = await client.getTokenTicker([product], force);
+    dispatch(_updateTokenTicker(jsonResponse));
   };
 }