clean and add useUpdatePLugin hook

web/massastation/src/custom/hooks/useUpdatePlugin.ts

@@ -0,0 +1,18 @@
+import { PluginExecuteRequest } from '@/pages/Store/StationSection/StationPlugin';
+import { usePost } from '../api';
+
+export function useUpdatePlugin(id: string | undefined) {
+  const {
+    mutate: mutateExecute,
+    isSuccess: isExecuteSuccess,
+    isLoading: isExecuteLoading,
+  } = usePost<PluginExecuteRequest>(`plugin-manager/${id}/execute`);
+
+  function updatePluginState(command: string) {
+    if (isExecuteLoading) return;
+    const payload = { command } as PluginExecuteRequest;
+    mutateExecute({ payload });
+  }
+
+  return { isExecuteSuccess, isExecuteLoading, updatePluginState };
+}

web/massastation/src/pages/Index/Dashboard/MassaWallet.tsx

@@ -34,7 +34,7 @@ export function ActivePlugin(props: MSPluginProps) {
   return (
     <>
       <div>{iconActive}</div>
-      <div className="w-full py-6 text-f-primary bg-secondary flex flex-col items-center">
+      <div className="w-full h-full py-6 text-f-primary bg-secondary flex flex-col items-center">
         <div className="px-4 py-2 lg:h-14 mas-title text-center">
           <p className="text-xl sm:text-4xl lg:text-2xl 2xl:text-4xl">
             {title}
@@ -56,7 +56,7 @@ export function Updateplugin(props: MSPluginProps) {
   return (
     <>
       <div>{iconActive}</div>
-      <div className="w-full py-6 text-f-primary bg-secondary flex flex-col items-center">
+      <div className="w-full h-full py-6 text-f-primary bg-secondary flex flex-col items-center">
         <div className="px-4 py-2 lg:h-14 mas-title text-center">
           <p className="text-xl sm:text-4xl lg:text-2xl 2xl:text-4xl">
             {title}
@@ -112,7 +112,7 @@ export function CrashedPlugin(props: MSPluginProps) {
   return (
     <>
       {iconActive}
-      <div className="w-full py-6 text-f-primary bg-secondary flex flex-col items-center">
+      <div className="w-full h-full py-6 text-f-primary bg-secondary flex flex-col items-center">
         <div className="w-4/5 px-4 py-2 mas-buttons lg:h-14 flex items-center justify-center">
           <p className="text-center">{`${title} can’t be opened. Reinstall it from the Module store.`}</p>
         </div>

web/massastation/src/pages/Index/DashboardStation.tsx

@@ -10,9 +10,8 @@ import { Dusa } from './Dashboard/Dusa';
 import { MASSA_WALLET, PLUGIN_UPDATE } from '@/const';
 import { MassaPluginModel } from '@/models';
 import { MassaWallet } from './Dashboard/MassaWallet';
-import { PluginExecuteRequest } from '../Store/StationSection/StationPlugin';
-import { usePost } from '@/custom/api';
 import { useEffect, useState } from 'react';
+import { useUpdatePlugin } from '@/custom/hooks/useUpdatePlugin';
 
 export interface IDashboardStationProps {
   massaPlugins?: MassaPluginModel[] | undefined;
@@ -47,11 +46,8 @@ export function DashboardStation(props: IDashboardStationProps) {
 
   const [walletState, setWalletState] = useState<WalletStates>();
 
-  const {
-    mutate: mutateExecute,
-    isSuccess: isExecuteSuccess,
-    isLoading: isExecuteLoading,
-  } = usePost<PluginExecuteRequest>(`plugin-manager/${id}/execute`);
+  const { isExecuteSuccess, isExecuteLoading, updatePluginState } =
+    useUpdatePlugin(id);
 
   useEffect(() => {
     if (pluginWalletIsInstalled && !isUpdatable) {
@@ -69,18 +65,12 @@ export function DashboardStation(props: IDashboardStationProps) {
     }
   }, [isExecuteSuccess]);
 
-  function updatePluginState(command: string) {
-    if (isExecuteLoading) return;
-    const payload = { command } as PluginExecuteRequest;
-    mutateExecute({ payload });
-  }
-
   return (
     <div
       className="grid lg:grid-cols-10  grid-rows-3 gap-4 h-fit"
       data-testid="dashboard-station"
     >
-      <div className="col-start-1 col-span-2  row-span-3">
+      <div className="col-start-1 col-span-2 row-span-3">
         <MassaWallet
           key="wallet"
           state={walletState}