Add update frontend

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

@@ -3,14 +3,15 @@
 import { Button, Spinner } from '@massalabs/react-ui-kit';
 
 import { ReactNode } from 'react';
-import { FiArrowUpRight } from 'react-icons/fi';
+import { FiArrowUpRight, FiRefreshCw } from 'react-icons/fi';
+import { WalletStates } from '../DashboardStation';
 
 export interface PluginWalletProps {
-  isActive: boolean;
+  state?: string;
   isLoading: boolean;
   title: string;
   status?: string;
-  isUpdatable: boolean | undefined;
+  isUpdating: boolean;
   iconActive: ReactNode;
   iconInactive: ReactNode;
   onClickActive: () => void;
@@ -24,6 +25,7 @@ export interface MSPluginProps {
   onClickActive?: () => void;
   iconInactive?: ReactNode;
   onClickInactive?: () => void;
+  isUpdating?: boolean;
 }
 
 export function ActivePlugin(props: MSPluginProps) {
@@ -48,6 +50,44 @@ export function ActivePlugin(props: MSPluginProps) {
   );
 }
 
+export function Updateplugin(props: MSPluginProps) {
+  const { title, iconActive, onClickActive, isUpdating } = props;
+
+  return (
+    <>
+      <div>{iconActive}</div>
+      <div className="w-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}
+          </p>
+        </div>
+        <div className="flex flex-col gap-2 px-4 py-2">
+          <Button onClick={onClickActive}>
+            <div className="flex gap-2">
+              {' '}
+              <div className={isUpdating ? 'animate-spin' : 'none'}>
+                <FiRefreshCw color={'black'} size={20} />
+              </div>
+              {isUpdating ? 'Updating...' : 'Update'}
+            </div>
+          </Button>
+          <div className="text-s-warning px-4 mas-caption">
+            <a
+              className="underline"
+              href="/plugin/massa-labs/massa-wallet/web-app/index"
+              target="_blank"
+            >
+              Click here
+            </a>{' '}
+            to launch it without update
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
 export function InactivePlugin(props: MSPluginProps) {
   const { title, iconInactive, onClickInactive } = props;
 
@@ -103,33 +143,33 @@ export function LoadingPlugin(props: MSPluginProps) {
 
 export function MassaWallet(props: PluginWalletProps) {
   const {
-    isActive,
+    state,
     isLoading,
     status,
-    isUpdatable,
     title,
     iconActive,
     iconInactive,
     onClickActive,
     onClickInactive,
     onUpdateClick,
+    isUpdating,
   } = props;
 
   const displayPlugin = () => {
     if (isLoading) {
       return <LoadingPlugin title={title} iconInactive={iconInactive} />;
     }
-    if (isUpdatable) {
-      console.log('plugin is updatable (MW)');
+    if (state === WalletStates.Updateable) {
       return (
-        <ActivePlugin
+        <Updateplugin
           title={title}
           iconActive={iconActive}
           onClickActive={onUpdateClick}
+          isUpdating={isUpdating}
         />
       );
     }
-    if (!isActive) {
+    if (state === WalletStates.Inactive) {
       return (
         <InactivePlugin
           title={title}

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

@@ -12,7 +12,7 @@ import { MassaPluginModel } from '@/models';
 import { MassaWallet } from './Dashboard/MassaWallet';
 import { PluginExecuteRequest } from '../Store/StationSection/StationPlugin';
 import { usePost } from '@/custom/api';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export interface IDashboardStationProps {
   massaPlugins?: MassaPluginModel[] | undefined;
@@ -23,6 +23,12 @@ export interface IDashboardStationProps {
   theme?: Theme | undefined;
 }
 
+export enum WalletStates {
+  Active = 'Active',
+  Inactive = 'Inactive',
+  Updateable = 'Updateable',
+}
+
 export function DashboardStation(props: IDashboardStationProps) {
   let {
     pluginWalletIsInstalled,
@@ -40,22 +46,29 @@ export function DashboardStation(props: IDashboardStationProps) {
     (plugin: MassaPluginModel) => plugin.name === MASSA_WALLET,
   )?.updatable;
 
+  const [walletState, setWalletState] = useState<WalletStates>();
+
   const {
     mutate: mutateExecute,
     isSuccess: isExecuteSuccess,
     isLoading: isExecuteLoading,
   } = usePost<PluginExecuteRequest>(`plugin-manager/${id}/execute`);
 
   useEffect(() => {
-    if (isUpdatable) {
-      console.log('plugin is updatable');
+    if (pluginWalletIsInstalled && !isUpdatable) {
+      setWalletState(WalletStates.Active);
+    } else if (pluginWalletIsInstalled && isUpdatable) {
+      setWalletState(WalletStates.Updateable);
     } else {
-      console.log('plugin is not updatable');
+      setWalletState(WalletStates.Inactive);
     }
+  }, [isUpdatable, pluginWalletIsInstalled]);
+
+  useEffect(() => {
     if (isExecuteSuccess) {
-      console.log('plugin updated');
+      setWalletState(WalletStates.Active);
     }
-  }, [isUpdatable, isExecuteLoading, isExecuteSuccess]);
+  }, [isExecuteSuccess]);
 
   function updatePluginState(command: string) {
     if (isExecuteLoading) return;
@@ -71,13 +84,13 @@ export function DashboardStation(props: IDashboardStationProps) {
       <div className="col-start-1 col-span-2  row-span-3">
         <MassaWallet
           key="wallet"
-          isActive={pluginWalletIsInstalled}
+          state={walletState}
           status={
             massaPlugins?.find(
               (plugin: MassaPluginModel) => plugin.name === MASSA_WALLET,
             )?.status
           }
-          isUpdatable={isUpdatable}
+          isUpdating={isExecuteLoading}
           isLoading={isLoading}
           title="Massa Wallet"
           iconActive={<WalletActive />}