Set message in dapp

ilanolkies · Mar 22, 2020 · d95f73c · d95f73c
1 parent 3f97f93
commit d95f73c
Showing 1 changed file with 66 additions and 4 deletions.
diff --git a/dapp/src/App.js b/dapp/src/App.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Container, Row, Col, Spinner } from 'react-bootstrap';
+import { Container, Row, Col, Spinner, InputGroup, FormControl, Button, Alert } from 'react-bootstrap';
 import Web3 from 'web3';
 
 class App extends Component {
@@ -8,9 +8,15 @@ class App extends Component {
 
     this.state = {
       message: null,
+      newMessage: '',
+      setting: false,
+      transactionHash: null,
+      error: null,
     };
 
     this.getMessage = this.getMessage.bind(this);
+    this.setMessage = this.setMessage.bind(this);
+    this.handleMessageChange = this.handleMessageChange.bind(this);
   }
 
   componentDidMount() {
@@ -22,7 +28,7 @@ class App extends Component {
 
     const web3 = new Web3('http://localhost:9545');
 
-    const helloWorld =new web3.eth.Contract([
+    const helloWorld = new web3.eth.Contract([
       {
         constant: true,
         inputs: [],
@@ -39,8 +45,50 @@ class App extends Component {
     helloWorld.methods.getMessage().call().then(message => this.setState({ message }));
   }
 
+  handleMessageChange(event) {
+    this.setState({ newMessage: event.target.value });
+  }
+
+  setMessage() {
+    const { newMessage } = this.state;
+
+    if (!newMessage) {
+      this.setState({ error: 'Type a message' });
+      return;
+    }
+    this.setState({ setting: true, txHash: null, error: null });
+
+    window.ethereum.enable().then(accounts => {
+      const web3 = new Web3(window.ethereum);
+
+      web3.eth.net.getId()
+      .then(networkId => {
+        if (networkId !== 5777) this.setState({ error: 'Wrong network. Please connect to your local network.' });
+        else {
+          const helloWorld = new web3.eth.Contract([
+            {
+              constant: false,
+              inputs: [
+                { internalType: "string", name: "newMessage", type: "string" }
+              ],
+              name: "setMessage",
+              outputs: [],
+              payable: false,
+              stateMutability: "nonpayable",
+              type: "function",
+            },
+          ], '0x138a4c489A657BA9419f21C2E0c4d9B265a67341');
+
+          return helloWorld.methods.setMessage(newMessage).send({ from: accounts[0] })
+          .on('receipt', ({ transactionHash }) => this.setState({ transactionHash }))
+        }
+      });
+    }).catch(error => this.setState({ error: error.message, setting: false }))
+    .finally(() => this.getMessage());
+  }
+
   render() {
-    const { message } = this.state;
+    const { message, newMessage, setting, transactionHash, error } = this.state;
 
     return (
       <Container style={{ textAlign: 'center' }}>
@@ -51,9 +99,23 @@ class App extends Component {
         </Row>
         <Row>
           <Col>
-            Message: {message || <Spinner animation="border" />}
+            Message: {message || <Spinner animation="border" />} <Button variant="link" onClick={this.getMessage}>reload</Button>
           </Col>
         </Row>
+        {
+          !window.ethereum ?
+          <p>Please install <a href="https://chrome.google.com/webstore/detail/nifty-wallet/jbdaocneiiinmjbjlgalhcelgbejmnid?hl=en" targer="_blank" ref="">Nifty wallet</a> to set the message.</p> :
+          <>
+            <Row>
+              <InputGroup>
+                <FormControl type="text" value={newMessage} onChange={this.handleMessageChange} disabled={setting} />
+                <Button onClick={this.setMessage} disabled={setting}>Set Message</Button>
+              </InputGroup>
+            </Row>
+            {error && <Row><Col><Alert variant="danger">{error}</Alert></Col></Row>}
+            {transactionHash && <Row><Col><Alert variant="success">Success! Transaction id: {transactionHash}</Alert></Col></Row>}
+          </>
+        }
       </Container>
     )
   }