Convert roles from human readable to snake case to unify values (#3054)

* Convert roles from human readable to snake case to unify values

* Fix yarn lock and reputation oracle tests

* Fix human app server tests

Author: flopez7

packages/apps/dashboard/client/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@human-protocol/sdk": "*",
     "@mui/icons-material": "^6.2.0",
     "@mui/material": "^5.15.18",
     "@mui/styled-engine-sc": "6.4.0",
@@ -36,6 +37,7 @@
     "styled-components": "^6.1.11",
     "swiper": "^11.1.3",
     "use-debounce": "^10.0.2",
+    "vite-plugin-node-polyfills": "^0.23.0",
     "zod": "^3.23.8",
     "zustand": "^4.5.4"
   },

packages/apps/dashboard/client/src/features/Leaderboard/components/EntityIcon.tsx

@@ -3,19 +3,18 @@ import HumanIcon from '@components/Icons/HumanIcon';
 import { JobLauncher } from '@components/Icons/JobLauncher';
 import { RecordingOracle } from '@components/Icons/RecordingOracle';
 import { ReputationOracle } from '@components/Icons/ReputationOracle';
+import { Role } from '@human-protocol/sdk';
 
 export const EntityIcon: React.FC<{ role: string }> = ({ role }) => {
   switch (role) {
-    case 'Job Launcher':
+    case Role.JobLauncher:
       return <JobLauncher />;
-    case 'Recording Oracle':
+    case Role.RecordingOracle:
       return <RecordingOracle />;
-    case 'Reputation Oracle':
+    case Role.ReputationOracle:
       return <ReputationOracle />;
-    case 'Exchange Oracle':
+    case Role.ExchangeOracle:
       return <ExchangeOracleIcon />;
-    case 'HUMAN App':
-      return <HumanIcon />;
     default:
       return <HumanIcon />;
   }

packages/apps/dashboard/client/src/features/Leaderboard/components/RoleCell.tsx

@@ -3,6 +3,7 @@ import { Launch as LaunchIcon } from '@mui/icons-material';
 import { useBreakPoints } from '@utils/hooks/use-is-mobile';
 import { Link } from 'react-router-dom';
 import { EntityIcon } from './EntityIcon';
+import { CaseConverter } from '@utils/case-converter';
 
 const Wrapper = ({
   children,
@@ -40,7 +41,7 @@ export const RoleCell = ({
   const {
     mobile: { isMobile },
   } = useBreakPoints();
-
+  const humanReadableRole = CaseConverter.convertSnakeToHumanReadable(role);
   return (
     <Box display="flex" alignItems="center" gap={1} height="100%">
       <Wrapper websiteUrl={websiteUrl}>
@@ -56,7 +57,7 @@ export const RoleCell = ({
                   whiteSpace: isMobile ? 'wrap' : 'nowrap',
                 }}
               >
-                {name ?? role}
+                {name ?? humanReadableRole}
               </Typography>
               {websiteUrl ? <LaunchIcon fontSize="small" /> : null}
             </Box>
@@ -69,7 +70,7 @@ export const RoleCell = ({
                   whiteSpace: isMobile ? 'wrap' : 'nowrap',
                 }}
               >
-                {role}
+                {humanReadableRole}
               </Typography>
             ) : null}
           </Box>

packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx

@@ -6,18 +6,18 @@ import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
 import ReputationOracleIcon from '@assets/icons/reputation-oracle.svg';
 import ExchangeOracleIcon from '@assets/icons/exchange-oracle.svg';
-import HumanAppIcon from '@assets/icons/human-app.svg';
 import JobLauncherIcon from '@assets/icons/job-launcher.svg';
 import RecordingOracleIcon from '@assets/icons/recording-oracle.svg';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import { AddressDetailsLeader, Roles } from '@services/api/use-address-details';
+import { AddressDetailsLeader } from '@services/api/use-address-details';
 import { getNetwork } from '@utils/config/networks';
 import { useWalletSearch } from '@utils/hooks/use-wallet-search';
 import { RoleDetailsEscrowsTable } from '@pages/SearchResults/RoleDetails/RoleDetailsEscrows/RoleDetailsEscrowsTable';
 import { Reputation } from '@services/api/use-leaderboard-details';
 import { env } from '@helpers/env';
 import { FormatNumberWithDecimals } from '@components/Home/FormatNumber';
 import CustomTooltip from '@components/CustomTooltip';
+import { Role } from '@human-protocol/sdk';
 
 interface RoleInfoProps {
   title: string;
@@ -55,32 +55,32 @@ const RenderRoleDetailsInfo = ({
   }
 
   const roleDetailsInfo: Partial<
-    Record<Roles, { title: string; points: string[] }>
+    Record<string, { title: string; points: string[] }>
   > = {
-    [Roles.reputationOracle]: {
+    [Role.ReputationOracle]: {
       title: 'Reputation Oracle',
       points: [
         'The Reputation Oracle is the trust engine of HUMAN Protocol.',
         'It cross-checks validated solutions from the Recording Oracle, adjusts reputation scores, and manages payments.',
         "It's the final seal of quality and trust within the ecosystem.",
       ],
     },
-    [Roles.recordingOracle]: {
+    [Role.RecordingOracle]: {
       title: 'Recording Oracle',
       points: [
         'The Recording Oracle is where task solutions get the green light.',
         'It is storing, and recording task solutions on the blockchain.',
         "From quality checks to reputation adjustments, it's the assurance you need for dependable results.",
       ],
     },
-    [Roles.exchangeOracle]: {
+    [Role.ExchangeOracle]: {
       title: 'Exchange Oracle',
       points: [
         "The Exchange Oracle is the HUMAN Protocol's powerhouse, directing tasks to skilled workers and ensuring smooth communication.",
         'It validates solutions, provides job updates, and handles cancellations, streamlining the job lifecycle.',
       ],
     },
-    [Roles.jobLauncher]: {
+    [Role.JobLauncher]: {
       title: 'Job Launcher',
       points: [
         'The Job Launcher is a tool that allows anybody to create and launch jobs, to be distributed as tasks through the HUMAN App.',
@@ -154,11 +154,10 @@ const renderReputationTitle = (reputation: Reputation) => {
 const renderRoleIcon = (role: AddressDetailsLeader['role']) => {
   if (!role) return null;
   const roleIcons = {
-    [Roles.reputationOracle]: <ReputationOracleIcon />,
-    [Roles.exchangeOracle]: <ExchangeOracleIcon />,
-    [Roles.humanApp]: <HumanAppIcon />,
-    [Roles.jobLauncher]: <JobLauncherIcon />,
-    [Roles.recordingOracle]: <RecordingOracleIcon />,
+    [Role.ReputationOracle]: <ReputationOracleIcon />,
+    [Role.ExchangeOracle]: <ExchangeOracleIcon />,
+    [Role.JobLauncher]: <JobLauncherIcon />,
+    [Role.RecordingOracle]: <RecordingOracleIcon />,
   };
 
   return roleIcons[role];

packages/apps/dashboard/client/src/services/api/use-address-details.tsx

@@ -5,6 +5,7 @@ import { apiPaths } from '../api-paths';
 import { useWalletSearch } from '@utils/hooks/use-wallet-search';
 import { validateResponse } from '../validate-response';
 import { reputationSchema } from '@services/api/use-leaderboard-details';
+import { Role } from '@human-protocol/sdk';
 
 const transformOptionalTokenAmount = (
   value: string | undefined | null,
@@ -63,19 +64,18 @@ const escrowSchema = z.object({
 
 export type AddressDetailsEscrowSchema = z.infer<typeof escrowSchema>;
 
-export enum Roles {
-  jobLauncher = 'Job Launcher',
-  exchangeOracle = 'Exchange Oracle',
-  humanApp = 'Human App',
-  recordingOracle = 'Recording Oracle',
-  reputationOracle = 'Reputation Oracle',
-}
-
 const leaderSchema = z.object({
   chainId: z.number(),
   address: z.string(),
   balance: z.string().transform(transformOptionalTokenAmount),
-  role: z.nativeEnum(Roles).nullable(),
+  role: z
+    .enum([
+      Role.JobLauncher,
+      Role.ExchangeOracle,
+      Role.RecordingOracle,
+      Role.ReputationOracle,
+    ])
+    .nullable(),
   amountStaked: z.string().optional().transform(transformOptionalTokenAmount),
   amountLocked: z.string().optional().transform(transformOptionalTokenAmount),
   lockedUntilTimestamp: z.string().optional(),

packages/apps/dashboard/client/src/utils/case-converter.ts

@@ -0,0 +1,8 @@
+export class CaseConverter {
+  static convertSnakeToHumanReadable(string: string): string {
+    return string
+      .split('_')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(' ');
+  }
+}

packages/apps/dashboard/client/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import * as path from 'path';
 import svgr from 'vite-plugin-svgr';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,6 +12,9 @@ export default defineConfig({
       include: '**/*.svg',
       exclude: 'src/assets/icons/excluded/**/*.svg',
     }),
+    nodePolyfills({
+      protocolImports: true,
+    }),
   ],
   resolve: {
     alias: {
@@ -23,6 +27,9 @@ export default defineConfig({
       '@services': path.resolve(__dirname, './src/services'),
     },
   },
+  optimizeDeps: {
+    include: ['@human-protocol/sdk'],
+  },
   server: {
     port: 3001,
   },

packages/apps/dashboard/server/src/common/enums/roles.ts

@@ -23,7 +23,6 @@ import { firstValueFrom } from 'rxjs';
 import { HMToken__factory } from '@human-protocol/core/typechain-types';
 import { ethers } from 'ethers';
 import { NetworkConfigService } from '../../common/config/network-config.service';
-import { OracleRole, SubgraphOracleRole } from '../../common/enums/roles';
 import { LeadersOrderBy } from '../../common/enums/leader';
 import { ReputationLevel } from '../../common/enums/reputation';
 import {
@@ -210,10 +209,10 @@ export class DetailsService {
       chainId,
       minAmountStaked: MIN_AMOUNT_STAKED,
       roles: [
-        SubgraphOracleRole.JOB_LAUNCHER,
-        SubgraphOracleRole.EXCHANGE_ORACLE,
-        SubgraphOracleRole.RECORDING_ORACLE,
-        SubgraphOracleRole.REPUTATION_ORACLE,
+        Role.JobLauncher,
+        Role.ExchangeOracle,
+        Role.RecordingOracle,
+        Role.ReputationOracle,
       ],
     };
 
@@ -242,10 +241,10 @@ export class DetailsService {
             params: {
               chain_id: chainId,
               roles: [
-                OracleRole.JOB_LAUNCHER,
-                OracleRole.EXCHANGE_ORACLE,
-                OracleRole.RECORDING_ORACLE,
-                OracleRole.REPUTATION_ORACLE,
+                Role.JobLauncher,
+                Role.ExchangeOracle,
+                Role.RecordingOracle,
+                Role.ReputationOracle,
               ],
             },
           },
@@ -272,10 +271,10 @@ export class DetailsService {
             params: {
               chain_id: chainId,
               roles: [
-                OracleRole.JOB_LAUNCHER,
-                OracleRole.EXCHANGE_ORACLE,
-                OracleRole.RECORDING_ORACLE,
-                OracleRole.REPUTATION_ORACLE,
+                Role.JobLauncher,
+                Role.ExchangeOracle,
+                Role.RecordingOracle,
+                Role.ReputationOracle,
               ],
               ...(orderBy &&
                 orderBy === LeadersOrderBy.REPUTATION && {

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

@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Human Protocol Job Launcher" />
+    <meta name="description" content="Human Protocol Exchange Oracle" />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a