Fix: add stopPropagation to the external link (#220)

* Fix: add stopPropagation to the external link

* Update snapshots

* prettier

* Add type in the storybook

Author: katspaugh

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",

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"

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 && (

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>

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]}