{shortAddress}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/index.ts b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/index.ts
index ca383549de..4cffc4caf3 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/index.ts
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/index.ts
@@ -1,8 +1,5 @@
export * from './evm-address';
-export * from './jobs-tab-panel';
export * from './my-jobs-table-actions';
-export * from './escrow-address-search-form';
export * from './reward-amount';
-export * from './sorting';
export * from './more-button';
-export * from './report-abuse-modal';
+export * from './report-abuse-dialog';
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/jobs-tab-panel.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/jobs-tab-panel.tsx
deleted file mode 100644
index b87990ffbf..0000000000
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/jobs-tab-panel.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Box } from '@mui/material';
-
-interface TabPanelProps {
- children?: React.ReactNode;
- index: number;
- activeTab: number;
-}
-
-export function TabPanel({ children, index, activeTab }: TabPanelProps) {
- return (
-
- {activeTab === index && {children}}
-
- );
-}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/more-button.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/more-button.tsx
index a79920ed10..d8674df036 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/more-button.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/more-button.tsx
@@ -1,14 +1,15 @@
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 { TopNotificationType, useNotification } from '@/shared/hooks';
import { useResignJobMutation } from '../my-jobs/hooks';
import { type MyJob } from '../schemas';
-import { ReportAbuseModal } from './report-abuse-modal';
+import { useColorMode } from '@/shared/contexts/color-mode/use-color-mode';
+import { useMyJobsFilterStore } from '../hooks';
+import { ReportAbuseDialog } from './report-abuse-dialog';
interface MoreButtonProps {
job: MyJob;
@@ -17,20 +18,23 @@ interface MoreButtonProps {
export function MoreButton({ job, isDisabled }: MoreButtonProps) {
const [anchorEl, setAnchorEl] = useState(null);
- const { address: oracleAddress } = useParams<{ address: string }>();
- const { mutateAsync: rejectTaskMutation } = useResignJobMutation();
- const { openModal, closeModal } = useModal();
- const isMobile = useIsMobile();
+ const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+ const { colorPalette } = useColorMode();
const { t } = useTranslation();
+ const isMobile = useIsMobile();
const { showNotification } = useNotification();
+ const { filterParams } = useMyJobsFilterStore();
+ const { mutateAsync: rejectTaskMutation } = useResignJobMutation();
+
const isOpen = Boolean(anchorEl);
const handleCancelTask = async () => {
setAnchorEl(null);
try {
await rejectTaskMutation({
- oracle_address: oracleAddress ?? '',
+ oracle_address: filterParams.oracle_address ?? '',
assignment_id: job.assignment_id,
});
} catch {
@@ -44,16 +48,7 @@ export function MoreButton({ job, isDisabled }: MoreButtonProps) {
const handleOpenReportAbuseModal = () => {
setAnchorEl(null);
- openModal({
- content: (
-
- ),
- showCloseButton: false,
- });
+ setIsDialogOpen(true);
};
return (
@@ -62,12 +57,12 @@ export function MoreButton({ job, isDisabled }: MoreButtonProps) {
disabled={isDisabled}
sx={{
minWidth: 'unset',
- width: { xs: '48px', md: '30px' },
- height: { xs: '48px', md: '30px' },
+ width: { xs: '44px', md: '30px' },
+ height: { xs: '44px', md: '30px' },
p: 1,
- border: isMobile ? '1px solid #858ec6' : 'none',
+ border: { xs: `1px solid ${colorPalette.border.main}`, md: 'none' },
borderRadius: '4px',
- color: '#858ec6',
+ color: colorPalette.text.auxiliary100,
}}
onClick={(e) => {
if (!isDisabled) {
@@ -95,7 +90,7 @@ export function MoreButton({ job, isDisabled }: MoreButtonProps) {
paper: {
elevation: 8,
sx: {
- mt: isMobile ? -1 : 1,
+ mt: { xs: -1, md: 1 },
},
},
}}
@@ -109,6 +104,12 @@ export function MoreButton({ job, isDisabled }: MoreButtonProps) {
+ setIsDialogOpen(false)}
+ escrowAddress={job.escrow_address}
+ chainId={job.chain_id}
+ />
);
}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/my-jobs-table-actions.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/my-jobs-table-actions.tsx
index 886dc72875..7501dcb0b4 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/my-jobs-table-actions.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/my-jobs-table-actions.tsx
@@ -1,17 +1,16 @@
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
+
import { TableButton } from '@/shared/components/ui/table-button';
import { MyJobStatus } from '../types';
import { type MyJob } from '../schemas';
import { MoreButton } from './more-button';
-interface MyJobsTableRejectActionProps {
+type Props = {
job: MyJob;
-}
+};
-export function MyJobsTableActions({
- job,
-}: Readonly) {
+export function MyJobsTableActions({ job }: Props) {
const { t } = useTranslation();
const isDisabled = job.status !== MyJobStatus.ACTIVE;
@@ -28,7 +27,7 @@ export function MyJobsTableActions({
target="_blank"
to={job.url}
sx={{
- height: { xs: '48px', md: '30px' },
+ height: { xs: '44px', md: '30px' },
maxWidth: { xs: 'unset', sm: '160px' },
flex: { xs: 1, md: 'unset' },
}}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-dialog.tsx
similarity index 51%
rename from packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-modal.tsx
rename to packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-dialog.tsx
index 5cbfa52622..9e2bcfd6f3 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-modal.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-dialog.tsx
@@ -1,26 +1,29 @@
import { useState } from 'react';
import {
Box,
- Button,
- CircularProgress,
FormControl,
MenuItem,
- Select as MuiSelect,
+ Select,
Stack,
Typography,
} from '@mui/material';
import ErrorIcon from '@mui/icons-material/Error';
import SuccessIcon from '@mui/icons-material/CheckCircle';
import { useTranslation } from 'react-i18next';
-import { useIsMobile } from '@/shared/hooks/use-is-mobile';
-import { colorPalette } from '@/shared/styles/color-palette';
+
+import { ResponsiveOverlay } from '@/shared/components/ui/responsive-overlay';
import { useReportAbuseMutation } from '../available-jobs/hooks/use-report-abuse';
+import { useIsMobile } from '@/shared/hooks/use-is-mobile';
+import { Button } from '@/shared/components/ui/button';
+import { useColorMode } from '@/shared/contexts/color-mode/use-color-mode';
+import { Loader } from '@/shared/components/ui/loader';
-interface ReportAbuseModalProps {
+type Props = {
+ open: boolean;
+ onClose: () => void;
escrowAddress: string;
chainId: number;
- close: () => void;
-}
+};
const ABUSE_ERROR = 'Abuse has already been reported';
@@ -40,12 +43,21 @@ const REASON_OPTIONS = [
function ErrorState({ error }: { error: string }) {
const { t } = useTranslation();
+ const { colorPalette } = useColorMode();
const isAbuseError = error === ABUSE_ERROR;
const errorColor = colorPalette.error.main;
return (
-
+
{isAbuseError ? (
<>
@@ -56,7 +68,12 @@ function ErrorState({ error }: { error: string }) {
>
{t('worker.reportAbuse.modalHeaderAlreadyReportedError')}