Skip to main content

Universal Provider

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

note

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.
caution

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.