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