Aleo Hooks

Aleo Hooks library aims to be a simple to use, yet flexible and reliable wallet-agnostic React hooks library that will simplify developing Aleo React dApps.

React Hooks are functional components that isolate the reusable part from app business logic. Hooks make it easy to reuse stateful logic between components and develop complex dApps.

Live demo and sample code: https://aleo-react-boilerplate.vercel.app/

Telegram discussion and support group: https://t.me/aleohooks

Quick Setup (using React UI)

📲Install

Install hook library:

npm install aleo-hooks

Install adapters to the wallets you want to support:

• Leo Wallet: npm install @demox-labs/aleo-wallet-adapter-leo
• Puzzle: TBD

🛠️Quick start

npx create-react-app aleo_dapp 
cd aleo_dapp

Install hook library:

npm install aleo-hooks

Install adapters to the wallets you want to support:

• Leo Wallet: npm install @demox-labs/aleo-wallet-adapter-leo

Replace code in src/App.js with:

import { useMemo } from "react";
import { WalletProvider, useConnect, useDisconnect } from "aleo-hooks";
import {
  LeoWalletAdapter,
  LeoWalletName,
} from "@demox-labs/aleo-wallet-adapter-leo";

import "./App.css";

function App() {
  const wallets = useMemo(
    () => [new LeoWalletAdapter({ appName: "Create React App" })],
    []
  );

  return (
    <WalletProvider wallets={wallets} autoConnect>
      <div className="App">
        <UseConnect></UseConnect>
      </div>
    </WalletProvider>
  );
}

export const UseConnect = () => {
  const connectHandler = () => connect(LeoWalletName);
  const disconnectHandler = () => disconnect();

  const { connect, connected, connecting, address } = useConnect();
  const { disconnect, disconnecting } = useDisconnect();

  return (
    <div>
      {connected ? (
        <>
          <p>Successfuly connected {address}</p>
          <button disabled={disconnecting} onClick={disconnect}>
            Disconnect
          </button>
        </>
      ) : (
        <>
          <p>The wallet is disconnected</p>
          <button disabled={connecting} onClick={connectHandler}>
            Connect Leo wallet
          </button>
        </>
      )}{" "}
    </div>
  );
};

export default App;

This code will create a blank page with a Connect/Disconnect button for Leo Wallet.

Launch it with:

npm start

and build your next big Aleo dApp!

How to use

Live demo and sample code: https://aleo-react-boilerplate.vercel.app/ Some of the commonly used hooks:

useConnect

The connection flow for the aleo wallets extension goes like this:

import { FC } from 'react'
import { useConnect } from 'aleo-hooks'
import { LeoWalletName } from '@demox-labs/aleo-wallet-adapter-leo'

export const UseConnect: FC = () => {
    const { connect, connected, connecting, error } = useConnect()

    const connectHandler = () => connect(LeoWalletName)

    return (
        <div>
            {connected && <p>Successfuly connected</p>}
            {error && <p>Something went wrong {JSON.stringify(error)}</p>}
            <button disabled={connecting} onClick={connectHandler}>Connect aleo wallet</button>
        </div>
    )
}

useSelect

Use this hook for selecting current Aleo wallet. This hook is required when your frontend supports more than one wallet, e.g. Leo and Puzzle.

import { FC } from 'react'
import { useSelect } from 'aleo-hooks'
import { LeoWalletName } from '@demox-labs/aleo-wallet-adapter-leo'

export const UseSelect: FC = () => {
    const { select } = useSelect()

    const selectHandler = () => select(LeoWalletName)

    return (
        <div>
            <button onClick={selectHandler}>Select Leo wallet</button>
        </div>
    )
}

useDisconnect

Use this hook to disconnect current Aleo wallet:

import { FC } from 'react'
import { useDisconnect } from 'aleo-hooks'

export const UseDisconnect: FC = () => {
    const { disconnect, disconnecting, error } = useDisconnect()

    const disconnectHandler = () => disconnect()

    return (
        <div>
            {error && <p>Something went wrong {JSON.stringify(error)}</p>}
            <button disabled={disconnecting} onClick={disconnectHandler}>disconnect</button>
        </div>
    )
}

useDecrypt

For decrypting ciphered text

import { FC } from 'react'
import { useDecrypt } from 'aleo-hooks'

export const UseDecrypt: FC = () => {
    const { decryptedText, loading, error } = useDecrypt({ cipherText: 'ciphertext1qgqtzwpwj2r0rw0md3zxlnnj9h7azun02f6tdm27u8ywxcsuw4pssp7xsp7edm749l4pd9s47wksc475dkhmjnl7yrzzylgnfyx2kfwkpqlsynj2' })

    return (
        <div>
            {loading && <p>Loading...</p>}
            {error && <p>Something went wrong {JSON.stringify(error)}</p>}
            {decryptedText && <p>Decrypted text: {decryptedText}</p>}
        </div>
    )
}

useViewKey

If adapter supporting fetching a view key, this hook returns a plaintext view key.

import { FC } from 'react'
import { useViewKey } from 'aleo-hooks'

export const UseViewKey: FC = () => {
    const { viewKey, requestViewKey, error, loading } = useViewKey()

    return (
        <div>
            {loading && <p>Loading...</p>}
            {error && <p>Something went wrong {JSON.stringify(error)}</p>}
            {viewKey && <p>View key: {viewKey}</p>}
            <button disabled={loading} onClick={requestViewKey}>Request view key</button>
        </div>
    )
}