Wallet Adapter for Aleo Apps
Modular TypeScript wallet adapters and components for Aleo applications.
This is a quick setup guide with examples of how to add Wallet Adapter to a React-based Aleo app.
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 } = 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
await requestTransaction(aleoTransaction);
}
};
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 = 4_835_000; // 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
);
};Last updated