# @grexie/web3-react

> Hooks to simplify calling web3 contracts, with built in support for batching requests and automated refetching.

Latest version **1.0.12** (published 2023-12-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @grexie/web3-react
pnpm add @grexie/web3-react
yarn add @grexie/web3-react
bun add @grexie/web3-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2023-12-25 |
| First published | 2022-03-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 10 |
| Unpacked size | 23.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | tbehrsin |

## Links

- npm: https://www.npmjs.com/package/@grexie/web3-react
- Repository: https://github.com/grexie/web3-react
- Homepage: https://github.com/grexie/web3-react#readme
- Issues: https://github.com/grexie/web3-react/issues
- npm.io page: https://npm.io/package/@grexie/web3-react

## Dependencies (10)

- [viem](https://npm.io/package/viem.md) ^1.21.0
- [web3](https://npm.io/package/web3.md) >=1.7.1
- [wagmi](https://npm.io/package/wagmi.md) ^1.4.12
- [@wagmi/core](https://npm.io/package/@wagmi/core.md) ^1.4.12
- [@grexie/compose](https://npm.io/package/@grexie/compose.md) >=0.1.7
- [@grexie/refetch](https://npm.io/package/@grexie/refetch.md) >=0.1.3
- [@web3modal/siwe](https://npm.io/package/@web3modal/siwe.md) ^3.5.2
- [@web3modal/wagmi](https://npm.io/package/@web3modal/wagmi.md) ^3.5.2
- [@web3modal/ethers5](https://npm.io/package/@web3modal/ethers5.md) ^3.5.2
- [@web3modal/ethereum](https://npm.io/package/@web3modal/ethereum.md) ^2.7.1

## Recent versions

- 1.0.12 (latest) — 2023-12-25
- 1.0.11 — 2023-12-25
- 1.0.10 — 2023-12-25
- 1.0.9 — 2023-12-25
- 1.0.8 — 2023-12-25
- 1.0.7 — 2023-12-25
- 1.0.6 — 2023-12-25
- 1.0.5 — 2023-12-25
- 1.0.4 — 2023-12-25
- 1.0.3 — 2023-12-25
- 1.0.2 — 2023-12-25
- 1.0.1 — 2023-12-25
- 0.1.13 — 2023-05-07
- 0.1.12 — 2023-05-07
- 0.1.11 — 2023-05-07
- … 10 more at https://npm.io/package/@grexie/web3-react/versions

## README

# Grexie Web3 React

Hooks to simplify calling web3 contracts, with built in support for batching requests and automated refetching.

## Installing

```bash
yarn add @grexie/web3-react
```

## Usage

Grexie Web3 React provides two composable context providers used for configuration: `withWeb3Provider` / `Web3Provider` and `withContractProvider` / `ContractProvider`.

```typescript
import { compose } from '@grexie/compose';
import { withContractProvider, withWeb3Provider } from '@grexie/web3-react';
import { withRefetchProvider } from '@grexie/refetch';

const ComposedApp = compose(
  // optional: must come before web3 provider
  withRefetchProvider({ interval: 15_000 }),
  // must come before contract provider
  withWeb3Provider({ defaultChain: 1, urls: ... }),
  withContractProvider({ contracts: ... }),
  App
);
```

And without compose:

```typescript
import { ContractProvider, Web3Provider } from '@grexie/web3-react';
import { RefetchProvider } from '@grexie/refetch';

const WrappedApp = (
  <RefetchProvider interval={15_000}>
    <Web3Provider defaultChain={1} urls={...}>
      <ContractProvider contracts={...}>
        <App />
      </ContractProvider>
    </Web3Provider>
  </RefetchProvider>
);
```

`urls` is the Web3 RPC URL configuration to use when the user is not connected to a Web3 wallet:

```typescript
const urls = {
  // ethereum-mainnet
  1: '...',
  // ethereum-rinkeby
  4: '...',
  // polygon-mainnet
  137: '...',
  ... etc ...
};
```

`contracts` is the ABI registry for all contracts you want to instantiate on-demand using the `useContract` hook:

```typescript
import { ABI } from '@grexie/web3-react';
import MyERC20Token from './contracts/abis/MyERC20Token.json';

const contracts = {
  MyERC20Token: MyERC20Token as ABI,
};
```

Contract methods are available to call using `useWeb3Query` and calls will be assimilated into a BatchRequest for all simultaneous queries across all components within the JavaScript event loop:

```typescript
import { useWeb3Query } from '@grexie/web3-react';

type BalanceOfResult = BigInt;
type BalanceOfArguments = [string];

const { data, loading, firstLoad, error, refetch } = useWeb3Query<
  BalanceOfResult,
  BalanceOfArguments
>('MyERC20Token', 'balanceOf', {
  arguments: [address],
});
```

You can also pass in a contract instance which allows you optionally to specify an address as a string or specify an object containing multi-chain contract addresses. The address used depends on the currently active Web3 chainId:

```typescript
import { useContract, useWeb3Query } from '@grexie/web3-react';

const MyERC20Token = useContract('MyERC20Token', {
  1: '... ethereum-mainnet address ...',
  4: '... ethereum-rinkeby address ...',
  137: '... ethereum-polygon address ...',
});

const { data } = useWeb3Query(MyERC20Token, 'totalSupply');
```

There is also a helper hook which allows you to spread multiple queries and assign the data to different variables more easily, combining `error`, `loading` and `firstLoad` into one variable.

```typescript
import { useWeb3MultiQuery, useWeb3Query } from '@grexie/web3-react';

const {
  data: [name, symbol, decimals, totalSupply],
  loading,
  firstLoad,
  error,
  refetch,
} = useWeb3MultiQuery(
  useWeb3Query('MyERC20Token', 'name'),
  useWeb3Query('MyERC20Token', 'symbol'),
  useWeb3Query('MyERC20Token', 'decimals'),
  useWeb3Query('MyERC20Token', 'totalSupply')
);
```

You can specify call options such as `from` address, and gas etc using the options argument. You can skip queries by specifying true to the skip option.

```typescript
const { account } = useWeb3();
const { data } = useWeb3Query('MyERC20Token', '...', {
  options: {
    from: account,
  },
  skip: !account,
});
```

The `useWeb3` hook returns the current state and some helpful functions:

```typescript
import { useWeb3 } from '@grexie/web3-react';

const {
  // the Web3 instance currently being used
  web3,

  // the current chainId
  chainId,

  // whether the web3 instance is connected to a wallet
  connected,

  // the account address of the connected wallet
  account,

  // a function you can call to invoke web3 modal / web3 wallet
  // connection
  connect,

  // a function you can call to disconnect the wallet and reset state
  disconnect,

  // pass in a Web3Method (such as those returned by Contract.methods
  // [name].call.request) to enqueue the request with the BatchRequest
  // manager
  request,
} = useWeb3();
```

---
_Source: https://npm.io/package/@grexie/web3-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._