From 3fcc84fb15a8e8a92aebe80643293c69cdd8249f Mon Sep 17 00:00:00 2001 From: Sandeep Prajapati <278588035+sandy-yield@users.noreply.github.com> Date: Wed, 1 Jul 2026 14:38:06 +0530 Subject: [PATCH 1/2] feat(widget): show error screen when no yields enabled for api key --- packages/widget/src/App.tsx | 6 ++ .../widget/src/common/get-enabled-networks.ts | 22 ++++--- .../widget/src/hooks/use-no-enabled-yields.ts | 18 ++++++ .../common/components/styles.css.ts | 1 + .../components/no-enabled-yields/index.tsx | 58 +++++++++++++++++++ .../components/no-enabled-yields/style.css.ts | 17 ++++++ .../src/translation/English/translations.json | 4 ++ .../src/translation/French/translations.json | 4 ++ 8 files changed, 123 insertions(+), 7 deletions(-) create mode 100644 packages/widget/src/hooks/use-no-enabled-yields.ts create mode 100644 packages/widget/src/pages/components/no-enabled-yields/index.tsx create mode 100644 packages/widget/src/pages/components/no-enabled-yields/style.css.ts 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-dashboard/common/components/styles.css.ts b/packages/widget/src/pages-dashboard/common/components/styles.css.ts index bf83fa85..d0257135 100644 --- a/packages/widget/src/pages-dashboard/common/components/styles.css.ts +++ b/packages/widget/src/pages-dashboard/common/components/styles.css.ts @@ -12,6 +12,7 @@ export const wrapper = recipe({ borderStyle: "solid", boxShadow: "0px 15px 40px 0px #0000000D", width: "1000px", + borderRadius: "14px", }, ], variants: { 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..307bc369 --- /dev/null +++ b/packages/widget/src/pages/components/no-enabled-yields/index.tsx @@ -0,0 +1,58 @@ +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("no_enabled_yields.title")} + + + + {t("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..acfa71bd 100644 --- a/packages/widget/src/translation/English/translations.json +++ b/packages/widget/src/translation/English/translations.json @@ -555,6 +555,10 @@ "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": { "title": "My Positions", "via_one": "via {{providerName}}", diff --git a/packages/widget/src/translation/French/translations.json b/packages/widget/src/translation/French/translations.json index b8cbade5..1a53bfac 100644 --- a/packages/widget/src/translation/French/translations.json +++ b/packages/widget/src/translation/French/translations.json @@ -428,6 +428,10 @@ "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": { "title": "Mes Positions", "via_one": "via {{providerName}}", From a1335842854c42e2343c45b0308f2a44043efd3c Mon Sep 17 00:00:00 2001 From: Sandeep Prajapati <278588035+sandy-yield@users.noreply.github.com> Date: Wed, 1 Jul 2026 19:24:45 +0530 Subject: [PATCH 2/2] feat(widget): removed fixed 14px on wrapper and moved translations --- .../src/pages-dashboard/common/components/styles.css.ts | 1 - .../src/pages/components/no-enabled-yields/index.tsx | 5 +++-- packages/widget/src/translation/English/translations.json | 8 ++++---- packages/widget/src/translation/French/translations.json | 8 ++++---- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/widget/src/pages-dashboard/common/components/styles.css.ts b/packages/widget/src/pages-dashboard/common/components/styles.css.ts index d0257135..bf83fa85 100644 --- a/packages/widget/src/pages-dashboard/common/components/styles.css.ts +++ b/packages/widget/src/pages-dashboard/common/components/styles.css.ts @@ -12,7 +12,6 @@ export const wrapper = recipe({ borderStyle: "solid", boxShadow: "0px 15px 40px 0px #0000000D", width: "1000px", - borderRadius: "14px", }, ], variants: { diff --git a/packages/widget/src/pages/components/no-enabled-yields/index.tsx b/packages/widget/src/pages/components/no-enabled-yields/index.tsx index 307bc369..d87b2a61 100644 --- a/packages/widget/src/pages/components/no-enabled-yields/index.tsx +++ b/packages/widget/src/pages/components/no-enabled-yields/index.tsx @@ -14,6 +14,7 @@ const NoEnabledYields = () => { return ( { textAlign="center" variant={{ level: "h4" }} > - {t("no_enabled_yields.title")} + {t("help_modals.no_enabled_yields.title")} { textAlign="center" marginBottom="4" > - {t("no_enabled_yields.description")} + {t("help_modals.no_enabled_yields.description")} diff --git a/packages/widget/src/translation/English/translations.json b/packages/widget/src/translation/English/translations.json index acfa71bd..1740d02a 100644 --- a/packages/widget/src/translation/English/translations.json +++ b/packages/widget/src/translation/English/translations.json @@ -553,12 +553,12 @@ "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." } }, - "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": { "title": "My Positions", "via_one": "via {{providerName}}", diff --git a/packages/widget/src/translation/French/translations.json b/packages/widget/src/translation/French/translations.json index 1a53bfac..d427f3d3 100644 --- a/packages/widget/src/translation/French/translations.json +++ b/packages/widget/src/translation/French/translations.json @@ -426,12 +426,12 @@ "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." } }, - "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": { "title": "Mes Positions", "via_one": "via {{providerName}}",