Products
api
Tutorials
BICO Staking
Get in touch
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
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!
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
Last modified 2yr ago
Copy link
Contents
Complete Working Code Snippet