diff --git a/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/edit-existing-keys-form.tsx b/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/edit-existing-keys-form.tsx index eebc88114a..128543a6e3 100644 --- a/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/edit-existing-keys-form.tsx +++ b/packages/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 = { /> ), }; - 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 ( {t('operator.addKeysPage.existingKeys.title')} - {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/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/edit-pending-keys-form.tsx b/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/edit-pending-keys-form.tsx index 0b0448e1da..983ee250cd 100644 --- a/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/edit-pending-keys-form.tsx +++ b/packages/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 ( {t('operator.addKeysPage.pendingKeys.title')} - {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} + + ); })} 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 index e3499c3165..4029b3e9df 100644 --- 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(); const formValues = getValues(); + const sortedKeys = sortFormKeys( + Object.keys(existingKeysInitialState) as EthKVStoreKeyValues[], + order + ); + return ( {t('operator.addKeysPage.existingKeys.title')} - {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 new file mode 100644 index 0000000000..561076f6f2 --- /dev/null +++ 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, +];