Skip to main content

Connect a Universal Profile

There are several methods to connect to a Universal Profile, each catering to different developer requirements and scenarios. Below, we detail the most common approaches and explain why a developer might prefer one over the others.

Connecting to the Universal Profile Browser Extension will trigger the following connection screen:

Example of UP Connection Screen
Request Handling

The Universal Profile Extension returns the address of the connected Universal Profile. Making transactions is the same as with any wallet, you just use the profile address as a from in your transactions.

Connect with EIP-6963​

Example Implementation

If you want to implement Injected Provider Discovery you can visit our Example EIP-6963 Test dApp.

Wallet Compatibility

Using EIP-6963 Provider Discovery is the latest industry standardization, solving previous connectivity issues when having multiple wallet extensions installed at the same time.

You can listen to eip6963:announceProvider events following the EIP-6963: Multi Injected Provider standardization to facilitate a more versatile connection to multiple wallet extensions. This method is beneficial for developers who require the ability to maintain low-level control over how different extensions are targeted and managed within their dApp.

import { ethers } from 'ethers';

let providers = [];

window.addEventListener("eip6963:announceProvider", (event) => {
  providers.push(event.detail);
});

// Request installed providers
window.dispatchEvent(new Event("eip6963:requestProvider"));

...

// pick a provider to instantiate (providers[n].info)
const provider = new ethers.BrowserProvider(providers[0].provider);

const accounts = await provider.eth.requestAccounts();
console.log('Connected with', accounts[0]);

Since the Universal Profile Browser Extension is compatible with EIP-6963 Multi Injected Provider, it works out of the box with tools like Wagmi or RainbowKit. If you use Wagmi or RainbowKit, the 🆙 extension will appear in the list of available wallets. See the example image below with RainbowKit.

When using RainbowKit, the UP Browser Extension will show up in the list of wallets.

Multi-Provider Libraries​

You can use third-party libraries to connect to various wallet extensions with ease. Here are some options:

Both libraries come with built-in UI elements and allow you to support multiple extensions without them all supporting EIP-6963.

ImageDescription
  • 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.

    Installation​

    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

    Setup​

    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';

    // 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 = [
      // https://docs.lukso.tech/networks/testnet/parameters
      {
        chainId: 4021,
        name: 'LUKSO Testnet',
        currency: 'LYXt',
        explorerUrl: 'https://explorer.execution.testnet.lukso.network/',
        rpcUrl: 'https://4201.rpc.thirdweb.com/',
      },
    ];

    // 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,
      'YOUR_PROJECT_ID', // Import the project ID from https://cloud.walletconnect.com
      chainImages: walletConnectChainImages,
      featuredWalletIds: ['NONE'], // OPTIONAL: Only show wallets that are installed by the user
    });

    Connect​

    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
    await walletConnectInstance.open();

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

    Disconnect​

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

    // Close all connections
    walletConnectInstance.disconnect();

    Use Provider Injection​

    You can use the window.lukso object, tailored for a direct integration with the UP Browser Extension. This approach allows developers to engage directly with the UP Browser Extension without the need to consider compatibility with other extensions.

    npm install ethers
    import { ethers } from 'ethers';
    const provider = new ethers.BrowserProvider(window.lukso);

    const accounts = await provider.send('eth_requestAccounts', []);
    console.log('Connected with', accounts[0]);
    Wallet Compatibility

    Alternatively to the window.lukso, the equivalent window.ethereum object can be called within supported browsers, just like other Ethereum wallets. Both follow the EIP-1193 Ethereum Provider JavaScript API. You can use a simple fallback to allow regular wallet connections, if the Universal Profile Browser Extension is not installed:

    const provider = new ethers.BrowserProvider(window.lukso || window.ethereum);

    Sample Implementations​