# Building a Universal Wallet Adapter for Aleo dApps

By [Colliseum](https://paragraph.com/@colliseum) · 2025-03-05

---

Hi, I’m Heorhii! Today, I’ll guide you through integrating the **Universal Wallet Adapter** for Aleo applications. This adapter allows your dApp to support multiple wallets seamlessly, giving users the freedom to choose their preferred wallet while maintaining a unified connection experience.

The Aleo community developed this universal adapter, heavily inspired by **Demox Labs’ Leo Wallet Adapter**. Let’s dive in and set it up for a **React-based dApp**.

[https://developer.aleo.org/guides/wallets/universal\_wallet\_adapter](https://developer.aleo.org/guides/wallets/universal_wallet_adapter)

**Why use a Universal Wallet Adapter?**

Many wallets offer their own SDKs, but dApps often need to support **multiple wallets**. Instead of writing separate integrations for each, the **Universal Wallet Adapter** streamlines this process, making it easy to connect different Aleo wallets with minimal configuration.

Supported wallets include:

*   **Leo Wallet** (by Demox Labs):
    

[https://www.leo.app/](https://www.leo.app/)

*   **Puzzle Wallet:**
    

[https://puzzle.online/](https://puzzle.online/)

*   **FoxWallet:**
    

[https://foxwallet.com/](https://foxwallet.com/)

*   **Soter Wallet:**
    

[https://sotertech.io/](https://sotertech.io/)

Let’s get started with the installation!

**1\. Installation.** First, install the required dependencies using npm:

    npm install --save \
        @demox-labs/aleo-wallet-adapter-base \
        @demox-labs/aleo-wallet-adapter-react \
        @demox-labs/aleo-wallet-adapter-reactui \
        aleo-adapters
    

These packages handle wallet connectivity, UI, and interactions with the Aleo network.

**2\. Setting up the Wallet Adapter.** To use the wallet adapter, wrap your app inside `WalletProvider` and `WalletModalProvider`.

*   `WalletProvider`: Manages the connected wallets.
    
*   `WalletModalProvider`: Provides a UI for selecting wallets.
    

[https://docs.leo.app/aleo-wallet-adapter/packages/core/react/docs/interfaces/walletproviderprops](https://docs.leo.app/aleo-wallet-adapter/packages/core/react/docs/interfaces/walletproviderprops)

Here’s an example implementation:

    import { WalletModalProvider } from "@demox-labs/aleo-wallet-adapter-reactui";
    import { WalletProvider } from "@demox-labs/aleo-wallet-adapter-react";
    import { DecryptPermission, WalletAdapterNetwork } from "@demox-labs/aleo-wallet-adapter-base";
    import { useMemo } from "react";
    import { 
      PuzzleWalletAdapter, 
      LeoWalletAdapter, 
      FoxWalletAdapter,
      SoterWalletAdapter 
    } from 'aleo-adapters';
    
    export default function Providers({ children }: { children: React.ReactNode }) {
      const wallets = useMemo(
        () => [
          new LeoWalletAdapter({ appName: 'Aleo app' }),
          new PuzzleWalletAdapter({
            programIdPermissions: {
              [WalletAdapterNetwork.MainnetBeta]: ['dApp_1.aleo'],
              [WalletAdapterNetwork.TestnetBeta]: ['dApp_1_test.aleo']
            },
            appName: 'Aleo app',
            appDescription: 'A privacy-focused dApp',
          }),
          new FoxWalletAdapter({ appName: 'Aleo app' }),
          new SoterWalletAdapter({ appName: 'Aleo app' })
        ],
        []
      );
    
      return (
        <WalletProvider wallets={wallets} network={WalletAdapterNetwork.MainnetBeta} autoConnect>
          <WalletModalProvider>
            {children}
          </WalletModalProvider>
        </WalletProvider>
      );
    }
    

This setup ensures that multiple wallets can be selected and connected easily.

**3\. Adding a Wallet connection button.** To let users connect their wallets effortlessly, import the `WalletMultiButton` component:

    import { WalletMultiButton } from "@demox-labs/aleo-wallet-adapter-reactui";
    import "@demox-labs/aleo-wallet-adapter-reactui/dist/styles.css";
    
    export default function WalletButton() {
      return <WalletMultiButton />;
    }
    

Now, your dApp has a **one-click wallet connection button**!

**4\. Using the Wallet Hook.** Once a user connects their wallet, you can access their account details using the `useWallet` hook:

    import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
    
    const { publicKey, connected, disconnect } = useWallet();
    
    if (connected) {
      console.log("Connected wallet:", publicKey);
    }
    

This hook provides essential wallet functions, including:

*   Connecting & disconnecting
    
*   Signing messages
    
*   Requesting transactions & records
    

For more details, check out the **Demox Labs Leo Wallet documentation**.

[https://docs.leo.app/aleo-wallet-adapter](https://docs.leo.app/aleo-wallet-adapter)

By integrating the **Universal Wallet Adapter**, we simplify multi-wallet support in Aleo dApps, providing users with a **seamless and flexible** experience. Whether they prefer Leo, Puzzle, FoxWallet, or Soter Wallet, this adapter ensures smooth connectivity.

Now, you’re all set to **build privacy-focused Aleo applications** with robust wallet integration. Happy coding!

_To know more about Aleo, join now!_

> *   _Aleo_ [_Twitter_](https://twitter.com/aleohq)
>     
> *   _Aleo_ [_Discord_](https://discord.gg/aleo)
>     
> *   _Aleo_ [_Website_](https://www.aleo.org/)
>     
> *   _List of_ [_Aleo and Leo code and resourses_](https://github.com/howardwu/awesome-aleo#%EF%B8%8F-a-curated-list-of-aleo--leo-code-and-resources-%EF%B8%8F)
>     

Prepared by Colliseum

---

*Originally published on [Colliseum](https://paragraph.com/@colliseum/building-a-universal-wallet-adapter-for-aleo-dapps)*