Skip to main content

Usage

This section provides instructions on how to use WalletConnectModal in your project.

Implementation​

Start by importing WalletConnectModal and initializing it.

import { WalletConnectModal } from '@walletconnect/modal'

const modal = new WalletConnectModal({
  projectId: 'YOUR_PROJECT_ID',
  chains: ['eip155:1']
})

Trigger the modal​

Once you have obtained your connection uri, you can open or close the modal.

From here on, use provider as you normally would, WalletConnectModal will be shown and hidden automatically i.e.

await modal.openModal({
  uri: 'YOUR_CONNECTION_URI'
})

// Do some work...

modal.closeModal()

Usage​

openModal​

Action to open the modal. Returns promise that resolves once modal is visible.

Example​

await modal.openModal({
  uri: 'YOUR_CONNECTION_URI'
})

Reference​

openModal: (options?: OpenOptions) => Promise<void>
interface OpenOptions {
  // Uri that will be used to generate qrcode and mobile links, required
  uri: string
  // CAIP-2 compliant chain ids to override initial chains defined when creating the modal
  // Learn about CAIP-10: https://github.com/ChainAgnostic/CAIPs/blob/master/CAIPs/caip-10.md
  chains?: string[]
}

closeModal​

Action to close the modal.

Example​

modal.closeModal()

Reference​

closeModal: () => void

subscribeModal​

Action to subscribe to modal state changes.

Example​

modal.subscribeModal(state => console.log(state))

Reference​

subscribeModal: (callback: (state: ModalState) => void) => void
interface ModalState {
  open: boolean
}