useContractEvent only new events

[garmeeh]

Is there a way for useContractEvent to only fire on new events?

At the moment when you reload the page it will pick up events that have already fired.

I came across this discussion on ethers.js repo. It seems to be a V5 issue but wondering has wagmi implementing anything to enable this behaviour?

[0xfffxfff]

@garmeeh have you found a solution to this?

[0xfffxfff]

I achieved this by creating my own version of the useContractEvent hook that includes a futureOnly argument which implements the behaviour described in the linked discussion above. (Registering off the once('block')) Thanks for heading me in the right direction @garmeeh

import * as React from 'react'
import { ethers } from 'ethers'
import { useContract, useProvider, useWebSocketProvider } from 'wagmi'
import { UseContractConfig } from 'wagmi/dist/declarations/src/hooks/contracts/useContract'

export type UseContractEventConfig = {
  /** Chain id to use for provider */
  chainId?: number
  /** Receive only a single event */
  once?: boolean,
  /** Receive only future events */
  futureOnly?: boolean
}

export const useContractEvent = <
  Contract extends ethers.Contract = ethers.Contract,
>(
  /** Contract configuration */
  contractConfig: UseContractConfig,
  /** Event name to listen to */
  eventName: Parameters<Contract['on']>[0],
  /** Callback function when event is called */
  listener: Parameters<Contract['on']>[1],
  { chainId, once, futureOnly }: UseContractEventConfig = {},
) => {
  const provider = useProvider({ chainId })
  const webSocketProvider = useWebSocketProvider({ chainId })
  const contract = useContract<Contract>({
    signerOrProvider: webSocketProvider ?? provider,
    ...contractConfig,
  })
  const listenerRef = React.useRef(listener)
  listenerRef.current = listener

  React.useEffect(() => {
    const handler = (...event: Array<Parameters<Contract['on']>[1]>) =>
      listenerRef.current(event)

    const contract_ = <ethers.Contract>(<unknown>contract)
    const contractListen = () => contract_.on(eventName, handler)
    if (once) contract_.once(eventName, handler)
    else if (futureOnly) provider.once("block", contractListen)
    else contractListen()

    return () => {
      if (futureOnly) provider.off('block', contractListen)
      contract_.off(eventName, handler)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [contract, eventName])
}

Tagging @tmm – lmk if you want a PR