From 9f16be0ccde021f34d6becd8e618babbec3519a5 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Sat, 25 Nov 2023 11:06:35 +0100 Subject: [PATCH 1/9] Implemented indexing status notification --- setup/react/app/ApplicationBootstrap.js | 7 ++++- setup/react/app/MainRouter.js | 2 ++ src/const/queries.js | 1 + .../indexingNotification/index.js | 26 +++++++++++++++++++ src/modules/network/__fixtures__/index.js | 1 + .../network/__fixtures__/mockIndexStatus.js | 14 ++++++++++ src/modules/network/hooks/queries/index.js | 1 + .../network/hooks/queries/useIndexStatus.js | 18 +++++++++++++ .../hooks/queries/useIndexStatus.test.js | 16 ++++++++++++ 9 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 src/modules/common/components/notification/indexingNotification/index.js create mode 100644 src/modules/network/__fixtures__/mockIndexStatus.js create mode 100644 src/modules/network/hooks/queries/useIndexStatus.js create mode 100644 src/modules/network/hooks/queries/useIndexStatus.test.js diff --git a/setup/react/app/ApplicationBootstrap.js b/setup/react/app/ApplicationBootstrap.js index c56a336b4e..4a753a3e8a 100644 --- a/setup/react/app/ApplicationBootstrap.js +++ b/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 ?? [] } }, diff --git a/setup/react/app/MainRouter.js b/setup/react/app/MainRouter.js index ecee117326..6bd5b896bf 100644 --- a/setup/react/app/MainRouter.js +++ b/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 (
+ {routesList.map((route) => ( { + const { t } = useTranslation(); + const { + indexStatus: { percentageIndexed }, + } = useContext(ApplicationBootstrapContext); + + useEffect(() => { + if (percentageIndexed < 100) { + toast.info(
{t(`Network currently indexing... Progress - ${percentageIndexed}%`)}
, { + autoClose: false, + draggable: false, + closeButton: false, + toastId: 'indexStatus', + }); + } + }, [percentageIndexed]); + + return null; +}; + +export default IndexingNotification; diff --git a/src/modules/network/__fixtures__/index.js b/src/modules/network/__fixtures__/index.js index a970a9010f..772645cabb 100644 --- a/src/modules/network/__fixtures__/index.js +++ b/src/modules/network/__fixtures__/index.js @@ -1,3 +1,4 @@ export * from './mockNetworkStatus'; export * from './mockNetworkStatistics'; export * from './mockPeers'; +export * from './mockIndexStatus'; diff --git a/src/modules/network/__fixtures__/mockIndexStatus.js b/src/modules/network/__fixtures__/mockIndexStatus.js new file mode 100644 index 0000000000..b65944d4c3 --- /dev/null +++ b/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, + }, +}; diff --git a/src/modules/network/hooks/queries/index.js b/src/modules/network/hooks/queries/index.js index 2a2c52642a..1935e8167e 100644 --- a/src/modules/network/hooks/queries/index.js +++ b/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'; diff --git a/src/modules/network/hooks/queries/useIndexStatus.js b/src/modules/network/hooks/queries/useIndexStatus.js new file mode 100644 index 0000000000..4661218a7d --- /dev/null +++ b/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, + }); +}; diff --git a/src/modules/network/hooks/queries/useIndexStatus.test.js b/src/modules/network/hooks/queries/useIndexStatus.test.js new file mode 100644 index 0000000000..d1cf61f820 --- /dev/null +++ b/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); + }); +}); From 2d7460b214ef9b05cf6c5b834c9505195a88f03a Mon Sep 17 00:00:00 2001 From: ManuGowda Date: Sat, 25 Nov 2023 14:59:13 +0100 Subject: [PATCH 2/9] :recycle: Fix toaster disappearance and update text --- .../indexingNotification/index.js | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/modules/common/components/notification/indexingNotification/index.js b/src/modules/common/components/notification/indexingNotification/index.js index df5bd746d6..6b47696a8b 100644 --- a/src/modules/common/components/notification/indexingNotification/index.js +++ b/src/modules/common/components/notification/indexingNotification/index.js @@ -6,17 +6,24 @@ import { ApplicationBootstrapContext } from '@setup/react/app/ApplicationBootstr const IndexingNotification = () => { const { t } = useTranslation(); const { - indexStatus: { percentageIndexed }, + indexStatus: { percentageIndexed, isIndexingInProgress }, } = useContext(ApplicationBootstrapContext); useEffect(() => { if (percentageIndexed < 100) { - toast.info(
{t(`Network currently indexing... Progress - ${percentageIndexed}%`)}
, { - autoClose: false, - draggable: false, - closeButton: false, - toastId: 'indexStatus', - }); + toast.info( +
+ {t(`Blockchain client syncing: ${isIndexingInProgress}`)} +
{t(`Service indexing progress: ${percentageIndexed}%`)} +
, + { + autoClose: false, + draggable: false, + closeButton: false, + delay: 1000, + toastId: 'indexStatus', + } + ); } }, [percentageIndexed]); From 923bc081dca016f64c48e5182cec81a2d66b4c55 Mon Sep 17 00:00:00 2001 From: ManuGowda Date: Sun, 26 Nov 2023 19:57:13 +0100 Subject: [PATCH 3/9] :recycle: Fix unit test --- .../notification/indexingNotification/index.js | 5 +++-- src/modules/network/mocks/index.js | 12 +++++++++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/modules/common/components/notification/indexingNotification/index.js b/src/modules/common/components/notification/indexingNotification/index.js index 6b47696a8b..d530e5f551 100644 --- a/src/modules/common/components/notification/indexingNotification/index.js +++ b/src/modules/common/components/notification/indexingNotification/index.js @@ -3,14 +3,15 @@ import { toast } from 'react-toastify'; import { useTranslation } from 'react-i18next'; import { ApplicationBootstrapContext } from '@setup/react/app/ApplicationBootstrap'; +/* istanbul ignore file */ const IndexingNotification = () => { const { t } = useTranslation(); const { - indexStatus: { percentageIndexed, isIndexingInProgress }, + indexStatus: { percentageIndexed, isIndexingInProgress, chainLength, numBlocksIndexed }, } = useContext(ApplicationBootstrapContext); useEffect(() => { - if (percentageIndexed < 100) { + if (chainLength - numBlocksIndexed >= 5) { toast.info(
{t(`Blockchain client syncing: ${isIndexingInProgress}`)} diff --git a/src/modules/network/mocks/index.js b/src/modules/network/mocks/index.js index fe2dce530a..94be3f2c8e 100644 --- a/src/modules/network/mocks/index.js +++ b/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)) +); From 5df1426021c013bd18ba65799043044270827416 Mon Sep 17 00:00:00 2001 From: ManuGowda Date: Sun, 26 Nov 2023 19:57:29 +0100 Subject: [PATCH 4/9] :nail_care: Format files --- .../token/fungible/components/SendView/index.test.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/modules/token/fungible/components/SendView/index.test.js b/src/modules/token/fungible/components/SendView/index.test.js index 67297dbbfc..e1ab051934 100644 --- a/src/modules/token/fungible/components/SendView/index.test.js +++ b/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'; From 5e2851e581c402d3aa60466ff2d57cb45c3a9be2 Mon Sep 17 00:00:00 2001 From: ManuGowda Date: Sun, 26 Nov 2023 19:58:37 +0100 Subject: [PATCH 5/9] :wrench: Update network config --- src/modules/network/configuration/networks.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/network/configuration/networks.js b/src/modules/network/configuration/networks.js index f5cb5b2590..1c3f642313 100644 --- a/src/modules/network/configuration/networks.js +++ b/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, From 457c7291167754e5ce0bd57e2fd80db3def21952 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Mon, 27 Nov 2023 10:42:34 +0100 Subject: [PATCH 6/9] Updated styyling and added unit test --- .../indexingNotification/index.js | 7 ++- .../indexingNotification/index.test.js | 59 +++++++++++++++++++ .../indexingNotification/styles.css | 8 +++ 3 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 src/modules/common/components/notification/indexingNotification/index.test.js create mode 100644 src/modules/common/components/notification/indexingNotification/styles.css diff --git a/src/modules/common/components/notification/indexingNotification/index.js b/src/modules/common/components/notification/indexingNotification/index.js index d530e5f551..d599fd9610 100644 --- a/src/modules/common/components/notification/indexingNotification/index.js +++ b/src/modules/common/components/notification/indexingNotification/index.js @@ -2,6 +2,7 @@ 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'; /* istanbul ignore file */ const IndexingNotification = () => { @@ -13,9 +14,9 @@ const IndexingNotification = () => { useEffect(() => { if (chainLength - numBlocksIndexed >= 5) { toast.info( -
- {t(`Blockchain client syncing: ${isIndexingInProgress}`)} -
{t(`Service indexing progress: ${percentageIndexed}%`)} +
+

{t(`Blockchain client syncing: ${isIndexingInProgress}`)}

+

{t(`Service indexing progress: ${percentageIndexed}%`)}

, { autoClose: false, diff --git a/src/modules/common/components/notification/indexingNotification/index.test.js b/src/modules/common/components/notification/indexingNotification/index.test.js new file mode 100644 index 0000000000..c3f655781f --- /dev/null +++ b/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 = () => ( + + + + + ); + 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 = () => ( + + + + + ); + smartRender(Component); + + await waitFor(() => { + expect(screen.queryByText('Blockchain client syncing: false')).not.toBeInTheDocument(); + expect(screen.queryByText('Service indexing progress: 100%')).not.toBeInTheDocument(); + }); + }); +}); diff --git a/src/modules/common/components/notification/indexingNotification/styles.css b/src/modules/common/components/notification/indexingNotification/styles.css new file mode 100644 index 0000000000..96efa9b5e1 --- /dev/null +++ b/src/modules/common/components/notification/indexingNotification/styles.css @@ -0,0 +1,8 @@ +.indexingInfo { + font-size: 16px; + + & p { + margin-top: 0; + margin-bottom: 0; + } +} From 3bf7c9ede00fedd251299f320fe67ff3fe58ab7c Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Mon, 27 Nov 2023 11:09:17 +0100 Subject: [PATCH 7/9] Disable e2e tests --- cucumber.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cucumber.js b/cucumber.js index 635179add5..548591090f 100644 --- a/cucumber.js +++ b/cucumber.js @@ -2,7 +2,7 @@ module.exports = { default: { parallel: 2, format: ['html:./e2e/assets/cucumber-report.html'], - paths: ['./e2e/features/**/*.feature'], + paths: [], import: ['./e2e/hooks/hooks.mjs', './e2e/steps/**/*.mjs', './e2e/steps/**/*.js'], dryRun: false, failFast: false, From bb7cd9568944c5170c0063a78c00c5bf34677083 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Mon, 27 Nov 2023 11:28:09 +0100 Subject: [PATCH 8/9] Fixed e2e test --- cucumber.js | 2 +- setup/react/app/ApplicationBootstrap.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/cucumber.js b/cucumber.js index 548591090f..635179add5 100644 --- a/cucumber.js +++ b/cucumber.js @@ -2,7 +2,7 @@ module.exports = { default: { parallel: 2, format: ['html:./e2e/assets/cucumber-report.html'], - paths: [], + paths: ['./e2e/features/**/*.feature'], import: ['./e2e/hooks/hooks.mjs', './e2e/steps/**/*.mjs', './e2e/steps/**/*.js'], dryRun: false, failFast: false, diff --git a/setup/react/app/ApplicationBootstrap.js b/setup/react/app/ApplicationBootstrap.js index 4a753a3e8a..f8ae9a349d 100644 --- a/setup/react/app/ApplicationBootstrap.js +++ b/setup/react/app/ApplicationBootstrap.js @@ -123,7 +123,7 @@ const ApplicationBootstrap = ({ children }) => { isLoadingNetwork: (blockchainAppsMeta.isFetching && !blockchainAppsMeta.data) || (networkStatus.isFetching && !networkStatus.data), - indexStatus: indexStatus?.data?.data, + indexStatus: indexStatus?.data?.data || {}, error: networkStatus.error || blockchainAppsMeta.error, refetchNetwork: blockchainAppsMeta.refetch, appEvents: { transactions: { rewards: rewardsData?.data ?? [] } }, From 96c15119e35cbf4f4d3078efc78f6349494ef3a6 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Mon, 27 Nov 2023 11:30:30 +0100 Subject: [PATCH 9/9] Minor change --- .../common/components/notification/indexingNotification/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/modules/common/components/notification/indexingNotification/index.js b/src/modules/common/components/notification/indexingNotification/index.js index d599fd9610..14dc475b95 100644 --- a/src/modules/common/components/notification/indexingNotification/index.js +++ b/src/modules/common/components/notification/indexingNotification/index.js @@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'; import { ApplicationBootstrapContext } from '@setup/react/app/ApplicationBootstrap'; import styles from './styles.css'; -/* istanbul ignore file */ const IndexingNotification = () => { const { t } = useTranslation(); const {