Aller au contenu

Portefeuille d'extension pour les dApps

Le portefeuille d'extension Alephium injecte un objet global window.alephiumProviders.alephium dans les dApps avec lesquelles l'utilisateur interagit. Les dApps peuvent utiliser cet objet pour authentifier l'utilisateur, demander les comptes des utilisateurs et communiquer avec la blockchain Alephium, tel que récupérer le solde de l'utilisateur, l'état du contrat et soumettre des transactions, etc.

Configuration de base

Pour détecter l'objetwindow.alephiumProviders.alephium , nous recommandons d'utiliser le package @alephium/get-extension-wallet.

Text Only
npm install --save @alephium/get-extension-wallet

Le code suivant montre comment se connecter au portefeuille d'extension en utilisant uniquement TypeScript:

TypeScript
import { getDefaultAlephiumWallet } from "@alephium/get-extension-wallet"

async function tryConnect() {
  // Retourne l'objet `window.alephiumProviders.alephium` 
  // après que l'utilisateur ait sélectionné le portefeuille d'extension.
  const windowAlephium = await getDefaultAlephiumWallet()
  // Authentifie l'utilisateur pour la dApp actuelle, retourne le compte sélectionné
  const selectedAccount = await windowAlephium?.enable()

  if (windowAlephium && selectedAccount) {
    // À partir de là, vous pouvez exécuter diverses transactions:
    //
    // windowAlephium.signAndSubmitTransferTx(...)
    // windowAlephium.signAndSubmitDeployContractTx(...)
    // windowAlephium.signAndSubmitExecuteScriptTx(...)
    // ...
  }
}

Les utilisateurs seront invités à se connecter à la dApp actuelle lorsque la méthode windowAlephium?.enable() est appelée:

Connect dApp

Après que l'utilisateur ait cliqué sur le bouton Connect , la dApp est connectée à son portefeuille d'extension.

Web3 React

Pour les dApps construites avec React, @alephium/web3-react offre une manière plus simple de s'authentifier avec les portefeuilles, y compris le portefeuille d'extension.

Text Only
npm install --save @alephium/web3-react

Un exemple minimal est présenté ci-dessous :

TypeScript
const App = () => {
  return (
    <AlephiumWalletProvider useTheme="retro">
      /* Your App */
      <AlephiumConnectButton />
    </AlephiumWalletProvider>
  );

Cela placera un bouton dans votre dApp avec le thème intégré retro. Une fois que l'utilisateur clique sur le bouton, une fenêtre contextuelle s'affiche pour demander à l'utilisateur de sélectionner un portefeuille:

Connect dApp

Si l'utilisateur sélectionne Extension Wallet, il sera à nouveau invité à se connecter à la dApp actuelle. Après que l'utilisateur ait cliqué sur le bouton Connecter, la dApp est connectée à son portefeuille d'extension.

Veuillez vous référer au dépôt nextjs-template pour un exemple fonctionnel et plus complet.

Signature des transactions

L'objet windowAlephium implémente l' InteractiveSignerProvider, qui expose les méthodes suivantes pour la signature des transactions:

TypeScript
abstract signAndSubmitTransferTx(params: SignTransferTxParams): Promise<SignTransferTxResult>
abstract signAndSubmitDeployContractTx(params: SignDeployContractTxParams): Promise<SignDeployContractTxResult>
abstract signAndSubmitExecuteScriptTx(params: SignExecuteScriptTxParams): Promise<SignExecuteScriptTxResult>
abstract signAndSubmitUnsignedTx(params: SignUnsignedTxParams): Promise<SignUnsignedTxResult>
abstract signUnsignedTx(params: SignUnsignedTxParams): Promise<SignUnsignedTxResult>
// Le message sera préfixé par 'Alephium Signed Message: ' avant la signature
// de sorte que la signature résultante ne puisse pas être réutilisée pour la construction de transactions.
abstract signMessage(params: SignMessageParams): Promise<SignMessageResult>

Lorsque l'une de ces méthodes est exécutée, le portefeuille d'extension fournira les informations nécessaires en fonction du type de transaction et demandera à l'utilisateur de signer.

L'exemple suivant est une transaction de transfert de jetons: l'utilisateur transfère 2 TokenFaucet de son compte Salaire à son compte Épargne.

Connect dApp

Après que l'utilisateur ait cliqué sur le bouton Signer, la transaction sera signée et soumise à la blockchain Alephium par le portefeuille d'extension.