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 and the Viem library (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.

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

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

There are several Chiliz Chain RPC endpoints 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 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.

If you have any question or a specific configuration need, please let us know: we will be happy to help you!

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

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.

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.

Socios.com Wallet displayed as a featured wallet

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

const SOCIOS_WALLET_ID = '56843177b5e89d4bcb19a27dab7c49e0f33d8d3a6c8c4c7e5274f605e92befd6'

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

The featureWalletIds option is part of the createAppKit function. Learn more about it in the WalletConnect/Reown documentation.

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