display transaction validated confirmation

app/components/toaster.js

@@ -0,0 +1,57 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+
+const styles = theme => ({
+  close: {
+    width: theme.spacing.unit * 4,
+    height: theme.spacing.unit * 4,
+  },
+});
+
+class SimpleSnackbar extends React.Component {
+  render() {
+    const { classes, open, handleClose } = this.props;
+    return (
+      <Fragment>
+        <Snackbar
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          open={open}
+          autoHideDuration={6000}
+          onClose={handleClose}
+          ContentProps={{
+            'aria-describedby': 'message-id',
+          }}
+          message={<span id="message-id">Transaction Validated</span>}
+          action={[
+            <Button key="undo" color="secondary" size="small" onClick={handleClose}>
+              UNDO
+            </Button>,
+            <IconButton
+              key="close"
+              aria-label="Close"
+              color="inherit"
+              className={classes.close}
+              onClick={handleClose}
+            >
+              <CloseIcon />
+            </IconButton>,
+          ]}
+        />
+      </Fragment>
+    );
+  }
+}
+
+SimpleSnackbar.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleSnackbar);

app/dapp.js

@@ -8,6 +8,7 @@ import DrawField from './components/draw/DrawField';
 //import ContractClient, { createContract } from './contract_client'
 import ContractClient from './client_contractgo';
 import Events from './chain_client/events';
+import Toaster from './components/toaster';
 window['SNT'] = SNT;
 
 import './dapp.css';
@@ -45,6 +46,7 @@ class App extends React.Component {
 
   tileStateUpdateHandler = tileData => {
     console.log('tile state update event received');
+    this.showValidatedToast();
     this.setState({ canvasState: tileData });
   }
 
@@ -73,12 +75,26 @@ class App extends React.Component {
     })
   }
 
+  showValidatedToast = () => {
+    this.setState({ validationToast: true })
+  }
+
+  closeValidationToast = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    this.setState({ validationToast: false });
+  }
+
+
+
   render(){
-    const { setTileMapState } = this;
-    const { web3Provider, loading, canvasState } = this.state;
+    const { setTileMapState, closeValidationToast } = this;
+    const { web3Provider, loading, canvasState, validationToast } = this.state;
     return (
       <Web3Render ready={web3Provider}>
         <DrawField setTileMapState={setTileMapState} canvasState={canvasState} request={this.requestUpdateTilesOnCanvas.bind(this)}/>
+        <Toaster open={validationToast} handleClose={closeValidationToast}/>
       </Web3Render>
     );
   }