[Job Launcher] - Client common fixes

packages/apps/job-launcher/client/package.json

@@ -6,7 +6,6 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@hcaptcha/react-hcaptcha": "^1.8.1",
-    "@human-protocol/core": "*",
     "@human-protocol/sdk": "*",
     "@mui/lab": "^5.0.0-alpha.141",
     "@mui/material": "^5.11.7",
@@ -34,11 +33,12 @@
     "start": "vite --port 3005",
     "build": "vite build",
     "preview": "vite preview",
-    "start-prod": "serve -s build",
+    "start-prod": "serve -s dist",
     "test": "vitest run -u",
     "format:prettier": "prettier --write \"**/*.{ts,tsx,js,jsx}\"",
     "format:lint": "eslint --fix \"**/*.{ts,tsx,js,jsx}\"",
-    "format": "npm run format:prettier && npm run format:lint"
+    "format": "npm run format:prettier && npm run format:lint",
+    "vercel-build": "yarn workspace @human-protocol/sdk build && yarn build"
   },
   "browserslist": {
     "production": [

packages/apps/job-launcher/client/src/components/Auth/ForgotPasswordForm.jsx

@@ -30,7 +30,7 @@ export const ForgotPasswordForm = () => {
       await authService.forgotPassword(email);
       setIsSuccess(true);
     } catch (err) {
-      setAlertMsg(err?.message);
+      setAlertMsg(err?.response?.data?.message ?? err?.message);
     }
     setIsLoading(false);
   };

packages/apps/job-launcher/client/src/components/Auth/ResendEmailVerificationForm.jsx

@@ -22,7 +22,7 @@ export const ResendEmailVerificationForm = ({ onFinish }) => {
       await authService.resendEmailVerification(email);
       onFinish();
     } catch (err) {
-      setAlertMsg(err?.message);
+      setAlertMsg(err?.response?.data?.message ?? err?.message);
     }
     setIsLoading(false);
   };

packages/apps/job-launcher/client/src/components/Auth/SignInForm.jsx

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 import * as authService from '../../services/auth';
 import { useAppDispatch } from '../../state';
 import { fetchUserBalanceAsync, signIn } from '../../state/auth/reducer';
+import { fetchUserJobsAsync } from '../../state/jobs/reducer';
 import { Password } from './Password';
 import { LoginValidationSchema } from './schema';
 
@@ -34,8 +35,9 @@ export const SignInForm = ({ onError }) => {
       });
       dispatch(signIn(data));
       dispatch(fetchUserBalanceAsync());
+      dispatch(fetchUserJobsAsync());
     } catch (err) {
-      onError(err?.response?.data?.message);
+      onError(err?.response?.data?.message ?? err.message);
     }
     setIsLoading(false);
   };

packages/apps/job-launcher/client/src/components/Auth/SignUpForm.jsx

@@ -27,7 +27,7 @@ export const SignUpForm = ({ onFinish, onError }) => {
 
       setIsSuccess(true);
     } catch (err) {
-      onError(err?.message);
+      onError(err?.response?.data?.message ?? err.message);
     }
     setIsLoading(false);
   };

packages/apps/job-launcher/client/src/components/Auth/VerifyEmailForm.tsx

@@ -29,7 +29,7 @@ export const VerifyEmailForm = () => {
       await authService.verifyEmail({ token });
       setIsSuccess(true);
     } catch (err) {
-      setAlertMsg(err?.response?.data?.message);
+      setAlertMsg(err?.response?.data?.message ?? err.message);
     }
     setIsLoading(false);
   };

packages/apps/job-launcher/client/src/components/Headers/AuthHeader.tsx

@@ -63,12 +63,16 @@ export const AuthHeader = () => {
   };
 
   const handleLogOut = async () => {
-    if (refreshToken) {
-      setIsLoggingOut(true);
-      await authServices.signOut(refreshToken);
-      dispatch(signOut());
-      setIsLoggingOut(false);
+    setIsLoggingOut(true);
+    try {
+      if (refreshToken) {
+        await authServices.signOut(refreshToken);
+      }
+    } catch (err) {
+      console.log(err);
     }
+    dispatch(signOut());
+    setIsLoggingOut(false);
   };
 
   let segements = pathname.split('/').filter((s) => s);

packages/apps/job-launcher/client/src/components/Jobs/Create/CreateJob.tsx

@@ -31,7 +31,7 @@ export const CreateJob = () => {
           '0px 1px 5px 0px rgba(233, 235, 250, 0.20), 0px 2px 2px 0px rgba(233, 235, 250, 0.50), 0px 3px 1px -2px #E9EBFA',
       }}
     >
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 5 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
         <FormControl variant="standard" sx={{ minWidth: 220 }}>
           <InputLabel id="job-type-select-label">Job Type</InputLabel>
           <Select

packages/apps/job-launcher/client/src/components/Jobs/Create/CryptoPayForm.tsx

@@ -1,4 +1,5 @@
 import HMTokenABI from '@human-protocol/core/abis/HMToken.json';
+import { NETWORKS } from '@human-protocol/sdk';
 import { LoadingButton } from '@mui/lab';
 import {
   Alert,
@@ -18,7 +19,6 @@ import React, { useMemo, useState } from 'react';
 import { useAccount, useNetwork, useSigner } from 'wagmi';
 import { TokenSelect } from '../../../components/TokenSelect';
 import { JOB_LAUNCHER_OPERATOR_ADDRESS } from '../../../constants/addresses';
-import { SUPPORTED_CHAIN_IDS } from '../../../constants/chains';
 import { JOB_LAUNCHER_FEE } from '../../../constants/payment';
 import { useTokenRate } from '../../../hooks/useTokenRate';
 import { useCreateJobPageUI } from '../../../providers/CreateJobPageUIProvider';
@@ -71,7 +71,7 @@ export const CryptoPayForm = ({
   }, [payWithAccountBalance, totalAmount, accountAmount]);
 
   const handlePay = async () => {
-    if (signer && tokenAddress && amount) {
+    if (signer && tokenAddress && amount && jobRequest.chainId) {
       setIsLoading(true);
       try {
         if (walletPayAmount > 0) {
@@ -117,13 +117,16 @@ export const CryptoPayForm = ({
     }
   };
 
-  if (!chain || chain.unsupported || !SUPPORTED_CHAIN_IDS.includes(chain.id))
+  if (!chain || chain.unsupported || chain.id !== jobRequest.chainId)
     return (
-      <Box>
-        <Typography>
-          You are on wrong network, please switch to one of the supported
-          networks.
+      <Box textAlign="center">
+        <Typography textAlign="center">
+          You are on wrong network, please switch to{' '}
+          {NETWORKS[jobRequest.chainId!]?.title}.
         </Typography>
+        <Button variant="outlined" onClick={() => goToPrevStep?.()}>
+          Back
+        </Button>
       </Box>
     );
 

packages/apps/job-launcher/client/src/components/Jobs/Create/CvatJobRequestForm.tsx

@@ -14,18 +14,20 @@ import { Formik } from 'formik';
 import React from 'react';
 import { useCreateJobPageUI } from '../../../providers/CreateJobPageUIProvider';
 import { CvatJobType } from '../../../types';
+import { CvatJobRequestValidationSchema } from './schema';
 
 export const CvatJobRequestForm = () => {
   const { jobRequest, updateJobRequest, goToPrevStep, goToNextStep } =
     useCreateJobPageUI();
 
   const initialValues = {
     labels: [],
-    type: CvatJobType.IMAGE_LABEL_BINARY,
+    type: CvatJobType.IMAGE_POINTS,
     description: '',
     dataUrl: '',
     groundTruthUrl: '',
-    accuracyTarget: undefined,
+    userGuide: '',
+    accuracyTarget: 80,
   };
 
   const handleNext = ({
@@ -34,6 +36,7 @@ export const CvatJobRequestForm = () => {
     description,
     dataUrl,
     groundTruthUrl,
+    userGuide,
     accuracyTarget,
   }: any) => {
     updateJobRequest?.({
@@ -44,6 +47,7 @@ export const CvatJobRequestForm = () => {
         description,
         dataUrl,
         groundTruthUrl,
+        userGuide,
         accuracyTarget,
       },
     });
@@ -54,7 +58,7 @@ export const CvatJobRequestForm = () => {
     <Box>
       <Formik
         initialValues={initialValues}
-        // validationSchema={RegisterValidationSchema}
+        validationSchema={CvatJobRequestValidationSchema}
         onSubmit={handleNext}
       >
         {({
@@ -70,44 +74,10 @@ export const CvatJobRequestForm = () => {
           <form>
             <Grid container spacing={4} mb={4}>
               <Grid item xs={12} sm={12} md={6}>
-                <FormControl fullWidth sx={{ mb: 4 }}>
-                  <Autocomplete
-                    clearIcon={false}
-                    options={[]}
-                    freeSolo
-                    multiple
-                    renderTags={(value, props) =>
-                      value.map((option, index) => (
-                        <Chip label={option} {...props({ index })} />
-                      ))
-                    }
-                    renderInput={(params) => (
-                      <TextField label="Labels" {...params} />
-                    )}
-                    onChange={(e, value) => setFieldValue('labels', value)}
-                    onBlur={handleBlur}
-                    placeholder="Labels"
-                  />
-                </FormControl>
-                <FormControl fullWidth>
-                  <TextField
-                    name="description"
-                    value={values.description}
-                    onChange={(e) =>
-                      setFieldValue('description', e.target.value)
-                    }
-                    onBlur={handleBlur}
-                    placeholder="Description"
-                    error={touched.description && Boolean(errors.description)}
-                    helperText={errors.description}
-                    multiline
-                    rows={8}
-                  />
-                </FormControl>
-              </Grid>
-              <Grid item xs={12} sm={12} md={6}>
-                <FormControl variant="standard" fullWidth sx={{ mb: 4 }}>
-                  <InputLabel id="cvat-job-type-select-label">Type</InputLabel>
+                <FormControl variant="standard" fullWidth sx={{ mb: 2 }}>
+                  <InputLabel id="cvat-job-type-select-label">
+                    Type of job
+                  </InputLabel>
                   <Select
                     labelId="cvat-job-type-select-label"
                     id="cvat-job-type-select"
@@ -129,27 +99,62 @@ export const CvatJobRequestForm = () => {
                     error={touched.type && Boolean(errors.type)}
                     onBlur={handleBlur}
                   >
-                    <MenuItem value={CvatJobType.IMAGE_LABEL_BINARY}>
-                      Binary Classification
-                    </MenuItem>
                     <MenuItem value={CvatJobType.IMAGE_POINTS}>Points</MenuItem>
                     <MenuItem value={CvatJobType.IMAGE_BOXES}>
                       Bounding Boxes
                     </MenuItem>
                   </Select>
                 </FormControl>
-                <FormControl fullWidth sx={{ mb: 3 }}>
+                <FormControl fullWidth>
+                  <TextField
+                    name="description"
+                    value={values.description}
+                    onChange={(e) =>
+                      setFieldValue('description', e.target.value)
+                    }
+                    onBlur={handleBlur}
+                    placeholder="Description"
+                    label="Description"
+                    error={touched.description && Boolean(errors.description)}
+                    helperText={errors.description}
+                    multiline
+                    rows={11}
+                  />
+                </FormControl>
+              </Grid>
+              <Grid item xs={12} sm={12} md={6}>
+                <FormControl fullWidth sx={{ mb: 2 }}>
+                  <Autocomplete
+                    clearIcon={false}
+                    options={[]}
+                    freeSolo
+                    multiple
+                    renderTags={(value, props) =>
+                      value.map((option, index) => (
+                        <Chip label={option} {...props({ index })} />
+                      ))
+                    }
+                    renderInput={(params) => (
+                      <TextField label="Labels" {...params} />
+                    )}
+                    onChange={(e, value) => setFieldValue('labels', value)}
+                    onBlur={handleBlur}
+                    placeholder="Labels"
+                  />
+                </FormControl>
+                <FormControl fullWidth sx={{ mb: 2 }}>
                   <TextField
                     name="dataUrl"
                     value={values.dataUrl}
                     onChange={(e) => setFieldValue('dataUrl', e.target.value)}
                     onBlur={handleBlur}
                     placeholder="Data URL"
+                    label="Data URL"
                     error={touched.dataUrl && Boolean(errors.dataUrl)}
                     helperText={errors.dataUrl}
                   />
                 </FormControl>
-                <FormControl fullWidth sx={{ mb: 3 }}>
+                <FormControl fullWidth sx={{ mb: 2 }}>
                   <TextField
                     name="groundTruthUrl"
                     value={values.groundTruthUrl}
@@ -158,12 +163,25 @@ export const CvatJobRequestForm = () => {
                     }
                     onBlur={handleBlur}
                     placeholder="Ground Truth URL"
+                    label="Ground Truth URL"
                     error={
                       touched.groundTruthUrl && Boolean(errors.groundTruthUrl)
                     }
                     helperText={errors.groundTruthUrl}
                   />
                 </FormControl>
+                <FormControl fullWidth sx={{ mb: 2 }}>
+                  <TextField
+                    name="userGuide"
+                    value={values.userGuide}
+                    onChange={(e) => setFieldValue('userGuide', e.target.value)}
+                    onBlur={handleBlur}
+                    placeholder="User Guide"
+                    label="User Guide URL"
+                    error={touched.userGuide && Boolean(errors.userGuide)}
+                    helperText={errors.userGuide}
+                  />
+                </FormControl>
                 <FormControl fullWidth>
                   <TextField
                     name="accuracyTarget"
@@ -174,14 +192,14 @@ export const CvatJobRequestForm = () => {
                     }
                     onBlur={handleBlur}
                     placeholder="Accuracy target %"
+                    label="Accuracy target %"
                     error={
                       touched.accuracyTarget && Boolean(errors.accuracyTarget)
                     }
                     helperText={errors.accuracyTarget}
                   />
                 </FormControl>
               </Grid>
-              <Grid item xs={12} sm={12} md={6}></Grid>
             </Grid>
             <Box
               sx={{
@@ -192,7 +210,13 @@ export const CvatJobRequestForm = () => {
             >
               <Button
                 variant="outlined"
-                onClick={() => goToPrevStep?.()}
+                onClick={() => {
+                  goToPrevStep?.();
+                  updateJobRequest?.({
+                    ...jobRequest,
+                    chainId: undefined,
+                  });
+                }}
                 sx={{ width: '200px' }}
               >
                 Cancel
@@ -201,7 +225,7 @@ export const CvatJobRequestForm = () => {
                 variant="contained"
                 sx={{ ml: 2.5, width: '200px' }}
                 onClick={() => handleSubmit()}
-                disabled={!(isValid && dirty)}
+                disabled={!(isValid && dirty) || !jobRequest.chainId}
               >
                 Next
               </Button>

packages/apps/job-launcher/client/src/components/Jobs/Create/FiatPayForm.tsx

@@ -155,6 +155,8 @@ export const FiatPayForm = ({
 
       // create job
       const { jobType, chainId, fortuneRequest, cvatRequest } = jobRequest;
+      if (!chainId) return;
+
       if (jobType === JobType.Fortune && fortuneRequest) {
         await jobService.createFortuneJob(chainId, fortuneRequest, fundAmount);
       } else if (jobType === JobType.CVAT && cvatRequest) {