update uikit and refactor (#1330)

* update uikit and refactor * update ui kit * add a translation key
massalabs · Mar 5, 2024 · c1649c9 · c1649c9
1 parent 531d35e
commit c1649c9
Show file tree

Hide file tree

Showing 14 changed files with 112 additions and 47 deletions.
diff --git a/web/massastation/.eslintrc.cjs b/web/massastation/.eslintrc.cjs
@@ -1,4 +1,8 @@
 module.exports = {
-  extends: ['@massalabs', 'plugin:@tanstack/eslint-plugin-query/recommended'],
+  extends: [
+    '@massalabs',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
+    'plugin:react-hooks/recommended',
+  ],
   plugins: ['html', '@tanstack/query'],
 };
diff --git a/web/massastation/package-lock.json b/web/massastation/package-lock.json
diff --git a/web/massastation/src/const/const.ts b/web/massastation/src/const/const.ts
@@ -15,3 +15,5 @@ export const PLUGIN_STOP = 'stop';
 export const PLUGIN_UPDATE = 'update';
 
 export const isZipFile = /^(http)[^\s]*\.zip$/i;
+
+export const THEME_STORAGE_KEY = 'massa-station-theme';
diff --git a/web/massastation/src/i18n/en_US.json b/web/massastation/src/i18n/en_US.json
@@ -18,7 +18,8 @@
       "fe-error": "Please enter a valid url",
       "be-error": "Failed to install plugin",
       "button": "Install"
-    }
+    },
+    "beta": "beta"
   },
   "unexpected-error": {
     "title": "Oops!",

diff --git a/web/massastation/src/layouts/LayoutStation/LayoutStation.tsx b/web/massastation/src/layouts/LayoutStation/LayoutStation.tsx
@@ -14,6 +14,7 @@ import {
 } from '@massalabs/react-ui-kit';
 import { useNavigate } from 'react-router-dom';
 import Intl from '@/i18n/i18n';
+import { THEME_STORAGE_KEY } from '@/const';
 
 interface LayoutStationProps {
   children?: ReactNode;
@@ -70,7 +71,7 @@ export function LayoutStation(props: LayoutStationProps) {
       if (network.availableNetworks)
         setAvailableNetworks(network.availableNetworks);
     }
-  }, [isSuccessNetwork]);
+  }, [isSuccessNetwork, network, setCurrentNetwork, setAvailableNetworks]);
 
   const selectedNetworkKey: number = parseInt(
     Object.keys(availableNetworks).find(
@@ -94,7 +95,7 @@ export function LayoutStation(props: LayoutStationProps) {
     if (isSuccessUpdateNetwork) {
       navigate(0);
     }
-  }, [isSuccessUpdateNetwork]);
+  }, [isSuccessUpdateNetwork, navigate]);
 
   const availableNetworksItems = availableNetworks.map((network) => ({
     item: network,
@@ -129,7 +130,10 @@ export function LayoutStation(props: LayoutStationProps) {
               select={selectedNetworkKey}
             />
           </div>
-          <ThemeMode onSetTheme={handleSetTheme} />
+          <ThemeMode
+            onSetTheme={handleSetTheme}
+            storageKey={THEME_STORAGE_KEY}
+          />
         </div>
       </div>
       {children}

diff --git a/web/massastation/src/mirage/handlers/index.ts b/web/massastation/src/mirage/handlers/index.ts
@@ -2,12 +2,14 @@ import { routesForAccounts } from './account';
 import { routesForNetwork } from './network';
 import { routesForPlugins } from './plugin';
 import { routesForStore } from './store';
+import { routesForVersion } from './version';
 
 const handlers = {
   accounts: routesForAccounts,
   network: routesForNetwork,
   plugins: routesForPlugins,
   store: routesForStore,
+  version: routesForVersion,
 };
 
 export { handlers };
diff --git a/web/massastation/src/mirage/handlers/version.ts b/web/massastation/src/mirage/handlers/version.ts
@@ -0,0 +1,7 @@
+import { Server } from 'miragejs';
+
+export function routesForVersion(server: Server) {
+  server.get('/version', () => {
+    return 'dev';
+  });
+}
diff --git a/web/massastation/src/pages/Base/Base.tsx b/web/massastation/src/pages/Base/Base.tsx
@@ -8,6 +8,7 @@ import { FiCodepen, FiGlobe, FiHome, FiSun, FiMoon } from 'react-icons/fi';
 import { LayoutStation } from '@/layouts/LayoutStation/LayoutStation';
 
 import { PAGES } from '@/const/pages/pages';
+import { THEME_STORAGE_KEY } from '@/const';
 
 type ThemeSettings = {
   [key: string]: {
@@ -47,26 +48,23 @@ const navigatorSteps: INavigatorSteps = {
 };
 
 export function Base() {
-  // Hooks
   const [theme, setThemeStorage] = useLocalStorage<Theme>(
-    'massa-station-theme',
+    THEME_STORAGE_KEY,
     'theme-dark',
   );
 
   const { pathname } = useLocation();
   const navigate = useNavigate();
 
-  useEffect(() => {
-    setActivePage(currentPage);
-  }, [pathname]);
-
-  // State
   const currentPage = pathname.split('/').pop() || 'index';
   const [activePage, setActivePage] = useState(currentPage);
 
-  // Store
   const setThemeStore = useConfigStore((s) => s.setTheme);
 
+  useEffect(() => {
+    setActivePage(currentPage);
+  }, [setActivePage, pathname, currentPage]);
+
   const navigator = (
     <Navigator
       items={[
@@ -121,7 +119,7 @@ export function Base() {
         storedTheme={theme}
       >
         <Outlet />
-        <Toast />
+        <Toast storageKey={THEME_STORAGE_KEY} />
       </LayoutStation>
     </div>
   );

diff --git a/web/massastation/src/pages/Index/DashboardStation.tsx b/web/massastation/src/pages/Index/DashboardStation.tsx
@@ -0,0 +1,59 @@
+import { Theme } from '@massalabs/react-ui-kit';
+
+import { ReactNode, useEffect, useState } from 'react';
+
+export interface IDashboardStationProps {
+  imagesDark: ReactNode[];
+  imagesLight: ReactNode[];
+  components: ReactNode[];
+  theme?: Theme | undefined;
+}
+
+export function DashboardStation(props: IDashboardStationProps) {
+  let { imagesDark, imagesLight, components, theme } = props;
+
+  const [images, setImages] = useState<ReactNode[]>([]);
+  const sizeClass = 'h-full w-full';
+
+  useEffect(() => {
+    let imageList: ReactNode[] = [...components];
+
+    const diff = imagesDark.length - components.length;
+    for (let i = 0; i < diff; i++) {
+      const imageToAdd =
+        theme === 'theme-dark' ? imagesDark[i] : imagesLight[i];
+      imageList.push(imageToAdd);
+    }
+
+    setImages(imageList);
+  }, [theme, components, imagesDark, imagesLight]);
+
+  return (
+    <div
+      className="grid lg:grid-cols-6 grid-cols-3 grid-rows-2 gap-8"
+      data-testid="dashboard-station"
+    >
+      <div className="col-span-2 row-span-2">
+        <div className={`${sizeClass}`}>{images[0]}</div>
+      </div>
+      <div className="col-start-3">
+        <div className={`${sizeClass}`}>{images[1]}</div>
+      </div>
+      <div className="col-start-3 row-start-2">
+        <div className={`${sizeClass}`}>{images[2]}</div>
+      </div>
+      <div className="row-start-3 lg:col-span-2 lg:row-span-2 lg:col-start-4 lg:row-start-1">
+        <div className={`${sizeClass}`}>{images[3]}</div>
+      </div>
+      <div className="col-start-1 row-start-4 lg:col-start-6 lg:row-start-1">
+        <div className={`${sizeClass}`}>{images[4]}</div>
+      </div>
+      <div
+        className="col-span-2 row-span-2 col-start-2 row-start-3
+      lg:col-span-1 lg:row-span-1 lg:col-start-6 lg:row-start-2"
+      >
+        <div className={`${sizeClass}`}>{images[5]}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/massastation/src/pages/Index/Index.tsx b/web/massastation/src/pages/Index/Index.tsx
@@ -10,12 +10,7 @@ import { ReactComponent as Image2Light } from '../../assets/subduedImages/light/
 import { ReactComponent as Image3Light } from '../../assets/subduedImages/light/3.svg';
 import { ReactComponent as Image4Light } from '../../assets/subduedImages/light/4.svg';
 import { ReactComponent as Image5Light } from '../../assets/subduedImages/light/5.svg';
-import {
-  Button,
-  DashboardStation,
-  PluginWallet,
-  Theme,
-} from '@massalabs/react-ui-kit';
+import { Button, PluginWallet } from '@massalabs/react-ui-kit';
 import { FiCodepen, FiGlobe } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
@@ -26,6 +21,7 @@ import { useConfigStore } from '@/store/store';
 import { usePost, useResource } from '../../custom/api';
 import { UseQueryResult } from '@tanstack/react-query';
 import { MASSA_WALLET } from '@/const';
+import { DashboardStation } from './DashboardStation';
 
 export function Index() {
   const plugins = useResource<MassaPluginModel[]>('plugin-manager');
@@ -50,14 +46,11 @@ function NestedIndex({
   const navigate = useNavigate();
   const [pluginWalletIsInstalled, setPluginWalletIsInstalled] = useState(false);
   const [urlPlugin, setUrlPlugin] = useState<string | undefined>(undefined);
-  const [refreshPlugins, setRefreshPlugins] = useState(0);
   const theme = useConfigStore((s) => s.theme);
 
   const { data: massaPlugins } = plugins;
 
-  const { data: availablePlugins } =
-    useResource<MassaStoreModel[]>('plugin-store');
-
+  const availablePlugins = store.data;
   const {
     mutate: installPlugin,
     isSuccess: installSuccess,
@@ -77,7 +70,7 @@ function NestedIndex({
       );
       setUrlPlugin(storeWalletPlugin?.file.url);
     }
-  }, [plugins, store]);
+  }, [plugins, availablePlugins, massaPlugins]);
 
   useEffect(() => {
     // we should check that installed plugin is actually the wallet
@@ -89,10 +82,6 @@ function NestedIndex({
     }
   }, [installSuccess, installError]);
 
-  useEffect(() => {
-    setRefreshPlugins(refreshPlugins + 1);
-  }, [pluginWalletIsInstalled, isLoading]);
-
   function handleInstallPlugin(url: string) {
     const params = { source: url };
     installPlugin({ params });
@@ -126,8 +115,7 @@ function NestedIndex({
               </Button>
             </div>
             <DashboardStation
-              key={refreshPlugins}
-              theme={theme as Theme}
+              theme={theme}
               imagesDark={[
                 <Image1Dark />,
                 <Image2Dark />,

diff --git a/web/massastation/src/pages/Store/Install.tsx b/web/massastation/src/pages/Store/Install.tsx
@@ -56,7 +56,7 @@ function Install({
     if (isSuccess) {
       refetchPlugins();
     }
-  }, [isSuccess]);
+  }, [isSuccess, refetchPlugins]);
 
   return (
     <SidePanel customClass="border-l border-c-default">

diff --git a/web/massastation/src/pages/Store/StationSection/StationPlugin.tsx b/web/massastation/src/pages/Store/StationSection/StationPlugin.tsx
@@ -58,13 +58,13 @@ export function StationPlugin({
     if (isExecuteSuccess) {
       refetch();
     }
-  }, [isExecuteSuccess]);
+  }, [isExecuteSuccess, refetch]);
 
   useEffect(() => {
     if (deleteSuccess) {
       refetch();
     }
-  }, [deleteSuccess]);
+  }, [deleteSuccess, refetch]);
 
   function updatePluginState(e: SyntheticEvent, command: string) {
     e.preventDefault();
@@ -83,7 +83,7 @@ export function StationPlugin({
     subtitle: author,
     tag:
       pluginList.includes(name) && name === NODE_MANAGER ? (
-        <Tag type="warning" content="beta" />
+        <Tag type="warning">{Intl.t('store.beta')}</Tag>
       ) : null,
     subtitleIcon: massalabsNomination.includes(author) ? <Certificate /> : null,
     version: version,
@@ -127,9 +127,10 @@ export function StationPlugin({
         content: [
           <Tooltip
             className="mas-tooltip"
-            content={Intl.t('store.crashed-module')}
-            icon={<FiAlertCircle className="text-s-error" />}
-          />,
+            body={Intl.t('store.crashed-module')}
+          >
+            <FiAlertCircle className="text-s-error" />
+          </Tooltip>,
           <Button variant="icon" disabled>
             <FiArrowUpRight />
           </Button>,

diff --git a/web/massastation/src/pages/Store/StoreSection/StorePlugin.tsx b/web/massastation/src/pages/Store/StoreSection/StorePlugin.tsx
@@ -40,14 +40,13 @@ function StorePlugin(props: StorePluginProps) {
     if (isInstallSuccess) {
       refetch();
     }
-  }, [isInstallSuccess]);
+  }, [isInstallSuccess, refetch]);
 
   const incompatibleActions = [
     <div className="relative whitespace-nowrap">
-      <Tooltip
-        content={warningMessage}
-        icon={<FiAlertTriangle className="text-s-warning" size={24} />}
-      />
+      <Tooltip body={warningMessage}>
+        <FiAlertTriangle className="text-s-warning" size={24} />
+      </Tooltip>
     </div>,
     <FiDownload className="w-6 h-10 text-tertiary" />,
   ];

diff --git a/web/massastation/src/pages/Store/StoreSection/StoreSection.tsx b/web/massastation/src/pages/Store/StoreSection/StoreSection.tsx
@@ -37,7 +37,7 @@ function StoreSection({
     if (error) {
       navigate(routeFor('error'));
     }
-  }, [error]);
+  }, [error, navigate]);
 
   return (
     <>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,5 @@ export const PLUGIN_STOP = 'stop';
		export const PLUGIN_UPDATE = 'update';

		export const isZipFile = /^(http)[^\s]*\.zip$/i;

		export const THEME_STORAGE_KEY = 'massa-station-theme';