Add empty state to main Consensus account details section

oasisprotocol · Feb 19, 2024 · fe3c0f3 · fe3c0f3
1 parent 4d0097f
commit fe3c0f3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx
@@ -12,31 +12,38 @@ import { TextSkeleton } from '../../components/Skeleton'
 import { SubPageCard } from '../../components/SubPageCard'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
 import { AccountAvatar } from '../../components/AccountAvatar'
+import { CardEmptyState } from '../../components/CardEmptyState'
 
 export const StyledListTitle = styled('dt')(({ theme }) => ({
   marginLeft: theme.spacing(4),
 }))
 
 type ConsensusAccountDetailsCardProps = {
-  isLoading: boolean
   account: Account | undefined
+  isError: boolean
+  isLoading: boolean
 }
 
-export const ConsensusAccountDetailsCard: FC<ConsensusAccountDetailsCardProps> = ({ account, isLoading }) => {
+export const ConsensusAccountDetailsCard: FC<ConsensusAccountDetailsCardProps> = ({
+  account,
+  isError,
+  isLoading,
+}) => {
   const { t } = useTranslation()
 
   return (
     <SubPageCard featured isLoadingTitle={isLoading} title={t('account.title')}>
-      <ConsensusAccountDetails isLoading={isLoading} account={account} />
+      <ConsensusAccountDetails isError={isError} isLoading={isLoading} account={account} />
     </SubPageCard>
   )
 }
 
-const ConsensusAccountDetails: FC<ConsensusAccountDetailsCardProps> = ({ account, isLoading }) => {
+const ConsensusAccountDetails: FC<ConsensusAccountDetailsCardProps> = ({ account, isError, isLoading }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
 
   if (isLoading) return <TextSkeleton numberOfRows={7} />
+  if (isError) return <CardEmptyState label={t('account.cantLoadDetails')} />
   if (!account) return null
 
   return (

diff --git a/src/app/pages/ConsensusAccountDetailsPage/index.tsx b/src/app/pages/ConsensusAccountDetailsPage/index.tsx
@@ -18,12 +18,12 @@ export const ConsensusAccountDetailsPage: FC = () => {
   const { network } = scope
   const { address } = useLoaderData() as AddressLoaderData
   const accountQuery = useGetConsensusAccountsAddress(network, address)
-  const { isLoading, data } = accountQuery
+  const { isError, isLoading, data } = accountQuery
   const account = data?.data
 
   return (
     <PageLayout>
-      <ConsensusAccountDetailsCard isLoading={isLoading} account={account} />
+      <ConsensusAccountDetailsCard account={account} isError={isError} isLoading={isLoading} />
     </PageLayout>
   )
 }