diff --git a/apps/explorer/src/app/components/status-message/index.tsx b/apps/explorer/src/app/components/status-message/index.tsx new file mode 100644 index 000000000..3c1f1e7dc --- /dev/null +++ b/apps/explorer/src/app/components/status-message/index.tsx @@ -0,0 +1,12 @@ +import classnames from 'classnames'; +import React from 'react'; + +interface StatusMessageProps { + children: React.ReactNode; + className?: string; +} + +export const StatusMessage = ({ children, className }: StatusMessageProps) => { + const classes = classnames('font-alpha', 'text-h4', 'mb-28', className); + return

{children}

; +}; diff --git a/apps/explorer/src/app/routes/blocks/home/index.tsx b/apps/explorer/src/app/routes/blocks/home/index.tsx index 28d572153..092f3c565 100644 --- a/apps/explorer/src/app/routes/blocks/home/index.tsx +++ b/apps/explorer/src/app/routes/blocks/home/index.tsx @@ -2,12 +2,13 @@ import { DATA_SOURCES } from '../../../config'; import useFetch from '../../../hooks/use-fetch'; import { TendermintBlockchainResponse } from '../tendermint-blockchain-response'; import { RouteTitle } from '../../../components/route-title'; +import { StatusMessage } from '../../../components/status-message'; import { BlocksData, BlocksRefetch } from '../../../components/blocks'; import { JumpToBlock } from '../../../components/jump-to-block'; const Blocks = () => { const { - state: { data }, + state: { data, error, loading }, refetch, } = useFetch( `${DATA_SOURCES.tendermintUrl}/blockchain` @@ -16,8 +17,14 @@ const Blocks = () => { return (
Blocks - - + {loading && Loading...} + {error && Error: {error}} + {data && ( + <> + + + + )}
);