fix: sorting by ascending order of creation date

Author: grinry

src/components/MonitoringAccounts/MonitoringAccountList.tsx

@@ -1,22 +1,29 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Legend } from '../Legend';
 import { MonitoringAccountItem } from './MonitoringAccountItem';
 import type { MonitoringAccount } from './types';
 import { ReactComponent as IconExpand } from '../../assets/icon-expand.svg';
 import cn from 'classnames';
 import { useFetch } from '../../hooks/useFetch';
 import { useAuthContext } from '../../containers/AuthContainer';
+import { sortByField } from '../../utils/helpers';
 
 export function MonitoringAccountList() {
   const { stateRefreshed } = useAuthContext();
-  const { data: items, loading } = useFetch<MonitoringAccount[]>(
+  const { data, loading } = useFetch<MonitoringAccount[]>(
     'wallet/monitor',
     stateRefreshed,
   );
   const [isListVisible, setIsListVisible] = useState<boolean>(true);
   const toggleListVisibility = () => {
     setIsListVisible(!isListVisible);
   };
+
+  const items = useMemo(
+    () => (data || []).sort(sortByField<MonitoringAccount>('createdAt', 'asc')),
+    [data],
+  );
+
   return (
     <>
       <Legend

src/components/ViewableAccounts/ViewableAccountsList.tsx

@@ -1,15 +1,16 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { ViewableAccountItem } from './ViewableAccountItem';
 import { Legend } from '../Legend';
 import cn from 'classnames';
 import { ReactComponent as IconExpand } from '../../assets/icon-expand.svg';
 import { useFetch } from '../../hooks/useFetch';
 import { ViewableAccount } from './types';
 import { useAuthContext } from '../../containers/AuthContainer';
+import { sortByField } from '../../utils/helpers';
 
 export function ViewableAccountsList() {
   const { stateRefreshed } = useAuthContext();
-  const { data: items, loading } = useFetch<ViewableAccount[]>(
+  const { data, loading } = useFetch<ViewableAccount[]>(
     'wallet/view',
     stateRefreshed,
   );
@@ -18,6 +19,12 @@ export function ViewableAccountsList() {
   const toggleListVisibility = () => {
     setIsListVisible(!isListVisible);
   };
+
+  const items = useMemo(
+    () => (data || []).sort(sortByField<ViewableAccount>('createdAt', 'asc')),
+    [data],
+  );
+
   return (
     <>
       <Legend

src/containers/NewProposalContainer/index.tsx

@@ -202,8 +202,6 @@ export function NewProposalContainer() {
           />
         </div>
 
-        {step}
-
         {step === 1 && (
           <>
             <h2 className="text-lg font-semibold mb-4">Account Info</h2>

src/utils/helpers.ts

@@ -47,3 +47,19 @@ export const chainIdToNetworkName = (chainId: number) =>
 
 export const ifGenesisThen = (value: string, fallback: string) =>
   value.toLowerCase() === ZERO_ADDRESS ? fallback : value;
+
+type Sort = 'asc' | 'desc';
+
+export const sortByField =
+  <T = object>(
+    field: keyof T,
+    order: Sort = 'asc',
+    fn: (value: any) => any = value => value,
+  ) =>
+  (a: T, b: T) => {
+    if (order === 'asc') {
+      return fn(a[field]) < fn(b[field]) ? -1 : 1;
+    } else {
+      return fn(a[field]) < fn(b[field]) ? 1 : -1;
+    }
+  };