From 67871312a46326ad9c7348998671d8675c6b823f Mon Sep 17 00:00:00 2001
From: Mikhail Mikheev <mdoublemmm@gmail.com>
Date: Fri, 22 Mar 2019 15:49:11 +0400
Subject: [PATCH] show token placeholder if there was an error fetching the
 image

---
 src/components/layout/Img/index.jsx           |  23 +++-------
 .../Tokens/assets/token_placeholder.png       | Bin 0 -> 108 bytes
 .../safe/component/Balances/Tokens/index.jsx  |  42 +++++++++++++-----
 3 files changed, 38 insertions(+), 27 deletions(-)
 create mode 100644 src/routes/safe/component/Balances/Tokens/assets/token_placeholder.png

diff --git a/src/components/layout/Img/index.jsx b/src/components/layout/Img/index.jsx
index 7e3e84f2..895fe7b5 100644
--- a/src/components/layout/Img/index.jsx
+++ b/src/components/layout/Img/index.jsx
@@ -1,6 +1,6 @@
 // @flow
+import React from 'react'
 import classNames from 'classnames/bind'
-import React, { PureComponent } from 'react'
 import styles from './index.scss'
 
 const cx = classNames.bind(styles)
@@ -10,24 +10,15 @@ type Props = {
   fullwidth?: boolean,
   bordered?: boolean,
   className?: string,
-  style?: React$Node
+  style?: React$Node,
 }
 
-class Img extends PureComponent<Props> {
-  render() {
-    const {
-      fullwidth, alt, bordered, className, style, ...props
-    } = this.props
+const Img = ({
+  fullwidth, alt, bordered, className, style, ...props
+}: Props) => {
+  const classes = cx(styles.img, { fullwidth, bordered }, className)
 
-    return (
-      <img
-        alt={alt}
-        style={style}
-        {...props}
-        className={cx(styles.img, { fullwidth, bordered }, className)}
-      />
-    )
-  }
+  return <img alt={alt} style={style} className={classes} {...props} />
 }
 
 export default Img
diff --git a/src/routes/safe/component/Balances/Tokens/assets/token_placeholder.png b/src/routes/safe/component/Balances/Tokens/assets/token_placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..aaa220178ae478b6367300067c68b755e1abdc9a
GIT binary patch
literal 108
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnL3?x0byx0z;*aCb)T%SLG{-2+3;i0edfFhg)
z9+AZi417mGm~pB$pEOXA$J50zgkxrMg2WvlZvg}2Q)&NoKo*0itDnm{r-UW|Qal>*

literal 0
HcmV?d00001

diff --git a/src/routes/safe/component/Balances/Tokens/index.jsx b/src/routes/safe/component/Balances/Tokens/index.jsx
index 91f81396..33d56e5d 100644
--- a/src/routes/safe/component/Balances/Tokens/index.jsx
+++ b/src/routes/safe/component/Balances/Tokens/index.jsx
@@ -24,6 +24,7 @@ import Spacer from '~/components/Spacer'
 import Row from '~/components/layout/Row'
 import { type Token } from '~/logic/tokens/store/model/token'
 import actions, { type Actions } from './actions'
+import TokenPlaceholder from './assets/token_placeholder.png'
 import { styles } from './style'
 
 type Props = Actions & {
@@ -37,10 +38,17 @@ type State = {
   filter: string,
 }
 
-const filterBy = (filter: string, tokens: List<Token>): List<Token> => tokens.filter((token: Token) => !filter
-    || token.get('symbol').toLowerCase().includes(filter.toLowerCase())
-    || token.get('name').toLowerCase().includes(filter.toLowerCase()))
-
+const filterBy = (filter: string, tokens: List<Token>): List<Token> => tokens.filter(
+  (token: Token) => !filter
+      || token
+        .get('symbol')
+        .toLowerCase()
+        .includes(filter.toLowerCase())
+      || token
+        .get('name')
+        .toLowerCase()
+        .includes(filter.toLowerCase()),
+)
 
 class Tokens extends React.Component<Props, State> {
   state = {
@@ -68,6 +76,11 @@ class Tokens extends React.Component<Props, State> {
     disableToken(safeAddress, token)
   }
 
+  setImageToPlaceholder = (e) => {
+    e.target.onerror = null
+    e.target.src = TokenPlaceholder
+  }
+
   render() {
     const { onClose, classes, tokens } = this.props
     const { filter } = this.state
@@ -84,7 +97,9 @@ class Tokens extends React.Component<Props, State> {
       <React.Fragment>
         <Block className={classes.root}>
           <Row align="center" grow className={classes.heading}>
-            <Paragraph className={classes.manage} noMargin>Manage Tokens</Paragraph>
+            <Paragraph className={classes.manage} noMargin>
+              Manage Tokens
+            </Paragraph>
             <IconButton onClick={onClose} disableRipple>
               <Close className={classes.close} />
             </IconButton>
@@ -112,14 +127,16 @@ class Tokens extends React.Component<Props, State> {
           {filteredTokens.map((token: Token) => (
             <ListItem key={token.get('address')} className={classes.token}>
               <ListItemIcon>
-                <Img src={token.get('logoUri')} height={28} alt={token.get('name')} />
+                <Img
+                  src={token.get('logoUri')}
+                  height={28}
+                  alt={token.get('name')}
+                  onError={this.setImageToPlaceholder}
+                />
               </ListItemIcon>
               <ListItemText primary={token.get('symbol')} secondary={token.get('name')} />
               <ListItemSecondaryAction>
-                <Switch
-                  onChange={this.onSwitch(token)}
-                  checked={token.get('status')}
-                />
+                <Switch onChange={this.onSwitch(token)} checked={token.get('status')} />
               </ListItemSecondaryAction>
             </ListItem>
           ))}
@@ -131,4 +148,7 @@ class Tokens extends React.Component<Props, State> {
 
 const TokenComponent = withStyles(styles)(Tokens)
 
-export default connect(undefined, actions)(TokenComponent)
+export default connect(
+  undefined,
+  actions,
+)(TokenComponent)