useConnect – wagmi

Docs

Hooks

useConnect

Hook for connecting to account with configured connectors.

import { useConnect } from 'wagmi'

Usage

import { useConnect } from 'wagmi'

function App() {
  const {
    activeConnector,
    connect,
    connectors,
    error,
    isConnecting,
    pendingConnector,
  } = useConnect()

  return (
    <>
      {activeConnector && <div>Connected to {activeConnector.name}</div>}

      {connectors.map((x) => (
        <button disabled={!x.ready} key={x.id} onClick={() => connect(x)}>
          {x.name}
          {isConnecting && pendingConnector?.id === x.id && ' (connecting)'}
        </button>
      ))}

      {error && <div>{error.message}</div>}
    </>
  )
}

Return Value

{
  activeConnector: Connector
  connect: (connector) => void
  connectAsync: (connector) => Promise<{
    address: string
    chain: {
      id: number
      unsupported: boolean
    }
    connector: Connector
    provider: Provider
  }>
  connectors: Connector[]
  data?: {
    address: string
    chain: {
      id: number
      unsupported: boolean
    }
    connector: Connector
    provider: Provider
  }
  error?: Error
  isConnected: boolean
  isConnecting: boolean
  isDisconnected: boolean
  isIdle: boolean
  isReconnecting: boolean
  pendingConnector: Connector
  reset: () => void
  status:
    | 'error'
    | 'idle'
    | 'connected'
    | 'connecting'
    | 'disconnected'
    | 'reconnecting'
}

Configuration

connector (optional)

Connector to use for connecting wallet. Useful if you want to connect to a specific connector, instead of displaying a list.

import { useConnect } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'

function App() {
  const connect = useConnect({
    connector: new InjectedConnector(),
  })
}

Function to invoke before connect and is passed same variables connect function would receive. Value returned from this function will be passed to both onError and onSettled functions in event of a connect failure.

import { useConnect } from 'wagmi'

function App() {
  const connect = useConnect({
    onBeforeConnect(connector) {
      console.log('Before Connect', connector)
    },
  })
}

onConnect (optional)

Function to invoke when connect is successful.

import { useConnect } from 'wagmi'

function App() {
  const connect = useConnect({
    onConnect(data) {
      console.log('Connect', data)
    },
  })
}

onError (optional)

Function to invoke when an error is thrown while connecting.

import { useConnect } from 'wagmi'

function App() {
  const connect = useConnect({
    onError(error) {
      console.log('Error', error)
    },
  })
}

onSettled (optional)

Function to invoke when connect is settled (either successfully connected, or an error has thrown).

import { useConnect } from 'wagmi'

function App() {
  const connect = useConnect({
    onSettled(data, error) {
      console.log('Settled', { data, error })
    },
  })
}

useBlockNumber

useContract