@txnlab/use-wallet 2.0.0-alpha.5 → 2.0.0

package/README.md

@@ -1,10 +1,15 @@
-# @txnlab/use-wallet
+![](use-wallet-banner.png)
+
+# UseWallet v2
 
 `@txnlab/use-wallet` is a React library that provides a simplified, consistent interface for integrating multiple Algorand wallets into your decentralized applications (dApps).
 
+[![npm version](https://badge.fury.io/js/%40txnlab%2Fuse-wallet.svg)](https://badge.fury.io/js/%40txnlab%2Fuse-wallet)
+![License](https://img.shields.io/github/license/TxnLab/use-wallet)
+
 ## Overview
 
-With the `use-wallet`'s hooks and utility functions, you can:
+With UseWallet's hooks and utility functions, you can:
 
 - Easily add or remove wallet support with a few lines of code
 - Configure each wallet provider as needed for your application
@@ -14,7 +19,7 @@ With the `use-wallet`'s hooks and utility functions, you can:
 
 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.
 
-This library supports most Algorand wallet providers, including Defly, Pera, Daffi, and Exodus (see [Supported Wallet Providers](#supported-wallet-providers) for the full list).
+UseWallet supports most Algorand wallet providers, including Defly, Pera, Daffi, and Exodus (see [Supported Wallet Providers](#supported-wallet-providers) for the full list).
 
 Version 2.x introduces [WalletConnect 2.0 support](#walletconnect-20-support).
 
@@ -84,7 +89,7 @@ npm install @blockshake/defly-connect @perawallet/connect @daffiwallet/connect
 
 In the root of your app, initialize the `WalletProvider` with the `useInitializeProviders` hook.
 
-This example initializes `useWallet` with 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.
+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.
 
 ```jsx
 import React from 'react'
@@ -363,7 +368,7 @@ The promise will resolve to an object containing the transaction `id` and the [`
 
 ## Checking Connection Status
 
-The `isActive` and `isReady` properties can be used to check the status of the wallet providers. The `isActive` property determines whether or not an account is currently active. The `isReady` property indicates whether `use-wallet` has mounted and successfully read the connection status from the providers.
+The `isActive` and `isReady` properties can be used to check the status of the wallet providers. The `isActive` property determines whether or not an account is currently active. The `isReady` property indicates whether client has mounted and successfully read the connection status from the wallet providers.
 
 These properties are useful when setting up client side access restrictions, for example, by redirecting a user if no wallet provider `isActive`, as shown below.
 
@@ -411,7 +416,7 @@ useEffect(() => {
 - Documentation - https://docs.walletconnect.com/
 - WalletConnect Cloud - https://cloud.walletconnect.com/
 - Web3Modal - https://web3modal.com/
-- Install dependency - `npm install @web3modal/sign-html`
+- Install dependency - `npm install @walletconnect/modal-sign-html`
 
 ### Exodus Wallet
 
@@ -441,15 +446,15 @@ Support for these wallets will be removed in a future release.
 
 The `useInitializeProviders` hook accepts a configuration object with the following properties:
 
-| Key                    | Type                                  | Default Value                          |
-| ---------------------- | ------------------------------------- | -------------------------------------- |
-| providers              | `Array<ProviderDef>`                  | _required_                             |
-| nodeConfig.network     | `string \| undefined`                 | `'mainnet'`                            |
-| nodeConfig.nodeServer  | `string \| undefined`                 | `'https://mainnet-api.algonode.cloud'` |
-| nodeConfig.nodeToken   | `string \| undefined`                 | `''`                                   |
-| nodeConfig.nodePort    | `string \| number \| undefined`       | `443`                                  |
-| nodeConfig.nodeHeaders | `Record<string, string> \| undefined` |                                        |
-| algosdkStatic          | `typeof algosdk \| undefined`         |                                        |
+| Key                    | Type                                                                                                     | Default Value                          |
+| ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| providers              | `Array<ProviderDef>`                                                                                     | _required_                             |
+| nodeConfig.network     | `string \| undefined`                                                                                    | `'mainnet'`                            |
+| nodeConfig.nodeServer  | `string \| undefined`                                                                                    | `'https://mainnet-api.algonode.cloud'` |
+| nodeConfig.nodeToken   | `string \| algosdk.AlgodTokenHeader \| algosdk.CustomTokenHeader \| algosdk.BaseHTTPClient \| undefined` | `''`                                   |
+| nodeConfig.nodePort    | `string \| number \| undefined`                                                                          | `443`                                  |
+| nodeConfig.nodeHeaders | `Record<string, string> \| undefined`                                                                    |                                        |
+| algosdkStatic          | `typeof algosdk \| undefined`                                                                            |                                        |
 
 ### Provider Definitions
 
@@ -500,7 +505,7 @@ const providers = await initializeProviders({
 
 ### Algosdk Static Import
 
-By default, `use-wallet` dynamically imports the `algosdk` peer dependency installed in your app, to reduce bundle size.
+By default, the providers dynamically import the `algosdk` peer dependency installed in your app, to reduce bundle size.
 
 Some React frameworks, like [Remix](https://remix.run/), do not support dynamic imports. To get around this, you can set the optional `algosdkStatic` root property to the imported `algosdk` module.
 
@@ -533,7 +538,7 @@ import { PROVIDER_ID, WalletProvider, useInitializeProviders } from '@txnlab/use
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { PeraWalletConnect } from '@perawallet/connect'
 import { DaffiWalletConnect } from '@daffiwallet/connect'
-import { Web3ModalSign } from '@web3modal/sign-html'
+import { WalletConnectModalSign } from '@walletconnect/modal-sign-html'
 
 export default function App() {
   const providers = useInitializeProviders({
@@ -543,7 +548,7 @@ export default function App() {
       { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
       {
         id: PROVIDER_ID.WALLETCONNECT,
-        clientStatic: Web3ModalSign,
+        clientStatic: WalletConnectModalSign,
         clientOptions: {
           projectId: '<YOUR_PROJECT_ID>',
           metadata: {
@@ -553,7 +558,7 @@ export default function App() {
             icons: ['https://walletconnect.com/walletconnect-logo.png']
           },
           modalOptions: {
-            theme: 'dark'
+            themeMode: 'dark'
           }
         }
       },
@@ -578,13 +583,13 @@ export default function App() {
 
 ## WalletConnect 2.0 Support
 
-`use-wallet` v2 introduces support for WalletConnect 2.0. This is a major upgrade to the WalletConnect protocol, and introduces a number of breaking changes for app developers.
+UseWallet v2 introduces support for WalletConnect 2.0. This is a major upgrade to the WalletConnect protocol, and introduces a number of breaking changes for app developers.
 
-However, Algorand apps with `use-wallet` will be able to support the new protocol with minimal effort:
+However, Algorand apps with UseWallet will be able to support the new protocol with minimal effort:
 
 1. **Obtain a project ID** - You will need to obtain a project ID from [WalletConnect Cloud](https://cloud.walletconnect.com/). This is a simple process, and there is no waiting period. Every app will need its own unique project ID.
 
-2. **Install client library** - Install `@web3modal/sign-html` and set `clientStatic` to the imported `Web3ModalSign` module.
+2. **Install client library** - Install `@walletconnect/modal-sign-html` and set `clientStatic` to the imported `WalletConnectModalSign` module.
 
 3. **Required options** - Set the required `clientOptions` as shown below
 
@@ -593,7 +598,7 @@ const providers = useInitializeProviders({
   providers: [
     {
       id: PROVIDER_ID.WALLETCONNECT,
-      clientStatic: Web3ModalSign,
+      clientStatic: WalletConnectModalSign,
       clientOptions: {
         projectId: '<YOUR_PROJECT_ID>',
         metadata: {
@@ -679,15 +684,16 @@ See [Provider Configuration](#provider-configuration) for more details.
 
 ### shouldShowSignTxnToast
 
-Pera Connect and Defly Connect both have a `shouldShowSignTxnToast` option that is set to `true` by default. `use-wallet` v1 set this to `false` by default, and required setting the option back to `true` to achieve the libraries' default behavior.
+Pera Connect, Defly Connect and Daffi Connect share a `shouldShowSignTxnToast` option that is set to `true` by default. UseWallet v1 set these to `false` by default, and required setting the option back to `true` to achieve the libraries' default behavior.
 
-In v2 this option is set to `true` by default. If your app has this option explicitly set you can remove it from your configuration. If you wish to disable the toast(s), you must now explicitly set the option to `false`.
+In v2 this option is set to `true` by default. If your app has this option set to `true` you can remove it from your configuration. If you wish to disable the toast(s), you must now explicitly set the option to `false`.
 
 ```jsx
 const providers = useInitializeProviders({
   providers: [
     { id: PROVIDER_ID.DEFLY, clientOptions: { shouldShowSignTxnToast: false } },
-    { id: PROVIDER_ID.PERA, clientOptions: { shouldShowSignTxnToast: false } }
+    { id: PROVIDER_ID.PERA, clientOptions: { shouldShowSignTxnToast: false } },
+    { id: PROVIDER_ID.DAFFI, clientOptions: { shouldShowSignTxnToast: false } }
     // other providers...
   ]
 })
@@ -695,10 +701,10 @@ const providers = useInitializeProviders({
 
 ### WalletConnect peer dependencies
 
-The WalletConnect provider now supports WalletConnect 2.0. To continue supporting this provider, or to add support to your application, you must install the `@web3modal/sign-html` package.
+The WalletConnect provider now supports WalletConnect 2.0. To continue supporting this provider, or to add support to your application, you must install the `@walletconnect/modal-sign-html` package.
 
 ```bash
-npm install @web3modal/sign-html
+npm install @walletconnect/modal-sign-html
 ```
 
 The peer dependencies for WalletConnect 1.x should be uninstalled.
@@ -723,7 +729,7 @@ yarn install
 yarn dev
 ```
 
-To develop against a local version of `use-wallet` in your application, do the following:
+To develop against a local version of `@txnlab/use-wallet` in your application, do the following:
 
 ### Build the library