From d785ac1e9f0e319668626cf2053c36d8f4fcf397 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 23 Jul 2020 17:33:03 -0300
Subject: [PATCH 1/4] EtherscanButton

---
 .../EtherscanButton/index.stories.tsx         | 33 ++++++++++++
 src/ethereum/EtherscanButton/index.tsx        | 52 +++++++++++++++++++
 src/ethereum/index.ts                         |  1 +
 src/index.ts                                  |  2 +-
 4 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 src/ethereum/EtherscanButton/index.stories.tsx
 create mode 100644 src/ethereum/EtherscanButton/index.tsx
 create mode 100644 src/ethereum/index.ts

diff --git a/src/ethereum/EtherscanButton/index.stories.tsx b/src/ethereum/EtherscanButton/index.stories.tsx
new file mode 100644
index 00000000..ef3faa11
--- /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 => (
+  <>
+    <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"
+    />
+  </>
+);
diff --git a/src/ethereum/EtherscanButton/index.tsx b/src/ethereum/EtherscanButton/index.tsx
new file mode 100644
index 00000000..1846b0a9
--- /dev/null
+++ b/src/ethereum/EtherscanButton/index.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Icon } from '../..';
+
+type Props = {
+  className?: string;
+  network?: 'mainnet' | 'rinkeby';
+  type: 'address' | 'tx';
+  value: string;
+};
+
+const StyledButton = styled.button`
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+`;
+
+const EtherscanButton = ({
+  className,
+  type,
+  value,
+  network = 'mainnet',
+}: Props): React.ReactElement => {
+  const getNetwork = () => {
+    const lowerCaseNetwork = network.toLowerCase();
+    return lowerCaseNetwork === 'mainnet' ? '' : `${lowerCaseNetwork}.`;
+  };
+
+  const goToEtherscan = () =>
+    window.open(
+      `https://${getNetwork()}etherscan.io/${type}/${value}`,
+      '_blank'
+    );
+
+  return (
+    <StyledButton className={className} onClick={goToEtherscan}>
+      <Icon
+        size="sm"
+        color="icon"
+        type="externalLink"
+        tooltip="Show details on Etherscan"
+      />
+    </StyledButton>
+  );
+};
+
+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';

From 22548f2b874f60cf8c6886538c81dc14d9250433 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 23 Jul 2020 17:56:14 -0300
Subject: [PATCH 2/4] review changes

---
 src/ethereum/EtherscanButton/index.tsx | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/ethereum/EtherscanButton/index.tsx b/src/ethereum/EtherscanButton/index.tsx
index 1846b0a9..47605330 100644
--- a/src/ethereum/EtherscanButton/index.tsx
+++ b/src/ethereum/EtherscanButton/index.tsx
@@ -10,16 +10,6 @@ type Props = {
   value: string;
 };
 
-const StyledButton = styled.button`
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-`;
-
 const EtherscanButton = ({
   className,
   type,
@@ -32,20 +22,22 @@ const EtherscanButton = ({
   };
 
   const goToEtherscan = () =>
-    window.open(
-      `https://${getNetwork()}etherscan.io/${type}/${value}`,
-      '_blank'
-    );
+    `https://${getNetwork()}etherscan.io/${type}/${value}`;
 
   return (
-    <StyledButton className={className} onClick={goToEtherscan}>
+    <a
+      className={className}
+      aria-label="Show details on Etherscan"
+      href={goToEtherscan()}
+      rel="noopener noreferrer"
+      target="_blank">
       <Icon
         size="sm"
         color="icon"
         type="externalLink"
         tooltip="Show details on Etherscan"
       />
-    </StyledButton>
+    </a>
   );
 };
 

From 98f7afaf58249aef808c0a43a714a89df704e131 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Fri, 24 Jul 2020 12:09:47 -0300
Subject: [PATCH 3/4] review changes

---
 .../EtherscanButton/index.stories.tsx         |  4 ++--
 src/ethereum/EtherscanButton/index.tsx        | 21 ++++++++++---------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/ethereum/EtherscanButton/index.stories.tsx b/src/ethereum/EtherscanButton/index.stories.tsx
index ef3faa11..ff5dfa34 100644
--- a/src/ethereum/EtherscanButton/index.stories.tsx
+++ b/src/ethereum/EtherscanButton/index.stories.tsx
@@ -16,14 +16,14 @@ const StyledText = styled(Text)`
 
 export const SimpleEtherscanButton = (): React.ReactElement => (
   <>
-    <StyledText size="md">An Address example </StyledText>
+    <StyledText size="md">An Address example</StyledText>
     <br />
     <EtherscanButton
       type="address"
       value="0xda6786379ff88729264d31d472fa917f5e561443"
     />
     <br />
-    <StyledText size="md">A Transaction example </StyledText>
+    <StyledText size="md">A Transaction example</StyledText>
     <br />
     <EtherscanButton
       type="tx"
diff --git a/src/ethereum/EtherscanButton/index.tsx b/src/ethereum/EtherscanButton/index.tsx
index 47605330..35eea4f1 100644
--- a/src/ethereum/EtherscanButton/index.tsx
+++ b/src/ethereum/EtherscanButton/index.tsx
@@ -1,34 +1,35 @@
 import React from 'react';
-import styled from 'styled-components';
 
 import { Icon } from '../..';
 
+type Network = 'mainnet' | 'rinkeby';
+
 type Props = {
   className?: string;
-  network?: 'mainnet' | 'rinkeby';
+  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 getNetwork = () => {
-    const lowerCaseNetwork = network.toLowerCase();
-    return lowerCaseNetwork === 'mainnet' ? '' : `${lowerCaseNetwork}.`;
-  };
-
-  const goToEtherscan = () =>
-    `https://${getNetwork()}etherscan.io/${type}/${value}`;
+  const getEtherscanLink = () =>
+    `https://${getNetwork(network)}etherscan.io/${type}/${value}`;
 
   return (
     <a
       className={className}
       aria-label="Show details on Etherscan"
-      href={goToEtherscan()}
+      href={getEtherscanLink()}
       rel="noopener noreferrer"
       target="_blank">
       <Icon

From d292f94d153a174aaa544285ac0e19b58c1bb237 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Fri, 24 Jul 2020 12:25:54 -0300
Subject: [PATCH 4/4] review fix

---
 src/ethereum/EtherscanButton/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/ethereum/EtherscanButton/index.tsx b/src/ethereum/EtherscanButton/index.tsx
index 35eea4f1..d355e1ab 100644
--- a/src/ethereum/EtherscanButton/index.tsx
+++ b/src/ethereum/EtherscanButton/index.tsx
@@ -22,14 +22,15 @@ const EtherscanButton = ({
   value,
   network = 'mainnet',
 }: Props): React.ReactElement => {
-  const getEtherscanLink = () =>
-    `https://${getNetwork(network)}etherscan.io/${type}/${value}`;
+  const etherscanLink = `https://${getNetwork(
+    network
+  )}etherscan.io/${type}/${value}`;
 
   return (
     <a
       className={className}
       aria-label="Show details on Etherscan"
-      href={getEtherscanLink()}
+      href={etherscanLink}
       rel="noopener noreferrer"
       target="_blank">
       <Icon