refactor using DataListDisplay

ui/shared/DataListDisplay.tsx

@@ -23,8 +23,7 @@ type FilterProps = {
 type Props = {
   isError: boolean;
   isLoading: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  items?: Array<any>;
+  items?: Array<unknown>;
   emptyText: string;
   actionBar?: React.ReactNode;
   content: React.ReactNode;

ui/tx/TxState.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { SECOND } from 'lib/consts';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import DataListDisplay from 'ui/shared/DataListDisplay';
 import SkeletonList from 'ui/shared/skeletons/SkeletonList';
 import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import TxStateList from 'ui/tx/state/TxStateList';
@@ -26,32 +26,27 @@ const TxState = () => {
     return txInfo.socketStatus ? <TxSocketAlert status={ txInfo.socketStatus }/> : <TxPendingAlert/>;
   }
 
-  if (isError || txInfo.isError) {
-    return <DataFetchAlert/>;
-  }
-
-  if (isLoading || txInfo.isLoading) {
-    return (
-      <>
-        <Show below="lg" ssr={ false }>
-          <Skeleton h={ 4 } borderRadius="full" w="100%"/>
-          <Skeleton h={ 4 } borderRadius="full" w="100%" mt={ 2 }/>
-          <Skeleton h={ 4 } borderRadius="full" w="100%" mt={ 2 }/>
-          <Skeleton h={ 4 } borderRadius="full" w="50%" mt={ 2 } mb={ 6 }/>
-          <SkeletonList/>
-        </Show>
-        <Hide below="lg" ssr={ false }>
-          <Skeleton h={ 6 } borderRadius="full" w="90%" mb={ 6 }/>
-          <SkeletonTable columns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }/>
-        </Hide>
-      </>
-    );
-  }
+  const skeleton = (
+    <>
+      <Show below="lg" ssr={ false }>
+        <Skeleton h={ 4 } borderRadius="full" w="100%"/>
+        <Skeleton h={ 4 } borderRadius="full" w="100%" mt={ 2 }/>
+        <Skeleton h={ 4 } borderRadius="full" w="100%" mt={ 2 }/>
+        <Skeleton h={ 4 } borderRadius="full" w="50%" mt={ 2 } mb={ 6 }/>
+        <SkeletonList/>
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <Skeleton h={ 6 } borderRadius="full" w="90%" mb={ 6 }/>
+        <SkeletonTable columns={ [ '140px', '146px', '33%', '33%', '33%', '150px' ] }/>
+      </Hide>
+    </>
+  );
 
-  return (
+  const content = data ? (
     <>
       <Text>
-        A set of information that represents the current state is updated when a transaction takes place on the network. The below is a summary of those changes
+        A set of information that represents the current state is updated when a transaction takes place on the network.
+        The below is a summary of those changes.
       </Text>
       <Accordion allowMultiple defaultIndex={ [] }>
         <Hide below="lg" ssr={ false }>
@@ -62,6 +57,17 @@ const TxState = () => {
         </Show>
       </Accordion>
     </>
+  ) : null;
+
+  return (
+    <DataListDisplay
+      isError={ isError }
+      isLoading={ isLoading }
+      items={ data }
+      emptyText="There are no state changes for this transaction."
+      content={ content }
+      skeletonProps={{ customSkeleton: skeleton }}
+    />
   );
 };