feat(widget): show error screen when no yields enabled for api key

packages/widget/src/App.tsx

@@ -9,6 +9,8 @@ import { createMemoryRouter, RouterProvider } from "react-router";
 import { preloadImages } from "./assets/images";
 import { Box } from "./components/atoms/box";
 import { Dashboard } from "./Dashboard";
+import { useNoEnabledYields } from "./hooks/use-no-enabled-yields";
+import NoEnabledYields from "./pages/components/no-enabled-yields";
 import { Providers } from "./providers";
 import { SettingsContextProvider, useSettings } from "./providers/settings";
 import type { SettingsProps, VariantProps } from "./providers/settings/types";
@@ -23,6 +25,10 @@ const App = () => {
 
   const { dashboardVariant } = useSettings();
 
+  const noEnabledYields = useNoEnabledYields();
+
+  if (noEnabledYields) return <NoEnabledYields />;
+
   return dashboardVariant ? <Dashboard /> : <Widget />;
 };
 

packages/widget/src/common/get-enabled-networks.ts

@@ -4,6 +4,19 @@ import { config } from "../config";
 import type { Networks } from "../domain/types/chains/networks";
 import type { ApiClient } from "../providers/api/api-client";
 
+export const enabledNetworksQueryKey = [config.appPrefix, "enabled-networks"];
+
+export const getEnabledNetworksQueryFn = async ({
+  apiClient,
+}: {
+  apiClient: ApiClient;
+}) =>
+  new Set(
+    (await apiClient.legacy.YieldControllerGetMyNetworks(undefined)).map(
+      (network) => network as Networks
+    )
+  );
+
 export const getEnabledNetworks = ({
   apiClient,
   queryClient,
@@ -14,12 +27,7 @@ export const getEnabledNetworks = ({
   EitherAsync(() =>
     queryClient.fetchQuery({
       staleTime: Number.POSITIVE_INFINITY,
-      queryKey: [config.appPrefix, "enabled-networks"],
-      queryFn: async () =>
-        new Set(
-          (await apiClient.legacy.YieldControllerGetMyNetworks(undefined)).map(
-            (network) => network as Networks
-          )
-        ),
+      queryKey: enabledNetworksQueryKey,
+      queryFn: () => getEnabledNetworksQueryFn({ apiClient }),
     })
   ).mapLeft(() => new Error("Could not get enabled networks"));

packages/widget/src/hooks/use-no-enabled-yields.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  enabledNetworksQueryKey,
+  getEnabledNetworksQueryFn,
+} from "../common/get-enabled-networks";
+import { useApiClient } from "../providers/api/api-client-provider";
+
+export const useNoEnabledYields = () => {
+  const apiClient = useApiClient();
+
+  const { data, isSuccess } = useQuery({
+    staleTime: Number.POSITIVE_INFINITY,
+    queryKey: enabledNetworksQueryKey,
+    queryFn: () => getEnabledNetworksQueryFn({ apiClient }),
+  });
+
+  return isSuccess && data.size === 0;
+};

packages/widget/src/pages/components/no-enabled-yields/index.tsx

@@ -0,0 +1,59 @@
+import { useTranslation } from "react-i18next";
+import { Box } from "../../../components/atoms/box";
+import { Heading } from "../../../components/atoms/typography/heading";
+import { Text } from "../../../components/atoms/typography/text";
+import { wrapper } from "../../../pages-dashboard/common/components/styles.css";
+import { useSettings } from "../../../providers/settings";
+import { combineRecipeWithVariant } from "../../../utils/styles";
+import { PoweredBy } from "../powered-by";
+import { background, container, dashboardBackground } from "./style.css";
+
+const NoEnabledYields = () => {
+  const { t } = useTranslation();
+  const { dashboardVariant, variant } = useSettings();
+
+  return (
+    <Box
+      style={{ borderRadius: "14px" }}
+      className={
+        dashboardVariant
+          ? [
+              combineRecipeWithVariant({ rec: wrapper, variant }),
+              dashboardBackground,
+            ]
+          : background
+      }
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        paddingBottom={{ mobile: "8" }}
+        className={container}
+        data-testid="no-enabled-yields"
+      >
+        <Box>
+          <Heading
+            marginBottom="4"
+            textAlign="center"
+            variant={{ level: "h4" }}
+          >
+            {t("help_modals.no_enabled_yields.title")}
+          </Heading>
+
+          <Text
+            variant={{ type: "muted", weight: "normal" }}
+            textAlign="center"
+            marginBottom="4"
+          >
+            {t("help_modals.no_enabled_yields.description")}
+          </Text>
+        </Box>
+      </Box>
+      <PoweredBy opacity={1} />
+    </Box>
+  );
+};
+
+export default NoEnabledYields;

packages/widget/src/pages/components/no-enabled-yields/style.css.ts

@@ -0,0 +1,17 @@
+import { style } from "@vanilla-extract/css";
+import { animationContainer } from "../../../style.css";
+
+export const background = style([animationContainer, { minHeight: "560px" }]);
+
+export const dashboardBackground = style({
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  minHeight: "600px",
+});
+
+export const container = style({
+  flexGrow: 1,
+  paddingLeft: "25px",
+  paddingRight: "25px",
+});

packages/widget/src/translation/English/translations.json

@@ -553,6 +553,10 @@
       "title": "Under Maintenance",
       "description": "Yield.xyz is currently undergoing routine maintenance. Our service is expected to be back up and running in approximately 5-10 minutes.",
       "description2": "We appreciate your patience and encourage you to check back shortly!"
+    },
+    "no_enabled_yields": {
+      "title": "No yields enabled",
+      "description": "There are no yields enabled for this API key. Enable at least one yield to start earning."
     }
   },
   "positions": {

packages/widget/src/translation/French/translations.json

@@ -426,6 +426,10 @@
       "title": "En maintenance",
       "description": "Yield.xyz est actuellement en maintenance de routine. Notre service devrait être de retour en ligne dans environ 5 à 10 minutes.",
       "description2": "Nous apprécions votre patience et vous encourageons à revenir bientôt !"
+    },
+    "no_enabled_yields": {
+      "title": "Aucun rendement activé",
+      "description": "Aucun rendement n'est activé pour cette clé API. Activez au moins un rendement pour commencer à générer des intérêts."
     }
   },
   "positions": {