UX: Fix token image not displaying in asset listing (#17575)

MetaMask · Feb 6, 2023 · 02d608d · 02d608d
1 parent 4b8aebb
commit 02d608d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js
@@ -11,6 +11,7 @@ export default function TokenCell({
   address,
   decimals,
   balanceError,
+  image,
   symbol,
   string,
   onClick,
@@ -45,6 +46,7 @@ export default function TokenCell({
       tokenAddress={address}
       tokenSymbol={symbol}
       tokenDecimals={decimals}
+      tokenImage={image}
       warning={warning}
       primary={`${string || 0}`}
       secondary={formattedFiat}
@@ -61,6 +63,7 @@ TokenCell.propTypes = {
   string: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   isERC721: PropTypes.bool,
+  image: PropTypes.string,
 };
 
 TokenCell.defaultProps = {

diff --git a/ui/components/ui/identicon/identicon.component.js b/ui/components/ui/identicon/identicon.component.js
@@ -59,6 +59,10 @@ export default class Identicon extends Component {
     ipfsGateway: PropTypes.string,
   };
 
+  state = {
+    imageLoadingError: false,
+  };
+
   static defaultProps = {
     addBorder: false,
     address: undefined,
@@ -93,6 +97,9 @@ export default class Identicon extends Component {
         src={image}
         style={getStyles(diameter)}
         alt={alt}
+        onError={() => {
+          this.setState({ imageLoadingError: true });
+        }}
       />
     );
   }
@@ -124,16 +131,25 @@ export default class Identicon extends Component {
     );
   }
 
-  shouldComponentUpdate(nextProps) {
+  renderBlockieOrJazzIcon() {
+    const { useBlockie } = this.props;
+    return useBlockie ? this.renderBlockie() : this.renderJazzicon();
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
     // We only want to re-render if props are different.
-    return !isEqual(nextProps, this.props);
+    return !isEqual(nextProps, this.props) || !isEqual(nextState, this.state);
   }
 
   render() {
-    const { address, image, useBlockie, addBorder, diameter, tokenList } =
-      this.props;
+    const { address, image, addBorder, diameter, tokenList } = this.props;
+    const { imageLoadingError } = this.state;
     const size = diameter + 8;
 
+    if (imageLoadingError) {
+      return this.renderBlockieOrJazzIcon();
+    }
+
     if (image) {
       return this.renderImage();
     }
@@ -148,7 +164,7 @@ export default class Identicon extends Component {
           className={classnames({ 'identicon__address-wrapper': addBorder })}
           style={addBorder ? getStyles(size) : null}
         >
-          {useBlockie ? this.renderBlockie() : this.renderJazzicon()}
+          {this.renderBlockieOrJazzIcon()}
         </div>
       );
     }