@txnlab/use-wallet 2.0.0-alpha.2 → 2.0.0-alpha.4

package/README.md

@@ -511,8 +511,7 @@ import algosdk from 'algosdk'
 import { PROVIDER_ID, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { PeraWalletConnect } from '@perawallet/connect'
-import SignClient from '@walletconnect/sign-client'
-import { WalletConnectModal } from '@walletconnect/modal'
+import { Web3ModalSign } from '@web3modal/sign-html'
 
 export default function App() {
   const providers = useInitializeProviders({
@@ -521,8 +520,7 @@ export default function App() {
       { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
       {
         id: PROVIDER_ID.WALLETCONNECT,
-        clientStatic: SignClient,
-        modalStatic: WalletConnectModal,
+        clientStatic: Web3ModalSign,
         clientOptions: {
           projectId: '<YOUR_PROJECT_ID>',
           metadata: {
@@ -554,7 +552,7 @@ However, Algorand apps with `use-wallet` will be able to support the new protoco
 
 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 peer dependencies** - Install `@walletconnect/sign-client` and `@walletconnect/modal`.
+2. **Install peer dependency** - Install `@web3modal/sign-html`.
 
 3. **Update provider configuration** - You will need to use a provider object to initialize WalletConnect, and pass your `clientOptions` as shown below
 
@@ -659,10 +657,10 @@ const providers = useInitializeProviders({
 
 ### WalletConnect provider
 
-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/sign-client` and `@walletconnect/modal` packages.
+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.
 
 ```bash
-npm install @walletconnect/sign-client @walletconnect/modal
+npm install @web3modal/sign-html
 ```
 
 The peer dependencies for WalletConnect 1.x should be uninstalled.

package/dist/cjs/index.js

@@ -955,6 +955,11 @@ const useHydratedWalletStore = ((selector, compare) => {
     return hydrated ? store : selector(emptyState);
 });
 
+const useDebugStore = create((set) => ({
+    debug: false,
+    setDebug: (debug) => set({ debug })
+}));
+
 const ClientContext = require$$0.createContext(null);
 var clientStore = ClientContext.Provider;
 
@@ -1091,6 +1096,25 @@ class BaseClient {
 const ICON$8 = 'data:image/svg+xml;base64,' +
     'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzcgMTg3Ij48cmVjdCB4PSItMTEuMzgiIHk9Ii0yNS45NyIgd2lkdGg9IjIwMC4wMiIgaGVpZ2h0PSIyMzEuNTMiIHN0eWxlPSJmaWxsOiNmZTU7Ii8+PHBhdGggZD0iTTk0LjA1LDU5LjYxYzIuMDUsOC40OCwxLjM2LDE1Ljk0LTEuNTUsMTYuNjYtMi45LC43Mi02LjkxLTUuNTctOC45Ni0xNC4wNS0yLjA1LTguNDgtMS4zNi0xNS45NCwxLjU1LTE2LjY2LDIuOS0uNzIsNi45MSw1LjU3LDguOTYsMTQuMDVaIiBzdHlsZT0iZmlsbDojMWMxYzFjOyIvPjxwYXRoIGQ9Ik0xMjcuODUsNjYuOWMtNC41My00LjgxLTEzLjU1LTMuNS0yMC4xNSwyLjkxLTYuNTksNi40MS04LjI2LDE1LjUtMy43MywyMC4zMSw0LjUzLDQuOCwxMy41NSwzLjUsMjAuMTUtMi45MXM4LjI2LTE1LjUsMy43My0yMC4zMVoiIHN0eWxlPSJmaWxsOiMxYzFjMWM7Ii8+PHBhdGggZD0iTTkxLjc5LDE0MC40N2MyLjktLjcyLDMuNDktOC42LDEuMzItMTcuNjEtMi4xNy05LTYuMjktMTUuNzEtOS4xOS0xNC45OS0yLjksLjcyLTMuNDksOC42LTEuMzIsMTcuNjEsMi4xNyw5LDYuMjksMTUuNzEsOS4xOSwxNC45OVoiIHN0eWxlPSJmaWxsOiMxYzFjMWM7Ii8+PHBhdGggZD0iTTYyLjIyLDcxLjNjOC4zNywyLjQ3LDE0LjQ4LDYuOCwxMy42Niw5LjY3LS44MywyLjg3LTguMjgsMy4yLTE2LjY1LC43My04LjM3LTIuNDctMTQuNDgtNi44LTEzLjY2LTkuNjcsLjgzLTIuODcsOC4yOC0zLjIsMTYuNjUtLjczWiIgc3R5bGU9ImZpbGw6IzFjMWMxYzsiLz48cGF0aCBkPSJNMTE2LjU0LDEwMy43NGM4Ljg4LDIuNjIsMTUuNDEsNy4wNywxNC41OSw5Ljk0LS44MywyLjg3LTguNywzLjA4LTE3LjU4LC40Ni04Ljg4LTIuNjItMTUuNDEtNy4wNy0xNC41OS05Ljk0LC44My0yLjg3LDguNy0zLjA4LDE3LjU4LS40NloiIHN0eWxlPSJmaWxsOiMxYzFjMWM7Ii8+PHBhdGggZD0iTTcxLjY0LDk3LjcxYy0yLjA4LTIuMTUtOC44OCwuOTgtMTUuMiw2Ljk5LTYuMzIsNi4wMS05Ljc2LDEyLjYzLTcuNjksMTQuNzgsMi4wOCwyLjE1LDguODgtLjk4LDE1LjItNi45OSw2LjMyLTYuMDEsOS43Ni0xMi42Myw3LjY5LTE0Ljc4WiIgc3R5bGU9ImZpbGw6IzFjMWMxYzsiLz48L3N2Zz4=';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const debugLog = (...args) => {
+    const { debug } = useDebugStore.getState();
+    if (debug) {
+        console.log('%c[USE-WALLET]', 'color: #FF602E; font-weight: bold;', ...args);
+    }
+};
+const getProviderList = (providers) => {
+    return providers
+        .map((provider) => {
+        if (typeof provider === 'string') {
+            return provider;
+        }
+        return provider.id;
+    })
+        .map((id) => id.toUpperCase())
+        .join(', ');
+};
+
 class PeraWalletClient extends BaseClient {
     #client;
     clientOptions;
@@ -1110,13 +1134,14 @@ class PeraWalletClient extends BaseClient {
     };
     static async init({ clientOptions, algodOptions, clientStatic, algosdkStatic, network = DEFAULT_NETWORK$1 }) {
         try {
+            debugLog(`${exports.PROVIDER_ID.PERA.toUpperCase()} initializing...`);
             const PeraWalletConnect = clientStatic || (await import('@perawallet/connect')).PeraWalletConnect;
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
             const peraWallet = new PeraWalletConnect({
                 ...(clientOptions && clientOptions)
             });
-            return new PeraWalletClient({
+            const provider = new PeraWalletClient({
                 metadata: PeraWalletClient.metadata,
                 client: peraWallet,
                 clientOptions,
@@ -1124,6 +1149,8 @@ class PeraWalletClient extends BaseClient {
                 algodClient,
                 network
             });
+            debugLog(`${exports.PROVIDER_ID.PERA.toUpperCase()} initialized`, '✅');
+            return provider;
         }
         catch (e) {
             console.error('Error initializing...', e);
@@ -1257,13 +1284,14 @@ class DaffiWalletClient extends BaseClient {
     };
     static async init({ clientOptions, algodOptions, clientStatic, algosdkStatic, network = DEFAULT_NETWORK$1 }) {
         try {
+            debugLog(`${exports.PROVIDER_ID.DAFFI.toUpperCase()} initializing...`);
             const DaffiWalletConnect = clientStatic || (await import('@daffiwallet/connect')).DaffiWalletConnect;
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
             const daffiWallet = new DaffiWalletConnect({
                 ...(clientOptions ? clientOptions : { shouldShowSignTxnToast: false })
             });
-            return new DaffiWalletClient({
+            const provider = new DaffiWalletClient({
                 metadata: DaffiWalletClient.metadata,
                 client: daffiWallet,
                 clientOptions,
@@ -1271,6 +1299,8 @@ class DaffiWalletClient extends BaseClient {
                 algodClient,
                 network
             });
+            debugLog(`${exports.PROVIDER_ID.DAFFI.toUpperCase()} initialized`, '✅');
+            return provider;
         }
         catch (e) {
             console.error('Error initializing...', e);
@@ -1409,13 +1439,14 @@ class MyAlgoWalletClient extends BaseClient {
     };
     static async init({ clientOptions, algodOptions, clientStatic, algosdkStatic, network = DEFAULT_NETWORK$1 }) {
         try {
+            debugLog(`${exports.PROVIDER_ID.MYALGO.toUpperCase()} initializing...`);
             const MyAlgoConnect = clientStatic || (await import('@randlabs/myalgo-connect')).default;
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
             const myAlgo = new MyAlgoConnect({
                 ...(clientOptions ? clientOptions : { disableLedgerNano: false })
             });
-            return new MyAlgoWalletClient({
+            const provider = new MyAlgoWalletClient({
                 metadata: MyAlgoWalletClient.metadata,
                 client: myAlgo,
                 clientOptions,
@@ -1423,6 +1454,8 @@ class MyAlgoWalletClient extends BaseClient {
                 algodClient: algodClient,
                 network
             });
+            debugLog(`${exports.PROVIDER_ID.MYALGO.toUpperCase()} initialized`, '✅');
+            return provider;
         }
         catch (e) {
             console.error('Error initializing...', e);
@@ -1511,19 +1544,22 @@ class DeflyWalletClient extends BaseClient {
     };
     static async init({ clientOptions, algodOptions, clientStatic, algosdkStatic, network = DEFAULT_NETWORK$1 }) {
         try {
+            debugLog(`${exports.PROVIDER_ID.DEFLY.toUpperCase()} initializing...`);
             const DeflyWalletConnect = clientStatic || (await import('@blockshake/defly-connect')).DeflyWalletConnect;
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
             const deflyWallet = new DeflyWalletConnect({
                 ...(clientOptions && clientOptions)
             });
-            return new DeflyWalletClient({
+            const provider = new DeflyWalletClient({
                 metadata: DeflyWalletClient.metadata,
                 client: deflyWallet,
                 algosdk,
                 algodClient,
                 network
             });
+            debugLog(`${exports.PROVIDER_ID.DEFLY.toUpperCase()} initialized`, '✅');
+            return provider;
         }
         catch (e) {
             console.error('Error initializing...', e);
@@ -1657,13 +1693,14 @@ class ExodusClient extends BaseClient {
     };
     static async init({ clientOptions, algodOptions, algosdkStatic, network = DEFAULT_NETWORK$1 }) {
         try {
+            debugLog(`${exports.PROVIDER_ID.EXODUS.toUpperCase()} initializing...`);
             if (typeof window == 'undefined' || window.exodus === undefined) {
                 throw new Error('Exodus is not available.');
             }
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
             const exodus = window.exodus.algorand;
-            return new ExodusClient({
+            const provider = new ExodusClient({
                 metadata: ExodusClient.metadata,
                 client: exodus,
                 algosdk: algosdk,
@@ -1671,6 +1708,8 @@ class ExodusClient extends BaseClient {
                 clientOptions: clientOptions || { onlyIfTrusted: false },
                 network
             });
+            debugLog(`${exports.PROVIDER_ID.EXODUS.toUpperCase()} initialized`, '✅');
+            return provider;
         }
         catch (e) {
             console.warn(e);
@@ -1775,19 +1814,22 @@ class AlgoSignerClient extends BaseClient {
     };
     static async init({ algodOptions, algosdkStatic, network = DEFAULT_NETWORK$1 }) {
         try {
+            debugLog(`${exports.PROVIDER_ID.ALGOSIGNER.toUpperCase()} initializing...`);
             if (typeof window == 'undefined' || window.algorand === undefined) {
                 throw new Error('AlgoSigner is not available.');
             }
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
             const algosigner = window.algorand;
-            return new AlgoSignerClient({
+            const provider = new AlgoSignerClient({
                 metadata: AlgoSignerClient.metadata,
                 client: algosigner,
                 algosdk: algosdk,
                 algodClient: algodClient,
                 network
             });
+            debugLog(`${exports.PROVIDER_ID.ALGOSIGNER.toUpperCase()} initialized`, '✅');
+            return provider;
         }
         catch (e) {
             console.warn(e);
@@ -1899,6 +1941,19 @@ class AlgoSignerClient extends BaseClient {
     }
 }
 
+const ICON$2 = 'data:image/svg+xml;base64,' +
+    'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDgwIDQ4MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDgwIDQ4MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMzMzk2RkY7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTI2LjYsMTY4YzYyLjYtNjEuMywxNjQuMi02MS4zLDIyNi44LDBsNy41LDcuNGMzLjEsMy4xLDMuMSw4LDAsMTEuMWwtMjUuOCwyNS4yYy0xLjYsMS41LTQuMSwxLjUtNS43LDAKCWwtMTAuNC0xMC4yYy00My43LTQyLjgtMTE0LjUtNDIuOC0xNTguMiwwbC0xMS4xLDEwLjljLTEuNiwxLjUtNC4xLDEuNS01LjcsMGwtMjUuOC0yNS4yYy0zLjEtMy4xLTMuMS04LDAtMTEuMUwxMjYuNiwxNjh6CgkgTTQwNi43LDIyMC4ybDIyLjksMjIuNWMzLjEsMy4xLDMuMSw4LDAsMTEuMUwzMjYuMiwzNTUuMWMtMy4xLDMuMS04LjIsMy4xLTExLjMsMGwtNzMuNC03MS45Yy0wLjgtMC44LTIuMS0wLjgtMi44LDBsLTczLjQsNzEuOQoJYy0zLjEsMy4xLTguMiwzLjEtMTEuMywwTDUwLjMsMjUzLjhjLTMuMS0zLjEtMy4xLTgsMC0xMS4xbDIyLjktMjIuNWMzLjEtMy4xLDguMi0zLjEsMTEuMywwbDczLjQsNzEuOWMwLjgsMC44LDIuMSwwLjgsMi44LDAKCWw3My40LTcxLjljMy4xLTMuMSw4LjItMy4xLDExLjMsMGw3My40LDcxLjljMC44LDAuOCwyLjEsMC44LDIuOCwwbDczLjQtNzEuOUMzOTguNSwyMTcuMSw0MDMuNiwyMTcuMSw0MDYuNywyMjAuMkw0MDYuNywyMjAuMnoiLz4KPC9zdmc+Cg==';
+const DEFAULT_NETWORK = 'mainnet';
+const ALGORAND_CHAINS = {
+    mainnet: 'algorand:wGHE2Pwdvd7S12BL5FaOP20EGYesN73k',
+    testnet: 'algorand:SGO1GKSzyE7IEPItTxCByw9x8FmnrCDe',
+    betanet: 'algorand:mFgazF-2uRS1tMiL9dsj01hJGySEmPN2'
+};
+
+const isPublicNetwork = (network) => {
+    return network === 'betanet' || network === 'testnet' || network === 'mainnet';
+};
+
 const getPayloadId = () => {
     const date = Date.now() * Math.pow(10, 3);
     const extra = Math.floor(Math.random() * Math.pow(10, 3));
@@ -1914,30 +1969,15 @@ const formatJsonRpcRequest = (method, params) => {
     };
 };
 
-const isPublicNetwork = (network) => {
-    return network === 'betanet' || network === 'testnet' || network === 'mainnet';
-};
-
-const ICON$2 = 'data:image/svg+xml;base64,' +
-    'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDgwIDQ4MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDgwIDQ4MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMzMzk2RkY7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTI2LjYsMTY4YzYyLjYtNjEuMywxNjQuMi02MS4zLDIyNi44LDBsNy41LDcuNGMzLjEsMy4xLDMuMSw4LDAsMTEuMWwtMjUuOCwyNS4yYy0xLjYsMS41LTQuMSwxLjUtNS43LDAKCWwtMTAuNC0xMC4yYy00My43LTQyLjgtMTE0LjUtNDIuOC0xNTguMiwwbC0xMS4xLDEwLjljLTEuNiwxLjUtNC4xLDEuNS01LjcsMGwtMjUuOC0yNS4yYy0zLjEtMy4xLTMuMS04LDAtMTEuMUwxMjYuNiwxNjh6CgkgTTQwNi43LDIyMC4ybDIyLjksMjIuNWMzLjEsMy4xLDMuMSw4LDAsMTEuMUwzMjYuMiwzNTUuMWMtMy4xLDMuMS04LjIsMy4xLTExLjMsMGwtNzMuNC03MS45Yy0wLjgtMC44LTIuMS0wLjgtMi44LDBsLTczLjQsNzEuOQoJYy0zLjEsMy4xLTguMiwzLjEtMTEuMywwTDUwLjMsMjUzLjhjLTMuMS0zLjEtMy4xLTgsMC0xMS4xbDIyLjktMjIuNWMzLjEtMy4xLDguMi0zLjEsMTEuMywwbDczLjQsNzEuOWMwLjgsMC44LDIuMSwwLjgsMi44LDAKCWw3My40LTcxLjljMy4xLTMuMSw4LjItMy4xLDExLjMsMGw3My40LDcxLjljMC44LDAuOCwyLjEsMC44LDIuOCwwbDczLjQtNzEuOUMzOTguNSwyMTcuMSw0MDMuNiwyMTcuMSw0MDYuNywyMjAuMkw0MDYuNywyMjAuMnoiLz4KPC9zdmc+Cg==';
-const DEFAULT_NETWORK = 'mainnet';
-const ALGORAND_CHAINS = {
-    mainnet: 'algorand:wGHE2Pwdvd7S12BL5FaOP20EGYesN73k',
-    testnet: 'algorand:SGO1GKSzyE7IEPItTxCByw9x8FmnrCDe',
-    betanet: 'algorand:mFgazF-2uRS1tMiL9dsj01hJGySEmPN2'
-};
-
 class WalletConnectClient extends BaseClient {
     #client;
     clientOptions;
-    #modal;
     network;
     chain;
-    constructor({ metadata, client, clientOptions, modal, algosdk, algodClient, network, chain }) {
+    constructor({ metadata, client, clientOptions, algosdk, algodClient, network, chain }) {
         super(metadata, algosdk, algodClient);
         this.#client = client;
         this.clientOptions = clientOptions;
-        this.#modal = modal;
         this.network = network;
         this.chain = chain;
         this.metadata = WalletConnectClient.metadata;
@@ -1948,45 +1988,46 @@ class WalletConnectClient extends BaseClient {
         icon: ICON$2,
         isWalletConnect: true
     };
-    static async init({ clientOptions, algodOptions, clientStatic, modalStatic, modalOptions, algosdkStatic, network = DEFAULT_NETWORK }) {
+    static async init({ clientOptions, algodOptions, clientStatic, algosdkStatic, network = DEFAULT_NETWORK }) {
         try {
+            debugLog(`${exports.PROVIDER_ID.WALLETCONNECT.toUpperCase()} initializing...`);
             if (!isPublicNetwork(network)) {
                 throw new Error(`WalletConnect only supports Algorand mainnet, testnet, and betanet. "${network}" is not supported.`);
             }
+            if (!clientOptions) {
+                throw new Error('WalletConnect clientOptions must be provided');
+            }
             const chain = ALGORAND_CHAINS[network];
-            // Initialize sign client
-            const Client = clientStatic || (await import('@walletconnect/sign-client')).default;
-            const client = await Client.init(clientOptions);
-            // Initialize web3modal
-            const modalModule = modalStatic
-                ? { WalletConnectModal: modalStatic }
-                : await import('@walletconnect/modal');
-            const Web3Modal = modalModule.WalletConnectModal;
-            const modal = new Web3Modal({
-                explorerExcludedWalletIds: 'ALL',
-                ...modalOptions,
-                projectId: clientOptions?.projectId || '',
-                walletConnectVersion: 2
+            const clientModule = clientStatic
+                ? { Web3ModalSign: clientStatic }
+                : await import('@web3modal/sign-html');
+            const Client = clientModule.Web3ModalSign;
+            // Initialize client
+            const client = new Client({
+                ...clientOptions,
+                modalOptions: {
+                    explorerExcludedWalletIds: 'ALL',
+                    ...clientOptions.modalOptions
+                }
             });
             // Initialize algod client
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
-            // Initialize wallet client
-            const walletClient = new WalletConnectClient({
+            // Initialize provider client
+            const provider = new WalletConnectClient({
                 metadata: WalletConnectClient.metadata,
                 client,
                 clientOptions,
-                modal,
                 algosdk,
                 algodClient,
                 network,
                 chain
             });
-            walletClient.#subscribeToEvents();
-            return walletClient;
+            debugLog(`${exports.PROVIDER_ID.WALLETCONNECT.toUpperCase()} initialized`, '✅');
+            return provider;
         }
         catch (error) {
-            console.error('Error initializing', error);
+            console.error('Error initializing WalletConnect client', error);
             return null;
         }
     }
@@ -1998,63 +2039,35 @@ class WalletConnectClient extends BaseClient {
                 events: []
             }
         };
-        const { uri, approval } = await this.#client.connect({ requiredNamespaces });
-        if (uri) {
-            await this.#modal.openModal({ uri, standaloneChains: [this.chain] });
-        }
-        return new Promise((resolve, reject) => {
-            const unsubscribeModal = this.#modal.subscribeModal((state) => {
-                if (!state.open) {
-                    unsubscribeModal();
-                    reject(new Error('Modal closed'));
-                }
-            });
-            approval()
-                .then((session) => {
-                const { accounts } = session.namespaces.algorand;
-                resolve({
-                    ...WalletConnectClient.metadata,
-                    accounts: accounts.map((accountStr, index) => ({
-                        name: `WalletConnect ${index + 1}`,
-                        address: accountStr.split(':').pop(),
-                        providerId: WalletConnectClient.metadata.id
-                    }))
-                });
-            })
-                .catch((error) => {
-                reject(error);
-            })
-                .finally(() => {
-                unsubscribeModal();
-                this.#modal.closeModal();
+        try {
+            const session = await this.#client.connect({
+                requiredNamespaces
             });
-        });
+            const { accounts } = session.namespaces.algorand;
+            return {
+                ...WalletConnectClient.metadata,
+                accounts: this.#mapAccounts(accounts)
+            };
+        }
+        catch (error) {
+            console.error('Error connecting to WalletConnect', error);
+            throw error;
+        }
     }
-    // eslint-disable-next-line @typescript-eslint/require-await
     async reconnect() {
-        const session = this.#getSession();
+        const session = await this.#client.getSession();
         if (typeof session === 'undefined') {
             return null;
         }
         const { accounts } = session.namespaces.algorand;
         return {
             ...WalletConnectClient.metadata,
-            accounts: accounts.map((accountStr, index) => ({
-                name: `WalletConnect ${index + 1}`,
-                address: accountStr.split(':').pop(),
-                providerId: WalletConnectClient.metadata.id
-            }))
+            accounts: this.#mapAccounts(accounts)
         };
     }
     async disconnect() {
         try {
-            if (typeof this.#client === 'undefined') {
-                throw new Error('WalletConnect is not initialized');
-            }
-            const session = this.#getSession();
-            if (typeof session === 'undefined') {
-                throw new Error('Session is not connected');
-            }
+            const session = await this.#getSession();
             await this.#client.disconnect({
                 topic: session.topic,
                 // replicates getSdkError('USER_DISCONNECTED') from @walletconnect/utils
@@ -2068,27 +2081,49 @@ class WalletConnectClient extends BaseClient {
             console.error('Error disconnecting', error);
         }
     }
-    async signTransactions(connectedAccounts, txnGroups, indexesToSign, returnGroup = true) {
-        // If txnGroups is a nested array, flatten it
+    async signTransactions(connectedAccounts, txnGroups, indexesToSign = [], returnGroup = true) {
+        // Flatten transactions array if nested
         const transactions = Array.isArray(txnGroups[0])
             ? txnGroups.flatMap((txn) => txn)
             : txnGroups;
-        // Decode the transactions to access their properties.
+        const { txnsToSign, signedIndexes } = this.#composeTransactions(transactions, connectedAccounts, indexesToSign);
+        const request = formatJsonRpcRequest('algo_signTxn', [txnsToSign]);
+        const session = await this.#getSession();
+        const response = await this.#client.request({
+            chainId: this.chain,
+            topic: session.topic,
+            request
+        });
+        // Check if the result is the same length as the transactions
+        const lengthsMatch = response.length === transactions.length;
+        // Join the signed transactions with the original group of transactions
+        const signedTxns = transactions.reduce((acc, txn, i) => {
+            if (signedIndexes.includes(i)) {
+                const signedTxn = lengthsMatch ? response[i] : response.shift();
+                signedTxn && acc.push(new Uint8Array(Buffer.from(signedTxn, 'base64')));
+            }
+            else if (returnGroup) {
+                acc.push(txn);
+            }
+            return acc;
+        }, []);
+        return signedTxns;
+    }
+    #composeTransactions(transactions, connectedAccounts, indexesToSign) {
+        // Decode the transactions
         const decodedTxns = transactions.map((txn) => {
             return this.algosdk.decodeObj(txn);
         });
+        // Track signed transactions
         const signedIndexes = [];
-        // Marshal the transactions,
-        // and add the signers property if they shouldn't be signed.
+        // Marshal the transactions into WalletConnect format
         const txnsToSign = decodedTxns.reduce((acc, txn, i) => {
             const isSigned = 'txn' in txn;
-            if (indexesToSign && indexesToSign.length && indexesToSign.includes(i)) {
-                signedIndexes.push(i);
-                acc.push({
-                    txn: Buffer.from(transactions[i]).toString('base64')
-                });
-            }
-            else if (!isSigned && connectedAccounts.includes(this.algosdk.encodeAddress(txn['snd']))) {
+            const senderAccount = !isSigned
+                ? this.algosdk.encodeAddress(txn['snd'])
+                : this.algosdk.encodeAddress(txn.txn['snd']);
+            const shouldSign = indexesToSign.includes(i) || (!isSigned && connectedAccounts.includes(senderAccount));
+            if (shouldSign) {
                 signedIndexes.push(i);
                 acc.push({
                     txn: Buffer.from(transactions[i]).toString('base64')
@@ -2104,51 +2139,21 @@ class WalletConnectClient extends BaseClient {
             }
             return acc;
         }, []);
-        const session = this.#getSession();
+        return { txnsToSign, signedIndexes };
+    }
+    async #getSession() {
+        const session = await this.#client.getSession();
         if (typeof session === 'undefined') {
             throw new Error('Session is not connected');
         }
-        const request = formatJsonRpcRequest('algo_signTxn', [txnsToSign]);
-        // Play an audio file to keep Wallet Connect's web socket open on iOS
-        // when the user goes into background mode.
-        // await this.keepWCAliveStart()
-        const response = await this.#client.request({
-            chainId: this.chain,
-            topic: session.topic,
-            request
-        });
-        // this.keepWCAliveStop()
-        // Check if the result is the same length as the transactions
-        const lengthsMatch = response.length === transactions.length;
-        // Join the newly signed transactions with the original group of transactions.
-        const signedTxns = transactions.reduce((acc, txn, i) => {
-            if (signedIndexes.includes(i)) {
-                const signedByUser = lengthsMatch ? response[i] : response.shift();
-                signedByUser && acc.push(new Uint8Array(Buffer.from(signedByUser, 'base64')));
-            }
-            else if (returnGroup) {
-                acc.push(txn);
-            }
-            return acc;
-        }, []);
-        return signedTxns;
-    }
-    #subscribeToEvents() {
-        if (typeof this.#client === 'undefined') {
-            throw new Error('WalletConnect is not initialized');
-        }
-        this.#client.on('session_event', (args) => {
-            console.log('EVENT', 'session_event', args);
-        });
-        this.#client.on('session_update', ({ topic, params }) => {
-            console.log('EVENT', 'session_update', { topic, params });
-        });
-        this.#client.on('session_delete', () => {
-            console.log('EVENT', 'session_delete');
-        });
+        return session;
     }
-    #getSession() {
-        return this.#client.session.getAll().at(-1);
+    #mapAccounts(accounts) {
+        return accounts.map((accountStr, index) => ({
+            name: `WalletConnect ${index + 1}`,
+            address: accountStr.split(':').pop(),
+            providerId: WalletConnectClient.metadata.id
+        }));
     }
 }
 
@@ -2178,11 +2183,12 @@ class KMDWalletClient extends BaseClient {
     };
     static async init({ clientOptions, algodOptions, algosdkStatic, network = DEFAULT_NETWORK$1 }) {
         try {
+            debugLog(`${exports.PROVIDER_ID.KMD.toUpperCase()} initializing...`);
             const { token = 'a'.repeat(64), host = 'http://localhost', port = '4002', wallet = 'unencrypted-default-wallet', password = '' } = clientOptions || {};
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
             const kmdClient = new algosdk.Kmd(token, host, port);
-            return new KMDWalletClient({
+            const provider = new KMDWalletClient({
                 metadata: KMDWalletClient.metadata,
                 password,
                 wallet,
@@ -2191,6 +2197,8 @@ class KMDWalletClient extends BaseClient {
                 algodClient: algodClient,
                 network
             });
+            debugLog(`${exports.PROVIDER_ID.KMD.toUpperCase()} initialized`, '✅');
+            return provider;
         }
         catch (e) {
             console.error('Error initializing...', e);
@@ -2334,15 +2342,18 @@ class MnemonicWalletClient extends BaseClient {
         isWalletConnect: false
     };
     static async init({ algodOptions, algosdkStatic, network = DEFAULT_NETWORK$1 }) {
+        debugLog(`${exports.PROVIDER_ID.MNEMONIC.toUpperCase()} initializing...`);
         try {
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = getAlgodClient(algosdk, algodOptions);
-            return new MnemonicWalletClient({
+            const provider = new MnemonicWalletClient({
                 metadata: MnemonicWalletClient.metadata,
                 algosdk: algosdk,
                 algodClient: algodClient,
                 network
             });
+            debugLog(`${exports.PROVIDER_ID.MNEMONIC.toUpperCase()} initialized`);
+            return provider;
         }
         catch (e) {
             console.error('Error initializing...', e);
@@ -2656,8 +2667,7 @@ function useWallet() {
 const initializeProviders = async (providers, nodeConfig, algosdkStatic) => {
     const initializedProviders = {};
     if (typeof window === 'undefined') {
-        // @todo add `debug: Boolean` option to enable/disable console logs
-        console.warn('Window object is not available, skipping initialization.');
+        debugLog('Window object is not available, skipping initialization');
         return initializedProviders;
     }
     const { network = DEFAULT_NETWORK$1, nodeServer = DEFAULT_NODE_BASEURL, nodePort = DEFAULT_NODE_PORT, nodeToken = DEFAULT_NODE_TOKEN } = nodeConfig || {};
@@ -2672,14 +2682,15 @@ const initializeProviders = async (providers, nodeConfig, algosdkStatic) => {
         const client = await allClients[id].init(initParams);
         initializedProviders[id] = client;
     };
-    // Initialize default providers if `providers` is undefined or empty
     if (!providers || providers.length === 0) {
+        debugLog('Initializing default providers:', getProviderList(DEFAULT_PROVIDERS));
         const initPromises = Object.keys(allClients)
             .filter((id) => DEFAULT_PROVIDERS.includes(id))
             .map((id) => initClient(id));
         await Promise.all(initPromises);
     }
     else {
+        debugLog('Initializing custom providers:', getProviderList(providers));
         const initPromises = providers.map((provider) => initClient(provider));
         await Promise.all(initPromises);
     }
@@ -2717,7 +2728,10 @@ function encodeNFDTransactionsArray(transactionsArray) {
     });
 }
 
-function useInitializeProviders({ providers = [], nodeConfig, algosdkStatic } = {}) {
+function useInitializeProviders({ providers = [], nodeConfig, algosdkStatic, debug = false } = {}) {
+    // Enable debug mode
+    const { setDebug } = useDebugStore();
+    require$$0.useEffect(() => setDebug(debug), [debug, setDebug]);
     const [walletProviders, setWalletProviders] = require$$0.useState(null);
     require$$0.useEffect(() => {
         async function initializeAndConnect() {