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": {