> For the complete documentation index, see [llms.txt](https://aleo-hooks.gitbook.io/aleo-hooks/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aleo-hooks.gitbook.io/aleo-hooks/getting-started.md).

# 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:

<pre class="language-tsx"><code class="lang-tsx">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 (
    &#x3C;<a data-footnote-ref href="#user-content-fn-1">WalletProvider </a>wallets={wallets} autoConnect>
      &#x3C;div className="App">
        &#x3C;UseConnect>&#x3C;/UseConnect>
      &#x3C;/div>
    &#x3C;/WalletProvider>
  );
}

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

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

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

export default App;
</code></pre>

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!

[^1]: ```typescript
    export interface WalletProviderProps {
        children: ReactNode;
        wallets: Adapter[];
        decryptPermission?: DecryptPermission;
        network?: WalletAdapterNetwork;
        autoConnect?: boolean;
        onError?: (error: WalletError) => void;
        localStorageKey?: string;
    }
    ```