fix(app/operator/set-up): update inputs order

blockydevs · Jun 26, 2024 · 1a9274a · 1a9274a
1 parent f37f299
commit 1a9274a
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 7 deletions.
diff --git a/...s/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/edit-existing-keys-form.tsx b/...s/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/edit-existing-keys-form.tsx
@@ -11,6 +11,10 @@ import { Select } from '@/components/data-entry/select';
 import { MultiSelect } from '@/components/data-entry/multi-select';
 import { JOB_TYPES } from '@/shared/consts';
 import type { GetEthKVStoreValuesSuccessResponse } from '@/api/servieces/operator/get-keys';
+import {
+  order,
+  sortFormKeys,
+} from '@/pages/operator/sign-up/add-keys/sort-form';
 
 const OPTIONS = [Role.ExchangeOracle, Role.JobLauncher, Role.RecordingOracle];
 
@@ -57,7 +61,6 @@ const formInputsConfig: Record<EthKVStoreKeyValues, React.ReactElement> = {
     />
   ),
 };
-
 export function EditExistingKeysForm({
   existingKeysInitialState,
   formButtonProps,
@@ -67,15 +70,27 @@ export function EditExistingKeysForm({
 }) {
   const { errors } = useFormState();
   const noChangesError = errors.form?.message as string;
+
+  const sortedKeys = sortFormKeys(
+    Object.keys(existingKeysInitialState) as EthKVStoreKeyValues[],
+    order
+  );
+
   return (
     <Grid container sx={{ flexDirection: 'column', gap: '1rem' }}>
       <Typography variant="body4">
         {t('operator.addKeysPage.existingKeys.title')}
       </Typography>
       <Grid container sx={{ flexDirection: 'column', gap: '2rem' }}>
-        {Object.entries(existingKeysInitialState).map(([key, value]) => {
+        {sortedKeys.map((key) => {
           const formInputsConfigKey = key as EthKVStoreKeyValues;
-          return <>{value ? formInputsConfig[formInputsConfigKey] : null}</>;
+          return (
+            <>
+              {existingKeysInitialState[formInputsConfigKey]
+                ? formInputsConfig[formInputsConfigKey]
+                : null}
+            </>
+          );
         })}
 
         {noChangesError ? (

diff --git a/...es/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/edit-pending-keys-form.tsx b/...es/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/edit-pending-keys-form.tsx
@@ -7,6 +7,10 @@ import { Select } from '@/components/data-entry/select';
 import { MultiSelect } from '@/components/data-entry/multi-select';
 import { JOB_TYPES } from '@/shared/consts';
 import type { GetEthKVStoreValuesSuccessResponse } from '@/api/servieces/operator/get-keys';
+import {
+  order,
+  sortFormKeys,
+} from '@/pages/operator/sign-up/add-keys/sort-form';
 
 const OPTIONS = [Role.ExchangeOracle, Role.JobLauncher, Role.RecordingOracle];
 
@@ -59,15 +63,26 @@ export function EditPendingKeysForm({
 }: {
   existingKeysInitialState: GetEthKVStoreValuesSuccessResponse;
 }) {
+  const sortedKeys = sortFormKeys(
+    Object.keys(existingKeysInitialState) as EthKVStoreKeyValues[],
+    order
+  );
+
   return (
     <Grid container sx={{ flexDirection: 'column', gap: '1rem' }}>
       <Typography variant="body4">
         {t('operator.addKeysPage.pendingKeys.title')}
       </Typography>
       <Grid container sx={{ flexDirection: 'column', gap: '2rem' }}>
-        {Object.entries(existingKeysInitialState).map(([key, value]) => {
+        {sortedKeys.map((key) => {
           const formInputsConfigKey = key as EthKVStoreKeyValues;
-          return <>{!value ? formInputsConfig[formInputsConfigKey] : null}</>;
+          return (
+            <>
+              {!existingKeysInitialState[formInputsConfigKey]
+                ? formInputsConfig[formInputsConfigKey]
+                : null}
+            </>
+          );
         })}
       </Grid>
     </Grid>

diff --git a/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/existing-keys.tsx b/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/existing-keys.tsx
@@ -12,6 +12,10 @@ import { EmptyPlaceholder } from '@/components/ui/empty-placeholder';
 import type { GetEthKVStoreValuesSuccessResponse } from '@/api/servieces/operator/get-keys';
 import { Chips } from '@/components/ui/chips';
 import { Chip } from '@/components/ui/chip';
+import {
+  order,
+  sortFormKeys,
+} from '@/pages/operator/sign-up/add-keys/sort-form';
 
 const existingKeysConfig: Record<
   EthKVStoreKeyValues,
@@ -75,14 +79,19 @@ export function ExistingKeys({
   const { getValues } = useFormContext<GetEthKVStoreValuesSuccessResponse>();
   const formValues = getValues();
 
+  const sortedKeys = sortFormKeys(
+    Object.keys(existingKeysInitialState) as EthKVStoreKeyValues[],
+    order
+  );
+
   return (
     <Grid container sx={{ flexDirection: 'column', gap: '2rem' }}>
       <Typography variant="body4">
         {t('operator.addKeysPage.existingKeys.title')}
       </Typography>
-      {Object.entries(existingKeysInitialState).map(([key, value]) => {
+      {sortedKeys.map((key) => {
         const existingKeysConfigKey = key as EthKVStoreKeyValues;
-        return key && value
+        return existingKeysInitialState[existingKeysConfigKey]
           ? existingKeysConfig[existingKeysConfigKey](formValues)
           : null;
       })}

diff --git a/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/sort-form.ts b/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/sort-form.ts
@@ -0,0 +1,16 @@
+import type { EthKVStoreKeyValues } from '@/smart-contracts/EthKVStore/config';
+import { EthKVStoreKeys } from '@/smart-contracts/EthKVStore/config';
+
+export const sortFormKeys = (
+  keys: EthKVStoreKeyValues[],
+  order: EthKVStoreKeyValues[]
+): EthKVStoreKeyValues[] => {
+  return keys.sort((a, b) => order.indexOf(a) - order.indexOf(b));
+};
+export const order: EthKVStoreKeyValues[] = [
+  EthKVStoreKeys.Fee,
+  EthKVStoreKeys.PublicKey,
+  EthKVStoreKeys.WebhookUrl,
+  EthKVStoreKeys.Role,
+  EthKVStoreKeys.JobTypes,
+];