Integrate Socios.com 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).

See all parameters here: Connect to Chiliz Chain

Pick your 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 Inc. The well-known WalletConnect wallet connection toolkit is now called Reown SDK (or AppKit). It was formerly know as Web3Modal.

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

REQUIRED

The Socios.com Wallet implements the ERC-1271 standard, which means that the smart contract behind it implements the isValidSignature() method instead of erecover().

Therefore, your dApp MUST support ERC-1271 and implement a call to isValidSignature().

See the Reown doc for more.

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

• How to Authenticate Users with Magic.Link

• etc.

They also have longform blogposts 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 Wallets doc, and even play with their ConnectButton playground.

Recommend Socios.com Wallet in the pop-up modal

You can customize the display of the pop-up modal to feature Socios.com 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's wallet address in the session storage on your dApp, or in the user profile. This way, the user won't have to connect to their wallet address every time they come on your platform.

Supported methods

Socios.com Wallet supports the following methods:

• eth_sendTransaction

• eth_signTransaction

• personal_sign

We plan to follow the following methods soon:

• eth_signTypedData

• eth_signTypedData_v4

SIWE verification

If you wish to use Socios.com Wallet to authenticate using SWIE, please note that the Socios.com Wallet is an SCA wallet rather than a regular EOA wallet. Ethereum's ecosystem includes two primary account types: Smart Contract Accounts (SCAs) and Externally Owned Accounts (EOAs).

While the signature for EOA wallets can be verified with ecrecover (e.g. using ethers.utils.verifyMessage ), the EIP-1271 standard (which Socios.com Wallet uses) requires calling the contract’s isValidSignature method to verify it.

So when authenticating an account, you need to first check if the address is a contract, and depending on that, pick up the proper verification method.