Skip to main content

Multi-Provider Connection

If you want to support the Universal Profile Browser Extension alongside other wallets, you can use third-party libraries to improve the user's onboarding experience. Here are some options:

Both libraries are open-source, framework-agnostic JavaScript tools.

  • Customizable Connection Window
  • Remains connection on Page Refresh
  • Lists supported EIP-1193 Extensions
  • Automatically detects EIP-6963 Extensions
  • Requires Wallet Connect Account ID
  • Example Implementation

    You can check out the implementation of both libraries within our dApp Boilerplate. You can change between multiple provider methods on the fly using the provider switcher component.


    You can install the Web3 Modal using different configurations. The default package utilizes the Ethers.js library, which will be used in this example:

    npm i @web3modal/ethers ethers


    After the installation, you can proceed to configure the library to support the LUKSO network and your dApp.

    // Import the necessary components
    import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react';

    // Import the project ID from
    const projectId = 'YOUR_PROJECT_ID';

    // Setup the Metadata
    const walletConnectMetadata = {
    name: 'Example dApp',
    description: 'dApp using Wallet Connect',
    url: 'https://my.dapp.domain',
    icons: ['https://my.dapp.domain/icon.svg'],

    // Initialize the Configuration Element
    const walletConnectConfig = defaultConfig({
    metadata: walletConnectMetadata,

    // Define the supported networks
    const supportedChains = [
    chainId: 42,
    name: 'LUKSO Mainnet',
    currency: 'LYX',
    explorerUrl: '',
    rpcUrl: '',
    chainId: 4021,
    name: 'LUKSO Testnet',
    currency: 'LYXt',
    explorerUrl: '',
    rpcUrl: '',

    // Define chain images for the network screen
    const walletConnectChainImages = {
    42: 'https://my.dapp.domain/lyx_symbol.svg',
    4201: 'https://my.dapp.domain/lyx_symbol.svg',

    // Create the Web3 Modal Instance
    const walletConnectInstance = createWeb3Modal({
    ethersConfig: walletConnectConfig,
    chains: supportedChains,
    chainImages: walletConnectChainImages,
    // OPTIONAL: Only show wallets that are installed by the user
    featuredWalletIds: ['NONE'],


    To set and access the Wallet Connect provider within your dApp, you can call the integrated open() method provided by the createWeb3Modal instance. The library will show a connection window with all supported wallets. You can then fetch the active account and set it as the default provider within your dApp.

    // Trigger the connection process and screen
    // Subscribe to provider events, to track the connection
    ({ provider, address, isConnected, error }) => {
    if (error) {
    console.log('Wallet Connect Error:', error);
    // If access was granted
    if (isConnected && provider && address) {
    const provider = new ethers.BrowserProvider(provider);


    To disconnect your wallet, you have to call the disconnect() method provided by the createWeb3Modal instance.

    // Close all connections
    Maintaining compatibility

    The Universal Profile Browser Extension only handles one active account connection at a time. This behavior differs from regular wallets. Therefore, the Disconnect methods should be called on every provider's accountsChanged and chainChanged events.

    Sample Implementations​