From 2b9b71359b5c6d7a61f3b03b6718ae62c95c3563 Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Mon, 20 Aug 2018 15:31:12 -0400
Subject: [PATCH] add screen for finishing registration

---
 app/components/ens/copy.js              | 16 ++++++++++++++++
 app/components/ens/nameLookup.js        | 23 +++++++++++++++++++----
 app/components/ens/registerSubDomain.js |  1 +
 app/ui/theme/status.json                |  5 +++--
 4 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 app/components/ens/copy.js

diff --git a/app/components/ens/copy.js b/app/components/ens/copy.js
new file mode 100644
index 0000000..2c826c8
--- /dev/null
+++ b/app/components/ens/copy.js
@@ -0,0 +1,16 @@
+export default {
+  release: {
+    title: {
+      sub: 'Done!',
+      body: 'The released domain will be available to other users'
+    },
+    subheading: 'Follow the progress in the Transaction History section of your wallet.'
+  },
+  registered: {
+    title: {
+      sub: 'Nice!',
+      body: 'The name is yours once the transaction is complete'
+    },
+    subheading: 'Follow the progress in the Transaction History section of your wallet.'
+  }
+}
diff --git a/app/components/ens/nameLookup.js b/app/components/ens/nameLookup.js
index ca36d9e..c9fc288 100644
--- a/app/components/ens/nameLookup.js
+++ b/app/components/ens/nameLookup.js
@@ -24,6 +24,7 @@ import CheckCircle from '../../ui/icons/components/baseline_check_circle_outline
 const { getPrice, getExpirationTime, release } = ENSSubdomainRegistry.methods;
 import NotInterested from '@material-ui/icons/NotInterested';
 import Face from '@material-ui/icons/Face';
+import Copy from './copy';
 
 const invalidSuffix = '0000000000000000000000000000000000000000'
 const nullAddress = '0x0000000000000000000000000000000000000000'
@@ -172,6 +173,19 @@ const RegisterInfoCard = ({ formattedDomain, domainPrice }) => (
   </Fragment>
 )
 
+const TransactionComplete = ({ type }) => (
+  <div style={{ textAlign: 'center', margin: '40% 15 10' }}>
+    <Typography variant="title" style={{ marginBottom: '1rem' }}>
+      {Copy[type]['title']['sub']}<br/>
+      {Copy[type]['title']['body']}
+    </Typography>
+    <Typography variant="subheading" style={{ color: '#939BA1' }}>
+      {Copy[type]['subheading']}
+    </Typography>
+    <MobileButton text="Main Page" style={{ marginTop: '12rem' }} />
+  </div>
+);
+
 class Register extends PureComponent {
   state = { domainPrice: null };
 
@@ -191,21 +205,22 @@ class Register extends PureComponent {
 
   render() {
     const { domainName, setStatus, style } = this.props;
-    const { domainPrice, registered } = this.state;
+    const { domainPrice, registered, submitted } = this.state;
     const formattedDomain = formatName(domainName);
-    const formattedDomainArray = formattedDomain.split('.')
+    const formattedDomainArray = formattedDomain.split('.');
     return (
       <div style={style}>
-        {!registered ?
+        {!registered && !submitted ?
          <Fragment>
            <RegisterInfoCard {...{ formattedDomain, domainPrice }}/>
            <RegisterSubDomain
              subDomain={formattedDomainArray[0]}
              domainName={formattedDomainArray.slice(1).join('.')}
              domainPrice={domainPrice}
+             preRegisteredCallback={() => { this.setState({ submitted: true }) }}
              registeredCallbackFn={this.onRegistered} />
          </Fragment> :
-         <RenderAddresses {...this.props} address={registered.address} statusAccount={registered.statusAccount} />}
+         submitted && !registered ? <TransactionComplete type="registered" /> : <RenderAddresses {...this.props} address={registered.address} statusAccount={registered.statusAccount} />}
       </div>
     )
   }
diff --git a/app/components/ens/registerSubDomain.js b/app/components/ens/registerSubDomain.js
index abc14b0..65277db 100644
--- a/app/components/ens/registerSubDomain.js
+++ b/app/components/ens/registerSubDomain.js
@@ -174,6 +174,7 @@ const RegisterSubDomain = withFormik({
       toSend.estimateGas().then(gasEstimated => {
         console.log("Register would work. :D Gas estimated: "+gasEstimated)
         console.log("Trying: register(\""+subdomainHash+"\",\""+domainNameHash+"\",\""+resolveToAddr+"\",\""+zeroBytes32+"\",\""+zeroBytes32+"\")")
+        props.preRegisteredCallback && props.preRegisteredCallback();
         toSend.send({gas: gasEstimated+1000}).then(txId => {
           if(txId.status == "0x1" || txId.status == "0x01"){
             console.log("Register send success. :)")
diff --git a/app/ui/theme/status.json b/app/ui/theme/status.json
index fd7cf19..25a58fd 100644
--- a/app/ui/theme/status.json
+++ b/app/ui/theme/status.json
@@ -3,7 +3,7 @@
     "Black Ash": "#3B3B3B",
     "Dim Grey": "#707070",
     "Dust Grey": "#969696",
-    "Light Grey": "#B3B3B3",
+    "Light Grey": "#939ba1",
     "Gainsboro": "#E6E6E6",
     "Alabaster": "#F2F2F2"
   },
@@ -61,7 +61,8 @@
     "Secondary": "=Sea.Turquoise",
     "Black Ash": "=Grey.Black Ash",
     "Gradient Start": "=Eagle.Cerulean",
-    "Gradient End": "=Eagle.Opal"
+    "Gradient End": "=Eagle.Opal",
+    "SubText": "=Grey.Light Grey"
   },
   "Status UI": {
     "gradientStart": "=Blue.Main",