Basic informations

This document describes a basic way of integrating metapro plugin into your web app.

Getting the plugin

First, you'll need to add our plugin to your project.

If you use npm or yarn, run:

https://www.npmjs.com/package/@metapro/connector

npm

npm install @metapro/connector

yarn

yarn add @metapro/connector

Provider and packages requirements

The provider has his own react version so these versions must at least be compatible

to avoid failure use at least react version "18.2.0"

Our plugin uses Material UI, to properly display our plugin you need to install desired dependencies

"@emotion/react"
"@emotion/styled"
"@mui/material"

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

-----------------------------------------------------------------------------------------------------

For now, we are supporting BSC testnet and mainnet we'll extend our plugin for other chains in close future

-----------------------------------------------------------------------------------------------------

Metapro Hook explained ( useMetapro() )

useMetapro()

A hook that returns an object with the following properties:

 - login: a function that will open the Metapro login modal.
 - logout: a function that will log out the user from Metapro.
 - metaproHooks: an object with the following properties:

useAccount

Hook for accessing wallet address data.

useChainId

Hook for accessing network data, such as current connected chain.

useENSName

Hook for fetching ENS name for address.

useIsActive

Hook for check if wallet address is connected and active.

useProvider

Hook for accessing Client ethers Provider.

After setup our plugin

A detailed guide about our metapro wallet Download & set up

When the plugin is already implemented in your application just a couple of simple steps to get started :

• After using a {login} from useMetapro() hook you should see a modal popup

• Follow Download & set up to setup our metaprowallet

• Click here to scan QR code

• Allow your application to connect with the plugin

Your plugin is successfully connected!  🎉

-----------------------------------------------------------------------------------------------------