diff --git a/src/ethereum/EtherscanButton/index.stories.tsx b/src/ethereum/EtherscanButton/index.stories.tsx new file mode 100644 index 00000000..ff5dfa34 --- /dev/null +++ b/src/ethereum/EtherscanButton/index.stories.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import styled from 'styled-components'; + +import EtherscanButton from './index'; +import { Text } from '../..'; + +export default { + title: 'Ethereum/EtherscanButton', + 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/EtherscanButton/index.tsx b/src/ethereum/EtherscanButton/index.tsx new file mode 100644 index 00000000..d355e1ab --- /dev/null +++ b/src/ethereum/EtherscanButton/index.tsx @@ -0,0 +1,46 @@ +import React from 'react'; + +import { Icon } from '../..'; + +type Network = 'mainnet' | 'rinkeby'; + +type Props = { + className?: string; + network?: Network; + type: 'address' | 'tx'; + value: string; +}; + +const getNetwork = (network: Network) => { + const lowerCaseNetwork = network.toLowerCase(); + return lowerCaseNetwork === 'mainnet' ? '' : `${lowerCaseNetwork}.`; +}; + +const EtherscanButton = ({ + className, + type, + value, + network = 'mainnet', +}: Props): React.ReactElement => { + const etherscanLink = `https://${getNetwork( + network + )}etherscan.io/${type}/${value}`; + + return ( + + + + ); +}; + +export default EtherscanButton; diff --git a/src/ethereum/index.ts b/src/ethereum/index.ts new file mode 100644 index 00000000..3d4b0f2e --- /dev/null +++ b/src/ethereum/index.ts @@ -0,0 +1 @@ +export { default as EtherscanButton } from './EtherscanButton'; diff --git a/src/index.ts b/src/index.ts index 62e7f216..6860e87e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,7 +2,7 @@ export * from './dataDisplay'; export * from './inputs'; export * from './feedback'; export * from './navigation'; -//export * from './layouts' +export * from './ethereum'; //export * from './surfaces'; export * from './utils'; export { default as theme } from './theme';