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

​
Implementation

  • Web
  • iOS
  • Android
  • Flutter
  • React Native
  • Unity
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

  • Web
  • iOS
  • Android
  • Flutter
  • React Native
  • Unity

​
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;
}