Executing First Blockchain Transaction

Search…
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
1
/** 
2
 * This is a random Address.
3
 * Change this address to your deployed contract address
4
 **/
5
const contractAddress = "0xa67767B5ed6Fa6Fc19baBD4F18ffe72EAbC85FdA";
Copied!
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.
1
const contractAbi = [
2
	{
3
		"constant": false,
4
		"inputs": [
5
			{
6
				"internalType": "string",
7
				"name": "newQuote",
8
				"type": "string"
9
			}
10
		],
11
		"name": "setQuote",
12
		"outputs": [],
13
		"payable": false,
14
		"stateMutability": "nonpayable",
15
		"type": "function"
16
	},
17
	{
18
		"constant": true,
19
		"inputs": [],
20
		"name": "owner",
21
		"outputs": [
22
			{
23
				"internalType": "address",
24
				"name": "",
25
				"type": "address"
26
			}
27
		],
28
		"payable": false,
29
		"stateMutability": "view",
30
		"type": "function"
31
	},
32
	{
33
		"constant": true,
34
		"inputs": [],
35
		"name": "quote",
36
		"outputs": [
37
			{
38
				"internalType": "string",
39
				"name": "",
40
				"type": "string"
41
			}
42
		],
43
		"payable": false,
44
		"stateMutability": "view",
45
		"type": "function"
46
	}
47
]
Copied!
Make sure web3 is Initialized before this step
Form an Instance of the contract 
1
let myContract = new web3.eth.Contract(contractAbi, contractAddress);
Copied!
Send the transaction to update the current quote and current owner
1
async function setQuote() {
2
	await myContract.methods.setQuote("Transaction fees from users hampers UX!").send({from: userAccount});
3
}
Copied!
Call the function of our contract to retrieve current quote and current owner
1
async function getQuote() {
2
	return await myContract.methods.getQuote().call({from: userAccount});
3
}
Copied!
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
1
import React, { useState, useEffect } from "react";
2
import Web3 from 'web3'
3
let myContract;
4
/**
5
 * This is a random Address.
6
 * Change this address to your deployed contract address
7
 **/
8
const contractAddress = "0xa67767B5ed6Fa6Fc19baBD4F18ffe72EAbC85FdA";
9
const contractAbi = [
10
	{
11
		"constant": false,
12
		"inputs": [
13
			{
14
				"name": "newQuote",
15
				"type": "string"
16
			}
17
		],
18
		"name": "setQuote",
19
		"outputs": [],
20
		"payable": false,
21
		"stateMutability": "nonpayable",
22
		"type": "function"
23
	},
24
	{
25
		"constant": true,
26
		"inputs": [],
27
		"name": "getQuote",
28
		"outputs": [
29
			{
30
				"name": "currentQuote",
31
				"type": "string"
32
			},
33
			{
34
				"name": "currentOwner",
35
				"type": "address"
36
			}
37
		],
38
		"payable": false,
39
		"stateMutability": "view",
40
		"type": "function"
41
	},
42
	{
43
		"constant": true,
44
		"inputs": [],
45
		"name": "owner",
46
		"outputs": [
47
			{
48
				"name": "",
49
				"type": "address"
50
			}
51
		],
52
		"payable": false,
53
		"stateMutability": "view",
54
		"type": "function"
55
	},
56
	{
57
		"constant": true,
58
		"inputs": [],
59
		"name": "quote",
60
		"outputs": [
61
			{
62
				"name": "",
63
				"type": "string"
64
			}
65
		],
66
		"payable": false,
67
		"stateMutability": "view",
68
		"type": "function"
69
	}
70
]
71
​
72
let web3;
73
​
74
function App() {
75
  const [owner, setOwner] = useState("Default Owner Address");
76
  const [quote, setQuote] = useState("This is a default quote");
77
  const [newQuote, setNewQuote] = useState("");
78
​
79
  useEffect(() => {
80
    if (window.ethereum) {
81
      // Modern DApp browsers
82
      web3 = new Web3(window.ethereum);
83
      try {
84
        window.ethereum.enable().then(()=>{
85
          startApp();
86
        });
87
      } catch (error) {
88
        // User denied account access
89
        console.log(error);
90
      }
91
    } else if (window.web3) {
92
      // Legacy dapp browsers
93
      web3 = new Web3(window.web3.currentProvider);
94
      startApp();
95
    } else {
96
      // Non-dapp browsers
97
      console.log("Non-Ethereum browser detected. You should consider trying MetaMask!");
98
    }
99
  }, []);
100
​
101
  const onQuoteChange = event => {
102
    setNewQuote(event.target.value);
103
  };
104
​
105
  async function startApp() {
106
    myContract = new web3.eth.Contract(contractAbi, contractAddress);
107
    // Get quote from blockchain on app start
108
    getQuote();
109
  }
110
​
111
  async function getQuote() {
112
    let result = await myContract.methods.getQuote().call();
113
    setOwner(result.currentOwner);
114
    setQuote(result.currentQuote);
115
  }
116
​
117
  async function setQuoteOnBlockchain() {
118
    await myContract.methods.setQuote(newQuote).send({from: window.ethereum.selectedAddress});
119
    getQuote();
120
  }
121
​
122
  async function onButtonClickMeta() {
123
    setQuoteOnBlockchain();
124
  }
125
​
126
  return (
127
    <div className="App">
128
      *Use this DApp only on Kovan Network
129
      <header className="App-header">
130
        <h1>Quotes</h1>
131
        <section className="main">
132
          <div className="mb-wrap mb-style-2">
133
            <blockquote cite="http://www.gutenberg.org/ebboks/11">
134
              <h4>{quote} </h4>
135
            </blockquote>
136
          </div>
137
​
138
          <div className="mb-attribution">
139
            <p className="mb-author">- {owner}</p>
140
          </div>
141
        </section>
142
        <section>
143
          <div className="submit-container">
144
            <div className="submit-row">
145
              <input size="100"
146
                border-radius="15"
147
                type="text"
148
                placeholder="Enter your quote"
149
                onChange={onQuoteChange}
150
                value={newQuote}
151
              />
152
              <button type="button" className="button" onClick={onButtonClickMeta}>Submit</button>
153
            </div>
154
          </div>
155
        </section>
156
      </header>
157
    </div >
158
  );
159
}
160
​
161
export default App;
162
​
Copied!
Congratulations! You Just Built Your First DApp
Initialize Web3 on Client Side
Enable Native Meta Transactions
Last modified 1yr ago
Copy link
Contents
Complete Working Code Snippet