How to integrate Socios Wallet in your dApp

dApps typically have a “Connect Wallet” button to trigger a pop-up window where the user can select their wallet provider. The pop-up would then send a message to the chosen wallet in order to verify that this user does own this wallet address.

There are several ways of integrating the Socios Wallet into your dApp's "Connect Wallet" pop-up modal. By relying on reputed tools, you can provide a secure and seamless experience that works with multiple wallet providers (such as MetaMask & others), and chains, including Chiliz Chain (both Spicy Testnet and Chiliz Mainnet).

This page aims to present you with various options to choose from.

Because you are targeting Chiliz Chain, ensure you specify the correct chainId in your configuration:

• 88882: Spicy Testnet

• 88888: Chiliz Mainnet

Start by testing your integration on Spicy Testnet (88882), confirm that everything runs smoothly, and only then move to Chiliz Mainnet (88888).

Pick you libraries & frameworks

You can leverage various external tools to streamline wallet connectivity, multi-chain support, and advanced features. Choose your tool based on your project’s tech stack.

WalletConnect (now Reown)

Reown is the new name of WalletConnect. The well-known WalletConnect wallet connection toolkit is now called WalletKit.

Reown has a step-by-step guide to using WalletKit, and you should also peruse their full documentation.

They also provide a Polkadot Wallet Integration Guide which, although focused on Polkadot, has steps that can be applied more broadly.

RainbowKit

RainbowKit is a React library for adding wallet-connection features. It relies on viem and wagmi , and provides pre-built components for a modern, user-friendly integration flow.

View their own introduction to learn more about it.

Moralis

Moralis offers ready-made authentication flows for EVM-compatible chains (including Chiliz Chain if configured properly), as well as server-side methods to validate and manage user sessions.

If you already use Moralis, you can use it to create your dApps "Connect Wallet" button with several methods/tools:

• How to Sign in with WalletConnect

• How to Authenticate Users with RainbowKit

They also have longform blogpost about each:

• WalletConnect Integration – How to Integrate WalletConnect

• How to Add a Sign In with RainbowKit to Your Project in 5 Steps

thirdweb

thirdweb offers Connect, a flexible sign-up flow that accommodates different preferences is critical when onboarding users.

You can rely on their External Wallet doc, and even play with their ConnectButton playground.

Recommend Socios Wallet in the pop-up modal

You can customize the display of the pop-up modal to feature Socios Wallet:

• With Reown/WalletConnect: Customize the "Recommended Wallet" section of the modal using the explorerRecommendedWalletIds option.

• With RainbowKit: You can build your own list of wallets using the connectorsForWallets option.

Ensure an optimal experience for your users

For a better user experience, we recommend you to store the user wallet address in the session storage on your app, or in the user profile. This way, the user won't have to connect to their wallet address every time they comes on your platform.