diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
index 8bc4be7c..6e49b6c8 100644
--- a/packages/widget/src/App.tsx
+++ b/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 ;
+
return dashboardVariant ? : ;
};
diff --git a/packages/widget/src/common/get-enabled-networks.ts b/packages/widget/src/common/get-enabled-networks.ts
index 088ed424..ef71cb41 100644
--- a/packages/widget/src/common/get-enabled-networks.ts
+++ b/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"));
diff --git a/packages/widget/src/hooks/use-no-enabled-yields.ts b/packages/widget/src/hooks/use-no-enabled-yields.ts
new file mode 100644
index 00000000..ddb03b21
--- /dev/null
+++ b/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;
+};
diff --git a/packages/widget/src/pages/components/no-enabled-yields/index.tsx b/packages/widget/src/pages/components/no-enabled-yields/index.tsx
new file mode 100644
index 00000000..d87b2a61
--- /dev/null
+++ b/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 (
+
+
+
+
+ {t("help_modals.no_enabled_yields.title")}
+
+
+
+ {t("help_modals.no_enabled_yields.description")}
+
+
+
+
+
+ );
+};
+
+export default NoEnabledYields;
diff --git a/packages/widget/src/pages/components/no-enabled-yields/style.css.ts b/packages/widget/src/pages/components/no-enabled-yields/style.css.ts
new file mode 100644
index 00000000..a31e8937
--- /dev/null
+++ b/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",
+});
diff --git a/packages/widget/src/translation/English/translations.json b/packages/widget/src/translation/English/translations.json
index 3964f83a..1740d02a 100644
--- a/packages/widget/src/translation/English/translations.json
+++ b/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": {
diff --git a/packages/widget/src/translation/French/translations.json b/packages/widget/src/translation/French/translations.json
index b8cbade5..d427f3d3 100644
--- a/packages/widget/src/translation/French/translations.json
+++ b/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": {