Web3Client React Components

How to use?

Create clients

import { MetaMaskClient, TronLinkClient } from '@cxptek/web3client';

const metamaskConnector = new MetaMaskClient({});
const tronConnector = new TronLinkClient();

Add React components to your react app

import { ButtonConnect, Web3Provider } from '@cxptek/web3client-react';
import '@cxptek/web3client-react/dist/esm/style.css';

const options = {
  language: 'vi-VN',
  theme: 'dark', // 'dark' | 'light' | 'auto'
  connectors: [metamaskConnector, tronConnector],
  enforceSupportedChains: true // a popup will show if user in unsupported chain.
}
<Web3Provider options={options}>
  <ButtonConnect label="Connect" />
</Web3Provider>

Use react hook

Specs:

const {
  language, // component language - WIP
  open, // modal status
  setOpen, // Open modal
  route, // current page in modal
  setRoute, // set current page in modal
  errorMessage, // show Error - WIP
  connectorId, // connector ID
  setConnectorId, // set connector name | ID
  connectors, // list of connectors : Web3Client[]
  connect, // method to connect using web3client.connect
  account, // connected account
  isConnected,
  isDisconnected,
  disconnect, // disconnec current account
  client, // current connector
  web3Auth, // use web3Auth or not, require Web3AuthProvider context
} = useWeb3Context();

import { useWeb3Context} from '@cxptek/web3client-react';
const ComponentSample = () => {
  const {account, connect, disconnect} = useWeb3Context();

  return <div>{account ? 'Connected' : 'Connect'}</div>
}

Web3Auth Context

Signing in with Web3 context helps us to easily implement DApp authentication using Web3 with some methods:

Add react context

const web3AuthConfig = {
    // get message to sign
    getSignData: async (address: string): Promise<{nonce:string; message:string}> => {},
    // verify signed message
    verifyMessage: async (address: string, signature: string, nonce: string):Promise<boolean> => {},
    // get user session
    getMe: async ():Promise<Web3AuthSession> => {},
    // sign out
    signOut: async ():Promise<boolean> => {},
    // event after signed in
    onSignIn: (data: Web3AuthSession) => { },
    ...
  };
return (
<Web3AuthProvider {...web3AuthConfig}>
  <Web3Provider options={{ language: 'en-US', connectors: [metamaskConnector, tronConnector] }}>
      <ButtonConnect label="Connect" />
  </Web3Provider>
</Web3AuthProvider>
)

Usage

Use from ButtonConnect directly or use React Hooks:

import { useWeb3AuthContext, useWeb3Context } from '@cxptek/web3client-react';
import React, { FC } from 'react';

const SignOutButton: FC = () => {
  const { isSignedIn, signIn, signOut } = useWeb3AuthContext();
  const { client, account, connect, disconnect, connectors } = useWeb3Context();
  const handleAuth = async () => {
    let connected = true;
    if (!account || !client) {
      connected = await connect('MetaMask');
    }

    if (connected) {
      if (!isSignedIn) {
        // use default connector
        await signIn(connectors[0]);
      } else {
        await signOut();
        disconnect();
      }
    }
  };

  return (
    <button onClick={handleAuth} className={isSignedIn && account ? 'danger' : ''}>
      Custom {isSignedIn ? 'Sign Out' : account ? 'Sign In' : 'Connect and Sign In'}
    </button>
  );
};

export default SignOutButton;

Hooks

Specs:

const {
  isSignedIn
  data?, // user data
  status, // sign in status
  error?, // WIP
  isRejected,
  isError,
  isLoading,
  isSuccess,
  isReady,
  reset, // reset state
  signIn, // sign connected user in
  signOut
} = useWeb3AuthContext();

How to publish to NPM

Preparation

• Ensure that all your code is on the main branch.
• Make sure you have updated the version of your package in package.json.

There are 2 packages, and the publish package trigger will depend on the tag in the release.

• Go to this link: https://github.com/cxptek/web3-packages/releases/new

• To publish web3client, you need to create a tag with the prefix web3client. Example: [email protected], [email protected], ...

• To publish web3client-react, you need to create a tag with the prefix react-web3client. Example: [email protected], [email protected], ...

The title and description field can be anything you want.

Finally, you just need to publish the release.