Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xBacked-DAO/algorand-wallet-select
A single Web3 / Algorand provider solution for all Wallets
https://github.com/xBacked-DAO/algorand-wallet-select
algorand blockchain crypto defi react web3
Last synced: 2 months ago
JSON representation
A single Web3 / Algorand provider solution for all Wallets
- Host: GitHub
- URL: https://github.com/xBacked-DAO/algorand-wallet-select
- Owner: xBacked-DAO
- License: mit
- Created: 2021-10-07T02:28:52.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T15:33:26.000Z (over 1 year ago)
- Last Synced: 2024-01-23T21:44:26.891Z (5 months ago)
- Topics: algorand, blockchain, crypto, defi, react, web3
- Language: JavaScript
- Homepage:
- Size: 6.25 MB
- Stars: 21
- Watchers: 5
- Forks: 5
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-algorand - Algorand Wallet Selector - JS Library to allow user to choose which wallet to use for transaction signing (Wallets)
README
# Algorand Wallet Select
![](./assets/wallet-selector-demo.gif)
A single Web3 / Algorand provider solution for all Wallets.
## Introduction
AlgorandWalletSelect is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration.
By default AlgorandWalletSelect Library supports injected providers like (AlgoSigner, MyAlgoWallet, etc) and WalletConnect (OfficialAlgorandWallet, etc). You can also easily configure the library to support more wallets.
## Projects using AlgorandWalletSelect
Open a PR to add your project to the list!
- [xBacked DAO](https://xbacked.io/)
## Usage
1. Install the AlgorandWalletSelect NPM package
```bash
npm install --save @xbacked-dao/algorand-wallet-select
# OR
yarn add @xbacked-dao/algorand-wallet-select
```2. Add algorand-wallet-select to your Dapp as follows
```javascript
import { WalletSelector } from "algorand-wallet-select";const returnWallet = async (data) => {
if (!!data) {
console.log(data.connector.check());
console.log(await data.connector.connect());
console.log(data.connector.provider);
}
};const Template = (args) => (
Algorand Wallet Selector
Built with 💚 by xBacked
);
```## Optional: Configuring wallets to display
Simply do the following to only display the MyAlgo wallet. Valid `wallets` are `myalgowallet`, `algosigner` and `walletconnect`.
```javascript
const Template = (args) => (
Algorand Wallet Selector
Built with 💚 by xBacked
);
```## Adding a new provider
Do you want to add your provider to Web3Modal?
Note: This flow will be simplified in future updates.
All logic for supported providers lives inside `src/wallets/providers`.
1. You must add a new connection definition to `src/wallets/providers` that matches the following signature (using MyAlgo as an example):
```javascript
// Import the package.
import MyAlgo from '@randlabs/myalgo-connect';// Default export defining the instance and the standard interface.
const ConnectToMyAlgo = () => {
// Construct any required state for the connector.
const myAlgoWallet = new MyAlgo();// Must return the following object.
return {
// Instance defined above.
provider: myAlgoWallet,
// Asynchronous function wrapping the connection method for the provider.
connect: async () => await myAlgoWallet.connect(),
// An optional function to check connection status if possible.
check: () => (false),
};
}export default ConnectToMyAlgo;
```
2. Add new connector to the default export in `src/wallets/providers`:
```javascript
import algosigner from "./algosigner";
import myalgowallet from "./myalgowallet";
import walletconnect from "./walletconnect";
// Import here and export below.
import myNewWallet from "./myNewWallet";export {
algosigner,
myalgowallet,
walletconnect,
myNewWallet,
};
```3. Add a `.png` or `.svg` as a logo for the added wallet connector to `src/wallets/logos`
4. Depending on the type of connector, create an entry in either the `src/wallets/injected.js` file or the `src/wallets/providers.js` file.
5. After testing that the logo is displaying correctly, and you are able to return the valid instance create a pull request to this repository!
## LicenseMIT