Digging deeper into web3 (bina-map)

1. Digging deeper into web3 (bina-map)

2. Motivation • Web3 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 web3

3. Reference • Web3 Read the docs: https://web3js.readthedocs.io/en/1.0/ • “web3.js is a collection of libraries which allow you to interact with a local or remote Ethereum node, using an HTTP, WebSocket or IPC connection.”

4. Installing web3 • Since we are using Metamask // use the given Provider, e.g in the browser with Metamask const web3 = new Web3(Web3.givenProvider || ‘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 web3 object

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

6. Web3 object and options import Web3 from 'web3'; const options = { defaultAccount: '0x0', defaultBlock: 'latest', defaultGas: 1, defaultGasPrice: 0, transactionBlockTimeout: 50, transactionConfirmationBlocks: 24, transactionPollingTimeout: 480, transactionSigner: new CustomTransactionSigner() } const web3 = new Web3('http://localhost:8545', null, options);

7. Shall we now connect to the contract? • new web3.eth.Contract(jsonInterface, address, options)

8. Example for contract object Contract ABI code constmyContract = new web3.eth.Contract([...], '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe', { defaultAccount: '0x1234567890123456789012345678901234567891', // default from address defaultGasPrice: '20000000000' // default gas price in wei, 20 gwei in this case }); Contract address

9. Hmm.. I wonder what others options I have? • Here are 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. • defaultAccount • defaultBlock • defaultGas • defaultGasPrice • transactionBlockTimeout • transactionConfirmationBlocks • transactionPollingTimeout • transactionSigner

10. Example statement const contract1 = new eth.Contract(abi, address, {gasPrice: '12345678', defaultAccount: fromAddress}); A Contract object is returned in contract1, if this call is successful.

11. Lets review: • Instantiate web3 object  instantiate Contract object we got web3 object and from it a contract1 object • what do you think we can do next?

12. Of course, invoke a method on the contract object. Many roads to Rome.. • The name: myContract.methods.myMethod(123) 2. The name with parameters: myContract.methods['myMethod(uint256)'](123) 3. The signature: myContract.methods['0x58cf5f10'](123) You can call, send, extimateGas etc. for a method invocation. At this point, we’ll use just one way: #1 above by its names and parameters.

13. 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? myContract.methods.myMethod(123).call({from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'}, (error, result) => { ... });

14. // Solidity contract MyContract { function myFunction() returns(uint256 myNumber, string myString) { return (23456, "Hello!%"); } } // web3.js constMyContract = new web3.eth.Contract(abi, address); MyContract.methods.myFunction().call() .then(console.log); > Result { myNumber: '23456', myString: '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” ?

15. Call to get gas estimates! myContract.methods.myMethod(123).estimateGas({gas: 5000000}, function(error, gasAmount){ if(gasAmount == 5000000) console.log('Method ran out of gas'); }); Why did they not use “then” here?

16. Invoke using send and (i) callback, (ii) promise) // using the callback myContract.methods.myMethod(123).send({from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'}, (error, transactionHash) => { ... }); // using the promise myContract.methods.myMethod(123).send({from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'}) .then((receipt) => { // receipt can also be a new contract instance, when coming from a "contract.deploy({...}).send()" });

17. Event Emitter • You can also use event emitter..explore this later? myContract.methods.myMethod(123).send({from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'}) .on('transactionHash', (hash) => { ... }) .on('confirmation', (confirmationNumber, receipt) => { ... }) .on('receipt', (receipt) => { // receipt example console.log(receipt);

18. One more thing: events myContract.events.MyEvent({ filter: {myIndexedParam: [20,23], myOtherIndexedParam: '0x123456789...'}, // Using an array means OR: e.g. 20 or 23 fromBlock: 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);

19. Can we get all the earthquakes since the genesis (block)? myContract.getPastEvents('MyEvent', { filter: {myIndexedParam: [20,23], myOtherIndexedParam: '0x123456789...'}, // Using an array means OR: e.g. 20 or 23 fromBlock: 0, toBlock: 'latest' }, (error, events) => { console.log(events); }) .then((events) => { console.log(events) // same results as the optional callback above });

20. Summarizing • Web3 object contract object function call, send, gasEstimate 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