diff --git a/package.json b/package.json
index 2b2161a3..be151190 100644
--- a/package.json
+++ b/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",
diff --git a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx b/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
index d6a945c2..5ec2f8fc 100644
--- a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
+++ b/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 => ;
@@ -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}
/>
diff --git a/src/ethereum/EthHashInfo/index.tsx b/src/ethereum/EthHashInfo/index.tsx
index 31528399..716d5720 100644
--- a/src/ethereum/EthHashInfo/index.tsx
+++ b/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 => (
{showIdenticon && (
@@ -88,7 +86,7 @@ const EthHashInfo = ({
: hash}
{showCopyBtn && }
- {showEtherscanBtn && }
+ {explorerUrl && }
{menuItems && }
diff --git a/src/ethereum/EtherscanButton/index.stories.tsx b/src/ethereum/EtherscanButton/index.stories.tsx
deleted file mode 100644
index dcadf6fc..00000000
--- a/src/ethereum/EtherscanButton/index.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import EtherscanButton from './index';
-import { Text } from '../..';
-
-export default {
- title: 'Ethereum/Etherscan Button',
- component: EtherscanButton,
- parameters: {},
-};
-
-const StyledText = styled(Text)`
- margin-right: 5px;
-`;
-
-export const SimpleEtherscanButton = (): React.ReactElement => (
- <>
- An Address example
-
-
-
- A Transaction example
-
-
- >
-);
diff --git a/src/ethereum/ExplorerButton/index.stories.tsx b/src/ethereum/ExplorerButton/index.stories.tsx
new file mode 100644
index 00000000..b1cca574
--- /dev/null
+++ b/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 => (
+ <>
+ An Address example
+
+
+
+ A Transaction example
+
+
+ >
+);
diff --git a/src/ethereum/EtherscanButton/index.tsx b/src/ethereum/ExplorerButton/index.tsx
similarity index 58%
rename from src/ethereum/EtherscanButton/index.tsx
rename to src/ethereum/ExplorerButton/index.tsx
index 2b2ba780..0ec412c9 100644
--- a/src/ethereum/EtherscanButton/index.tsx
+++ b/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): 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}>
-
+
);
};
-export default EtherscanButton;
+export default ExplorerButton;
diff --git a/src/ethereum/index.ts b/src/ethereum/index.ts
index bf4ce1d8..137977f7 100644
--- a/src/ethereum/index.ts
+++ b/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';
diff --git a/src/typings/misc.ts b/src/typings/misc.ts
index 7c0d86e6..ae3ae49e 100644
--- a/src/typings/misc.ts
+++ b/src/typings/misc.ts
@@ -1 +1 @@
-export type Network = 'mainnet' | 'rinkeby';
+export type ExplorerInfo = () => { url: string; alt: string };