(Feature) - Refactor ethScan buttons usage

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/safe-react-components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Gnosis UI components",
   "main": "dist/index.min.js",
   "typings": "dist/index.d.ts",

src/ethereum/EthHashInfo/ethHashInfo.stories.tsx

@@ -12,6 +12,8 @@ export default {
 };
 
 const hash = '0x69904ff6d6100799344E5C9A2806936318F6ba4f';
+const explorerUrl = `https://etherscan.io/address/${hash}`;
+const explorerUrlAlt = `Show details on Etherscan`;
 
 export const Address = (): React.ReactElement => <EthHashInfo hash={hash} />;
 
@@ -33,7 +35,7 @@ export const WithButtons = (): React.ReactElement => (
     name="Owner 1"
     showIdenticon
     showCopyBtn
-    showEtherscanBtn
+    explorerUrl={() => ({ alt: explorerUrlAlt, url: explorerUrl })}
     shortenHash={4}
   />
 );
@@ -49,7 +51,6 @@ export const WithMenu = (): React.ReactElement => {
       name="Owner 1"
       showIdenticon
       showCopyBtn
-      showEtherscanBtn
       menuItems={items}
       shortenHash={4}
     />

src/ethereum/EthHashInfo/index.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Network } from '../../typings/misc';
 import {
   Text,
   Identicon,
   EllipsisMenu,
   EllipsisMenuItem,
-  EtherscanButton,
+  ExplorerButton,
   CopyToClipboardBtn,
 } from '../../';
 import { textShortener } from '../../utils/strings';
 import { ThemeTextSize, ThemeColors, ThemeIdenticonSize } from '../../theme';
+import { ExplorerInfo } from '../../typings/misc';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -50,8 +50,7 @@ type Props = {
   showIdenticon?: boolean;
   showCopyBtn?: boolean;
   menuItems?: EllipsisMenuItem[];
-  showEtherscanBtn?: boolean;
-  network?: Network;
+  explorerUrl?: ExplorerInfo;
 };
 
 const EthHashInfo = ({
@@ -65,8 +64,7 @@ const EthHashInfo = ({
   showIdenticon,
   showCopyBtn,
   menuItems,
-  showEtherscanBtn,
-  network,
+  explorerUrl,
 }: Props): React.ReactElement => (
   <StyledContainer className={className}>
     {showIdenticon && (
@@ -88,7 +86,7 @@ const EthHashInfo = ({
             : hash}
         </Text>
         {showCopyBtn && <CopyToClipboardBtn textToCopy={hash} />}
-        {showEtherscanBtn && <EtherscanButton value={hash} network={network} />}
+        {explorerUrl && <ExplorerButton explorerUrl={explorerUrl} />}
         {menuItems && <EllipsisMenu menuItems={menuItems} />}
       </AddressContainer>
     </InfoContainer>

src/ethereum/ExplorerButton/index.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import ExplorerButton from './index';
+import { Text } from '../..';
+
+export default {
+  title: 'Ethereum/Explorer Button',
+  component: ExplorerButton,
+  parameters: {},
+};
+
+const StyledText = styled(Text)`
+  margin-right: 5px;
+`;
+
+const hash = '0xda6786379ff88729264d31d472fa917f5e561443';
+const hash2 = '0x72d9E579f691D62aA7e0703840db6dd2fa9fAE21';
+
+const explorerUrl1 = () => ({
+  alt: `Show details on Etherscan`,
+  url: `https://etherscan.io/address/${hash}`,
+});
+
+const explorerUrl2 = () => ({
+  alt: `Show details on BlockScout`,
+  url: `https://blockscout.com/poa/xdai/address/${hash2}`,
+});
+
+export const SimpleExplorerButton = (): React.ReactElement => (
+  <>
+    <StyledText size="md">An Address example</StyledText>
+    <br />
+    <ExplorerButton explorerUrl={explorerUrl1} />
+    <br />
+    <StyledText size="md">A Transaction example</StyledText>
+    <br />
+    <ExplorerButton explorerUrl={explorerUrl2} />
+  </>
+);

src/ethereum/EtherscanButton/index.tsx → src/ethereum/ExplorerButton/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Icon } from '../..';
-import { Network } from '../../typings/misc';
+import { ExplorerInfo } from '../../typings/misc';
 
 const StyledLink = styled.a`
   display: inline-flex;
@@ -11,22 +11,14 @@ const StyledLink = styled.a`
 
 type Props = {
   className?: string;
-  network?: Network;
-  value: string;
+  explorerUrl: ExplorerInfo;
 };
 
-const getNetwork = (network: Network) => {
-  const lowerCaseNetwork = network.toLowerCase();
-  return lowerCaseNetwork === 'mainnet' ? '' : `${lowerCaseNetwork}.`;
-};
-
-const EtherscanButton = ({
+const ExplorerButton = ({
   className,
-  value,
-  network = 'mainnet',
+  explorerUrl,
 }: Props): React.ReactElement => {
-  const type = value.length > 42 ? 'tx' : 'address';
-
+  const { url, alt } = explorerUrl();
   const onClick = (event: React.MouseEvent<HTMLAnchorElement>): void => {
     event.stopPropagation();
   };
@@ -44,17 +36,12 @@ const EtherscanButton = ({
       aria-label="Show details on Etherscan"
       rel="noopener noreferrer"
       onClick={onClick}
-      href={`https://${getNetwork(network)}etherscan.io/${type}/${value}`}
+      href={url}
       target="_blank"
       onKeyDown={onKeyDown}>
-      <Icon
-        size="sm"
-        color="icon"
-        type="externalLink"
-        tooltip="Show details on Etherscan"
-      />
+      <Icon size="sm" color="icon" type="externalLink" tooltip={alt} />
     </StyledLink>
   );
 };
 
-export default EtherscanButton;
+export default ExplorerButton;

src/ethereum/index.ts

@@ -1,2 +1,2 @@
 export { default as EthHashInfo } from './EthHashInfo';
-export { default as EtherscanButton } from './EtherscanButton';
+export { default as ExplorerButton } from './ExplorerButton';

src/typings/misc.ts

@@ -1 +1 @@
-export type Network = 'mainnet' | 'rinkeby';
+export type ExplorerInfo = () => { url: string; alt: string };