EtherscanButton

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 => (
+  <>
+    <StyledText size="md">An Address example</StyledText>
+    <br />
+    <EtherscanButton
+      type="address"
+      value="0xda6786379ff88729264d31d472fa917f5e561443"
+    />
+    <br />
+    <StyledText size="md">A Transaction example</StyledText>
+    <br />
+    <EtherscanButton
+      type="tx"
+      value="0xc276be3ffccc2398d3b82a0e375a94f67b8ad81c68f8625a5d516567dfe3de29"
+    />
+  </>
+);

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 (
+    <a
+      className={className}
+      aria-label="Show details on Etherscan"
+      href={etherscanLink}
+      rel="noopener noreferrer"
+      target="_blank">
+      <Icon
+        size="sm"
+        color="icon"
+        type="externalLink"
+        tooltip="Show details on Etherscan"
+      />
+    </a>
+  );
+};
+
+export default EtherscanButton;

src/ethereum/index.ts

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

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