Getting Started

Jump start your Aleo dApp from scratch

Create a react app:

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 (
    <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!