# 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.

{% hint style="info" %}
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](https://docs.chiliz.com/develop/basics/connect-to-chiliz-chain "mention")
{% endhint %}

## 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)

{% hint style="info" %}
[Reown](https://reown.com/) is the [new name](https://reown.com/blog/walletconnect-is-now-reown) of WalletConnect Inc. \
The well-known WalletConnect wallet connection toolkit is now called [Reown SDK](https://reown.com/reown-sdk) (or AppKit). It was formerly know as Web3Modal.
{% endhint %}

Reown has a [step-by-step guide to using AppKit](https://reown.com/blog/how-to-get-started-with-walletkit), and you should also peruse [their full documentation](https://docs.reown.com/walletkit/overview).

{% hint style="warning" %}
**REQUIRED**

The Socios.com Wallet implements the [ERC-1271](https://eips.ethereum.org/EIPS/eip-1271) standard, which means that the smart contract behind it implements the `isValidSignature()` method instead of `erecover()`.&#x20;

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

See [the Reown doc](https://docs.reown.com/advanced/api/sign/smart-contract-wallet-usage#messages) for more.
{% endhint %}

### RainbowKit

[RainbowKit](https://www.rainbowkit.com/) is a React library for adding wallet-connection features. It relies on [viem](https://viem.sh/) and [Wagmi](https://wagmi.sh/) , and provides pre-built components for a modern, user-friendly integration flow.

View [their own introduction](https://www.rainbowkit.com/docs/introduction) to learn more about it.

### Moralis

[Moralis](https://docs.moralis.com/) offers [ready-made authentication flows for EVM-compatible chains](https://docs.moralis.com/authentication-api/evm) (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](https://docs.moralis.com/authentication-api/evm/how-to-sign-in-with-walletconnect)
* [How to Authenticate Users with RainbowKit](https://docs.moralis.com/authentication-api/evm/how-to-sign-in-with-rainbowkit)
* [How to Authenticate Users with Magic.Link](https://docs.moralis.com/authentication-api/evm/how-to-sign-in-with-magiclink)
* etc.

They also have longform blogposts about each:

* [WalletConnect Integration – How to Integrate WalletConnect](https://developers.moralis.com/walletconnect-integration-how-to-integrate-walletconnect/)
* [How to Add a Sign In with RainbowKit to Your Project in 5 Steps](https://developers.moralis.com/how-to-add-a-sign-in-with-rainbowkit-to-your-project-in-5-steps/)

### thirdweb

[thirdweb](https://portal.thirdweb.com/) offers [Connect](https://thirdweb.com/learn/guides/thirdweb-connect-explained), a flexible sign-up flow that accommodates different preferences is critical when onboarding users.

You can rely on their [Wallets doc](https://portal.thirdweb.com/connect/wallet/sign-in-methods/external-wallets), and even play with their [ConnectButton playground](https://playground.thirdweb.com/connect/sign-in/button).

## 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`](https://docs.reown.com/advanced/walletconnectmodal/options#explorerrecommendedwalletids-optional) option.
* With RainbowKit: You can build your own list of wallets using the [`connectorsForWallets`](https://www.rainbowkit.com/docs/custom-wallet-list) 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` &#x20;
* `eth_signTypedData_v4`

## SIWE verification

If you wish to use Socios.com Wallet to authenticate using [SWIE](https://eips.ethereum.org/EIPS/eip-4361), please note that the Socios.com Wallet is an SCA wallet rather than a regular EOA wallet.\
\&#xNAN;*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.&#x20;

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.
