# Interact

### 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:

```bash
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:

```javascript
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://beam-rpc.lumia.org",
    publicRpcUrl: "https://beam-rpc.lumia.org",
    blockExplorerUrl: "https://beam-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");
}
```

{% hint style="info" %}
Make sure to replace the SVG icons and URLs with the appropriate values for your app and the Lumia L2 network.
{% endhint %}

### Usage

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

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

That's it!&#x20;

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](https://onboard.blocknative.com/docs/overview/introduction).&#x20;

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.