update ui kit next (#1361)

* update ui kit next

* clean deps

web/massastation/package.json

@@ -15,11 +15,11 @@
     "prepare": "cd ../.. && husky install web/massastation/.husky"
   },
   "dependencies": {
-    "@massalabs/massa-web3": "^1.16.1",
-    "@massalabs/react-ui-kit": "^0.0.4-dev",
+    "@massalabs/massa-web3": "^4.0.2-dev",
+    "@massalabs/react-ui-kit": "^0.0.5-dev",
     "@tanstack/react-query": "^4.29.5",
     "axios": "^1.4.0",
-    "dot-object": "^2.1.4",
+    "dot-object": "^2.1.5",
     "esbuild": "0.17.19",
     "framer-motion": "^11.1.5",
     "jszip": "^3.10.1",
@@ -37,7 +37,7 @@
     "@massalabs/prettier-config-as": "^0.0.2",
     "@tanstack/eslint-plugin-query": "^4.29.4",
     "@testing-library/react": "^14.0.0",
-    "@types/dot-object": "^2.1.2",
+    "@types/dot-object": "^2.1.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.0.11",
     "@types/react-test-renderer": "^18.0.0",

web/massastation/src/const/index.ts

@@ -1,5 +1,4 @@
 export * from './const';
 export * from './env/env';
-export * from './intl/intl';
 export * from './pages/pages';
 export * from './url/url';

web/massastation/src/i18n/i18n.ts

@@ -1,80 +1,7 @@
-// STYLES
-
-// EXTERNALS
-import dot from 'dot-object';
-
-// LOCALS
+import I18n from '@massalabs/react-ui-kit/src/lib/i18n/i18n';
 import enUs from './en_US.json';
-import frFR from './fr_FR.json';
-import { INTL } from '../const/intl/intl';
-
-type Copy = Record<string, string | object>;
-
-class I18n {
-  private lang: string;
-  private copy: Copy;
-
-  constructor() {
-    this.lang = this._getLang();
-    this.copy = this._getCopy();
-  }
-
-  public t(key: string, interpolations?: Record<string, string>): string {
-    let copy = this.copy;
-    // we are using pick in order to make life easier when the day for plurals and copy with params arrives
-    const result = dot.pick(key, copy);
-
-    if (!result) {
-      console.warn(`I18n::t:: No translation found for key ${key}`);
-    }
-
-    return interpolations
-      ? this._interpolateKeys(result, interpolations)
-      : result ?? key;
-  }
-
-  private _getLang(): string {
-    let urlParams = new URLSearchParams(window.location.search);
-    let fromUrl = urlParams.get('l');
-
-    if (fromUrl) {
-      localStorage.setItem('massa-station-lang', fromUrl);
-    }
-
-    return fromUrl || localStorage.getItem('massa-station-lang') || INTL.EN_us;
-  }
-
-  private _getCopy(): Copy {
-    let lang = this.lang;
-
-    if (lang === INTL.EN_us) {
-      return enUs;
-    } else if (lang === INTL.FR_fr) {
-      return frFR;
-    } else {
-      console.warn(
-        `I18n::_getCopy:: We may not support yet ${lang}. Loading 'en_US' then... `,
-      );
-      return enUs;
-    }
-  }
-
-  private _interpolateKeys(
-    str: string,
-    replacements: Record<string, string>,
-    char1 = '{',
-    char2 = '}',
-  ): string {
-    const regex = new RegExp(`${char1}[^${char2}]*${char2}`, 'g');
-
-    return str.replace(regex, (match) => {
-      const key = match.slice(1, -1);
-      return replacements[key] ?? match;
-    });
-  }
-}
 
-const Intl = new I18n();
+const Intl = new I18n({ EN_us: enUs });
 Object.freeze(Intl);
 
 export default Intl;

web/massastation/src/pages/Base/Base.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
-import { useLocalStorage } from '@/custom/useLocalStorage';
 import { useConfigStore } from '@/store/store';
 
 import { Navigator, Theme, Toast } from '@massalabs/react-ui-kit';
+import { useLocalStorage } from '@massalabs/react-ui-kit/src/lib/util/hooks/useLocalStorage';
 import { FiCodepen, FiGlobe, FiHome, FiSun, FiMoon } from 'react-icons/fi';
 import { LayoutStation } from '@/layouts/LayoutStation/LayoutStation';