Leo Wallet Docs
Home
  • Wallet Adapter for Aleo Apps
  • packages
    • ui
      • docs
        • functions
          • useWalletModal
        • interfaces
          • WalletIconProps
          • WalletModalContextState
          • WalletModalProps
          • WalletModalProviderProps
        • variables
          • WalletConnectButton
          • WalletDisconnectButton
          • WalletIcon
          • WalletModal
          • WalletModalButton
          • WalletModalContext
          • WalletModalProvider
          • WalletMultiButton
    • core
      • base
        • docs
          • classes
            • BaseMessageSignerWalletAdapter
            • BaseSignerWalletAdapter
            • BaseWalletAdapter
            • Deployment
            • EventEmitter
            • Transaction
            • Transition
            • WalletAccountError
            • WalletConfigError
            • WalletConnectionError
            • WalletDecryptionError
            • WalletDecryptionNotAllowedError
            • WalletDisconnectedError
            • WalletDisconnectionError
            • WalletError
            • WalletKeypairError
            • WalletLoadError
            • WalletNotConnectedError
            • WalletNotReadyError
            • WalletNotSelectedError
            • WalletPublicKeyError
            • WalletRecordsError
            • WalletSendTransactionError
            • WalletSignMessageError
            • WalletSignTransactionError
            • WalletTimeoutError
            • WalletTransactionError
            • WalletWindowBlockedError
            • WalletWindowClosedError
          • enumerations
            • DecryptPermission
            • WalletAdapterNetwork
            • WalletReadyState
          • functions
            • scopePollingDetectionStrategy
          • interfaces
            • AleoDeployment
            • AleoTransaction
            • AleoTransition
            • MessageSignerWalletAdapterProps
            • SignerWalletAdapterProps
            • WalletAdapterEvents
            • WalletAdapterProps
          • type-aliases
            • Adapter
            • MessageSignerWalletAdapter
            • SignerWalletAdapter
            • SupportedTransactionVersions
            • TransactionOrVersionedTransaction
            • WalletAdapter
            • WalletName
          • @demox-labs
            • namespaces
              • EventEmitter
                • interfaces
                  • EventEmitterStatic
                  • ListenerFn
                • type-aliases
                  • ArgumentMap
                  • EventArgs
                  • EventListener
                  • EventNames
                  • ValidEventTypes
                • variables
                  • EventEmitter
      • react
        • docs
          • functions
            • useLocalStorage
            • useWallet
          • interfaces
            • Wallet
            • WalletContextState
            • WalletProviderProps
          • variables
            • WalletContext
            • WalletProvider
    • wallets
      • leo
        • docs
          • classes
            • LeoWalletAdapter
          • interfaces
            • LeoWallet
            • LeoWalletAdapterConfig
            • LeoWalletEvents
            • LeoWindow
          • variables
            • LeoWalletName
Powered by GitBook
On this page
  • Quick Setup (using React UI)
  • 📲Install
  • 🛠️Setup
  • ✍🏻Signing
  • 🔓Decrypting
  • 🗂️Requesting Records
  • 📡Requesting Transactions
  • 💻Deploying Programs
  • 🗂️Requesting Record Plaintexts
  • 🗂️Requesting Transaction History
  • Subscribing to Events

Was this helpful?

Wallet Adapter for Aleo Apps

Nextpackages

Last updated 10 days ago

Was this helpful?

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, 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 = 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
  );
};
Demo
Base Docs
React Docs
React UI Docs
Leo Adapter Docs