{"id":16597225,"url":"https://github.com/adrianmcli/web3-vs-ethers","last_synced_at":"2025-04-06T22:08:25.297Z","repository":{"id":41269705,"uuid":"203524599","full_name":"adrianmcli/web3-vs-ethers","owner":"adrianmcli","description":"A basic cheatsheet of Web3.js vs Ethers (along w/ example apps!)","archived":false,"fork":false,"pushed_at":"2023-01-23T23:58:31.000Z","size":1621,"stargazers_count":374,"open_issues_count":23,"forks_count":45,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-30T20:11:51.949Z","etag":null,"topics":["dapp","ethereum","ethers","ethersjs","truffle","web3","web3js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adrianmcli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-21T06:51:08.000Z","updated_at":"2025-03-11T14:45:38.000Z","dependencies_parsed_at":"2023-02-13T05:15:51.429Z","dependency_job_id":null,"html_url":"https://github.com/adrianmcli/web3-vs-ethers","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianmcli%2Fweb3-vs-ethers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianmcli%2Fweb3-vs-ethers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianmcli%2Fweb3-vs-ethers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianmcli%2Fweb3-vs-ethers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adrianmcli","download_url":"https://codeload.github.com/adrianmcli/web3-vs-ethers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247557767,"owners_count":20958047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dapp","ethereum","ethers","ethersjs","truffle","web3","web3js"],"created_at":"2024-10-11T23:55:16.367Z","updated_at":"2025-04-06T22:08:25.278Z","avatar_url":"https://github.com/adrianmcli.png","language":"JavaScript","readme":"# Web3.js vs Ethers.js\n\nA guide to the basic differences between Web3.js and Ethers.js, the two most popular libraries for interacting with the Ethereum blockchain. And two example frontend apps using React + Hooks!\n\n---\n\n## Sample Dapp Contract\n\nInside the `smart-contracts` folder, you will find a simple Truffle project with the following Solidity contract:\n\n```\npragma solidity ^0.5.0;\n\ncontract Counter {\n  uint count = 0;\n\n  function increment() public {\n    count = count + 1;\n  }\n\n  function getCount() public view returns (uint) {\n    return count;\n  }\n}\n```\n\n## Setup Truffle project\n\nBefore you run any of the frontend UIs, make sure to start the development console with `truffle develop`, and then run the `migrate` command to compile and deploy the contract onto the development chain.\n\n## Two Frontend UIs\n\nThere are two folders (`app-ethers` and `app-web3js`) each containing a simple React frontend for the above contract. The only substantial difference between these two UIs is located in the `useCounterContract.js` files.\n\nHere are the direct links for your convenience:\n\n- [Ethers.js App](./app-ethers/useCounterContract.js)\n- [Web3.js App](./app-web3js/useCounterContract.js)\n\n### Running the apps\n\nIn each of these apps, you can serve the frontends with the following commands:\n\n```\nnpm install\nnpm start\n```\n\nThis will serve the frontend on `http://localhost:1234` which you can view in your browser.\n\n## Differences\n\nThere are three major portions in this code: the setup, reading (calling a constant method), and writing (calling a non-constant mutating method).\n\n### Setup\n\nWith Web3.js, we need the following to instantiate a connected contract instance that can make read/write calls:\n\n- contract ABI\n- deployed contract address\n- a `from` address (for `send` transactions)\n\nNote that the `networkId` is required for us to fetch the deployed address from our contract artifact.\n\n```js\n// Web3.js\nconst web3 = new Web3(\"http://127.0.0.1:8545\");\nconst accounts = await web3.eth.getAccounts();\nconst networkId = await web3.eth.net.getId();\nconst contractAddress = artifact.networks[networkId].address;\n\ncontractInstance = new web3.eth.Contract(artifact.abi, contractAddress, {\n  from: accounts[0],\n});\n```\n\nWith Ethers.js, we need the following for our contract instance:\n\n- deployed contract address\n- contract ABI\n- a `Signer` object (similar to `Provider`, but with a specified `Signer`)\n\n```js\n// Ethers.js\nconst provider = new ethers.providers.JsonRpcProvider();\nconst network = await provider.getNetwork();\nconst contractAddress = artifact.networks[network.chainId].address;\n\ncontractInstance = new ethers.Contract(\n  contractAddress,\n  artifact.abi,\n  provider.getSigner(),\n);\n```\n\n### Calling a constant method\n\n```js\n// Web3.js\nconst count = await contractInstance.methods.getCount().call();\nconsole.log(count); // returns a String\n```\n\n```js\n// Ethers.js\nconst count = await contractInstance.getCount();\nconsole.log(count); // returns a BigNumber instance\n```\n\nThese two are very similar, but in our example Ethers.js returns a BigNumber instance by default whereas Web3.js will return the number as a String.\n\n### Calling a non-constant method\n\n```js\n// Web3.js\nawait contract.current.methods.increment().send();\n// tx has been mined\n```\n\n```js\n// Ethers.js\nconst tx = await contract.current.increment();\nawait tx.wait(); // wait for mining\n```\n\nNote that Web3.js will return a [PromiEvent](https://web3js.readthedocs.io/en/v1.2.1/callbacks-promises-events.html?highlight=promievent#callbacks-promises-events) which allows you to subscribe to confirmations, errors, and the transaction hash.\n\nEthers.js will return a transaction object where a bunch of information relating to the transaction is kept. You can grab the hash via `tx.hash`, but you must `await` on `tx.wait()` if you want to make sure it has been mined.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianmcli%2Fweb3-vs-ethers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrianmcli%2Fweb3-vs-ethers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianmcli%2Fweb3-vs-ethers/lists"}