Merge pull request #5497 from LiskHQ/5495-implement-api-loader

Implement API loader

setup/react/app/ApplicationBootstrap.js

@@ -7,7 +7,7 @@ import {
   useApplicationManagement,
   useCurrentApplication,
 } from '@blockchainApplication/manage/hooks';
-import { useNetworkStatus } from '@network/hooks/queries';
+import { useNetworkStatus, useIndexStatus } from '@network/hooks/queries';
 import { useBlockchainApplicationMeta } from '@blockchainApplication/manage/hooks/queries/useBlockchainApplicationMeta';
 import { useCurrentAccount } from 'src/modules/account/hooks';
 import { Client } from 'src/utils/api/client';
@@ -40,6 +40,10 @@ const ApplicationBootstrap = ({ children }) => {
     options: { enabled: !!mainChainNetwork },
     client: queryClient.current,
   });
+  const indexStatus = useIndexStatus({
+    options: { enabled: !!mainChainNetwork },
+    client: queryClient.current,
+  });
 
   const blockchainAppsMeta = useBlockchainApplicationMeta({
     config: {
@@ -119,6 +123,7 @@ const ApplicationBootstrap = ({ children }) => {
         isLoadingNetwork:
           (blockchainAppsMeta.isFetching && !blockchainAppsMeta.data) ||
           (networkStatus.isFetching && !networkStatus.data),
+        indexStatus: indexStatus?.data?.data || {},
         error: networkStatus.error || blockchainAppsMeta.error,
         refetchNetwork: blockchainAppsMeta.refetch,
         appEvents: { transactions: { rewards: rewardsData?.data ?? [] } },

setup/react/app/MainRouter.js

@@ -8,6 +8,7 @@ import routesMap from 'src/routes/routesMap';
 import NotFound from '@common/components/NotFound';
 import CustomRoute from '@common/components/customRoute';
 import RewardsNotification from '@common/components/notification/rewardsNotification';
+import IndexingNotification from '@common/components/notification/indexingNotification';
 import routes from 'src/routes/routes';
 import styles from './app.css';
 
@@ -39,6 +40,7 @@ const MainRouter = ({ history }) => {
   return (
     <div className={`${styles.mainContent} ${styles.mainBox}`}>
       <RewardsNotification />
+      <IndexingNotification />
       <Switch>
         {routesList.map((route) => (
           <CustomRoute

src/const/queries.js

@@ -1,5 +1,6 @@
 export const BLOCKS = 'GET_BLOCKS';
 export const NETWORK_STATUS = 'GET_NETWORK_STATUS';
+export const INDEX_STATUS = 'GET_INDEX_STATUS';
 export const LEGACY = 'GET_LEGACY';
 export const TOKENS_BALANCE = 'GET_TOKENS_BALANCE';
 export const TOKENS_SUPPORTED = 'GET_TOKENS_SUPPORTED';

src/modules/common/components/notification/indexingNotification/index.js

@@ -0,0 +1,34 @@
+import React, { useEffect, useContext } from 'react';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import { ApplicationBootstrapContext } from '@setup/react/app/ApplicationBootstrap';
+import styles from './styles.css';
+
+const IndexingNotification = () => {
+  const { t } = useTranslation();
+  const {
+    indexStatus: { percentageIndexed, isIndexingInProgress, chainLength, numBlocksIndexed },
+  } = useContext(ApplicationBootstrapContext);
+
+  useEffect(() => {
+    if (chainLength - numBlocksIndexed >= 5) {
+      toast.info(
+        <div className={styles.indexingInfo}>
+          <p>{t(`Blockchain client syncing: ${isIndexingInProgress}`)}</p>
+          <p>{t(`Service indexing progress: ${percentageIndexed}%`)}</p>
+        </div>,
+        {
+          autoClose: false,
+          draggable: false,
+          closeButton: false,
+          delay: 1000,
+          toastId: 'indexStatus',
+        }
+      );
+    }
+  }, [percentageIndexed]);
+
+  return null;
+};
+
+export default IndexingNotification;

src/modules/common/components/notification/indexingNotification/index.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { ToastContainer } from 'react-toastify';
+import { ApplicationBootstrapContext } from '@setup/react/app/ApplicationBootstrap';
+import { smartRender } from 'src/utils/testHelpers';
+import IndexingNotification from '.';
+
+describe('IndexingNotification', () => {
+  it('renders properly', async () => {
+    const Component = () => (
+      <ApplicationBootstrapContext.Provider
+        value={{
+          indexStatus: {
+            percentageIndexed: 98.69,
+            isIndexingInProgress: true,
+            chainLength: 263945,
+            numBlocksIndexed: 263938,
+          },
+        }}
+      >
+        <ToastContainer />
+        <IndexingNotification />
+      </ApplicationBootstrapContext.Provider>
+    );
+    smartRender(Component);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('Blockchain client syncing: true')).toBeVisible();
+        expect(screen.getByText('Service indexing progress: 98.69%')).toBeVisible();
+      },
+      { timeout: 3000 }
+    );
+  });
+
+  it('does not render if indexing is not in progress', async () => {
+    const Component = () => (
+      <ApplicationBootstrapContext.Provider
+        value={{
+          indexStatus: {
+            percentageIndexed: 100,
+            isIndexingInProgress: false,
+            chainLength: 263945,
+            numBlocksIndexed: 263945,
+          },
+        }}
+      >
+        <ToastContainer />
+        <IndexingNotification />
+      </ApplicationBootstrapContext.Provider>
+    );
+    smartRender(Component);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Blockchain client syncing: false')).not.toBeInTheDocument();
+      expect(screen.queryByText('Service indexing progress: 100%')).not.toBeInTheDocument();
+    });
+  });
+});

src/modules/common/components/notification/indexingNotification/styles.css

@@ -0,0 +1,8 @@
+.indexingInfo {
+  font-size: 16px;
+
+  & p {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}

src/modules/network/__fixtures__/index.js

@@ -1,3 +1,4 @@
 export * from './mockNetworkStatus';
 export * from './mockNetworkStatistics';
 export * from './mockPeers';
+export * from './mockIndexStatus';

src/modules/network/__fixtures__/mockIndexStatus.js

@@ -0,0 +1,14 @@
+export const mockIndexStatus = {
+  data: {
+    genesisHeight: 20449415,
+    lastBlockHeight: 20689260,
+    lastIndexedBlockHeight: 20689224,
+    chainLength: 239846,
+    numBlocksIndexed: 239810,
+    percentageIndexed: 99.98,
+    isIndexingInProgress: false,
+  },
+  meta: {
+    lastUpdate: 1700834626,
+  },
+};

src/modules/network/configuration/networks.js

@@ -15,7 +15,7 @@ const networks = {
     label: 'Mainnet',
     serviceUrl: 'https://mainnet-service.lisk.com',
     wsServiceUrl: 'wss://mainnet-service.lisk.com',
-    isAvailable: false,
+    isAvailable: true,
   },
   [networkKeys.alphanet]: {
     name: networkKeys.alphanet,
@@ -29,7 +29,7 @@ const networks = {
     label: 'Betanet',
     serviceUrl: 'https://betanet-service.lisk.com',
     wsServiceUrl: 'wss://betanet-service.lisk.com',
-    isAvailable: true,
+    isAvailable: false,
   },
   [networkKeys.devnet]: {
     name: networkKeys.devnet,

src/modules/network/hooks/queries/index.js

@@ -2,3 +2,4 @@ export * from './useNetworkStatus';
 export * from './useNetworkStatistics';
 export * from './usePeers';
 export * from './useCommandParametersSchemas';
+export * from './useIndexStatus';

src/modules/network/hooks/queries/useIndexStatus.js

@@ -0,0 +1,18 @@
+import { INDEX_STATUS } from 'src/const/queries';
+import { API_VERSION } from 'src/const/config';
+import { useCustomQuery } from 'src/modules/common/hooks';
+
+export const useIndexStatus = ({ config: customConfig = {}, options, client } = {}) => {
+  const config = {
+    url: `/api/${API_VERSION}/index/status`,
+    method: 'get',
+    event: 'get.index.status',
+    ...customConfig,
+  };
+  return useCustomQuery({
+    keys: [INDEX_STATUS],
+    config,
+    options,
+    client,
+  });
+};

src/modules/network/hooks/queries/useIndexStatus.test.js

@@ -0,0 +1,16 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { mockIndexStatus } from '@network/__fixtures__';
+import { queryWrapper as wrapper } from 'src/utils/test/queryWrapper';
+import { useIndexStatus } from '.';
+
+jest.useRealTimers();
+
+describe('useIndexStatus hook', () => {
+  it('fetching data correctly', async () => {
+    const { result, waitFor } = renderHook(() => useIndexStatus(), { wrapper });
+    expect(result.current.isLoading).toBeTruthy();
+    await waitFor(() => result.current.isFetched);
+    expect(result.current.isSuccess).toBeTruthy();
+    expect(result.current.data).toEqual(mockIndexStatus);
+  });
+});

src/modules/network/mocks/index.js

@@ -1,10 +1,16 @@
 import { rest } from 'msw';
 import { API_VERSION, LIMIT } from 'src/const/config';
-import { mockPeers, mockNetworkStatus, mockNetworkStatistics } from '@network/__fixtures__';
+import {
+  mockPeers,
+  mockNetworkStatus,
+  mockNetworkStatistics,
+  mockIndexStatus,
+} from '@network/__fixtures__';
 
 export const networkStatus = rest.get(`*/api/${API_VERSION}/network/status`, (_, res, ctx) =>
   res(ctx.json(mockNetworkStatus))
 );
+
 export const networkStatistics = rest.get(
   `*/api/${API_VERSION}/network/statistics`,
   (_, res, ctx) => res(ctx.json(mockNetworkStatistics))
@@ -23,3 +29,7 @@ export const peers = rest.get(`*/api/${API_VERSION}/network/peers`, async (req,
   };
   return res(ctx.delay(20), ctx.json(response));
 });
+
+export const indexStatus = rest.get(`*/api/${API_VERSION}/index/status`, (_, res, ctx) =>
+  res(ctx.json(mockIndexStatus))
+);

src/modules/token/fungible/components/SendView/index.test.js

@@ -1,5 +1,9 @@
 import { getTransactionBaseFees } from '@transaction/api';
-import { mockAppsTokens, mockTokensBalance, mockTokenSummary } from '@token/fungible/__fixtures__/mockTokens';
+import {
+  mockAppsTokens,
+  mockTokensBalance,
+  mockTokenSummary,
+} from '@token/fungible/__fixtures__/mockTokens';
 import { mountWithRouterAndQueryClient } from 'src/utils/testHelpers';
 import mockManagedApplications from '@tests/fixtures/blockchainApplicationsManage';
 import mockSavedAccounts from '@tests/fixtures/accounts';