@txnlab/use-wallet 2.1.1 → 2.1.3

package/README.md

@@ -138,19 +138,19 @@ 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 DeflyWalletConnect = (await import('@blockshake/defly-connect')).DeflyWalletConnect
+  return DeflyWalletConnect
+}
 
 const getDynamicPeraWalletConnect = async () => {
-  const PeraWalletConnect = (await import("@perawallet/connect")).PeraWalletConnect;
-  return PeraWalletConnect;
-};
+  const PeraWalletConnect = (await import('@perawallet/connect')).PeraWalletConnect
+  return PeraWalletConnect
+}
 
 const getDynamicDaffiWalletConnect = async () => {
-  const DaffiWalletConnect = (await import("@daffiwallet/connect")).DaffiWalletConnect;
-  return DaffiWalletConnect;
-};
+  const DaffiWalletConnect = (await import('@daffiwallet/connect')).DaffiWalletConnect
+  return DaffiWalletConnect
+}
 
 export default function App() {
   const providers = useInitializeProviders({
@@ -170,7 +170,6 @@ 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:
@@ -335,14 +334,10 @@ Here is an example of a signing and sending simple pay transaction using `signTr
 ```jsx
 import React from 'react'
 import algosdk from 'algosdk'
-import {
-  useWallet,
-  DEFAULT_NODE_BASEURL,
-  DEFAULT_NODE_TOKEN,
-  DEFAULT_NODE_PORT
-} from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet'
+import { NODE_BASEURL, NODE_TOKEN, NODE_PORT } from '@/constants'
 
-const algodClient = new algosdk.Algodv2(DEFAULT_NODE_TOKEN, DEFAULT_NODE_BASEURL, DEFAULT_NODE_PORT)
+const algodClient = new algosdk.Algodv2(NODE_TOKEN, NODE_BASEURL, NODE_PORT)
 
 export default function Transact() {
   const { activeAddress, signTransactions, sendTransactions } = useWallet()
@@ -558,6 +553,25 @@ const providers = useInitializeProviders({
 })
 ```
 
+The node configuration must match the network your app's algod client is connected to. The recommended approach is to define the node configuration variables as constants and pass them to both the `useInitializeProviders` hook and the `algosdk.Algodv2` constructor.
+
+```jsx
+import algosdk from 'algosdk'
+import { NODE_BASEURL, NODE_TOKEN, NODE_PORT } from '@/constants'
+
+const algodClient = new algosdk.Algodv2(NODE_TOKEN, NODE_BASEURL, NODE_PORT)
+
+const providers = useInitializeProviders({
+  providers: [...],
+  nodeConfig: {
+    network: 'testnet',
+    nodeServer: NODE_BASEURL,
+    nodeToken: NODE_TOKEN,
+    nodePort: NODE_PORT
+  }
+})
+```
+
 ### Algosdk Static Import
 
 By default, the providers dynamically import the `algosdk` peer dependency installed in your app, to reduce bundle size.

package/dist/cjs/index.js

@@ -2800,11 +2800,16 @@ var allClients = {
 };
 
 const initializeProviders = async (providers, nodeConfig, algosdkStatic) => {
-    const initializedProviders = {};
     if (typeof window === 'undefined') {
         debugLog('Window object is not available, skipping initialization');
-        return initializedProviders;
-    }
+        return {};
+    }
+    // Set all providers to null to preserve order
+    const initializedProviders = providers.reduce((acc, provider) => {
+        const providerId = typeof provider === 'string' ? provider : provider.id;
+        acc[providerId] = null;
+        return acc;
+    }, {});
     const { network = DEFAULT_NETWORK, nodeServer = DEFAULT_NODE_BASEURL, nodePort = DEFAULT_NODE_PORT, nodeToken = DEFAULT_NODE_TOKEN } = nodeConfig || {};
     const initClient = async (provider) => {
         const { id, ...providerConfig } = typeof provider === 'string' ? { id: provider } : provider;