@txnlab/use-wallet 1.0.3 → 1.0.4

package/README.md

@@ -457,6 +457,12 @@ In the root of `use-wallet` directory, run:
 yarn link react
 ```
 
+## Used By
+
+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)
+
 ## License
 
 See the [LICENSE](https://github.com/TxnLab/use-wallet/blob/main/LICENSE.md) file for license rights and limitations (MIT)

package/dist/cjs/hooks/useWallet.d.ts

@@ -1,5 +1,5 @@
 import type algosdk from "algosdk";
-import { PROVIDER_ID, TransactionsArray } from "../types";
+import { PROVIDER_ID, TransactionsArray, Provider } from "../types";
 export { PROVIDER_ID };
 export default function useWallet(): {
     clients: Partial<{
@@ -11,112 +11,7 @@ export default function useWallet(): {
         exodus: Promise<import("../clients/base/base").default | null>;
         walletconnect: Promise<import("../clients/base/base").default | null>;
     }> | null;
-    providers: ({
-        accounts: import("../types").Account[];
-        isActive: boolean;
-        isConnected: boolean;
-        connect: () => Promise<void>;
-        disconnect: () => Promise<void>;
-        reconnect: () => Promise<void>;
-        setActiveProvider: () => Promise<void>;
-        setActiveAccount: (account: string) => Promise<void>;
-        metadata: {
-            id: PROVIDER_ID;
-            name: string;
-            icon: string;
-            isWalletConnect: boolean;
-        };
-    } | {
-        accounts: import("../types").Account[];
-        isActive: boolean;
-        isConnected: boolean;
-        connect: () => Promise<void>;
-        disconnect: () => Promise<void>;
-        reconnect: () => Promise<void>;
-        setActiveProvider: () => Promise<void>;
-        setActiveAccount: (account: string) => Promise<void>;
-        metadata: {
-            id: PROVIDER_ID;
-            name: string;
-            icon: string;
-            isWalletConnect: boolean;
-        };
-    } | {
-        accounts: import("../types").Account[];
-        isActive: boolean;
-        isConnected: boolean;
-        connect: () => Promise<void>;
-        disconnect: () => Promise<void>;
-        reconnect: () => Promise<void>;
-        setActiveProvider: () => Promise<void>;
-        setActiveAccount: (account: string) => Promise<void>;
-        metadata: {
-            id: PROVIDER_ID;
-            name: string;
-            icon: string;
-            isWalletConnect: boolean;
-        };
-    } | {
-        accounts: import("../types").Account[];
-        isActive: boolean;
-        isConnected: boolean;
-        connect: () => Promise<void>;
-        disconnect: () => Promise<void>;
-        reconnect: () => Promise<void>;
-        setActiveProvider: () => Promise<void>;
-        setActiveAccount: (account: string) => Promise<void>;
-        metadata: {
-            id: PROVIDER_ID;
-            name: string;
-            icon: string;
-            isWalletConnect: boolean;
-        };
-    } | {
-        accounts: import("../types").Account[];
-        isActive: boolean;
-        isConnected: boolean;
-        connect: () => Promise<void>;
-        disconnect: () => Promise<void>;
-        reconnect: () => Promise<void>;
-        setActiveProvider: () => Promise<void>;
-        setActiveAccount: (account: string) => Promise<void>;
-        metadata: {
-            id: PROVIDER_ID;
-            name: string;
-            icon: string;
-            isWalletConnect: boolean;
-        };
-    } | {
-        accounts: import("../types").Account[];
-        isActive: boolean;
-        isConnected: boolean;
-        connect: () => Promise<void>;
-        disconnect: () => Promise<void>;
-        reconnect: () => Promise<void>;
-        setActiveProvider: () => Promise<void>;
-        setActiveAccount: (account: string) => Promise<void>;
-        metadata: {
-            id: PROVIDER_ID;
-            name: string;
-            icon: string;
-            isWalletConnect: boolean;
-        };
-    } | {
-        accounts: import("../types").Account[];
-        isActive: boolean;
-        isConnected: boolean;
-        connect: () => Promise<void>;
-        disconnect: () => Promise<void>;
-        reconnect: () => Promise<void>;
-        setActiveProvider: () => Promise<void>;
-        setActiveAccount: (account: string) => Promise<void>;
-        metadata: {
-            id: PROVIDER_ID;
-            name: string;
-            icon: string;
-            isWalletConnect: boolean;
-        };
-    })[] | null;
+    providers: Provider[] | null;
     connectedAccounts: import("../types").Account[];
     connectedActiveAccounts: import("../types").Account[];
     activeAccount: import("../types").Account | null;

package/dist/cjs/index.js

@@ -886,6 +886,14 @@ const walletStoreSelector = (state) => ({
     addAccounts: state.addAccounts,
     removeAccounts: state.removeAccounts,
 });
+const emptyState = {
+    accounts: [],
+    activeAccount: null,
+    setActiveAccount: (account) => { },
+    clearActiveAccount: (id) => { },
+    addAccounts: (accounts) => { },
+    removeAccounts: (providerId) => { },
+};
 const useWalletStore = create()(immer(persist(devtools((set, _get) => ({
     accounts: [],
     activeAccount: null,
@@ -919,8 +927,17 @@ const useWalletStore = create()(immer(persist(devtools((set, _get) => ({
     },
 })), {
     name: "txnlab-use-wallet",
-    version: 0, // increment to deprecate stored data
-})));
+    version: 1, // increment to deprecate stored data
+})));
+// This a fix to ensure zustand never hydrates the store before React hydrates the page
+// otherwise it causes a mismatch between SSR and client render
+// see: https://github.com/pmndrs/zustand/issues/1145
+const useHydratedWalletStore = ((selector, compare) => {
+    const store = useWalletStore(selector, compare);
+    const [hydrated, setHydrated] = require$$0.useState(false);
+    require$$0.useEffect(() => setHydrated(true), []);
+    return hydrated ? store : selector(emptyState);
+});
 
 const ClientContext = require$$0.createContext(null);
 var clientStore = ClientContext.Provider;
@@ -1789,12 +1806,10 @@ class WalletConnectClient extends BaseClient {
             const QRCodeModal = modalStatic ||
                 (await import('algorand-walletconnect-qrcode-modal')).default;
             const walletConnect = new WalletConnect({
-                ...(clientOptions
-                    ? clientOptions
-                    : {
-                        bridge: "https://bridge.walletconnect.org",
-                        qrcodeModal: QRCodeModal,
-                    }),
+                bridge: "https://bridge.walletconnect.org",
+                qrcodeModal: QRCodeModal,
+                storageId: 'walletconnect-generic',
+                ...(clientOptions || {})
             });
             const algosdk = algosdkStatic || (await Algod.init(algodOptions)).algosdk;
             const algodClient = await getAlgodClient(algosdk, algodOptions);
@@ -2141,17 +2156,20 @@ function shallow(objA, objB) {
 }
 
 function useWallet() {
+    const [providers, setProviders] = require$$0.useState(null);
     const clients = require$$0.useContext(ClientContext);
-    const { activeAccount, accounts: connectedAccounts, setActiveAccount: _setActiveAccount, addAccounts, } = useWalletStore(walletStoreSelector, shallow);
+    const { activeAccount, accounts: connectedAccounts, setActiveAccount: _setActiveAccount, addAccounts, } = useHydratedWalletStore(walletStoreSelector, shallow);
     const getAccountsByProvider = (id) => {
         return connectedAccounts.filter((account) => account.providerId === id);
     };
     const connectedActiveAccounts = require$$0.useMemo(() => connectedAccounts.filter((account) => account.providerId === activeAccount?.providerId), [connectedAccounts, activeAccount]);
-    const providers = require$$0.useMemo(() => {
-        if (!clients)
-            return null;
+    require$$0.useEffect(() => {
+        if (!clients) {
+            setProviders(null);
+            return;
+        }
         const supportedClients = Object.keys(clients);
-        return supportedClients.map((id) => {
+        setProviders(supportedClients.map((id) => {
             return {
                 ...allClients[id],
                 accounts: getAccountsByProvider(id),
@@ -2163,7 +2181,7 @@ function useWallet() {
                 setActiveProvider: () => setActive(id),
                 setActiveAccount: (account) => selectActiveAccount(id, account),
             };
-        });
+        }));
     }, [clients, connectedAccounts, connectedActiveAccounts, activeAccount]);
     const getClient = async (id) => {
         if (!id)
@@ -2173,27 +2191,12 @@ function useWallet() {
             throw new Error("Client not found for ID");
         return client;
     };
-    const disconnectWCSessions = async (id) => {
-        if (!allClients[id].metadata.isWalletConnect) {
-            return;
-        }
-        if (!providers) {
-            return;
-        }
-        const wcSessions = Object.values(providers).filter((p) => p.metadata.id !== id &&
-            p.metadata.isWalletConnect &&
-            (p.isConnected || p.isActive));
-        for (const session of wcSessions) {
-            await disconnect(session.metadata.id);
-        }
-    };
     const selectActiveAccount = async (providerId, address) => {
         try {
             const account = connectedActiveAccounts.find((acct) => acct.address === address && acct.providerId === providerId);
             if (!account) {
                 throw new Error(`No accounts with address ${address} found.`);
             }
-            await disconnectWCSessions(account.providerId);
             _setActiveAccount(account);
         }
         catch (e) {
@@ -2202,7 +2205,6 @@ function useWallet() {
     };
     const connect = async (id) => {
         try {
-            await disconnectWCSessions(id);
             const walletClient = await getClient(id);
             const walletInfo = await walletClient?.connect(() => clearAccounts(id));
             if (!walletInfo || !walletInfo.accounts.length) {
@@ -2242,7 +2244,6 @@ function useWallet() {
     };
     const setActive = async (id) => {
         try {
-            await disconnectWCSessions(id);
             const accounts = getAccountsByProvider(id);
             _setActiveAccount(accounts[0]);
         }
@@ -2318,6 +2319,10 @@ function useWallet() {
 
 const initializeProviders = (providers, nodeConfig, algosdkStatic) => {
     const initializedProviders = {};
+    if (typeof window === "undefined") {
+        console.warn("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 || {};
     if (!providers || providers.length === 0)
         for (const [id, client] of Object.entries(allClients)) {