import React, { useState, useEffect } from "react";
* This is a random Address.
* Change this address to your deployed contract address
const contractAddress = "0xa67767B5ed6Fa6Fc19baBD4F18ffe72EAbC85FdA";
"stateMutability": "nonpayable",
"stateMutability": "view",
"stateMutability": "view",
"stateMutability": "view",
const [owner, setOwner] = useState("Default Owner Address");
const [quote, setQuote] = useState("This is a default quote");
const [newQuote, setNewQuote] = useState("");
web3 = new Web3(window.ethereum);
window.ethereum.enable().then(()=>{
// User denied account access
} else if (window.web3) {
web3 = new Web3(window.web3.currentProvider);
console.log("Non-Ethereum browser detected. You should consider trying MetaMask!");
const onQuoteChange = event => {
setNewQuote(event.target.value);
async function startApp() {
myContract = new web3.eth.Contract(contractAbi, contractAddress);
// Get quote from blockchain on app start
async function getQuote() {
let result = await myContract.methods.getQuote().call();
setOwner(result.currentOwner);
setQuote(result.currentQuote);
async function setQuoteOnBlockchain() {
await myContract.methods.setQuote(newQuote).send({from: window.ethereum.selectedAddress});
async function onButtonClickMeta() {
*Use this DApp only on Kovan Network
<header className="App-header">
<section className="main">
<div className="mb-wrap mb-style-2">
<blockquote cite="http://www.gutenberg.org/ebboks/11">
<div className="mb-attribution">
<p className="mb-author">- {owner}</p>
<div className="submit-container">
<div className="submit-row">
placeholder="Enter your quote"
<button type="button" className="button" onClick={onButtonClickMeta}>Submit</button>