# Prerequisites

To access CHZ, fan tokens, and other Chiliz Chain content on your users' wallet, you need to configure your dApp to access Chiliz Chain et allow users to connect their wallet to it.

## Setting up your environment

To achieve that, you can set your environment up with [Node.js](https://nodejs.org/) and the [Viem library](https://viem.sh/docs/installation) (you can use `npm install viem` once Node.js is installed).

## Instantiating the RPC client

Before starting a blockchain request, you MUST add this piece of code in order to initiate Viem and connect to Chiliz Chain via the RPC endpoint of your choice. 

You only need this code once in your codebase.

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

```javascript
import { createPublicClient, http } from 'viem'; // Initiate Viem

const client = createPublicClient({
  transport: http('https://YOUR-CHOSEN-RPC-ENDPOINT.com'), // Connect to Chiliz chain
});
```

{% endcode %}

There are several [Chiliz Chain RPC endpoints](https://docs.chiliz.com/develop/basics/connect-to-chiliz-chain/connect-using-rpc) that you can choose from.

## Implementing a "Connect Wallet" button to your dApp

Before interacting with Chiliz Chain, you must implement [a "Connect Wallet" button on you website or mobile app](https://docs.chiliz.com/develop/advanced/how-to-integrate-socios-wallet-in-your-dapp) in order for users to log in to you dApp. 

Once their wallet is connected, your dApp will be able to retrieve the user's wallet information, and possibly send data such as NFTs, tokens, etc.

{% hint style="info" %}
If you have any question or a specific configuration need, [please let us know](https://mediarex.atlassian.net/servicedesk/customer/portal/5/user/login?destination=portal%2F5%2Fgroup%2F12%2Fcreate%2F55): we will be happy to help you!
{% endhint %}

## Displaying the "Socios.com Wallet" option in the WalletConnect modal

{% hint style="info" %}
WalletConnect is one of the most common wallet-connection toolkit out there. 

When building a dApp, there's a good chance you will rely on it to connect with user wallets.

*NOTE: WalletConnect is now know as* [*Reown WalletKit*](https://reown.com/walletkit)*.*
{% endhint %}

If you want to allow your users to easily select the Socios.com Wallet, you can display it as an option in the WalletConnect pop-up. This pop-up appears in most "Connect Wallet" buttons online.

<figure><img src="https://31329255-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMDcaoJLMj5Y3jzFMTONF%2Fuploads%2FHtcCOh5PE45kC82qLWUl%2Fimage.png?alt=media&#x26;token=5807a0b3-4a43-4f3b-b561-65f408a2a52d" alt=""><figcaption><p>Socios.com Wallet displayed as a featured wallet</p></figcaption></figure>

To display the Socios.com Wallet option, add the following line to the `featuredWalletsIds` option in your WalletConnect initialization code:

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

```typescript
const SOCIOS_WALLET_ID = '56843177b5e89d4bcb19a27dab7c49e0f33d8d3a6c8c4c7e5274f605e92befd6'

createAppKit({
	[...],
	featuredWalletIds: [
		SOCIOS_WALLET_ID
	],
	[...],
})
```

{% endcode %}

{% hint style="info" %}
The `featureWalletIds` option is part of the `createAppKit` function. \
Learn more about it [in the WalletConnect/Reown documentation](https://docs.reown.com/appkit/next/core/options).
{% endhint %}

If your "Connect Wallet" code does not use WalletConnect/Reown, contact us so that we can help you out!