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.
Le code suivant montre comment se connecter au portefeuille d'extension en utilisant uniquement 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:
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.
Un exemple minimal est présenté ci-dessous :
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:
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:
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
.
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.