Skip to content

Open-source user interface (UI) components that can be easily integrated into the user interfaces of various Conflux eSpace projects, allowing them to support all eSpace wallets including Fluent, Metamask, and OKX.

License

Notifications You must be signed in to change notification settings

Charlie85270/conflux-wallet-connect

Repository files navigation


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


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.

About

Open-source user interface (UI) components that can be easily integrated into the user interfaces of various Conflux eSpace projects, allowing them to support all eSpace wallets including Fluent, Metamask, and OKX.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published