[HUMAN App] refactor: oracle registration page (#3014)

Author: adrian-oleskiewicz

packages/apps/human-app/frontend/src/modules/worker/oracle-registration/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-oracle-registration-flow';
+export * from './use-is-already-registered';

packages/apps/human-app/frontend/src/modules/worker/oracle-registration/hooks/use-is-already-registered.tsx

@@ -0,0 +1,7 @@
+import { useRegisteredOracles } from '@/shared/contexts/registered-oracles';
+
+export const useIsAlreadyRegistered = (address: string | undefined) => {
+  const { registeredOracles } = useRegisteredOracles();
+
+  return Boolean(address && registeredOracles?.includes(address));
+};

packages/apps/human-app/frontend/src/modules/worker/oracle-registration/hooks/use-oracle-instructions.tsx

@@ -0,0 +1,14 @@
+import { useState, useCallback } from 'react';
+
+export function useOracleInstructions(
+  instructions?: string | URL | null | undefined
+) {
+  const [hasViewedInstructions, setHasViewedInstructions] = useState(false);
+
+  const handleInstructionsView = useCallback(() => {
+    window.open(instructions ?? '', '_blank');
+    setHasViewedInstructions(true);
+  }, [instructions]);
+
+  return { hasViewedInstructions, handleInstructionsView };
+}

packages/apps/human-app/frontend/src/modules/worker/oracle-registration/hooks/use-oracle-registration-flow.tsx

@@ -0,0 +1,21 @@
+import { useOracleInstructions } from './use-oracle-instructions';
+import { useOracleRegistration } from './use-oracle-registration';
+
+export function useOracleRegistrationFlow(
+  address: string,
+  oracleInstructions?: string | URL | null | undefined
+) {
+  const { handleRegistration, isRegistrationPending, registrationError } =
+    useOracleRegistration(address);
+
+  const { hasViewedInstructions, handleInstructionsView } =
+    useOracleInstructions(oracleInstructions);
+
+  return {
+    hasViewedInstructions,
+    handleInstructionsView,
+    handleRegistration,
+    isRegistrationPending,
+    registrationError,
+  };
+}

packages/apps/human-app/frontend/src/modules/worker/oracle-registration/hooks/use-oracle-registration.tsx

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+import {
+  type RegistrationInExchangeOracleDto,
+  useExchangeOracleRegistrationMutation,
+} from '@/modules/worker/oracle-registration/sevices';
+import { useRegisteredOracles } from '@/shared/contexts/registered-oracles';
+
+export function useOracleRegistration(oracleAddress: string | undefined) {
+  const { setRegisteredOracles } = useRegisteredOracles();
+  const {
+    mutate: registerInOracle,
+    isPending: isRegistrationPending,
+    error: registrationError,
+  } = useExchangeOracleRegistrationMutation();
+
+  const handleRegistration = useCallback(
+    (data: RegistrationInExchangeOracleDto) => {
+      registerInOracle(data, {
+        onSuccess() {
+          if (oracleAddress) {
+            setRegisteredOracles((prev) =>
+              prev ? [...prev, oracleAddress] : [oracleAddress]
+            );
+          }
+        },
+      });
+    },
+    [oracleAddress, registerInOracle, setRegisteredOracles]
+  );
+
+  return {
+    handleRegistration,
+    isRegistrationPending,
+    registrationError,
+  };
+}

packages/apps/human-app/frontend/src/modules/worker/oracle-registration/index.ts

@@ -0,0 +1 @@
+export * from './registration.page';

packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration-form.tsx

@@ -0,0 +1,70 @@
+import { Box, Stack } from '@mui/material';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@/shared/components/ui/button';
+import { HCaptchaForm } from '@/shared/components/hcaptcha/h-captcha-form';
+import {
+  registrationInExchangeOracleDtoSchema,
+  type RegistrationInExchangeOracleDto,
+} from './sevices';
+import { useOracleRegistrationFlow } from './hooks';
+
+function useRegistrationForm(address: string) {
+  return useForm<RegistrationInExchangeOracleDto>({
+    defaultValues: {
+      // eslint-disable-next-line camelcase
+      oracle_address: address,
+      // eslint-disable-next-line camelcase
+      h_captcha_token: '',
+    },
+    resolver: zodResolver(registrationInExchangeOracleDtoSchema),
+  });
+}
+
+export function RegistrationForm({
+  address,
+  oracleInstructions,
+}: Readonly<{
+  address: string;
+  oracleInstructions: string | URL | null | undefined;
+}>) {
+  const { t } = useTranslation();
+  const methods = useRegistrationForm(address);
+  const {
+    hasViewedInstructions,
+    handleInstructionsView,
+    handleRegistration,
+    isRegistrationPending: isLoading,
+    registrationError: error,
+  } = useOracleRegistrationFlow(address, oracleInstructions);
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    void methods.handleSubmit(handleRegistration)(event);
+  };
+
+  return (
+    <>
+      <Button onClick={handleInstructionsView} fullWidth variant="contained">
+        {t('worker.registrationInExchangeOracle.instructionsButton')}
+      </Button>
+      <Box>{t('worker.registrationInExchangeOracle.completeMessage')}</Box>
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit}>
+          <Stack alignItems="center" spacing={2}>
+            <HCaptchaForm error={error} name="h_captcha_token" />
+            <Button
+              disabled={!hasViewedInstructions}
+              fullWidth
+              loading={isLoading}
+              type="submit"
+              variant="contained"
+            >
+              {t('worker.registrationInExchangeOracle.completeButton')}
+            </Button>
+          </Stack>
+        </form>
+      </FormProvider>
+    </>
+  );
+}

packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration.page.tsx

@@ -0,0 +1,70 @@
+import { Box, Grid, Paper, Stack } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Navigate, useParams } from 'react-router-dom';
+import { RegistrationForm } from '@/modules/worker/oracle-registration/registration-form';
+import { Loader } from '@/shared/components/ui/loader';
+import { routerPaths } from '@/router/router-paths';
+import { useGetOracles } from '../services/oracles';
+import { useIsAlreadyRegistered } from './hooks';
+
+function isAddress(address: string | undefined): address is string {
+  return address !== undefined && address.length > 0;
+}
+
+export function RegistrationPage() {
+  const { t } = useTranslation();
+  const { address: oracleAddress } = useParams<{ address: string }>();
+  const { data, isLoading } = useGetOracles();
+  const isAlreadyRegistered = useIsAlreadyRegistered(oracleAddress);
+
+  const oracleData = data?.find((o) => o.address === oracleAddress);
+
+  if (oracleData === undefined || !isAddress(oracleAddress)) {
+    return <Navigate to={routerPaths.worker.jobsDiscovery} />;
+  }
+
+  if (isAlreadyRegistered) {
+    return (
+      <Navigate
+        to={`${routerPaths.worker.jobs}/${oracleAddress}`}
+        state={oracleAddress}
+      />
+    );
+  }
+
+  return (
+    <Grid alignItems="center" container justifyContent="center">
+      <Grid item xs={12}>
+        <Paper
+          sx={{
+            height: '100%',
+            minHeight: '70vh',
+            width: '100%',
+            boxShadow: 'none',
+            padding: '40px',
+            borderRadius: '20px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Stack maxWidth="350px" spacing={2}>
+            {isLoading ? (
+              <Loader />
+            ) : (
+              <>
+                <Box>
+                  {t('worker.registrationInExchangeOracle.requiredMessage')}
+                </Box>
+                <RegistrationForm
+                  address={oracleAddress}
+                  oracleInstructions={oracleData.registrationInstructions}
+                />
+              </>
+            )}
+          </Stack>
+        </Paper>
+      </Grid>
+    </Grid>
+  );
+}

packages/apps/human-app/frontend/src/modules/worker/oracle-registration/sevices/index.ts

@@ -0,0 +1 @@
+export * from './registration-in-exchange-oracles';