@txnlab/use-wallet 2.0.0 → 2.1.0

package/README.md

@@ -4,7 +4,7 @@
 
 `@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)
+[![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)
 
 ## Overview
@@ -43,8 +43,11 @@ Version 2.x introduces [WalletConnect 2.0 support](#walletconnect-20-support).
   - [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)
 
@@ -91,6 +94,18 @@ In the root of your app, initialize the `WalletProvider` with the `useInitialize
 
 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'
@@ -99,15 +114,53 @@ 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 }
-      ]
-    }
-  ])
+  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 (
+    <WalletProvider value={providers}>
+      <div className="App">{/* ... */}</div>
+    </WalletProvider>
+  )
+}
+```
+
+### Dynamic Import Example
+
+```jsx
+import React from 'react'
+import { WalletProvider, useInitializeProviders, PROVIDER_ID } from '@txnlab/use-wallet'
+
+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() {
+  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 (
     <WalletProvider value={providers}>
@@ -117,6 +170,7 @@ export default function App() {
 }
 ```
 
+
 ## 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:
@@ -493,7 +547,8 @@ To configure the Algorand node that providers will use to send transactions, you
 \* _Refer to each wallet providers' documentation to see which networks they support._
 
 ```jsx
-const providers = await initializeProviders({
+const providers = useInitializeProviders({
+  providers: [...],
   nodeConfig: {
     network: 'testnet',
     nodeServer: 'https://testnet-api.algonode.cloud',
@@ -614,7 +669,17 @@ const providers = useInitializeProviders({
 })
 ```
 
-**IMPORTANT:** Only wallets that have been upgraded to support WalletConnect 2.0 will be able to connect to your app with this provider.
+While `projectId` and `metadata` are required, you can also set optional `modalOptions` to customize the appearance of the WalletConnect modal. See the [WalletConnect docs](https://docs.walletconnect.com/2.0/web/walletConnectModal/sign/html/options) for more details.
+
+**IMPORTANT:** Wallets must migrate to WalletConnect v2 or they will NOT work with this provider. **The latest versions of Pera Wallet, Defly Wallet, and Daffi Wallet still support WalletConnect v1 ONLY.** Beta versions of these wallets with WalletConnect v2 support are available now:
+
+### Defly Wallet (iOS) beta
+
+iOS users can join the [Defly Wallet (iOS) beta program](https://testflight.apple.com/join/S66wwJpq) for testing WalletConnect v2 support. Android beta coming soon.
+
+### Pera Wallet (Android) beta
+
+Android users can join the [Pera Wallet (Android) beta program](https://forms.gle/m5TJueyJD9f74ieL8) for testing WalletConnect v2 support. Fill out the form and wait for an email with instructions. Form submissions will be checked periodically and added in bulk.
 
 ### "Module not found" errors in Next.js 13
 
@@ -768,12 +833,25 @@ In the root of the `use-wallet` directory, run:
 yarn link react react-dom
 ```
 
+## Support
+
+For questions or technical support, you can reach us in the #use-wallet channel on NFD's Discord: https://discord.gg/w6vSwG5bFK
+
+To report bugs/issues or make a feature request here on GitHub:
+
+- [Create an issue](https://github.com/TxnLab/use-wallet/issues/new)
+- [Create a discussion](https://github.com/TxnLab/use-wallet/discussions/new/choose)
+
 ## Used By
 
-Are you using `@txnlab/use-wallet`? We'd love to include your project here. Let us know! [Twitter](https://twitter.com/NFDomains) | [Discord](https://discord.gg/7XcuMTfeZP) | [Email](mailto:admin@txnlab.dev)
+Are you using `@txnlab/use-wallet`? We'd love to include your project here. Let us know! [Twitter](https://twitter.com/NFDomains) | [Discord](https://discord.gg/w6vSwG5bFK) | [Email](mailto:admin@txnlab.dev)
 
 - [@algoscan/use-wallet-ui](https://github.com/algoscan/use-wallet-ui)
 - [@algoworldnft/algoworld-swapper](https://github.com/algoworldnft/algoworld-swapper)
+- [Algogator](https://algogator.finance/)
+- [Notiboy](https://notiboy.com/)
+- [Rand Drops](https://drops.randgallery.com/drops)
+- [Vestige](https://vestige.fi/)
 
 Full list of [Dependents](https://github.com/TxnLab/use-wallet/network/dependents)
 

package/dist/cjs/index.js

@@ -198,7 +198,7 @@ const createStoreImpl = (createState) => {
     return () => listeners.delete(listener);
   };
   const destroy = () => {
-    if ((undefined && undefined.MODE) !== "production") {
+    if ((undefined ? undefined.MODE : void 0) !== "production") {
       console.warn(
         "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."
       );
@@ -730,7 +730,7 @@ function useStore(api, selector = api.getState, equalityFn) {
   return slice;
 }
 const createImpl = (createState) => {
-  if ((undefined && undefined.MODE) !== "production" && typeof createState !== "function") {
+  if ((undefined ? undefined.MODE : void 0) !== "production" && typeof createState !== "function") {
     console.warn(
       "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
     );
@@ -773,11 +773,11 @@ const devtoolsImpl = (fn, devtoolsOptions = {}) => (set, get, api) => {
   const { enabled, anonymousActionType, store, ...options } = devtoolsOptions;
   let extensionConnector;
   try {
-    extensionConnector = (enabled != null ? enabled : (undefined && undefined.MODE) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
+    extensionConnector = (enabled != null ? enabled : (undefined ? undefined.MODE : void 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
   } catch (e) {
   }
   if (!extensionConnector) {
-    if ((undefined && undefined.MODE) !== "production" && enabled) {
+    if ((undefined ? undefined.MODE : void 0) !== "production" && enabled) {
       console.warn(
         "[zustand devtools middleware] Please install/enable Redux devtools extension"
       );
@@ -831,7 +831,7 @@ const devtoolsImpl = (fn, devtoolsOptions = {}) => (set, get, api) => {
     let didWarnAboutReservedActionType = false;
     const originalDispatch = api.dispatch;
     api.dispatch = (...a) => {
-      if ((undefined && undefined.MODE) !== "production" && a[0].type === "__setState" && !didWarnAboutReservedActionType) {
+      if ((undefined ? undefined.MODE : void 0) !== "production" && a[0].type === "__setState" && !didWarnAboutReservedActionType) {
         console.warn(
           '[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'
         );
@@ -1276,7 +1276,7 @@ const newImpl = (config, baseOptions) => (set, get, api) => {
 };
 const persistImpl = (config, baseOptions) => {
   if ("getStorage" in baseOptions || "serialize" in baseOptions || "deserialize" in baseOptions) {
-    if ((undefined && undefined.MODE) !== "production") {
+    if ((undefined ? undefined.MODE : void 0) !== "production") {
       console.warn(
         "[DEPRECATED] `getStorage`, `serialize` and `deserialize` options are deprecated. Use `storage` option instead."
       );
@@ -1407,13 +1407,19 @@ class PeraWalletClient extends BaseClient {
         icon: ICON$8,
         isWalletConnect: true
     };
-    static async init({ clientOptions, algodOptions, clientStatic, algosdkStatic, network = DEFAULT_NETWORK }) {
+    static async init({ clientOptions, algodOptions, clientStatic, getDynamicClient, algosdkStatic, network = DEFAULT_NETWORK }) {
         try {
             debugLog(`${exports.PROVIDER_ID.PERA.toUpperCase()} initializing...`);
-            if (!clientStatic) {
-                throw new Error('Pera Wallet provider missing required property: clientStatic');
+            let PeraWalletConnect;
+            if (clientStatic) {
+                PeraWalletConnect = clientStatic;
+            }
+            else if (getDynamicClient) {
+                PeraWalletConnect = await getDynamicClient();
+            }
+            else {
+                throw new Error('Pera Wallet provider missing required property: clientStatic or getDynamicClient');
             }
-            const PeraWalletConnect = clientStatic;
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
             const peraWallet = new PeraWalletConnect({
@@ -1564,13 +1570,19 @@ class DaffiWalletClient extends BaseClient {
         icon: ICON$7,
         isWalletConnect: true
     };
-    static async init({ clientOptions, algodOptions, clientStatic, algosdkStatic, network = DEFAULT_NETWORK }) {
+    static async init({ clientOptions, algodOptions, clientStatic, getDynamicClient, algosdkStatic, network = DEFAULT_NETWORK }) {
         try {
             debugLog(`${exports.PROVIDER_ID.DAFFI.toUpperCase()} initializing...`);
-            if (!clientStatic) {
-                throw new Error('Daffi Wallet provider missing required property: clientStatic');
+            let DaffiWalletConnect;
+            if (clientStatic) {
+                DaffiWalletConnect = clientStatic;
+            }
+            else if (getDynamicClient) {
+                DaffiWalletConnect = await getDynamicClient();
+            }
+            else {
+                throw new Error('Daffi Wallet provider missing required property: clientStatic or getDynamicClient');
             }
-            const DaffiWalletConnect = clientStatic;
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
             const daffiWallet = new DaffiWalletConnect({
@@ -1722,13 +1734,19 @@ class MyAlgoWalletClient extends BaseClient {
         icon: ICON$6,
         isWalletConnect: false
     };
-    static async init({ clientOptions, algodOptions, clientStatic, algosdkStatic, network = DEFAULT_NETWORK }) {
+    static async init({ clientOptions, algodOptions, clientStatic, getDynamicClient, algosdkStatic, network = DEFAULT_NETWORK }) {
         try {
             debugLog(`${exports.PROVIDER_ID.MYALGO.toUpperCase()} initializing...`);
-            if (!clientStatic) {
-                throw new Error('MyAlgo Wallet provider missing required property: clientStatic');
+            let MyAlgoConnect;
+            if (clientStatic) {
+                MyAlgoConnect = clientStatic;
+            }
+            else if (getDynamicClient) {
+                MyAlgoConnect = await getDynamicClient();
+            }
+            else {
+                throw new Error('MyAlgo Wallet provider missing required property: clientStatic or getDynamicClient');
             }
-            const MyAlgoConnect = clientStatic;
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
             const myAlgo = new MyAlgoConnect({
@@ -1834,13 +1852,19 @@ class DeflyWalletClient extends BaseClient {
         icon: ICON$5,
         isWalletConnect: true
     };
-    static async init({ clientOptions, algodOptions, clientStatic, algosdkStatic, network = DEFAULT_NETWORK }) {
+    static async init({ clientOptions, algodOptions, clientStatic, getDynamicClient, algosdkStatic, network = DEFAULT_NETWORK }) {
         try {
             debugLog(`${exports.PROVIDER_ID.DEFLY.toUpperCase()} initializing...`);
-            if (!clientStatic) {
-                throw new Error('Defly Wallet provider missing required property: clientStatic');
+            let DeflyWalletConnect;
+            if (clientStatic) {
+                DeflyWalletConnect = clientStatic;
+            }
+            else if (getDynamicClient) {
+                DeflyWalletConnect = await getDynamicClient();
+            }
+            else {
+                throw new Error('Defly Wallet provider missing required property: clientStatic or getDynamicClient');
             }
-            const DeflyWalletConnect = clientStatic;
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
             const deflyWallet = new DeflyWalletConnect({
@@ -2294,11 +2318,18 @@ class WalletConnectClient extends BaseClient {
         icon: ICON$2,
         isWalletConnect: true
     };
-    static async init({ clientOptions, algodOptions, clientStatic, algosdkStatic, network = DEFAULT_NETWORK }) {
+    static async init({ clientOptions, algodOptions, clientStatic, getDynamicClient, algosdkStatic, network = DEFAULT_NETWORK }) {
         try {
             debugLog(`${exports.PROVIDER_ID.WALLETCONNECT.toUpperCase()} initializing...`);
-            if (!clientStatic) {
-                throw new Error('WalletConnect provider missing required property: clientStatic');
+            let Client;
+            if (clientStatic) {
+                Client = clientStatic;
+            }
+            else if (getDynamicClient) {
+                Client = await getDynamicClient();
+            }
+            else {
+                throw new Error('WalletConnect provider missing required property: clientStatic or getDynamicClient');
             }
             if (!clientOptions) {
                 throw new Error('WalletConnect provider missing required property: clientOptions');
@@ -2307,7 +2338,6 @@ class WalletConnectClient extends BaseClient {
                 throw new Error(`WalletConnect only supports Algorand mainnet, testnet, and betanet. "${network}" is not supported.`);
             }
             const chain = ALGORAND_CHAINS[network];
-            const Client = clientStatic;
             // Initialize client
             const client = new Client({
                 ...clientOptions,
@@ -2869,7 +2899,7 @@ function shallow(objA, objB) {
   return true;
 }
 var shallow$1 = (objA, objB) => {
-  if ((undefined && undefined.MODE) !== "production") {
+  if ((undefined ? undefined.MODE : void 0) !== "production") {
     console.warn(
       "[DEPRECATED] Default export is deprecated. Instead use `import { shallow } from 'zustand/shallow'`."
     );