Feature/move history fetch to bg

config/jest/setupTests.tsx

@@ -40,6 +40,14 @@ jest.mock("helpers/metrics", () => ({
   storeBalanceMetricData: () => {},
 }));
 
+jest.mock("popup/App", () => ({
+  store: {
+    getState: () => ({
+      cache: {},
+    }),
+  },
+}));
+
 jest.mock("react-i18next", () => ({
   // this mock makes sure any components using the translate hook can use it without a warning being shown
   useTranslation: () => ({

extension/e2e-tests/loadAccount.test.ts

@@ -454,6 +454,6 @@ test("Clears cache and fetches balances if it's been 2 minutes since the last ba
 
   // make sure we fetch the new balance quickly rather than waiting for the 30 second interval
   await expect(page.getByTestId("asset-amount")).toHaveText("999,111", {
-    timeout: 500,
+    timeout: 3000,
   });
 });

extension/src/helpers/hooks/useGetHistory.tsx

@@ -1,26 +1,40 @@
 import { useReducer } from "react";
+import { useDispatch, useSelector } from "react-redux";
 
+import { historySelector, saveHistoryForAccount } from "popup/ducks/cache";
 import { getAccountHistory } from "@shared/api/internal";
 import { NetworkDetails } from "@shared/constants/stellar";
 import { initialState, reducer } from "helpers/request";
 import { HorizonOperation } from "@shared/api/types";
+import { AppDispatch } from "popup/App";
 
 export type HistoryResponse = HorizonOperation[];
 
 function useGetHistory() {
+  const reduxDispatch = useDispatch<AppDispatch>();
   const [state, dispatch] = useReducer(
     reducer<HistoryResponse, unknown>,
     initialState,
   );
+  const cachedHistory = useSelector(historySelector);
 
   const fetchData = async (
     publicKey: string,
     networkDetails: NetworkDetails,
+    useCache = false,
   ): Promise<HistoryResponse | Error> => {
     dispatch({ type: "FETCH_DATA_START" });
     try {
-      const data = await getAccountHistory(publicKey, networkDetails);
+      const cachedHistoryData =
+        cachedHistory[networkDetails.network]?.[publicKey];
+      const data =
+        useCache && cachedHistoryData
+          ? cachedHistoryData
+          : await getAccountHistory(publicKey, networkDetails);
       dispatch({ type: "FETCH_DATA_SUCCESS", payload: data });
+      reduxDispatch(
+        saveHistoryForAccount({ publicKey, history: data, networkDetails }),
+      );
       return data;
     } catch (error) {
       dispatch({ type: "FETCH_DATA_ERROR", payload: error });

extension/src/helpers/hooks/useTokenDetails.tsx

@@ -0,0 +1,69 @@
+import { useReducer } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { tokenDetailsSelector, saveTokenDetails } from "popup/ducks/cache";
+import { getTokenDetails } from "@shared/api/internal";
+import { initialState, reducer } from "helpers/request";
+import { NetworkDetails } from "@shared/constants/stellar";
+import { AppDispatch, store } from "popup/App";
+
+export type TokenDetailsResponse = {
+  decimals: number;
+  symbol: string;
+  name: string;
+} | null;
+
+function useTokenDetails() {
+  const reduxDispatch = useDispatch<AppDispatch>();
+  const [state, dispatch] = useReducer(
+    reducer<TokenDetailsResponse, unknown>,
+    initialState,
+  );
+  const cachedTokenDetails = useSelector(tokenDetailsSelector);
+
+  const fetchData = async ({
+    contractId,
+    useCache = true,
+    publicKey,
+    networkDetails,
+  }: {
+    contractId: string;
+    useCache?: boolean;
+    publicKey: string;
+    networkDetails: NetworkDetails;
+  }): Promise<TokenDetailsResponse | Error> => {
+    dispatch({ type: "FETCH_DATA_START" });
+    try {
+      /*
+        Unlike the other cache hooks, this hook may be called multiple times within one render.
+        For example, when constructing the history rows, this hook can be called many times as we iterate over the history items. 
+        If we have cached token details earlier in the loop, we won't have access to the update redux state until the next render.
+        To workaround this, we will also check the redux state manually here rather than waiting for the next render to 
+        update the selector hook for us.
+      */
+      const cachedTokenDetailsData =
+        cachedTokenDetails[contractId] ||
+        store.getState().cache.tokenDetails[contractId];
+
+      const data =
+        useCache && cachedTokenDetailsData
+          ? cachedTokenDetailsData
+          : await getTokenDetails({ contractId, publicKey, networkDetails });
+      if (data && Object.keys(data).length) {
+        reduxDispatch(saveTokenDetails({ contractId, ...data }));
+      }
+      dispatch({ type: "FETCH_DATA_SUCCESS", payload: data });
+      return data;
+    } catch (error) {
+      dispatch({ type: "FETCH_DATA_ERROR", payload: error });
+      throw new Error("Failed to fetch token details", { cause: error });
+    }
+  };
+
+  return {
+    state,
+    fetchData,
+  };
+}
+
+export { useTokenDetails };

extension/src/popup/components/__tests__/AssetDetail.test.tsx

@@ -8,6 +8,38 @@ import { TESTNET_NETWORK_DETAILS } from "@shared/constants/stellar";
 import { APPLICATION_STATE as ApplicationState } from "@shared/constants/applicationState";
 import * as ApiInternal from "@shared/api/internal";
 import { mockAccounts, Wrapper, mockBalances } from "popup/__testHelpers__";
+import { AppDataType } from "helpers/hooks/useGetAppData";
+
+const mockHistoryData = {
+  type: AppDataType.RESOLVED,
+  operationsByAsset: {
+    native: [
+      {
+        fetchTokenDetailsaction: "Received",
+        actionIcon: "received",
+
+        amount: "+0 XLM",
+
+        date: "Sep 19",
+        id: "253426134438383665",
+
+        metadata: {
+          createdAt: "2025-09-19T21:15:45Z",
+          feeCharged: "10000",
+          memo: "Buy NXR Earn Native XLM!",
+          type: "payment",
+          isDustPayment: true,
+          isPayment: true,
+          isReceiving: true,
+          nonLabelAmount: "0 XLM",
+          to: "G1",
+        },
+        rowIcon: <></>,
+        rowText: "XLM",
+      },
+    ],
+  },
+} as any;
 
 describe("AssetDetail", () => {
   it("renders asset detail", async () => {
@@ -50,6 +82,7 @@ describe("AssetDetail", () => {
       setSelectedAsset: () => null,
       setIsDetailViewShowing: () => null,
       subentryCount: 0,
+      historyData: mockHistoryData,
     };
 
     render(
@@ -112,6 +145,7 @@ describe("AssetDetail", () => {
       setSelectedAsset: () => null,
       setIsDetailViewShowing: () => null,
       subentryCount: 0,
+      historyData: mockHistoryData,
     };
 
     render(
@@ -175,6 +209,7 @@ describe("AssetDetail", () => {
       setSelectedAsset: () => null,
       setIsDetailViewShowing: () => null,
       subentryCount: 0,
+      historyData: mockHistoryData,
     };
 
     render(
@@ -242,6 +277,7 @@ describe("AssetDetail", () => {
       setSelectedAsset: () => null,
       setIsDetailViewShowing: () => null,
       subentryCount: 0,
+      historyData: mockHistoryData,
     };
 
     render(

extension/src/popup/components/account/AssetDetail/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { BigNumber } from "bignumber.js";
 import { useTranslation } from "react-i18next";
-import { CopyText, Icon, Link } from "@stellar/design-system";
+import { CopyText, Icon, Link, Loader } from "@stellar/design-system";
 
 import { ApiTokenPrice, ApiTokenPrices } from "@shared/api/types";
 import { NetworkDetails } from "@shared/constants/stellar";
@@ -40,11 +40,53 @@ import {
   LiquidityPoolShareAsset,
 } from "@shared/api/types/account-balance";
 import { OperationDataRow } from "popup/views/AccountHistory/hooks/useGetHistoryData";
+import { AccountHistoryData } from "popup/views/Account/hooks/useGetAccountHistoryData";
+import { AppDataType } from "helpers/hooks/useGetAppData";
 
 import "./styles.scss";
 
+const AssetDetailOperations = ({
+  filteredAssetOperations,
+  accountBalances,
+  publicKey,
+  networkDetails,
+  setActiveAssetId,
+}: {
+  filteredAssetOperations: OperationDataRow[];
+  accountBalances: AccountBalances;
+  publicKey: string;
+  networkDetails: NetworkDetails;
+  setActiveAssetId: (id: string) => void;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      {filteredAssetOperations.length ? (
+        <div className="AssetDetail__list" data-testid="AssetDetail__list">
+          <>
+            {filteredAssetOperations.map((operation) => (
+              <HistoryItem
+                key={operation.id}
+                accountBalances={accountBalances}
+                operation={operation}
+                publicKey={publicKey}
+                networkDetails={networkDetails}
+                setActiveHistoryDetailId={() => setActiveAssetId(operation.id)}
+              />
+            ))}
+          </>
+        </div>
+      ) : (
+        <div className="AssetDetail__empty" data-testid="AssetDetail__empty">
+          {t("No transactions to show")}
+        </div>
+      )}
+    </>
+  );
+};
+
 interface AssetDetailProps {
-  assetOperations: OperationDataRow[];
+  historyData: AccountHistoryData | null;
   accountBalances: AccountBalances;
   networkDetails: NetworkDetails;
   publicKey: string;
@@ -55,7 +97,7 @@ interface AssetDetailProps {
 }
 
 export const AssetDetail = ({
-  assetOperations,
+  historyData,
   accountBalances,
   networkDetails,
   publicKey,
@@ -65,10 +107,10 @@ export const AssetDetail = ({
   tokenPrices,
 }: AssetDetailProps) => {
   const { t } = useTranslation();
-  const { isHideDustEnabled } = useSelector(settingsSelector);
   const [optionsOpen, setOptionsOpen] = React.useState(false);
   const activeOptionsRef = useRef<HTMLDivElement>(null);
   const isNative = selectedAsset === "native";
+  const { isHideDustEnabled } = useSelector(settingsSelector);
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -129,27 +171,33 @@ export const AssetDetail = ({
     assetIssuer,
   });
 
-  if (!assetOperations && !isSorobanAsset) {
+  if (historyData?.type === AppDataType.REROUTE) {
     return null;
   }
 
-  const sortedAssetOperations = assetOperations.filter((operation) => {
-    if (operation.metadata.isDustPayment && isHideDustEnabled) {
-      return false;
-    }
+  const assetOperations =
+    historyData?.operationsByAsset?.[selectedAsset] || null;
 
-    return true;
-  });
+  let filteredAssetOperations = null;
+  let activeOperation = null;
+
+  if (assetOperations) {
+    filteredAssetOperations = assetOperations.filter((operation) => {
+      if (operation.metadata.isDustPayment && isHideDustEnabled) {
+        return false;
+      }
+
+      return true;
+    });
+    activeOperation =
+      filteredAssetOperations.find((op) => op.id === activeAssetId) || null;
+  }
 
   if (assetIssuer && !assetDomain && !assetError && !isSorobanAsset) {
     // if we have an asset issuer, wait until we have the asset domain before continuing
     return <Loading />;
   }
 
-  const activeOperation = sortedAssetOperations.find(
-    (op) => op.id === activeAssetId,
-  );
-
   const isStellarExpertSupported =
     isMainnet(networkDetails) || isTestnet(networkDetails);
   const stellarExpertAssetLinkSlug = isSorobanBalance(selectedBalance)
@@ -296,30 +344,21 @@ export const AssetDetail = ({
               </div>
             </div>
           </div>
-          {sortedAssetOperations.length ? (
-            <div className="AssetDetail__list" data-testid="AssetDetail__list">
-              <>
-                {sortedAssetOperations.map((operation) => (
-                  <HistoryItem
-                    key={operation.id}
-                    accountBalances={accountBalances}
-                    operation={operation}
-                    publicKey={publicKey}
-                    networkDetails={networkDetails}
-                    setActiveHistoryDetailId={() =>
-                      setActiveAssetId(operation.id)
-                    }
-                  />
-                ))}
-              </>
-            </div>
-          ) : (
+          {filteredAssetOperations === null ? (
             <div
-              className="AssetDetail__empty"
-              data-testid="AssetDetail__empty"
+              className="AssetDetail__list AssetDetail__list--loading"
+              data-testid="AssetDetail__list__loader"
             >
-              {t("No transactions to show")}
+              <Loader />
             </div>
+          ) : (
+            <AssetDetailOperations
+              filteredAssetOperations={filteredAssetOperations}
+              accountBalances={accountBalances}
+              publicKey={publicKey}
+              networkDetails={networkDetails}
+              setActiveAssetId={setActiveAssetId}
+            />
           )}
         </div>
       </View.Content>

extension/src/popup/components/account/AssetDetail/styles.scss

@@ -72,6 +72,12 @@
     flex-direction: column;
     gap: pxToRem(24px);
     margin-top: pxToRem(32px);
+
+    &--loading {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
   }
 
   .SubviewHeader {