Wallet Adapter for Aleo Apps

Modular TypeScript wallet adapters and components for Aleo applications.

• Demo
• Base Docs
• React Docs
• React UI Docs
• Leo Adapter Docs

Quick Setup (using React UI)

📲Install

Install these dependencies:

npm install --save \
    @demox-labs/aleo-wallet-adapter-base \
    @demox-labs/aleo-wallet-adapter-react \
    @demox-labs/aleo-wallet-adapter-reactui \
    @demox-labs/aleo-wallet-adapter-leo \
    react

🛠️Setup

import React, { FC, useMemo } from "react";
import { WalletProvider } from "@demox-labs/aleo-wallet-adapter-react";
import { WalletModalProvider } from "@demox-labs/aleo-wallet-adapter-reactui";
import { LeoWalletAdapter } from "@demox-labs/aleo-wallet-adapter-leo";
import {
  DecryptPermission,
  WalletAdapterNetwork,
} from "@demox-labs/aleo-wallet-adapter-base";
// Default styles that can be overridden by your app require("@demox-labs/aleo-wallet-adapter-reactui/styles.css");
export const Wallet: FC = () => {   const wallets = useMemo(     () => [       new LeoWalletAdapter({         appName: "Leo Demo App",       }),     ],     []   );
return (     <WalletProvider       wallets={wallets}       decryptPermission={DecryptPermission.UponRequest}       network={WalletAdapterNetwork.Localnet}       autoConnect     >       <WalletModalProvider>         // Your app's components go here       </WalletModalProvider>     </WalletProvider>   ); };

✍🏻Signing

import { WalletNotConnectedError } from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import { LeoWalletAdapter } from "@demox-labs/aleo-wallet-adapter-leo";
import React, { FC, useCallback } from "react";
export const SignMessage: FC = () => {   const { wallet, publicKey } = useWallet();
const onClick = useCallback(async () => {     if (!publicKey) throw new WalletNotConnectedError();
const message = "a message to sign";
const bytes = new TextEncoder().encode(message);     const signatureBytes = await (       wallet?.adapter as LeoWalletAdapter     ).signMessage(bytes);     const signature = new TextDecoder().decode(signatureBytes);     alert("Signed message: " + signature);   }, [wallet, publicKey]);
return (     <button onClick={onClick} disabled={!publicKey}>       Sign message     </button>   ); };

🔓Decrypting

import { WalletNotConnectedError } from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const DecryptMessage: FC = () => {   const { publicKey, decrypt } = useWallet();
const onClick = async () => {     const cipherText = "record....";     if (!publicKey) throw new WalletNotConnectedError();     if (decrypt) {       const decryptedPayload = await decrypt(cipherText);       alert("Decrypted payload: " + decryptedPayload);     }   };
return (     <button onClick={onClick} disabled={!publicKey}>       Decrypt message     </button>   ); };

🗂️Requesting Records

import { WalletNotConnectedError } from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const RequestRecords: FC = () => {   const { publicKey, requestRecords } = useWallet();
const onClick = async () => {     const program = "credits.aleo";     if (!publicKey) throw new WalletNotConnectedError();     if (requestRecords) {       const records = await requestRecords(program);       console.log("Records: " + records);     }   };
return (     <button onClick={onClick} disabled={!publicKey}>       Request Records     </button>   ); };

📡Requesting Transactions

import {
  Transaction,
  WalletAdapterNetwork,
  WalletNotConnectedError
} from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const RequestTransaction: FC = () => {   const { publicKey, requestTransaction, transactionStatus, transitionViewKeys } = useWallet();
const onClick = async () => {     if (!publicKey) throw new WalletNotConnectedError();
// The record here is an output from the Requesting Records above     const record = '{"id":"0f27d86a-1026-4980-9816-bcdce7569aa4","program_id":"credits.aleo","microcredits":"200000","spent":false,"data":{}}'     // Note that the inputs must be formatted in the same order as the Aleo program function expects, otherwise it will fail     const inputs = [JSON.parse(record), "aleo1kf3dgrz9...", ${amount}u64];     const fee = 35_000; // This will fail if fee is not set high enough
const aleoTransaction = Transaction.createTransaction(       publicKey,       WalletAdapterNetwork.Testnet,       'credits.aleo',       'transfer',       inputs,       fee     );
if (requestTransaction) {       // Returns a transaction Id, that can be used to check the status. Note this is not the on-chain transaction id       const transactionId = await requestTransaction(aleoTransaction);
// Optional: Request the transaction status to check if the transaction has succeeded or failed       // This can take some time to update and finalize on-chain so it's recommended to be polled in a loop       const transactionStatus = await transactionStatus(transactionId);
// Optional: Request the transition view keys for a specific transaction       // This requires the on-chain history permission       cosnt transitionViewKeys = await transitionViewKeys(transactionId);     }   };
return (     <button onClick={onClick} disabled={!publicKey}>       Request Transaction     </button>   ); };

💻Deploying Programs

import {
  Deployment,
  WalletAdapterNetwork,
  WalletNotConnectedError
} from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const DeployProgram: FC = () => {   const { publicKey, requestDeploy } = useWallet();
const onClick = async () => {     if (!publicKey) throw new WalletNotConnectedError();
const program =        program hello.aleo;       function main:         input r0 as u32.public;         input r1 as u32.private;         add r0 r1 into r2;         output r2 as u32.private;     ;     const fee = 4835000; // This will fail if fee is not set high enough
const aleoDeployment = new Deployment(       publicKey,       WalletAdapterNetwork.Testnet,       program,       fee     );
if (requestTransaction) {       // Returns a transaction Id, that can be used to check the status. Note this is not the on-chain transaction id       await requestDeploy(aleoDeployment);     }   };
return (     <button onClick={onClick} disabled={!publicKey}>       Deploy Program     </button>   ); };

🗂️Requesting Record Plaintexts

This requires the OnChainHistory permission

import { WalletNotConnectedError } from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const RequestRecordPlaintexts: FC = () => {   const { publicKey, requestRecordPlaintexts } = useWallet();
const onClick = async () => {     const program = "credits.aleo";     if (!publicKey) throw new WalletNotConnectedError();     if (requestRecordPlaintexts) {       const records = await requestRecordPlaintexts(program);       console.log("Records: " + records);     }   };
return (     <button onClick={onClick} disabled={!publicKey}>       Request Records Plaintexts     </button>   ); };

🗂️Requesting Transaction History

This requires the OnChainHistory permission

import { WalletNotConnectedError } from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const RequestRecords: FC = () => {   const { publicKey, requestTransactionHistory } = useWallet();
const onClick = async () => {     const program = "credits.aleo";     if (!publicKey) throw new WalletNotConnectedError();     if (requestTransactionHistory) {       const transactions = await requestTransactionHistory(program);       console.log("Transactions: " + transactions);     }   };
return (     <button onClick={onClick} disabled={!publicKey}>       Request Records Transaction History     </button>   ); };

Subscribing to Events

import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import { LeoWalletAdapter } from "@demox-labs/aleo-wallet-adapter-leo";
import React, { FC, useEffect } from "react";
export const SubscribeToEvent: FC = () => {   const { wallet } = useWallet();
const handleAccountChange = useCallback(() => {     // Handle account change, reconnect   }, [wallet]);
useEffect(() => {     (wallet?.adapter as LeoWalletAdapter).on('accountChange', handleAccountChange);     // Removes event listener during component teardown     return () => {       (wallet?.adapter as LeoWalletAdapter).off('accountChange', handleAccountChange);     }   }, [wallet, publicKey]);
return (     // Component   ); };