From 88d1c9aeb49cc81c84e1b441f7640d66d3cd9061 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 2 Feb 2023 11:28:06 -0600
Subject: [PATCH 1/3] UX: Fix token image not displaying in asset listing

---
 ui/components/app/token-cell/token-cell.js    |  3 +++
 .../ui/identicon/identicon.component.js       | 20 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js
index 0acafc509e0c..1a18f9c838c7 100644
--- 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
index 0fd1c2c34b12..a40a8c521373 100644
--- 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,10 @@ export default class Identicon extends Component {
         src={image}
         style={getStyles(diameter)}
         alt={alt}
+        onError={() => {
+          this.setState({ imageLoadingError: true });
+          this.forceUpdate();
+        }}
       />
     );
   }
@@ -124,6 +132,11 @@ export default class Identicon extends Component {
     );
   }
 
+  renderBlockieOrJazzIcon() {
+    const { useBlockie } = this.props;
+    return useBlockie ? this.renderBlockie() : this.renderJazzicon();
+  }
+
   shouldComponentUpdate(nextProps) {
     // We only want to re-render if props are different.
     return !isEqual(nextProps, this.props);
@@ -132,8 +145,13 @@ export default class Identicon extends Component {
   render() {
     const { address, image, useBlockie, 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 +166,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>
       );
     }

From 48c8365be9cbc7bf4aaa894089a5751b01707849 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 2 Feb 2023 17:31:12 -0600
Subject: [PATCH 2/3] Fix lint issue

---
 ui/components/ui/identicon/identicon.component.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/components/ui/identicon/identicon.component.js b/ui/components/ui/identicon/identicon.component.js
index a40a8c521373..e58ea6a7d7d5 100644
--- a/ui/components/ui/identicon/identicon.component.js
+++ b/ui/components/ui/identicon/identicon.component.js
@@ -143,8 +143,7 @@ export default class Identicon extends Component {
   }
 
   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;
 

From 1c2fa08446225166b9753cad6f97eee0e09c5749 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 3 Feb 2023 12:35:11 -0600
Subject: [PATCH 3/3] Avoid forceUpdate

---
 ui/components/ui/identicon/identicon.component.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/components/ui/identicon/identicon.component.js b/ui/components/ui/identicon/identicon.component.js
index e58ea6a7d7d5..0ac4de40d2d2 100644
--- a/ui/components/ui/identicon/identicon.component.js
+++ b/ui/components/ui/identicon/identicon.component.js
@@ -99,7 +99,6 @@ export default class Identicon extends Component {
         alt={alt}
         onError={() => {
           this.setState({ imageLoadingError: true });
-          this.forceUpdate();
         }}
       />
     );
@@ -137,9 +136,9 @@ export default class Identicon extends Component {
     return useBlockie ? this.renderBlockie() : this.renderJazzicon();
   }
 
-  shouldComponentUpdate(nextProps) {
+  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() {