Update empty lists component to CardEmptyState

Author: kaja-osojnik

.changelog/1932.bugfix.md

@@ -0,0 +1 @@
+Use EmptyState instead of CardEmptyState for empty lists.

src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx

@@ -18,10 +18,21 @@ export const RuntimeEventsDetailedList: FC<{
   showTxHash: boolean
 }> = ({ scope, events, isLoading, isError, pagination, showTxHash }) => {
   const { t } = useTranslation()
+
+  if (isError) {
+    return <CardEmptyState label={t('event.cantLoadEvents')} />
+  }
+
+  if (isLoading) {
+    return <TextSkeleton numberOfRows={10} />
+  }
+
+  if (!events?.length) {
+    return <CardEmptyState label={t('event.cantFindMatchingEvents')} />
+  }
+
   return (
     <>
-      {isError && <CardEmptyState label={t('event.cantLoadEvents')} />}
-      {isLoading && <TextSkeleton numberOfRows={10} />}
       {events &&
         events.map((event, index) => (
           <div key={`event-${index}`}>

src/app/components/Transactions/ConsensusTransactionEvents.tsx

@@ -5,7 +5,7 @@ import { AppErrors } from '../../../types/errors'
 import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
 import { ConsensusEventsList } from '../ConsensusEvents/ConsensusEventsList'
 import { useSearchParamsPagination } from '../Table/useSearchParamsPagination'
-import { EmptyState } from '../EmptyState'
+import { CardEmptyState } from '../CardEmptyState'
 
 export const ConsensusTransactionEvents: FC<{
   transaction: Transaction
@@ -25,9 +25,7 @@ export const ConsensusTransactionEvents: FC<{
   }
 
   if (!events?.length && isFetched) {
-    return (
-      <EmptyState description={t('event.cantFindMatchingEvents')} title={t('event.noEvents')} light={true} />
-    )
+    return <CardEmptyState label={t('event.cantFindMatchingEvents')} />
   }
 
   return (

src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountEventsCard.tsx

@@ -7,8 +7,8 @@ import { ConsensusAccountDetailsContext } from './hooks'
 import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
 import { LinkableCardLayout } from '../../components/LinkableCardLayout'
 import { useSearchParamsPagination } from '../..//components/Table/useSearchParamsPagination'
-import { EmptyState } from '../../components/EmptyState'
 import { eventsContainerId } from '../../utils/tabAnchors'
+import { CardEmptyState } from 'app/components/CardEmptyState'
 
 const ConsensusAccountEventsList: FC<ConsensusAccountDetailsContext> = ({ scope, address }) => {
   const { t } = useTranslation()
@@ -26,9 +26,7 @@ const ConsensusAccountEventsList: FC<ConsensusAccountDetailsContext> = ({ scope,
   }
 
   if (!events?.length && isFetched) {
-    return (
-      <EmptyState description={t('event.cantFindMatchingEvents')} title={t('event.noEvents')} light={true} />
-    )
+    return <CardEmptyState label={t('event.cantFindMatchingEvents')} />
   }
 
   return (

src/app/pages/ConsensusBlockDetailPage/ConsensusBlockEventsCard.tsx

@@ -5,10 +5,10 @@ import { AppErrors } from '../../../types/errors'
 import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
 import { LinkableCardLayout } from '../../components/LinkableCardLayout'
 import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
-import { EmptyState } from '../../components/EmptyState'
 import { ConsensusBlockDetailsContext } from '.'
 import { ConsensusEventsList } from '../../components/ConsensusEvents/ConsensusEventsList'
 import { eventsContainerId } from '../../utils/tabAnchors'
+import { CardEmptyState } from 'app/components/CardEmptyState'
 
 const ConsensusBlockEventsList: FC<ConsensusBlockDetailsContext> = ({ scope, blockHeight }) => {
   const { t } = useTranslation()
@@ -26,9 +26,7 @@ const ConsensusBlockEventsList: FC<ConsensusBlockDetailsContext> = ({ scope, blo
   }
 
   if (!events?.length && isFetched) {
-    return (
-      <EmptyState description={t('event.cantFindMatchingEvents')} title={t('event.noEvents')} light={true} />
-    )
+    return <CardEmptyState label={t('event.cantFindMatchingEvents')} />
   }
 
   return (

src/app/pages/RuntimeBlockDetailPage/RuntimeBlockEventsCard.tsx

@@ -6,9 +6,9 @@ import { LinkableCardLayout } from '../../components/LinkableCardLayout'
 import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
 import { AppErrors } from '../../../types/errors'
 import { RuntimeEventsDetailedList } from '../../components/RuntimeEvents/RuntimeEventsDetailedList'
-import { EmptyState } from '../../components/EmptyState'
 import { RuntimeBlockDetailsContext } from '.'
 import { eventsContainerId } from '../../utils/tabAnchors'
+import { CardEmptyState } from 'app/components/CardEmptyState'
 
 const EventsList: FC<RuntimeBlockDetailsContext> = ({ scope, blockHeight }) => {
   const { t } = useTranslation()
@@ -31,9 +31,7 @@ const EventsList: FC<RuntimeBlockDetailsContext> = ({ scope, blockHeight }) => {
   const events = data?.data.events
 
   if (!events?.length && !isLoading) {
-    return (
-      <EmptyState description={t('event.cantFindMatchingEvents')} title={t('event.noEvents')} light={true} />
-    )
+    return <CardEmptyState label={t('event.cantFindMatchingEvents')} />
   }
 
   return (