Hooks and Functions

useConnect Hook

To create a connection component you can use useConnect hook. It returns two reactive values: status and wallets, and two functions: connectW3 and disconnectW3.

import { useConnect } from '@w3vm/react'
 
export default function Connect() {
 
  const { connectors, status, connectW3, disconnectW3 } = useConnect()
  
  return (
    <>
      {connectors.map((connector) =>(
      <button key={connector.id} disabled={Boolean(status)} onClick={()=>connectW3({ connector })}>
        <img src={connector.icon} alt={connector.name} />
        {connector.name}
      </button>
      ))}
    </>
  )
}

Connectors

Connectors is an array that contains all the connectors' instances that we have already initialized. Each connector instance is an object that contains the following properties:

• id
  Unique id of the wallet
• name
  The name of the wallet as string
• icon
  It can be undefined or the icon you passed when initializing the wallet class, it's also declared automatically for EIP-6963 compatible wallets.
• getProvider
  A function that returns the wallet's provider

status

A string that shows a current ongoing process:

Type:

type Status = 'Initializing' | 'Connecting' | 'Disconnecting' | 'Loading' | 'GeneratingURI' | undefined

connectW3

It's a function that takes as argument an object with a connector and optionally a chain (3038 compliant chain or number).

connectW3({ connector, chain: mainnet })

disconnectW3

It's a function that doesn't require any arguments and will clear out the user's session state.

Notice there's no actual way of disconnecting an extension wallet from a dapp unless the user disconnects it directly from the extension. This function will clear the session's state in the dapp but the wallet will still be shown as connected on the extension's UI.

Custom Hooks

getW3Address

Will return the current user's address

const address: string = getW3Address()

getW3Chain

Will return the user's current chain id.

const chain: number = getW3Chain()

getW3Error

Will return an error of type ProviderRpcError (following EIP-1193 (opens in a new tab)) or Error

const error: ProviderRpcError | Error = getW3Error()

getW3Provider

Will return the provider of the connected wallet or undefined if the user is not connected. You can pass this one down to Web3.js, viem or ethers.js.

const w3Provider = getW3Provider()