# Basic informations

### Getting the plugin

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

If you use npm or yarn, run:

{% hint style="info" %}
<https://www.npmjs.com/package/@metapro/connector>
{% endhint %}

{% tabs %}
{% tab title="npm" %}
npm install @metapro/connector
{% endtab %}

{% tab title="yarn" %}
yarn add @metapro/connector
{% endtab %}
{% endtabs %}

### Provider and packages requirements

{% hint style="warning" %}
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"**
{% endhint %}

{% hint style="info" %}
Our plugin uses [Material UI](https://mui.com/material-ui/getting-started/installation/), to properly display our plugin you need to install desired dependencies

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

{% endhint %}

{% tabs %}
{% tab title="npm" %}
npm install @mui/material @emotion/react @emotion/styled
{% endtab %}

{% tab title="yarn" %}
yarn add @mui/material @emotion/react @emotion/styled
{% endtab %}
{% endtabs %}

<mark style="color:purple;">-----------------------------------------------------------------------------------------------------</mark>

{% hint style="warning" %}
For now, we are supporting BSC testnet and mainnet we'll extend our plugin for other chains in close future
{% endhint %}

<mark style="color:purple;">-----------------------------------------------------------------------------------------------------</mark>

### Metapro Hook explained ( <mark style="color:purple;">useMetapro()</mark> )&#x20;

{% hint style="info" %} <mark style="color:purple;">**`useMetapro()`**</mark>

A hook that returns an object with the following properties:

```typescriptreact
 - 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:
```

{% endhint %}

<details>

<summary>useAccount </summary>

Hook for accessing wallet address data.

</details>

<details>

<summary>useChainId</summary>

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

</details>

<details>

<summary>useENSName</summary>

Hook for fetching ENS name for address.

</details>

<details>

<summary>useIsActive</summary>

Hook for check if wallet address is connected and active.

</details>

<details>

<summary>useProvider</summary>

Hook for accessing Client ethers Provider.

</details>

### After setup our plugin

{% hint style="info" %}
A detailed guide about our **metapro** wallet [download-and-set-up](https://docs.metaproprotocol.com/metapro-one/download-and-set-up "mention")
{% endhint %}

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

* After using a <mark style="color:purple;">**{login}**</mark> from [**useMetapro()**](#basic-implementation-of-our-plugin) hook you should see a modal popup

![](https://2351247042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9QQIPimQeOGE3C1HbWxf%2Fuploads%2Fa1Hw9seDTQGlukCQlug8%2FZrzut%20ekranu%202023-03-1%20o%2015.20.59.png?alt=media\&token=9e20d2ba-17ca-4f36-93bc-ae143284af9d)

* Follow [download-and-set-up](https://docs.metaproprotocol.com/metapro-one/download-and-set-up "mention") to setup our metaprowallet

![](https://2351247042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9QQIPimQeOGE3C1HbWxf%2Fuploads%2FmZlbdW7oyTIASmZzMX0i%2FZrzut%20ekranu%202023-03-1%20o%2015.21.11.png?alt=media\&token=e045380b-c9da-4d3c-80ff-ebf6cdf5164f)

* Click here to scan QR code

![](https://2351247042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9QQIPimQeOGE3C1HbWxf%2Fuploads%2FhN6e4qbrRHygowCoYm9f%2FZrzut%20ekranu%202023-03-1%20o%2015.21.28.png?alt=media\&token=971f7416-5498-4a61-b58e-9e3f8efa0aa2)

* Allow your application to connect with the plugin

## Your plugin is successfully connected!  🎉

<mark style="color:purple;">-----------------------------------------------------------------------------------------------------</mark>