Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/demox-labs/aleo-wallet-adapter
Modular TypeScript wallet adapters and components for Aleo applications.
https://github.com/demox-labs/aleo-wallet-adapter
aleo blockchain crypto cryptocurrency react typescript wallet
Last synced: about 1 month ago
JSON representation
Modular TypeScript wallet adapters and components for Aleo applications.
- Host: GitHub
- URL: https://github.com/demox-labs/aleo-wallet-adapter
- Owner: demox-labs
- License: mit
- Created: 2022-09-21T20:08:23.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-09T02:41:50.000Z (3 months ago)
- Last Synced: 2024-10-06T21:08:08.375Z (about 1 month ago)
- Topics: aleo, blockchain, crypto, cryptocurrency, react, typescript, wallet
- Language: TypeScript
- Homepage:
- Size: 818 KB
- Stars: 81
- Watchers: 9
- Forks: 40
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-aleo - Leo Wallet Adapter SDK - A SDK for integrating with the Leo wallet (Applications / Wallets)
- awesome-aleo - Leo Wallet Adapter SDK - A SDK for integrating with the Leo wallet (Applications / Wallets)
README
# Wallet Adapter for Aleo Apps
Modular TypeScript wallet adapters and components for Aleo applications.
- [Demo](https://demo.leo.app)
- [Base Docs](https://github.com/demox-labs/aleo-wallet-adapter/blob/main/packages/core/base/docs/modules.md)
- [React Docs](https://github.com/demox-labs/aleo-wallet-adapter/blob/main/packages/core/react/docs/modules.md)
- [React UI Docs](https://github.com/demox-labs/aleo-wallet-adapter/blob/main/packages/ui/docs/modules.md)
- [Leo Adapter Docs](https://github.com/demox-labs/aleo-wallet-adapter/blob/main/packages/wallets/leo/docs/modules.md)
This is a quick setup guide with examples of how to add Wallet Adapter to a React-based Aleo app.
## Quick Setup (using React UI)
### 📲Install
Install these dependencies:
```shell
npm install --save \
@demox-labs/aleo-wallet-adapter-base \
@demox-labs/aleo-wallet-adapter-react \
@demox-labs/aleo-wallet-adapter-reactui \
@demox-labs/aleo-wallet-adapter-leo \
react
```
### 🛠️Setup
```tsx
import React, { FC, useMemo } from "react";
import { WalletProvider } from "@demox-labs/aleo-wallet-adapter-react";
import { WalletModalProvider } from "@demox-labs/aleo-wallet-adapter-reactui";
import { LeoWalletAdapter } from "@demox-labs/aleo-wallet-adapter-leo";
import {
DecryptPermission,
WalletAdapterNetwork,
} from "@demox-labs/aleo-wallet-adapter-base";
// Default styles that can be overridden by your app
require("@demox-labs/aleo-wallet-adapter-reactui/styles.css");
export const Wallet: FC = () => {
const wallets = useMemo(
() => [
new LeoWalletAdapter({
appName: "Leo Demo App",
}),
],
[]
);
return (
// Your app's components go here
);
};
```
### ✍🏻Signing
```tsx
import { WalletNotConnectedError } from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import { LeoWalletAdapter } from "@demox-labs/aleo-wallet-adapter-leo";
import React, { FC, useCallback } from "react";
export const SignMessage: FC = () => {
const { wallet, publicKey } = useWallet();
const onClick = useCallback(async () => {
if (!publicKey) throw new WalletNotConnectedError();
const message = "a message to sign";
const bytes = new TextEncoder().encode(message);
const signatureBytes = await (
wallet?.adapter as LeoWalletAdapter
).signMessage(bytes);
const signature = new TextDecoder().decode(signatureBytes);
alert("Signed message: " + signature);
}, [wallet, publicKey]);
return (
Sign message
);
};
```
### 🔓Decrypting
```tsx
import { WalletNotConnectedError } from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const DecryptMessage: FC = () => {
const { publicKey, decrypt } = useWallet();
const onClick = async () => {
const cipherText = "record....";
if (!publicKey) throw new WalletNotConnectedError();
if (decrypt) {
const decryptedPayload = await decrypt(cipherText);
alert("Decrypted payload: " + decryptedPayload);
}
};
return (
Decrypt message
);
};
```
### 🗂️Requesting Records
```tsx
import { WalletNotConnectedError } from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const RequestRecords: FC = () => {
const { publicKey, requestRecords } = useWallet();
const onClick = async () => {
const program = "credits.aleo";
if (!publicKey) throw new WalletNotConnectedError();
if (requestRecords) {
const records = await requestRecords(program);
console.log("Records: " + records);
}
};
return (
Request Records
);
};
```
### 📡Requesting Transactions
```tsx
import {
Transaction,
WalletAdapterNetwork,
WalletNotConnectedError
} from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const RequestTransaction: FC = () => {
const { publicKey, requestTransaction } = useWallet();
const onClick = async () => {
if (!publicKey) throw new WalletNotConnectedError();
// The record here is an output from the Requesting Records above
const record = `'{"id":"0f27d86a-1026-4980-9816-bcdce7569aa4","program_id":"credits.aleo","microcredits":"200000","spent":false,"data":{}}'`
// Note that the inputs must be formatted in the same order as the Aleo program function expects, otherwise it will fail
const inputs = [JSON.parse(record), "aleo1kf3dgrz9...", `${amount}u64`];
const fee = 35_000; // This will fail if fee is not set high enough
const aleoTransaction = Transaction.createTransaction(
publicKey,
WalletAdapterNetwork.Testnet,
'credits.aleo',
'transfer',
inputs,
fee
);
if (requestTransaction) {
// Returns a transaction Id, that can be used to check the status. Note this is not the on-chain transaction id
await requestTransaction(aleoTransaction);
}
};
return (
Request Transaction
);
};
```
### 💻Deploying Programs
```tsx
import {
Deployment,
WalletAdapterNetwork,
WalletNotConnectedError
} from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const DeployProgram: FC = () => {
const { publicKey, requestDeploy } = useWallet();
const onClick = async () => {
if (!publicKey) throw new WalletNotConnectedError();
const program = `
program hello.aleo;
function main:
input r0 as u32.public;
input r1 as u32.private;
add r0 r1 into r2;
output r2 as u32.private;
`;
const fee = 4_835_000; // This will fail if fee is not set high enough
const aleoDeployment = new Deployment(
publicKey,
WalletAdapterNetwork.Testnet,
program,
fee
);
if (requestTransaction) {
// Returns a transaction Id, that can be used to check the status. Note this is not the on-chain transaction id
await requestDeploy(aleoDeployment);
}
};
return (
Deploy Program
);
};
```
### 🗂️Requesting Record Plaintexts
This requires the `OnChainHistory` permission
```tsx
import { WalletNotConnectedError } from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const RequestRecordPlaintexts: FC = () => {
const { publicKey, requestRecordPlaintexts } = useWallet();
const onClick = async () => {
const program = "credits.aleo";
if (!publicKey) throw new WalletNotConnectedError();
if (requestRecordPlaintexts) {
const records = await requestRecordPlaintexts(program);
console.log("Records: " + records);
}
};
return (
Request Records Plaintexts
);
};
```
### 🗂️Requesting Transaction History
This requires the `OnChainHistory` permission
```tsx
import { WalletNotConnectedError } from "@demox-labs/aleo-wallet-adapter-base";
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import React, { FC, useCallback } from "react";
export const RequestRecords: FC = () => {
const { publicKey, requestTransactionHistory } = useWallet();
const onClick = async () => {
const program = "credits.aleo";
if (!publicKey) throw new WalletNotConnectedError();
if (requestTransactionHistory) {
const transactions = await requestTransactionHistory(program);
console.log("Transactions: " + transactions);
}
};
return (
Request Records Transaction History
);
};
```
### Subscribing to Events
```tsx
import { useWallet } from "@demox-labs/aleo-wallet-adapter-react";
import { LeoWalletAdapter } from "@demox-labs/aleo-wallet-adapter-leo";
import React, { FC, useEffect } from "react";
export const SubscribeToEvent: FC = () => {
const { wallet } = useWallet();
const handleAccountChange = useCallback(() => {
// Handle account change, reconnect
}, [wallet]);
useEffect(() => {
(wallet?.adapter as LeoWalletAdapter).on('accountChange', handleAccountChange);
// Removes event listener during component teardown
return () => {
(wallet?.adapter as LeoWalletAdapter).off('accountChange', handleAccountChange);
}
}, [wallet, publicKey]);
return (
// Component
);
};
```