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.
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.
To install and set up the library, run:
$ npm i @aag-development/web3-react-core-templateOr if you prefer using Yarn:
$ yarn add @aag-development/web3-react-core-template<Web3TemplateProvider>{children}</Web3TemplateProvider>Supported options and result fields for the Web3TemplateProvider hook are listed below.
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 />Supported options and result fields for the Authoriztion hook are listed below.
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 />Supported options and result fields for the AddToken hook are listed below.
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} />
</>
);
};NOTE: To use these hooks, your compoent must be wrapped with Web3TemplateProvider.
useNFTsContract();nftContractAddress
| Type | Value |
|---|---|
| string | Required |
Example:
useNFTsContract('NFT_CONTRACT_ADDRESS');useTokenContract();tokenContractAddress
| Type | Value |
|---|---|
| string | Required |
Example:
useTokenContract('TOKEN_CONTRACT_ADDRESS');useMetaMaskConnect();
useMetaOneConnect();These hooks will let you initiate authorization proccess to the wallet.
Example:
// Initiation function
const { metaOneAuth } = useMetaOneConnect(() => null);
useEffect(() => {
metaOneAuth();
}, []);handleLogout();Logout/Disconnect from active wallet session
Example:
const { connector } = useActiveWeb3React();
<div>
<button onClick={() => handleLogout(connector)}>Logout</button>
</div>;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
| 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>
);
};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.