From 2528675569b3ee7430ee17976cd02a3d346302c7 Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Fri, 17 Aug 2018 15:46:59 -0400
Subject: [PATCH] add release domain alert modal

---
 app/components/ens/ReleaseDomain.js | 44 +++++++++++++++++++++++++++++
 app/components/ens/nameLookup.js    |  5 +++-
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 app/components/ens/ReleaseDomain.js

diff --git a/app/components/ens/ReleaseDomain.js b/app/components/ens/ReleaseDomain.js
new file mode 100644
index 0000000..74b0bc8
--- /dev/null
+++ b/app/components/ens/ReleaseDomain.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Slide from '@material-ui/core/Slide';
+
+function Transition(props) {
+  return <Slide direction="up" {...props} />;
+}
+
+const ReleaseDomainAlert = ({ open, handleClose }) => (
+  <div>
+    <Dialog
+      open={open}
+      TransitionComponent={Transition}
+      keepMounted
+      onClose={handleClose}
+      aria-labelledby="alert-dialog-slide-title"
+      aria-describedby="alert-dialog-slide-description"
+    >
+      <DialogTitle id="alert-dialog-slide-title">
+        {"Release domain?"}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-slide-description">
+          Your SNT deposit will be returned and name will be available to other users.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={() => handleClose(true)} color="primary">
+          Yes
+        </Button>
+      </DialogActions>
+    </Dialog>
+  </div>
+);
+
+export default ReleaseDomainAlert;
diff --git a/app/components/ens/nameLookup.js b/app/components/ens/nameLookup.js
index 316a8cb..8a01f90 100644
--- a/app/components/ens/nameLookup.js
+++ b/app/components/ens/nameLookup.js
@@ -9,6 +9,7 @@ import { Button, Field, TextInput, MobileSearch, MobileButton, Card, Info, Text
 import { IconCheck } from '../../ui/icons'
 import { keyFromXY } from '../../utils/ecdsa';
 import EditOptions from './EditOptions';
+import ReleaseDomainAlert from './ReleaseDomain';
 import theme from '../../ui/theme'
 import { withFormik } from 'formik';
 import PublicResolver from 'Embark/contracts/PublicResolver';
@@ -87,12 +88,13 @@ class RenderAddresses extends PureComponent {
 
   render() {
     const { domainName, address, statusAccount, expirationTime, defaultAccount } = this.props
-    const { copied, editMenu } = this.state
+    const { copied, editMenu, editAction } = this.state
     const markCopied = (v) => { this.setState({ copied: v }) }
     const isCopied = address => address == copied;
     const renderCopied = address => isCopied(address) && <span style={{ color: theme.positive }}><IconCheck/>Copied!</span>;
     const isOwner = defaultAccount === address;
     const onClose = value => { this.setState({ editAction: value, editMenu: false }) }
+    const closeReleaseAlert = value => { this.setState({ editAction: null }) }
     return (
       <Fragment>
         <Hidden mdDown>
@@ -112,6 +114,7 @@ class RenderAddresses extends PureComponent {
           <MobileAddressDisplay {...this.props} isOwner={isOwner} />
           {isOwner && <MobileButton text="Edit" style={{ marginLeft: '35%' }} onClick={() => { this.setState({ editMenu: true }) } }/>}
           {editMenu && <EditOptions open={editMenu} onClose={onClose} />}
+          <ReleaseDomainAlert open={editAction === 'release'} handleClose={closeReleaseAlert} />
         </Hidden>
       </Fragment>
     )