@txnlab/use-wallet 1.2.5 → 1.2.7

package/README.md

@@ -46,29 +46,21 @@ npm install algosdk @blockshake/defly-connect @perawallet/connect @randlabs/myal
 
 ### Set up the Wallet Provider
 
-In `app.js`, initialize the Wallet Provider so that the `useWallet` hook can be used in the child components, and use the `reconnectProviders` function to restore sessions for users returning to the app. 
-
+In `app.js`, initialize the Wallet Provider so that the `useWallet` hook can be used in the child components, and use the `reconnectProviders` function to restore sessions for users returning to the app.
 
 ```jsx
-import React from "react";
-import {
-  reconnectProviders,
-  initializeProviders,
-  WalletProvider,
-} from "@txnlab/use-wallet";
+import React from 'react'
+import { reconnectProviders, initializeProviders, WalletProvider } from '@txnlab/use-wallet'
 
-const walletProviders = initializeProviders();
+const walletProviders = initializeProviders()
 
 export default function App() {
   // Reconnect the session when the user returns to the dApp
   React.useEffect(() => {
-    reconnectProviders(walletProviders);
-  }, []);
+    reconnectProviders(walletProviders)
+  }, [])
 
-  return (
-    <WalletProvider value={walletProviders}>
-      ...
-    </WalletProvider>);
+  return <WalletProvider value={walletProviders}>...</WalletProvider>
 }
 ```
 
@@ -77,26 +69,23 @@ The `reconnectProviders` function is used to restore session states of wallets t
 By default, all of the supported providers except for `KMD` are returned by `useConnectWallet`. An array can be passed to `initializeProviders` to determine which providers your dApp supports, as shown below.
 
 ```jsx
-import { initializeProviders, PROVIDER_ID } from "@txnlab/use-wallet";
+import { initializeProviders, PROVIDER_ID } from '@txnlab/use-wallet'
 
-const walletProviders = initializeProviders([
-  PROVIDER_ID.KMD_WALLET,
-  PROVIDER_ID.WALLET_CONNECT,
-]);
+const walletProviders = initializeProviders([PROVIDER_ID.KMD_WALLET, PROVIDER_ID.WALLET_CONNECT])
 ```
 
 For more configuration options, see [Provider Configuration](#provider-configuration).
 
 ### Connect
 
-Map through the `providers` object to list the providers and enable users to connect. 
+Map through the `providers` object to list the providers and enable users to connect.
 
 ```jsx
-import React from "react";
-import { useWallet } from "@txnlab/use-wallet";
+import React from 'react'
+import { useWallet } from '@txnlab/use-wallet'
 
 export default function Connect() {
-  const { providers, activeAccount } = useWallet();
+  const { providers, activeAccount } = useWallet()
 
   // Map through the providers.
   // Render account information and "connect", "set active", and "disconnect" buttons.
@@ -104,19 +93,16 @@ export default function Connect() {
   return (
     <div>
       {providers?.map((provider) => (
-        <div key={"provider-" + provider.metadata.id}>
+        <div key={'provider-' + provider.metadata.id}>
           <h4>
             <img width={30} height={30} alt="" src={provider.metadata.icon} />
-            {provider.metadata.name} {provider.isActive && "[active]"}
+            {provider.metadata.name} {provider.isActive && '[active]'}
           </h4>
           <div>
             <button onClick={provider.connect} disabled={provider.isConnected}>
               Connect
             </button>
-            <button
-              onClick={provider.disconnect}
-              disabled={!provider.isConnected}
-            >
+            <button onClick={provider.disconnect} disabled={!provider.isConnected}>
               Disconnect
             </button>
             <button
@@ -132,7 +118,9 @@ export default function Connect() {
                   onChange={(e) => provider.setActiveAccount(e.target.value)}
                 >
                   {provider.accounts.map((account) => (
-                    <option key={account.address} value={account.address}>{account.address}</option>
+                    <option key={account.address} value={account.address}>
+                      {account.address}
+                    </option>
                   ))}
                 </select>
               )}
@@ -141,9 +129,8 @@ export default function Connect() {
         </div>
       ))}
     </div>
-  );
+  )
 }
-
 ```
 
 Each provider has two connection states: `isConnected` and `isActive`.
@@ -159,58 +146,47 @@ The `activeAccount` is the primary account that is currently active and will be
 Construct a transaction using `algosdk`, and sign and send the transaction using the `signTransactions` and `sendTransactions` functions provided by the `useWallet` hook.
 
 ```jsx
-import React from "react";
+import React from 'react'
 import {
   useWallet,
   DEFAULT_NODE_BASEURL,
   DEFAULT_NODE_TOKEN,
-  DEFAULT_NODE_PORT,
-} from "@txnlab/use-wallet";
-import algosdk from "algosdk";
-
-const algodClient = new algosdk.Algodv2(
-  DEFAULT_NODE_TOKEN,
-  DEFAULT_NODE_BASEURL,
   DEFAULT_NODE_PORT
-);
+} from '@txnlab/use-wallet'
+import algosdk from 'algosdk'
+
+const algodClient = new algosdk.Algodv2(DEFAULT_NODE_TOKEN, DEFAULT_NODE_BASEURL, DEFAULT_NODE_PORT)
 
 export default function Transact() {
-  const { activeAddress, signTransactions, sendTransactions } = useWallet();
+  const { activeAddress, signTransactions, sendTransactions } = useWallet()
 
-  const sendTransaction = async (
-    from?: string,
-    to?: string,
-    amount?: number
-  ) => {
+  const sendTransaction = async (from?: string, to?: string, amount?: number) => {
     if (!from || !to || !amount) {
-      throw new Error("Missing transaction params.");
+      throw new Error('Missing transaction params.')
     }
 
-    const suggestedParams = await algodClient.getTransactionParams().do();
+    const suggestedParams = await algodClient.getTransactionParams().do()
 
     const transaction = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
       from,
       to,
       amount,
-      suggestedParams,
-    });
+      suggestedParams
+    })
 
-    const encodedTransaction = algosdk.encodeUnsignedTransaction(transaction);
+    const encodedTransaction = algosdk.encodeUnsignedTransaction(transaction)
 
-    const signedTransactions = await signTransactions([encodedTransaction]);
+    const signedTransactions = await signTransactions([encodedTransaction])
 
-    const waitRoundsToConfirm = 4;
+    const waitRoundsToConfirm = 4
 
-    const { id } = await sendTransactions(
-      signedTransactions,
-      waitRoundsToConfirm
-    );
+    const { id } = await sendTransactions(signedTransactions, waitRoundsToConfirm)
 
-    console.log("Successfully sent transaction. Transaction ID: ", id);
-  };
+    console.log('Successfully sent transaction. Transaction ID: ', id)
+  }
 
   if (!activeAddress) {
-    return <p>Connect an account first.</p>;
+    return <p>Connect an account first.</p>
   }
 
   return (
@@ -222,7 +198,7 @@ export default function Transact() {
         Sign and send transactions
       </button>
     </div>
-  );
+  )
 }
 ```
 
@@ -231,14 +207,14 @@ export default function Transact() {
 The `activeAccount` object can be used to display details for the currently active account. For convenience, the `activeAddress` property shows the currently active address.
 
 ```jsx
-import React from "react";
-import { useWallet } from "@txnlab/use-wallet";
+import React from 'react'
+import { useWallet } from '@txnlab/use-wallet'
 
 export default function Account() {
-  const { activeAccount } = useWallet();
+  const { activeAccount } = useWallet()
 
   if (!activeAccount) {
-    return <p>No account active.</p>;
+    return <p>No account active.</p>
   }
 
   return (
@@ -254,7 +230,7 @@ export default function Account() {
         Provider: <span>{activeAccount.providerId}</span>
       </p>
     </div>
-  );
+  )
 }
 ```
 
@@ -263,32 +239,30 @@ export default function Account() {
 The `isActive` and `isReady` properties can be used to check the status of the wallets. The `isActive` property determines whether or not an account is currently active. The `isReady` property shows if `use-wallet` has mounted and successfully read the connection status from the providers. These properties are useful when setting up client side access restrictions, for example, by redirecting a user if no wallet is active, as shown below.
 
 ```jsx
-  const { isActive, isReady } = useWallet()
+const { isActive, isReady } = useWallet()
 
-  useEffect(() => {
-    if (isReady && isActive) {
-      allowAccess()
-    }
-
-    if (isReady && !isActive) {
-      denyAccess()
-    }
-  })
+useEffect(() => {
+  if (isReady && isActive) {
+    allowAccess()
+  }
 
+  if (isReady && !isActive) {
+    denyAccess()
+  }
+})
 ```
 
-
 ## Provider Configuration
 
 The `initializeProviders` functon accepts a configuration object that can be used to configure the nodes that the providers use to send transactions, as shown below.
 
 ```jsx
 const walletProviders = initializeProviders([], {
-  network: "devmodenet",
-  nodeServer: "http://algod",
-  nodeToken: "xxxxxxxxx",
-  nodePort: "8080",
-});
+  network: 'devmodenet',
+  nodeServer: 'http://algod',
+  nodeToken: 'xxxxxxxxx',
+  nodePort: '8080'
+})
 ```
 
 Passing an empty array as the first argument enables all of the default providers. The `network` property should be specified as `betanet`, `testnet`, `mainnet` or the name of your local development network.
@@ -317,7 +291,7 @@ const walletProviders = {
   }),
 };
 
-... 
+...
 
 <WalletProvider value={walletProviders}>
   ...
@@ -326,9 +300,9 @@ const walletProviders = {
 
 ## Static Imports
 
-By default, `use-wallet` dynamically imports all of the dependencies for the providiers, as well as `algosdk`, to reduce bundle size. 
+By default, `use-wallet` dynamically imports all of the dependencies for the providiers, as well as `algosdk`, to reduce bundle size.
 
-Some React frameworks, like [Remix](https://remix.run/), do not support dynamic imports. To get around this, those dependencies can be imported in your application and passed to the `useWallet` provider. See below for an example. 
+Some React frameworks, like [Remix](https://remix.run/), do not support dynamic imports. To get around this, those dependencies can be imported in your application and passed to the `useWallet` provider. See below for an example.
 
 ```jsx
 ...
@@ -412,19 +386,22 @@ yarn link
 ```
 
 In the root of your application, run:
+
 ```bash
 yarn link @txnlab/use-wallet
 ```
 
-### Symlink React 
+### Symlink React
 
 In the root of your application, run:
+
 ```bash
 cd node_modules/react
 yarn link
 ```
 
 In the root of `use-wallet` directory, run:
+
 ```bash
 yarn link react
 ```
@@ -433,8 +410,8 @@ yarn link react
 
 Are you using `@txnlab/use-wallet`? We'd love to include you here. Let us know! [Twitter](https://twitter.com/NFDomains) | [Discord](https://discord.gg/7XcuMTfeZP) | [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)
+- [@algoscan/use-wallet-ui](https://github.com/algoscan/use-wallet-ui)
+- [@algoworldnft/algoworld-swapper](https://github.com/algoworldnft/algoworld-swapper)
 
 ## License
 

package/dist/cjs/algod/index.d.ts

@@ -1,7 +1,7 @@
-import type _algosdk from "algosdk";
-import type { AlgodClientOptions } from "../types";
+import type _algosdk from 'algosdk';
+import type { AlgodClientOptions } from '../types';
 export declare const getAlgosdk: () => Promise<typeof _algosdk>;
-export declare const getAlgodClient: (algosdk: typeof _algosdk, algodClientOptions?: AlgodClientOptions) => Promise<_algosdk.Algodv2>;
+export declare const getAlgodClient: (algosdk: typeof _algosdk, algodClientOptions?: AlgodClientOptions) => _algosdk.Algodv2;
 export default class Algod {
     algosdk: typeof _algosdk;
     algodClient: _algosdk.Algodv2;

package/dist/cjs/clients/algosigner/client.d.ts

@@ -1,20 +1,23 @@
-import BaseWallet from "../base";
-import { PROVIDER_ID } from "../../constants";
-import type { Network } from "../../types";
-import type { AlgoSignerClientConstructor, InitParams } from "./types";
+import BaseWallet from '../base';
+import { PROVIDER_ID } from '../../constants';
+import type { Network } from '../../types';
+import type { AlgoSignerClientConstructor, InitParams } from './types';
+import { useWalletStore } from '../../store';
 declare class AlgoSignerClient extends BaseWallet {
     #private;
     network: Network;
-    constructor({ metadata, client, algosdk, algodClient, network, }: AlgoSignerClientConstructor);
+    walletStore: typeof useWalletStore;
+    constructor({ metadata, client, algosdk, algodClient, network }: AlgoSignerClientConstructor);
     static metadata: {
         id: PROVIDER_ID;
         name: string;
         icon: string;
         isWalletConnect: boolean;
     };
-    static init({ algodOptions, algosdkStatic, network, }: InitParams): Promise<AlgoSignerClient | null>;
+    static init({ algodOptions, algosdkStatic, network }: InitParams): Promise<AlgoSignerClient | null>;
     connect(): Promise<{
         accounts: {
+            authAddr?: string | undefined;
             name: string;
             address: string;
             providerId: PROVIDER_ID;
@@ -27,5 +30,7 @@ declare class AlgoSignerClient extends BaseWallet {
     reconnect(onDisconnect: () => void): Promise<null>;
     disconnect(): Promise<void>;
     signTransactions(connectedAccounts: string[], transactions: Uint8Array[], indexesToSign?: number[], returnGroup?: boolean): Promise<Uint8Array[]>;
+    getGenesisID(): string;
+    getAuthAddress(address: string): string | undefined;
 }
 export default AlgoSignerClient;

package/dist/cjs/clients/algosigner/types.d.ts

@@ -1,26 +1,30 @@
-import type _algosdk from "algosdk";
-import { PROVIDER_ID } from "../../constants";
-import type { AlgodClientOptions, Network, Metadata } from "../../types";
+import type _algosdk from 'algosdk';
+import { PROVIDER_ID } from '../../constants';
+import type { AlgodClientOptions, Network, Metadata } from '../../types';
 export declare type WindowExtended = {
-    AlgoSigner: AlgoSigner;
+    algorand: AlgoSigner;
 } & Window & typeof globalThis;
+export declare type GenesisId = 'betanet-v1.0' | 'testnet-v1.0' | 'mainnet-v1.0' | string;
+export declare type EnableParams = {
+    genesisID?: GenesisId;
+    genesisHash?: string;
+    accounts?: string[];
+};
+export declare type EnableResponse = {
+    genesisID: GenesisId;
+    genesisHash: string;
+    accounts: string[];
+};
 export declare type AlgoSignerTransaction = {
     txn: string;
-    signers?: [];
+    signers?: string[];
+    stxn?: string;
     multisig?: string;
+    authAddr?: string;
 };
-export declare type SupportedLedgers = "MainNet" | "TestNet" | "BetaNet" | string;
 export declare type AlgoSigner = {
-    connect: () => Promise<Record<string, never>>;
-    accounts: (ledger: {
-        ledger: SupportedLedgers;
-    }) => Promise<{
-        address: string;
-    }[]>;
-    signTxn: (transactions: AlgoSignerTransaction[]) => Promise<{
-        txID: string;
-        blob: string;
-    }[]>;
+    enable: (params?: EnableParams) => Promise<EnableResponse>;
+    signTxns: (transactions: AlgoSignerTransaction[]) => Promise<string[]>;
     encoding: {
         msgpackToBase64(transaction: Uint8Array): string;
         byteArrayToString(transaction: Uint8Array): string;
@@ -32,7 +36,7 @@ export declare type AlgoSignerClientConstructor = {
     id: PROVIDER_ID;
     algosdk: typeof _algosdk;
     algodClient: _algosdk.Algodv2;
-    network: SupportedLedgers;
+    network: Network;
 };
 export declare type InitParams = {
     algodOptions?: AlgodClientOptions;

package/dist/cjs/index.js

@@ -23,8 +23,8 @@ const DEFAULT_NODE_PORT = "";
 const getAlgosdk = async () => {
     return (await import('algosdk')).default;
 };
-const getAlgodClient = async (algosdk, algodClientOptions) => {
-    const [tokenOrBaseClient = DEFAULT_NODE_TOKEN, baseServer = DEFAULT_NODE_BASEURL, port = DEFAULT_NODE_PORT, headers,] = algodClientOptions || [];
+const getAlgodClient = (algosdk, algodClientOptions) => {
+    const [tokenOrBaseClient = DEFAULT_NODE_TOKEN, baseServer = DEFAULT_NODE_BASEURL, port = DEFAULT_NODE_PORT, headers] = algodClientOptions || [];
     return new algosdk.Algodv2(tokenOrBaseClient, baseServer, port, headers);
 };
 class Algod {
@@ -1576,81 +1576,75 @@ class ExodusClient extends BaseClient {
 const ICON$3 = "data:image/svg+xml;base64," +
     "PHN2ZyB3aWR0aD0iMjM4IiBoZWlnaHQ9IjIzOCIgdmlld0JveD0iMCAwIDIzOCAyMzgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MS43MDUgMTQ1LjA0MkgxMTYuNzA1TDEwNy43MDUgMTU1LjA0Mkg1MS43MDVWMTQ1LjA0MloiIGZpbGw9IiNENjQ1MDAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNDcuNTE5IDE5MS41NTdMMTI5LjU3NyAxNDQuMzk0TDE0Mi40MDQgMTI3LjExMkwxNjcuODc1IDE5MS41NTdIMTQ3LjUxOVpNMTEwLjkzNiA5NS4zOTMyTDEyMC42MTMgMTIwLjgzMUwxMzMuMzU5IDEwNC4yMjhMMTE3LjQ3NSA2NC4wNDIyQzExNS45MjggNjAuMTI4IDExMi4xNDYgNTcuNTU2NSAxMDcuOTM4IDU3LjU1NjVDMTAzLjcyOSA1Ny41NTY1IDk5Ljk0NzQgNjAuMTI4IDk4LjQwMDMgNjQuMDQyMkw2Ny45NjU5IDE0MS4wNDJIODcuNzgwN0M5NS40MTUzIDEyMS4wMTEgMTAyLjg5MyAxMDEuMzk5IDEwNS4xOTggOTUuMzU0MUMxMDUuNjQxIDk0LjE5MTIgMTA2Ljc0MyA5My40NTk5IDEwNy45ODcgOTMuNDU5OUgxMDguMTMyQzEwOS4zNzggOTMuNDU5OSAxMTAuNDkzIDk0LjIyOTMgMTEwLjkzNiA5NS4zOTMyWk04MC45MjEgMTU5LjA0MkM3NC45Mjg5IDE3NC43NjggNjkuODY2MSAxODguMDYzIDY4LjU0NDcgMTkxLjU1N0g0OEw2MC44NTE0IDE1OS4wNDJIODAuOTIxWiIgZmlsbD0iIzIyMkI2MCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3Ni4wMjYgNTQuNzUwOUMxNzcuOTk3IDUyLjA4NzIgMTgxLjc1NCA1MS41MjU3IDE4NC40MTggNTMuNDk2N0MxODcuMDgyIDU1LjQ2NzggMTg3LjY0MyA1OS4yMjUxIDE4NS42NzIgNjEuODg4OEwxMzAuMDEzIDEzNy4xMDdDMTI5LjcxNCAxMzcuNTEyIDEyOS4zNDEgMTM3Ljg1NyAxMjguOTEzIDEzOC4xMjNMMTE3Ljg1NiAxNDUuMDEzQzExNy4wODcgMTQ1LjQ5MyAxMTYuMTI4IDE0NC43ODMgMTE2LjM2MSAxNDMuOTA3TDExOS43MTggMTMxLjMxOEMxMTkuODQ3IDEzMC44MzIgMTIwLjA2OCAxMzAuMzc0IDEyMC4zNjcgMTI5Ljk3TDE3MC42NyA2MS45ODlMMTY5LjkyOSA2MS40NDA1QzE2OS40ODUgNjEuMTEyIDE2OC44NTkgNjEuMjA1NiAxNjguNTMgNjEuNjQ5NkwxNTIuMzExIDgzLjU2ODhDMTUyLjU4NiA4NC4yMDIzIDE1Mi41MjQgODQuOTYxMiAxNTIuMDg0IDg1LjU1NjJMMTQ5LjExIDg5LjU3NTVDMTQ4LjQ1MyA5MC40NjM0IDE0Ny4yMDEgOTAuNjUwNiAxNDYuMzEzIDg5Ljk5MzZDMTQ1LjQyNSA4OS4zMzY2IDE0NS4yMzggODguMDg0MSAxNDUuODk1IDg3LjE5NjJMMTQ3LjY3OSA4NC43ODQ3TDE0OC44NjkgODMuMTc2OUwxNjcuMzA4IDU4LjI1NzRDMTY4LjYyMiA1Ni40ODE1IDE3MS4xMjcgNTYuMTA3MiAxNzIuOTAzIDU3LjQyMTJMMTczLjY0NCA1Ny45Njk3TDE3Ni4wMjYgNTQuNzUwOVoiIGZpbGw9IiNENjQ1MDAiLz4KPC9zdmc+Cg==";
 
-const getNetwork = (network) => {
-    if (network === "betanet") {
-        return "BetaNet";
-    }
-    if (network === "testnet") {
-        return "TestNet";
-    }
-    if (network === "mainnet") {
-        return "MainNet";
-    }
-    return network;
-};
 class AlgoSignerClient extends BaseClient {
     #client;
     network;
-    constructor({ metadata, client, algosdk, algodClient, network, }) {
+    walletStore;
+    constructor({ metadata, client, algosdk, algodClient, network }) {
         super(metadata, algosdk, algodClient);
         this.#client = client;
         this.network = network;
+        this.walletStore = useWalletStore;
     }
     static metadata = {
         id: exports.PROVIDER_ID.ALGOSIGNER,
-        name: "AlgoSigner",
+        name: 'AlgoSigner',
         icon: ICON$3,
-        isWalletConnect: false,
+        isWalletConnect: false
     };
-    static async init({ algodOptions, algosdkStatic, network = DEFAULT_NETWORK$1, }) {
+    static async init({ algodOptions, algosdkStatic, network = DEFAULT_NETWORK$1 }) {
         try {
-            if (typeof window == "undefined" ||
-                window.AlgoSigner === undefined) {
-                throw new Error("AlgoSigner is not available.");
+            if (typeof window == 'undefined' || window.algorand === undefined) {
+                throw new Error('AlgoSigner is not available.');
             }
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
-            const algodClient = await getAlgodClient(algosdk, algodOptions);
-            const algosigner = window.AlgoSigner;
+            const algodClient = getAlgodClient(algosdk, algodOptions);
+            const algosigner = window.algorand;
             return new AlgoSignerClient({
                 metadata: AlgoSignerClient.metadata,
                 id: exports.PROVIDER_ID.ALGOSIGNER,
                 client: algosigner,
                 algosdk: algosdk,
                 algodClient: algodClient,
-                network,
+                network
             });
         }
         catch (e) {
             console.warn(e);
-            console.warn(`Error initializing ${AlgoSignerClient.metadata.name}.`, "Do you have the extension installed?", "https://www.purestake.com/technology/algosigner");
+            console.warn(`Error initializing ${AlgoSignerClient.metadata.name}.`, 'Do you have the extension installed?', 'https://www.purestake.com/technology/algosigner');
             return null;
         }
     }
     async connect() {
-        await this.#client.connect();
-        const accounts = await this.#client.accounts({
-            ledger: getNetwork(this.network),
-        });
+        const { accounts } = await this.#client.enable({ genesisID: this.getGenesisID() });
         if (accounts.length === 0) {
             throw new Error(`No accounts found for ${AlgoSignerClient.metadata.id}`);
         }
-        const mappedAccounts = accounts.map(({ address }, index) => ({
-            name: `AlgoSigner ${index + 1}`,
-            address,
-            providerId: AlgoSignerClient.metadata.id,
+        const mappedAccounts = await Promise.all(accounts.map(async (address, index) => {
+            // check to see if this is a rekeyed account
+            const { 'auth-addr': authAddr } = await this.getAccountInfo(address);
+            return {
+                name: `AlgoSigner ${index + 1}`,
+                address,
+                providerId: AlgoSignerClient.metadata.id,
+                ...(authAddr && { authAddr })
+            };
         }));
+        // sort the accounts in the order they were returned by AlgoSigner
+        mappedAccounts.sort((a, b) => accounts.indexOf(a.address) - accounts.indexOf(b.address));
         return {
             ...AlgoSignerClient.metadata,
-            accounts: mappedAccounts,
+            accounts: mappedAccounts
         };
     }
+    // eslint-disable-next-line @typescript-eslint/require-await
     async reconnect(onDisconnect) {
-        if (window === undefined ||
-            window.AlgoSigner === undefined) {
+        if (window === undefined || window.algorand === undefined) {
             onDisconnect();
         }
         return null;
     }
+    // eslint-disable-next-line @typescript-eslint/require-await
     async disconnect() {
         return;
     }
@@ -1659,49 +1653,70 @@ class AlgoSignerClient extends BaseClient {
         const decodedTxns = transactions.map((txn) => {
             return this.algosdk.decodeObj(txn);
         });
+        const signedIndexes = [];
         // Marshal the transactions,
         // and add the signers property if they shouldn't be signed.
         const txnsToSign = decodedTxns.reduce((acc, txn, i) => {
-            const isSigned = "txn" in txn;
-            const txnObj = {
-                txn: this.#client.encoding.msgpackToBase64(transactions[i]),
-            };
-            if (indexesToSign &&
-                indexesToSign.length &&
-                !indexesToSign.includes(i)) {
-                txnObj.txn = this.#client.encoding.msgpackToBase64(isSigned
-                    ? this.algosdk
-                        .decodeSignedTransaction(transactions[i])
-                        .txn.toByte()
-                    : this.algosdk.decodeUnsignedTransaction(transactions[i]).toByte());
-                txnObj.signers = [];
+            const isSigned = 'txn' in txn;
+            const sender = this.algosdk.encodeAddress(isSigned ? txn.txn.snd : txn.snd);
+            const authAddress = this.getAuthAddress(sender); // rekeyed-to account, or undefined
+            if (indexesToSign && indexesToSign.length && indexesToSign.includes(i)) {
+                signedIndexes.push(i);
+                acc.push({
+                    txn: this.#client.encoding.msgpackToBase64(transactions[i]),
+                    ...(authAddress && { authAddr: authAddress })
+                });
+            }
+            else if (!isSigned && connectedAccounts.includes(sender)) {
+                signedIndexes.push(i);
+                acc.push({
+                    txn: this.#client.encoding.msgpackToBase64(transactions[i]),
+                    ...(authAddress && { authAddr: authAddress })
+                });
             }
-            else if (!connectedAccounts.includes(this.algosdk.encodeAddress(isSigned ? txn.txn["snd"] : txn["snd"]))) {
-                txnObj.txn = this.#client.encoding.msgpackToBase64(isSigned
-                    ? this.algosdk
-                        .decodeSignedTransaction(transactions[i])
-                        .txn.toByte()
-                    : this.algosdk.decodeUnsignedTransaction(transactions[i]).toByte());
-                txnObj.signers = [];
+            else {
+                acc.push({
+                    txn: this.#client.encoding.msgpackToBase64(isSigned
+                        ? this.algosdk.decodeSignedTransaction(transactions[i]).txn.toByte()
+                        : this.algosdk.decodeUnsignedTransaction(transactions[i]).toByte()),
+                    signers: []
+                });
             }
-            acc.push(txnObj);
             return acc;
         }, []);
         // Sign them with the client.
-        const result = await this.#client.signTxn(txnsToSign);
+        const result = await this.#client.signTxns(txnsToSign);
         // Join the newly signed transactions with the original group of transactions
-        // if 'returnGroup' param is specified
-        const signedTxns = result.reduce((acc, txn, i) => {
-            if (txn) {
-                acc.push(new Uint8Array(Buffer.from(txn.blob, "base64")));
+        // if `returnGroup` is true
+        const signedTxns = transactions.reduce((acc, txn, i) => {
+            if (signedIndexes.includes(i)) {
+                const signedByUser = result[i];
+                signedByUser && acc.push(new Uint8Array(Buffer.from(signedByUser, 'base64')));
             }
             else if (returnGroup) {
-                acc.push(transactions[i]);
+                acc.push(txn);
             }
             return acc;
         }, []);
         return signedTxns;
     }
+    getGenesisID() {
+        if (this.network === 'betanet') {
+            return 'betanet-v1.0';
+        }
+        if (this.network === 'testnet') {
+            return 'testnet-v1.0';
+        }
+        if (this.network === 'mainnet') {
+            return 'mainnet-v1.0';
+        }
+        return this.network;
+    }
+    getAuthAddress(address) {
+        const accounts = this.walletStore.getState().accounts;
+        const account = accounts.find((acct) => acct.address === address && acct.providerId === this.metadata.id);
+        return account?.authAddr;
+    }
 }
 
 const ICON$2 = "data:image/svg+xml;base64," +
@@ -1860,10 +1875,12 @@ class WalletConnectClient extends BaseClient {
         // Sign them with the client.
         const result = await this.#client.sendCustomRequest(request);
         this.keepWCAliveStop();
+        // Check if the result is the same length as the transactions
+        const lengthsMatch = result.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 = result[i];
+                const signedByUser = lengthsMatch ? result[i] : result.shift();
                 signedByUser && acc.push(new Uint8Array(Buffer.from(signedByUser, 'base64')));
             }
             else if (returnGroup) {