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

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/

• Puzzle Wallet:

https://puzzle.online/

• FoxWallet:

https://foxwallet.com/

• Soter Wallet:

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

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

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

• Aleo Discord

• Aleo Website

• List of Aleo and Leo code and resourses

Prepared by Colliseum

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

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/

• Puzzle Wallet:

https://puzzle.online/

• FoxWallet:

https://foxwallet.com/

• Soter Wallet:

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

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

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

• Aleo Discord

• Aleo Website

• List of Aleo and Leo code and resourses

Prepared by Colliseum