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

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

@@ -1899,6 +1899,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 +1927,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 +1946,43 @@ 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 {
             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({
+            return new WalletConnectClient({
                 metadata: WalletConnectClient.metadata,
                 client,
                 clientOptions,
-                modal,
                 algosdk,
                 algodClient,
                 network,
                 chain
             });
-            walletClient.#subscribeToEvents();
-            return walletClient;
         }
         catch (error) {
-            console.error('Error initializing', error);
+            console.error('Error initializing WalletConnect client', error);
             return null;
         }
     }
@@ -1998,63 +1994,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 +2036,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 +2094,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;
+        return session;
     }
-    #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');
-        });
-    }
-    #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
+        }));
     }
 }