@ledgerhq/live-common 34.53.0-nightly.20251119110540 → 34.53.0

package/lib-es/wallet-api/react.js

@@ -1,45 +1,78 @@
 import { useMemo, useState, useEffect, useRef, useCallback } from "react";
-import { useDispatch } from "react-redux";
 import semver from "semver";
 import { intervalToDuration } from "date-fns";
-import { useWalletAPIServer as useWalletAPIServerRaw, } from "@ledgerhq/wallet-api-server";
+import { useWalletAPIServer as useWalletAPIServerRaw } from "@ledgerhq/wallet-api-server/lib/react";
+import { firstValueFrom } from "rxjs";
 import { first } from "rxjs/operators";
-import { getEnv } from "@ledgerhq/live-env";
-import { UserRefusedOnDevice } from "@ledgerhq/errors";
-import { endpoints as calEndpoints } from "@ledgerhq/cryptoassets/cal-client/state-manager/api";
-import { accountToWalletAPIAccount, currencyToWalletAPICurrency, setWalletApiIdForAccountId, } from "./converters";
+import { accountToWalletAPIAccount, currencyToWalletAPICurrency, getAccountIdFromWalletAccountId, } from "./converters";
 import { isWalletAPISupportedCurrency } from "./helpers";
 import { getMainAccount, getParentAccount } from "../account";
-import { listSupportedCurrencies } from "../currencies";
-import { getCryptoAssetsStore } from "../bridge/crypto-assets";
+import { listCurrencies, findCryptoCurrencyById, getCryptoCurrencyById } from "../currencies";
+import { getCryptoAssetsStore } from "../bridge/crypto-assets/index";
 import { bitcoinFamilyAccountGetXPubLogic, broadcastTransactionLogic, startExchangeLogic, completeExchangeLogic, receiveOnAccountLogic, signMessageLogic, signTransactionLogic, bitcoinFamilyAccountGetAddressLogic, bitcoinFamilyAccountGetPublicKeyLogic, signRawTransactionLogic, } from "./logic";
 import { getAccountBridge } from "../bridge";
+import { getEnv } from "@ledgerhq/live-env";
 import openTransportAsSubject from "../hw/openTransportAsSubject";
+import { UserRefusedOnDevice } from "@ledgerhq/errors";
 import { DISCOVER_INITIAL_CATEGORY, INITIAL_PLATFORM_STATE, MAX_RECENTLY_USED_LENGTH, } from "./constants";
-import { useCurrenciesUnderFeatureFlag } from "../modularDrawer/hooks/useCurrenciesUnderFeatureFlag";
 export function safeGetRefValue(ref) {
     if (!ref.current) {
         throw new Error("Ref objects doesn't have a current value");
     }
     return ref.current;
 }
-export function useSetWalletAPIAccounts(accounts) {
-    useEffect(() => {
-        accounts.forEach(account => {
-            setWalletApiIdForAccountId(account.id);
+export function useWalletAPIAccounts(walletState, accounts) {
+    return useMemo(() => {
+        return accounts.map(account => {
+            const parentAccount = getParentAccount(account, accounts);
+            return accountToWalletAPIAccount(walletState, account, parentAccount);
         });
-    }, [accounts]);
+    }, [walletState, accounts]);
 }
-export function useDAppManifestCurrencyIds(manifest) {
+export function useWalletAPICurrencies() {
+    return useMemo(() => {
+        return listCurrencies(true).reduce((filtered, currency) => {
+            if (isWalletAPISupportedCurrency(currency)) {
+                filtered.push(currencyToWalletAPICurrency(currency));
+            }
+            return filtered;
+        }, []);
+    }, []);
+}
+export function useManifestCurrencies(manifest) {
     return useMemo(() => {
         return (manifest.dapp?.networks.map(network => {
-            return network.currency;
+            return getCryptoCurrencyById(network.currency);
         }) ?? []);
     }, [manifest.dapp?.networks]);
 }
+export function useGetAccountIds(accounts$) {
+    const [accounts, setAccounts] = useState([]);
+    useEffect(() => {
+        if (!accounts$) {
+            return undefined;
+        }
+        const subscription = accounts$.subscribe(walletAccounts => {
+            setAccounts(walletAccounts);
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [accounts$]);
+    return useMemo(() => {
+        if (!accounts$) {
+            return undefined;
+        }
+        return accounts.reduce((accountIds, account) => {
+            accountIds.set(getAccountIdFromWalletAccountId(account.id), true);
+            return accountIds;
+        }, new Map());
+    }, [accounts, accounts$]);
+}
 export function usePermission(manifest) {
     return useMemo(() => ({
-        methodIds: manifest.permissions,
+        currencyIds: manifest.currencies === "*" ? ["**"] : manifest.currencies,
+        methodIds: manifest.permissions, // TODO remove when using the correct manifest type
     }), [manifest]);
 }
 function useTransport(postMessage) {
@@ -57,7 +90,7 @@ export function useConfig({ appId, userId, tracking, wallet, mevProtected, }) {
         tracking,
         wallet,
         mevProtected,
-    }), [appId, mevProtected, tracking, userId, wallet]);
+    }), [appId, tracking, userId, wallet]);
 }
 function useDeviceTransport({ manifest, tracking }) {
     const ref = useRef();
@@ -107,257 +140,73 @@ function useDeviceTransport({ manifest, tracking }) {
     return useMemo(() => ({ ref, subscribe, close, exchange }), [close, exchange, subscribe]);
 }
 export function useWalletAPIServer({ walletState, manifest, accounts, tracking, config, webviewHook, uiHook: { "account.request": uiAccountRequest, "account.receive": uiAccountReceive, "message.sign": uiMessageSign, "storage.get": uiStorageGet, "storage.set": uiStorageSet, "transaction.sign": uiTxSign, "transaction.signRaw": uiTxSignRaw, "transaction.broadcast": uiTxBroadcast, "device.transport": uiDeviceTransport, "device.select": uiDeviceSelect, "exchange.start": uiExchangeStart, "exchange.complete": uiExchangeComplete, }, customHandlers, }) {
-    const dispatch = useDispatch();
-    const { deactivatedCurrencyIds } = useCurrenciesUnderFeatureFlag();
     const permission = usePermission(manifest);
     const transport = useTransport(webviewHook.postMessage);
     const [widgetLoaded, setWidgetLoaded] = useState(false);
-    // We need to set the wallet API account IDs mapping upfront
-    // If we don't want the map to be empty when requesting an account
-    useSetWalletAPIAccounts(accounts);
+    const walletAPIAccounts = useWalletAPIAccounts(walletState, accounts);
+    const walletAPICurrencies = useWalletAPICurrencies();
     const { server, onMessage } = useWalletAPIServerRaw({
         transport,
         config,
+        accounts: walletAPIAccounts,
+        currencies: walletAPICurrencies,
         permission,
         customHandlers,
     });
     useEffect(() => {
         tracking.load(manifest);
     }, [tracking, manifest]);
-    // TODO: refactor each handler into its own logic function for clarity
-    useEffect(() => {
-        server.setHandler("currency.list", async ({ currencyIds }) => {
-            tracking.currencyListRequested(manifest);
-            try {
-                // 1. Parse manifest currency patterns to determine what to include
-                const manifestCurrencyIds = manifest.currencies === "*" ? ["**"] : manifest.currencies;
-                // 2. Apply query filter early - intersect with manifest patterns
-                const queryCurrencyIdsSet = currencyIds ? new Set(currencyIds) : undefined;
-                let effectiveCurrencyIds = manifestCurrencyIds;
-                if (queryCurrencyIdsSet) {
-                    // If we have a query filter, narrow down what we need to fetch
-                    effectiveCurrencyIds = manifestCurrencyIds.flatMap(manifestId => {
-                        if (manifestId === "**") {
-                            // Query can ask for anything, so use the query list
-                            return [...queryCurrencyIdsSet];
-                        }
-                        else if (manifestId.endsWith("/**")) {
-                            // Pattern like "ethereum/**" - keep tokens from query that match this family
-                            const family = manifestId.slice(0, -3);
-                            return [...queryCurrencyIdsSet].filter(qId => qId.startsWith(`${family}/`));
-                        }
-                        else if (queryCurrencyIdsSet.has(manifestId)) {
-                            // Specific currency/token that's in the query
-                            return [manifestId];
-                        }
-                        // Not in query, skip it
-                        return [];
-                    });
-                }
-                // 3. Parse effective currency IDs to determine what to fetch
-                const includeAllCurrencies = effectiveCurrencyIds.includes("**");
-                const specificCurrencies = new Set();
-                const tokenFamilies = new Set();
-                const specificTokenIds = new Set();
-                for (const id of effectiveCurrencyIds) {
-                    if (id === "**") {
-                        // Already handled above
-                        continue;
-                    }
-                    else if (id.endsWith("/**")) {
-                        // Pattern like "ethereum/**" or "solana/**" - include tokens for this family
-                        const family = id.slice(0, -3);
-                        tokenFamilies.add(family);
-                    }
-                    else if (id.includes("/")) {
-                        // Specific token ID like "ethereum/erc20/usd__coin"
-                        specificTokenIds.add(id);
-                    }
-                    else {
-                        // Specific currency like "bitcoin" or "ethereum"
-                        specificCurrencies.add(id);
-                    }
-                }
-                // 4. Gather all supported parent currencies
-                const allCurrencies = listSupportedCurrencies().reduce((acc, c) => {
-                    if (isWalletAPISupportedCurrency(c) && !deactivatedCurrencyIds.has(c.id))
-                        acc.push(currencyToWalletAPICurrency(c));
-                    return acc;
-                }, []);
-                // 5. Determine which currencies to include based on patterns
-                let includedCurrencies = [];
-                if (includeAllCurrencies) {
-                    includedCurrencies = allCurrencies;
-                }
-                else {
-                    includedCurrencies = allCurrencies.filter(c => specificCurrencies.has(c.id));
-                }
-                // 6. Fetch specific tokens by ID if any
-                const specificTokens = [];
-                if (specificTokenIds.size > 0) {
-                    const tokenPromises = [...specificTokenIds].map(async (tokenId) => {
-                        const token = await getCryptoAssetsStore().findTokenById(tokenId);
-                        return token ? currencyToWalletAPICurrency(token) : null;
-                    });
-                    const resolvedTokens = await Promise.all(tokenPromises);
-                    specificTokens.push(...resolvedTokens.filter((t) => t !== null));
-                }
-                // 7. Determine which token families to fetch (only if not already fetched as specific tokens)
-                const familiesToFetch = new Set();
-                if (includeAllCurrencies) {
-                    // Fetch tokens for all currency families
-                    allCurrencies.forEach(c => {
-                        if (c.type === "CryptoCurrency")
-                            familiesToFetch.add(c.family);
-                    });
-                }
-                else if (tokenFamilies.size > 0) {
-                    // Only fetch tokens for families explicitly marked with /**
-                    tokenFamilies.forEach(family => familiesToFetch.add(family));
-                }
-                // 8. Fetch tokens for relevant families
-                const fetchAllPagesForFamily = async (family) => {
-                    const args = { networkFamily: family, pageSize: 1000 };
-                    let hasNextPage = true;
-                    let data;
-                    while (hasNextPage) {
-                        const querySub = dispatch(calEndpoints.getTokensData.initiate(args, data ? { direction: "forward" } : undefined));
-                        try {
-                            const result = await querySub;
-                            data = result.data;
-                            hasNextPage = result.hasNextPage;
-                            if (result.error)
-                                throw result.error;
-                        }
-                        finally {
-                            querySub.unsubscribe();
-                        }
-                    }
-                    return (data?.pages ?? []).flatMap(p => p.tokens);
-                };
-                const tokensByFamily = await Promise.all([...familiesToFetch].map(f => fetchAllPagesForFamily(f)));
-                // 9. Combine all results (no additional filter needed since we pre-filtered)
-                const result = tokensByFamily.reduce((acc, tokens) => [...acc, ...tokens.map(t => currencyToWalletAPICurrency(t))], [...includedCurrencies, ...specificTokens]);
-                tracking.currencyListSuccess(manifest);
-                return result;
-            }
-            catch (err) {
-                tracking.currencyListFail(manifest);
-                throw err;
-            }
-        });
-    }, [walletState, manifest, server, tracking, dispatch, deactivatedCurrencyIds]);
-    useEffect(() => {
-        server.setHandler("account.list", ({ currencyIds }) => {
-            tracking.accountListRequested(manifest);
-            try {
-                // 1. Parse manifest currency patterns to determine what to include
-                const manifestCurrencyIds = manifest.currencies === "*" ? ["**"] : manifest.currencies;
-                // 2. Apply query filter early - intersect with manifest patterns
-                const queryCurrencyIdsSet = currencyIds ? new Set(currencyIds) : undefined;
-                let effectiveCurrencyIds = manifestCurrencyIds;
-                if (queryCurrencyIdsSet) {
-                    // If we have a query filter, narrow down what we need to check
-                    effectiveCurrencyIds = manifestCurrencyIds.flatMap(manifestId => {
-                        if (manifestId === "**") {
-                            // Query can ask for anything, so use the query list
-                            return [...queryCurrencyIdsSet];
-                        }
-                        else if (manifestId.endsWith("/**")) {
-                            // Pattern like "ethereum/**" - keep tokens from query that match this family
-                            const family = manifestId.slice(0, -3);
-                            return [...queryCurrencyIdsSet].filter(qId => qId.startsWith(`${family}/`));
-                        }
-                        else if (queryCurrencyIdsSet.has(manifestId)) {
-                            // Specific currency/token that's in the query
-                            return [manifestId];
-                        }
-                        // Not in query, skip it
-                        return [];
-                    });
-                }
-                // 3. Build a set of allowed currency IDs based on effective patterns
-                const allowedCurrencyIds = new Set();
-                const includeAllCurrencies = effectiveCurrencyIds.includes("**");
-                const tokenFamilyPrefixes = new Set();
-                for (const id of effectiveCurrencyIds) {
-                    if (id === "**") {
-                        // Will match all currencies
-                        continue;
-                    }
-                    else if (id.endsWith("/**")) {
-                        // Pattern like "ethereum/**" - store prefix for matching
-                        const family = id.slice(0, -3);
-                        tokenFamilyPrefixes.add(family);
-                    }
-                    else {
-                        // Specific currency/token ID
-                        allowedCurrencyIds.add(id);
-                    }
-                }
-                // 4. Filter accounts based on effective currency IDs
-                const wapiAccounts = accounts.reduce((acc, account) => {
-                    const parentAccount = getParentAccount(account, accounts);
-                    const accountCurrencyId = account.type === "TokenAccount" ? account.token.id : account.currency.id;
-                    const parentCurrencyId = account.type === "TokenAccount" ? account.token.parentCurrency.id : account.currency.id;
-                    // Check if account currency ID matches the effective patterns
-                    const isAllowed = includeAllCurrencies ||
-                        allowedCurrencyIds.has(accountCurrencyId) ||
-                        tokenFamilyPrefixes.has(parentCurrencyId);
-                    if (isAllowed) {
-                        acc.push(accountToWalletAPIAccount(walletState, account, parentAccount));
-                    }
-                    return acc;
-                }, []);
-                tracking.accountListSuccess(manifest);
-                return wapiAccounts;
-            }
-            catch (err) {
-                tracking.accountListFail(manifest);
-                throw err;
-            }
-        });
-    }, [walletState, manifest, server, tracking, uiAccountRequest, accounts]);
     useEffect(() => {
         if (!uiAccountRequest)
             return;
-        server.setHandler("account.request", async ({ currencyIds, drawerConfiguration, areCurrenciesFiltered, useCase }) => {
+        server.setHandler("account.request", async ({ accounts$, currencies$, drawerConfiguration, areCurrenciesFiltered, useCase }) => {
             tracking.requestAccountRequested(manifest);
+            const currencies = await firstValueFrom(currencies$);
             return new Promise((resolve, reject) => {
-                let done = false;
-                try {
-                    uiAccountRequest({
-                        currencyIds,
-                        drawerConfiguration,
-                        areCurrenciesFiltered,
-                        useCase,
-                        onSuccess: (account, parentAccount) => {
-                            if (done)
-                                return;
-                            done = true;
-                            tracking.requestAccountSuccess(manifest);
-                            resolve(accountToWalletAPIAccount(walletState, account, parentAccount));
-                        },
-                        onCancel: () => {
-                            if (done)
-                                return;
-                            done = true;
-                            tracking.requestAccountFail(manifest);
-                            reject(new Error("Canceled by user"));
-                        },
-                    });
-                }
-                catch (error) {
-                    tracking.requestAccountFail(manifest);
-                    reject(error);
-                }
+                (async () => {
+                    try {
+                        // handle no curencies selected case
+                        const currencyList = [];
+                        for (const { id } of currencies) {
+                            const currency = findCryptoCurrencyById(id) || (await getCryptoAssetsStore().findTokenById(id));
+                            if (currency) {
+                                currencyList.push(currency);
+                            }
+                        }
+                        let done = false;
+                        uiAccountRequest({
+                            accounts$,
+                            currencies: currencyList,
+                            drawerConfiguration,
+                            areCurrenciesFiltered,
+                            useCase,
+                            onSuccess: (account, parentAccount) => {
+                                if (done)
+                                    return;
+                                done = true;
+                                tracking.requestAccountSuccess(manifest);
+                                resolve(accountToWalletAPIAccount(walletState, account, parentAccount));
+                            },
+                            onCancel: () => {
+                                if (done)
+                                    return;
+                                done = true;
+                                tracking.requestAccountFail(manifest);
+                                reject(new Error("Canceled by user"));
+                            },
+                        });
+                    }
+                    catch (error) {
+                        reject(error);
+                    }
+                })();
             });
         });
     }, [walletState, manifest, server, tracking, uiAccountRequest]);
     useEffect(() => {
         if (!uiAccountReceive)
             return;
-        server.setHandler("account.receive", ({ accountId, tokenCurrency }) => receiveOnAccountLogic(walletState, { manifest, accounts, tracking }, accountId, (account, parentAccount, accountAddress) => new Promise((resolve, reject) => {
+        server.setHandler("account.receive", ({ account, tokenCurrency }) => receiveOnAccountLogic(walletState, { manifest, accounts, tracking }, account.id, (account, parentAccount, accountAddress) => new Promise((resolve, reject) => {
             let done = false;
             return uiAccountReceive({
                 account,
@@ -390,7 +239,7 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
     useEffect(() => {
         if (!uiMessageSign)
             return;
-        server.setHandler("message.sign", ({ accountId, message, options }) => signMessageLogic({ manifest, accounts, tracking }, accountId, message.toString("hex"), (account, message) => new Promise((resolve, reject) => {
+        server.setHandler("message.sign", ({ account, message, options }) => signMessageLogic({ manifest, accounts, tracking }, account.id, message.toString("hex"), (account, message) => new Promise((resolve, reject) => {
             let done = false;
             return uiMessageSign({
                 account,
@@ -435,38 +284,31 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
     useEffect(() => {
         if (!uiTxSign)
             return;
-        server.setHandler("transaction.sign", async ({ accountId, tokenCurrency, transaction, options }) => {
-            let currency;
-            const signedOperation = await signTransactionLogic({ manifest, accounts, tracking }, accountId, transaction, (account, parentAccount, signFlowInfos) => {
-                currency =
-                    account.type === "TokenAccount"
-                        ? account.token.parentCurrency.id
-                        : account.currency.id;
-                return new Promise((resolve, reject) => {
-                    let done = false;
-                    return uiTxSign({
-                        account,
-                        parentAccount,
-                        signFlowInfos,
-                        options,
-                        onSuccess: signedOperation => {
-                            if (done)
-                                return;
-                            done = true;
-                            tracking.signTransactionSuccess(manifest);
-                            resolve(signedOperation);
-                        },
-                        onError: error => {
-                            if (done)
-                                return;
-                            done = true;
-                            tracking.signTransactionFail(manifest);
-                            reject(error);
-                        },
-                    });
+        server.setHandler("transaction.sign", async ({ account, tokenCurrency, transaction, options }) => {
+            const signedOperation = await signTransactionLogic({ manifest, accounts, tracking }, account.id, transaction, (account, parentAccount, signFlowInfos) => new Promise((resolve, reject) => {
+                let done = false;
+                return uiTxSign({
+                    account,
+                    parentAccount,
+                    signFlowInfos,
+                    options,
+                    onSuccess: signedOperation => {
+                        if (done)
+                            return;
+                        done = true;
+                        tracking.signTransactionSuccess(manifest);
+                        resolve(signedOperation);
+                    },
+                    onError: error => {
+                        if (done)
+                            return;
+                        done = true;
+                        tracking.signTransactionFail(manifest);
+                        reject(error);
+                    },
                 });
-            }, tokenCurrency);
-            return currency === "solana"
+            }), tokenCurrency);
+            return account.currency === "solana"
                 ? Buffer.from(signedOperation.signature, "hex")
                 : Buffer.from(signedOperation.signature);
         });
@@ -474,8 +316,8 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
     useEffect(() => {
         if (!uiTxSignRaw)
             return;
-        server.setHandler("transaction.signRaw", async ({ accountId, transaction, broadcast, options }) => {
-            const signedOperation = await signRawTransactionLogic({ manifest, accounts, tracking }, accountId, transaction, (account, parentAccount, tx) => new Promise((resolve, reject) => {
+        server.setHandler("transaction.signRaw", async ({ account, transaction, broadcast, options }) => {
+            const signedOperation = await signRawTransactionLogic({ manifest, accounts, tracking }, account.id, transaction, (account, parentAccount, tx) => new Promise((resolve, reject) => {
                 let done = false;
                 return uiTxSignRaw({
                     account,
@@ -500,7 +342,7 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
             }));
             let hash;
             if (broadcast) {
-                hash = await broadcastTransactionLogic({ manifest, accounts, tracking }, accountId, signedOperation, async (account, parentAccount, signedOperation) => {
+                hash = await broadcastTransactionLogic({ manifest, accounts, tracking }, account.id, signedOperation, async (account, parentAccount, signedOperation) => {
                     const bridge = getAccountBridge(account, parentAccount);
                     const mainAccount = getMainAccount(account, parentAccount);
                     let optimisticOperation = signedOperation.operation;
@@ -532,9 +374,9 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
     useEffect(() => {
         if (!uiTxSign)
             return;
-        server.setHandler("transaction.signAndBroadcast", async ({ accountId, tokenCurrency, transaction, options }) => {
+        server.setHandler("transaction.signAndBroadcast", async ({ account, tokenCurrency, transaction, options }) => {
             const sponsored = transaction.family === "ethereum" && transaction.sponsored;
-            const signedTransaction = await signTransactionLogic({ manifest, accounts, tracking }, accountId, transaction, (account, parentAccount, signFlowInfos) => new Promise((resolve, reject) => {
+            const signedTransaction = await signTransactionLogic({ manifest, accounts, tracking }, account.id, transaction, (account, parentAccount, signFlowInfos) => new Promise((resolve, reject) => {
                 let done = false;
                 return uiTxSign({
                     account,
@@ -557,7 +399,7 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
                     },
                 });
             }), tokenCurrency);
-            return broadcastTransactionLogic({ manifest, accounts, tracking }, accountId, signedTransaction, async (account, parentAccount, signedOperation) => {
+            return broadcastTransactionLogic({ manifest, accounts, tracking }, account.id, signedTransaction, async (account, parentAccount, signedOperation) => {
                 const bridge = getAccountBridge(account, parentAccount);
                 const mainAccount = getMainAccount(account, parentAccount);
                 let optimisticOperation = signedOperation.operation;
@@ -763,8 +605,8 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
             // retrofit of the exchange params to fit the old platform spec
             const request = {
                 provider: params.provider,
-                fromAccountId: params.fromAccountId,
-                toAccountId: params.exchangeType === "SWAP" ? params.toAccountId : undefined,
+                fromAccountId: params.fromAccount.id,
+                toAccountId: params.exchangeType === "SWAP" ? params.toAccount.id : undefined,
                 transaction: params.transaction,
                 binaryPayload: params.binaryPayload.toString("hex"),
                 signature: params.signature.toString("hex"),
@@ -797,7 +639,7 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
         });
     }, [uiExchangeComplete, accounts, manifest, server, tracking]);
     return {
-        widgetLoaded: widgetLoaded,
+        widgetLoaded,
         onMessage,
         onLoad,
         onReload,
@@ -917,9 +759,9 @@ export function useRecentlyUsed(manifests, [recentlyUsedManifestsDb, setState])
                 ...res,
                 usedAt: calculateTimeDiff(recentlyUsed.usedAt),
             }
-            : undefined;
+            : res;
     })
-        .filter((manifest) => manifest !== undefined), [recentlyUsedManifestsDb, manifests]);
+        .filter(manifest => manifest !== undefined), [recentlyUsedManifestsDb, manifests]);
     const append = useCallback((manifest) => {
         setState(state => {
             const index = state.recentlyUsed.findIndex(({ id }) => id === manifest.id);