feat(human-app): add first oracle from envs

packages/apps/human-app/frontend/.env.example

@@ -37,6 +37,16 @@ VITE_DAPP_META_URL= #string
 # Dapp icons for wallet connect 
 VITE_DAPP_ICONS= #string => lists of icons eg.: icon1,icon2...
 
+# This data will be use to add first oracle in the oracles table
+# string
+VITE_H_CAPTCHA_ORACLE_ANNOTATION_TOOL=
+# string
+VITE_H_CAPTCHA_ORACLE_ROLE=
+# string
+VITE_H_CAPTCHA_ORACLE_ADDRESS=
+# job types list string
+VITE_H_CAPTCHA_ORACLE_TASK_TYPES= #string => lists of job types eg.: Image labeling, BBoxes...
+
 # network if network is equl to 'testnet' app will use first tesntet chain from .src/smart-contracts/chains.ts
 # and first mainnet chain for 'mainnet'
 VITE_NETWORK= # mainnet|testnet

packages/apps/human-app/frontend/src/api/services/worker/oracles.ts

@@ -5,6 +5,7 @@ import { apiClient } from '@/api/api-client';
 import { apiPaths } from '@/api/api-paths';
 import { useJobsTypesOraclesFilter } from '@/hooks/use-job-types-oracles-table';
 import { stringifyUrlQueryObject } from '@/shared/helpers/stringify-url-query-object';
+import { env } from '@/shared/env';
 
 const OracleSuccessSchema = z.object({
   address: z.string(),
@@ -18,6 +19,13 @@ const OraclesSuccessSchema = z.array(OracleSuccessSchema);
 export type OracleSuccessResponse = z.infer<typeof OracleSuccessSchema>;
 export type OraclesSuccessResponse = OracleSuccessResponse[];
 
+const H_CAPTCHA_ORACLE: OracleSuccessResponse = {
+  address: env.VITE_H_CAPTCHA_ORACLE_ADDRESS,
+  jobTypes: env.VITE_H_CAPTCHA_ORACLE_TASK_TYPES,
+  role: env.VITE_H_CAPTCHA_ORACLE_ROLE,
+  url: env.VITE_H_CAPTCHA_ORACLE_ANNOTATION_TOOL,
+};
+
 export async function getOracles({
   selected_job_types,
 }: {
@@ -27,10 +35,17 @@ export async function getOracles({
     ? `?${stringifyUrlQueryObject({ selected_job_types })}`
     : '';
 
-  return apiClient(`${apiPaths.worker.oracles.path}${queryParams}`, {
-    successSchema: OraclesSuccessSchema,
-    options: { method: 'GET' },
-  });
+  const result = await apiClient(
+    `${apiPaths.worker.oracles.path}${queryParams}`,
+    {
+      successSchema: OraclesSuccessSchema,
+      options: { method: 'GET' },
+    }
+  );
+
+  result.unshift(H_CAPTCHA_ORACLE);
+
+  return result;
 }
 
 export function useGetOracles() {

packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx

@@ -14,6 +14,7 @@ import { TableButton } from '@/components/ui/table-button';
 import { routerPaths } from '@/router/router-paths';
 import { OraclesTableMobile } from '@/pages/worker/jobs-discovery/oracles-table/oracles-table-mobile';
 import type { OraclesDataQueryResult } from '@/pages/worker/jobs-discovery/jobs-discovery.page';
+import { env } from '@/shared/env';
 
 const getColumns = (
   selectOracle: (oracleAddress: string) => void
@@ -77,6 +78,10 @@ export function OraclesTable({
   const navigate = useNavigate();
   const isMobile = useIsMobile();
   const selectOracle = (oracleAddress: string) => {
+    if (oracleAddress === env.VITE_H_CAPTCHA_ORACLE_ADDRESS) {
+      navigate(routerPaths.worker.HcaptchaLabeling);
+      return;
+    }
     navigate(`${routerPaths.worker.jobs}/${oracleAddress}`);
   };
 

packages/apps/human-app/frontend/src/shared/env.ts

@@ -31,6 +31,13 @@ const envSchema = z.object({
     return iconsArray;
   }),
   VITE_NETWORK: z.enum(['mainnet', 'testnet']),
+  VITE_H_CAPTCHA_ORACLE_ANNOTATION_TOOL: z.string(),
+  VITE_H_CAPTCHA_ORACLE_ROLE: z.string(),
+  VITE_H_CAPTCHA_ORACLE_ADDRESS: z.string(),
+  VITE_H_CAPTCHA_ORACLE_TASK_TYPES: z.string().transform((value) => {
+    const jobTypesArray = value.split(',');
+    return jobTypesArray;
+  }),
 });
 
 let validEnvs;