
Understanding the four Legion Score pillars
What each score represents, how it is calculated, and what it takes to reach the top

Concrete Vaults: the most accessible path to real yield in DeFi
A beginner-friendly introduction to automated DeFi strategies powered by Concrete.

Deploying your first Solidity Contract on Arc Testnet
Deploying your first Solidity Contract on Arc Testnet

Subscribe to Colliseum

Understanding the four Legion Score pillars
What each score represents, how it is calculated, and what it takes to reach the top

Concrete Vaults: the most accessible path to real yield in DeFi
A beginner-friendly introduction to automated DeFi strategies powered by Concrete.

Deploying your first Solidity Contract on Arc Testnet
Deploying your first Solidity Contract on Arc Testnet
<100 subscribers
<100 subscribers


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):
Puzzle Wallet:
FoxWallet:
Soter Wallet:
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):
Puzzle Wallet:
FoxWallet:
Soter Wallet:
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
Share Dialog
Share Dialog
No activity yet