# Comment intégrer Socios Wallet à votre dApp

{% hint style="info" %}
Comme vous ciblez la chaîne Chiliz, assurez-vous de spécifier le bon `chainId` dans votre configuration :

* 88882 : Spicy Testnet
* 88888 : Chiliz Mainnet

Commencez par tester votre intégration sur le Spicy Testnet (88882), confirmez que tout se passe bien, puis passez au Chiliz Mainnet (88888).
{% endhint %}

## Choisissez vos outils et frameworks

Vous pouvez vous appuyer sur divers outils externes pour mettre en place la connectivité des portefeuilles, la prise en charge de plusieurs chaînes et les fonctionnalités avancées. Choisissez votre outil en fonction de la stack technologique de votre projet.

### WalletConnect (maintenant appelé Reown)

{% hint style="info" %}
[Reown](https://reown.com/walletkit) est le [nouveau nom](https://reown.com/blog/walletconnect-is-now-reown) de WalletConnect.\
La célèbre boîte à outils de connexion aux portefeuilles WalletConnect s'appelle désormais [WalletKit](https://reown.com/walletkit).
{% endhint %}

Reown propose un [guide étape par étape](https://reown.com/blog/how-to-get-started-with-walletkit) pour l'utilisation de WalletKit, et vous pouvez également consulter [leur documentation complète](https://docs.reown.com/walletkit/overview).

Ils fournissent également un [guide d'intégration du portefeuille Polkadot](https://docs.reown.com/advanced/multichain/polkadot/wallet-integration-guide) qui, bien que centré sur Polkadot, contient des étapes qui peuvent être appliquées de manière plus large.

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

Le Socios.com Wallet met en œuvre la norme [ERC-1271](https://eips.ethereum.org/EIPS/eip-1271), ce qui signifie que le contrat intelligent qui le sous-tend met en œuvre la méthode `isValidSignature()` au lieu de `erecover()`.

Par conséquent, votre dApp DOIT supporter ERC-1271 et implémenter un appel à isValidSignature().

Voir la [documentation de Reown](https://docs.reown.com/api/sign/smart-contract-wallet-usage#messages) pour plus d'informations.
{% endhint %}

{% hint style="warning" %}
**RECOMMANDÉ**

Pour garantir l'authenticité des connexions entre votre dApp et Socios.com Wallet (ainsi que d'autres portefeuilles), nous vous **recommandons vivement** d'utiliser l'[API de vérification de Reown Cloud](https://docs.reown.com/cloud/verify).

Pour ce faire, connectez-vous à Reown Cloud, accédez à la section « Domain verification » et indiquez le site que vous souhaitez vérifier.
{% 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/) offre des [flux d'authentification prêts à l'emploi](https://docs.moralis.com/authentication-api/evm) pour les chaînes compatibles avec l'EVM (y compris Chiliz Chain si elle est configurée correctement), ainsi que des méthodes côté serveur pour valider et gérer les sessions des utilisateurs.

Si vous utilisez déjà Moralis, vous pouvez l'utiliser pour créer le bouton « Connect Wallet » de votre dApps avec plusieurs méthodes/outils :

* [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)

Ils proposent également des articles de blog sur chacun d'entre eux :

* [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/) propose Connect, un flux d'inscription flexible qui s'adapte à différentes préférences est essentiel lors de l'intégration des utilisateurs.

Vous pouvez vous appuyer sur leur [documentation External Wallet](https://portal.thirdweb.com/connect/wallet/sign-in-methods/external-wallets), et même jouer avec leur [ConnectButton playground](https://playground.thirdweb.com/connect/sign-in/button).

## Recommander Socios Wallet dans la fenêtre pop-up

Vous pouvez personnaliser l'affichage de la fenêtre contextuelle pour présenter Socios Wallet : 

* Avec Reown/WalletConnect : Personnalisez la section « Portefeuille recommandé » de la fenêtre modale en utilisant l'option [`explorerRecommendedWalletIds`](https://docs.reown.com/advanced/walletconnectmodal/options#explorerrecommendedwalletids-optional).
* Avec RainbowKit : Vous pouvez créer votre propre liste de portefeuilles en utilisant l'option [`connectorsForWallets`](https://www.rainbowkit.com/docs/custom-wallet-list).

## Assurer une expérience optimale pour vos utilisateurs

Pour une meilleure expérience utilisateur, nous vous recommandons de stocker l'adresse du portefeuille de l'utilisateur dans le stockage de session de votre application, ou dans le profil de l'utilisateur. 

Ainsi, l'utilisateur n'aura pas à se connecter à son adresse de portefeuille à chaque fois qu'il se rendra sur votre plateforme.