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

* Fix: add stopPropagation to the external link * Update snapshots * prettier * Add type in the storybook
5afe · Feb 14, 2023 · 3164fef · 3164fef
1 parent 50033f1
commit 3164fef
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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]}