Interact

Connecting to Lumia chain with Web3 EVM Wallet Library

Connecting to Lumia chain with Web3-Onboard

Web3-Onboard is a powerful library that simplifies the process of adding multi-wallet and multi-chain support to your project. With just a few lines of code, you can seamlessly integrate your app into the web3 world and connect to the Lumia chain network. Let's walk through the steps to get started.

Installation

First, install the necessary dependencies using your preferred package manager:

yarn add @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/react ethers

Configuration

Next, configure Web3-Onboard by defining the supported wallets and chains. Here's an example configuration file tailored for the Lumia chain network:

import React from "react";
import { init, useConnectWallet } from "@web3-onboard/react";
import injectedModule from "@web3-onboard/injected-wallets";
import { ethers } from "ethers";

const wallets = [injectedModule()];

const chains = [
  {
    id: "0x51",
    token: "LOC",
    label: "Lumia Testnet",
    icon: '<svg>...</svg>',
    color: "#2c3335",
    rpcUrl: "https://testnet-rpc.lumia.org",
    publicRpcUrl: "https://testnet-rpc.lumia.org",
    blockExplorerUrl: "https://testnet-explorer.lumia.org/",
  },
];

const appMetadata = {
  name: "My Lumia L2 App",
  icon: '<svg>...</svg>',
  logo: '<svg>...</svg>',
  description: "My app using Onboard on Lumia L2 Network",
  recommendedInjectedWallets: [
    { name: "MetaMask", url: "https://metamask.io" },
  ],
};

init({
  wallets,
  chains,
  appMetadata,
});

const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();

let ethersProvider;

if (wallet) {
  ethersProvider = new ethers.providers.Web3Provider(wallet.provider, "any");
}

Make sure to replace the SVG icons and URLs with the appropriate values for your app and the Lumia L2 network.

Usage

With the configuration in place, you can now add a button to connect and activate the wallet:

<button
  disabled={connecting}
  onClick={() => (wallet ? disconnect(wallet) : connect())}
>
  {connecting ? "Connecting" : wallet ? "Disconnect" : "Connect"}
</button>

That's it!

Your app is now ready to connect to the Lumia chain network using Web3-Onboard. Users can easily connect their wallets and interact with your dApp seamlessly. For more advanced customization and features, refer to the Web3-Onboard documentation.

By leveraging Web3-Onboard, you can provide a user-friendly and inclusive wallet connection experience, making your dApp accessible to a wide range of users on the Lumia chain network.