From dc970a317018782ded1a58c334f74860cabfa24d Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
Date: Fri, 28 Sep 2018 14:25:51 +0200
Subject: [PATCH] Adding Layout component for opening route

---
 src/routes/opening/component/index.jsx   | 82 ++++++++++++++++++++++++
 src/routes/opening/container/selector.js | 11 ++++
 src/routes/opening/index.jsx             | 46 -------------
 3 files changed, 93 insertions(+), 46 deletions(-)
 create mode 100644 src/routes/opening/component/index.jsx
 create mode 100644 src/routes/opening/container/selector.js
 delete mode 100644 src/routes/opening/index.jsx

diff --git a/src/routes/opening/component/index.jsx b/src/routes/opening/component/index.jsx
new file mode 100644
index 00000000..146df640
--- /dev/null
+++ b/src/routes/opening/component/index.jsx
@@ -0,0 +1,82 @@
+// @flow
+import * as React from 'react'
+import Block from '~/components/layout/Block'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import Paragraph from '~/components/layout/Paragraph'
+import LinearProgress from '@material-ui/core/LinearProgress'
+import { withStyles } from '@material-ui/core/styles'
+import Img from '~/components/layout/Img'
+import Page from '~/components/layout/Page'
+import { openTxInEtherScan } from '~/logic/wallets/getWeb3'
+import { mediumFontSize, secondary, xs } from '~/theme/variables'
+import { type SelectorProps } from '../container/selector'
+
+type Props = SelectorProps & {
+  name: string,
+  tx: string,
+  classes: Object,
+}
+
+const vault = require('../assets/vault.svg')
+
+const styles = {
+  page: {
+    letterSpacing: '-1px',
+  },
+  icon: {
+    height: mediumFontSize,
+    color: secondary,
+  },
+  follow: {
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: xs,
+  },
+  etherscan: {
+    color: secondary,
+    textDecoration: 'underline',
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: xs,
+    fontWeight: 'bolder',
+  },
+}
+
+const Opening = ({
+  classes,
+  name = 'Safe creation process',
+  tx,
+  network,
+}: Props) => (
+  <Page align="center">
+    <Paragraph className={classes.page} color="secondary" size="xxl" weight="bolder" align="center">
+      {name}
+    </Paragraph>
+    <Block margin="lg" align="center">
+      <Img src={vault} height={90} alt="Vault" />
+    </Block>
+    <Block margin="lg">
+      <LinearProgress color="secondary" />
+    </Block>
+    <Block margin="md">
+      <Paragraph className={classes.page} noMargin size="xl" align="center">
+        Transaction submitted
+      </Paragraph>
+      <Paragraph className={classes.page} noMargin size="xl" align="center" weight="bolder">
+        Deploying your new Safe...
+      </Paragraph>
+    </Block>
+    <Block margin="md">
+      <Paragraph size="md" align="center" weight="light" noMargin>
+        This process should take a couple of minutes. <br />
+      </Paragraph>
+      { tx &&
+        <Paragraph className={classes.follow} size="md" align="center" weight="light" noMargin>
+          Follow progress on <a href={openTxInEtherScan(tx, network)} target="_blank" rel="noopener noreferrer" className={classes.etherscan}>Etherscan.io<OpenInNew className={classes.icon} /></a>
+        </Paragraph>
+      }
+    </Block>
+  </Page>
+)
+
+export default withStyles(styles)(Opening)
diff --git a/src/routes/opening/container/selector.js b/src/routes/opening/container/selector.js
new file mode 100644
index 00000000..72b8e6c2
--- /dev/null
+++ b/src/routes/opening/container/selector.js
@@ -0,0 +1,11 @@
+// @flow
+import { createStructuredSelector } from 'reselect'
+import { networkSelector } from '~/logic/wallets/store/selectors'
+
+export type SelectorProps = {
+  network: string,
+}
+
+export default createStructuredSelector({
+  network: networkSelector,
+})
diff --git a/src/routes/opening/index.jsx b/src/routes/opening/index.jsx
deleted file mode 100644
index be840d82..00000000
--- a/src/routes/opening/index.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// @flow
-import * as React from 'react'
-import Block from '~/components/layout/Block'
-import Paragraph from '~/components/layout/Paragraph'
-import LinearProgress from '@material-ui/core/LinearProgress'
-import { withStyles } from '@material-ui/core/styles'
-import Img from '~/components/layout/Img'
-import Page from '~/components/layout/Page'
-
-type Props = {
-  name: string,
-  classes: Object,
-}
-
-const vault = require('./assets/vault.svg')
-
-const styles = {
-  page: {
-    letterSpacing: '-1px',
-  },
-}
-
-const Opening = ({ classes, name = 'Safe creation process' }: Props) => (
-  <Page align="center">
-    <Paragraph className={classes.page} color="secondary" size="xxl" weight="bolder" align="center">
-      {name}
-    </Paragraph>
-    <Block margin="lg" align="center">
-      <Img src={vault} height={90} alt="Vault" />
-    </Block>
-    <Block margin="lg">
-      <LinearProgress color="secondary" />
-    </Block>
-    <Paragraph className={classes.page} noMargin size="xl" align="center">
-      Transaction submitted
-    </Paragraph>
-    <Paragraph className={classes.page} noMargin size="xl" align="center" weight="bolder">
-      Deploying your new Safe...
-    </Paragraph>
-    <Paragraph size="md" align="center" weight="light">
-      This process should take a couple of minutes. <br />
-    </Paragraph>
-  </Page>
-)
-
-export default withStyles(styles)(Opening)