wagmi/src/hooks/useConnectionEffect.ts

React Hooks for Ethereum

'use client'

import { type GetConnectionReturnType, watchConnection } from '@wagmi/core'
import type { Compute, ConfigParameter } from '@wagmi/core/internal'
import { useEffect } from 'react'
import { useConfig } from './useConfig.js'

export type UseConnectionEffectParameters = Compute<
  {
    onConnect?(
      data: Compute<
        Pick<
          Extract<GetConnectionReturnType, { status: 'connected' }>,
          'address' | 'addresses' | 'chain' | 'chainId' | 'connector'
        > & {
          isReconnected: boolean
        }
      >,
    ): void
    onDisconnect?(): void
  } & ConfigParameter
>

/** https://wagmi.sh/react/api/hooks/useConnectionEffect */
export function useConnectionEffect(
  parameters: UseConnectionEffectParameters = {},
) {
  const { onConnect, onDisconnect } = parameters

  const config = useConfig(parameters)

  useEffect(() => {
    return watchConnection(config, {
      onChange(data, prevData) {
        if (
          (prevData.status === 'reconnecting' ||
            (prevData.status === 'connecting' &&
              prevData.address === undefined)) &&
          data.status === 'connected'
        ) {
          const { address, addresses, chain, chainId, connector } = data
          const isReconnected =
            prevData.status === 'reconnecting' ||
            // if `previousAccount.status` is `undefined`, the connector connected immediately.
            prevData.status === undefined
          onConnect?.({
            address,
            addresses,
            chain,
            chainId,
            connector,
            isReconnected,
          })
        } else if (
          prevData.status === 'connected' &&
          data.status === 'disconnected'
        )
          onDisconnect?.()
      },
    })
  }, [config, onConnect, onDisconnect])
}