Adding etherscan network details for user addresses

src/routes/open/components/Layout.jsx

@@ -27,6 +27,7 @@ const initialValuesFrom = (userAccount: string) => ({
 type Props = {
   provider: string,
   userAccount: string,
+  network: string,
   onCallSafeContractSubmit: (values: Object) => Promise<void>,
 }
 
@@ -41,7 +42,7 @@ const back = () => {
 }
 
 const Layout = ({
-  provider, userAccount, onCallSafeContractSubmit,
+  provider, userAccount, onCallSafeContractSubmit, network,
 }: Props) => {
   const steps = getSteps()
   const initialValues = initialValuesFrom(userAccount)
@@ -71,7 +72,7 @@ const Layout = ({
               <Stepper.Page validate={safeFieldsValidation}>
                 { SafeThresholdField }
               </Stepper.Page>
-              <Stepper.Page>
+              <Stepper.Page network={network}>
                 { Review }
               </Stepper.Page>
             </Stepper>

src/routes/open/components/Layout.stories.js

@@ -49,6 +49,7 @@ storiesOf('Routes /open', module)
     return (
       <State store={store}>
         <Component
+          network="rinkeby"
           provider={provider}
           userAccount={userAccount}
           safeAddress={store.get('safeAddress')}

src/routes/open/components/ReviewInformation/index.jsx

@@ -3,15 +3,22 @@ import * as React from 'react'
 import { getNamesFrom, getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
 import Block from '~/components/layout/Block'
 import { withStyles } from '@material-ui/core/styles'
+import OpenInNew from '@material-ui/icons/OpenInNew'
 import Identicon from '~/components/Identicon'
 import OpenPaper from '~/components/Stepper/OpenPaper'
 import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
-import { md, lg, border, background } from '~/theme/variables'
+import { sm, md, lg, border, secondary, background } from '~/theme/variables'
 import Hairline from '~/components/layout/Hairline'
+import { openAddressInEtherScan } from '~/logic/wallets/getWeb3'
 import { FIELD_NAME, FIELD_CONFIRMATIONS, getNumOwnersFrom } from '../fields'
 
+const openIconStyle = {
+  height: '16px',
+  color: secondary,
+}
+
 const styles = () => ({
   root: {
     minHeight: '300px',
@@ -33,14 +40,25 @@ const styles = () => ({
     padding: md,
     alignItems: 'center',
   },
+  open: {
+    paddingLeft: sm,
+    width: 'auto',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
 })
 
-type Props = {
+type LayoutProps = {
+  network: string,
+}
+
+type Props = LayoutProps & {
   values: Object,
   classes: Object,
 }
 
-const ReviewComponent = ({ values, classes }: Props) => {
+const ReviewComponent = ({ values, classes, network }: Props) => {
   const names = getNamesFrom(values)
   const addresses = getAccountsFrom(values)
   const numOwners = getNumOwnersFrom(values)
@@ -89,7 +107,14 @@ const ReviewComponent = ({ values, classes }: Props) => {
                 <Col xs={11}>
                   <Block>
                     <Paragraph size="lg" noMargin>{name}</Paragraph>
-                    <Paragraph size="md" color="disabled" noMargin>{addresses[index]}</Paragraph>
+                    <Block align="center">
+                      <Paragraph size="md" color="disabled" noMargin>{addresses[index]}</Paragraph>
+                      <OpenInNew
+                        className={classes.open}
+                        style={openIconStyle}
+                        onClick={openAddressInEtherScan(addresses[index], network)}
+                      />
+                    </Block>
                   </Block>
                 </Col>
               </Row>
@@ -112,10 +137,10 @@ const ReviewComponent = ({ values, classes }: Props) => {
 
 const ReviewPage = withStyles(styles)(ReviewComponent)
 
-const Review = () => (controls: React$Node, { values }: Object) => (
+const Review = ({ network }: LayoutProps) => (controls: React$Node, { values }: Object) => (
   <React.Fragment>
     <OpenPaper controls={controls} padding={false}>
-      <ReviewPage values={values} />
+      <ReviewPage network={network} values={values} />
     </OpenPaper>
   </React.Fragment>
 )

src/routes/open/components/SafeForm/Confirmations/index.test.js

@@ -21,6 +21,7 @@ describe('React DOM TESTS > Create Safe form', () => {
     open = TestUtils.renderIntoDocument((
       <Wrapper>
         <Layout
+          network="rinkeby"
           provider="METAMASK"
           userAccount="foo"
           safeAddress=""

src/routes/open/components/SafeThresholdForm/index.jsx

@@ -93,7 +93,7 @@ const SafeThresholdForm = withStyles(styles)(SafeThreshold)
 
 const SafeOwnersPage = () => (controls: React$Node, { values }: Object) => (
   <React.Fragment>
-    <OpenPaper controls={controls} values={values}>
+    <OpenPaper controls={controls}>
       <SafeThresholdForm values={values} />
     </OpenPaper>
   </React.Fragment>

src/routes/open/container/Open.jsx

@@ -15,6 +15,7 @@ import Layout from '../components/Layout'
 type Props = Actions & {
   provider: string,
   userAccount: string,
+  network: string,
 }
 
 export type OpenState = {
@@ -69,11 +70,12 @@ class Open extends React.Component<Props> {
   }
 
   render() {
-    const { provider, userAccount } = this.props
+    const { provider, userAccount, network } = this.props
 
     return (
       <Page>
         <Layout
+          network={network}
           provider={provider}
           userAccount={userAccount}
           onCallSafeContractSubmit={this.onCallSafeContractSubmit}

src/routes/open/container/selector.js

@@ -1,8 +1,9 @@
 // @flow
 import { createStructuredSelector } from 'reselect'
-import { providerNameSelector, userAccountSelector } from '~/logic/wallets/store/selectors'
+import { providerNameSelector, userAccountSelector, networkSelector } from '~/logic/wallets/store/selectors'
 
 export default createStructuredSelector({
   provider: providerNameSelector,
+  network: networkSelector,
   userAccount: userAccountSelector,
 })