Conflux Wallet Connect for React

Easily integrate your react applications on the Conflux eSpace with Fluent, Metamask, and OKX wallets.

Website / Documentation | Live dApp exemple | Exemple source code

_{Created by Charlie Rabiller 👨‍🍳}

Features

• 🔥 Pre-styled and ready to use Button and Modal components to connect wallets to your dApps
• 🔩 Easily Customizable, plug your own components
• ⏳ Unified API for Metamask, Fluent and OKX wallets
• ✅ Light and Dark mode supported

Installation

With yarn

yarn add conflux-wallet-connect

With NPM

npm install conflux-wallet-connect

Getting Started

First, wrap your App with the ConfluxWalletProvider and import the CSS. It will take care of rendering the connect modal, components, manage the wallets and give you access to all functions to interact with them.

import {
  ConfluxWalletProvider,
  ConfluxWalletProviderConfiguration,
} from "conflux-wallet-connect";
import "conflux-wallet-connect/lib/conflux-wallet-connect.css";

const App = () => {
  const configuration: ConfluxWalletProviderConfiguration = {
    chainId: 1030,
    theme: "light",
    providers: ["fluent", "metamask", "okx"],
  };

  return (
    <ConfluxWalletProvider configuration={configuration}>
      <p>My App</p>
    </ConfluxWalletProvider>
  );
};

Button / Modal components to connect user wallets

After wrapping your application with the ConfluxWalletProvider as shown previously, you can use the <ConfluxWalletButton /> on your app. This is a pre-styled and interactive button that allow user to connect to your dApps with OKX, Metamask or fluent wallet.

More details and playground here :

import { ConfluxWalletButton } from "conflux-wallet-connect";

const MyComponent = () => {
  const { openModal } = useConfluxWalletContext();

  return <ConfluxWalletButton onClick={openModal} />;
};

Get active account informations

After wrapping your application with the ConfluxWalletProvider as shown previously, you can use the hook useConfluxWalletContext from anywhere in your application and allow you to interact with the active user wallet.

import {
  useConfluxWalletContext,
} from "conflux-wallet-connect";


const MyComponent = () => {

 const { wallet } = useConfluxWalletContext();
 const { account, balance, chainId } = wallet;
  return (
    <p>
      The balance of the account {account} on {chainId} is {balance} ...
    <p>
  );
};

Documentation

Find the full API reference on official documentation.