@aag-development/web3-react-core-template

Welcome to our comprehensive @aag-development/web3-react-core-template library, designed to turbocharge your dApp development! Our library offers reusable React components that are specifically crafted to interact seamlessly with the EVM blockchain and other Web3 protocols, making it easy for you to add blockchain functionality to your dApps.

Table of contents

• Getting Started
• Installation
• API
  • Web3TemplateProvider
  • Authoriztion
  • AddToken
• Hooks
  • useNFTsContract
  • useTokenContract
  • useMetaMaskConnect && useMetaOneConnect
  • handleLogout
  • useActiveWeb3React
  • addTokenToMetamask
• About AAG

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

To install and set up the library, run:

$ npm i @aag-development/web3-react-core-template

Or if you prefer using Yarn:

$ yarn add @aag-development/web3-react-core-template

API

Web3TemplateProvider

<Web3TemplateProvider>{children}</Web3TemplateProvider>

Supported options and result fields for the Web3TemplateProvider hook are listed below.

Options

extendSupportedChains

If you wish to extend supported chain list, then add object as it shown in example.

Default supported chains:

• SAAKURU
• OASYS
• Ethereum
• BSC (Binance Smart Chain)
• Poylgon
• Harmony
• Harmony ONE Testnet

Example:

// Define your extended chain list information

export const CHAINS: { [key: number]: ChainInfoInterface } = {
  1: {
    explorer: 'https://etherscan.io',
    urls: ['https://ethereum.publicnode.com'],
    label: 'Mainnet',
    symbol: 'ETH',
    nativeCurrency: {
      name: 'Ethereum',
      symbol: 'ETH',
      decimals: 18,
    },
  },
};

export default function Home() {
  return (
    <>
      <Web3TemplateProvider extendSupportedChains={CHAINS}>
        {/* Your component's children */}
      </Web3TemplateProvider>
    </>
  );
}

singleWC2Connect

This is an option for developers who are working on wallets that do not support WalletConnect v2 (WC2) multi-chain connection. With singleWC2Connect, you can update your wallet's chains list with a single chain of your choice.

Example:

import React from 'react';

// Define your single chain information
export const SINGLE_CHAIN: { [key: number]: ChainInfoInterface } = {
  1: {
    explorer: 'https://etherscan.io',
    urls: ['https://ethereum.publicnode.com'],
    label: 'Mainnet',
    symbol: 'ETH',
    nativeCurrency: {
      name: 'Ethereum',
      symbol: 'ETH',
      decimals: 18,
    },
  },
};

// Use SINGLE_CHAIN in your Web3TemplateProvider component
export default function Home() {
  return (
    <>
      <Web3TemplateProvider singleWC2Connect={SINGLE_CHAIN}>
        {/* Your component's children */}
      </Web3TemplateProvider>
    </>
  );
}

Authoriztion

<Authoriztion />

Supported options and result fields for the Authoriztion hook are listed below.

Options

initialButton

This feature allows you to replace the initial component to you custom React Component.

Example:

const Button = () => {
  return (
    <>
      <AuthorizationButton initialButton={<button>Connect</button>} />
    </>
  );
};

initialUserMenu

This feature allows you to repllace the initial user menu component to you custom React Component.

Example:

const Button = () => {
  return (
    <>
      <AuthorizationButton initialUserMenu={<div>My user Component</div>} />
    </>
  );
};

theme

For initial styles, you can select default themes.

| Type | Default value | Options | | ------ | ------------- | ------- | | string | black | white |

Example:

const Button = () => {
  return (
    <>
      <Authoriztion theme={'black'} />
    </>
  );
};

desiredNetwork

To ensure that a user is restricted to a particular chain, you can use the desiredNetwork prop in the Authorization component. This prop allows you to specify the desired chain that the user should be connected to, and if the user is not on the desired chain, they will be prompted to switch or add the desired network before continuing with the sign-in process.

Example:

const DESIRED_NETWORK: { [key: number]: ChainInfoInterface } = {
  7225878: {
    name: 'Saakuru',
    explorer: 'https://explorer.saakuru.network',
    urls: ['https://rpc.saakuru.network'],
    label: 'SAAKURU',
    symbol: 'SAAKURU',
    nativeCurrency: {
      name: 'Saakuru',
      symbol: 'OAS',
      decimals: 18,
    },
  },
};
const Button = () => {
  return (
    <>
      <Authoriztion
        desiredNetwork={DESIRED_NETWORK}
        setPosition="right"
        theme={selectedTheme}
        tokenData={tokenData}
      />
    </>
  );
};

tokenData

If you wish to add your token to the initial user menu, add object of token data

| Type | Value | | ----- | -------- | | Array | Optional |

Example:

const tokenData: TokenInterface[] = [
  {
    coinName: 'AAG',
    coin_address: '0xae0609a062a4eaed49de28c5f6a193261e0150ea',
    coin_symbol: 'AAG',
    coin_decimals: 0,
    coin_logo: 'https://s2.coinmarketcap.com/static/img/coins/200x200/15759.png',
  },
];
const Example = () => {
  return (
    <div>
      <Authoriztion theme={'black'} tokenData={tokenData} />
    </div>
  );
};

export default Example;

AddToken

<AddToken />

Supported options and result fields for the AddToken hook are listed below.

Options

token

This option will allow the user to add token to MetaMask if they don't have it.

Example:

const MyTokenData: TokenInterface = {
  coinName: 'AAG',
  coin_address: '0xae0609a062a4eaed49de28c5f6a193261e0150ea',
  coin_symbol: 'AAG',
  coin_decimals: 0,
  coin_logo: 'https://s2.coinmarketcap.com/static/img/coins/200x200/15759.png',
};
const Button = () => {
  return (
    <>
      <AddToken token={MyTokenData} />
    </>
  );
};

Hooks

NOTE: To use these hooks, your compoent must be wrapped with Web3TemplateProvider.

useNFTsContract

useNFTsContract();

Options

nftContractAddress

| Type | Value | | ------ | -------- | | string | Required |

Example:

useNFTsContract('NFT_CONTRACT_ADDRESS');

useTokenContract

useTokenContract();

Options

tokenContractAddress

| Type | Value | | ------ | -------- | | string | Required |

Example:

useTokenContract('TOKEN_CONTRACT_ADDRESS');

useMetaMaskConnect && useMetaOneConnect

useMetaMaskConnect();
useMetaOneConnect();

These hooks will let you initiate authorization proccess to the wallet.

Example:

// Initiation function
const { metaOneAuth } = useMetaOneConnect(() => null);

useEffect(() => {
  metaOneAuth();
}, []);

handleLogout

handleLogout();

Logout/Disconnect from active wallet session

Example:

const { connector } = useActiveWeb3React();
<div>
  <button onClick={() => handleLogout(connector)}>Logout</button>
</div>;

useActiveWeb3React

useActiveWeb3React();

The useActiveWeb3React simplifies the integration of Web3 functionality into a web application, making it easier for you to interact with the EVM blockchain.

addTokenToMetamask

addTokenToMetamask();

Options

addTokenToMetamask

| Type | Value | | -------- | ---------------- | | chainId | number | | provider | ExternalProvider | | token | TokenInterface |

Example:

const token: TokenInterface = {
  coinName: 'AAG',
  coin_address: '0xae0609a062a4eaed49de28c5f6a193261e0150ea',
  coin_symbol: 'AAG',
  coin_decimals: 0,
  coin_logo: 'https://s2.coinmarketcap.com/static/img/coins/200x200/15759.png',
};

const Button = () => {
  const { chainId, provider } = useActiveWeb3React();
  return (
    <div>
      <button onClick={() => addTokenToMetamask(chainId, provider?.provider, token)}>Change</button>
    </div>
  );
};

About AAG

AAG is a web3 infrastructure company focused on providing software that helps simplify interactions with blockchain applications and the Metaverse for both mainstream users and traditional companies. AAG provides a secure and easy-to-use MetaOne® wallet, as well as infrastructure software, such as a cross-chain search engine and Saakuru blockchain for enterprise companies. With the belief that education is the key to unlock the potential of web3, AAG is also exploring the concept of Learn-and-Earn with the mission of enabling economic opportunities worldwide via the Metaverse economy. AAG aims to bring 1 billion people into the Metaverse economy by 2030.