# Manual installation

Add packages

{% tabs %}
{% tab title="npm" %}
{% code overflow="wrap" %}

```
npm install @web3-react/core@8.0.32-beta.0 @web3-react/walletconnect@8.0.33-beta.0
```

{% endcode %}
{% endtab %}

{% tab title="yarn" %}
{% code overflow="wrap" %}

```
yarn add @web3-react/core@8.0.32-beta.0 @web3-react/walletconnect@8.0.33-beta.0
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
We decided after some research to use beta versions of a web3-react package but stable 8 will be out soon.
{% endhint %}

### Connector setup

<pre class="language-typescript"><code class="lang-typescript">import { initializeConnector } from '@web3-react/core'
import { WalletConnect } from '@web3-react/walletconnect'
<strong>
</strong><strong>export const [metapro, metaproHooks] = initializeConnector&#x3C;WalletConnect>(
</strong>  (actions) =>
    new WalletConnect({
      actions,
      treatModalCloseAsError: true,
      options: {
        bridge: 'https://tst-bridge.metaprotocol.one',
        rpc: { [56]: "https://bsc-dataseed1.ninicoin.io" }
      }
    })
)
</code></pre>

### Provider setup

{% code lineNumbers="true" %}

```typescript
import { Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
import {WalletConnect} from '@web3-react/walletconnect'
import {metapro, metaproHooks} from 'yourPathToMetapro/connector'

const connectors: [WalletConnect, Web3ReactHooks][] = [[metapro, metaproHooks]]

function App() {
  return (
    <>
      <Web3ReactProvider connectors={connectors}>
         <HomePage />
      </Web3ReactProvider>
    </>
  );
}

export default App;
```

{% endcode %}

{% hint style="warning" %}
A common issue with CRA apps in the newest versions is missing buffer. We need to install it manually and declare it in the main file.

Missing buffer can cause errors on WalletConnect integration.

<https://github.com/WalletConnect/walletconnect-monorepo/issues/748>

{% endhint %}

<figure><img src="/files/m06rWYKL1G2ABC5q0QIs" alt=""><figcaption><p>Buffer error</p></figcaption></figure>

{% tabs %}
{% tab title="npm" %}

```
npm install buffer
```

{% endtab %}

{% tab title="yarn" %}

```
yarn add buffer
```

{% endtab %}
{% endtabs %}

```typescript
import { Buffer } from 'buffer'

window.Buffer = window.Buffer || Buffer

function App() {...
```

### Connecting with built-in WalletConnect QRcode

```typescript
import { metapro } from 'yourPathToMetapro/connector'

const loginFunction = async () => {
    try {
        await metapro.activate(56)
    } catch (e) {
        customErrorHandler()
    }
}
```

### Connecting with custom QRcode

{% code overflow="wrap" lineNumbers="true" %}

```typescript
import React, { useState, useEffect } from 'react'
import { metapro } from 'yourPathToMetapro/connector'

function HomePage() {

  const [qrCodeUri, setQrCodeUri] = useState<string>()
  const [qrCodeOpen, setQrCodeOpen] = useState<boolean>(false)
  
  //We can get wallet address from the web3react hook
  const {account} = useWeb3React()

  useEffect(() => {
    if (metapro.provider?.connector.uri) {
      setQrCodeUri(metapro.provider?.connector.uri)
      setQrCodeOpen(true)
    }     
  }, [metapro.provider?.connector.uri])

  const loginFunction = async () => {
    try {
      await metapro.activate(56)
      setQrCodeOpen(true)
    } catch (e) {
      metapro.deactivate()
      customErrorHandler()
    }
  }
  
  const logoutFunction = async () => {
    try {
      await metapro.deactivate()
    } catch (e) {
      customErrorHandler()
    }
  }
  return (
    <>
      <button onClick={loginFunction}>
         Login
      </button>
      <button onClick={loginFunction}>
         Logout
      </button>
      <p>Your wallet {account}</p>
      <QRCodeComponent uri={qrCodeUri} open={qrCodeOpen} />
    </>
  );
}
```

{% endcode %}

### Hook to connect eagerly on application start

```typescript
import { metapro } from 'yourPathToMetapro/connector'

const useEagerConnect = () => {
  useEffect(() => {
    metapro.connectEagerly()
  }, [])
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.metaproprotocol.com/wallet-connector/basic-informations/manual-installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.