add release domain alert modal

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;

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>
     )