2b:null 2c:["$","title",null,{"children":"Using Web3 Javascript Libraries | Josh | Observable"}] 31:[] 2f:{"id":"862f47320221d042","slug":"using-web3-js","title":"Using Web3 Javascript Libraries","thumbnail":"4d51c49ae772f37cdb3f009197cfc4ac7a2f59ef6adb04bb8d25c1d1f96f7215","access_level":"public","create_time":"$D2019-01-20T03:42:07.813Z","update_time":"$D2021-05-26T15:07:48.085Z","view_time":null,"first_public_time":"$D2019-01-20T22:32:34.623Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"6fcfc4ab5c7d27ff","login":"critesjosh","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/3af803089a3b33e91e12a5f1de94843f56994f6ec8207988352c63544ce7b941","tier":"starter_2024"},"version":455,"publish_version":455,"role":null,"authored":false,"authors":[{"type":"individual","id":"229dbb438b00537c","login":"critesjosh","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/3af803089a3b33e91e12a5f1de94843f56994f6ec8207988352c63544ce7b941","tier":null}],"members":[{"type":"individual","id":"229dbb438b00537c","login":"critesjosh","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/3af803089a3b33e91e12a5f1de94843f56994f6ec8207988352c63544ce7b941","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Using Web3 Javascript Libraries","cells":[{"id":0,"value":"md`# Using Web3 Javascript Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"md`## Intro to Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`Observable notebooks consist of [JavaScript cells](/@mbostock/introduction-to-code). You can view the code for any cell by clicking the cell menu in the left margin. (The cells below are pinned open.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"md`A cell can have a name, allowing its value to be referenced by other cells. A referencing cell is [run automatically](/@mbostock/how-observable-runs) when the referenced value changes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`You can inspect nested values such as objects and arrays by clicking on them, just like in your browser’s developer console.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md`Enough intro, let's get into it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`## JSON-RPC`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md` Let's look at how we can communicate with our ethereum client. Ethereum clients use the JSON-RPC specificition to talk to the outside world. [Here is the wiki page on JSON-RPC for Ethereum](https://github.com/ethereum/wiki/wiki/JSON-RPC).\n\nTo talk to our local client, we can use a simple http POST request pointing to our running client [ganache-cli](https://github.com/trufflesuite/ganache-cli) or another client must be running at localhost:8545 for this to work out of the box. The following code shows how we can do it with plain Javascript right in the browser. Try changing the 'JSONrequest' to different things. Also try connecting to a live Ethereum network such as the main net or Rinkeby to test the low level JSON-RPC calls.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"{\n // Try changing the method field in this JSON request to some different values as defined in the JSON-RPC documentation.\n let JSONrequest =\n '{\"jsonrpc\":\"2.0\",\"method\":\"eth_accounts\",\"params\":[],\"id\":1}';\n\n // Try changing this endpoint to an Infura node or another public facing client\n let endpoint = \"http://127.0.0.1:8545\"; // if localhost isn't working, try '127.0.0.1:8545'\n\n let requestPromise = new Promise((resolve, reject) => {\n let req = new XMLHttpRequest();\n req.addEventListener(\"load\", function () {\n resolve(JSON.parse(this.responseText));\n });\n req.open(\"POST\", endpoint);\n req.setRequestHeader(\"content-type\", \"application/json\");\n req.send(JSONrequest);\n });\n\n return requestPromise;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`As you can see, this method of talking to our ethereum client is cumbersome and difficult. Luckily there are easier ways to do it, enter the javascript libraries. In this lesson we are going to look at [web3.js](https://github.com/ethereum/wiki/wiki/JavaScript-API) and [ethers.js](https://docs.ethers.io/ethers.js/html/index.html) specifically, but there are others available such as [Truffle](https://github.com/trufflesuite/truffle) and [ethjs](https://www.npmjs.com/package/ethjs).\n\nThese libraries handle a lot of the low level request formation, client connection management and account handling. Throughout the rest of this exercise, we will be using web3js and ethers.js to handle our communication with Ethereum nodes rather than using JSON-RPC directly.\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`## Connecting to a client`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`\n### web3.js\n\nThis Observable interface does not allow us to import web3.js via npm. To use web3.js, you will need to have the [Metamask browser extenstion](https://metamask.io) installed. Metamask automatically injects an instance of web3 into the browser page, making it available to us in this exercise.\n\nYou can connect to a locally running ethereum client over an http connection. I try running ganache and connecting to it with the following:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"web3js = new Web3(\"ws://localhost:8545\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"md`In the line above, you are telling the web3js object that there is an ethereum client running at \"http://localhost:8545\". You can inspect this object right in this interface. You can see that the current version of the web3.js.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"version = web3js.version","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`In the line above, you are telling the web3js object that there is an ethereum client running at \"http://localhost:8545\". If metamask is installed in your browser, you can get the injected web3 object like so`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"metamask = new Web3(web3.currentProvider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md`Depending on which network your metamask is connected to, you will see a different network 'networkVersion' in the 'currentProvider' object. Try inspecting the 'networkVersion' above, changing the network that metamask is connected to, and inspecting the 'networkVersion' again. You may need to refresh your browser for the change to register.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"md`\n### Ethers.js\n\nWe can import ethers.js directly into this interface using the following 'require()' statement.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"ethers = require(\"https://cdn.ethers.io/lib/ethers-5.1.umd.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`\nUsing ethers to connect to a running client is similar to how you do it with web3js, but the object is very different.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"ethersProvider = new ethers.providers.Web3Provider(metamask.currentProvider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`## Accounts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md `We can check the currently available accounts on ganache by getting the accounts. If you restart or change the client, you can see the available accounts change.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"accounts = web3js.eth.personal.getAccounts()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"MMaccount = metamask.currentProvider.selectedAddress","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`## Account Balances`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`We can check the balance of the first account.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"balance = web3js.eth.getBalance(accounts[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`or with metamask`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"MMbalance = new Promise((resolve, reject) => {\n metamask.eth.getBalance(MMaccount, (err, result) => { resolve(result) })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`This is the user balance in Wei. Let's convert it to ether.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`## Transactions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`Simple ether transfers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"tx = web3js.eth.sendTransaction({\n from: accounts[0],\n to: accounts[1],\n value: web3js.utils.toWei(\"1\", \"ether\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"receipt = new Promise((resolve, reject) => {\n web3js.eth.getTransaction(tx.transactionHash, (err, result) => {\n resolve(result);\n });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"Web3 = require(\"https://cdnjs.cloudflare.com/ajax/libs/web3/1.2.7-rc.0/web3.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"