Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add universal wallet docs #16

Merged
merged 2 commits into from
Feb 4, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 21 additions & 9 deletions documentation/contribute/00_contribution_guidelines.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,33 @@ For more details, visit the **Concepts** section to explore Aleo’s architectur
### Proposing an ARC
Have ideas on development standards or protocol improvements? Follow these steps to propose an Aleo Request for Comments (ARC):
To create a new ARC proposal:

1. Open a [Github Discussion](https://github.com/AleoHQ/ARCs/discussions/categories/arcs) with your proposal using template [ARC-0000](https://github.com/ProvableHQ/ARCs/blob/master/arc-0000) and an available ARC number.
1. Open a [Github Discussion](https://github.com/AleoHQ/ARCs/discussions/categories/arcs) with your proposal using template [ARC-0000](https://github.com/ProvableHQ/ARCs/tree/master/arc-0000) and an available ARC number.
2. File a [Pull Request](https://github.com/AleoHQ/ARCs/pulls) with your proposal in a new subdirectory.

Once a proposal is up:
To update an existing ARC:
1. File a pull request with your changes.
2. If the change is significant, you may be asked to open a new ARC entirely.

#### Progressing an ARC

An ARC will start as a "Draft" and progress through the following stages:

1. The community will discuss and review the proposal. A maintainer will monitor the ARC and change its status to "voting" once it is ready.
a. ARCs will be prioritized by number of votes and whether or not a prototype exists.
b. ARCs will be discussed during certain community calls. Proposers will have the opportunity to join and participate in the discussion.
Once a proposal is up:
1. The community will discuss and review the proposal. A maintainer will monitor the ARC and change its status to "Active" once it is ready.
* ARCs will be prioritized by number of votes and whether a prototype exists.
* ARCs will be discussed during certain community calls. Proposers will have the opportunity to join and participate in the discussion.
* Up to this point, the ARC can be withdrawn by the proposer or withdrawn by the maintainers if there is no activity for a long time.
2. A governor or a team member of the Aleo Network Foundation (ANF) will create a formal proposal on Aleo governance (https://vote.aleo.org/) and initiate the voting process.
3. The community will vote on the proposal for approval.
4. If the proposal is accepted, its status will be updated to "approved" and the associated pull request will be merged into the ARCs repo. If the proposal is rejected, the status will be reverted to "draft".
3. The community will vote on the proposal for approval.
4. If the proposal is accepted, its status will be updated to "Accepted" and the associated pull request will be merged into the ARCs repo. If the proposal is rejected, the status will be reverted to "Draft".
5. The relevant parties should complete the implementation. Updates can be made to the ARC as needed through new PRs, which do not need votes.
6. Once the implementation is finalized, the status will change from "approved" to "completed."
6. Once the implementation is finalized, the status will change from "Accepted" to "Final" or "Living", depending on the nature of the proposal. The associated discussion will be closed.

A proposal can be "Deprecated" if it is replaced by a new proposal.

#### Statuses

See [ARC-0001](https://github.com/ProvableHQ/ARCs/tree/master/arc-0001) for a detailed explanation of the statuses.

### Contributing to Aleo
Every component that forms Aleo is open-sourced and welcomes contributions of all kinds including [this documentation](./01_documentation_contribute.md). Each component has its own specific contribution guidelines, which are provided below for easy reference:
Expand Down
158 changes: 158 additions & 0 deletions documentation/guides/wallets/00_universal_wallet_adapter.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
---
id: universal_wallet_adapter
title: Universal Wallet Adapter
sidebar_label: Universal Wallet Adapter
---

While different wallets provide their own adapter SDKs, applications typically want to support multiple wallets to give users flexibility in choosing their preferred wallet. The Aleo community has developed a universal wallet adapter hosted [here](https://github.com/arcane-finance-defi/aleo-wallet-adapters), which is largely based on [Demox Labs' Leo Wallet Adapter](https://docs.leo.app/aleo-wallet-adapter).

This guide demonstrates how to implement the universal wallet adapter in React applications.

## Installation

First, install the required packages:

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

## Setup

To use the wallet adapter, wrap your app with both `WalletProvider` and `WalletModalProvider` components. These provide the wallet functionality and UI context respectively.

The `WalletProvider` accepts the following [properties](https://docs.leo.app/aleo-wallet-adapter/packages/core/react/docs/interfaces/walletproviderprops) (`wallets` is required):

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

You can import `DecryptPermission` and `WalletAdapterNetwork` types from `@demox-labs/aleo-wallet-adapter-base`.

## Wallet Configuration

When creating wallet adapters, you can configure them with the following options:

```tsx
export interface LeoWalletAdapterConfig {
appName?: string;
isMobile?: boolean;
mobileWebviewUrl?: string;
}

export interface FoxWalletAdapterConfig {
appName?: string;
isMobile?: boolean;
mobileWebviewUrl?: string;
}

export interface SoterWalletAdapterConfig {
appName?: string;
}

export interface PuzzleWalletAdapterConfig {
appName?: string;
appIconUrl?: string;
appDescription?: string;
programIdPermissions: Partial<Record<WalletAdapterNetwork, string[]>>;
}
```

## Implementation Example

Here's a complete example showing how to set up the wallet adapter:

```tsx
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', 'dApp_1_import.aleo', 'dApp_1_import_2.aleo'],
[WalletAdapterNetwork.TestnetBeta]: ['dApp_1_test.aleo', 'dApp_1_test_import.aleo', 'dApp_1_test_import_2.aleo']
},
appName: 'Aleo app',
appDescription: 'A privacy-focused DeFi app',
appIconUrl: ''
}),
new FoxWalletAdapter({
appName: 'Aleo app',
}),
new SoterWalletAdapter({
appName: 'Aleo app',
})
],
[]
);

return (
<WalletProvider
wallets={wallets}
decryptPermission={DecryptPermission.UponRequest}
network={WalletAdapterNetwork.MainnetBeta}
autoConnect
>
<WalletModalProvider>
{children}
</WalletModalProvider>
</WalletProvider>
);
}
```

## Using the Wallet Hook

After setup, you can use the `useWallet` hook from `@demox-labs/aleo-wallet-adapter-react`. The hook provides the following interface:

```tsx
export interface WalletContextState {
autoConnect: boolean;
wallets: Wallet[];
wallet: Wallet | null;
publicKey: string | null;
connecting: boolean;
connected: boolean;
disconnecting: boolean;
select(walletName: WalletName): void;
connect(decryptPermission: DecryptPermission, network: WalletAdapterNetwork, programs?: string[]): Promise<void>;
disconnect(): Promise<void>;
signMessage(message: Uint8Array): Promise<Uint8Array>;
decrypt(cipherText: string, tpk?: string, programId?: string, functionName?: string, index?: number): Promise<string>;
requestRecords(program: string): Promise<any[]>;
requestTransaction(transaction: AleoTransaction): Promise<string>;
requestExecution(transaction: AleoTransaction): Promise<string>;
requestBulkTransactions(transactions: AleoTransaction[]): Promise<string[]>;
requestDeploy(deployment: AleoDeployment): Promise<string>;
transactionStatus(transactionId: string): Promise<string>;
getExecution(transactionId: string): Promise<string>;
requestRecordPlaintexts(program: string): Promise<any[]>;
}
```

For detailed examples of using these methods, please refer to the [Demox Labs Leo Wallet documentation](https://docs.leo.app/aleo-wallet-adapter).