@ledgerhq/live-common 34.53.0-nightly.20251114023758 → 34.53.0-nightly.20251118023800

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

@@ -1,78 +1,45 @@
 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/lib/react";
-import { firstValueFrom } from "rxjs";
+import { useWalletAPIServer as useWalletAPIServerRaw, } from "@ledgerhq/wallet-api-server";
 import { first } from "rxjs/operators";
-import { accountToWalletAPIAccount, currencyToWalletAPICurrency, getAccountIdFromWalletAccountId, } from "./converters";
+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 { isWalletAPISupportedCurrency } from "./helpers";
 import { getMainAccount, getParentAccount } from "../account";
-import { listCurrencies, findCryptoCurrencyById, getCryptoCurrencyById } from "../currencies";
-import { getCryptoAssetsStore } from "../bridge/crypto-assets/index";
+import { listSupportedCurrencies } from "../currencies";
+import { getCryptoAssetsStore } from "../bridge/crypto-assets";
 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 useWalletAPIAccounts(walletState, accounts) {
-    return useMemo(() => {
-        return accounts.map(account => {
-            const parentAccount = getParentAccount(account, accounts);
-            return accountToWalletAPIAccount(walletState, account, parentAccount);
+export function useSetWalletAPIAccounts(accounts) {
+    useEffect(() => {
+        accounts.forEach(account => {
+            setWalletApiIdForAccountId(account.id);
         });
-    }, [walletState, accounts]);
+    }, [accounts]);
 }
-export function useWalletAPICurrencies() {
-    return useMemo(() => {
-        return listCurrencies(true).reduce((filtered, currency) => {
-            if (isWalletAPISupportedCurrency(currency)) {
-                filtered.push(currencyToWalletAPICurrency(currency));
-            }
-            return filtered;
-        }, []);
-    }, []);
-}
-export function useManifestCurrencies(manifest) {
+export function useDAppManifestCurrencyIds(manifest) {
     return useMemo(() => {
         return (manifest.dapp?.networks.map(network => {
-            return getCryptoCurrencyById(network.currency);
+            return 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(() => ({
-        currencyIds: manifest.currencies === "*" ? ["**"] : manifest.currencies,
-        methodIds: manifest.permissions, // TODO remove when using the correct manifest type
+        methodIds: manifest.permissions,
     }), [manifest]);
 }
 function useTransport(postMessage) {
@@ -90,7 +57,7 @@ export function useConfig({ appId, userId, tracking, wallet, mevProtected, }) {
         tracking,
         wallet,
         mevProtected,
-    }), [appId, tracking, userId, wallet]);
+    }), [appId, mevProtected, tracking, userId, wallet]);
 }
 function useDeviceTransport({ manifest, tracking }) {
     const ref = useRef();
@@ -140,73 +107,257 @@ 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);
-    const walletAPIAccounts = useWalletAPIAccounts(walletState, accounts);
-    const walletAPICurrencies = useWalletAPICurrencies();
+    // 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 { 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 ({ accounts$, currencies$, drawerConfiguration, areCurrenciesFiltered, useCase }) => {
+        server.setHandler("account.request", async ({ currencyIds, drawerConfiguration, areCurrenciesFiltered, useCase }) => {
             tracking.requestAccountRequested(manifest);
-            const currencies = await firstValueFrom(currencies$);
             return new Promise((resolve, reject) => {
-                (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);
-                    }
-                })();
+                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);
+                }
             });
         });
     }, [walletState, manifest, server, tracking, uiAccountRequest]);
     useEffect(() => {
         if (!uiAccountReceive)
             return;
-        server.setHandler("account.receive", ({ account, tokenCurrency }) => receiveOnAccountLogic(walletState, { manifest, accounts, tracking }, account.id, (account, parentAccount, accountAddress) => new Promise((resolve, reject) => {
+        server.setHandler("account.receive", ({ accountId, tokenCurrency }) => receiveOnAccountLogic(walletState, { manifest, accounts, tracking }, accountId, (account, parentAccount, accountAddress) => new Promise((resolve, reject) => {
             let done = false;
             return uiAccountReceive({
                 account,
@@ -239,7 +390,7 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
     useEffect(() => {
         if (!uiMessageSign)
             return;
-        server.setHandler("message.sign", ({ account, message, options }) => signMessageLogic({ manifest, accounts, tracking }, account.id, message.toString("hex"), (account, message) => new Promise((resolve, reject) => {
+        server.setHandler("message.sign", ({ accountId, message, options }) => signMessageLogic({ manifest, accounts, tracking }, accountId, message.toString("hex"), (account, message) => new Promise((resolve, reject) => {
             let done = false;
             return uiMessageSign({
                 account,
@@ -284,31 +435,38 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
     useEffect(() => {
         if (!uiTxSign)
             return;
-        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);
-                    },
+        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);
+                        },
+                    });
                 });
-            }), tokenCurrency);
-            return account.currency === "solana"
+            }, tokenCurrency);
+            return currency === "solana"
                 ? Buffer.from(signedOperation.signature, "hex")
                 : Buffer.from(signedOperation.signature);
         });
@@ -316,8 +474,8 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
     useEffect(() => {
         if (!uiTxSignRaw)
             return;
-        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) => {
+        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) => {
                 let done = false;
                 return uiTxSignRaw({
                     account,
@@ -342,7 +500,7 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
             }));
             let hash;
             if (broadcast) {
-                hash = await broadcastTransactionLogic({ manifest, accounts, tracking }, account.id, signedOperation, async (account, parentAccount, signedOperation) => {
+                hash = await broadcastTransactionLogic({ manifest, accounts, tracking }, accountId, signedOperation, async (account, parentAccount, signedOperation) => {
                     const bridge = getAccountBridge(account, parentAccount);
                     const mainAccount = getMainAccount(account, parentAccount);
                     let optimisticOperation = signedOperation.operation;
@@ -374,9 +532,9 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
     useEffect(() => {
         if (!uiTxSign)
             return;
-        server.setHandler("transaction.signAndBroadcast", async ({ account, tokenCurrency, transaction, options }) => {
+        server.setHandler("transaction.signAndBroadcast", async ({ accountId, tokenCurrency, transaction, options }) => {
             const sponsored = transaction.family === "ethereum" && transaction.sponsored;
-            const signedTransaction = await signTransactionLogic({ manifest, accounts, tracking }, account.id, transaction, (account, parentAccount, signFlowInfos) => new Promise((resolve, reject) => {
+            const signedTransaction = await signTransactionLogic({ manifest, accounts, tracking }, accountId, transaction, (account, parentAccount, signFlowInfos) => new Promise((resolve, reject) => {
                 let done = false;
                 return uiTxSign({
                     account,
@@ -399,7 +557,7 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
                     },
                 });
             }), tokenCurrency);
-            return broadcastTransactionLogic({ manifest, accounts, tracking }, account.id, signedTransaction, async (account, parentAccount, signedOperation) => {
+            return broadcastTransactionLogic({ manifest, accounts, tracking }, accountId, signedTransaction, async (account, parentAccount, signedOperation) => {
                 const bridge = getAccountBridge(account, parentAccount);
                 const mainAccount = getMainAccount(account, parentAccount);
                 let optimisticOperation = signedOperation.operation;
@@ -605,8 +763,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.fromAccount.id,
-                toAccountId: params.exchangeType === "SWAP" ? params.toAccount.id : undefined,
+                fromAccountId: params.fromAccountId,
+                toAccountId: params.exchangeType === "SWAP" ? params.toAccountId : undefined,
                 transaction: params.transaction,
                 binaryPayload: params.binaryPayload.toString("hex"),
                 signature: params.signature.toString("hex"),
@@ -639,7 +797,7 @@ export function useWalletAPIServer({ walletState, manifest, accounts, tracking,
         });
     }, [uiExchangeComplete, accounts, manifest, server, tracking]);
     return {
-        widgetLoaded,
+        widgetLoaded: widgetLoaded,
         onMessage,
         onLoad,
         onReload,
@@ -759,9 +917,9 @@ export function useRecentlyUsed(manifests, [recentlyUsedManifestsDb, setState])
                 ...res,
                 usedAt: calculateTimeDiff(recentlyUsed.usedAt),
             }
-            : res;
+            : undefined;
     })
-        .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);