NOUVEAU : Helius acquiert Light Protocol
expérience utilisateur web3
Blog/Développement

Une UX fluide et sécurisée : la stack technologique qui accueille des millions d’utilisateurs sur Solana

Infrastructure de portefeuillesPrivy sur XPrivy sur LinkedIn
Ingénieur Solana principal, PrivyDanny B. sur XDanny B. sur LinkedIn
6 min de lecture

Guide pour les développeurs sur l’utilisation de Privy et Helius pour les portefeuilles intégrés, les transactions sans frais de gas et une intégration fluide des utilisateurs.

Aujourd’hui, la plupart des applications crypto destinées au grand public reposent sur des portefeuilles externes. Les utilisateurs doivent alors gérer des phrases de récupération, suivre plusieurs redirections et approuver manuellement chaque transaction. 

Pour l’utilisateur lambda qui ne connaît pas la blockchain, c’est tout simplement impossible. Les phrases de récupération, les frais de gas et les fenêtres contextuelles des portefeuilles ne créent pas seulement des frictions : ils provoquent des abandons. Même les applications proposant d’excellents produits perdent donc des utilisateurs avant qu’ils aient pu commencer.

Ce n’est pas une fatalité.

Dans ce guide, vous apprendrez à créer des expériences onchain fluides sur Solana avec Privy et Helius, grâce aux transactions sans frais de gas, aux portefeuilles intégrés et au trading instantané avec une latence de < 20 ms.

Nous verrons comment :

  • Créer des portefeuilles intégrés non dépositaires avec des connexions simples (e-mail, réseaux sociaux, SMS), tout en prenant en charge les portefeuilles externes comme Phantom, Solflare, Backpack et d’autres, le tout depuis le SDK Privy
  • Activer les transactions sans frais de gas en prenant en charge les frais via des portefeuilles sécurisés
  • Intégrer des rampes d’accès fiat comme MoonPay ou Coinbase Pay dans votre UI
  • Transférer nativement la liquidité vers Solana sans friction
  • Développer sur mobile avec une UX onchain fluide qui ressemble à celle du Web2

Voyons ce qu’il faut pour accueillir les prochains millions d’utilisateurs dans votre application Solana.

L’intégration crypto en pratique : exemples d’applications DeFi et grand public

Une intégration fluide n’est pas seulement un plus : c’est un multiplicateur de croissance. Les applications qui exploitent des portefeuilles intégrés peuvent atteindre plus de 40 % de rétention mensuelle des utilisateurs, en particulier lorsqu’elles ciblent des personnes qui découvrent la crypto. 

Pour la plupart des consommateurs, les concepts propres à la crypto tels que le gas, le slippage, les frais de priorité et les pourboires sont méconnus et difficiles à appréhender. 

Pour fidéliser leurs utilisateurs, les applications doivent rendre leur prise en main accessible. Elles doivent notamment permettre aux utilisateurs d’interagir avec des stablecoins comme l’USDC ou de couvrir les frais de gas grâce à des transactions sponsorisées.

L’objectif est simple : permettre aux utilisateurs de signer, d’échanger et de staker sans avoir à comprendre le fonctionnement de la crypto.

Pump.fun — Plateforme de lancement de tokens

Pump.fun est l’une des plateformes de trading à la croissance la plus rapide sur Solana. Elle associe des portefeuilles intégrés à des transactions sans frais de gas pour proposer un trading instantané en un seul geste, sans fenêtres contextuelles, approbations ni changement de portefeuille.

Initialement conçue pour les traders haute fréquence, l’expérience Advanced s’est révélée si efficace qu’elle a été déployée auprès de tous les utilisateurs.

Aujourd’hui, n’importe qui peut lancer un token et commencer à trader sur mobile en quelques secondes. Certains utilisateurs ont même réalisé des transactions de plusieurs millions de dollars via des portefeuilles propulsés par Privy, sans jamais quitter l’application mobile.

Jupiter — Agrégateur de DEX

L’expérience Quick Account de Jupiter démontre toute la puissance d’un trading fluide. Qu’il se connecte via Phantom, Solflare, Backpack, ou simplement avec son e-mail ou X, chaque utilisateur interagit en coulisses avec l’infrastructure de portefeuilles intégrés de Privy.

Cette configuration permet d’exécuter instantanément des trades sans demander la signature des transactions, avec un parcours fluide et le meilleur prix à chaque fois.

Lorsqu’ils sont prêts, les utilisateurs peuvent exporter leurs clés vers des portefeuilles externes. Ils conservent ainsi un contrôle total et évitent toute dépendance à un fournisseur.

Moonwalk — Application mobile de walk-to-earn

Moonwalk offre une intégration mobile fluide en permettant aux utilisateurs de s’inscrire par e-mail, via les réseaux sociaux ou par SMS, comme dans n’importe quelle autre application Web2 grand public.

En coulisses, chaque inscription crée automatiquement un portefeuille intégré entièrement fonctionnel grâce à Privy. Les utilisateurs n’ont pas à se préoccuper des phrases de récupération, des extensions de portefeuille ou d’une quelconque configuration propre à la crypto.

Ils commencent simplement à marcher et à gagner des récompenses, sans même se rendre compte qu’ils sont onchain.

Créer une UX onchain fluide : approvisionnement natif des comptes

Créer des portefeuilles intégrés en coulisses n’est qu’un début. Pour offrir une expérience applicative réellement fluide, les développeurs doivent également gérer l’approvisionnement des comptes et la liquidité inter-chaînes, deux des causes les plus fréquentes d’abandon. 

Rampes d’accès intégrées

Les meilleures applications grand public éliminent les frictions à chaque étape, y compris lorsqu’un utilisateur doit approvisionner son portefeuille.

En intégrant directement des rampes d’accès fiat à l’application, les utilisateurs peuvent acheter du SOL ou de l’USDC sans jamais quitter l’interface.

Le SDK de Privy facilite l’intégration de fournisseurs de rampes d’accès comme MoonPay et Coinbase Pay, ce qui permet d’acheter nativement des actifs Solana en quelques clics seulement.

Bridging natif

Le bridging natif de liquidité constitue un autre levier essentiel. Si le portefeuille Solana d’un utilisateur n’est pas suffisamment approvisionné, les développeurs peuvent configurer leurs portefeuilles Privy pour transférer des soldes depuis une chaîne EVM comme Ethereum, Base ou Polygon. 

Votre application devient ainsi un point de convergence de liquidité : elle récupère les actifs là où se trouvent déjà vos utilisateurs et les transfère directement vers votre expérience Solana. Aucun changement d’application. Aucune adresse de portefeuille à copier. Un simple transfert de valeur inter-chaînes, parfaitement fluide.

Comment configurer des transactions sans frais de gas avec Privy et Helius

Au-delà de l’approvisionnement des comptes et du bridging inter-chaînes, les portefeuilles de Privy offrent une gestion sécurisée des clés et sont spécialement conçus pour les configurations de paiement des frais, contrairement aux paires de clés traditionnelles.

1. Créer un portefeuille géré

Pour configurer des transactions sans frais de gas pour vos utilisateurs, vous devez créer un portefeuille géré qui agit comme « payeur des frais ».

Ce portefeuille prendra en charge les frais de gas de vos utilisateurs, leur offrant ainsi une expérience fluide et gratuite. 

Une fois les portefeuilles gérés activés dans votre Privy Dashboard, vous pouvez en créer un par programmation côté serveur à l’aide du SDK Privy pour Node.js.

Avec le SDK Privy pour Node.js :

Code
import { PrivyClient } from '@privy-io/server-sdk';

// Initialize the Privy client
const privy = new PrivyClient({
  apiKey: process.env.PRIVY_API_KEY
});

// Create a new Solana managed wallet
async function createFeePayerWallet() {
  const { id, address, chainType } = await privy.walletApi.create({
    chainType: 'solana',
    policyIds: ['optional_policy_id'],
    idempotencyKey: 'unique_request_identifier'
  });

  console.log(`Created fee payer wallet with ID: ${id}`);
  console.log(`Wallet address: ${address}`);

  return { id, address };
}

// Make sure to fund this wallet with SOL to cover transaction fees

L’ID et l’adresse du portefeuille seront utilisés lors des étapes suivantes pour sponsoriser les transactions.

2. Mettre en œuvre les transactions sponsorisées

Une fois le portefeuille géré configuré et approvisionné, vous pouvez commencer à proposer des transactions sans frais de gas aux utilisateurs. 

Lorsqu’un utilisateur s’authentifie, Privy crée un portefeuille intégré lié à ses identifiants de connexion. Les utilisateurs signent les transactions comme d’habitude, mais au lieu de les envoyer à la blockchain, celles-ci sont transmises à votre backend, où votre portefeuille géré les signe et les soumet à leur place.

Cette configuration offre une expérience utilisateur fluide tout en laissant aux utilisateurs le contrôle total de leurs clés.

Implémentation côté client (React avec le SDK Privy)

Code
import { useSolanaWallets } from '@privy-io/react-auth/solana';
import {
  TransactionMessage,
  PublicKey,
  VersionedTransaction,
  Connection
} from '@solana/web3.js';

async function sendGaslessTransaction(instructions) {
  // Get user's embedded wallet
  const { wallets } = useSolanaWallets();
  const embeddedWallet = wallets.find(wallet =>
    wallet.walletClientType === 'privy'
  );

  if (!embeddedWallet) {
    throw new Error('No embedded wallet found');
  }

  // Connect to Solana via Helius for better performance
  const connection = new Connection('https://mainnet.helius-rpc.com/?api-key=YOUR_HELIUS_API_KEY');
  const { blockhash } = await connection.getLatestBlockhash();

  // Set your managed wallet as fee payer
  const feePayerAddress = 'YOUR_PRIVY_SERVER_WALLET_ADDRESS';

  // Build transaction with managed wallet as payer
  const message = new TransactionMessage({
    payerKey: new PublicKey(feePayerAddress),
    recentBlockhash: blockhash,
    instructions
  }).compileToV0Message();

  const transaction = new VersionedTransaction(message);

  // Have user sign the transaction
  const provider = await embeddedWallet.getProvider();
  const serializedMessage = Buffer.from(
    transaction.message.serialize()
  ).toString('base64');

  const { signature } = await provider.request({
    method: 'signMessage',
    params: { message: serializedMessage }
  });

  // Add user signature
  const userSignature = Buffer.from(signature, 'base64');
  transaction.addSignature(
    new PublicKey(embeddedWallet.address),
    userSignature
  );

  // Send to your backend for fee payer signature
  const serializedTx = Buffer.from(
    transaction.serialize()
  ).toString('base64');

  const response = await fetch('/api/sponsor-transaction', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ transaction: serializedTx })
  });

  const { transactionHash } = await response.json();
  return transactionHash;
}

Enfin, la transaction partiellement signée est envoyée du client à votre backend, où elle est vérifiée, signée par le portefeuille géré, puis diffusée sur le réseau Solana.

Implémentation du backend (route API Next.js)

Code
// pages/api/sponsor-transaction.js
import { VersionedTransaction } from '@solana/web3.js';
import { PrivyClient } from '@privy-io/server-sdk';

// Initialize Privy SDK
const privy = new PrivyClient({
  apiKey: process.env.PRIVY_API_KEY
});
// For App Router (Next.js 13+)
export async function POST(request) {
  try {
    const { transaction: serializedTx } = await request.json();

    // Deserialize the transaction to verify it (optional)
    const txBuffer = Buffer.from(serializedTx, 'base64');
    const transaction = VersionedTransaction.deserialize(txBuffer);

    // Verify the transaction (check fee payer, validate against policies)
    // ...verification logic here...

    // Sign AND send with your Privy managed wallet in one step
    const serverWalletId = process.env.PRIVY_SERVER_WALLET_ID;
    const { hash } = await privy.walletApi.solana.signAndSendTransaction({
      walletId: serverWalletId,
      caip2: 'solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1', // Mainnet
      transaction: serializedTx,
      rpcUrl: 'https://mainnet.helius-rpc.com/?api-key=YOUR_HELIUS_API_KEY',
      options: {
        maxRetries: 5,
        skipPreflight: true
      }
    });

    return Response.json({
      transactionHash: hash,
      message: 'Transaction sent successfully'
    }, { status: 200 });
  } catch (error) {
    console.error('Error processing transaction:', error);
    return Response.json({
      error: 'Failed to process transaction',
      details: error.message
    }, { status: 500 });
  }
}

En combinant les portefeuilles sécurisés de Privy avec l’infrastructure de transactions optimisée de Helius, vous pouvez offrir à vos utilisateurs une expérience fluide et sans frais de gas, sans compromis sur la fiabilité ni la flexibilité.

La stack la plus flexible pour créer des expériences applicatives fluides

Le SDK modulaire de Privy, associé aux nœuds RPC haute performance de Helius, offre aux développeurs une base puissante et flexible pour créer des applications Solana de premier plan. 

Que vous partiez d’une API de portefeuille bas niveau avec votre propre stack d’authentification, ou que vous utilisiez Privy pour l’authentification et d’autres fonctionnalités avancées comme l’authentification multifacteur (MFA), les rampes d’accès intégrées ou le bridging natif, la stack de Privy évolue avec les besoins de votre produit.

Ressources supplémentaires

Abonnez-vous à Helius

Suivez les dernières actualités du développement sur Solana et recevez une notification à chaque publication