Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement API loader #5497

Merged
merged 10 commits into from
Nov 27, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion setup/react/app/ApplicationBootstrap.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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 ?? [] } },
Expand Down
2 changes: 2 additions & 0 deletions setup/react/app/MainRouter.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -39,6 +40,7 @@ const MainRouter = ({ history }) => {
return (
<div className={`${styles.mainContent} ${styles.mainBox}`}>
<RewardsNotification />
<IndexingNotification />
<Switch>
{routesList.map((route) => (
<CustomRoute
Expand Down
1 change: 1 addition & 0 deletions src/const/queries.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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 = () => {
ikem-legend marked this conversation as resolved.
Show resolved Hide resolved
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;
Original file line number Diff line number Diff line change
@@ -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();
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.indexingInfo {
font-size: 16px;

& p {
margin-top: 0;
margin-bottom: 0;
}
}
1 change: 1 addition & 0 deletions src/modules/network/__fixtures__/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './mockNetworkStatus';
export * from './mockNetworkStatistics';
export * from './mockPeers';
export * from './mockIndexStatus';
14 changes: 14 additions & 0 deletions src/modules/network/__fixtures__/mockIndexStatus.js
Original file line number Diff line number Diff line change
@@ -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,
},
};
4 changes: 2 additions & 2 deletions src/modules/network/configuration/networks.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down
1 change: 1 addition & 0 deletions src/modules/network/hooks/queries/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ export * from './useNetworkStatus';
export * from './useNetworkStatistics';
export * from './usePeers';
export * from './useCommandParametersSchemas';
export * from './useIndexStatus';
18 changes: 18 additions & 0 deletions src/modules/network/hooks/queries/useIndexStatus.js
Original file line number Diff line number Diff line change
@@ -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,
});
};
16 changes: 16 additions & 0 deletions src/modules/network/hooks/queries/useIndexStatus.test.js
Original file line number Diff line number Diff line change
@@ -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);
});
});
12 changes: 11 additions & 1 deletion src/modules/network/mocks/index.js
Original file line number Diff line number Diff line change
@@ -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))
Expand All @@ -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))
);
6 changes: 5 additions & 1 deletion src/modules/token/fungible/components/SendView/index.test.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down