metapro
Ask or search…
⌃K

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:
npm
yarn
npm install @metapro/connector
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
yarn
npm install @mui/material @emotion/react @emotion/styled
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
​​
​​
  • Click here to scan QR code
​​
  • Allow your application to connect with the plugin
​
​

Your plugin is successfully connected!  🎉

​
​
-----------------------------------------------------------------------------------------------------
WALLET CONNECTOR - Previous
Introduction
Next
Next 13 integration
Last modified 1mo ago