useWatchContractEvent
Hook that watches and returns emitted contract event logs.
Import
ts
import { useWatchContractEvent } from 'wagmi'
Usage
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
Parameters
ts
import { type UseWatchContractEventParameters } from 'wagmi'
abi
Abi
The contract's ABI. Check out the TypeScript docs for how to set up ABIs for maximum type inference and safety.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
address
Address | undefined
The contract's address.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
args
object | readonly unknown[] | undefined
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
args: {
to: '0xd2135CfB216b74109775236E36d4b433F1DF507B'
}
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
batch
boolean | undefined
- Whether or not the events should be batched on each invocation.
- Defaults to
true
.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
batch: false,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
chainId
config['chains'][number]['id'] | undefined
ID of chain to use when fetching data.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
chainId: 1,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
config
Config | undefined
Config
to use instead of retrieving from the from nearest WagmiProvider
.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
import { config } from './config'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
config,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
eventName
string
- Event to listen for the contract.
- Inferred from
abi
.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
import { config } from './config'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
onError
((error: Error) => void) | undefined
Error thrown from getting the block number.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
onError(error) {
console.log('Error', error)
}
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
onLogs
(logs: Log[], prevLogs: Log[] | undefined) => void
Callback for when logs changes.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
}
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
poll
boolean | undefined
- Whether or not to use a polling mechanism to check for new blocks instead of a WebSocket subscription.
- Defaults to
false
for WebSocket Clients, andtrue
for non-WebSocket Clients.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
poll: true
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
pollingInterval
number | undefined
- Polling frequency (in milliseconds).
- Defaults to the Config's
pollingInterval
config.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
pollingInterval: 1_000
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
strict
boolean | undefined
- Defaults to
false
.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
strict: true
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
syncConnectedChain
boolean | undefined
- Set up subscriber for connected chain changes.
- Defaults to
Config['syncConnectedChain']
.
tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'
function App() {
useWatchContractEvent({
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
abi,
eventName: 'Transfer',
onLogs(logs) {
console.log('New logs!', logs)
},
syncConnectedChain: true
})
}
ts
export const abi = [
{
type: 'event',
name: 'Approval',
inputs: [
{ indexed: true, name: 'owner', type: 'address' },
{ indexed: true, name: 'spender', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
{
type: 'event',
name: 'Transfer',
inputs: [
{ indexed: true, name: 'from', type: 'address' },
{ indexed: true, name: 'to', type: 'address' },
{ indexed: false, name: 'value', type: 'uint256' },
],
},
] as const
ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
Return Type
ts
import { type UseWatchContractEventReturnType } from 'wagmi'
Hook returns void