feat: Language Localization

packages/frontend/package.json

@@ -42,15 +42,19 @@
     "es6-error": "4.1.1",
     "firebase": "10.0.0",
     "html2canvas": "1.4.1",
+    "i18next": "23.16.5",
+    "i18next-browser-languagedetector": "8.0.0",
     "ionicons": "7.3.0",
     "md5": "2.3.0",
     "moment": "2.30.1",
+    "moment-with-locales-es6": "^1.0.1",
     "query-string": "9.1.1",
     "react": "18.2.0",
     "react-beautiful-dnd": "13.1.1",
     "react-dom": "18.2.0",
     "react-ga4": "2.1.0",
     "react-hot-toast": "2.4.1",
+    "react-i18next": "15.1.1",
     "react-laag": "2.0.5",
     "react-markdown": "8.0.7",
     "react-microsoft-clarity": "1.2.0",
@@ -62,6 +66,7 @@
     "react-use-audio-player": "AlphadayHQ/useAudioPlayer",
     "redux-persist": "6.0.0",
     "remark-breaks": "3.0.3",
+    "sharp": "0.32.6",
     "unist-util-visit": "5.0.0",
     "uuid": "9.0.0",
     "viem": "1.2.5",
@@ -98,4 +103,4 @@
     "vite-plugin-pwa": "0.19.2",
     "vite-plugin-svgr": "3.2.0"
   }
-}
+}

packages/frontend/src/App.tsx

@@ -12,6 +12,7 @@ import {
     useViewRoute,
     useGaTracker,
 } from "./api/hooks";
+import { usePreferredLanguage } from "./api/hooks/usePreferredLanguage";
 import { useGetRemoteStatusQuery } from "./api/services";
 import { useAppDispatch } from "./api/store/hooks";
 import walletConnectProvider from "./api/store/providers/wallet-connect-provider";
@@ -31,6 +32,7 @@ const goToLandingPage = () => {
 
 const AppRoutes = () => {
     useGaTracker();
+    usePreferredLanguage();
 
     const dispatch = useAppDispatch();
     const { error } = useGetRemoteStatusQuery(undefined, {

packages/frontend/src/api/hooks/usePreferredLanguage.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from "react";
+import i18next from "i18next";
+import moment from "moment-with-locales-es6";
+import { useDispatch } from "react-redux";
+import { alphadayApi } from "../services";
+import { useAppSelector } from "../store/hooks";
+import { Logger } from "../utils/logging";
+
+export const usePreferredLanguage = () => {
+    const dispatch = useDispatch();
+    const selectedLangCode = useAppSelector(
+        (state) => state.ui.selectedLanguageCode
+    );
+    const prevLangCodeRef = useRef(selectedLangCode);
+
+    useEffect(() => {
+        if (!selectedLangCode || i18next.language === selectedLangCode) {
+            return;
+        }
+        moment.locale(selectedLangCode);
+        i18next
+            .changeLanguage(selectedLangCode)
+            .then(() => {
+                if (selectedLangCode !== prevLangCodeRef.current) {
+                    prevLangCodeRef.current = selectedLangCode;
+                    // Reset all queries
+                    dispatch(alphadayApi.util.resetApiState());
+                }
+            })
+            .catch((e) => {
+                Logger.error(
+                    "usePreferredLanguage::Error changing language::",
+                    e
+                );
+            });
+    }, [selectedLangCode, dispatch]);
+};

packages/frontend/src/api/hooks/useTutorial.ts

@@ -1,4 +1,5 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { setCurrentTutorialTip, setStoreShowTutorial } from "src/api/store";
 import { useAppSelector, useAppDispatch } from "src/api/store/hooks";
 import { tutorials } from "src/containers/tutorial/staticData";
@@ -20,16 +21,28 @@ interface ITutorial {
 }
 
 export const useTutorial: () => ITutorial = () => {
+    const { t } = useTranslation();
     const dispatch = useAppDispatch();
     const { tutFocusElemRef, setTutFocusElemRef } = useTutorialContext();
     const { isFullSize } = useViewRoute();
     const { enabled: isWalletBoardAllowed } = useFeatureFlags(
         EFeaturesRegistry.WalletBoard
     );
 
+    const translate = useCallback(
+        (key: string) => {
+            return t(`tutorials.${key}`);
+        },
+        [t]
+    );
+    const translatedTutorials = useMemo(
+        () => tutorials(translate),
+        [translate]
+    );
+
     const allowedTutorials = isWalletBoardAllowed
-        ? tutorials
-        : tutorials.filter(
+        ? translatedTutorials
+        : translatedTutorials.filter(
               (tutorial) => tutorial.id !== ETutorialTipId.WalletView
           );
 

packages/frontend/src/api/services/alphadayApi.ts

@@ -1,4 +1,5 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import i18next from "i18next";
 import { TUserAuth } from "src/api/types";
 import { Logger } from "src/api/utils/logging";
 import CONFIG from "../../config/config";
@@ -22,6 +23,7 @@ export const alphadayApi = createApi({
             headers.set("Version", CONFIG.APP.VERSION);
             headers.set("X-App-Id", CONFIG.APP.X_APP_ID);
             headers.set("X-App-Secret", CONFIG.APP.X_APP_SECRET);
+            headers.set("Accept-Language", i18next.language);
             // @ts-expect-error
             const authState = getState().user.auth as TUserAuth | null;
             if (authState != null && authState?.token !== undefined) {

packages/frontend/src/api/services/tvl/tvlEndpoints.ts

@@ -1,4 +1,4 @@
-import moment from "moment";
+import moment from "moment-with-locales-es6";
 import queryString from "query-string";
 import { TProjectTvlHistory, TTvlHistory } from "src/api/types";
 import { isEmptyObj } from "src/api/utils/helpers";

packages/frontend/src/api/store/migrations.ts

@@ -9,6 +9,7 @@ import {
     TUserView,
     WalletConnectionState,
 } from "../types";
+import { EnumLanguageCode } from "../types/language";
 import { Logger } from "../utils/logging";
 import { RootState } from "./reducer";
 import { IUIState } from "./slices/ui";
@@ -38,7 +39,13 @@ type PersistedRootState = (PersistedState & RootState) | undefined;
  *   102: (s: RootStateV101) => PersistedRootState
  */
 
-type RootStateV106 = PersistedRootState;
+type RootStateV107 = PersistedRootState;
+type RootStateV106 =
+    | (PersistedState &
+          Omit<RootState, "ui"> & {
+              ui: Omit<IUIState, "showLanguageModal" | "selectedLanguageCode">;
+          })
+    | undefined;
 
 type RootStateV105 =
     | (PersistedState &
@@ -111,6 +118,7 @@ type TMigrations = MigrationManifest & {
     104: (s: RootStateV103) => RootStateV104;
     105: (s: RootStateV104) => RootStateV105;
     106: (s: RootStateV105) => RootStateV106;
+    107: (s: RootStateV106) => RootStateV107;
 };
 
 /**
@@ -280,6 +288,17 @@ const migrations: TMigrations = {
             },
         };
     },
+    107: (s: RootStateV106): RootStateV107 => {
+        if (!s) return undefined;
+        return {
+            ...s,
+            ui: {
+                ...s.ui,
+                selectedLanguageCode: EnumLanguageCode.EN,
+                showLanguageModal: false,
+            },
+        };
+    },
 };
 
 export default migrations;

packages/frontend/src/api/store/slices/ui.ts

@@ -1,5 +1,6 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { ECookieChoice, TTutorialTip } from "src/api/types";
+import { EnumLanguageCode } from "src/api/types/language";
 
 export type TTheme = "dark";
 export interface ITutorialState {
@@ -11,6 +12,8 @@ export interface IUIState {
     showWidgetLib: boolean;
     showBalance: boolean;
     showAboutModal: boolean;
+    showLanguageModal: boolean;
+    selectedLanguageCode: EnumLanguageCode;
     tutorial: ITutorialState;
     cookieChoice: ECookieChoice | undefined;
     mobile: {
@@ -26,6 +29,8 @@ const initialState: IUIState = {
     theme: "dark",
     showWidgetLib: false,
     showAboutModal: false,
+    showLanguageModal: false,
+    selectedLanguageCode: EnumLanguageCode.EN,
     showBalance: true,
     tutorial: { showTutorial: undefined, currentTutorialTip: undefined },
     cookieChoice: undefined,
@@ -58,9 +63,21 @@ const uiSlice = createSlice({
         toggleAboutModal(draft) {
             draft.showAboutModal = !draft.showAboutModal;
         },
+        toggleLanguageModal(draft) {
+            draft.showLanguageModal = !draft.showLanguageModal;
+        },
         toggleWidgetsNavOpen(draft) {
             draft.mobile.widgetsNavOpen = !draft.mobile.widgetsNavOpen;
         },
+        setSelectedLanguageCode(
+            draft,
+            action: PayloadAction<{ code: EnumLanguageCode }>
+        ) {
+            const {
+                payload: { code },
+            } = action;
+            draft.selectedLanguageCode = code;
+        },
         setStoreShowTutorial(draft, action: PayloadAction<{ show: boolean }>) {
             const {
                 payload: { show },
@@ -105,7 +122,9 @@ export const {
     toggleShowWidgetLib,
     toggleShowBalance,
     toggleAboutModal,
+    toggleLanguageModal,
     toggleWidgetsNavOpen,
+    setSelectedLanguageCode,
     setStoreShowTutorial,
     setCurrentTutorialTip,
     setCookieChoice,

packages/frontend/src/api/store/slices/views.test.ts

@@ -1,5 +1,5 @@
 import "src/mocks/libraryMocks";
-import moment from "moment";
+import moment from "moment-with-locales-es6";
 import { ETag, TCachedView, TSubscribedView } from "src/api/types";
 import { customTableModuleDataMock } from "src/mocks/tables";
 import {

packages/frontend/src/api/types/language.ts

@@ -0,0 +1,7 @@
+export enum EnumLanguageCode {
+    EN = "en",
+    FR = "fr",
+    ES = "es",
+    JA = "ja",
+    TR = "tr",
+}

packages/frontend/src/api/types/market.ts

@@ -38,14 +38,14 @@ export type TCoinMarketHistory = {
 };
 
 export const CHART_RANGE_OPTIONS = {
-    oneDay: "1D",
-    oneWeek: "1W",
-    oneMonth: "1M",
-    threeMonths: "3M",
-    yearToDate: "YTD",
-    oneYear: "1Y",
-    threeYear: "3Y",
-    all: "ALL",
+    oneDay: { value: "1D", translationKey: `datelocale.d`, prefix: "1" },
+    oneWeek: { value: "1W", translationKey: `datelocale.w`, prefix: "1" },
+    oneMonth: { value: "1M", translationKey: `datelocale.M`, prefix: "1" },
+    threeMonths: { value: "3M", translationKey: `datelocale.M`, prefix: "3" },
+    yearToDate: { value: "YTD", translationKey: "datelocale.ytd", prefix: "" },
+    oneYear: { value: "1Y", translationKey: `datelocale.y`, prefix: "1" },
+    threeYear: { value: "3Y", translationKey: `datelocale.y`, prefix: "3" },
+    all: { value: "ALL", translationKey: "navigation.general.all", prefix: "" },
 } as const;
 type TRangeKeys = keyof typeof CHART_RANGE_OPTIONS;
-export type TChartRange = (typeof CHART_RANGE_OPTIONS)[TRangeKeys];
+export type TChartRange = (typeof CHART_RANGE_OPTIONS)[TRangeKeys]["value"];

packages/frontend/src/api/utils/calendarUtils.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import chroma from "chroma-js";
-import moment from "moment";
+import moment from "moment-with-locales-es6";
 import { TRemoteEvent, TRemoteEventDetails } from "src/api/services";
 import { TEvent, TEventDetails } from "src/api/types";
 import {

packages/frontend/src/api/utils/customDataUtils.tsx

@@ -1,4 +1,4 @@
-import moment from "moment";
+import moment from "moment-with-locales-es6";
 import ReactMarkdown from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import {

packages/frontend/src/api/utils/dateUtils.ts

@@ -1,26 +1,28 @@
-import moment from "moment";
+import i18next from "i18next";
+import moment from "moment-with-locales-es6";
 /**
  *  returns a text that represents the given datetime
  *  relative to now.
  * @param date | date-string
  * @returns string
  */
+
 export const computeDuration = (date: string | Date): string => {
-    moment.updateLocale("en", {
+    moment.updateLocale(i18next.language, {
         relativeTime: {
-            future: "in %s", // this shouldn't occur If it does there's an error.
-            past: "%s ago",
-            s: "%ds",
-            m: "%dm",
-            mm: "%dm",
-            h: "%dh",
-            hh: "%dh",
-            d: "%dd",
-            dd: "%dd",
-            M: "%dmo",
-            MM: "%dmo",
-            y: "%dy",
-            yy: "%dy",
+            future: `${i18next.t("datelocale.future")}`, // this shouldn't occur If it does there's an error.
+            past: `${i18next.t("datelocale.past")}`,
+            s: `%d${i18next.t("datelocale.s")}`,
+            m: `%d${i18next.t("datelocale.m")}`,
+            mm: `%d${i18next.t("datelocale.mm")}`,
+            h: `%d${i18next.t("datelocale.h")}`,
+            hh: `%d${i18next.t("datelocale.hh")}`,
+            d: `%d${i18next.t("datelocale.d")}`,
+            dd: `%d${i18next.t("datelocale.dd")}`,
+            M: `%d${i18next.t("datelocale.M")}`,
+            MM: `%d${i18next.t("datelocale.MM")}`,
+            y: `%d${i18next.t("datelocale.y")}`,
+            yy: `%d${i18next.t("datelocale.yy")}`,
         },
     });
 

packages/frontend/src/api/utils/sortOptions.ts

@@ -1,29 +1,23 @@
 import { EItemsSortBy } from "../services";
+import { translateLabels } from "./translationUtils";
 
-const SORT_OPTIONS: {
-    label: string;
-    value: EItemsSortBy;
-}[] = [
+export const generateSortOptions = () => [
     {
-        label: "(A-Z)",
         value: EItemsSortBy.Name,
+        label: translateLabels("(A-Z)"),
     },
     {
-        label: "Popular",
         value: EItemsSortBy.Popular,
+        label: translateLabels("Popular"),
     },
     {
-        label: "New",
         value: EItemsSortBy.New,
+        label: translateLabels("New"),
     },
 ];
 
-export const getSortOptionsArray = (): string[] => {
-    return SORT_OPTIONS.map((option) => option.label);
-};
-
-export const getSortOptionValue = (label: string): EItemsSortBy | null => {
-    const option = SORT_OPTIONS.find((op) => op.label === label);
+export const getSortOptionValue = (value: string): EItemsSortBy | null => {
+    const option = generateSortOptions().find((op) => op.value === value);
     if (!option) {
         return null;
     }