Merge pull request #428 from blockscout/address-coin-balance

address page: coin balance tab

lib/hooks/useQueryWithPages.ts

@@ -85,7 +85,7 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
   const onPrevPageClick = useCallback(() => {
     // returning to the first page
     // we dont have pagination params for the first page
-    let nextPageQuery: typeof router.query = {};
+    let nextPageQuery: typeof router.query = { ...router.query };
     if (page === 2) {
       nextPageQuery = omit(router.query, paginationFields, 'page');
       canGoBackwards.current = true;
@@ -99,17 +99,24 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
       .then(() => {
         scrollToTop();
         setPage(prev => prev - 1);
-        page === 2 && queryClient.clear();
+        page === 2 && queryClient.removeQueries({ queryKey: [ queryName ] });
       });
-  }, [ router, page, paginationFields, pageParams, queryClient, scrollToTop ]);
+  }, [ router, page, paginationFields, pageParams, queryClient, scrollToTop, queryName ]);
 
   const resetPage = useCallback(() => {
+    queryClient.removeQueries({ queryKey: [ queryName ] });
+
     router.push({ pathname: router.pathname, query: omit(router.query, paginationFields, 'page') }, undefined, { shallow: true }).then(() => {
       queryClient.removeQueries({ queryKey: [ queryName ] });
       scrollToTop();
       setPage(1);
       setPageParams([ ]);
       canGoBackwards.current = true;
+      window.setTimeout(() => {
+        // FIXME after router is updated we still have inactive queries for previously visited page (e.g third), where we came from
+        // so have to remove it but with some delay :)
+        queryClient.removeQueries({ queryKey: [ queryName ], type: 'inactive' });
+      }, 100);
     });
   }, [ queryClient, queryName, router, paginationFields, scrollToTop ]);
 

lib/socket/types.ts

 import type { Channel } from 'phoenix';
 
+import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 import type { NewBlockSocketResponse } from 'types/api/block';
 
 export type SocketMessageParams = SocketMessage.NewBlock |
@@ -19,16 +20,6 @@ interface SocketMessageParamsGeneric<Event extends string | undefined, Payload e
   handler: (payload: Payload) => void;
 }
 
-export interface AddressCoinBalancePayload {
-  coin_balance: {
-    block_number: number;
-    block_timestamp?: string;
-    delta?: string;
-    transaction_hash?: string | null;
-    value?: string;
-  };
-}
-
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace SocketMessage {
   export type NewBlock = SocketMessageParamsGeneric<'new_block', NewBlockSocketResponse>;
@@ -40,6 +31,6 @@ export namespace SocketMessage {
   export type AddressCurrentCoinBalance =
   SocketMessageParamsGeneric<'current_coin_balance', { coin_balance: string; block_number: number; exchange_rate: string }>;
   export type AddressTokenBalance = SocketMessageParamsGeneric<'token_balance', { block_number: number }>;
-  export type AddressCoinBalance = SocketMessageParamsGeneric<'coin_balance', AddressCoinBalancePayload>;
+  export type AddressCoinBalance = SocketMessageParamsGeneric<'coin_balance', { coin_balance: AddressCoinBalanceHistoryItem }>;
   export type Unknown = SocketMessageParamsGeneric<undefined, unknown>;
 }

mocks/address/coinBalanceHistory.ts

+export const base = {
+  block_number: 30367643,
+  block_timestamp: '2022-12-11T17:55:20Z',
+  delta: '-5568096000000000',
+  transaction_hash: null,
+  value: '107014805905725000000',
+};

pages/api/addresses/[id]/coin-balance-history-by-day.ts

+import type { NextApiRequest } from 'next';
+
+import handler from 'lib/api/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  return `/v2/addresses/${ req.query.id }/coin-balance-history-by-day`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

pages/api/addresses/[id]/coin-balance-history.ts

+import type { NextApiRequest } from 'next';
+
+import getSearchParams from 'lib/api/getSearchParams';
+import handler from 'lib/api/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  const searchParamsStr = getSearchParams(req);
+  return `/v2/addresses/${ req.query.id }/coin-balance-history${ searchParamsStr ? '?' + searchParamsStr : '' }`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

playwright/fixtures/socketServer.ts

@@ -2,7 +2,7 @@ import type { TestFixture, Page } from '@playwright/test';
 import type { WebSocket } from 'ws';
 import { WebSocketServer } from 'ws';
 
-import type { AddressCoinBalancePayload } from 'lib/socket/types';
+import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 import type { NewBlockSocketResponse } from 'types/api/block';
 
 type ReturnType = () => Promise<WebSocket>;
@@ -54,7 +54,7 @@ export const joinChannel = async(socket: WebSocket, channelName: string) => {
   });
 };
 
-export function sendMessage(socket: WebSocket, channel: Channel, msg: 'coin_balance', payload: AddressCoinBalancePayload): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'coin_balance', payload: { coin_balance: AddressCoinBalanceHistoryItem }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'token_balance', payload: { block_number: number }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'transaction', payload: { transaction: number }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'pending_transaction', payload: { pending_transaction: number }): void;

types/api/address.ts

@@ -59,3 +59,19 @@ export type AddressTokenTransferFilters = {
   filter: AddressFromToFilter;
   type: TokenType;
 }
+
+export interface AddressCoinBalanceHistoryItem {
+  block_number: number;
+  block_timestamp: string;
+  delta: string;
+  transaction_hash: string | null;
+  value: string;
+}
+
+export interface AddressCoinBalanceHistoryResponse {
+  items: Array<AddressCoinBalanceHistoryItem>;
+  next_page_params: {
+    block_number: number;
+    items_count: number;
+  };
+}

types/api/pagination.ts

-import type { AddressTransactionsResponse, AddressTokenTransferResponse, AddressTxsFilters, AddressTokenTransferFilters } from 'types/api/address';
+import type {
+  AddressTransactionsResponse,
+  AddressTokenTransferResponse,
+  AddressTxsFilters,
+  AddressTokenTransferFilters,
+  AddressCoinBalanceHistoryResponse,
+} from 'types/api/address';
 import type { BlocksResponse, BlockTransactionsResponse, BlockFilters } from 'types/api/block';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { LogsResponse } from 'types/api/log';
@@ -19,7 +25,8 @@ export type PaginatedQueryKeys =
   QueryKeys.txsPending |
   QueryKeys.txInternals |
   QueryKeys.txLogs |
-  QueryKeys.txTokenTransfers;
+  QueryKeys.txTokenTransfers |
+  QueryKeys.addressCoinBalanceHistory;
 
 export type PaginatedResponse<Q extends PaginatedQueryKeys> =
   Q extends QueryKeys.addressTxs ? AddressTransactionsResponse :
@@ -31,7 +38,8 @@ export type PaginatedResponse<Q extends PaginatedQueryKeys> =
               Q extends QueryKeys.txInternals ? InternalTransactionsResponse :
                 Q extends QueryKeys.txLogs ? LogsResponse :
                   Q extends QueryKeys.txTokenTransfers ? TokenTransferResponse :
-                    never
+                    Q extends QueryKeys.addressCoinBalanceHistory ? AddressCoinBalanceHistoryResponse :
+                      never
 
 export type PaginationFilters<Q extends PaginatedQueryKeys> =
   Q extends QueryKeys.addressTxs ? AddressTxsFilters :
@@ -60,6 +68,7 @@ export const PAGINATION_FIELDS: PaginationFields = {
   [QueryKeys.txInternals]: [ 'block_number', 'items_count', 'transaction_hash', 'index', 'transaction_index' ],
   [QueryKeys.txTokenTransfers]: [ 'block_number', 'items_count', 'transaction_hash', 'index' ],
   [QueryKeys.txLogs]: [ 'items_count', 'transaction_hash', 'index' ],
+  [QueryKeys.addressCoinBalanceHistory]: [ 'items_count', 'block_number' ],
 };
 
 type PaginationFiltersFields = {
@@ -69,6 +78,7 @@ type PaginationFiltersFields = {
 export const PAGINATION_FILTERS_FIELDS: PaginationFiltersFields = {
   [QueryKeys.addressTxs]: [ 'filter' ],
   [QueryKeys.addressTokenTransfers]: [ 'filter', 'type' ],
+  [QueryKeys.addressCoinBalanceHistory]: [],
   [QueryKeys.blocks]: [ 'type' ],
   [QueryKeys.txsValidate]: [ 'filter', 'type', 'method' ],
   [QueryKeys.txsPending]: [ 'filter', 'type', 'method' ],

types/client/queries.ts

@@ -24,6 +24,8 @@ export enum QueryKeys {
   address='address',
   addressCounters='address-counters',
   addressTokenBalances='address-token-balances',
+  addressCoinBalanceHistory='address-coin-balance-history',
+  addressCoinBalanceHistoryByDay='address-coin-balance-history-by-day',
   addressTxs='addressTxs',
   addressTokenTransfers='addressTokenTransfers',
 }

ui/address/AddressCoinBalance.tsx

+import { useQueryClient } from '@tanstack/react-query';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+import type { Address, AddressCoinBalanceHistoryResponse } from 'types/api/address';
+import { QueryKeys } from 'types/client/queries';
+
+import useQueryWithPages from 'lib/hooks/useQueryWithPages';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+import SocketAlert from 'ui/shared/SocketAlert';
+
+import AddressCoinBalanceChart from './coinBalance/AddressCoinBalanceChart';
+import AddressCoinBalanceHistory from './coinBalance/AddressCoinBalanceHistory';
+
+interface Props {
+  addressQuery: UseQueryResult<Address>;
+}
+
+const AddressCoinBalance = ({ addressQuery }: Props) => {
+  const [ socketAlert, setSocketAlert ] = React.useState(false);
+  const queryClient = useQueryClient();
+
+  const coinBalanceQuery = useQueryWithPages({
+    apiPath: `/node-api/addresses/${ addressQuery.data?.hash }/coin-balance-history`,
+    queryName: QueryKeys.addressCoinBalanceHistory,
+    options: {
+      enabled: Boolean(addressQuery.data),
+    },
+  });
+
+  const handleSocketError = React.useCallback(() => {
+    setSocketAlert(true);
+  }, []);
+
+  const handleNewSocketMessage: SocketMessage.AddressCoinBalance['handler'] = React.useCallback((payload) => {
+    setSocketAlert(false);
+
+    queryClient.setQueryData(
+      [ QueryKeys.addressCoinBalanceHistory, { page: coinBalanceQuery.pagination.page } ],
+      (prevData: AddressCoinBalanceHistoryResponse | undefined) => {
+        if (!prevData) {
+          return;
+        }
+
+        return {
+          ...prevData,
+          items: [
+            payload.coin_balance,
+            ...prevData.items,
+          ],
+        };
+      });
+  }, [ coinBalanceQuery.pagination.page, queryClient ]);
+
+  const channel = useSocketChannel({
+    topic: `addresses:${ addressQuery.data?.hash.toLowerCase() }`,
+    onSocketClose: handleSocketError,
+    onSocketError: handleSocketError,
+    isDisabled: addressQuery.isLoading || addressQuery.isError || !addressQuery.data.hash || coinBalanceQuery.pagination.page !== 1,
+  });
+  useSocketMessage({
+    channel,
+    event: 'coin_balance',
+    handler: handleNewSocketMessage,
+  });
+
+  return (
+    <>
+      { socketAlert && <SocketAlert mb={ 6 }/> }
+      <AddressCoinBalanceChart/>
+      <AddressCoinBalanceHistory query={ coinBalanceQuery }/>
+    </>
+  );
+};
+
+export default React.memo(AddressCoinBalance);

ui/address/coinBalance/AddressCoinBalanceChart.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+const AddressCoinBalanceChart = () => {
+  // chart will be added after stats feature is finalized
+  return <Box p={ 4 } borderColor="gray.200" borderRadius="md" borderWidth="1px">Here will be coin balance chart</Box>;
+};
+
+export default AddressCoinBalanceChart;

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

+import { Box, Hide, Show, Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { AddressCoinBalanceHistoryResponse } from 'types/api/address';
+
+import appConfig from 'configs/app/config';
+import ActionBar from 'ui/shared/ActionBar';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/Pagination';
+import SkeletonTable from 'ui/shared/SkeletonTable';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import AddressCoinBalanceListItem from './AddressCoinBalanceListItem';
+import AddressCoinBalanceSkeletonMobile from './AddressCoinBalanceSkeletonMobile';
+import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
+
+interface Props {
+  query: UseQueryResult<AddressCoinBalanceHistoryResponse> & {
+    pagination: PaginationProps;
+  };
+}
+
+const AddressCoinBalanceHistory = ({ query }: Props) => {
+
+  const isPaginatorHidden = !query.isLoading && !query.isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
+
+  const content = (() => {
+    if (query.isLoading) {
+      return (
+        <>
+          <Hide below="lg">
+            <SkeletonTable columns={ [ '25%', '25%', '25%', '25%', '120px' ] }/>
+          </Hide>
+          <Show below="lg">
+            <AddressCoinBalanceSkeletonMobile/>
+          </Show>
+        </>
+      );
+    }
+
+    if (query.isError) {
+      return <DataFetchAlert/>;
+    }
+
+    return (
+      <>
+        <Hide below="lg">
+          <Table variant="simple" size="sm">
+            <Thead top={ 80 }>
+              <Tr>
+                <Th width="25%">Block</Th>
+                <Th width="25%">Txn</Th>
+                <Th width="25%">Age</Th>
+                <Th width="25%" isNumeric pr={ 1 }/>
+                <Th width="120px" isNumeric>Balance { appConfig.network.currency.symbol }</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              { query.data.items.map((item) => (
+                <AddressCoinBalanceTableItem key={ item.block_number } { ...item } page={ query.pagination.page }/>
+              )) }
+            </Tbody>
+          </Table>
+        </Hide>
+        <Show below="lg">
+          { query.data.items.map((item) => (
+            <AddressCoinBalanceListItem key={ item.block_number } { ...item } page={ query.pagination.page }/>
+          )) }
+        </Show>
+      </>
+    );
+  })();
+
+  return (
+    <Box mt={ 8 }>
+      { !isPaginatorHidden && (
+        <ActionBar mt={ -6 }>
+          <Pagination ml="auto" { ...query.pagination }/>
+        </ActionBar>
+      ) }
+      { content }
+    </Box>
+  );
+};
+
+export default React.memo(AddressCoinBalanceHistory);

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

+import { Link, Text, Stat, StatHelpText, StatArrow, Flex } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
+
+import appConfig from 'configs/app/config';
+import { WEI, ZERO } from 'lib/consts';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import link from 'lib/link/link';
+import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import Address from 'ui/shared/address/Address';
+import AddressLink from 'ui/shared/address/AddressLink';
+
+type Props = AddressCoinBalanceHistoryItem & {
+  page: number;
+};
+
+const AddressCoinBalanceListItem = (props: Props) => {
+  const blockUrl = link('block', { id: String(props.block_number) });
+  const deltaBn = BigNumber(props.delta).div(WEI);
+  const isPositiveDelta = deltaBn.gte(ZERO);
+  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
+
+  return (
+    <AccountListItemMobile fontSize="sm" rowGap={ 2 }>
+      <Flex justifyContent="space-between" w="100%">
+        <Text fontWeight={ 600 }>{ BigNumber(props.value).div(WEI).toFixed(8) } { appConfig.network.currency.symbol }</Text>
+        <Stat flexGrow="0">
+          <StatHelpText display="flex" mb={ 0 } alignItems="center">
+            <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
+            <Text as="span" color={ isPositiveDelta ? 'green.500' : 'red.500' } fontWeight={ 600 }>
+              { deltaBn.toFixed(8) }
+            </Text>
+          </StatHelpText>
+        </Stat>
+      </Flex>
+      <Flex columnGap={ 2 } w="100%">
+        <Text fontWeight={ 500 } flexShrink={ 0 }>Block</Text>
+        <Link href={ blockUrl } fontWeight="700">{ props.block_number }</Link>
+      </Flex>
+      { props.transaction_hash && (
+        <Flex columnGap={ 2 } w="100%">
+          <Text fontWeight={ 500 } flexShrink={ 0 }>Txs</Text>
+          <Address maxW="150px" fontWeight="700">
+            <AddressLink hash={ props.transaction_hash } type="transaction"/>
+          </Address>
+        </Flex>
+      ) }
+      <Flex columnGap={ 2 } w="100%">
+        <Text fontWeight={ 500 } flexShrink={ 0 }>Age</Text>
+        <Text variant="secondary">{ timeAgo }</Text>
+      </Flex>
+    </AccountListItemMobile>
+  );
+};
+
+export default React.memo(AddressCoinBalanceListItem);

ui/address/coinBalance/AddressCoinBalanceSkeletonMobile.tsx

+import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+const AddressCoinBalanceSkeletonMobile = () => {
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
+  return (
+    <Box>
+      { Array.from(Array(2)).map((item, index) => (
+        <Flex
+          key={ index }
+          rowGap={ 3 }
+          flexDirection="column"
+          paddingY={ 6 }
+          borderTopWidth="1px"
+          borderColor={ borderColor }
+          _last={{
+            borderBottomWidth: '1px',
+          }}
+        >
+          <Flex justifyContent="space-between" w="100%" h={ 6 }>
+            <Skeleton w="170px"/>
+            <Skeleton w="120px"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="40px"/>
+            <Skeleton w="80px"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="40px"/>
+            <Skeleton w="150px"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="30px"/>
+            <Skeleton w="60px"/>
+          </Flex>
+        </Flex>
+      )) }
+    </Box>
+  );
+};
+
+export default AddressCoinBalanceSkeletonMobile;

ui/address/coinBalance/AddressCoinBalanceTableItem.tsx

+import { Link, Td, Tr, Text, Stat, StatHelpText, StatArrow } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
+
+import { WEI, ZERO } from 'lib/consts';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import link from 'lib/link/link';
+import Address from 'ui/shared/address/Address';
+import AddressLink from 'ui/shared/address/AddressLink';
+
+type Props = AddressCoinBalanceHistoryItem & {
+  page: number;
+};
+
+const AddressCoinBalanceTableItem = (props: Props) => {
+  const blockUrl = link('block', { id: String(props.block_number) });
+  const deltaBn = BigNumber(props.delta).div(WEI);
+  const isPositiveDelta = deltaBn.gte(ZERO);
+  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
+
+  return (
+    <Tr>
+      <Td>
+        <Link href={ blockUrl } fontWeight="700">{ props.block_number }</Link>
+      </Td>
+      <Td>
+        { props.transaction_hash ?
+          (
+            <Address maxW="150px" fontWeight="700">
+              <AddressLink hash={ props.transaction_hash } type="transaction"/>
+            </Address>
+          ) :
+          <Text fontWeight="700">-</Text>
+        }
+      </Td>
+      <Td>
+        <Text variant="secondary">{ timeAgo }</Text>
+      </Td>
+      <Td isNumeric pr={ 1 }>
+        <Text>{ BigNumber(props.value).div(WEI).toFixed(8) }</Text>
+      </Td>
+      <Td isNumeric display="flex" justifyContent="end">
+        <Stat flexGrow="0">
+          <StatHelpText display="flex" mb={ 0 } alignItems="center">
+            <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
+            <Text as="span" color={ isPositiveDelta ? 'green.500' : 'red.500' } fontWeight={ 600 }>
+              { deltaBn.toFixed(8) }
+            </Text>
+          </StatHelpText>
+        </Stat>
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(AddressCoinBalanceTableItem);

ui/address/tokenSelect/TokenSelect.pw.tsx

@@ -2,6 +2,7 @@ import { Flex } from '@chakra-ui/react';
 import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import * as coinBalanceMock from 'mocks/address/coinBalanceHistory';
 import * as tokenBalanceMock from 'mocks/address/tokenBalance';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
@@ -184,9 +185,7 @@ test.describe('socket', () => {
     const socket = await createSocket();
     const channel = await socketServer.joinChannel(socket, 'addresses:1');
     socketServer.sendMessage(socket, channel, 'coin_balance', {
-      coin_balance: {
-        block_number: 1,
-      },
+      coin_balance: coinBalanceMock.base,
     });
 
     const button = page.getByRole('button', { name: /select/i });

ui/pages/Address.tsx

@@ -8,6 +8,7 @@ import { QueryKeys } from 'types/client/queries';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import useFetch from 'lib/hooks/useFetch';
+import AddressCoinBalance from 'ui/address/AddressCoinBalance';
 import AddressDetails from 'ui/address/AddressDetails';
 import AddressTxs from 'ui/address/AddressTxs';
 import Page from 'ui/shared/Page/Page';
@@ -37,7 +38,7 @@ const AddressPageContent = () => {
     { id: 'token_transfers', title: 'Token transfers', component: null },
     { id: 'tokens', title: 'Tokens', component: null },
     { id: 'internal_txn', title: 'Internal txn', component: null },
-    { id: 'coin_balance_history', title: 'Coin balance history', component: null },
+    { id: 'coin_balance_history', title: 'Coin balance history', component: <AddressCoinBalance addressQuery={ addressQuery }/> },
   ];
 
   return (

ui/shared/SocketAlert.tsx

+import { Text, Alert, Link, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  className?: string;
+}
+
+const SocketAlert = ({ className }: Props) => {
+  return (
+    <Alert status="warning" className={ className }>
+      <Text whiteSpace="pre">Connection lost, click </Text>
+      <Link href={ window.document.location.href }>to load newer records</Link>
+    </Alert>
+  );
+};
+
+export default chakra(SocketAlert);