Intégrer Socios.com Wallet dans votre dApp

Les dApps ont généralement un bouton « Connecter le portefeuille » pour déclencher une fenêtre contextuelle où l'utilisateur peut sélectionner son fournisseur de portefeuille. La fenêtre contextuelle enverra ensuite un message au portefeuille choisi afin de vérifier que cet utilisateur possède bien cette adresse de portefeuille.

Il existe plusieurs manières d'intégrer le Socios Wallet dans la fenêtre modale « Connecter le portefeuille » 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 chaînes, y compris Chiliz Chain (à la fois Spicy Testnet et Chiliz Mainnet).

Cette page a pour but de vous présenter différentes options parmi lesquelles choisir.

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

• 88882 : Spicy Testnet

• 88888 : Chiliz Mainnet

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

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

Choisissez vos bibliothèques et frameworks

Vous pouvez exploiter divers outils externes pour rationaliser la connexion de portefeuilles, la prise en charge multi-chaînes et les fonctionnalités avancées. Choisissez votre outil en fonction de la pile technologique de votre projet.

WalletConnect (maintenant Reown)

Reown est le nouveau nom de WalletConnect Inc. La célèbre boîte à outils de connexion de portefeuille WalletConnect s'appelle désormais Reown SDK (ou AppKit). Il était auparavant connu sous le nom de Web3Modal.

Reown propose un guide pas à pas pour utiliser AppKit, et vous devriez également parcourir leur documentation complète.

REQUIS

Le portefeuille Socios.com implémente la norme ERC-1271 , ce qui signifie que le contrat intelligent qui le sous-tend implémente la méthode isValidSignature() au lieu de erecover().

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

Voir la documentation Reown pour en savoir plus.

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éconçus pour un flux d'intégration moderne et convivial.

Consultez leur propre introduction pour en savoir plus à ce sujet.

Moralis

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

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

• Comment se connecter 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 :

• Intégration WalletConnect – Comment intégrer WalletConnect

• Comment ajouter une connexion avec RainbowKit à votre projet en 5 étapes

thirdweb

thirdweb offre Connect, un flux d'inscription flexible qui tienne compte des préférences est 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

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

• Avec Reown/WalletConnect : personnalisez la section « Portefeuille recommandé » de la modale en utilisant l'option explorerRecommendedWalletIds .

• Avec RainbowKit : vous pouvez créer votre propre liste de portefeuilles en utilisant les connectorsForWallets .

Assurez 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 dApp, ou dans le profil utilisateur. Ainsi, l'utilisateur n'aura pas à reconnecter son portefeuille à chaque visite sur votre plateforme.

Méthodes prises en charge

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

• eth_sendTransaction

• eth_signTransaction

• personal_sign

Nous prévoyons de suivre prochainement les méthodes suivantes :

• eth_signTypedData

• eth_signTypedData_v4

Vérification SIWE

Si vous souhaitez utiliser Socios.com Wallet pour vous authentifier en utilisant SWIE, 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 principaux de comptes : les comptes de contrat intelligent (SCA) et les comptes détenus par des externes (EOA).

Alors que la signature des portefeuilles EOA peut être vérifiée avec ecrecover (par exemple en utilisant ethers.utils.verifyMessage ), la norme EIP-1271 (que Socios.com Wallet utilise) exige 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 et, en fonction de cela, choisir la méthode de vérification appropriée.