From a6bd62fabf05f97d461cfcb55d9c494286834f6c Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
Date: Tue, 25 Sep 2018 16:44:26 +0200
Subject: [PATCH] Adding opening components & styles

---
 src/routes/index.js                 |  8 ++++-
 src/routes/open/container/Open.jsx  |  8 ++++-
 src/routes/opening/assets/vault.svg | 12 ++++++++
 src/routes/opening/index.jsx        | 46 +++++++++++++++++++++++++++++
 src/theme/variables.js              |  3 +-
 5 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/opening/assets/vault.svg
 create mode 100644 src/routes/opening/index.jsx

diff --git a/src/routes/index.js b/src/routes/index.js
index 42b6f74c..677e39db 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -4,7 +4,7 @@ import Loadable from 'react-loadable'
 import { Switch, Redirect, Route } from 'react-router-dom'
 import Loader from '~/components/Loader'
 import Welcome from './welcome/container'
-import { SAFELIST_ADDRESS, OPEN_ADDRESS, SAFE_PARAM_ADDRESS, WELCOME_ADDRESS, SETTINS_ADDRESS } from './routes'
+import { SAFELIST_ADDRESS, OPEN_ADDRESS, SAFE_PARAM_ADDRESS, WELCOME_ADDRESS, SETTINS_ADDRESS, OPENING_ADDRESS } from './routes'
 
 const Safe = Loadable({
   loader: () => import('./safe/container'),
@@ -26,6 +26,11 @@ const Open = Loadable({
   loading: Loader,
 })
 
+const Opening = Loadable({
+  loader: () => import('./opening'),
+  loading: Loader,
+})
+
 const SAFE_ADDRESS = `${SAFELIST_ADDRESS}/:${SAFE_PARAM_ADDRESS}`
 const SAFE_SETTINGS = `${SAFE_ADDRESS}${SETTINS_ADDRESS}`
 
@@ -39,6 +44,7 @@ const Routes = () => (
     <Route exact path={SAFELIST_ADDRESS} component={SafeList} />
     <Route exact path={SAFE_ADDRESS} component={Safe} />
     <Route exact path={SAFE_SETTINGS} component={Settings} />
+    <Route exact path={OPENING_ADDRESS} component={Opening} />
   </Switch>
 )
 
diff --git a/src/routes/open/container/Open.jsx b/src/routes/open/container/Open.jsx
index 6dc8b149..b5ac2604 100644
--- a/src/routes/open/container/Open.jsx
+++ b/src/routes/open/container/Open.jsx
@@ -42,7 +42,13 @@ export const createSafe = async (values: Object, userAccount: string, addSafe: A
   addSafe(name, safeContract.address, numConfirmations, dailyLimit, owners, accounts)
 
   if (stillInOpeningView()) {
-    const url = `${SAFELIST_ADDRESS}/${safeContract.address}`
+    const url = {
+      pathname: `${SAFELIST_ADDRESS}/${safeContract.address}`,
+      state: {
+        name,
+      },
+    }
+
     history.push(url)
   }
 
diff --git a/src/routes/opening/assets/vault.svg b/src/routes/opening/assets/vault.svg
new file mode 100644
index 00000000..cc83c30b
--- /dev/null
+++ b/src/routes/opening/assets/vault.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="111" height="91" viewBox="0 0 111 91">
+    <g fill="none" fill-rule="evenodd">
+        <g fill="#A2A8BA">
+            <path d="M6.535 81.666h9.8V78.4h-9.8v3.266zm64.131-6.535h-67.4V3.266H94.73l.003 47.754c.203-.004.403-.015.608-.015.898 0 1.785.051 2.659.144V0H0v78.4h3.265v6.535H19.6V78.4h51.202c-.097-.888-.15-1.79-.15-2.705 0-.189.01-.376.014-.564z"/>
+            <path d="M9.8 68.582L9.816 9.8l78.385.015v4.885h-1.635a1.64 1.64 0 0 0-1.635 1.634c0 .9.736 1.635 1.635 1.635H88.2v1.634h-1.635a1.64 1.64 0 0 0-1.635 1.635c0 .9.736 1.635 1.635 1.635H88.2v29.184c1.06-.32 2.15-.572 3.266-.748V22.866c.899 0 1.634-.736 1.634-1.634 0-.9-.735-1.635-1.634-1.635v-1.635a1.64 1.64 0 0 0 1.634-1.635c0-.9-.735-1.635-1.634-1.635V9.816a3.284 3.284 0 0 0-3.281-3.285H9.816a3.283 3.283 0 0 0-3.281 3.285v58.766a3.283 3.283 0 0 0 3.28 3.284H70.95c.173-1.114.423-2.2.74-3.26L9.8 68.582z"/>
+            <path d="M60.435 42.466A3.276 3.276 0 0 1 57.17 39.2a3.276 3.276 0 0 1 3.265-3.266 3.277 3.277 0 0 1 3.266 3.266 3.276 3.276 0 0 1-3.266 3.265m0-9.8a6.533 6.533 0 0 0-6.535 6.535 6.534 6.534 0 0 0 6.535 6.535 6.535 6.535 0 0 0 0-13.069"/>
+            <path d="M75.136 40.832h1.55a16.242 16.242 0 0 1-3.61 8.689l-1.095-1.095a1.633 1.633 0 0 0-2.305 0 1.634 1.634 0 0 0 0 2.305l1.095 1.095a16.303 16.303 0 0 1-8.69 3.61l.004-1.535c0-.9-.735-1.635-1.634-1.635-.9 0-1.635.736-1.635 1.635v1.55a16.249 16.249 0 0 1-8.69-3.61l1.095-1.095a1.631 1.631 0 0 0 0-2.304 1.63 1.63 0 0 0-2.305 0l-1.095 1.095a16.303 16.303 0 0 1-3.61-8.69l1.524.004c.9 0 1.634-.735 1.634-1.635s-.734-1.634-1.634-1.634h-1.55a16.25 16.25 0 0 1 3.61-8.69l1.095 1.094c.325.325.734.475 1.16.475.424 0 .834-.165 1.159-.475a1.63 1.63 0 0 0 0-2.305l-1.095-1.095a16.309 16.309 0 0 1 8.69-3.61l-.003 1.524c0 .9.734 1.635 1.634 1.635.9 0 1.635-.734 1.635-1.635v-1.55a16.254 16.254 0 0 1 8.69 3.61l-1.095 1.095a1.63 1.63 0 0 0 0 2.304c.326.326.735.475 1.16.475a1.67 1.67 0 0 0 1.16-.475l1.095-1.094a16.3 16.3 0 0 1 3.61 8.69l-1.554-.004c-.9 0-1.635.734-1.635 1.634a1.65 1.65 0 0 0 1.635 1.647M74.3 25.347c-.015-.016-.035-.016-.05-.035-3.56-3.525-8.426-5.71-13.816-5.71-5.39 0-10.256 2.189-13.8 5.7-.016.014-.035.014-.05.033-.016.015-.016.034-.035.05-3.53 3.557-5.715 8.426-5.715 13.816 0 5.39 2.19 10.256 5.7 13.8.015.016.015.034.034.05.016.015.035.015.05.034 3.557 3.526 8.426 5.716 13.816 5.716 5.39 0 10.256-2.19 13.8-5.7.016-.016.035-.016.051-.035.015-.015.015-.034.034-.049 3.525-3.56 5.716-8.427 5.716-13.816 0-5.39-2.19-10.26-5.701-13.804-.015-.016-.015-.035-.034-.05M17.966 22.862c-.9 0-1.635.735-1.635 1.634v32.666c0 .9.734 1.635 1.635 1.635.899 0 1.634-.735 1.634-1.635v-1.634c.9 0 1.635-.736 1.635-1.635 0-.9-.735-1.635-1.635-1.635V29.4c.9 0 1.635-.734 1.635-1.634 0-.9-.735-1.635-1.635-1.635v-1.635c0-.898-.735-1.634-1.634-1.634M26.135 22.866c-.9 0-1.635.735-1.635 1.634v1.636c-.9 0-1.635.734-1.635 1.634 0 .9.736 1.634 1.635 1.634V52.27c-.9 0-1.635.735-1.635 1.634 0 .9.736 1.636 1.635 1.636v1.634c0 .9.735 1.635 1.635 1.635s1.634-.735 1.634-1.635L27.765 24.5c0-.899-.734-1.634-1.63-1.634"/>
+        </g>
+        <path stroke="#467EE5" stroke-width="3" d="M93.756 58.266c-8.466 0-15.361 6.896-15.361 15.362 0 8.466 6.895 15.36 15.361 15.36 8.466 0 15.361-6.894 15.361-15.36s-6.895-15.362-15.361-15.362z"/>
+        <path fill="#467EE5" fill-rule="nonzero" d="M93.68 68.471h-3.06v10.313h8.39v-3.06h-5.33z"/>
+    </g>
+</svg>
diff --git a/src/routes/opening/index.jsx b/src/routes/opening/index.jsx
new file mode 100644
index 00000000..be840d82
--- /dev/null
+++ b/src/routes/opening/index.jsx
@@ -0,0 +1,46 @@
+// @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)
diff --git a/src/theme/variables.js b/src/theme/variables.js
index ff8780a9..b8bcdb42 100644
--- a/src/theme/variables.js
+++ b/src/theme/variables.js
@@ -42,7 +42,8 @@ module.exports = Object.assign({}, {
   smallFontSize: '11px',
   mediumFontSize: '13px',
   largeFontSize: '15px',
-  extraLargeFontSize: '24px',
+  extraLargeFontSize: '18px',
+  xxlFontSize: '32px',
   screenXs: 480,
   screenXsMax: 767,
   screenSm: 768,