useConnect

Hook for connecting to account with connectors.

import { useConnect } from 'wagmi'

Usage

import { useAccount, useConnect } from 'wagmi'
 
function App() {
  const { connector: activeConnector, isConnected } = useAccount()
  const { connect, connectors, error, isLoading, pendingConnector } =
    useConnect()
 
  return (
    <>
      {isConnected && <div>Connected to {activeConnector.name}</div>}
 
      {connectors.map((connector) => (
        <button
          disabled={!connector.ready}
          key={connector.id}
          onClick={() => connect({ connector })}
        >
          {connector.name}
          {isLoading &&
            pendingConnector?.id === connector.id &&
            ' (connecting)'}
        </button>
      ))}
 
      {error && <div>{error.message}</div>}
    </>
  )
}

Return Value

{
  connect: (
    config: { connector?: Connector; chainId?: number },
  ) => void
  connectAsync: (
    config: { connector?: Connector; chainId?: number },
  ) => Promise<{
    address: `0x${string}`
    chain: {
      id: number
      unsupported?: boolean
    }
    connector: Connector
    provider: Provider
  }>
  connectors: Connector[]
  data?: {
    address: `0x${string}`
    chain: {
      id: number
      unsupported?: boolean
    }
    connector: Connector
    provider: Provider
  }
  error?: Error
  isError: boolean
  isIdle: boolean
  isLoading: boolean
  isSuccess: boolean
  pendingConnector: Connector
  reset: () => void
  status: 'idle' | 'error' | 'loading' | 'success'
}

Configuration

chainId (optional)

Chain ID to connect.

import { chain, useConnect } from 'wagmi'
import { optimism } from 'wagmi/chains'
 
function App() {
  const connect = useConnect({
    chainId: optimism.id,
  })
}

Note: The above example is using the optimism chain from the wagmi/chains entrypoint.

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(),
  })
}

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)
    },
  })
}

onMutate (optional)

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({
    onMutate(connector) {
      console.log('Before Connect', connector)
    },
  })
}

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 })
    },
  })
}

onSuccess (optional)

Function to invoke when connect is successful.

import { useConnect } from 'wagmi'
 
function App() {
  const connect = useConnect({
    onSuccess(data) {
      console.log('Connect', data)
    },
  })
}

useBlockNumber useContract