From 3164fef91ccfe728bef50841c153d3167bd7e516 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 14 Feb 2023 15:27:55 +0100
Subject: [PATCH] Fix: add stopPropagation to the external link (#220)

* Fix: add stopPropagation to the external link

* Update snapshots

* prettier

* Add type in the storybook
---
 package.json                                       |  2 +-
 src/components/EthHashInfo/EthHashInfo.stories.tsx | 10 +++++++---
 src/components/EthHashInfo/index.tsx               | 14 ++++++++------
 src/components/ExplorerButton/index.tsx            |  3 +++
 .../__snapshots__/ExplorerButton.stories.storyshot |  1 +
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 3a12270c..bc3aeb3b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@safe-global/safe-react-components",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Safe UI components",
   "main": "dist/index.min.js",
   "typings": "dist/index.d.ts",
diff --git a/src/components/EthHashInfo/EthHashInfo.stories.tsx b/src/components/EthHashInfo/EthHashInfo.stories.tsx
index 37d0317b..8b6ad1a6 100644
--- a/src/components/EthHashInfo/EthHashInfo.stories.tsx
+++ b/src/components/EthHashInfo/EthHashInfo.stories.tsx
@@ -1,11 +1,15 @@
 import * as React from 'react';
 
-import EthHashInfo from './';
+import EthHashInfo, { type EthHashInfoProps } from './';
 
-export const Main = ({ size }): React.ReactElement => {
+export const Main = ({
+  size,
+}: {
+  size?: EthHashInfoProps['avatarSize'];
+}): React.ReactElement => {
   return (
     <EthHashInfo
-      avatarSize={size || null}
+      avatarSize={size}
       showPrefix
       prefix="eth"
       address="0x40A2aCCbd92BCA938b02010E17A5b8929b49130D"
diff --git a/src/components/EthHashInfo/index.tsx b/src/components/EthHashInfo/index.tsx
index 2760ca88..6cdd0176 100644
--- a/src/components/EthHashInfo/index.tsx
+++ b/src/components/EthHashInfo/index.tsx
@@ -50,6 +50,10 @@ const EthHashInfo = ({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
+  const onError = React.useCallback(() => {
+    setFallbackToIdenticon(true);
+  }, []);
+
   return (
     <Container>
       {showAvatar && (
@@ -58,7 +62,7 @@ const EthHashInfo = ({
             <img
               src={customAvatar}
               alt={address}
-              onError={() => setFallbackToIdenticon(true)}
+              onError={onError}
               width={avatarSize}
               height={avatarSize}
             />
@@ -82,11 +86,9 @@ const EthHashInfo = ({
         <AddressContainer>
           <Box fontWeight="inherit" fontSize="inherit">
             {showPrefix && shouldPrefix && prefix && <b>{prefix}:</b>}
-            {isMobile ? (
-              <span>{shortenAddress(address)}</span>
-            ) : (
-              <span>{shortAddress ? shortenAddress(address) : address}</span>
-            )}
+            <span>
+              {shortAddress || isMobile ? shortenAddress(address) : address}
+            </span>
           </Box>
 
           {showCopyButton && (
diff --git a/src/components/ExplorerButton/index.tsx b/src/components/ExplorerButton/index.tsx
index 3c12e3e4..1ec68892 100644
--- a/src/components/ExplorerButton/index.tsx
+++ b/src/components/ExplorerButton/index.tsx
@@ -10,6 +10,8 @@ export type ExplorerButtonProps = {
   href: string;
 };
 
+const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();
+
 const ExplorerButton = ({
   title,
   href,
@@ -22,6 +24,7 @@ const ExplorerButton = ({
         href={href}
         target="_blank"
         rel="noopener noreferrer"
+        onClick={stopPropagation}
         size="small">
         <Icon component={LinkIcon} />
       </IconButton>
diff --git a/tests/src/components/ExplorerButton/__snapshots__/ExplorerButton.stories.storyshot b/tests/src/components/ExplorerButton/__snapshots__/ExplorerButton.stories.storyshot
index 821e2636..7328b913 100644
--- a/tests/src/components/ExplorerButton/__snapshots__/ExplorerButton.stories.storyshot
+++ b/tests/src/components/ExplorerButton/__snapshots__/ExplorerButton.stories.storyshot
@@ -49,6 +49,7 @@ exports[`Storyshots Components/ExplorerButton Main 1`] = `
       data-mui-internal-clone-element={true}
       href="https://goerli.etherscan.io/address/0x51A099ac1BF46D471110AA8974024Bfe518Fd6C4"
       onBlur={[Function]}
+      onClick={[Function]}
       onContextMenu={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}