[HUM-159]: refactor component sign up component refactor

packages/apps/human-app/frontend/src/modules/operator/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './use-disable-operator';
+export * from './use-get-keys';
+export * from './use-web3-signin';

packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/add-keys-form.tsx

@@ -0,0 +1,53 @@
+import { Grid } from '@mui/material';
+import { t } from 'i18next';
+import { Link } from 'react-router-dom';
+import { routerPaths } from '@/router/router-paths';
+import { Button } from '@/shared/components/ui/button';
+import { type GetEthKVStoreValuesSuccessResponse } from '@/modules/operator/hooks';
+import { ExistingKeysForm } from './existing-keys-form';
+import { PendingKeysForm } from './pending-keys-form';
+
+export function AddKeysForm({
+  keysData,
+}: Readonly<{
+  keysData: GetEthKVStoreValuesSuccessResponse;
+}>) {
+  const hasSomeNotEmptyKeys = Object.values(keysData).some(Boolean);
+  const hasSomePendingKeys = Object.values(keysData).some((value) => {
+    /**
+     * This check is necessary because TS can't infer
+     * "undefined" from optional object's property
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (value === undefined) {
+      return false;
+    }
+
+    return value.length === 0;
+  });
+
+  return (
+    <Grid container gap="2rem">
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '3rem',
+        }}
+      >
+        {hasSomeNotEmptyKeys ? <ExistingKeysForm keysData={keysData} /> : null}
+        {hasSomePendingKeys ? <PendingKeysForm keysData={keysData} /> : null}
+        {hasSomeNotEmptyKeys && !hasSomePendingKeys ? (
+          <Button
+            component={Link}
+            to={routerPaths.operator.editExistingKeysSuccess}
+            variant="contained"
+          >
+            {t('operator.addKeysPage.skipBtn')}
+          </Button>
+        ) : null}
+      </div>
+    </Grid>
+  );
+}

packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/edit-existing-keys-form.tsx → packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/edit-existing-keys-form.tsx

@@ -14,11 +14,8 @@ import { MultiSelect } from '@/shared/components/data-entry/multi-select';
 import { JOB_TYPES } from '@/shared/consts';
 import type { GetEthKVStoreValuesSuccessResponse } from '@/modules/operator/hooks/use-get-keys';
 import { useColorMode } from '@/shared/contexts/color-mode';
-import {
-  order,
-  sortFormKeys,
-} from '@/modules/operator/components/sign-up/add-keys/sort-form';
 import { PercentsInputMask } from '@/shared/components/data-entry/input-masks';
+import { sortFormKeys, STORE_KEYS_ORDER } from '../../utils';
 
 const OPTIONS = [
   Role.EXCHANGE_ORACLE,
@@ -79,20 +76,21 @@ const formInputsConfig: Record<EthKVStoreKeyValues, React.ReactElement> = {
     />
   ),
 };
+
 export function EditExistingKeysForm({
   existingKeysInitialState,
   formButtonProps,
-}: {
+}: Readonly<{
   existingKeysInitialState: GetEthKVStoreValuesSuccessResponse;
   formButtonProps: CustomButtonProps;
-}) {
+}>) {
   const { colorPalette } = useColorMode();
   const { errors } = useFormState();
   const noChangesError = errors.form?.message as string;
 
   const sortedKeys = sortFormKeys(
     Object.keys(existingKeysInitialState) as EthKVStoreKeyValues[],
-    order
+    STORE_KEYS_ORDER
   );
 
   return (

packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/edit-pending-keys-form.tsx → packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/edit-pending-keys-form.tsx

@@ -10,11 +10,8 @@ import { Select } from '@/shared/components/data-entry/select';
 import { MultiSelect } from '@/shared/components/data-entry/multi-select';
 import { JOB_TYPES } from '@/shared/consts';
 import type { GetEthKVStoreValuesSuccessResponse } from '@/modules/operator/hooks/use-get-keys';
-import {
-  order,
-  sortFormKeys,
-} from '@/modules/operator/components/sign-up/add-keys/sort-form';
 import { PercentsInputMask } from '@/shared/components/data-entry/input-masks';
+import { sortFormKeys, STORE_KEYS_ORDER } from '../../utils';
 
 const OPTIONS = [
   Role.EXCHANGE_ORACLE,
@@ -78,12 +75,12 @@ const formInputsConfig: Record<EthKVStoreKeyValues, React.ReactElement> = {
 
 export function EditPendingKeysForm({
   existingKeysInitialState,
-}: {
+}: Readonly<{
   existingKeysInitialState: GetEthKVStoreValuesSuccessResponse;
-}) {
+}>) {
   const sortedKeys = sortFormKeys(
     Object.keys(existingKeysInitialState) as EthKVStoreKeyValues[],
-    order
+    STORE_KEYS_ORDER
   );
 
   return (

packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/existing-keys-form.tsx → packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys-form.tsx

@@ -3,15 +3,15 @@ import { Grid } from '@mui/material';
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { UseFormReturn } from 'react-hook-form';
 import { FormProvider, useForm } from 'react-hook-form';
-import type { EditEthKVStoreValuesMutationData } from '@/modules/operator/hooks/use-edit-existing-keys';
-import {
-  getEditEthKVStoreValuesMutationSchema,
-  useEditExistingKeysMutation,
-} from '@/modules/operator/hooks/use-edit-existing-keys';
-import { ExistingKeys } from '@/modules/operator/components/sign-up/add-keys/existing-keys';
-import { EditExistingKeysForm } from '@/modules/operator/components/sign-up/add-keys/edit-existing-keys-form';
 import type { GetEthKVStoreValuesSuccessResponse } from '@/modules/operator/hooks/use-get-keys';
 import { useResetMutationErrors } from '@/shared/hooks/use-reset-mutation-errors';
+import { useEditExistingKeysMutation } from '../../hooks';
+import {
+  type EditEthKVStoreValuesMutationData,
+  getEditEthKVStoreValuesMutationSchema,
+} from '../../schema';
+import { EditExistingKeysForm } from './edit-existing-keys-form';
+import { ExistingKeys } from './existing-keys';
 
 export type UseFormResult = UseFormReturn<
   GetEthKVStoreValuesSuccessResponse,
@@ -20,9 +20,9 @@ export type UseFormResult = UseFormReturn<
 
 export function ExistingKeysForm({
   keysData,
-}: {
+}: Readonly<{
   keysData: GetEthKVStoreValuesSuccessResponse;
-}) {
+}>) {
   const [editMode, setEditMode] = useState(false);
   const existingKeysMutation = useEditExistingKeysMutation();
   const pendingKeysMutation = useEditExistingKeysMutation();

packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/existing-keys.tsx → packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys.tsx

@@ -11,11 +11,8 @@ import { EmptyPlaceholder } from '@/shared/components/ui/empty-placeholder';
 import type { GetEthKVStoreValuesSuccessResponse } from '@/modules/operator/hooks/use-get-keys';
 import { Chips } from '@/shared/components/ui/chips';
 import { Chip } from '@/shared/components/ui/chip';
-import {
-  order,
-  sortFormKeys,
-} from '@/modules/operator/components/sign-up/add-keys/sort-form';
 import { useColorMode } from '@/shared/contexts/color-mode';
+import { sortFormKeys, STORE_KEYS_ORDER } from '../../utils';
 
 const existingKeysConfig: Record<
   EthKVStoreKeyValues,
@@ -84,17 +81,17 @@ const existingKeysConfig: Record<
 export function ExistingKeys({
   openEditMode,
   existingKeysInitialState,
-}: {
+}: Readonly<{
   openEditMode: () => void;
   existingKeysInitialState: GetEthKVStoreValuesSuccessResponse;
-}) {
+}>) {
   const { colorPalette } = useColorMode();
   const { getValues } = useFormContext<GetEthKVStoreValuesSuccessResponse>();
   const formValues = getValues();
 
   const sortedKeys = sortFormKeys(
     Object.keys(existingKeysInitialState) as EthKVStoreKeyValues[],
-    order
+    STORE_KEYS_ORDER
   );
 
   return (

packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/index.ts

@@ -0,0 +1 @@
+export * from './add-keys-form';

packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/pending-keys-form.tsx → packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/pending-keys-form.tsx

@@ -1,21 +1,21 @@
 import { t } from 'i18next';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
-import type { EditEthKVStoreValuesMutationData } from '@/modules/operator/hooks/use-edit-existing-keys';
-import {
-  setEthKVStoreValuesMutationSchema,
-  useEditExistingKeysMutation,
-} from '@/modules/operator/hooks/use-edit-existing-keys';
 import { Button } from '@/shared/components/ui/button';
-import { EditPendingKeysForm } from '@/modules/operator/components/sign-up/add-keys/edit-pending-keys-form';
 import type { GetEthKVStoreValuesSuccessResponse } from '@/modules/operator/hooks/use-get-keys';
 import { useResetMutationErrors } from '@/shared/hooks/use-reset-mutation-errors';
+import { useEditExistingKeysMutation } from '../../hooks';
+import {
+  type EditEthKVStoreValuesMutationData,
+  setEthKVStoreValuesMutationSchema,
+} from '../../schema';
+import { EditPendingKeysForm } from './edit-pending-keys-form';
 
 export function PendingKeysForm({
   keysData,
-}: {
+}: Readonly<{
   keysData: GetEthKVStoreValuesSuccessResponse;
-}) {
+}>) {
   const pendingKeysMutation = useEditExistingKeysMutation();
 
   const pendingKeysMethods = useForm<

packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-stake/buttons.tsx → packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/buttons.tsx

@@ -8,10 +8,10 @@ import { routerPaths } from '@/router/router-paths';
 export function Buttons({
   openForm,
   stakedAmount,
-}: {
+}: Readonly<{
   openForm: () => void;
   stakedAmount?: bigint;
-}) {
+}>) {
   const isStaked = stakedAmount ? stakedAmount > BigInt(0) : false;
   return (
     <Grid

packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/index.ts

@@ -0,0 +1,2 @@
+export * from './buttons';
+export * from './stake-form';

packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-stake/stake-form.tsx → packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/stake-form.tsx

@@ -5,26 +5,26 @@ import { t } from 'i18next';
 import { Link } from 'react-router-dom';
 import { Typography } from '@mui/material';
 import { z } from 'zod';
-import {
-  addStakeAmountCallArgumentsSchema,
-  useAddStakeMutation,
-  type AddStakeCallArguments,
-} from '@/modules/operator/hooks/use-add-stake';
 import { breakpoints } from '@/shared/styles/breakpoints';
 import { Input } from '@/shared/components/data-entry/input';
 import { routerPaths } from '@/router/router-paths';
 import { Button } from '@/shared/components/ui/button';
 import { useResetMutationErrors } from '@/shared/hooks/use-reset-mutation-errors';
 import { HumanCurrencyInputMask } from '@/shared/components/data-entry/input-masks';
+import { useAddStake } from '../../hooks';
+import {
+  type AddStakeCallArguments,
+  addStakeAmountCallArgumentsSchema,
+} from '../../schema';
 
 export function StakeForm({
   decimals,
   stakedAmount,
-}: {
+}: Readonly<{
   decimals: number;
   stakedAmount?: bigint;
-}) {
-  const addStakeMutation = useAddStakeMutation();
+}>) {
+  const addStakeMutation = useAddStake();
 
   const methods = useForm<AddStakeCallArguments>({
     defaultValues: {

packages/apps/human-app/frontend/src/modules/signup/operator/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './use-add-stake-mutation-state';
+export * from './use-add-stake';
+export * from './use-edit-existing-keys';
+export * from './use-get-stacked-amount';
+export * from './use-human-token-decimals';
+export * from './use-web3-signup';

packages/apps/human-app/frontend/src/modules/operator/hooks/use-add-stake-mutation-state.ts → packages/apps/human-app/frontend/src/modules/signup/operator/hooks/use-add-stake-mutation-state.ts

@@ -3,7 +3,7 @@ import { useMutationState } from '@tanstack/react-query';
 import type { MutationState } from '@tanstack/react-query';
 import { useConnectedWallet } from '@/shared/contexts/wallet-connect';
 import type { ResponseError } from '@/shared/types/global.type';
-import { type AddStakeCallArguments } from '@/modules/operator/hooks/use-add-stake';
+import { type AddStakeCallArguments } from '../schema';
 
 export function useAddStakeMutationState() {
   const { address } = useConnectedWallet();