Appearance

walletConnect ​

Connector for WalletConnect.

Import ​

ts
import { walletConnect } from 'wagmi/connectors'
import { walletConnect } from 'wagmi/connectors'

Usage ​

ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { walletConnect } from 'wagmi/connectors'

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [
    walletConnect({
      projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { walletConnect } from 'wagmi/connectors'

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [
    walletConnect({
      projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

Parameters ​

ts
import { type WalletConnectParameters } from 'wagmi/connectors'
import { type WalletConnectParameters } from 'wagmi/connectors'

Check out the WalletConnect docs for more info. A few options are omitted that Wagmi manages internally.

disableProviderPing ​

boolean | undefined

ts
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  disableProviderPing: false, 
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
})
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  disableProviderPing: false, 
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
})

isNewChainsStale ​

boolean | undefined

  • If a new chain is added to a previously existing configured connector chains, this flag will determine if that chain should be considered as stale. A stale chain is a chain that WalletConnect has yet to establish a relationship with (e.g. the user has not approved or rejected the chain).
  • Defaults to true.
ts
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  isNewChainsStale: true, 
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
})
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  isNewChainsStale: true, 
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
})
More info

Preface: Whereas WalletConnect v1 supported dynamic chain switching, WalletConnect v2 requires the user to pre-approve a set of chains up-front. This comes with consequent UX nuances (see below) when a user tries to switch to a chain that they have not approved.

This flag mainly affects the behavior when a wallet does not support dynamic chain authorization with WalletConnect v2.

If true (default), the new chain will be treated as a stale chain. If the user has yet to establish a relationship (approved/rejected) with this chain in their WalletConnect session, the connector will disconnect upon the dapp auto-connecting, and the user will have to reconnect to the dapp (revalidate the chain) in order to approve the newly added chain. This is the default behavior to avoid an unexpected error upon switching chains which may be a confusing user experience (e.g. the user will not know they have to reconnect unless the dapp handles these types of errors).

If false, the new chain will be treated as a validated chain. This means that if the user has yet to establish a relationship with the chain in their WalletConnect session, wagmi will successfully auto-connect the user. This comes with the trade-off that the connector will throw an error when attempting to switch to the unapproved chain. This may be useful in cases where a dapp constantly modifies their configured chains, and they do not want to disconnect the user upon auto-connecting. If the user decides to switch to the unapproved chain, it is important that the dapp handles this error and prompts the user to reconnect to the dapp in order to approve the newly added chain.

metadata ​

CoreTypes.Metadata | undefined

Metadata related to the app requesting the connection.

ts
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
  metadata: { 
    name: 'Example', 
    description: 'Example website', 
    url: 'https://example.com', 
  }, 
})
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
  metadata: { 
    name: 'Example', 
    description: 'Example website', 
    url: 'https://example.com', 
  }, 
})

projectId ​

string

WalletConnect Cloud project identifier. You can find your projectId on your WalletConnect dashboard.

ts
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68', 
})
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68', 
})

qrModalOptions ​

QrModalOptions | undefined

Options for rendering QR modal.

ts
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
  qrModalOptions: { 
    themeMode: 'dark', 
  }, 
})
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
  qrModalOptions: { 
    themeMode: 'dark', 
  }, 
})

relayUrl ​

string | undefined

  • WalletConnect relay URL to use.
  • Defaults to 'wss://relay.walletconnect.com'.
ts
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
  relayUrl: 'wss://relay.walletconnect.org', 
})
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
  relayUrl: 'wss://relay.walletconnect.org', 
})

storageOptions ​

KeyValueStorageOptions | undefined

ts
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
  storageOptions: {}, 
})
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
  storageOptions: {}, 
})

showQrModal ​

boolean | undefined

  • Whether to show the QR code modal upon calling connector.connect().
  • Defaults to true.
ts
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
  showQrModal: true, 
})
import { walletConnect } from 'wagmi/connectors'

const connector = walletConnect({
  projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
  showQrModal: true, 
})

TIP

This can be disabled and you can listen for a 'message' event with payload { type: 'display_uri'; data: string } if you want to render your own QR code.

Released under the MIT License.

Copyright © 2022-present weth, LLC