Intégrer le wallet Socios.com dans votre dApp

Intégrez le Socios.com Wallet dans le flux "Connect Wallet" de votre dApp Chiliz Chain en utilisant Reown AppKit ou WalletConnect, avec les chain IDs 88888 (Mainnet) et 88882 (Spicy Testnet).

Les dApps disposent généralement d'un bouton "Connect Wallet" pour déclencher une fenêtre pop-up où l'utilisateur peut sélectionner son fournisseur de portefeuille. La pop-up envoie ensuite un message au portefeuille choisi afin de vérifier que cet utilisateur est bien propriétaire de cette adresse de portefeuille.

Il existe plusieurs façons d'intégrer le Socios Wallet dans la fenêtre modale "Connect Wallet" de votre dApp. En vous appuyant sur des outils reconnus, vous pouvez offrir une expérience sécurisée et fluide qui fonctionne avec plusieurs fournisseurs de portefeuilles (tels que MetaMask et d'autres) et sur plusieurs chaînes, notamment Chiliz Chain (Spicy Testnet et Chiliz Mainnet).

Cette page a pour objectif de vous présenter diverses options parmi lesquelles choisir.

Parce que vous ciblez Chiliz Chain, assurez-vous de spécifier le bon chainId dans votre configuration :

• 88882 : Spicy Testnet

• 88888 : Chiliz Mainnet

Commencez par tester votre intégration sur Spicy Testnet (88882), confirmez que tout fonctionne correctement, et seulement ensuite passez à Chiliz Mainnet (88888).

Voir tous les paramètres ici : Se connecter à Chiliz Chain

Choisir vos bibliothèques et frameworks

Vous pouvez tirer parti de divers outils externes pour rationaliser la connectivité des portefeuilles, le support multi-chaînes et les fonctionnalités avancées. Choisissez votre outil en fonction de la pile technologique de votre projet.

Reown (anciennement WalletConnect)

Reown est le nom de WalletConnect Inc. depuis 2024. Le toolkit de connexion de portefeuilles WalletConnect bien connu s'appelle désormais Reown SDK (ou AppKit). Il était auparavant connu sous le nom de Web3Modal.

Reown dispose d'un guide étape par étape pour utiliser AppKit, et vous devriez également lire leur documentation complète.

REQUIS

Le Socios.com Wallet implémente le standard ERC-1271, ce qui signifie que le smart contract derrière lui implémente la méthode isValidSignature() au lieu de erecover().

Par conséquent, votre dApp DOIT prendre en charge l'ERC-1271 et implémenter un appel à isValidSignature().

Voir la doc Reown pour plus d'informations.

RainbowKit

RainbowKit est une bibliothèque React pour ajouter des fonctionnalités de connexion de portefeuille. Elle s'appuie sur viem et Wagmi, et fournit des composants préconstruits pour un flux d'intégration moderne et convivial.

Consultez leur propre introduction pour en savoir plus.

Moralis

Moralis propose des flux d'authentification prêts à l'emploi pour les chaînes compatibles EVM (y compris Chiliz Chain si correctement configuré), ainsi que des méthodes côté serveur pour valider et gérer les sessions utilisateurs.

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

• Comment authentifier les utilisateurs avec WalletConnect

• Comment authentifier les utilisateurs avec RainbowKit

• Comment authentifier les utilisateurs avec Magic.Link

• etc.

Ils ont également des articles de blog détaillés sur chacun :

• WalletConnect Integration – How to Integrate WalletConnect

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

thirdweb

thirdweb propose Connect, un flux d'inscription flexible qui prend en charge différentes préférences, essentiel lors de l'onboarding des utilisateurs.

Vous pouvez vous appuyer sur leur documentation Wallets, et même jouer avec leur playground ConnectButton.

Recommander le Socios.com Wallet dans la fenêtre modale pop-up

Vous pouvez personnaliser l'affichage de la fenêtre modale pop-up pour mettre en avant le Socios.com Wallet :

• Avec Reown/WalletConnect : Personnalisez la section "Recommended Wallet" de la modale en utilisant l'option explorerRecommendedWalletIds.

• Avec RainbowKit : Vous pouvez créer votre propre liste de portefeuilles en utilisant l'option connectorsForWallets.

Assurer une expérience optimale pour vos utilisateurs

Pour une meilleure expérience utilisateur, nous vous recommandons de stocker l'adresse de portefeuille de l'utilisateur dans le stockage de session de votre dApp, ou dans le profil utilisateur. Ainsi, l'utilisateur n'aura pas à se connecter à son adresse de portefeuille à chaque fois qu'il visite votre plateforme.

Méthodes supportées

Le Socios.com Wallet prend en charge les méthodes suivantes :

• eth_sendTransaction

• eth_signTransaction

• personal_sign

Nous prévoyons d'ajouter les méthodes suivantes prochainement :

• eth_signTypedData

• eth_signTypedData_v4

Vérification SIWE

Si vous souhaitez utiliser le Socios.com Wallet pour l'authentification via SIWE, veuillez noter que le Socios.com Wallet est un portefeuille SCA plutôt qu'un portefeuille EOA classique. L'écosystème Ethereum comprend deux types de comptes principaux : les Smart Contract Accounts (SCAs) et les Externally Owned Accounts (EOAs).

Alors que la signature pour les portefeuilles EOA peut être vérifiée avec ecrecover (par exemple en utilisant ethers.utils.verifyMessage), le standard EIP-1271 (que le Socios.com Wallet utilise) nécessite d'appeler la méthode isValidSignature du contrat pour la vérifier.

Donc lors de l'authentification d'un compte, vous devez d'abord vérifier si l'adresse est un contrat, puis choisir la méthode de vérification appropriée en fonction de ce résultat.