From 92432e63ad8d76a06ca252cf98b6a43a7529a6a9 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Fri, 23 Apr 2021 18:00:40 -0300
Subject: [PATCH 1/5] test

---
 src/ethereum/EthHashInfo/index.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/ethereum/EthHashInfo/index.tsx b/src/ethereum/EthHashInfo/index.tsx
index 87497b39..fa23e3e9 100644
--- a/src/ethereum/EthHashInfo/index.tsx
+++ b/src/ethereum/EthHashInfo/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { SyntheticEvent } from 'react';
 import styled from 'styled-components';
 
 import {
@@ -13,6 +13,8 @@ import { textShortener } from '../../utils/strings';
 import { ThemeTextSize, ThemeColors, ThemeIdenticonSize } from '../../theme';
 import { ExplorerInfo } from '../../typings/misc';
 
+import asd from 'src/utils/modals/ManageListModal/appsIcon.svg';
+
 const StyledContainer = styled.div`
   display: flex;
   align-items: center;
@@ -60,6 +62,13 @@ type Props = {
   explorerUrl?: ExplorerInfo;
 };
 
+export const setAppImageFallback = (
+  error: SyntheticEvent<HTMLImageElement, Event>
+): void => {
+  error.currentTarget.onerror = null;
+  error.currentTarget.src = asd;
+};
+
 const EthHashInfo = ({
   hash,
   showHash = true,
@@ -79,7 +88,7 @@ const EthHashInfo = ({
     {showAvatar && (
       <AvatarContainer>
         {customAvatar ? (
-          <StyledImg src={customAvatar} size={avatarSize} />
+          <StyledImg src={customAvatar} size={avatarSize} onerror={onerror} />
         ) : (
           <Identicon address={hash} size={avatarSize} />
         )}

From 9af3d176f18c7e6483006110d7e0f5a6b0f31049 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Fri, 23 Apr 2021 18:07:01 -0300
Subject: [PATCH 2/5] EthHashIfo: add customAvatarFallback

---
 src/ethereum/EthHashInfo/index.tsx | 80 ++++++++++++++++--------------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/src/ethereum/EthHashInfo/index.tsx b/src/ethereum/EthHashInfo/index.tsx
index fa23e3e9..4630b904 100644
--- a/src/ethereum/EthHashInfo/index.tsx
+++ b/src/ethereum/EthHashInfo/index.tsx
@@ -13,8 +13,6 @@ import { textShortener } from '../../utils/strings';
 import { ThemeTextSize, ThemeColors, ThemeIdenticonSize } from '../../theme';
 import { ExplorerInfo } from '../../typings/misc';
 
-import asd from 'src/utils/modals/ManageListModal/appsIcon.svg';
-
 const StyledContainer = styled.div`
   display: flex;
   align-items: center;
@@ -56,19 +54,13 @@ type Props = {
   textSize?: ThemeTextSize;
   showAvatar?: boolean;
   customAvatar?: string;
+  customAvatarFallback?: string;
   avatarSize?: ThemeIdenticonSize;
   showCopyBtn?: boolean;
   menuItems?: EllipsisMenuItem[];
   explorerUrl?: ExplorerInfo;
 };
 
-export const setAppImageFallback = (
-  error: SyntheticEvent<HTMLImageElement, Event>
-): void => {
-  error.currentTarget.onerror = null;
-  error.currentTarget.src = asd;
-};
-
 const EthHashInfo = ({
   hash,
   showHash = true,
@@ -79,42 +71,56 @@ const EthHashInfo = ({
   shortenHash,
   showAvatar,
   customAvatar,
+  customAvatarFallback,
   avatarSize = 'md',
   showCopyBtn,
   menuItems,
   explorerUrl,
-}: Props): React.ReactElement => (
-  <StyledContainer className={className}>
-    {showAvatar && (
-      <AvatarContainer>
-        {customAvatar ? (
-          <StyledImg src={customAvatar} size={avatarSize} onerror={onerror} />
-        ) : (
-          <Identicon address={hash} size={avatarSize} />
-        )}
-      </AvatarContainer>
-    )}
+}: Props): React.ReactElement => {
+  const setAppImageFallback = (
+    error: SyntheticEvent<HTMLImageElement, Event>
+  ): void => {
+    error.currentTarget.onerror = null;
+    error.currentTarget.src = customAvatarFallback || '';
+  };
 
-    <InfoContainer>
-      {name && (
-        <Text size={textSize} color={textColor}>
-          {name}
-        </Text>
+  return (
+    <StyledContainer className={className}>
+      {showAvatar && (
+        <AvatarContainer>
+          {customAvatar ? (
+            <StyledImg
+              src={customAvatar}
+              size={avatarSize}
+              onError={setAppImageFallback}
+            />
+          ) : (
+            <Identicon address={hash} size={avatarSize} />
+          )}
+        </AvatarContainer>
       )}
-      <AddressContainer>
-        {showHash && (
+
+      <InfoContainer>
+        {name && (
           <Text size={textSize} color={textColor}>
-            {shortenHash
-              ? textShortener(hash, shortenHash + 2, shortenHash)
-              : hash}
+            {name}
           </Text>
         )}
-        {showCopyBtn && <CopyToClipboardBtn textToCopy={hash} />}
-        {explorerUrl && <ExplorerButton explorerUrl={explorerUrl} />}
-        {menuItems && <EllipsisMenu menuItems={menuItems} />}
-      </AddressContainer>
-    </InfoContainer>
-  </StyledContainer>
-);
+        <AddressContainer>
+          {showHash && (
+            <Text size={textSize} color={textColor}>
+              {shortenHash
+                ? textShortener(hash, shortenHash + 2, shortenHash)
+                : hash}
+            </Text>
+          )}
+          {showCopyBtn && <CopyToClipboardBtn textToCopy={hash} />}
+          {explorerUrl && <ExplorerButton explorerUrl={explorerUrl} />}
+          {menuItems && <EllipsisMenu menuItems={menuItems} />}
+        </AddressContainer>
+      </InfoContainer>
+    </StyledContainer>
+  );
+};
 
 export default EthHashInfo;

From 0d79f78957b25860637355952622eb0ec73cc652 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Fri, 23 Apr 2021 18:46:29 -0300
Subject: [PATCH 3/5] EthHashInfo: fallback handler

---
 .../EthHashInfo/ethHashInfo.stories.tsx       | 19 ++++++
 src/ethereum/EthHashInfo/index.tsx            | 14 ++--
 tests/__snapshots__/storybook.test.js.snap    | 65 +++++++++++++++++++
 3 files changed, 94 insertions(+), 4 deletions(-)

diff --git a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx b/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
index 2afc262a..6a7e9f20 100644
--- a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
+++ b/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
@@ -38,6 +38,25 @@ export const WithCustomAvatar = (): React.ReactElement => (
   />
 );
 
+export const WithCustomAvatarFallback = (): React.ReactElement => (
+  <EthHashInfo
+    hash={hash}
+    showAvatar
+    customAvatar="https://no-file.png"
+    customAvatarFallback="https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png"
+    shortenHash={4}
+  />
+);
+
+export const WithCustomAvatarFallbackIdenticon = (): React.ReactElement => (
+  <EthHashInfo
+    hash={hash}
+    showAvatar
+    customAvatar="https://no-file.png"
+    shortenHash={4}
+  />
+);
+
 export const WithButtons = (): React.ReactElement => (
   <EthHashInfo
     hash={hash}
diff --git a/src/ethereum/EthHashInfo/index.tsx b/src/ethereum/EthHashInfo/index.tsx
index 4630b904..f88c7284 100644
--- a/src/ethereum/EthHashInfo/index.tsx
+++ b/src/ethereum/EthHashInfo/index.tsx
@@ -1,4 +1,4 @@
-import React, { SyntheticEvent } from 'react';
+import React, { useState, SyntheticEvent } from 'react';
 import styled from 'styled-components';
 
 import {
@@ -77,18 +77,24 @@ const EthHashInfo = ({
   menuItems,
   explorerUrl,
 }: Props): React.ReactElement => {
+  const [fallbackToIdenticon, setFallbackToIdenticon] = useState(false);
+
   const setAppImageFallback = (
     error: SyntheticEvent<HTMLImageElement, Event>
   ): void => {
-    error.currentTarget.onerror = null;
-    error.currentTarget.src = customAvatarFallback || '';
+    if (customAvatarFallback && !fallbackToIdenticon) {
+      error.currentTarget.onerror = null;
+      error.currentTarget.src = customAvatarFallback;
+    } else {
+      setFallbackToIdenticon(true);
+    }
   };
 
   return (
     <StyledContainer className={className}>
       {showAvatar && (
         <AvatarContainer>
-          {customAvatar ? (
+          {!fallbackToIdenticon && customAvatar ? (
             <StyledImg
               src={customAvatar}
               size={avatarSize}
diff --git a/tests/__snapshots__/storybook.test.js.snap b/tests/__snapshots__/storybook.test.js.snap
index b28680a4..2ff090b0 100644
--- a/tests/__snapshots__/storybook.test.js.snap
+++ b/tests/__snapshots__/storybook.test.js.snap
@@ -5926,6 +5926,7 @@ exports[`Storyshots Ethereum/Eth hash Info With Custom Avatar 1`] = `
   >
     <img
       className="sc-bBrOnJ jPNRUi"
+      onError={[Function]}
       size="md"
       src="https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png"
     />
@@ -5948,6 +5949,70 @@ exports[`Storyshots Ethereum/Eth hash Info With Custom Avatar 1`] = `
 </div>
 `;
 
+exports[`Storyshots Ethereum/Eth hash Info With Custom Avatar Fallback 1`] = `
+<div
+  className="sc-eggNIi bGtkep"
+>
+  <div
+    className="sc-cTkwdZ kJbbRd"
+  >
+    <img
+      className="sc-bBrOnJ jPNRUi"
+      onError={[Function]}
+      size="md"
+      src="https://no-file.png"
+    />
+  </div>
+  <div
+    className="sc-jNMdTA gJUNtj"
+  >
+    <div
+      className="sc-dOSReg cTzfaq"
+    >
+      <p
+        className="sc-crrsfI fiKdgY"
+        color="text"
+        size="lg"
+      >
+        0x6990...ba4f
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Ethereum/Eth hash Info With Custom Avatar Fallback Identicon 1`] = `
+<div
+  className="sc-eggNIi bGtkep"
+>
+  <div
+    className="sc-cTkwdZ kJbbRd"
+  >
+    <img
+      className="sc-bBrOnJ jPNRUi"
+      onError={[Function]}
+      size="md"
+      src="https://no-file.png"
+    />
+  </div>
+  <div
+    className="sc-jNMdTA gJUNtj"
+  >
+    <div
+      className="sc-dOSReg cTzfaq"
+    >
+      <p
+        className="sc-crrsfI fiKdgY"
+        color="text"
+        size="lg"
+      >
+        0x6990...ba4f
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Ethereum/Eth hash Info With Default Avatar 1`] = `
 <div
   className="sc-eggNIi bGtkep"

From 4b40630c2ea8b5e8f7575cf47c394382a201306f Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 26 Apr 2021 12:47:26 -0300
Subject: [PATCH 4/5] Ivan feedback

---
 src/ethereum/EthHashInfo/ethHashInfo.stories.tsx | 4 ++--
 src/ethereum/EthHashInfo/index.tsx               | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx b/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
index 6a7e9f20..bee074e8 100644
--- a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
+++ b/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
@@ -42,8 +42,8 @@ export const WithCustomAvatarFallback = (): React.ReactElement => (
   <EthHashInfo
     hash={hash}
     showAvatar
-    customAvatar="https://no-file.png"
-    customAvatarFallback="https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png"
+    customAvatar="https://broken.png"
+    customAvatarFallback="https://gnosis-safe-token-logos.s3.amazonaws.com/0x6810e776880C02933D47DB1b9fc05908e5386b96.png"
     shortenHash={4}
   />
 );
diff --git a/src/ethereum/EthHashInfo/index.tsx b/src/ethereum/EthHashInfo/index.tsx
index f88c7284..441112a1 100644
--- a/src/ethereum/EthHashInfo/index.tsx
+++ b/src/ethereum/EthHashInfo/index.tsx
@@ -78,13 +78,13 @@ const EthHashInfo = ({
   explorerUrl,
 }: Props): React.ReactElement => {
   const [fallbackToIdenticon, setFallbackToIdenticon] = useState(false);
+  const [fallbackSrc, setFallabckSrc] = useState<undefined | string>(undefined);
 
   const setAppImageFallback = (
     error: SyntheticEvent<HTMLImageElement, Event>
   ): void => {
     if (customAvatarFallback && !fallbackToIdenticon) {
-      error.currentTarget.onerror = null;
-      error.currentTarget.src = customAvatarFallback;
+      setFallabckSrc(customAvatarFallback);
     } else {
       setFallbackToIdenticon(true);
     }
@@ -96,7 +96,7 @@ const EthHashInfo = ({
         <AvatarContainer>
           {!fallbackToIdenticon && customAvatar ? (
             <StyledImg
-              src={customAvatar}
+              src={fallbackSrc || customAvatar}
               size={avatarSize}
               onError={setAppImageFallback}
             />

From 8d59ad61c9cd0a50d2912694a397c8e632d97d91 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 26 Apr 2021 13:06:59 -0300
Subject: [PATCH 5/5] update tests

---
 tests/__snapshots__/storybook.test.js.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/__snapshots__/storybook.test.js.snap b/tests/__snapshots__/storybook.test.js.snap
index 2ff090b0..332eb28a 100644
--- a/tests/__snapshots__/storybook.test.js.snap
+++ b/tests/__snapshots__/storybook.test.js.snap
@@ -5960,7 +5960,7 @@ exports[`Storyshots Ethereum/Eth hash Info With Custom Avatar Fallback 1`] = `
       className="sc-bBrOnJ jPNRUi"
       onError={[Function]}
       size="md"
-      src="https://no-file.png"
+      src="https://broken.png"
     />
   </div>
   <div