Executing First Blockchain Transaction

Use Contract address and ABI to send your first blockchain transaction
In this section, we'll use web3.js to send our first blockchain transaction. In previous section we initialized our web3 object, now we'll use that to create an instance of our deployed contract and then calling the methods defined in our smart contract.
Declare Contract Address 
Address of the deployed contract on ethereum blockchain
/** 
 * This is a random Address.
 * Change this address to your deployed contract address
 **/
const contractAddress = "0xa67767B5ed6Fa6Fc19baBD4F18ffe72EAbC85FdA";
Declare Contract ABI
The Contract Application Binary Interface (ABI) is the standard way to interact with contracts in the Ethereum ecosystem, both from outside the blockchain and for contract-to-contract interaction.
const contractAbi = [
	{
		"constant": false,
		"inputs": [
			{
				"internalType": "string",
				"name": "newQuote",
				"type": "string"
			}
		],
		"name": "setQuote",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "owner",
		"outputs": [
			{
				"internalType": "address",
				"name": "",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "quote",
		"outputs": [
			{
				"internalType": "string",
				"name": "",
				"type": "string"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	}
]
Make sure web3 is Initialized before this step
Form an Instance of the contract 
let myContract = new web3.eth.Contract(contractAbi, contractAddress);
Send the transaction to update the current quote and current owner
async function setQuote() {
	await myContract.methods.setQuote("Transaction fees from users hampers UX!").send({from: userAccount});
}
Call the function of our contract to retrieve current quote and current owner
async function getQuote() {
	return await myContract.methods.getQuote().call({from: userAccount});
}
Complete Working Code Snippet
This example is built using ReactJS. Below is a simple function component in React. To keep it simple, css code is not mentioned in the code.
Quote.js
Quote.js
import React, { useState, useEffect } from "react";
import Web3 from 'web3'
let myContract;
/**
 * This is a random Address.
 * Change this address to your deployed contract address
 **/
const contractAddress = "0xa67767B5ed6Fa6Fc19baBD4F18ffe72EAbC85FdA";
const contractAbi = [
	{
		"constant": false,
		"inputs": [
			{
				"name": "newQuote",
				"type": "string"
			}
		],
		"name": "setQuote",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "getQuote",
		"outputs": [
			{
				"name": "currentQuote",
				"type": "string"
			},
			{
				"name": "currentOwner",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "owner",
		"outputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "quote",
		"outputs": [
			{
				"name": "",
				"type": "string"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	}
]
​
let web3;
​
function App() {
  const [owner, setOwner] = useState("Default Owner Address");
  const [quote, setQuote] = useState("This is a default quote");
  const [newQuote, setNewQuote] = useState("");
​
  useEffect(() => {
    if (window.ethereum) {
      // Modern DApp browsers
      web3 = new Web3(window.ethereum);
      try {
        window.ethereum.enable().then(()=>{
          startApp();
        });
      } catch (error) {
        // User denied account access
        console.log(error);
      }
    } else if (window.web3) {
      // Legacy dapp browsers
      web3 = new Web3(window.web3.currentProvider);
      startApp();
    } else {
      // Non-dapp browsers
      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
    getQuote();
  }
​
  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});
    getQuote();
  }
​
  async function onButtonClickMeta() {
    setQuoteOnBlockchain();
  }
​
  return (
    <div className="App">
      *Use this DApp only on Kovan Network
      <header className="App-header">
        <h1>Quotes</h1>
        <section className="main">
          <div className="mb-wrap mb-style-2">
            <blockquote cite="http://www.gutenberg.org/ebboks/11">
              <h4>{quote} </h4>
            </blockquote>
          </div>
​
          <div className="mb-attribution">
            <p className="mb-author">- {owner}</p>
          </div>
        </section>
        <section>
          <div className="submit-container">
            <div className="submit-row">
              <input size="100"
                border-radius="15"
                type="text"
                placeholder="Enter your quote"
                onChange={onQuoteChange}
                value={newQuote}
              />
              <button type="button" className="button" onClick={onButtonClickMeta}>Submit</button>
            </div>
          </div>
        </section>
      </header>
    </div >
  );
}
​
export default App;
​
Congratulations! You Just Built Your First DApp
Initialize Web3 on Client Side
Enable Native Meta Transactions
Last updated 1 year ago