Release 2025-04-23

packages/apps/dashboard/server/src/common/constants/operator.ts

@@ -1,2 +1,3 @@
 export const MIN_AMOUNT_STAKED = 1;
-export const MAX_LEADERS_COUNT = 1000;
+export const MAX_LEADERS_COUNT = 100;
+export const REPUTATION_PLACEHOLDER = 'Not available';

packages/apps/dashboard/server/src/modules/details/details.service.ts

@@ -28,6 +28,7 @@ import { ReputationLevel } from '../../common/enums/reputation';
 import {
   MAX_LEADERS_COUNT,
   MIN_AMOUNT_STAKED,
+  REPUTATION_PLACEHOLDER,
 } from '../../common/constants/operator';
 import { GetOperatorsPaginationOptions } from 'src/common/types';
 import { KVStoreDataDto } from './dto/details-response.dto';
@@ -65,7 +66,11 @@ export class DetailsService {
       operatorDto.chainId = chainId;
       operatorDto.balance = await this.getHmtBalance(chainId, address);
 
-      const { reputation } = await this.fetchReputation(chainId, address);
+      const { reputation } = await this.fetchOperatorReputation(
+        chainId,
+        address,
+        operatorDto.role,
+      );
       operatorDto.reputation = reputation;
 
       return operatorDto;
@@ -235,31 +240,40 @@ export class DetailsService {
     return operatorsFilter;
   }
 
-  private async fetchReputation(
+  private async fetchOperatorReputation(
     chainId: ChainId,
     address: string,
+    role?: string,
   ): Promise<{ address: string; reputation: string }> {
     try {
       const response = await firstValueFrom(
-        this.httpService.get(
-          `${this.configService.reputationSource}/reputation/${address}`,
+        this.httpService.get<{ level: string }[]>(
+          `${this.configService.reputationSource}/reputation`,
           {
             params: {
               chain_id: chainId,
-              roles: [
-                Role.JobLauncher,
-                Role.ExchangeOracle,
-                Role.RecordingOracle,
-                Role.ReputationOracle,
-              ],
+              address,
+              roles: role
+                ? [role]
+                : [
+                    Role.JobLauncher,
+                    Role.ExchangeOracle,
+                    Role.RecordingOracle,
+                    Role.ReputationOracle,
+                  ],
             },
           },
         ),
       );
-      return response.data;
+
+      let reputation = REPUTATION_PLACEHOLDER;
+      if (response.data.length) {
+        reputation = response.data[0].level;
+      }
+      return { address, reputation };
     } catch (error) {
       this.logger.error('Error fetching reputation:', error);
-      return { address, reputation: 'Not available' };
+      return { address, reputation: REPUTATION_PLACEHOLDER };
     }
   }
 
@@ -268,7 +282,7 @@ export class DetailsService {
     orderBy?: OperatorsOrderBy,
     orderDirection?: OrderDirection,
     first?: number,
-  ): Promise<{ address: string; reputation: string }[]> {
+  ): Promise<{ address: string; level: string }[]> {
     try {
       const response = await firstValueFrom(
         this.httpService.get(
@@ -304,10 +318,10 @@ export class DetailsService {
 
   private assignReputationsToOperators(
     operators: OperatorDto[],
-    reputations: { address: string; reputation: string }[],
+    reputations: { address: string; level: string }[],
   ): OperatorDto[] {
     const reputationMap = new Map(
-      reputations.map((rep) => [rep.address.toLowerCase(), rep.reputation]),
+      reputations.map((rep) => [rep.address.toLowerCase(), rep.level]),
     );
 
     operators.forEach((operator) => {

packages/apps/dashboard/server/src/modules/details/details.spec.ts

@@ -67,7 +67,7 @@ describe('DetailsService', () => {
 
   it('should fetch and return operators with reputations', async () => {
     const mockOperators = [{ address: '0x123', role: 'Reputation Oracle' }];
-    const mockReputations = [{ address: '0x123', reputation: 'hign' }];
+    const mockReputations = [{ address: '0x123', level: 'high' }];
 
     jest
       .spyOn(OperatorUtils, 'getOperators')
@@ -82,7 +82,7 @@ describe('DetailsService', () => {
       expect.objectContaining({
         address: '0x123',
         role: 'Reputation Oracle',
-        reputation: 'hign',
+        reputation: 'high',
       }),
     ]);
   });
@@ -115,9 +115,9 @@ describe('DetailsService', () => {
       { address: '0xE', role: 'Recording Oracle' },
     ];
     const mockReputations = [
-      { address: '0xB', reputation: 'high' },
-      { address: '0xC', reputation: 'high' },
-      { address: '0xD', reputation: 'medium' },
+      { address: '0xB', level: 'high' },
+      { address: '0xC', level: 'high' },
+      { address: '0xD', level: 'medium' },
     ];
 
     const getOperatorsSpy = jest.spyOn(OperatorUtils, 'getOperators');

packages/apps/human-app/frontend/src/api/hooks/use-access-token-refresh.ts

@@ -43,10 +43,10 @@ export function useAccessTokenRefresh() {
         }
       } catch (error) {
         if (authType === 'web2' && web2User) {
-          web2SignOut(false);
+          web2SignOut({ throwExpirationModal: false });
         }
         if (authType === 'web3' && web3User) {
-          web3SignOut(false);
+          web3SignOut({ throwExpirationModal: false });
         }
         browserAuthProvider.signOut({
           triggerSignOutSubscriptions: throwExpirationModalOnSignOut,

packages/apps/human-app/frontend/src/main.tsx

@@ -5,7 +5,6 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import '@/shared/i18n/i18n';
 import CssBaseline from '@mui/material/CssBaseline';
 import { BrowserRouter } from 'react-router-dom';
-import { DisplayModal } from '@/shared/components/ui/modal/display-modal';
 import { AuthProvider } from '@/modules/auth/context/auth-context';
 import { Router } from '@/router/router';
 import '@fontsource/inter';
@@ -19,6 +18,8 @@ import { JWTExpirationCheck } from '@/shared/contexts/jwt-expiration-check';
 import { ColorModeProvider } from '@/shared/contexts/color-mode';
 import { HomePageStateProvider } from '@/shared/contexts/homepage-state';
 import { NotificationProvider } from '@/shared/providers/notifications-provider';
+import { ModalProvider } from './shared/contexts/modal-context';
+import { GlobalModal } from './shared/components/ui/modal/global-modal';
 
 const root = document.getElementById('root');
 if (!root) throw Error('root element is undefined');
@@ -39,14 +40,16 @@ createRoot(root).render(
           <BrowserRouter>
             <WalletConnectProvider>
               <HomePageStateProvider>
-                <Web3AuthProvider>
-                  <AuthProvider>
-                    <DisplayModal />
-                    <JWTExpirationCheck>
-                      <Router />
-                    </JWTExpirationCheck>
-                  </AuthProvider>
-                </Web3AuthProvider>
+                <ModalProvider>
+                  <Web3AuthProvider>
+                    <AuthProvider>
+                      <GlobalModal />
+                      <JWTExpirationCheck>
+                        <Router />
+                      </JWTExpirationCheck>
+                    </AuthProvider>
+                  </Web3AuthProvider>
+                </ModalProvider>
               </HomePageStateProvider>
               <ReactQueryDevtools client={queryClient} initialIsOpen={false} />
             </WalletConnectProvider>

packages/apps/human-app/frontend/src/modules/auth-web3/components/wallet-connect-modal.tsx

@@ -4,24 +4,31 @@ import { Trans } from 'react-i18next';
 import { useEffect } from 'react';
 import { Button } from '@/shared/components/ui/button';
 import { ConnectWalletBtn } from '@/shared/components/ui/connect-wallet-btn';
-import { useModalStore } from '@/shared/components/ui/modal/modal.store';
 import { useWalletConnect } from '@/shared/contexts/wallet-connect';
+import { breakpoints } from '@/shared/styles/breakpoints';
 
-export function WalletConnectModal() {
-  const { closeModal } = useModalStore();
+export function WalletConnectModal({ close }: Readonly<{ close: () => void }>) {
   const { isConnected } = useWalletConnect();
 
   useEffect(() => {
     if (isConnected) {
-      closeModal();
+      close();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- ...
   }, [isConnected]);
 
   return (
     <Grid
       container
-      sx={{ justifyContent: 'center', alignItems: 'center', minHeight: '60vh' }}
+      sx={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: '60vh',
+        paddingX: '60px',
+        [breakpoints.mobile]: {
+          paddingX: '6px',
+        },
+      }}
     >
       <Grid
         container
@@ -52,7 +59,7 @@ export function WalletConnectModal() {
           <Button
             fullWidth
             onClick={() => {
-              closeModal();
+              close();
             }}
             variant="outlined"
           >

packages/apps/human-app/frontend/src/modules/auth-web3/context/web3-auth-context.tsx

@@ -1,14 +1,6 @@
-/* eslint-disable camelcase -- ...*/
-import { useState, createContext, useEffect } from 'react';
-import { jwtDecode } from 'jwt-decode';
+/* eslint-disable camelcase */
 import { z } from 'zod';
-import { useQueryClient } from '@tanstack/react-query';
-import { browserAuthProvider } from '@/shared/contexts/browser-auth-provider';
-import {
-  ModalType,
-  useModalStore,
-} from '@/shared/components/ui/modal/modal.store';
-import { type AuthTokensSuccessResponse } from '@/shared/schemas';
+import { createAuthProvider } from '@/shared/contexts/generic-auth-context';
 
 export enum OperatorStatus {
   ACTIVE = 'active',
@@ -26,121 +18,8 @@ const web3userDataSchema = z.object({
 
 export type Web3UserData = z.infer<typeof web3userDataSchema>;
 
-type AuthStatus = 'loading' | 'error' | 'success' | 'idle';
-export interface Web3AuthenticatedUserContextType {
-  user: Web3UserData;
-  status: AuthStatus;
-  signOut: (throwExpirationModal?: boolean) => void;
-  signIn: (singIsSuccess: AuthTokensSuccessResponse) => void;
-  updateUserData: (updateUserDataPayload: Partial<Web3UserData>) => void;
-}
-
-interface Web3UnauthenticatedUserContextType {
-  user: null;
-  status: AuthStatus;
-  signOut: (throwExpirationModal?: boolean) => void;
-  signIn: (singIsSuccess: AuthTokensSuccessResponse) => void;
-}
-
-export const Web3AuthContext = createContext<
-  Web3AuthenticatedUserContextType | Web3UnauthenticatedUserContextType | null
->(null);
-
-export function Web3AuthProvider({ children }: { children: React.ReactNode }) {
-  const queryClient = useQueryClient();
-  const { openModal } = useModalStore();
-  const [web3AuthState, setWeb3AuthState] = useState<{
-    user: Web3UserData | null;
-    status: AuthStatus;
-  }>({ user: null, status: 'loading' });
-
-  const displayExpirationModal = () => {
-    queryClient.setDefaultOptions({ queries: { enabled: false } });
-    openModal({
-      modalType: ModalType.EXPIRATION_MODAL,
-      displayCloseButton: false,
-      maxWidth: 'sm',
-    });
-  };
-
-  const updateUserData = (updateUserDataPayload: Partial<Web3UserData>) => {
-    setWeb3AuthState((state) => {
-      if (!state.user) {
-        return state;
-      }
-
-      const newUserData = {
-        ...state.user,
-        ...updateUserDataPayload,
-      };
-      browserAuthProvider.setUserData(newUserData);
-
-      return {
-        ...state,
-        user: newUserData,
-      };
-    });
-  };
-
-  const handleSignIn = () => {
-    try {
-      const accessToken = browserAuthProvider.getAccessToken();
-      const authType = browserAuthProvider.getAuthType();
-
-      if (!accessToken || authType !== 'web3') {
-        setWeb3AuthState({ user: null, status: 'idle' });
-        return;
-      }
-      const userData = jwtDecode(accessToken);
-      const validUserData = web3userDataSchema.parse(userData);
-      setWeb3AuthState({ user: validUserData, status: 'success' });
-      browserAuthProvider.signOutSubscription = displayExpirationModal;
-    } catch (e) {
-      // eslint-disable-next-line no-console -- ...
-      console.error('Invalid Jwt payload:', e);
-      browserAuthProvider.signOut({ triggerSignOutSubscriptions: true });
-      setWeb3AuthState({ user: null, status: 'error' });
-    }
-  };
-
-  const signIn = (singIsSuccess: AuthTokensSuccessResponse) => {
-    browserAuthProvider.signIn(singIsSuccess, 'web3');
-    handleSignIn();
-  };
-
-  const signOut = (throwExpirationModal = true) => {
-    browserAuthProvider.signOut({
-      triggerSignOutSubscriptions: throwExpirationModal,
-    });
-
-    setWeb3AuthState({ user: null, status: 'idle' });
-  };
-
-  useEffect(() => {
-    handleSignIn();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <Web3AuthContext.Provider
-      value={
-        web3AuthState.user && web3AuthState.status === 'success'
-          ? {
-              user: web3AuthState.user,
-              status: web3AuthState.status,
-              signOut,
-              signIn,
-              updateUserData,
-            }
-          : {
-              user: null,
-              status: web3AuthState.status,
-              signOut,
-              signIn,
-            }
-      }
-    >
-      {children}
-    </Web3AuthContext.Provider>
-  );
-}
+export const { AuthContext: Web3AuthContext, AuthProvider: Web3AuthProvider } =
+  createAuthProvider<Web3UserData>({
+    authType: 'web3',
+    schema: web3userDataSchema,
+  });

packages/apps/human-app/frontend/src/modules/auth-web3/hooks/use-wallet-connect-modal.tsx

@@ -0,0 +1,15 @@
+import { useModal } from '@/shared/contexts/modal-context';
+import { WalletConnectModal } from '../components/wallet-connect-modal';
+
+export function useWalletConnectModal() {
+  const { openModal, closeModal } = useModal();
+
+  return {
+    openModal: () => {
+      openModal({
+        content: <WalletConnectModal close={closeModal} />,
+        showCloseButton: false,
+      });
+    },
+  };
+}