Intégration des utilisateurs dans une application Solana : pourquoi adopter les portefeuilles intégrés

Solana Wallet Adapter

Le processus d’intégration le plus simple consiste à connecter les utilisateurs par l’intermédiaire d’un portefeuille existant, comme Phantom ou Solflare. Cette méthode convient aux utilisateurs qui connaissent Solana et disposent déjà d’un portefeuille configuré.

Le Solana Wallet Adapter constitue un bon point de départ et offre :

• Une API standardisée pour une intégration simple
• Des fonctionnalités de base pour connecter les portefeuilles et signer les transactions
• La flexibilité de l’open source pour l’adapter aux besoins de votre application

Le Solana Wallet Adapter est rapide et simple à mettre en œuvre, ce qui en fait une solution fiable pour les utilisateurs disposant déjà d’un portefeuille.

En plus de prendre en charge plusieurs portefeuilles, il propose une intégration standardisée pour garantir des fonctionnalités cohérentes, ainsi que des composants d’interface prêts à l’emploi, comme des boutons de connexion. Enfin, il optimise les performances pour accélérer la signature et l’envoi des transactions par rapport aux API brutes telles que window.solana.

La conception open source du Solana Wallet Adapter permet aux développeurs de l’adapter aux exigences propres à leur application. Elle permet également à la communauté d’étendre sa compatibilité à des frameworks comme Vue, Angular, Svelte et TypeScript.

Cependant, l’utilisation de l’adaptateur ajoute des dépendances à votre projet, ce qui peut alourdir le travail des développeurs.

Bien que l’adaptateur fournisse de nombreuses fonctionnalités prêtes à l’emploi, une personnalisation poussée peut nécessiter d’explorer son code source ou de créer des solutions de contournement. Selon le cas d’usage, cela peut prendre du temps.

Comme avec toute bibliothèque tierce, les développeurs peuvent rencontrer des bugs ou des problèmes indépendants de leur volonté, susceptibles d’affecter la stabilité de l’application ou de nécessiter une assistance externe.

Si l’utilisation d’un adaptateur de portefeuille est pratique pour les utilisateurs habitués aux cryptomonnaies, elle montre ses limites lorsqu’il s’agit d’intégrer un public plus large, en particulier des personnes peu familières avec la blockchain ou qui ne possèdent pas encore de portefeuille.

Intégrer de nouveaux utilisateurs avec des portefeuilles intégrés

Les portefeuilles intégrés peuvent considérablement améliorer l’intégration sur Solana et permettre aux développeurs d’acquérir davantage d’utilisateurs. Les nouveaux utilisateurs peuvent s’inscrire et recevoir automatiquement un portefeuille au sein même de l’application.

Ils peuvent ainsi :

• Commencer sans configurer de portefeuille tiers
• Recevoir des actifs en toute simplicité
• Effectuer des transactions on-chain

Cette approche réduit les frictions et se révèle précieuse pour les applications grand public visant une adoption à grande échelle.

Selon les données de Dynamic, plus de 50 % des utilisateurs choisissent un portefeuille intégré plutôt que de connecter un portefeuille existant.

Cependant, les taux d’adoption varient selon la méthode d’intégration et le public ciblé.

Les utilisateurs habitués aux cryptomonnaies peuvent préférer connecter leurs portefeuilles existants, tandis que le grand public privilégiera probablement la simplicité des solutions intégrées.

Il est essentiel de trouver le bon équilibre.

La liquidité des particuliers reste principalement concentrée dans les hot wallets. Ainsi, même si les portefeuilles intégrés simplifient l’intégration, ils ne constituent pas toujours le meilleur point de départ. Les développeurs doivent tenir compte de leur public cible initial et concevoir une expérience d’intégration adaptée aux besoins de leurs utilisateurs.

Un SDK complet pour l’intégration et l’infrastructure de portefeuille

Pour les développeurs qui souhaitent proposer davantage de fonctionnalités que le Solana Wallet Adapter, des solutions comme le SDK de Dynamic offrent une approche plus complète.

Avec Dynamic, vous pouvez :

1. Prendre en charge plusieurs options de portefeuille

Permettez aux utilisateurs de connecter des portefeuilles Solana existants comme Phantom et fournissez des portefeuilles intégrés aux nouveaux utilisateurs.

2. Activer la connexion par réseau social et par e-mail

Simplifiez la configuration des portefeuilles grâce à des méthodes de connexion familières comme X et Telegram.

3. Personnaliser l’expérience utilisateur

Utilisez des composants d’interface préconçus pour une intégration rapide ou choisissez des options entièrement headless afin de concevoir vos propres parcours.

4. Préparer votre application pour l’avenir

Ajoutez la prise en charge de plusieurs portefeuilles, des outils de protection contre la fraude et des fonctionnalités d’analyse pour faire évoluer et optimiser votre application.

5. Attirer des utilisateurs d’autres blockchains

Lorsque vous serez prêt, étendez les fonctionnalités de votre application au-delà de Solana vers d’autres blockchains.

Une solution comme Dynamic vous permet de simplifier le développement tout en offrant aux utilisateurs une expérience d’intégration fluide.

Elle complète le Solana Wallet Adapter en offrant aux développeurs davantage de fonctionnalités d’intégration, ainsi que les capacités de mise à l’échelle et de personnalisation indispensables.

Solana Wallet Adapter ou portefeuilles intégrés

Voici un comparatif utile :

Quelles que soient les fonctionnalités, le temps de mise en œuvre reste toujours un facteur décisif. Vous pourriez penser qu’avec autant de possibilités, Dynamic est plus complexe à intégrer que le Solana Wallet Adapter, mais ce n’est pas le cas.

Voici une comparaison des implémentations React par défaut :

Solana Wallet Adapter : implémentation par défaut

import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
import {
WalletModalProvider,
WalletDisconnectButton,
WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export const Wallet: FC = () => {
// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
const network = WalletAdapterNetwork.Devnet;

// You can also provide a custom RPC endpoint.
const endpoint = useMemo(() => clusterApiUrl(network), [network]);

const wallets = useMemo(
() => [
new UnsafeBurnerWalletAdapter(),
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[network]
);

return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>
<WalletMultiButton />
<WalletDisconnectButton />
{ /* Your app's components go here, nested within the context providers. */ }
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};

Dynamic : implémentation par défaut

import React from 'react'
import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react-core'
import { SolanaWalletConnectors } from '@dynamic-labs/solana'

export const App = () => {
return (
<div className="App">
<DynamicContextProvider
settings={{
environmentId: process.env.REACT_APP_DYNAMIC_ENVIRONMENT_ID,
walletConnectors: [SolanaWalletConnectors],
}}
>
{ /* Your app's components go here, nested within the context providers. */ }
<DynamicWidget />
</DynamicContextProvider>
</div>
)
}

Votre processus d’intégration est entièrement configuré grâce à DynamicWidget, un composant d’interface tout-en-un qui gère le bouton de connexion ou d’inscription, l’ensemble du parcours d’authentification, le profil utilisateur et bien plus encore.

Au démarrage de l’application, vous verrez ceci :

Si vous préférez créer votre propre interface ou personnaliser certains éléments, tout est configurable au pixel près. Consultez la documentation sur le design ou l’option d’intégration headless pour obtenir des instructions détaillées.

Pour activer l’inscription avec un portefeuille intégré sur Solana, accédez simplement au tableau de bord et suivez ces étapes :

Et voilà !

Toute personne qui s’inscrit avec une adresse e-mail, un numéro de téléphone ou un compte de réseau social reçoit un portefeuille Solana et peut immédiatement utiliser votre application.

Avec quelques lignes de code, vous bénéficiez d’une intégration de premier ordre et de toutes les fonctionnalités dont vous avez besoin aujourd’hui comme demain.

Ajouter votre fournisseur RPC et définir les frais de priorité

Si l’intégration reste aujourd’hui l’un des principaux points de friction pour les utilisateurs, le traitement des transactions arrive juste derrière. Il peut être difficile de gérer la congestion du réseau Solana. Sans service RPC dédié, les transactions des utilisateurs peuvent être abandonnées, ce qui génère de la frustration. De même, des frais de priorité mal configurés peuvent dégrader l’expérience utilisateur et compromettre la fiabilité de l’application.

Vous pouvez facilement éviter ces problèmes en utilisant Helius à la fois comme endpoint RPC et pour définir dynamiquement les frais avec son Priority Fee API. Pour l’intégrer à Dynamic, il suffit de définir l’URL RPC dans le tableau de bord.

Lors de la création de la transaction, récupérez les frais avec le Priority Fee API.

async function getPriorityFeeEstimate(priorityLevel, transaction) {
    const response = await fetch(HeliusURL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            jsonrpc: "2.0",
            id: "1",
            method: "getPriorityFeeEstimate",
            params: [
                {
                    transaction: bs58.encode(transaction.serialize()), // Pass serialized transaction in Base58
                    options: { priorityLevel: priorityLevel },
                },
            ],
        }),
    });

    const data = await response.json();
    console.log(
        "Fee in function for",
        priorityLevel,
        "",
        data.result.priorityFeeEstimate
    );
    return data.result;
}

Étude de cas Magic Eden

Une infrastructure de portefeuille robuste est essentielle pour développer des applications Solana puissantes et évolutives.

Magic Eden, la principale marketplace de NFT, a accéléré sa croissance en ajoutant de nouvelles blockchains. L’entreprise avait besoin d’un portefeuille flexible pour accompagner cette stratégie et rester performante lors des pics de trafic, comme pendant les lancements de NFT.

En intégrant le SDK de Dynamic, Magic Eden peut prendre en charge les portefeuilles multichains, la connexion par réseau social et la gestion de plusieurs portefeuilles. La gestion de plusieurs portefeuilles et la collecte d’actifs sur différents réseaux deviennent simples.

Magic Eden s’appuie également sur Helius pour gérer ses nœuds RPC et optimiser le débit des transactions. Grâce au Priority Fee API de Helius, Magic Eden garantit fiabilité et rapidité, même pendant les pics de trafic.

Cette combinaison de Dynamic et Helius a permis à Magic Eden d’évoluer efficacement tout en offrant une expérience supérieure à ses millions d’utilisateurs mensuels.

En donnant la priorité à l’évolutivité, à la rapidité et à l’expérience utilisateur, Magic Eden établit une référence pour les possibilités offertes aux marketplaces de NFT.

Pour les développeurs qui souhaitent créer des applications destinées aussi bien aux utilisateurs habitués aux cryptomonnaies qu’au grand public, investir dans une solution de portefeuille fiable peut simplifier le développement, toucher une base d’utilisateurs plus large et jeter les bases d’une croissance à long terme.

Ressources supplémentaires

• Solana Wallet Adapter
• Documentation de Dynamic

Un grand merci à @__lostin__ et à Brady Werkheiser pour leur relecture des versions précédentes de cet article.