chore: simplify operator profile page

packages/apps/human-app/frontend/src/modules/operator/profile/components/index.ts

@@ -1,2 +1,4 @@
 export * from './profile-disable-button';
 export * from './profile-enable-button';
+export * from './operator-info';
+export * from './operator-stats';

packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-info.tsx

@@ -0,0 +1,127 @@
+import { Paper, Typography, Stack, List, Grid } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useWeb3AuthenticatedUser } from '@/modules/auth-web3/hooks/use-web3-authenticated-user';
+import { CheckmarkIcon, LockerIcon } from '@/shared/components/ui/icons';
+import { ProfileListItem } from '@/shared/components/ui/profile';
+import { useColorMode } from '@/shared/contexts/color-mode';
+import { useIsMobile } from '@/shared/hooks/use-is-mobile';
+import { type GetEthKVStoreValuesSuccessResponse } from '../../hooks/use-get-keys';
+import { ProfileDisableButton } from './profile-disable-button';
+import { ProfileEnableButton } from './profile-enable-button';
+
+export function OperatorInfo({
+  keysData,
+}: Readonly<{ keysData: GetEthKVStoreValuesSuccessResponse }>) {
+  const { colorPalette } = useColorMode();
+  const { t } = useTranslation();
+  const { user } = useWeb3AuthenticatedUser();
+  const isMobile = useIsMobile('lg');
+
+  const isOperatorActive = user.status === 'active';
+
+  return (
+    <Paper
+      sx={{
+        height: '100%',
+        boxShadow: 'none',
+        padding: isMobile ? '40px 20px' : '40px 40px',
+        borderRadius: '20px',
+      }}
+    >
+      <Typography
+        color={colorPalette.text.primary}
+        sx={{
+          fontWeight: 600,
+        }}
+        variant="h5"
+      >
+        {t('operator.profile.about.header')}
+      </Typography>
+      <Stack flexDirection="row">
+        <List sx={{ overflow: 'hidden' }}>
+          <ProfileListItem
+            header={t('operator.profile.about.role')}
+            paragraph={
+              keysData.role ?? t('operator.addKeysPage.existingKeys.noValue')
+            }
+          />
+          <Grid
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '10px',
+            }}
+          >
+            <Typography
+              component="span"
+              sx={{
+                overflow: 'hidden',
+              }}
+              variant="subtitle2"
+            >
+              {t('operator.profile.about.status.statusHeader')}
+            </Typography>
+            {isOperatorActive ? (
+              <Grid
+                sx={{
+                  display: 'flex',
+
+                  alignItems: 'center',
+                  gap: '0.4rem',
+                }}
+              >
+                {t('operator.profile.about.status.statusActivated')}
+                <CheckmarkIcon />
+              </Grid>
+            ) : (
+              <Grid
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.4rem',
+                }}
+              >
+                {t('operator.profile.about.status.statusDeactivated')}
+                <LockerIcon />
+              </Grid>
+            )}
+            <div>
+              {isOperatorActive ? (
+                <ProfileDisableButton />
+              ) : (
+                <ProfileEnableButton />
+              )}
+            </div>
+          </Grid>
+          <ProfileListItem
+            header={t('operator.profile.about.fee')}
+            paragraph={
+              `${keysData.fee ?? ''}${t('inputMasks.percentSuffix')}` ||
+              t('operator.addKeysPage.existingKeys.noValue')
+            }
+          />
+          <ProfileListItem
+            header={t('operator.profile.about.publicKey')}
+            paragraph={
+              keysData.public_key ??
+              t('operator.addKeysPage.existingKeys.noValue')
+            }
+          />
+          <ProfileListItem
+            header={t('operator.profile.about.url')}
+            paragraph={
+              keysData.url ?? t('operator.addKeysPage.existingKeys.url')
+            }
+          />
+          <ProfileListItem
+            header={t('operator.profile.about.webhookUrl')}
+            paragraph={
+              keysData.webhook_url ??
+              t('operator.addKeysPage.existingKeys.noValue')
+            }
+          />
+        </List>
+      </Stack>
+    </Paper>
+  );
+}

packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-stats.tsx

@@ -0,0 +1,75 @@
+import { Paper, Typography, Stack, List } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { ProfileListItem } from '@/shared/components/ui/profile';
+import { useColorMode } from '@/shared/contexts/color-mode';
+import { useIsMobile } from '@/shared/hooks/use-is-mobile';
+import { type OperatorStatsResponse } from '../hooks';
+
+export function OperatorStats({
+  statsData,
+}: Readonly<{
+  statsData: OperatorStatsResponse;
+}>) {
+  const isMobile = useIsMobile('lg');
+  const { colorPalette } = useColorMode();
+  const { t } = useTranslation();
+
+  return (
+    <Paper
+      sx={{
+        height: '100%',
+        boxShadow: 'none',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: isMobile ? '20px' : '40px',
+        borderRadius: '20px',
+      }}
+    >
+      <Typography
+        color={colorPalette.text.primary}
+        sx={{
+          fontWeight: 600,
+          width: '100%',
+        }}
+        variant="h5"
+      >
+        {t('operator.profile.statistics.header')}
+      </Typography>
+      <Stack flexDirection="row" justifyContent="space-between">
+        <List>
+          <ProfileListItem
+            header={t('operator.profile.statistics.escrowsProcessed')}
+            paragraph={statsData.escrows_processed.toString()}
+          />
+          <ProfileListItem
+            header={t('operator.profile.statistics.escrowsActive')}
+            paragraph={statsData.escrows_active.toString()}
+          />
+          <ProfileListItem
+            header={t('operator.profile.statistics.escrowsCancelled')}
+            paragraph={statsData.escrows_cancelled.toString()}
+          />
+          <ProfileListItem
+            header={t('operator.profile.statistics.workersAmount')}
+            paragraph={statsData.workers_total.toString()}
+          />
+        </List>
+        <List>
+          <ProfileListItem
+            header={t('operator.profile.statistics.assignmentsCompleted')}
+            paragraph={statsData.assignments_completed.toString()}
+          />
+          <ProfileListItem
+            header={t('operator.profile.statistics.assignmentsRejected')}
+            paragraph={statsData.assignments_rejected.toString()}
+          />
+          <ProfileListItem
+            header={t('operator.profile.statistics.assignmentsExpired')}
+            paragraph={statsData.assignments_expired.toString()}
+          />
+        </List>
+      </Stack>
+    </Paper>
+  );
+}

packages/apps/human-app/frontend/src/modules/operator/profile/components/profile-disable-button.tsx

@@ -1,13 +1,13 @@
 import { t } from 'i18next';
 import { Typography } from '@mui/material';
-import { useDisableWeb3Operator } from '@/modules/operator/hooks/use-disable-operator';
 import { useConnectedWallet } from '@/shared/contexts/wallet-connect';
 import { Button } from '@/shared/components/ui/button';
 import type { SignatureData } from '@/api/hooks/use-prepare-signature';
 import {
   PrepareSignatureType,
   usePrepareSignature,
 } from '@/api/hooks/use-prepare-signature';
+import { useDisableWeb3Operator } from '../hooks';
 
 export function ProfileDisableButton() {
   const { address, signMessage } = useConnectedWallet();

packages/apps/human-app/frontend/src/modules/operator/profile/hooks/index.ts

@@ -1 +1,2 @@
 export * from './use-get-stats';
+export * from './use-disable-operator';

packages/apps/human-app/frontend/src/modules/operator/profile/hooks/use-get-stats.ts

@@ -14,10 +14,6 @@ const operatorStatsSuccessResponseSchema = z.object({
   escrows_cancelled: z.number(),
 });
 
-export type OperatorStatsSuccessResponse = z.infer<
-  typeof operatorStatsSuccessResponseSchema
->;
-
 const failedResponse = {
   workers_total: '-',
   assignments_completed: '-',
@@ -28,6 +24,16 @@ const failedResponse = {
   escrows_cancelled: '-',
 };
 
+type OperatorStatsSuccessResponse = z.infer<
+  typeof operatorStatsSuccessResponseSchema
+>;
+
+type OperatorStatsFailedResponse = typeof failedResponse;
+
+export type OperatorStatsResponse =
+  | OperatorStatsSuccessResponse
+  | OperatorStatsFailedResponse;
+
 export function useGetOperatorStats() {
   const { data: keysData } = useGetKeys();