From 61db90f62e27119fe3404bb8e62b97fc89b5b948 Mon Sep 17 00:00:00 2001
From: Neil <neilasjoseph@gmail.com>
Date: Thu, 22 Nov 2018 12:49:21 +0000
Subject: [PATCH] add token placeholder

---
 .../Market/Overview/MarketList/index.jsx      | 20 ++++++++++++++-----
 .../Overview/TokenPage/TokenCard/index.jsx    | 20 +++++++++++++------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/shared/screens/Market/Overview/MarketList/index.jsx b/shared/screens/Market/Overview/MarketList/index.jsx
index e46129cbd..1acfc7c83 100644
--- a/shared/screens/Market/Overview/MarketList/index.jsx
+++ b/shared/screens/Market/Overview/MarketList/index.jsx
@@ -13,6 +13,7 @@ import abbreviate from 'number-abbreviate'
 import { filterBgColor } from 'utils'
 import { ASSET_FRACTION } from 'constants/market'
 import messages from 'resources/messages'
+import Images from 'resources/images'
 import styles from './styles'
 
 @connect(
@@ -24,14 +25,17 @@ import styles from './styles'
   { withRef: true }
 )
 class ListItem extends Component {
-  shouldComponentUpdate(nextProps) {
+  state = { imageFallback: false }
+
+  shouldComponentUpdate(nextProps, nextState) {
     return (
       nextProps.item.get('price_usd') !== this.props.item.get('price_usd') ||
       nextProps.item.get('volume_24h_usd') !== this.props.item.get('volume_24h_usd') ||
       nextProps.item.get('market_cap_usd') !== this.props.item.get('market_cap_usd') ||
       nextProps.item.get('available_supply') !== this.props.item.get('available_supply') ||
       nextProps.item.get('percent_change_1h') !== this.props.item.get('percent_change_1h') ||
-      nextProps.item.get('percent_change_7d') !== this.props.item.get('percent_change_7d')
+      nextProps.item.get('percent_change_7d') !== this.props.item.get('percent_change_7d') ||
+      nextState.imageFallback !== this.state.imageFallback
     )
   }
 
@@ -49,10 +53,16 @@ class ListItem extends Component {
             /> */}
             <FastImage
               style={styles.icon}
-              source={{
-                uri: `https://cdn.bitportal.io/tokenicon/32/color/${item.get('symbol')?.toLowerCase()}.png`
-              }}
+              source={
+                this.state.imageFallback
+                  ? Images.default_icon
+                  : {
+                      uri: `https://cdn.bitportal.io/tokenicon/32/color/${item.get('symbol')?.toLowerCase()}.png`
+                    }
+              }
+              onError={() => this.setState({ imageFallback: true })}
             />
+            {/* <View style={{ height: 40, width: 40, backgroundColor: 'red' }} /> */}
           </View>
 
           <View
diff --git a/shared/screens/Market/Overview/TokenPage/TokenCard/index.jsx b/shared/screens/Market/Overview/TokenPage/TokenCard/index.jsx
index f3a4943af..342016503 100644
--- a/shared/screens/Market/Overview/TokenPage/TokenCard/index.jsx
+++ b/shared/screens/Market/Overview/TokenPage/TokenCard/index.jsx
@@ -11,6 +11,7 @@ import abbreviate from 'number-abbreviate'
 import * as tokenActions from 'actions/token'
 
 import messages from 'resources/messages'
+import Images from 'resources/images'
 import styles from './styles'
 
 const Tag = props => (
@@ -30,7 +31,7 @@ const Tag = props => (
 @connect(
   state => ({
     locale: state.intl.get('locale'),
-    token: state.token.get('data'),
+    token: state.token.get('data')
     // ticker: tokenTickerSelector(state),
   }),
   dispatch => ({
@@ -45,6 +46,8 @@ const Tag = props => (
   { withRef: true }
 )
 export default class TokenCard extends Component {
+  state = { imageFallback: false }
+
   componentWillUnmount() {
     InteractionManager.runAfterInteractions(() => {
       this.props.actions.clearToken()
@@ -62,9 +65,14 @@ export default class TokenCard extends Component {
             <View style={styles.titleWrapper}>
               <FastImage
                 style={styles.icon}
-                source={{
-                  uri: `https://cdn.bitportal.io/tokenicon/128/color/${token.get('symbol')?.toLowerCase()}.png`
-                }}
+                source={
+                  this.state.imageFallback
+                    ? Images.default_icon
+                    : {
+                        uri: `https://cdn.bitportal.io/tokenicon/128/color/${token.get('symbol')?.toLowerCase()}.png`
+                      }
+                }
+                onError={() => this.setState({ imageFallback: true })}
               />
 
               <View
@@ -78,8 +86,8 @@ export default class TokenCard extends Component {
                     {token.size === 0
                       ? ticker.get('symbol')
                       : locale === 'zh'
-                        ? token.get('name_zh') && token.get('name_zh').trim()
-                        : token.get('name_en') && token.get('name_en')}
+                      ? token.get('name_zh') && token.get('name_zh').trim()
+                      : token.get('name_en') && token.get('name_en')}
                   </Text>
                 </View>
                 <View