Release 2025-07-XX

packages/apps/fortune/exchange-oracle/server/package.json

@@ -54,7 +54,7 @@
     "pg": "8.13.1",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.2.0",
-    "typeorm": "^0.3.23",
+    "typeorm": "^0.3.25",
     "typeorm-naming-strategies": "^4.1.0"
   },
   "devDependencies": {

packages/apps/human-app/frontend/package.json

@@ -20,6 +20,7 @@
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^9.7.0",
     "@fontsource/inter": "^5.0.17",
+    "@fontsource/roboto": "^5.2.6",
     "@hcaptcha/react-hcaptcha": "^0.3.6",
     "@hookform/resolvers": "^5.0.1",
     "@human-protocol/sdk": "workspace:*",

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

@@ -12,6 +12,9 @@ import '@fontsource/inter/400.css';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/600.css';
 import '@fontsource/inter/800.css';
+import '@fontsource/roboto';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
 import { WalletConnectProvider } from '@/shared/contexts/wallet-connect';
 import { Web3AuthProvider } from '@/modules/auth-web3/context/web3-auth-context';
 import { JWTExpirationCheck } from '@/shared/contexts/jwt-expiration-check';

packages/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx

@@ -1,10 +1,9 @@
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import { Grid, Link as MuiLink, Typography } from '@mui/material';
+import { Box, Grid, Link as MuiLink, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { env } from '@/shared/env';
 import { useColorMode } from '@/shared/contexts/color-mode';
-import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { useWorkerIdentityVerificationStatus } from '@/modules/worker/profile/hooks';
 import { useActiveProposalQuery } from '../hooks/use-active-proposal-query';
 
@@ -13,8 +12,8 @@ export function GovernanceBanner() {
   const { data, isLoading, isError } = useActiveProposalQuery();
   const { isVerificationCompleted } = useWorkerIdentityVerificationStatus();
   const { colorPalette } = useColorMode();
+  const { text, background } = colorPalette.banner;
   const [timeRemaining, setTimeRemaining] = useState('00:00:00');
-  const isMobile = useIsMobile('lg');
 
   useEffect(() => {
     if (!data?.deadline) return;
@@ -55,52 +54,41 @@ export function GovernanceBanner() {
   return (
     <Grid
       container
-      alignItems="center"
-      sx={{
-        backgroundColor: colorPalette.banner.background.primary,
-        color: colorPalette.banner.text.secondary,
-        borderRadius: '8px',
-        padding: '16px',
-        gap: '16px',
-        mt: -8,
-      }}
-      direction={isMobile ? 'column' : 'row'}
+      alignItems={{ xs: 'flex-start', sm: 'center' }}
+      justifyContent={{ xs: 'flex-start', sm: 'space-between' }}
+      bgcolor={background.primary}
+      color={text.secondary}
+      borderRadius="8px"
+      p={2}
+      gap={2}
+      mt={{ xs: 0, md: -8 }}
     >
       {/* Left side: Countdown & "X votes" */}
       <Grid
         item
         xs={12}
         sm="auto"
-        sx={{ display: 'flex', alignItems: 'center' }}
+        display="flex"
+        alignItems="center"
+        flexWrap={{ xs: 'wrap', sm: 'nowrap' }}
+        gap={{ xs: 2, md: 0 }}
       >
-        <AccessTimeIcon sx={{ mr: 1 }} />
-        <Typography
-          variant="body2"
-          sx={{
-            color: colorPalette.banner.text.secondary,
-          }}
-        >
-          {t('governance.timeToReveal', 'Time to reveal vote')}:
-        </Typography>
-
-        <Typography
-          variant="body1"
-          sx={{
-            ml: 1,
-            color: colorPalette.banner.text.primary,
-          }}
-        >
-          {timeRemaining}
-        </Typography>
+        <Box display="flex" alignItems="center">
+          <AccessTimeIcon sx={{ mr: 1 }} />
+          <Typography variant="body2" color={text.secondary}>
+            {t('governance.timeToReveal', 'Time to reveal vote')}:
+          </Typography>
+          <Typography variant="body1" ml={1} color={text.primary}>
+            {timeRemaining}
+          </Typography>
+        </Box>
         <Typography
           variant="body1"
-          sx={{
-            ml: 8,
-            color: colorPalette.banner.text.primary,
-            backgroundColor: colorPalette.banner.background.secondary,
-            borderRadius: '8px',
-            padding: '4px 8px',
-          }}
+          ml={{ xs: 0, md: 8 }}
+          color={text.primary}
+          bgcolor={background.secondary}
+          borderRadius="8px"
+          padding="4px 8px"
         >
           {totalVotes} {t('governance.votes', 'votes')}
         </Typography>
@@ -111,22 +99,16 @@ export function GovernanceBanner() {
         item
         xs={12}
         sm
-        sx={{
-          display: 'flex',
-          justifyContent: isMobile ? 'flex-start' : 'flex-end',
-          mt: isMobile ? 2 : 0,
-          mr: isMobile ? 0 : 2,
-        }}
+        display="flex"
+        justifyContent={{ xs: 'flex-start', sm: 'flex-end' }}
       >
         <MuiLink
           href={env.VITE_GOVERNANCE_URL}
           underline="none"
           target="_blank"
           rel="noopener noreferrer"
-          sx={{
-            fontWeight: 500,
-            color: colorPalette.banner.text.secondary,
-          }}
+          color={text.secondary}
+          fontWeight={500}
         >
           {t('governance.moreDetails', 'More details')} &rarr;
         </MuiLink>

packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/hooks/use-report-abuse.ts

@@ -0,0 +1,22 @@
+import { useMutation } from '@tanstack/react-query';
+import { ApiClientError } from '@/api/http-api-client';
+import * as jobsService from '../../services/jobs.service';
+import type { ReportAbuseBody } from '../../types';
+
+interface ReportAbuseMutationOptions {
+  onError?: (status: number) => void;
+}
+
+export function useReportAbuseMutation({
+  onError,
+}: ReportAbuseMutationOptions) {
+  return useMutation({
+    mutationFn: (data: ReportAbuseBody) => jobsService.reportAbuse(data),
+    mutationKey: ['reportAbuse'],
+    onError: (error) => {
+      if (error instanceof ApiClientError) {
+        onError?.(error.status);
+      }
+    },
+  });
+}

packages/apps/human-app/frontend/src/modules/worker/jobs/components/index.ts

@@ -2,6 +2,7 @@ export * from './evm-address';
 export * from './jobs-tab-panel';
 export * from './my-jobs-table-actions';
 export * from './escrow-address-search-form';
-export * from './reject-button';
 export * from './reward-amount';
 export * from './sorting';
+export * from './more-button';
+export * from './report-abuse-modal';

packages/apps/human-app/frontend/src/modules/worker/jobs/components/more-button.tsx

@@ -0,0 +1,103 @@
+/* eslint-disable camelcase -- ...*/
+import { useState } from 'react';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import { Button, MenuList, ListItemButton, Popover } from '@mui/material';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useModal } from '@/shared/contexts/modal-context';
+import { useIsMobile } from '@/shared/hooks/use-is-mobile';
+import { useResignJobMutation } from '../my-jobs/hooks';
+import { type MyJob } from '../schemas';
+import { ReportAbuseModal } from './report-abuse-modal';
+
+interface MoreButtonProps {
+  job: MyJob;
+  isDisabled: boolean;
+}
+
+export function MoreButton({ job, isDisabled }: MoreButtonProps) {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const { address: oracleAddress } = useParams<{ address: string }>();
+  const { mutate: rejectTaskMutation } = useResignJobMutation();
+  const { openModal, closeModal } = useModal();
+  const isMobile = useIsMobile();
+  const { t } = useTranslation();
+
+  const isOpen = Boolean(anchorEl);
+
+  const handleCancelTask = () => {
+    setAnchorEl(null);
+    rejectTaskMutation({
+      oracle_address: oracleAddress ?? '',
+      assignment_id: job.assignment_id,
+    });
+  };
+
+  const handleOpenReportAbuseModal = () => {
+    setAnchorEl(null);
+    openModal({
+      content: (
+        <ReportAbuseModal
+          close={closeModal}
+          escrowAddress={job.escrow_address}
+          chainId={job.chain_id}
+        />
+      ),
+      showCloseButton: false,
+    });
+  };
+
+  return (
+    <>
+      <Button
+        disabled={isDisabled}
+        sx={{
+          minWidth: 'unset',
+          width: { xs: '48px', md: '30px' },
+          height: { xs: '48px', md: '30px' },
+          p: 1,
+          border: isMobile ? '1px solid #858ec6' : 'none',
+          borderRadius: '4px',
+          color: '#858ec6',
+        }}
+        onClick={(e) => {
+          !isDisabled && setAnchorEl(e.currentTarget);
+        }}
+      >
+        <MoreHorizIcon />
+      </Button>
+      <Popover
+        open={isOpen}
+        anchorEl={anchorEl}
+        onClose={() => {
+          setAnchorEl(null);
+        }}
+        anchorOrigin={{
+          vertical: isMobile ? 'top' : 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: isMobile ? 'bottom' : 'top',
+          horizontal: 'right',
+        }}
+        slotProps={{
+          paper: {
+            elevation: 8,
+            sx: {
+              mt: isMobile ? -1 : 1,
+            },
+          },
+        }}
+      >
+        <MenuList>
+          <ListItemButton onClick={handleCancelTask}>
+            {t('worker.reportAbuse.cancel')}
+          </ListItemButton>
+          <ListItemButton onClick={handleOpenReportAbuseModal}>
+            {t('worker.reportAbuse.reportAbuse')}
+          </ListItemButton>
+        </MenuList>
+      </Popover>
+    </>
+  );
+}

packages/apps/human-app/frontend/src/modules/worker/jobs/components/my-jobs-table-actions.tsx

@@ -1,11 +1,9 @@
-/* eslint-disable camelcase -- ...*/
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { TableButton } from '@/shared/components/ui/table-button';
-import { useResignJobMutation } from '../my-jobs/hooks';
 import { MyJobStatus } from '../types';
 import { type MyJob } from '../schemas';
-import { RejectButton } from './reject-button';
+import { MoreButton } from './more-button';
 
 interface MyJobsTableRejectActionProps {
   job: MyJob;
@@ -15,10 +13,7 @@ export function MyJobsTableActions({
   job,
 }: Readonly<MyJobsTableRejectActionProps>) {
   const { t } = useTranslation();
-  const { mutate: rejectTaskMutation, isPending: isRejectPending } =
-    useResignJobMutation();
-  const { address: oracleAddress } = useParams<{ address: string }>();
-  const buttonDisabled = job.status !== MyJobStatus.ACTIVE || isRejectPending;
+  const isDisabled = job.status !== MyJobStatus.ACTIVE;
 
   if (!job.url) {
     return null;
@@ -28,24 +23,19 @@ export function MyJobsTableActions({
     <>
       <TableButton
         component={Link}
-        disabled={buttonDisabled}
+        disabled={isDisabled}
         fullWidth
         target="_blank"
         to={job.url}
-        sx={{ maxWidth: { xs: 'unset', sm: '160px' } }}
+        sx={{
+          height: { xs: '48px', md: '30px' },
+          maxWidth: { xs: 'unset', sm: '160px' },
+          flex: { xs: 1, md: 'unset' },
+        }}
       >
         {t('worker.jobs.solve')}
       </TableButton>
-      <RejectButton
-        disabled={buttonDisabled}
-        loading={isRejectPending}
-        onClick={() => {
-          rejectTaskMutation({
-            oracle_address: oracleAddress ?? '',
-            assignment_id: job.assignment_id,
-          });
-        }}
-      />
+      <MoreButton job={job} isDisabled={isDisabled} />
     </>
   );
 }