From 60810964675f6abfd5e5417dee9a2c557574f4af Mon Sep 17 00:00:00 2001
From: mpblocky <185767042+mpblocky@users.noreply.github.com>
Date: Fri, 28 Feb 2025 15:35:13 +0100
Subject: [PATCH] chore: split up sign up account type component

---
 .../choose-sign-up-account-type.tsx           | 157 +-----------------
 .../homepage/components/operator-sign-up.tsx  |  85 ++++++++++
 .../homepage/components/worker-sign-up.tsx    |  91 ++++++++++
 .../frontend/src/modules/homepage/index.ts    |   1 +
 .../src/modules/homepage/views/index.ts       |   1 +
 .../human-app/frontend/src/router/routes.tsx  |   2 +-
 6 files changed, 184 insertions(+), 153 deletions(-)
 create mode 100644 packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-up.tsx
 create mode 100644 packages/apps/human-app/frontend/src/modules/homepage/components/worker-sign-up.tsx
 create mode 100644 packages/apps/human-app/frontend/src/modules/homepage/index.ts
 create mode 100644 packages/apps/human-app/frontend/src/modules/homepage/views/index.ts

diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx
index c694ab548e..0beae077f8 100644
--- a/packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx
+++ b/packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx
@@ -1,24 +1,19 @@
-import { Grid, List, ListItemText, Typography } from '@mui/material';
+import { Grid, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import { Button } from '@/shared/components/ui/button';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
-import { routerPaths } from '@/router/router-paths';
 import { PageCard } from '@/shared/components/ui/page-card';
 import type { HomePageStageType } from '@/modules/homepage/views/home.page';
-import { useColorMode } from '@/shared/contexts/color-mode';
-import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
 import { useHomePageState } from '@/shared/contexts/homepage-state';
+import { WorkerSignUp } from './worker-sign-up';
+import { OperatorSignUp } from './operator-sign-up';
 
 interface ChooseSignUpAccountType {
   setStage: (step: HomePageStageType) => void;
 }
 
 export function ChooseSignUpAccountType() {
-  const { colorPalette, isDarkMode } = useColorMode();
   const { setPageView } = useHomePageState();
   const { t } = useTranslation();
-  const isMobile = useIsMobile('lg');
   const isMobileMd = useIsMobile('md');
 
   const backToWelcomeStage = () => {
@@ -38,150 +33,8 @@ export function ChooseSignUpAccountType() {
         <Grid item sx={{ paddingBottom: '16px' }} xs={12}>
           <Typography variant="h4">{t('homepage.howWillUse')}</Typography>
         </Grid>
-        <Grid
-          item
-          sx={{
-            paddingTop: '44px',
-          }}
-          xs={isMobile ? 12 : 6}
-        >
-          <Grid
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              height: '100%',
-              justifyContent: 'space-between',
-            }}
-          >
-            <div>
-              <Typography
-                color={
-                  isDarkMode
-                    ? onlyDarkModeColor.additionalTextColor
-                    : colorPalette.primary.light
-                }
-                variant="h6"
-              >
-                {t('homepage.iWantToEarn')}
-              </Typography>
-              <List
-                sx={{
-                  listStyleType: 'disc',
-                  listStylePosition: 'inside',
-                  paddingLeft: '0.5rem',
-                }}
-              >
-                <ListItemText
-                  primary={t('homepage.completeTask')}
-                  primaryTypographyProps={{
-                    variant: 'subtitle2',
-                    sx: {
-                      display: 'list-item',
-                    },
-                  }}
-                />
-                <ListItemText
-                  primary={t('homepage.workAnywhere')}
-                  primaryTypographyProps={{
-                    variant: 'subtitle2',
-                    sx: {
-                      display: 'list-item',
-                    },
-                  }}
-                />
-              </List>
-            </div>
-            <Grid
-              sx={{
-                display: 'flex',
-                alignItems: 'flex-end',
-                justifyContent: 'flex-end',
-                paddingTop: '2rem',
-              }}
-              xs={12}
-            >
-              <Button
-                component={Link}
-                fullWidth
-                size="large"
-                sx={{ fontFamily: 'Inter' }}
-                to={routerPaths.worker.signUp}
-                variant="contained"
-              >
-                {t('homepage.signUpToComplete')}
-              </Button>
-            </Grid>
-          </Grid>
-        </Grid>
-        <Grid
-          item
-          sx={{
-            paddingTop: '44px',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-          }}
-          xs={isMobile ? 12 : 6}
-        >
-          <div>
-            <Typography
-              color={
-                isDarkMode
-                  ? onlyDarkModeColor.additionalTextColor
-                  : colorPalette.primary.light
-              }
-              variant="h6"
-            >
-              {t('homepage.joinAsOperator')}
-            </Typography>
-            <List
-              sx={{
-                listStyleType: 'disc',
-                listStylePosition: 'inside',
-                paddingLeft: '0.5rem',
-              }}
-            >
-              <ListItemText
-                primary={t('homepage.becomePartner')}
-                primaryTypographyProps={{
-                  variant: 'subtitle2',
-                  sx: {
-                    display: 'list-item',
-                  },
-                }}
-              />
-              <ListItemText
-                primary={t('homepage.runAsOracle')}
-                primaryTypographyProps={{
-                  variant: 'subtitle2',
-                  sx: {
-                    display: 'list-item',
-                  },
-                }}
-              />
-            </List>
-          </div>
-          <Grid
-            sx={{
-              display: 'flex',
-              alignItems: 'flex-end',
-              justifyContent: 'flex-end',
-              paddingTop: '2rem',
-            }}
-            xs={12}
-          >
-            <Button
-              component={Link}
-              fullWidth
-              size="large"
-              sx={{ fontFamily: 'Inter' }}
-              to={routerPaths.operator.connectWallet}
-              variant="contained"
-            >
-              {t('homepage.signAsOperator')}
-            </Button>
-          </Grid>
-        </Grid>
+        <WorkerSignUp />
+        <OperatorSignUp />
       </Grid>
     </PageCard>
   );
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-up.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-up.tsx
new file mode 100644
index 0000000000..7ec945c879
--- /dev/null
+++ b/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-up.tsx
@@ -0,0 +1,85 @@
+import { Grid, Typography, List, ListItemText, Button } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { routerPaths } from '@/router/router-paths';
+import { useColorMode } from '@/shared/contexts/color-mode';
+import { useIsMobile } from '@/shared/hooks/use-is-mobile';
+import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
+
+export function OperatorSignUp() {
+  const { colorPalette, isDarkMode } = useColorMode();
+  const { t } = useTranslation();
+  const isMobile = useIsMobile('lg');
+
+  return (
+    <Grid
+      item
+      sx={{
+        paddingTop: '44px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+      }}
+      xs={isMobile ? 12 : 6}
+    >
+      <div>
+        <Typography
+          color={
+            isDarkMode
+              ? onlyDarkModeColor.additionalTextColor
+              : colorPalette.primary.light
+          }
+          variant="h6"
+        >
+          {t('homepage.joinAsOperator')}
+        </Typography>
+        <List
+          sx={{
+            listStyleType: 'disc',
+            listStylePosition: 'inside',
+            paddingLeft: '0.5rem',
+          }}
+        >
+          <ListItemText
+            primary={t('homepage.becomePartner')}
+            primaryTypographyProps={{
+              variant: 'subtitle2',
+              sx: {
+                display: 'list-item',
+              },
+            }}
+          />
+          <ListItemText
+            primary={t('homepage.runAsOracle')}
+            primaryTypographyProps={{
+              variant: 'subtitle2',
+              sx: {
+                display: 'list-item',
+              },
+            }}
+          />
+        </List>
+      </div>
+      <Grid
+        sx={{
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'flex-end',
+          paddingTop: '2rem',
+        }}
+        xs={12}
+      >
+        <Button
+          component={Link}
+          fullWidth
+          size="large"
+          sx={{ fontFamily: 'Inter' }}
+          to={routerPaths.operator.connectWallet}
+          variant="contained"
+        >
+          {t('homepage.signAsOperator')}
+        </Button>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/worker-sign-up.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/worker-sign-up.tsx
new file mode 100644
index 0000000000..8ec2dcab12
--- /dev/null
+++ b/packages/apps/human-app/frontend/src/modules/homepage/components/worker-sign-up.tsx
@@ -0,0 +1,91 @@
+import { Grid, Typography, List, ListItemText, Button } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { routerPaths } from '@/router/router-paths';
+import { useColorMode } from '@/shared/contexts/color-mode';
+import { useIsMobile } from '@/shared/hooks/use-is-mobile';
+import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
+
+export function WorkerSignUp() {
+  const { colorPalette, isDarkMode } = useColorMode();
+  const { t } = useTranslation();
+  const isMobile = useIsMobile('lg');
+
+  return (
+    <Grid
+      item
+      sx={{
+        paddingTop: '44px',
+      }}
+      xs={isMobile ? 12 : 6}
+    >
+      <Grid
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div>
+          <Typography
+            color={
+              isDarkMode
+                ? onlyDarkModeColor.additionalTextColor
+                : colorPalette.primary.light
+            }
+            variant="h6"
+          >
+            {t('homepage.iWantToEarn')}
+          </Typography>
+          <List
+            sx={{
+              listStyleType: 'disc',
+              listStylePosition: 'inside',
+              paddingLeft: '0.5rem',
+            }}
+          >
+            <ListItemText
+              primary={t('homepage.completeTask')}
+              primaryTypographyProps={{
+                variant: 'subtitle2',
+                sx: {
+                  display: 'list-item',
+                },
+              }}
+            />
+            <ListItemText
+              primary={t('homepage.workAnywhere')}
+              primaryTypographyProps={{
+                variant: 'subtitle2',
+                sx: {
+                  display: 'list-item',
+                },
+              }}
+            />
+          </List>
+        </div>
+        <Grid
+          sx={{
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'flex-end',
+            paddingTop: '2rem',
+          }}
+          xs={12}
+        >
+          <Button
+            component={Link}
+            fullWidth
+            size="large"
+            sx={{ fontFamily: 'Inter' }}
+            to={routerPaths.worker.signUp}
+            variant="contained"
+          >
+            {t('homepage.signUpToComplete')}
+          </Button>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/index.ts b/packages/apps/human-app/frontend/src/modules/homepage/index.ts
new file mode 100644
index 0000000000..7929623807
--- /dev/null
+++ b/packages/apps/human-app/frontend/src/modules/homepage/index.ts
@@ -0,0 +1 @@
+export * from './views';
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/views/index.ts b/packages/apps/human-app/frontend/src/modules/homepage/views/index.ts
new file mode 100644
index 0000000000..9879f4ab7b
--- /dev/null
+++ b/packages/apps/human-app/frontend/src/modules/homepage/views/index.ts
@@ -0,0 +1 @@
+export * from './home.page';
diff --git a/packages/apps/human-app/frontend/src/router/routes.tsx b/packages/apps/human-app/frontend/src/router/routes.tsx
index 0f07b20ec3..2f46ca7010 100644
--- a/packages/apps/human-app/frontend/src/router/routes.tsx
+++ b/packages/apps/human-app/frontend/src/router/routes.tsx
@@ -20,7 +20,6 @@ import { AddKeysOperatorPage } from '@/modules/operator/views/sign-up/add-keys.p
 import { AddStakeOperatorPage } from '@/modules/operator/views/sign-up/add-stake.page';
 import { ConnectWalletOperatorPage } from '@/modules/operator/views/sign-up/connect-wallet.page';
 import { Playground } from '@/modules/playground/views/playground.page';
-import { HomePage } from '@/modules/homepage/views/home.page';
 import {
   HcaptchaLabelingPage,
   UserStatsAccordion,
@@ -35,6 +34,7 @@ import { JobsDiscoveryPage } from '@/modules/worker/jobs-discovery';
 import { WorkerProfilePage } from '@/modules/worker/profile';
 import { SignUpWorkerPage } from '@/modules/signup/worker';
 import { OperatorProfilePage } from '@/modules/operator/profile';
+import { HomePage } from '@/modules/homepage';
 
 export const unprotectedRoutes: RouteProps[] = [
   {