fix: category selection

packages/widget/src/Widget.tsx

@@ -15,7 +15,6 @@ import { ActivityCompletePage } from "./pages/complete/pages/activity-complete.p
 import { PendingCompletePage } from "./pages/complete/pages/pending-complete.page";
 import { StakeCompletePage } from "./pages/complete/pages/stake-complete.page";
 import { UnstakeCompletePage } from "./pages/complete/pages/unstake-complete.page";
-import { AnimatedFooterContent } from "./pages/components/footer-outlet";
 import { Layout } from "./pages/components/layout";
 import { headerContainer } from "./pages/components/layout/styles.css";
 import { PoweredBy } from "./pages/components/powered-by";
@@ -174,8 +173,6 @@ export const Widget = () => {
             </AnimatePresence>
           </motion.div>
 
-          <AnimatedFooterContent />
-
           <PoweredBy />
         </LayoutGroup>
       </AnimationLayout>

packages/widget/src/components/atoms/token-icon/provider-icon/index.tsx

@@ -1,6 +1,5 @@
 import type { TokenDto } from "../../../../domain/types/tokens";
 import type { YieldMetadata } from "../../../../domain/types/yields";
-import { useSettings } from "../../../../providers/settings";
 import type { Atoms } from "../../../../styles/theme/atoms.css";
 import { NetworkLogoImage } from "../network-icon-image";
 import { TokenIconContainer } from "../token-icon-container";
@@ -19,25 +18,23 @@ export const ProviderIcon = ({
   tokenNetworkLogoHw?: Atoms["hw"];
   hideNetwork?: boolean;
 }) => {
-  const { hideNetworkLogo } = useSettings();
-
   return (
     <TokenIconContainer
       hideNetwork={hideNetwork}
       token={token}
       metadata={metadata}
     >
-      {({ fallbackUrl, mainUrl, name, networkLogoUri, providerIcon }) => (
+      {({ fallbackUrl, mainUrl, name, providerIcon }) => (
         <>
           <TokenIconImage
             fallbackUrl={fallbackUrl}
-            mainUrl={providerIcon}
+            mainUrl={mainUrl}
             name={name}
             tokenLogoHw={tokenLogoHw}
           />
-          {!hideNetwork && !hideNetworkLogo && (
+          {!hideNetwork && providerIcon && (
             <NetworkLogoImage
-              networkLogoUri={mainUrl || networkLogoUri}
+              networkLogoUri={providerIcon}
               networkName={token.network}
               tokenNetworkLogoHw={tokenNetworkLogoHw}
             />

packages/widget/src/components/molecules/estimated-reward-amounts/index.tsx

@@ -0,0 +1,135 @@
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { selectYieldRewardsText } from "../../../pages/details/earn-page/components/select-yield-section/styles.css";
+import { VerticalDivider } from "../../../pages-dashboard/common/components/divider";
+import { useSettings } from "../../../providers/settings";
+import { combineRecipeWithVariant } from "../../../utils/styles";
+import { Box } from "../../atoms/box";
+import { Text } from "../../atoms/typography/text";
+
+type EstimatedRewardAmountsProps = {
+  earnYearly: string;
+  earnMonthly: string;
+};
+
+export const EstimatedRewardAmounts = ({
+  earnYearly,
+  earnMonthly,
+}: EstimatedRewardAmountsProps) => {
+  const { variant } = useSettings();
+
+  if (variant === "utila" || variant === "porto") {
+    return (
+      <UtilaEarnYearlyOrMonthly
+        earnMonthly={earnMonthly}
+        earnYearly={earnYearly}
+      />
+    );
+  }
+
+  return (
+    <DefaultEarnYearlyOrMonthly
+      earnMonthly={earnMonthly}
+      earnYearly={earnYearly}
+    />
+  );
+};
+
+const DefaultEarnYearlyOrMonthly = ({
+  earnMonthly,
+  earnYearly,
+}: EstimatedRewardAmountsProps) => {
+  const { t } = useTranslation();
+  const { variant } = useSettings();
+
+  return (
+    <>
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        data-testid="estimated-reward__yearly"
+        data-rk="estimated-reward__yearly"
+        gap="2"
+      >
+        <Text
+          variant={{ type: "muted", weight: "normal" }}
+          className={clsx(
+            combineRecipeWithVariant({
+              rec: selectYieldRewardsText,
+              variant,
+            })
+          )}
+        >
+          {t(variant === "zerion" ? "details.rewards.yearly" : "shared.yearly")}
+        </Text>
+        <Text
+          variant={{ type: "muted", weight: "normal" }}
+          className={clsx(
+            combineRecipeWithVariant({
+              rec: selectYieldRewardsText,
+              variant,
+            })
+          )}
+        >
+          {earnYearly}
+        </Text>
+      </Box>
+
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        data-testid="estimated-reward__monthly"
+        data-rk="estimated-reward__monthly"
+        gap="2"
+      >
+        <Text
+          variant={{ type: "muted", weight: "normal" }}
+          className={clsx(
+            combineRecipeWithVariant({
+              rec: selectYieldRewardsText,
+              variant,
+            })
+          )}
+        >
+          {t("shared.monthly")}
+        </Text>
+        <Text
+          variant={{ type: "muted", weight: "normal" }}
+          className={clsx(
+            combineRecipeWithVariant({
+              rec: selectYieldRewardsText,
+              variant,
+            })
+          )}
+        >
+          {earnMonthly}
+        </Text>
+      </Box>
+    </>
+  );
+};
+
+const UtilaEarnYearlyOrMonthly = ({
+  earnMonthly,
+  earnYearly,
+}: EstimatedRewardAmountsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box display="flex" alignItems="center" gap="3" flexWrap="wrap">
+      <Box display="flex" alignItems="center" gap="2">
+        <Text variant={{ weight: "normal" }}>{t("shared.yearly")}</Text>
+        <Text variant={{ weight: "normal" }}>{earnYearly}</Text>
+      </Box>
+
+      <VerticalDivider />
+
+      <Box display="flex" alignItems="center" gap="2">
+        <Text variant={{ weight: "normal" }}>{t("shared.monthly")}</Text>
+        <Text variant={{ weight: "normal" }}>{earnMonthly}</Text>
+      </Box>
+    </Box>
+  );
+};

packages/widget/src/domain/types/yields.ts

@@ -71,9 +71,9 @@ export type ValidatorsConfig = Map<
 export type DashboardYieldCategory = "stake" | "defi" | "rwa";
 
 export const dashboardYieldCategories = [
-  "stake",
-  "defi",
   "rwa",
+  "defi",
+  "stake",
 ] as const satisfies ReadonlyArray<DashboardYieldCategory>;
 
 /**
@@ -106,10 +106,6 @@ export const getApiYieldTypesForDashboardCategory = (
     .filter(([, mapped]) => mapped === category)
     .map(([yieldType]) => yieldType);
 
-export const getDashboardYieldCategoryForApiYieldType = (
-  yieldType: ApiYieldType
-): DashboardYieldCategory => apiYieldTypeToDashboardCategory[yieldType];
-
 export const getDashboardYieldCategory = (
   yieldDto: YieldBase
 ): DashboardYieldCategory | null => {
@@ -221,7 +217,12 @@ export const isYieldActionArgRequired = (
 
 export const getYieldRewardTokens = (yieldDto: YieldBase) =>
   pipe(
-    yieldDto.rewardRate?.components?.map((component) => component.token) ?? [],
+    [
+      ...(yieldDto.outputToken ? [yieldDto.outputToken] : []),
+      ...(yieldDto.rewardRate?.components?.map(
+        (component) => component.token
+      ) ?? []),
+    ],
     EArray.dedupeWith((a, b) => tokenString(a) === tokenString(b)),
     EArray.filter((token) => tokenString(token) !== tokenString(yieldDto.token))
   );

packages/widget/src/hooks/api/use-dashboard-yield-catalog.ts

@@ -33,21 +33,18 @@ const staleTime = 1000 * 60 * 2;
  */
 export const useDashboardYieldCatalog = ({
   enabled = true,
-  network,
 }: {
   enabled?: boolean;
-  network?: TokenDto["network"] | null;
 } = {}) => {
-  const { network: walletNetwork } = useSKWallet();
+  const { network, isConnecting } = useSKWallet();
   const apiClient = useApiClient();
 
-  const catalogNetwork = network === null ? null : (network ?? walletNetwork);
-  const probeEnabled = enabled && (network === null || !!catalogNetwork);
+  const probeEnabled = enabled && !isConnecting;
 
   const results = useQueries({
     queries: dashboardYieldCategories.map((category) => {
       const params: YieldSummariesParams = {
-        ...(catalogNetwork ? { network: catalogNetwork } : {}),
+        ...(network ? { network: network } : {}),
         types: getApiYieldTypesForDashboardCategory(category),
         sort: "rewardRateDesc",
         limit: DEFAULT_YIELD_SUMMARIES_PAGE_LIMIT,

packages/widget/src/hooks/api/use-multi-yields.ts

@@ -34,6 +34,8 @@ import {
 } from "../../domain/types/stake";
 import type { SKWallet } from "../../domain/types/wallet";
 import {
+  type DashboardYieldCategory,
+  getDashboardYieldCategory,
   isNonZeroRewardRateYield,
   type ValidatorsConfig,
   type Yield,
@@ -152,7 +154,10 @@ export const getFirstEligibleYield = (
 ) =>
   EitherAsync(() =>
     params.queryClient.fetchQuery({
-      queryKey: getFirstEligibleYieldQueryKey(params.yieldIds),
+      queryKey: getFirstEligibleYieldQueryKey({
+        yieldIds: params.yieldIds,
+        dashboardYieldCategory: params.dashboardYieldCategory,
+      }),
       queryFn: () => firstValueFrom(firstEligibleYield$(params)),
     })
   ).mapLeft((e) => {
@@ -235,6 +240,7 @@ const firstEligibleYield$ = (args: {
   isConnected: boolean;
   network: SKWallet["network"];
   yieldIds: ReadonlyArray<string>;
+  dashboardYieldCategory?: DashboardYieldCategory | null;
   initParams: InitParams;
   positionsData: PositionsData;
   tokenBalanceAmount: BigNumber;
@@ -244,6 +250,11 @@ const firstEligibleYield$ = (args: {
   let defaultYield: YieldSummaryWithProvider | null = null;
 
   const successStream = multipleYieldSummaries$(args).pipe(
+    filter(
+      (y) =>
+        !args.dashboardYieldCategory ||
+        getDashboardYieldCategory(y) === args.dashboardYieldCategory
+    ),
     tap((v) => {
       if (isNonZeroRewardRateYield(v) || !defaultYield) {
         defaultYield = v;
@@ -332,18 +343,25 @@ const defaultFiltered = createSelector(
     })
 );
 
-const getFirstEligibleYieldQueryKey = (yieldIds: ReadonlyArray<string>) => [
-  "first-eligible-yield",
+const getFirstEligibleYieldQueryKey = ({
   yieldIds,
-];
+  dashboardYieldCategory,
+}: {
+  yieldIds: ReadonlyArray<string>;
+  dashboardYieldCategory?: DashboardYieldCategory | null;
+}) => ["first-eligible-yield", yieldIds, dashboardYieldCategory ?? null];
 
 export const getCachedFirstEligibleYield = ({
   queryClient,
   yieldIds,
+  dashboardYieldCategory,
 }: {
   queryClient: QueryClient;
   yieldIds: ReadonlyArray<string>;
+  dashboardYieldCategory?: DashboardYieldCategory | null;
 }) =>
   Maybe.fromNullable(
-    queryClient.getQueryData<Yield>(getFirstEligibleYieldQueryKey(yieldIds))
+    queryClient.getQueryData<Yield>(
+      getFirstEligibleYieldQueryKey({ yieldIds, dashboardYieldCategory })
+    )
   );