wagmi 0.2.3 → 0.2.7

package/README.md

@@ -1,5 +1,5 @@
 <p>
-  <a aria-label="NPM version" href="https://www.npmjs.com/package/wagmi">
+  <a aria-label="Version" href="https://www.npmjs.com/package/wagmi">
     <img
       alt=""
       src="https://img.shields.io/npm/v/wagmi.svg?style=for-the-badge&labelColor=161c22"
@@ -17,6 +17,12 @@
       src="https://img.shields.io/github/sponsors/tmm.svg?style=for-the-badge&labelColor=161c22"
     />
   </a>
+  <a aria-label="Downloads" href="https://www.npmjs.com/package/wagmi">
+    <img
+      alt=""
+      src="https://img.shields.io/npm/dm/wagmi.svg?style=for-the-badge&labelColor=161c22"
+    />
+  </a>
 </p>
 
 # wagmi

package/dist/declarations/src/hooks/accounts/useBalance.d.ts

@@ -14,6 +14,7 @@ export declare type Config = {
 };
 export declare const useBalance: ({ addressOrName, formatUnits, skip, token, watch, }?: Config) => readonly [{
     readonly data: {
+        decimals: number;
         formatted: string;
         symbol: string;
         value: BigNumber;
@@ -26,6 +27,7 @@ export declare const useBalance: ({ addressOrName, formatUnits, skip, token, wat
     token?: Config['token'];
 } | undefined) => Promise<{
     data: {
+        decimals: number;
         formatted: string;
         symbol: string;
         value: BigNumber;

package/dist/declarations/src/hooks/accounts/useNetwork.d.ts

@@ -1,4 +1,4 @@
-import { Chain } from 'wagmi-private';
+import { Chain, SwitchChainError } from 'wagmi-private';
 export declare const useNetwork: () => readonly [{
     readonly data: {
         readonly chain: {
@@ -21,10 +21,10 @@ export declare const useNetwork: () => readonly [{
     };
     readonly error: Error | undefined;
     readonly loading: boolean | undefined;
-}, ((chainId: number) => Promise<false | {
-    data: boolean;
-    error: undefined;
-} | {
+}, ((chainId: number) => Promise<{
     data: undefined;
-    error: Error;
+    error: SwitchChainError;
+} | {
+    data: Chain | undefined;
+    error: undefined;
 }>) | undefined];

package/dist/declarations/src/index.d.ts

@@ -1,6 +1,6 @@
 export { Provider, useContext } from './context';
 export type { Props as ProviderProps } from './context';
 export { useAccount, useBalance, useBlockNumber, useConnect, useContract, useContractEvent, useContractRead, useContractWrite, useEnsAvatar, useEnsLookup, useEnsResolver, useFeeData, useNetwork, useProvider, useSigner, useSignMessage, useToken, useTransaction, useWaitForTransaction, useWebSocketProvider, } from './hooks';
-export { Connector, InjectedConnector, chain, defaultChains, defaultL2Chains, developmentChains, erc1155ABI, erc20ABI, erc721ABI, normalizeChainId, } from 'wagmi-private';
+export { Connector, InjectedConnector, chain, allChains, defaultChains, defaultL2Chains, developmentChains, erc1155ABI, erc20ABI, erc721ABI, normalizeChainId, } from 'wagmi-private';
 export { Context } from './context';
 export type { Chain, Data } from 'wagmi-private';

package/dist/wagmi.cjs.dev.js

@@ -616,21 +616,24 @@ var useBalance = function useBalance() {
         if (config_.token) {
           var contract = new ethers.ethers.Contract(config_.token, wagmiPrivate.erc20ABI, provider);
           var value = yield contract.balanceOf(config_.addressOrName);
+          var decimals = yield contract.decimals();
           var symbol = yield contract.symbol();
           balance = {
+            decimals,
             formatted: ethers.utils.formatUnits(value, formatUnits_),
             symbol,
             value
           };
         } else {
-          var _connector$chains, _chain$nativeCurrency, _chain$nativeCurrency2;
+          var _connector$chains, _chain$nativeCurrency, _chain$nativeCurrency2, _chain$nativeCurrency3, _chain$nativeCurrency4;
 
           var _value = yield provider.getBalance(config_.addressOrName);
 
           var chain = [...((_connector$chains = connector === null || connector === void 0 ? void 0 : connector.chains) !== null && _connector$chains !== void 0 ? _connector$chains : []), ...wagmiPrivate.defaultChains, ...wagmiPrivate.defaultL2Chains].find(x => x.id === provider.network.chainId);
           balance = {
+            decimals: (_chain$nativeCurrency = chain === null || chain === void 0 ? void 0 : (_chain$nativeCurrency2 = chain.nativeCurrency) === null || _chain$nativeCurrency2 === void 0 ? void 0 : _chain$nativeCurrency2.decimals) !== null && _chain$nativeCurrency !== void 0 ? _chain$nativeCurrency : 18,
             formatted: ethers.utils.formatUnits(_value, formatUnits_),
-            symbol: (_chain$nativeCurrency = chain === null || chain === void 0 ? void 0 : (_chain$nativeCurrency2 = chain.nativeCurrency) === null || _chain$nativeCurrency2 === void 0 ? void 0 : _chain$nativeCurrency2.symbol) !== null && _chain$nativeCurrency !== void 0 ? _chain$nativeCurrency : 'ETH',
+            symbol: (_chain$nativeCurrency3 = chain === null || chain === void 0 ? void 0 : (_chain$nativeCurrency4 = chain.nativeCurrency) === null || _chain$nativeCurrency4 === void 0 ? void 0 : _chain$nativeCurrency4.symbol) !== null && _chain$nativeCurrency3 !== void 0 ? _chain$nativeCurrency3 : 'ETH',
             value: _value
           };
         }
@@ -792,22 +795,25 @@ var useNetwork = () => {
   var chainId = data === null || data === void 0 ? void 0 : (_data$chain = data.chain) === null || _data$chain === void 0 ? void 0 : _data$chain.id;
   var unsupported = data === null || data === void 0 ? void 0 : (_data$chain2 = data.chain) === null || _data$chain2 === void 0 ? void 0 : _data$chain2.unsupported;
   var activeChains = (_connector$chains = connector === null || connector === void 0 ? void 0 : connector.chains) !== null && _connector$chains !== void 0 ? _connector$chains : [];
-  var activeChain = [...activeChains, ...wagmiPrivate.defaultChains, ...wagmiPrivate.defaultL2Chains].find(x => x.id === chainId);
+  var activeChain = [...activeChains, ...wagmiPrivate.allChains].find(x => x.id === chainId);
   var switchNetwork = React__namespace.useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator(function* (chainId) {
-      if (!(connector !== null && connector !== void 0 && connector.switchChain)) return false;
+      if (!(connector !== null && connector !== void 0 && connector.switchChain)) return {
+        data: undefined,
+        error: new wagmiPrivate.SwitchChainError()
+      };
 
       try {
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
           error: undefined,
           loading: true
         }));
-        yield connector.switchChain(chainId);
+        var chain = yield connector.switchChain(chainId);
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
           loading: false
         }));
         return {
-          data: true,
+          data: chain,
           error: undefined
         };
       } catch (error_) {
@@ -1035,6 +1041,7 @@ var useContractRead = function useContractRead(contractConfig, functionName) {
         };
         var params = [...(Array.isArray(config_.args) ? config_.args : config_.args ? [config_.args] : []), ...(config_.overrides ? [config_.overrides] : [])];
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
+          error: undefined,
           loading: true
         }));
         var response = yield contract[functionName](...params);
@@ -1123,6 +1130,7 @@ var useContractWrite = function useContractWrite(contractConfig, functionName) {
         if (!connector) throw new wagmiPrivate.ConnectorNotFoundError();
         var params = [...(Array.isArray(config_.args) ? config_.args : config_.args ? [config_.args] : []), ...(config_.overrides ? [config_.overrides] : [])];
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
+          error: undefined,
           loading: true
         }));
         var signer = yield connector.getSigner();
@@ -1559,6 +1567,10 @@ Object.defineProperty(exports, 'InjectedConnector', {
   enumerable: true,
   get: function () { return wagmiPrivate.InjectedConnector; }
 });
+Object.defineProperty(exports, 'allChains', {
+  enumerable: true,
+  get: function () { return wagmiPrivate.allChains; }
+});
 Object.defineProperty(exports, 'chain', {
   enumerable: true,
   get: function () { return wagmiPrivate.chain; }

package/dist/wagmi.cjs.prod.js

@@ -616,21 +616,24 @@ var useBalance = function useBalance() {
         if (config_.token) {
           var contract = new ethers.ethers.Contract(config_.token, wagmiPrivate.erc20ABI, provider);
           var value = yield contract.balanceOf(config_.addressOrName);
+          var decimals = yield contract.decimals();
           var symbol = yield contract.symbol();
           balance = {
+            decimals,
             formatted: ethers.utils.formatUnits(value, formatUnits_),
             symbol,
             value
           };
         } else {
-          var _connector$chains, _chain$nativeCurrency, _chain$nativeCurrency2;
+          var _connector$chains, _chain$nativeCurrency, _chain$nativeCurrency2, _chain$nativeCurrency3, _chain$nativeCurrency4;
 
           var _value = yield provider.getBalance(config_.addressOrName);
 
           var chain = [...((_connector$chains = connector === null || connector === void 0 ? void 0 : connector.chains) !== null && _connector$chains !== void 0 ? _connector$chains : []), ...wagmiPrivate.defaultChains, ...wagmiPrivate.defaultL2Chains].find(x => x.id === provider.network.chainId);
           balance = {
+            decimals: (_chain$nativeCurrency = chain === null || chain === void 0 ? void 0 : (_chain$nativeCurrency2 = chain.nativeCurrency) === null || _chain$nativeCurrency2 === void 0 ? void 0 : _chain$nativeCurrency2.decimals) !== null && _chain$nativeCurrency !== void 0 ? _chain$nativeCurrency : 18,
             formatted: ethers.utils.formatUnits(_value, formatUnits_),
-            symbol: (_chain$nativeCurrency = chain === null || chain === void 0 ? void 0 : (_chain$nativeCurrency2 = chain.nativeCurrency) === null || _chain$nativeCurrency2 === void 0 ? void 0 : _chain$nativeCurrency2.symbol) !== null && _chain$nativeCurrency !== void 0 ? _chain$nativeCurrency : 'ETH',
+            symbol: (_chain$nativeCurrency3 = chain === null || chain === void 0 ? void 0 : (_chain$nativeCurrency4 = chain.nativeCurrency) === null || _chain$nativeCurrency4 === void 0 ? void 0 : _chain$nativeCurrency4.symbol) !== null && _chain$nativeCurrency3 !== void 0 ? _chain$nativeCurrency3 : 'ETH',
             value: _value
           };
         }
@@ -792,22 +795,25 @@ var useNetwork = () => {
   var chainId = data === null || data === void 0 ? void 0 : (_data$chain = data.chain) === null || _data$chain === void 0 ? void 0 : _data$chain.id;
   var unsupported = data === null || data === void 0 ? void 0 : (_data$chain2 = data.chain) === null || _data$chain2 === void 0 ? void 0 : _data$chain2.unsupported;
   var activeChains = (_connector$chains = connector === null || connector === void 0 ? void 0 : connector.chains) !== null && _connector$chains !== void 0 ? _connector$chains : [];
-  var activeChain = [...activeChains, ...wagmiPrivate.defaultChains, ...wagmiPrivate.defaultL2Chains].find(x => x.id === chainId);
+  var activeChain = [...activeChains, ...wagmiPrivate.allChains].find(x => x.id === chainId);
   var switchNetwork = React__namespace.useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator(function* (chainId) {
-      if (!(connector !== null && connector !== void 0 && connector.switchChain)) return false;
+      if (!(connector !== null && connector !== void 0 && connector.switchChain)) return {
+        data: undefined,
+        error: new wagmiPrivate.SwitchChainError()
+      };
 
       try {
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
           error: undefined,
           loading: true
         }));
-        yield connector.switchChain(chainId);
+        var chain = yield connector.switchChain(chainId);
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
           loading: false
         }));
         return {
-          data: true,
+          data: chain,
           error: undefined
         };
       } catch (error_) {
@@ -1035,6 +1041,7 @@ var useContractRead = function useContractRead(contractConfig, functionName) {
         };
         var params = [...(Array.isArray(config_.args) ? config_.args : config_.args ? [config_.args] : []), ...(config_.overrides ? [config_.overrides] : [])];
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
+          error: undefined,
           loading: true
         }));
         var response = yield contract[functionName](...params);
@@ -1123,6 +1130,7 @@ var useContractWrite = function useContractWrite(contractConfig, functionName) {
         if (!connector) throw new wagmiPrivate.ConnectorNotFoundError();
         var params = [...(Array.isArray(config_.args) ? config_.args : config_.args ? [config_.args] : []), ...(config_.overrides ? [config_.overrides] : [])];
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
+          error: undefined,
           loading: true
         }));
         var signer = yield connector.getSigner();
@@ -1559,6 +1567,10 @@ Object.defineProperty(exports, 'InjectedConnector', {
   enumerable: true,
   get: function () { return wagmiPrivate.InjectedConnector; }
 });
+Object.defineProperty(exports, 'allChains', {
+  enumerable: true,
+  get: function () { return wagmiPrivate.allChains; }
+});
 Object.defineProperty(exports, 'chain', {
   enumerable: true,
   get: function () { return wagmiPrivate.chain; }

package/dist/wagmi.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getDefaultProvider } from '@ethersproject/providers';
-import { erc20ABI, defaultChains, defaultL2Chains, ConnectorNotFoundError, UserRejectedRequestError, InjectedConnector } from 'wagmi-private';
-export { Connector, InjectedConnector, chain, defaultChains, defaultL2Chains, developmentChains, erc1155ABI, erc20ABI, erc721ABI, normalizeChainId } from 'wagmi-private';
+import { erc20ABI, defaultChains, defaultL2Chains, allChains, SwitchChainError, ConnectorNotFoundError, UserRejectedRequestError, InjectedConnector } from 'wagmi-private';
+export { Connector, InjectedConnector, allChains, chain, defaultChains, defaultL2Chains, developmentChains, erc1155ABI, erc20ABI, erc721ABI, normalizeChainId } from 'wagmi-private';
 import { utils, ethers, Contract } from 'ethers';
 
 function _defineProperty(obj, key, value) {
@@ -593,21 +593,24 @@ var useBalance = function useBalance() {
         if (config_.token) {
           var contract = new ethers.Contract(config_.token, erc20ABI, provider);
           var value = yield contract.balanceOf(config_.addressOrName);
+          var decimals = yield contract.decimals();
           var symbol = yield contract.symbol();
           balance = {
+            decimals,
             formatted: utils.formatUnits(value, formatUnits_),
             symbol,
             value
           };
         } else {
-          var _connector$chains, _chain$nativeCurrency, _chain$nativeCurrency2;
+          var _connector$chains, _chain$nativeCurrency, _chain$nativeCurrency2, _chain$nativeCurrency3, _chain$nativeCurrency4;
 
           var _value = yield provider.getBalance(config_.addressOrName);
 
           var chain = [...((_connector$chains = connector === null || connector === void 0 ? void 0 : connector.chains) !== null && _connector$chains !== void 0 ? _connector$chains : []), ...defaultChains, ...defaultL2Chains].find(x => x.id === provider.network.chainId);
           balance = {
+            decimals: (_chain$nativeCurrency = chain === null || chain === void 0 ? void 0 : (_chain$nativeCurrency2 = chain.nativeCurrency) === null || _chain$nativeCurrency2 === void 0 ? void 0 : _chain$nativeCurrency2.decimals) !== null && _chain$nativeCurrency !== void 0 ? _chain$nativeCurrency : 18,
             formatted: utils.formatUnits(_value, formatUnits_),
-            symbol: (_chain$nativeCurrency = chain === null || chain === void 0 ? void 0 : (_chain$nativeCurrency2 = chain.nativeCurrency) === null || _chain$nativeCurrency2 === void 0 ? void 0 : _chain$nativeCurrency2.symbol) !== null && _chain$nativeCurrency !== void 0 ? _chain$nativeCurrency : 'ETH',
+            symbol: (_chain$nativeCurrency3 = chain === null || chain === void 0 ? void 0 : (_chain$nativeCurrency4 = chain.nativeCurrency) === null || _chain$nativeCurrency4 === void 0 ? void 0 : _chain$nativeCurrency4.symbol) !== null && _chain$nativeCurrency3 !== void 0 ? _chain$nativeCurrency3 : 'ETH',
             value: _value
           };
         }
@@ -769,22 +772,25 @@ var useNetwork = () => {
   var chainId = data === null || data === void 0 ? void 0 : (_data$chain = data.chain) === null || _data$chain === void 0 ? void 0 : _data$chain.id;
   var unsupported = data === null || data === void 0 ? void 0 : (_data$chain2 = data.chain) === null || _data$chain2 === void 0 ? void 0 : _data$chain2.unsupported;
   var activeChains = (_connector$chains = connector === null || connector === void 0 ? void 0 : connector.chains) !== null && _connector$chains !== void 0 ? _connector$chains : [];
-  var activeChain = [...activeChains, ...defaultChains, ...defaultL2Chains].find(x => x.id === chainId);
+  var activeChain = [...activeChains, ...allChains].find(x => x.id === chainId);
   var switchNetwork = React.useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator(function* (chainId) {
-      if (!(connector !== null && connector !== void 0 && connector.switchChain)) return false;
+      if (!(connector !== null && connector !== void 0 && connector.switchChain)) return {
+        data: undefined,
+        error: new SwitchChainError()
+      };
 
       try {
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
           error: undefined,
           loading: true
         }));
-        yield connector.switchChain(chainId);
+        var chain = yield connector.switchChain(chainId);
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
           loading: false
         }));
         return {
-          data: true,
+          data: chain,
           error: undefined
         };
       } catch (error_) {
@@ -1012,6 +1018,7 @@ var useContractRead = function useContractRead(contractConfig, functionName) {
         };
         var params = [...(Array.isArray(config_.args) ? config_.args : config_.args ? [config_.args] : []), ...(config_.overrides ? [config_.overrides] : [])];
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
+          error: undefined,
           loading: true
         }));
         var response = yield contract[functionName](...params);
@@ -1100,6 +1107,7 @@ var useContractWrite = function useContractWrite(contractConfig, functionName) {
         if (!connector) throw new ConnectorNotFoundError();
         var params = [...(Array.isArray(config_.args) ? config_.args : config_.args ? [config_.args] : []), ...(config_.overrides ? [config_.overrides] : [])];
         setState(x => _objectSpread2(_objectSpread2({}, x), {}, {
+          error: undefined,
           loading: true
         }));
         var signer = yield connector.getSigner();

package/package.json

@@ -2,7 +2,7 @@
   "name": "wagmi",
   "description": "React Hooks library for Ethereum",
   "license": "MIT",
-  "version": "0.2.3",
+  "version": "0.2.7",
   "ethereum": "awkweb.eth",
   "repository": "tmm/wagmi",
   "homepage": "https://wagmi-xyz.vercel.app",
@@ -47,7 +47,7 @@
   "dependencies": {
     "@ethersproject/providers": "^5.5.1",
     "@walletconnect/ethereum-provider": "1.7.1",
-    "wagmi-private": "0.1.5",
+    "wagmi-private": "0.1.7",
     "walletlink": "^2.2.8"
   },
   "devDependencies": {
@@ -57,7 +57,7 @@
     "ethers": "^5.5.1",
     "react": "^17.0.0",
     "walletlink": "^2.2.8",
-    "wagmi-testing": "0.1.5"
+    "wagmi-testing": "0.1.7"
   },
-  "readme": "<p>\n  <a aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/wagmi\">\n    <img\n      alt=\"\"\n      src=\"https://img.shields.io/npm/v/wagmi.svg?style=for-the-badge&labelColor=161c22\"\n    />\n  </a>\n  <a aria-label=\"License\" href=\"/LICENSE\">\n    <img\n      alt=\"\"\n      src=\"https://img.shields.io/npm/l/wagmi.svg?style=for-the-badge&labelColor=161c22\"\n    />\n  </a>\n  <a aria-label=\"Sponsors\" href=\"https://github.com/sponsors/tmm\">\n    <img\n      alt=\"\"\n      src=\"https://img.shields.io/github/sponsors/tmm.svg?style=for-the-badge&labelColor=161c22\"\n    />\n  </a>\n</p>\n\n# wagmi\n\n**React Hooks library for Ethereum, built on [ethers.js](https://github.com/ethers-io/ethers.js).**\n\n🚀 &nbsp; 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.\n\n💼 &nbsp; Built-in wallet connectors for MetaMask, WalletConnect, and Coinbase Wallet\n\n🌀 &nbsp; Auto-refresh data on wallet and network changes\n\n🦄 &nbsp; TypeScript ready\n\n💨 &nbsp; Zero-dependencies (besides ethers.js peer dependency)\n\n🌳 &nbsp; Test suite and documentation\n\n📖 &nbsp; MIT License\n\n## Documentation\n\nVisit https://wagmi-xyz.vercel.app to view the full documentation.\n\n## Usage\n\n1. Install the dependencies.\n\n```bash\npnpm add wagmi ethers\n```\n\n2. Wrap your app with the `Provider` component.\n\n```tsx\nimport { Provider } from 'wagmi'\n\nconst App = () => (\n  <Provider>\n    <YourRoutes />\n  </Provider>\n)\n```\n\n3. Use hooks.\n\n```tsx\nimport { useAccount } from 'wagmi'\n\nconst Page = () => {\n  const [{ data, error, loading }, disconnect] = useAccount({\n    fetchEns: true,\n  })\n\n  return ...\n}\n```\n\nEvery component inside the `Provider` is set up with the default `InjectedConnector` for connecting wallets and ethers.js [Default Provider](https://docs.ethers.io/v5/api/providers/#providers-getDefaultProvider) for fetching data.\n\nWant to learn more? Check out the [guides](https://wagmi-xyz.vercel.app/guides/connect-wallet) or browse the [API docs](https://wagmi-xyz.vercel.app/docs/provider).\n\n## Community\n\nFeel free to join the [discussions on GitHub](https://github.com/tmm/wagmi/discussions) or reach out [on Twitter](https://twitter.com/awkweb)!\n\n## Support\n\n- awkweb.eth\n- [GitHub Sponsors](https://github.com/sponsors/tmm)\n- Sign the [guestbook](https://github.com/tmm/wagmi/discussions/2)\n\n## Thanks\n\n- [ricmoo.eth](https://twitter.com/ricmoo) for creating and continued work on [ethers.js](https://github.com/ethers-io/ethers.js)\n- [Mirror](https://mirror.xyz) for creating space to do good work\n\n## License\n\nMIT.\n\n<br />\n\nwagmi\n"
+  "readme": "<p>\n  <a aria-label=\"Version\" href=\"https://www.npmjs.com/package/wagmi\">\n    <img\n      alt=\"\"\n      src=\"https://img.shields.io/npm/v/wagmi.svg?style=for-the-badge&labelColor=161c22\"\n    />\n  </a>\n  <a aria-label=\"License\" href=\"/LICENSE\">\n    <img\n      alt=\"\"\n      src=\"https://img.shields.io/npm/l/wagmi.svg?style=for-the-badge&labelColor=161c22\"\n    />\n  </a>\n  <a aria-label=\"Sponsors\" href=\"https://github.com/sponsors/tmm\">\n    <img\n      alt=\"\"\n      src=\"https://img.shields.io/github/sponsors/tmm.svg?style=for-the-badge&labelColor=161c22\"\n    />\n  </a>\n  <a aria-label=\"Downloads\" href=\"https://www.npmjs.com/package/wagmi\">\n    <img\n      alt=\"\"\n      src=\"https://img.shields.io/npm/dm/wagmi.svg?style=for-the-badge&labelColor=161c22\"\n    />\n  </a>\n</p>\n\n# wagmi\n\n**React Hooks library for Ethereum, built on [ethers.js](https://github.com/ethers-io/ethers.js).**\n\n🚀 &nbsp; 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.\n\n💼 &nbsp; Built-in wallet connectors for MetaMask, WalletConnect, and Coinbase Wallet\n\n🌀 &nbsp; Auto-refresh data on wallet and network changes\n\n🦄 &nbsp; TypeScript ready\n\n💨 &nbsp; Zero-dependencies (besides ethers.js peer dependency)\n\n🌳 &nbsp; Test suite and documentation\n\n📖 &nbsp; MIT License\n\n## Documentation\n\nVisit https://wagmi-xyz.vercel.app to view the full documentation.\n\n## Usage\n\n1. Install the dependencies.\n\n```bash\npnpm add wagmi ethers\n```\n\n2. Wrap your app with the `Provider` component.\n\n```tsx\nimport { Provider } from 'wagmi'\n\nconst App = () => (\n  <Provider>\n    <YourRoutes />\n  </Provider>\n)\n```\n\n3. Use hooks.\n\n```tsx\nimport { useAccount } from 'wagmi'\n\nconst Page = () => {\n  const [{ data, error, loading }, disconnect] = useAccount({\n    fetchEns: true,\n  })\n\n  return ...\n}\n```\n\nEvery component inside the `Provider` is set up with the default `InjectedConnector` for connecting wallets and ethers.js [Default Provider](https://docs.ethers.io/v5/api/providers/#providers-getDefaultProvider) for fetching data.\n\nWant to learn more? Check out the [guides](https://wagmi-xyz.vercel.app/guides/connect-wallet) or browse the [API docs](https://wagmi-xyz.vercel.app/docs/provider).\n\n## Community\n\nFeel free to join the [discussions on GitHub](https://github.com/tmm/wagmi/discussions) or reach out [on Twitter](https://twitter.com/awkweb)!\n\n## Support\n\n- awkweb.eth\n- [GitHub Sponsors](https://github.com/sponsors/tmm)\n- Sign the [guestbook](https://github.com/tmm/wagmi/discussions/2)\n\n## Thanks\n\n- [ricmoo.eth](https://twitter.com/ricmoo) for creating and continued work on [ethers.js](https://github.com/ethers-io/ethers.js)\n- [Mirror](https://mirror.xyz) for creating space to do good work\n\n## License\n\nMIT.\n\n<br />\n\nwagmi\n"
 }