Universal Provider is a multi-chain provider for WalletConnect v2 protocol.

Find more about different supported chains here.

​
Installation

npm install @walletconnect/universal-provider

​
Usage

import UniversalProvider from "@walletconnect/universal-provider";

//  Initialize the provider
const provider = await UniversalProvider.init({
  projectId: "YOUR_PROJECT_ID",
  metadata: {
    name: "React App",
    description: "React App for WalletConnect",
    url: "https://walletconnect.com/",
    icons: ["https://avatars.githubusercontent.com/u/37784886"],
  },
  client: undefined, // optional instance of @walletconnect/sign-client
});

//  create sub providers for each namespace/chain
await provider.connect({
  optionalNamespaces: {
    eip155: {
      methods: [
        "eth_sendTransaction",
        "eth_signTransaction",
        "eth_sign",
        "personal_sign",
        "eth_signTypedData",
      ],
      chains: ["eip155:80001"],
      events: ["chainChanged", "accountsChanged"],
      rpcMap: {
        80001:
          "https://rpc.walletconnect.com?chainId=eip155:80001&projectId=<your walletconnect project id>",
      },
    },
  },
  pairingTopic: "<123...topic>", // optional topic to connect to
  skipPairing: false, // optional to skip pairing ( later it can be resumed by invoking .pair())
});

​
Events

// Subscribe for pairing URI
provider.on("display_uri", (uri) => {
  console.log("display_uri", uri);
});

// Subscribe to session ping
provider.on("session_ping", ({ id, topic }) => {
  console.log("session_ping", id, topic);
});

// Subscribe to session event
provider.on("session_event", ({ event, chainId }) => {
  console.log("session_event", event, chainId);
});

// Subscribe to session update
provider.on("session_update", ({ topic, params }) => {
  console.log("session_update", topic, params);
});

// Subscribe to session delete
provider.on("session_delete", ({ id, topic }) => {
  console.log("session_delete", id, topic);
});

​
Provider Methods

interface RequestArguments {
  method: string;
  params?: any[] | undefined;
}

// Send JSON RPC requests

/**
 * @param payload
 * @param chain - optionally specify which chain should handle this request
 * in the format `<namespace>:<chainId>` e.g. `eip155:1`
 */
const result = await provider.request(payload: RequestArguments, chain: string | undefined);

​
Chain switching

DefaultChain is the current chain that the provider will target for the next requested transaction.

// set the default chain to 56
provider.setDefaultChain(`eip155:56`, rpcUrl?: string | undefined);

​
Session data

Once a wallet is connected you can find the session data in the provider.session object.

The session object includes the following properties, among others:

  • namespaces: session.namespaces is an object that contains the approved session data.

Note that the chains object is an optional parameter and may be undefined. Therefore, we encourage apps to obtain the approved chains from the session.accounts object instead.

interface Namespaces {
  chains?: string[];
  accounts: string[];
  methods: string[];
  events: string[];
}
  • requiredNamespaces, optionalNamespaces & sessionProperties: These objects contain the namespaces and properties proposed for the session.
  • peer: The session.peer.metadata object contains the metadata of the connected wallet.
interface Metadata {
  name: string;
  description: string;
  url: string;
  icons: string[];
  verifyUrl?: string;
  redirect?: {
    native?: string;
    universal?: string;
  };
}

Find the complete type definition of the session object here.

Was this page helpful?