diff --git a/.eslintrc.js b/.eslintrc.js index 236c1708..a43f6950 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -52,6 +52,12 @@ module.exports = { env: { node: true } + }, + { + files: ['*.js'], + env: { + jest: true + } } ], settings: { diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 00000000..fbb64201 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,25 @@ +name: Release & Publish to NPM +on: workflow_dispatch +jobs: + release: + runs-on: ubuntu-latest + steps: + - name: Checkout source code + uses: actions/checkout@v2 + with: + fetch-depth: 0 + - name: Install dependencies + run: yarn install --frozen-lockfile + - name: Initialize Git user + run: | + git config --global user.email "drichar@gmail.com" + git config --global user.name "GitHub Actions" + - name: Initialize NPM config + run: npm config set //registry.npmjs.org/:_authToken $NPM_TOKEN + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + - name: Run release + run: yarn release --ci + env: + GITHUB_TOKEN: ${{ secrets.USE_WALLET_RELEASE }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.gitignore b/.gitignore index a1de8ca6..74d7485a 100644 --- a/.gitignore +++ b/.gitignore @@ -167,3 +167,6 @@ storybook-static/ # VS Code *.code-workspace + +# NPM config +.npmrc diff --git a/.release-it.json b/.release-it.json new file mode 100644 index 00000000..0bb2fb7a --- /dev/null +++ b/.release-it.json @@ -0,0 +1,25 @@ +{ + "git": { + "requireBranch": "main", + "commitMessage": "chore: release v${version}", + "tagName": "v${version}" + }, + "hooks": { + "before:init": ["git pull", "yarn pre-release"] + }, + "npm": { + "publish": true + }, + "github": { + "release": true + }, + "plugins": { + "@release-it/conventional-changelog": { + "infile": "CHANGELOG.md", + "preset": "angular" + } + }, + "publishConfig": { + "registry": "https://registry.npmjs.org" + } +} diff --git a/.storybook/main.js b/.storybook/main.js index 3581c45b..6c15543b 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,7 +1,18 @@ +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin') + module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'], core: { builder: 'webpack5' + }, + webpackFinal: async (config) => { + config.resolve.plugins = [ + ...(config.resolve.plugins || []), + new TsconfigPathsPlugin({ + extensions: config.resolve.extensions + }) + ] + return config } } diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..982221a6 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,235 @@ +## [2.1.2](https://github.com/txnlab/use-wallet/compare/v2.1.1...v2.1.2) (2023-09-12) + +### Changes + +- Update documentation to show recommended approach for node configuration ([#110](https://github.com/TxnLab/use-wallet/pull/110)) ([b50c564](https://github.com/TxnLab/use-wallet/commit/b50c564d8ef6e6fb8c207848737851b4f3b8d64d)) + +# [2.1.1](https://github.com/txnlab/use-wallet/compare/v2.1.0...v2.1.1) (2023-08-11) + +### Bug Fixes + +- Deduplicate dependencies ([#105](https://github.com/TxnLab/use-wallet/pull/105)) ([de17bbe](https://github.com/TxnLab/use-wallet/commit/de17bbec85c3fc6dc16225f9eb276a5536252cd3)) + +# [2.1.0](https://github.com/txnlab/use-wallet/compare/v2.0.0...v2.1.0) (2023-08-07) + +### Features + +- enable dynamic import of wallet libraries ([#100](https://github.com/txnlab/use-wallet/pull/100)) ([57f38f3](https://github.com/txnlab/use-wallet/commit/57f38f3a748fd2f126b87f5fd0368ce175490c7e)) + +# [2.0.0](https://github.com/TxnLab/use-wallet/compare/v1.3.1...v2.0.0) (2023-06-27) + +### Features + +- Improved initializeProviders API ([#66](https://github.com/TxnLab/use-wallet/pull/66)) +- WalletConnect 2.0 support ([#83](https://github.com/TxnLab/use-wallet/pull/83)) +- Debug mode ([#89](https://github.com/TxnLab/use-wallet/pull/89)) + +### Changes + +- Add unit tests ([#61](https://github.com/TxnLab/use-wallet/pull/61)) + +### Breaking Changes + +- The function used to initialize providers in version 1.x is no longer exported by the library. Use the `useInitializeProviders` hook or manually construct the wallet providers map that gets passed to the `WalletProvider`. +- There is no longer a "default" provider configuration. All providers to be supported must be explicitly defined. +- Wallet provider peer dependencies (SDK/client libraries) are no longer dynamically imported behind the scenes. The modules must be statically imported and passed to the `clientStatic` property when initializing the provider. + +## [1.3.3](https://github.com/txnlab/use-wallet/compare/v1.3.2...v1.3.3) (2023-06-24) + +### Changes + +- Upgrade `@blockshake/defly-connect` to v1.1.5 ([32c7bba](https://github.com/TxnLab/use-wallet/commit/32c7bbaadf432adf11bb802e46d4f2372d54a000)) + +## [1.3.2](https://github.com/txnlab/use-wallet/compare/v1.3.1...v1.3.2) (2023-06-21) + +### Changes + +- Upgrade `@blockshake/defly-connect` to v1.1.3 ([b25cbeb](https://github.com/TxnLab/use-wallet/commit/b25cbeb0f2046f29826e635fa5ac11f18d9c1156)) + +## [1.3.1](https://github.com/txnlab/use-wallet/compare/v1.3.0...v1.3.1) (2023-06-20) + +### Features + +- Handle nested transaction arrays in `signTransactions` ([#79](https://github.com/TxnLab/use-wallet/pull/79)) + +### Changes + +- Update `signTransactions` type signature in `useWallet` hook + +# [1.3.0](https://github.com/txnlab/use-wallet/compare/v1.2.12...v1.3.0) (2023-04-28) + +### Features + +- Daffi Wallet support ([#68](https://github.com/TxnLab/use-wallet/pull/68)) +- Provider dependencies are optional ([#72](https://github.com/TxnLab/use-wallet/pull/72)) + +## [1.2.12](https://github.com/txnlab/use-wallet/compare/v1.2.11...v1.2.12) (2023-04-24) + +### Bug Fixes + +- Add missing unsigned txns to group in Defly client ([#69](https://github.com/TxnLab/use-wallet/pull/69)) + +## [1.2.11](https://github.com/txnlab/use-wallet/compare/v1.2.10...v1.2.11) (2023-03-29) + +### Changes + +- Fixes jest tests, initial CI pipeline, adding commitizen, starter config for automation tools ([#58](https://github.com/TxnLab/use-wallet/pull/58)) + +## [1.2.10](https://github.com/txnlab/use-wallet/compare/v1.2.9...v1.2.10) (2023-03-26) + +### Bug Fixes + +- Fixes dependency resolution errors on `npm install` for local development ([aea17fc](https://github.com/txnlab/use-wallet/commit/aea17fc16c8c6a7cb5fc7eff2536b882f462358c)) + +## [1.2.9](https://github.com/txnlab/use-wallet/compare/v1.2.8...v1.2.9) (2023-03-23) + +### Bug Fixes + +- Fix return type of `groupTransactionsBySender` in base client ([07ae640](https://github.com/txnlab/use-wallet/commit/07ae64096fbb37ed2216dc2ed85cbb4e5247e6a2)) + +## [1.2.8](https://github.com/txnlab/use-wallet/compare/v1.2.7...v1.2.8) (2023-03-23) + +### Changes + +- Upgrade @perawallet/connect to v1.2.1 ([496000c](https://github.com/txnlab/use-wallet/commit/496000c4258a3e639b1677b2839852a81a1d410f)) + +## [1.2.7](https://github.com/txnlab/use-wallet/compare/v1.2.6...v1.2.7) (2023-03-17) + +### Features + +- Migration to AlgoSigner v1.10.0, which adds support for rekeyed signing ([fbff1ee](https://github.com/txnlab/use-wallet/commit/fbff1eef35b8525c389309d0500ab20cfcd27dbd)) + +### Changes + +- ESLint added and source files formatted following the new ESLint/Prettier config ([77b8f03](https://github.com/txnlab/use-wallet/commit/77b8f03fe9fa2236de0c8d6a3c1000c333b50a10)) + +## [1.2.6](https://github.com/txnlab/use-wallet/compare/v1.2.5...v1.2.6) (2023-03-14) + +### Bug Fixes + +- Handle varying payload lengths in WalletConnect `signTransactions` method ([79a9228](https://github.com/txnlab/use-wallet/commit/79a92286a86d8760a925e7ba4bee92069a01d2d2)) + +## [1.2.5](https://github.com/TxnLab/use-wallet/compare/v1.2.4...v1.2.5) (2023-03-14) + +### Bug Fixes + +- Fix handling signed transactions in WalletConnect client ([c973514](https://github.com/txnlab/use-wallet/commit/c9735148ac9a083dfef10ba0c6e3271011030c32)) + +## [1.2.4](https://github.com/TxnLab/use-wallet/compare/v1.2.3...v1.2.4) (2023-03-11) + +### Changes + +- Only reconnect to active providers in `reconnectProviders` ([0a48316](https://github.com/txnlab/use-wallet/commit/0a48316923c0f9652fee15aca1b571b4f3ccb16f)) + +## [1.2.3](https://github.com/txnlab/use-wallet/compare/v1.2.2...v1.2.3) (2023-03-06) + +### Changes + +- Upgrade `@perawallet/connect` to `v1.1.1`, which adds Ledger support for Pera Web Wallet + +## [1.2.2](https://github.com/txnlab/use-wallet/compare/v1.2.1...v1.2.2) (2023-02-07) + +### Changes + +- Upgrade `algosdk` so that polyfills for `Buffer` and `Crypto` globals are no longer necessary. + +## [1.2.1](https://github.com/txnlab/use-wallet/compare/v1.2.0...v1.2.1) (2023-01-25) + +### Features + +- Support signing transaction groups from multiple accounts with Pera + +### Bug Fixes + +- Fill in MyAlgo logo so that it shows up in dark backgrounds ([#42](https://github.com/txnlab/use-wallet/issues/42)) ([d982c95](https://github.com/txnlab/use-wallet/commit/d982c958d6f664258c5331aeff9fe69975d6bfc1)) + +### Changes + +- Remove deprecated functions + +# [1.2.0](https://github.com/TxnLab/use-wallet/compare/v1.1.6...v1.2.0) (2023-01-19) + +### Features + +- adding algoworld swapper to `used by` ([#29](https://github.com/txnlab/use-wallet/issues/29)) ([1bca5ab](https://github.com/txnlab/use-wallet/commit/1bca5ab15d72076e5430b200f178ee76a7b8c7d9)) +- adding new mnemonic wallet provider for e2e testing ([#28](https://github.com/txnlab/use-wallet/issues/28)) ([ca38100](https://github.com/txnlab/use-wallet/commit/ca3810013a16aac89d4c05f7e3bee6f5dd765344)) + +### Bug Fixes + +- adding method to use cached wallet id if available, otherwise grab it from the kmd ([#40](https://github.com/txnlab/use-wallet/issues/40)) ([b7c0cf2](https://github.com/txnlab/use-wallet/commit/b7c0cf237eeaca53189b6ec6cc02950cc82de5b2)) + +## [1.1.6](https://github.com/TxnLab/use-wallet/compare/v1.1.5...v1.1.6) (2023-01-16) + +### Changes + +- Change provider initialization failure from console error to warning. + +## [1.1.5](https://github.com/TxnLab/use-wallet/releases/tag/v1.1.5) (2023-01-16) + +### Features + +- Add `status`, `isReady` and `isActive` properties to check status of the providers. + +## [1.0.5](https://github.com/TxnLab/use-wallet/compare/v1.0.4...v1.0.5) (2022-12-29) + +### Features + +- Add the `indexesToSign` option to `signTransactions` to optionally specify which indexes of the group should be signed. +- Add the `returnGroup` parameter to `signTransactions` to specify if all transactions that were passed should be returned, or just the ones signed by the provider. + +### Bug Fixes + +- Fix the `signer` method so that it accepts both signed and unsigned transactions. + +## [1.0.4](https://github.com/TxnLab/use-wallet/compare/v1.0.3...v1.0.4) (2022-12-15) + +### Features + +- Enable multiple WalletConnect sessions (e.g., Pera and Defly) to be active at the same time. + +### Bug Fixes + +- Fix hydration errors that occur with SSR frameworks like Next.js. +- Prevent the providers from being initialized during SSR, as many of them rely on client side globals like `window` and `Audio`. + +## [1.0.3](https://github.com/TxnLab/use-wallet/compare/v1.0.2...v1.0.3) (2022-12-13) + +### Bug Fixes + +- Prevent KMD from prompting password on app mount. +- Fix a bug where default KMD configuration wasn't valid. +- Fix a bug where providers would not disconnect if the session was killed in the wallet app (affected Defly and Pera) + +## [1.0.2](https://github.com/txnlab/use-wallet/compare/v1.0.1...v1.0.2) (2022-12-07) + +### Features + +- remove 'audio hack' for Pera ([8dc3a2d](https://github.com/txnlab/use-wallet/commit/8dc3a2d228edbf12e45ad0465a3c355583b4ac1c)) + +## [1.0.1](https://github.com/txnlab/use-wallet/compare/v0.1.23...v1.0.1) (2022-12-07) + +### Bug Fixes + +- decoding unsigned AlgoSigner txn as signed ([#18](https://github.com/txnlab/use-wallet/issues/18)) ([8f892ab](https://github.com/txnlab/use-wallet/commit/8f892abec6828ffe03333c4ed3500c47ed3ac504)) + +# [1.0.0](https://github.com/txnlab/use-wallet/commit/b0ef449e48e71ee4a0d3f8bc401402c930e62ecc) (2022-12-07) + +### Features + +- The provider clients are now passed to child components using React Context, allowing for more configuration options. +- Provider clients provide support for both dynamic and static imports, allowing `use-wallet` to be used with frameworks that don't support dynamic imports. + +### Breaking Changes + +- To setup the `providers`, the `initializeProviders` function should be used, and passed to the `WalletProviders` context provider in the application root. +- The provider ID, name, and icon are now part of the `metadata` property of `providers`. +- Using environment variables to configure the clients is deprecated. + +## [0.1.23](https://github.com/TxnLab/use-wallet/commits/v0.1.23) (2022-11-16) + +### Features + +- Dynamically import wallet provider dependencies and reduce bundle size ([#9](https://github.com/TxnLab/use-wallet/pull/9)) +- Use first and last valid rounds to determine how many rounds to wait to confirm transactions ([#13](https://github.com/TxnLab/use-wallet/pull/13)) +- Handle signing transactions for multiple connected accounts ([#14](https://github.com/TxnLab/use-wallet/pull/14)) +- Upgrade to Zustand v4 ([#11](https://github.com/TxnLab/use-wallet/pull/11)) diff --git a/README.md b/README.md index ce0279bc..be6ca0fb 100644 --- a/README.md +++ b/README.md @@ -1,117 +1,278 @@ -# @TxnLab/use-wallet +![](use-wallet-banner.png) -React hooks for using Algorand compatible wallets with web applications. Flexible and extensible, `use-wallet` supports a variety of wallets and connection protocols. It also provides a simple interface for connecting, disconnecting, switching between accounts and signing transactions. +# UseWallet v2 -## Supported Providers +`@txnlab/use-wallet` is a React library that provides a simplified, consistent interface for integrating multiple Algorand wallets into your decentralized applications (dApps). -- [Pera](https://perawallet.app/) -- [MyAlgo](https://wallet.myalgo.com/home) -- [Defly](https://defly.app) -- [AlgoSigner](https://www.purestake.com/technology/algosigner) -- [Exodus](https://www.exodus.com) -- [WalletConnect](https://walletconnect.com) -- [Daffi](https://www.daffi.me/) -- [KMD](https://developer.algorand.org/docs/rest-apis/kmd) +[![npm version](https://badge.fury.io/js/@txnlab%2Fuse-wallet.svg)](https://badge.fury.io/js/@txnlab%2Fuse-wallet) +![License](https://img.shields.io/github/license/TxnLab/use-wallet) -## Demo +## Overview -Preview a basic implementation in [Storybook](https://txnlab.github.io/use-wallet) or check out [this example](https://github.com/gabrielkuettel/use-wallet-example). +With UseWallet's hooks and utility functions, you can: -## Quick Start +- Easily add or remove wallet support with a few lines of code +- Configure each wallet provider as needed for your application +- Allow users to easily switch between active accounts and wallet providers +- Sign and send transactions +- Restore sessions for returning users -⚠️ If you're using `create-react-app` and `webpack 5` (most newer React projects), you will need to install polyfills. Follow [these directions](#webpack-5). +It provides an abstraction layer that unifies the initialization, connection, and transaction signing logic, eliminating the need to interact with each wallet's individual API. -### Yarn +UseWallet supports most Algorand wallet providers, including Defly, Pera, Daffi, and Exodus (see [Supported Wallet Providers](#supported-wallet-providers) for the full list). -```bash -yarn add @txnlab/use-wallet -``` +Version 2.x introduces [WalletConnect 2.0 support](#walletconnect-20-support). + +## Table of Contents + +- [Live Examples](#live-examples) +- [Requirements](#requirements) +- [Installation](#installation) +- [Initializing Providers](#initializing-providers) +- [The `useWallet` Hook](#the-usewallet-hook) +- [Type Definitions](#type-definitions) +- [Connect Menu](#connect-menu) +- [Displaying Account Details](#displaying-account-details) +- [Signing and Sending Transactions](#signing-and-sending-transactions) +- [Checking Connection Status](#checking-connection-status) +- [Supported Wallet Providers](#supported-wallet-providers) +- [Legacy Wallet Support](#legacy-wallet-support) +- [Provider Configuration](#provider-configuration) + - [Provider Definitions](#provider-definitions) + - [Node Configuration](#node-configuration) + - [Algosdk Static Import](#algosdk-static-import) + - [Full Configuration Example](#full-configuration-example) +- [WalletConnect 2.0 Support](#walletconnect-20-support) + - [Defly Wallet (iOS) beta](#defly-wallet-ios-beta) + - [Pera Wallet (Android) beta](#pera-wallet-android-beta) +- [Migration Guide](#migration-guide) +- [Local Development](#local-development) +- [Support](#support) +- [Used By](#used-by) +- [License](#license) + +## Live Examples + +**Storybook demo** - https://txnlab.github.io/use-wallet + +**Next.js example** + +- Demo - https://next-use-wallet.vercel.app/ +- Code - https://github.com/TxnLab/next-use-wallet -Install peer dependencies (if needed) +**NFDomains** - https://app.nf.domains/ + +## Requirements + +Since this library uses [React Hooks](https://react.dev/reference/react), your app will need to be using React 16.8 or higher. + +## Installation + +Commands shown below use `npm install` but you can use `yarn add` or `pnpm add` instead. + +First, install the library ```bash -yarn add algosdk @blockshake/defly-connect @perawallet/connect @randlabs/myalgo-connect @walletconnect/client algorand-walletconnect-qrcode-modal @json-rpc-tools/utils @daffiwallet/connect +npm install @txnlab/use-wallet ``` -### NPM +If you haven't already, install the Algorand JS SDK ```bash -npm install @txnlab/use-wallet +npm install algosdk ``` -Install peer dependencies (if needed) +Finally, install any peer dependencies for the wallets you wish to support. For example, to support Defly, Pera, and Daffi wallets: ```bash -npm install algosdk @blockshake/defly-connect @perawallet/connect @randlabs/myalgo-connect @walletconnect/client algorand-walletconnect-qrcode-modal @json-rpc-tools/utils @daffiwallet/connect +npm install @blockshake/defly-connect @perawallet/connect @daffiwallet/connect ``` -### Set up the Wallet Provider +## Initializing Providers + +In the root of your app, initialize the `WalletProvider` with the `useInitializeProviders` hook. + +This example initializes Defly, Pera, Daffi and Exodus wallet providers. The default node configuration (mainnet via [AlgoNode](https://algonode.io/api/)) is used. See [Provider Configuration](#provider-configuration) for more options. + +You can initialize your providers in two ways: + +1. **Static Import** - This is the standard way of importing modules in JavaScript. In this method, the import statement is at the top of the file and the modules are imported when the file loads. This is done by passing the clientStatic property. + +2. **Dynamic Import** - With the dynamic import() syntax, you can load modules on demand by calling a function. This can greatly reduce the initial load time of your app by only loading modules when they are needed. This is done by passing the getDynamicClient property which must be a function that returns a promise that resolves to the client. + +Note: For each provider, either clientStatic or getDynamicClient must be passed, not both. + +Here is an example of both: + +### Static Import Example + +```jsx +import React from 'react' +import { WalletProvider, useInitializeProviders, PROVIDER_ID } from '@txnlab/use-wallet' +import { DeflyWalletConnect } from '@blockshake/defly-connect' +import { PeraWalletConnect } from '@perawallet/connect' +import { DaffiWalletConnect } from '@daffiwallet/connect' + +export default function App() { + const providers = useInitializeProviders({ + providers: [ + { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect }, + { id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect }, + { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect }, + { id: PROVIDER_ID.EXODUS } + ] + }) + + return ( + +
{/* ... */}
+
+ ) +} +``` -In `app.js`, initialize the Wallet Provider so that the `useWallet` hook can be used in the child components, and use the `reconnectProviders` function to restore sessions for users returning to the app. +### Dynamic Import Example ```jsx import React from 'react' -import { reconnectProviders, initializeProviders, WalletProvider } from '@txnlab/use-wallet' +import { WalletProvider, useInitializeProviders, PROVIDER_ID } from '@txnlab/use-wallet' -const walletProviders = initializeProviders() +const getDynamicDeflyWalletConnect = async () => { + const DeflyWalletConnect = (await import('@blockshake/defly-connect')).DeflyWalletConnect + return DeflyWalletConnect +} + +const getDynamicPeraWalletConnect = async () => { + const PeraWalletConnect = (await import('@perawallet/connect')).PeraWalletConnect + return PeraWalletConnect +} + +const getDynamicDaffiWalletConnect = async () => { + const DaffiWalletConnect = (await import('@daffiwallet/connect')).DaffiWalletConnect + return DaffiWalletConnect +} export default function App() { - // Reconnect the session when the user returns to the dApp - React.useEffect(() => { - reconnectProviders(walletProviders) - }, []) + const providers = useInitializeProviders({ + providers: [ + { id: PROVIDER_ID.DEFLY, getDynamicClient: getDynamicDeflyWalletConnect }, + { id: PROVIDER_ID.PERA, getDynamicClient: getDynamicPeraWalletConnect }, + { id: PROVIDER_ID.DAFFI, getDynamicClient: getDynamicDaffiWalletConnect }, + { id: PROVIDER_ID.EXODUS } + ] + }) + + return ( + +
{/* ... */}
+
+ ) +} +``` - return ... +## The `useWallet` Hook + +The `useWallet` hook is used to access wallet provider and account state, send unsigned transactions to be signed, and send signed transactions to the node from anywhere in your app. It returns an object with the following properties: + +- `providers` - Array of wallet providers that have been initialized (see `Provider` in [Type Definitions](#type-definitions)) +- `activeAccount` - The currently active account in the active provider (see `Account` in [Type Definitions](#type-definitions)) +- `connectedAccounts` - Array of accounts from all connected wallet providers +- `connectedActiveAccounts` - Array of accounts from the active wallet provider +- `activeAddress` - The address of `activeAccount` +- `status`, `isReady`, `isActive` - The current connection status, see [Check connection status](#check-connection-status) +- `signTransactions` - Function that sends unsigned transactions to active wallet provider for signature +- `sendTransactions` - Function that sends signed transactions to the node +- `groupTransactionsBySender` - Utility function that groups transactions by sender address +- `getAddress` - Utility function that returns the address of the `activeAccount` +- `getAccountInfo` - Utility function that fetches `activeAccount` account information from the node +- `getAssets` - Utility function that fetches `activeAccount` asset info/balances from the node +- `signer` - Function used by the [KMD](#kmd-algorand-key-management-daemon) provider to sign transactions + +## Type Definitions + +### `Provider` + +```ts +type Provider = { + accounts: Account[] + isActive: boolean + isConnected: boolean + connect: () => Promise + disconnect: () => Promise + reconnect: () => Promise + setActiveProvider: () => void + setActiveAccount: (account: string) => void + metadata: Metadata } ``` -The `reconnectProviders` function is used to restore session states of wallets that rely on the `WalletConnect` protocol. +Each provider has two connection states: `isConnected` and `isActive`. -By default, all of the supported providers except for `KMD` are returned by `useConnectWallet`. An array can be passed to `initializeProviders` to determine which providers your dApp supports, as shown below. +`isConnected` means that the user has authorized the provider in the app. Multiple providers can be connected at the same time. -```jsx -import { initializeProviders, PROVIDER_ID } from '@txnlab/use-wallet' +`isActive` means that the provider is currently active and will be used to sign and send transactions. -const walletProviders = initializeProviders([PROVIDER_ID.KMD_WALLET, PROVIDER_ID.WALLET_CONNECT]) +### `Account` + +```ts +interface Account { + providerId: PROVIDER_ID + name: string + address: string + authAddr?: string +} ``` -For more configuration options, see [Provider Configuration](#provider-configuration). +The `activeAccount` is the account that will be used to sign and send transactions. -### Connect +To get the currently active wallet provider, read the `providerId` property of `activeAccount`. -Map through the `providers` object to list the providers and enable users to connect. +## Connect Menu + +In your app's UI you will need a menu for the user to `connect` or `disconnect` wallet providers, `setActiveProvider`, and `setActiveAccount`. + +This is a bare-bones example for demonstration purposes. For a styled example, see https://app.nf.domains/ ```jsx import React from 'react' import { useWallet } from '@txnlab/use-wallet' -export default function Connect() { +export default function ConnectMenu() { const { providers, activeAccount } = useWallet() - // Map through the providers. - // Render account information and "connect", "set active", and "disconnect" buttons. - // Finally, map through the `accounts` property to render a dropdown for each connected account. + // 1. Map over `providers` array + // 2. Show the provider name/icon and "Connect", "Set Active", and "Disconnect" buttons + // 3. If active, map `provider.accounts` to render a select menu of connected accounts + return (
{providers?.map((provider) => ( -
+

- + {`${provider.metadata.name} {provider.metadata.name} {provider.isActive && '[active]'}

+
- - +
{provider.isActive && provider.accounts.length && (