Digging deeper into web 3 binamap Motivation Web

Digging deeper into web 3 (bina-map)

Motivation • Web 3 plays an important role connecting the external decentralized participants to smart contract functions (verification, validation) and blockchain recording • It is an API that provides functions to facilitate the critical role • It connects to the contract functions directly • It connects to blockchain function through other API such as eth, miner etc. • Lets work directly on the blockchain (Ganache) console and explore its role first. • Then we’ll rise up to web server level and examine the various pieces of web 3

Reference • Web 3 Read the docs: https: //web 3 js. readthedocs. io/en/1. 0/ • “web 3. js is a collection of libraries which allow you to interact with a local or remote Ethereum node, using an HTTP, Web. Socket or IPC connection. ”

Installing web 3 • Since we are using Metamask // use the given Provider, e. g in the browser with Metamask const web 3 = new Web 3(Web 3. given. Provider || ‘https: //localhost: 7545', null, {}); We are connecting to the underlying Ganache; establishing the port 7545 as the bridge between web and blockchain Now you can access the blockchain artifacts through web 3 object

Since we are all Computer Scientists • And inquiring mind wants to know here are more details

Web 3 object and options import Web 3 from 'web 3'; const options = { default. Account: '0 x 0', default. Block: 'latest', default. Gas: 1, default. Gas. Price: 0, transaction. Block. Timeout: 50, transaction. Confirmation. Blocks: 24, transaction. Polling. Timeout: 480, transaction. Signer: new Custom. Transaction. Signer() } const web 3 = new Web 3('http: //localhost: 8545', null, options);

Shall we now connect to the contract? • new web 3. eth. Contract(json. Interface, address, options)

Example for contract object Contract ABI code Contract address const my. Contract = new web 3. eth. Contract([. . . ], '0 xde 0 B 295669 a 9 FD 93 d 5 F 28 D 9 Ec 85 E 40 f 4 cb 697 BAe', { default. Account: '0 x 123456789012345678901234567891', // default from address default. Gas. Price: '200000' // default gas price in wei, 20 gwei in this case });

Hmm. . I wonder what others options I have? • Here all the parameters for Contract function: • data - String: The byte code of the contract. (Used when the contract gets deployed. ) • address - String: The address where the contract is deployed. • default. Account • default. Block • default. Gas. Price • transaction. Block. Timeout • transaction. Confirmation. Blocks • transaction. Polling. Timeout • transaction. Signer

Example statement const contract 1 = new eth. Contract(abi, address, {gas. Price: '12345678', default. Account: from. Address}); A Contract object is returned in contract 1, if this call is successful.

Lets review: • Instantiate web 3 object instantiate Contract object we got web 3 object and from it a contract 1 object • what do you think we can do next?

Of course, invoke a method on the contract object. Many roads to Rome. . 1. The name: my. Contract. methods. my. Method(123) 2. The name with parameters: my. Contract. methods['my. Method(uint 256)'](123) 3. The signature: my. Contract. methods['0 x 58 cf 5 f 10'](123) You can call, send, extimate. Gas etc. for a method invocation. At this point, we’ll use just one way: #1 above by its names and parameters.

Call by name • Lets use call by name • You can get a return value through a callback. • Why callback? Why not return value? • How to specify callback? my. Contract. methods. my. Method(123). call({from: '0 xde 0 B 295669 a 9 FD 93 d 5 F 28 D 9 Ec 85 E 40 f 4 cb 697 BAe'}, (error, result) => {. . . });

// Solidity contract My. Contract { function my. Function() returns(uint 256 my. Number, string my. String) { return (23456, "Hello!%"); } } // web 3. js const My. Contract = new web 3. eth. Contract(abi, address); My. Contract. methods. my. Function(). call(). then(console. log); > Result { my. Number: '23456', my. String: 'Hello!%', 0: '23456', // these are here as fallbacks if the name is not know or given 1: 'Hello!%' } “then” is a new JS, promise API, for handling synchronous calls, after the call returns “then” do the next action! How cool is “then” ?

Call to get gas estimates! my. Contract. methods. my. Method(123). estimate. Gas({gas: 5000000}, function(error, gas. Amount){ if(gas. Amount == 5000000) console. log('Method ran out of gas'); }); Why did they not use “then” here?

Invoke using send and (i) callback, (ii) promise) // using the callback my. Contract. methods. my. Method(123). send({from: '0 xde 0 B 295669 a 9 FD 93 d 5 F 28 D 9 Ec 85 E 40 f 4 cb 697 BAe'}, (error, transaction. Hash) => {. . . }); // using the promise my. Contract. methods. my. Method(123). send({from: '0 xde 0 B 295669 a 9 FD 93 d 5 F 28 D 9 Ec 85 E 40 f 4 cb 697 BAe'}). then((receipt) => { // receipt can also be a new contract instance, when coming from a "contract. deploy({. . . }). send()" });

Event Emitter • You can also use event emitter. . explore this later? my. Contract. methods. my. Method(123). send({from: '0 xde 0 B 295669 a 9 FD 93 d 5 F 28 D 9 Ec 85 E 40 f 4 cb 697 BAe'}). on('transaction. Hash', (hash) => {. . . }). on('confirmation', (confirmation. Number, receipt) => {. . . }). on('receipt', (receipt) => { // receipt example console. log(receipt);

One more thing: events my. Contract. events. My. Event({ filter: {my. Indexed. Param: [20, 23], my. Other. Indexed. Param: '0 x 123456789. . . '}, // Using an array means OR: e. g. 20 or 23 from. Block: 0 }, (error, event) => { console. log(event); }). on('data', (event) => { console. log(event); // same results as the optional callback above }). on('changed', (event) => { // remove event from local database }). on('error', console. error);

Can we get all the earthquakes since the genesis (block)? my. Contract. get. Past. Events('My. Event', { filter: {my. Indexed. Param: [20, 23], my. Other. Indexed. Param: '0 x 123456789. . . '}, // Using an array means OR: e. g. 20 or 23 from. Block: 0, to. Block: 'latest' }, (error, events) => { console. log(events); }). then((events) => { console. log(events) // same results as the optional callback above });

Summarizing • Web 3 object contract object function call, send, gas. Estimate callback or promise get events emitted • Explore all these examples in the Read the docs • Motivation 1: good stuff • Motivation 2: helps in Dapp development • Motivation 3: Final exam question