From 7db8239460dfd7155bcd883c8c0a71fca0e3f453 Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
Date: Thu, 6 Sep 2018 12:49:45 +0200
Subject: [PATCH] Open in etherscan user address

---
 .../Header/component/ProviderInfo/UserDetails.jsx      | 10 ++++++++--
 src/logic/wallets/getWeb3.js                           |  3 +++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/component/ProviderInfo/UserDetails.jsx b/src/components/Header/component/ProviderInfo/UserDetails.jsx
index 2bd1e789..61fea29c 100644
--- a/src/components/Header/component/ProviderInfo/UserDetails.jsx
+++ b/src/components/Header/component/ProviderInfo/UserDetails.jsx
@@ -14,6 +14,7 @@ import Spacer from '~/components/Spacer'
 import { xs, sm, md, lg, background } from '~/theme/variables'
 import { upperFirst } from '~/utils/css'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
+import { openInEtherScan } from '~/logic/wallets/getWeb3'
 
 const metamask = require('../../assets/metamask.svg')
 const connectedLogo = require('../../assets/connected.svg')
@@ -63,6 +64,9 @@ const styles = () => ({
   open: {
     paddingLeft: sm,
     width: 'auto',
+    '&:hover': {
+      cursor: 'pointer',
+    },
   },
   disconnect: {
     padding: `${md} ${lg}`,
@@ -79,7 +83,7 @@ const UserDetails = ({
   provider, connected, network, userAddress, classes, onDisconnect,
 }: Props) => {
   const status = connected ? 'Connected' : 'Connection error'
-  const address = userAddress ? shortVersionOf(userAddress, 6) : 'Not available'
+  const address = userAddress ? shortVersionOf(userAddress, 6) : 'Address not available'
   const identiconAddress = userAddress || 'random'
   const connectionLogo = connected ? connectedLogo : connectedWarning
   const color = connected ? 'primary' : 'warning'
@@ -92,7 +96,9 @@ const UserDetails = ({
         </Row>
         <Block align="center" className={classes.user}>
           <Paragraph className={classes.address} size="sm" noMargin>{address}</Paragraph>
-          <OpenInNew className={classes.open} style={openIconStyle} />
+          { userAddress &&
+            <OpenInNew className={classes.open} style={openIconStyle} onClick={openInEtherScan(userAddress, network)} />
+          }
         </Block>
       </Block>
       <Hairline margin="xs" />
diff --git a/src/logic/wallets/getWeb3.js b/src/logic/wallets/getWeb3.js
index 10c98616..2dd0a794 100644
--- a/src/logic/wallets/getWeb3.js
+++ b/src/logic/wallets/getWeb3.js
@@ -33,6 +33,9 @@ export const ETHEREUM_NETWORK_IDS = {
   42: ETHEREUM_NETWORK.KOVAN,
 }
 
+export const openInEtherScan = (address: string, network: string) => () => {
+  window.open(`https://${network}.etherscan.io/address/${address}`)
+}
 
 let web3
 export const getWeb3 = () => web3 || new Web3(window.web3.currentProvider)