{"id":23021432,"url":"https://github.com/kamescg/ethers-react","last_synced_at":"2025-08-14T09:32:56.001Z","repository":{"id":43949915,"uuid":"260714956","full_name":"kamescg/ethers-react","owner":"kamescg","description":null,"archived":false,"fork":false,"pushed_at":"2022-02-13T09:58:02.000Z","size":275,"stargazers_count":17,"open_issues_count":5,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2023-03-05T09:35:48.280Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kamescg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-02T15:20:12.000Z","updated_at":"2022-10-09T05:45:06.000Z","dependencies_parsed_at":"2022-09-22T08:50:29.144Z","dependency_job_id":null,"html_url":"https://github.com/kamescg/ethers-react","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamescg%2Fethers-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamescg%2Fethers-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamescg%2Fethers-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamescg%2Fethers-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kamescg","download_url":"https://codeload.github.com/kamescg/ethers-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229816202,"owners_count":18128537,"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":[],"created_at":"2024-12-15T12:18:17.088Z","updated_at":"2024-12-15T12:18:18.539Z","avatar_url":"https://github.com/kamescg.png","language":"JavaScript","readme":"# Ethers React\n\nAn ethers.js React library to simplify interactions with an Ethereum Blockchain.\n\n# Installation\n\n```\n$ npm install @ethers-react/system\n$ yarn add @ethers-react/system\n```\n\n## Extensions\n\n```.sh\n// Reactive Extension\n$ npm install @ethers-react/reactive\n$ yarn add @ethers-react/reactive\n\n// Provider Select Extension\n$ npm install @ethers-react/provider\n$ yarn add @ethers-react/provider\n\n// Global State Extension\n$ npm install @ethers-react/reactive\n$ yarn add @ethers-react/reactive\n```\n\n# Introduction\n\nThe `ethers-react` module is built to increase developer velocity and improve the Ethereum developer experience.\n\nBy encapsulating `ethers.js` functionality into a suite of React hooks, developers can more easily manage everyday blockchain tasks like sending transactions, reading from smart contracts, filtering log events and managing typed data.\n\n#### Common Tasks\n\nBelow is a small list of functionality the `ethers-react` module provides.\n\n**Sending \u0026 Watching Transactions**\n\n- useSendTransaction\n- useContractSendTransaction\n- useGetTransaction\n- useGetTransactionReceipt\n- useTransactionWatch\n\n**Reading \u0026 Parsing Data**\n\n- useContractRead\n- useGetEncodedData\n- useGetEvents\n- useGetTransaction\n- useGetTransactionReceipt\n\n**Signing Data**\n\n- useWalletSignMessage\n- useWalletSignTransaction\n- useWalletSignTypedMessage\n- useWalletSignTypedMessageV3\n- useWalletSignTypedMessageV4\n\n# Extensions\n\nThe `ethers-react` module was built with extensibility in mind.\n\nCore functionality is provided by `@ethers-react/system` and additional functionality can be added with extensions.\n\n## Examples\n\n### Web3Modal Extension\n\nDevelopers can add the `Web3Modal` extension to give users the ability to select their wallet of choice.\n\n```.js\nimport {EthersProvider} from '@ethers-react/system';\nimport {extension as Web3ModalExtension} from '@ethers-react/web3modal';\nimport Web3Modal from 'web3modal';\n\nexport const web3Modal = new Web3Modal({\n  network: 'mainnet',\n  cacheProvider: true,\n  providerOptions:  {}\n});\n\nWeb3ModalExtension.initialState = {\n  web3Modal: web3Modal,\n};\n\nexport default props =\u003e {\n  return (\n    \u003cEthersProvider extensions={[Web3ModalExtension]}\u003e\n      {props.children}\n    \u003c/EthersProvider\u003e\n  );\n};\n```\n\n### Reactive Extension\n\nDevelopers can add reactive functinality to automate important state updates.\n\n```.js\nimport {EthersProvider} from '@ethers-react/system';\nimport {extension as ReactiveExtension} from '@ethers-react/reactive';\n\n/* --- Reactive --- */\nReactiveExtension.settings.getAccountBalance = true;\nReactiveExtension.settings.getAccountOnLoad = true;\nReactiveExtension.settings.getProviderSigner = true;\nReactiveExtension.settings.getWalletProviderInitialize = false;\nReactiveExtension.settings.watchAccountOnChange = true;\nReactiveExtension.settings.watchBlockCurrent = true;\nReactiveExtension.settings.getWalletBalance = true;\nReactiveExtension.settings.getWalletAddress = true;\nReactiveExtension.settings.getWalletNetwork = true;\nReactiveExtension.settings.getWalletNonce = false;\n\nexport default props =\u003e {\n  return (\n    \u003cEthersProvider extensions={[ReactiveExtension]}\u003e\n      {props.children}\n    \u003c/EthersProvider\u003e\n  );\n};\n```\n\n#### ⚠️ Minimal Viable Library Warning ⚠️\n\nHow modules are initialize IS NOT perfected.\n\nI'm still experimenting with passing in extensions and figuring out how to best handle unique and repeated reducers. For example the `ADDRESS_UPDATE` switch case is included multiple times both in the `@ethers-react/system` and several of the extensions.\n\n# Setup\n\nThe `ethers-react` module is a small family of individual modules that provide specific functionlity.\n\nThe `@ethers-react/system` module is the core module that provides the scaffolding for installing other extensions and also a suite of essential hooks to make everyday Ethereum interactions easier.\n\nThe `@ethers-react/reactive` module provides \"reactive\" functionality or simply put certain functionality us \"triggered\" or reacts to state changes in the application. For example when a user enables a provider, the reactive module will automatically detect that change and call functions like `balance` and `getSigner` making those state variables available to the rest of the application.\n\nThe `@ethers-react/web3modal` module adds provider selection features by including Web3Modal functionality to the application state management system. In other words users can select their provider of choice (MetaMask, Fortmatic, Portis, BurnerWallet, etc...) and that provider will be used as the primary provider and wallet.\n\n### Basic Setup\n\n```\nimport {EthersProvider} from '@ethers-react/system';\n\nexport default props =\u003e {\n  return (\n      \u003cEthersProvider\u003e\n        {props.children}\n      \u003c/EthersProvider\u003e\n  );\n};\n\n\n```\n\n### Extensions Setup\n\n```.js\nimport {EthersProvider} from '@ethers-react/system';\n\n// Configuration\nimport {contracts, extensions} from './settings/blockchain';\n\n\nexport default props =\u003e {\n  return (\n    \u003cEthersProvider contracts={contracts} extensions={extensions}\u003e\n      {props.children}\n    \u003c/EthersProvider\u003e\n  );\n};\n```\n\n# Hooks\n\n## System (`@ethers-react/system`)\n\n- useBalanceChange\n- useBlockMined\n- useContractDeploy\n- useContractRead\n- useContractSendTransaction\n- useGetEncodedData\n- useGetEvents\n- useGetTransaction\n- useGetTransactionReceipt\n- useTransactionWatch\n- useWalletBalanceChange\n- useWalletEstiamteTransaction\n- useWalletSendTransaction\n- useWalletSignMessage\n- useWalletSignTransaction\n- useWalletSignTypedMessage\n- useWalletSignTypedMessageV3\n- useWalletSignTypedMessageV4\n\n## Reactive (`@ethers-react/reactive`)\n\n## Why\n\nThe `ethers-react` module was crafted, because `ethers.js` is Ethereum's most advanced Javascript library. The `ethers.js` module provides a suite of functionality and utilities for developers building decentralized applications.\n\n**Why not Web3.js you ask?**\n\nThe `Web3.js` library is fine. The `web3.js` library provides full Web3 functionality, like access to Whisper and Swarm, that `ethers.js` does not. That being said, I never use either those protocols so don't need the additional \"bloat\" that comes with installing `Web3.js`.\n\nIf you're want to use `Web3.js` I recommend checking out `web3-react` built by @NoahZinsmeister.\n\nhttps://github.com/NoahZinsmeister/web3-react\n\n## Contributors\n\n| Name               | Website                   |\n| ------------------ | ------------------------- |\n| **Kames Geraghty** | \u003chttps://www.kamescg.com\u003e |\n\n## License\n\n[MIT](LICENSE) © [Kames](https://www.kamescg.com)\n\n##\n\n[npm]: https://www.npmjs.com/\n[yarn]: https://yarnpkg.com/\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkamescg%2Fethers-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkamescg%2Fethers-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkamescg%2Fethers-react/lists"}