feat(portfolio): add exchange provider fallback handling

frontend/src/lib/components/portfolio/HeldTokensCard.svelte

@@ -7,6 +7,7 @@
   import { AppPath } from "$lib/constants/routes.constants";
   import { authSignedInStore } from "$lib/derived/auth.derived";
   import { i18n } from "$lib/stores/i18n";
+  import { icpSwapTickersStore } from "$lib/stores/icp-swap.store";
   import type { UserTokenData } from "$lib/types/tokens-page";
   import { formatNumber } from "$lib/utils/format.utils";
   import { shouldShowInfoRow } from "$lib/utils/portfolio.utils";
@@ -107,10 +108,15 @@
               role="cell"
               aria-label={`${heldToken.title} USD: ${heldToken?.balanceInUsd ?? 0}`}
             >
-              $<PrivacyAwareAmount
-                value={formatNumber(heldToken?.balanceInUsd ?? 0)}
-                length={3}
-              />
+              $
+              {#if $icpSwapTickersStore !== "error"}
+                <PrivacyAwareAmount
+                  value={formatNumber(heldToken?.balanceInUsd ?? 0)}
+                  length={3}
+                />
+              {:else}
+                {PRICE_NOT_AVAILABLE_PLACEHOLDER}
+              {/if}
             </div>
           </svelte:element>
         {/each}

frontend/src/lib/components/portfolio/StakedTokensCard.svelte

@@ -8,6 +8,7 @@
   import { AppPath } from "$lib/constants/routes.constants";
   import { authSignedInStore } from "$lib/derived/auth.derived";
   import { i18n } from "$lib/stores/i18n";
+  import { icpSwapTickersStore } from "$lib/stores/icp-swap.store";
   import type { TableProject } from "$lib/types/staking";
   import { formatNumber } from "$lib/utils/format.utils";
   import { shouldShowInfoRow } from "$lib/utils/portfolio.utils";
@@ -106,10 +107,15 @@
               role="cell"
               aria-label={`${stakedToken.title} USD: ${stakedToken?.stakeInUsd ?? 0}`}
             >
-              $<PrivacyAwareAmount
-                value={formatNumber(stakedToken?.stakeInUsd ?? 0)}
-                length={3}
-              />
+              $
+              {#if $icpSwapTickersStore !== "error"}
+                <PrivacyAwareAmount
+                  value={formatNumber(stakedToken?.stakeInUsd ?? 0)}
+                  length={3}
+                />
+              {:else}
+                {PRICE_NOT_AVAILABLE_PLACEHOLDER}
+              {/if}
             </div>
             <div
               class="stake-native"

frontend/src/lib/components/portfolio/TokensCardHeader.svelte

@@ -2,6 +2,7 @@
   import PrivacyAwareAmount from "$lib/components/ui/PrivacyAwareAmount.svelte";
   import { PRICE_NOT_AVAILABLE_PLACEHOLDER } from "$lib/constants/constants";
   import { authSignedInStore } from "$lib/derived/auth.derived";
+  import { icpSwapTickersStore } from "$lib/stores/icp-swap.store";
   import { formatCurrencyNumber } from "$lib/utils/format.utils";
   import { IconRight } from "@dfinity/gix-components";
   import type { Snippet } from "svelte";
@@ -17,7 +18,7 @@
   const { usdAmount, href, title, linkText, icon }: Props = $props();
 
   const usdAmountFormatted = $derived(
-    $authSignedInStore
+    $authSignedInStore && $icpSwapTickersStore !== "error"
       ? formatCurrencyNumber(usdAmount)
       : PRICE_NOT_AVAILABLE_PLACEHOLDER
   );

frontend/src/lib/pages/Portfolio.svelte

@@ -13,6 +13,7 @@
   import StakedTokensCard from "$lib/components/portfolio/StakedTokensCard.svelte";
   import TotalAssetsCard from "$lib/components/portfolio/TotalAssetsCard.svelte";
   import { authSignedInStore } from "$lib/derived/auth.derived";
+  import { icpSwapUsdPricesStore } from "$lib/derived/icp-swap.derived";
   import type { SnsFullProject } from "$lib/derived/sns/sns-projects.derived";
   import type { TableProject } from "$lib/types/staking";
   import type { UserToken } from "$lib/types/tokens-page";
@@ -44,6 +45,8 @@
     adoptedSnsProposals,
   }: Props = $props();
 
+  const isExchangeProviderDown = $derived($icpSwapUsdPricesStore === "error");
+
   const totalTokensBalanceInUsd = $derived(getTotalBalanceInUsd(userTokens));
   const hasUnpricedTokens = $derived(
     userTokens.some(
@@ -82,7 +85,7 @@
     userTokens.some((token) => token.balance === "loading")
   );
   const heldTokensCard: TokensCardType = $derived(
-    !$authSignedInStore
+    !$authSignedInStore || isExchangeProviderDown
       ? "full"
       : areHeldTokensLoading
         ? "skeleton"
@@ -95,7 +98,7 @@
     tableProjects.some((project) => project.isStakeLoading)
   );
   const stakedTokensCard: TokensCardType = $derived(
-    !$authSignedInStore
+    !$authSignedInStore || isExchangeProviderDown
       ? "full"
       : areStakedTokensLoading
         ? "skeleton"
@@ -121,13 +124,15 @@
     getTopHeldTokens({
       userTokens: userTokens,
       isSignedIn: $authSignedInStore,
+      areExchangePairsAvailable: !isExchangeProviderDown,
     })
   );
 
   const topStakedTokens = $derived(
     getTopStakedTokens({
       projects: tableProjects,
       isSignedIn: $authSignedInStore,
+      areExchangePairsAvailable: !isExchangeProviderDown,
     })
   );
 

frontend/src/lib/utils/portfolio.utils.ts

@@ -10,6 +10,7 @@ import {
   mergeComparators,
 } from "$lib/utils/sort.utils";
 import {
+  compareByNeuronCount,
   compareByProjectTitle,
   compareIcpFirst,
 } from "$lib/utils/staking.utils";
@@ -34,12 +35,22 @@ const compareTokensByUsdBalance = createDescendingComparator(
   (token: UserTokenData) => token?.balanceInUsd ?? 0 > 0
 );
 
+const compareTokensByBalance = createDescendingComparator(
+  (token: UserTokenData) => token?.balance ?? 0 > 0
+);
+
 const compareTokens = mergeComparators([
   compareTokensIcpFirst,
   compareTokensByUsdBalance,
   compareTokensByImportance,
 ]);
 
+const compareTokensWhenExchangeProviderIsDown = mergeComparators([
+  compareTokensIcpFirst,
+  compareTokensByBalance,
+  compareTokensByImportance,
+]);
+
 /**
  * Filters and sorts user tokens based on specific criteria:
  * - Always prioritizes ICP token first
@@ -51,21 +62,30 @@ const compareTokens = mergeComparators([
 export const getTopHeldTokens = ({
   userTokens,
   isSignedIn = false,
+  areExchangePairsAvailable = true,
 }: {
   userTokens: UserToken[];
   isSignedIn?: boolean;
+  areExchangePairsAvailable?: boolean;
 }): UserTokenData[] => {
   const topTokens = userTokens
     .filter(isUserTokenData)
     .filter(({ universeId }) =>
       filterCyclesTransferStation({ universeId: universeId.toText() })
     )
-    .sort(compareTokens)
+    .sort(
+      areExchangePairsAvailable
+        ? compareTokensWhenExchangeProviderIsDown
+        : compareTokens
+    )
     .slice(0, MAX_NUMBER_OF_ITEMS);
 
   if (!isSignedIn) return topTokens;
 
-  return topTokens.filter((token) => token?.balanceInUsd ?? 0 > 0);
+  const propertyToFilterBy = areExchangePairsAvailable
+    ? "balanceInUsd"
+    : "balance";
+  return topTokens.filter((token) => token?.[propertyToFilterBy] ?? 0 > 0);
 };
 
 const compareProjectsByUsdBalance = createDescendingComparator(
@@ -78,6 +98,12 @@ const compareProjects = mergeComparators([
   compareByProjectTitle,
 ]);
 
+const compareProjectsWhenExchangeProviderIsDown = mergeComparators([
+  compareIcpFirst,
+  compareByNeuronCount,
+  compareByProjectTitle,
+]);
+
 /**
  * Filters and sorts projects based on specific criteria:
  * - Always prioritizes ICP project first
@@ -89,18 +115,27 @@ const compareProjects = mergeComparators([
 export const getTopStakedTokens = ({
   projects,
   isSignedIn = false,
+  areExchangePairsAvailable = true,
 }: {
   projects: TableProject[];
   isSignedIn?: boolean;
+  areExchangePairsAvailable?: boolean;
 }): TableProject[] => {
   const topProjects = [...projects]
     .filter(filterCyclesTransferStation)
-    .sort(compareProjects)
+    .sort(
+      areExchangePairsAvailable
+        ? compareProjects
+        : compareProjectsWhenExchangeProviderIsDown
+    )
     .slice(0, MAX_NUMBER_OF_ITEMS);
 
   if (!isSignedIn) return topProjects;
 
-  return topProjects.filter((project) => project?.stakeInUsd ?? 0 > 0);
+  const propertyToFilterBy = areExchangePairsAvailable ? "stakeInUsd" : "stake";
+  return topProjects.filter(
+    (project) => project?.[propertyToFilterBy] ?? 0 > 0
+  );
 };
 
 /**