Implement application bootstrap component

setup/config/webpack.config.dev.js

@@ -27,6 +27,7 @@ const config = {
     new webpack.DefinePlugin({
       PRODUCTION: JSON.stringify(false),
       VERSION: JSON.stringify(version),
+      DEFAULT_NETWORK: 'devnet',
     }),
   ],
 };

setup/react/app/ApplicationBootstrap.js

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react';
+import {
+  useGetDefaultApplication,
+  useApplicationManagement,
+  useCurrentApplication,
+} from '@blockchainApplication/manage/hooks';
+import { useTransactionUpdate } from '@transaction/hooks';
+import { PrimaryButton } from 'src/theme/buttons';
+
+const ApplicationBootstrap = ({ children }) => {
+  const {
+    applications: defaultApps = [],
+    isFetched,
+    error,
+    isLoading,
+    retry,
+  } = useGetDefaultApplication();
+  const { setApplications } = useApplicationManagement();
+  const [, setCurrentApplication] = useCurrentApplication();
+
+  useTransactionUpdate();
+
+  useEffect(() => {
+    if (defaultApps.length && isFetched) {
+      setCurrentApplication(defaultApps[0]);
+      setApplications(defaultApps);
+    }
+  }, [isFetched]);
+
+  if (error) {
+    // @TODO: this return should be replaced with an actual error message page
+    return (
+      <div>
+        error
+        <PrimaryButton onClick={retry}>Retry</PrimaryButton>
+      </div>
+    );
+  }
+
+  return !isLoading && isFetched ? children : null;
+};
+
+export default ApplicationBootstrap;

setup/react/app/index.js

@@ -13,21 +13,15 @@ import NotFound from 'src/modules/common/components/NotFound';
 import useIpc from '@update/hooks/useIpc';
 import ConnectionProvider from '@libs/wcm/context/connectionProvider';
 import FlashMessageHolder from 'src/theme/flashMessage/holder';
-import client from 'src/utils/api/client';
 import DialogHolder from 'src/theme/dialog/holder';
 import OfflineWrapper from 'src/modules/common/components/offlineWrapper';
 import CustomRoute from 'src/modules/common/components/customRoute';
 import NavigationBars from 'src/modules/common/components/bars';
 import ThemeContext from 'src/theme/themeProvider';
 import routesMap from 'src/routes/routesMap';
-import { useTransactionUpdate } from '@transaction/hooks';
 import routes from 'src/routes/routes';
 import { MOCK_SERVICE_WORKER } from 'src/const/config';
-import { useBlockchainApplicationMeta } from 'src/modules/blockchainApplication/manage/hooks/queries/useBlockchainApplicationMeta';
-import {
-  useApplicationManagement,
-  useCurrentApplication,
-} from 'src/modules/blockchainApplication/manage/hooks';
+
 import './variables.css';
 import styles from './app.css';
 
@@ -42,32 +36,17 @@ const App = ({ history }) => {
   const dispatch = useDispatch();
   const [loaded, setLoaded] = useState(false);
   const theme = useSelector((state) => (state.settings.darkMode ? 'dark' : 'light'));
-  const { data: chainMetaData, isLoading } = useBlockchainApplicationMeta();
-  const { setApplication } = useApplicationManagement();
-  const [, setCurrentApplication] = useCurrentApplication();
 
   useIpc(history);
 
   useEffect(() => {
     setLoaded(true);
-    // Initialize client on first render to get default application
-    client.create({
-      http: 'http://165.227.246.146:9901',
-      ws: 'ws://165.227.246.146:9901',
-    });
+
     dispatch(bookmarksRetrieved());
     dispatch(settingsRetrieved());
     dispatch(watchListRetrieved());
   }, []);
 
-  useEffect(() => {
-    if (!isLoading && chainMetaData) {
-      chainMetaData.data.map((data) => setApplication(data));
-      setCurrentApplication(chainMetaData.data[0]);
-    }
-  }, [isLoading, chainMetaData]);
-  useTransactionUpdate(loaded);
-
   const routesList = Object.keys(routes);
   const routeObj = Object.values(routes).find((r) => r.path === history.location.pathname) || {};
   return (

setup/react/main.js

@@ -13,9 +13,12 @@ import ipcLocale from 'src/utils/ipcLocale';
 import updateApp from '@update/utils/updateApp';
 import i18n from 'src/utils/i18n/i18n';
 import App from './app';
+import ApplicationBootstrap from './app/ApplicationBootstrap';
 
 // eslint-disable-next-line no-extend-native
-BigInt.prototype.toJSON = function () { return `${this.toString()}n`; };
+BigInt.prototype.toJSON = function () {
+  return `${this.toString()}n`;
+};
 
 ipcLocale.init(i18n);
 updateApp.init();
@@ -39,16 +42,20 @@ const queryClient = new QueryClient({
 });
 const rootElement = document.getElementById('app');
 
-const renderWithRouter = Component => (
+const renderWithRouter = (Component) => (
   <QueryClientProvider client={queryClient}>
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistedStore}>
-        <Router>
-          <I18nextProvider i18n={i18n}>
-            <Component />
-          </I18nextProvider>
-        </Router>
-        <ReactQueryDevtools />
+        <ApplicationBootstrap>
+          <>
+            <Router>
+              <I18nextProvider i18n={i18n}>
+                <Component />
+              </I18nextProvider>
+            </Router>
+            <ReactQueryDevtools />
+          </>
+        </ApplicationBootstrap>
       </PersistGate>
     </Provider>
   </QueryClientProvider>

src/const/config.js

@@ -2,3 +2,5 @@ export const METHOD = 'rest';
 export const LIMIT = 20;
 export const API_VERSION = 'v3';
 export const MOCK_SERVICE_WORKER = process.env.REACT_APP_MSW;
+
+export const DEFAULT_NETWORK = process.env.DEFAULT_NETWORK || 'devnet';

src/modules/blockchainApplication/explore/hooks/queries/useBlockchainApplicationExplore.js

@@ -1,8 +1,5 @@
 import { BLOCKCHAIN_APPS } from 'src/const/queries';
-import {
-  LIMIT as limit,
-  API_VERSION,
-} from 'src/const/config';
+import { LIMIT as limit, API_VERSION } from 'src/const/config';
 import { useCustomInfiniteQuery } from 'src/modules/common/hooks';
 
 /**
@@ -23,7 +20,11 @@ import { useCustomInfiniteQuery } from 'src/modules/common/hooks';
  * @returns the query object
  */
 
-export const useBlockchainApplicationExplore = ({ config: customConfig = {}, options } = {}) => {
+export const useBlockchainApplicationExplore = ({
+  config: customConfig = {},
+  options,
+  client,
+} = {}) => {
   const config = {
     url: `/api/${API_VERSION}/blockchain/apps`,
     method: 'get',
@@ -35,6 +36,7 @@ export const useBlockchainApplicationExplore = ({ config: customConfig = {}, opt
   return useCustomInfiniteQuery({
     config,
     options,
+    client,
     keys: [BLOCKCHAIN_APPS],
   });
 };

src/modules/blockchainApplication/manage/hooks/index.js

@@ -2,4 +2,5 @@ export * from './useCurrentApplication';
 export * from './useApplicationManagement';
 export * from './usePinBlockchainApplication';
 export * from './useCurrentNode';
+export * from './useGetDefaultApplication';
 export * from './useApplicationExploreAndMetaData'

src/modules/blockchainApplication/manage/hooks/queries/useBlockchainApplicationMeta.js

@@ -36,7 +36,11 @@ export const useBlockchainApplicationMeta = ({
     method: 'get',
     ...customConfig,
     event: 'get.blockchain.apps.meta',
-    params: { limit, ...(customConfig?.params || {}), network },
+    params: {
+      limit,
+      ...(customConfig?.params || {}),
+      network,
+    },
   };
 
   return useCustomInfiniteQuery({

src/modules/blockchainApplication/manage/hooks/useApplicationManagement.js

@@ -1,54 +1,58 @@
 import { useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { addApplication, deleteApplication } from '../store/action';
+import { addApplication, deleteApplication, setApplications as setApps } from '../store/action';
 import { selectApplications } from '../store/selectors';
 import { useCurrentApplication } from './useCurrentApplication';
 import { usePinBlockchainApplication } from './usePinBlockchainApplication';
-import { useBlockchainApplicationMeta } from './queries/useBlockchainApplicationMeta';
+import { useApplicationExploreAndMetaData } from './useApplicationExploreAndMetaData';
 
+// eslint-disable-next-line max-statements
 export function useApplicationManagement() {
   const dispatch = useDispatch();
   const [currentApplication, setCurrentApplication] = useCurrentApplication();
-  const {data: defaultApplications} = useBlockchainApplicationMeta()
+  const { applications: defaultApplications } = useApplicationExploreAndMetaData();
 
   const { checkPinByChainId, pins } = usePinBlockchainApplication();
   const applicationsObject = useSelector(selectApplications);
-  const applications = useMemo(
-    () => {
-      const appsList = Object.values(applicationsObject);
-      return appsList.map((app) => ({
+  const applications = useMemo(() => {
+    const appsList = Object.values(applicationsObject);
+    return appsList
+      .map((app) => ({
         ...app,
         isPinned: checkPinByChainId(app.chainID),
-      })).sort((a) => (a.isPinned ? -1 : 1));
-    },
-    [applicationsObject, pins],
-  );
+      }))
+      .sort((a) => (a.isPinned ? -1 : 1));
+  }, [applicationsObject, pins]);
 
-  const setApplication = useCallback(
-    (application) => {
-      if (application.isDefault) return;
-      dispatch(addApplication(application));
-    },
-    [],
-  );
+  const setApplication = useCallback((application) => {
+    if (application.isDefault) return;
+    dispatch(addApplication(application));
+  }, []);
+
+  const setApplications = (apps) => {
+    dispatch(setApps(apps));
+  };
 
   const getApplicationByChainId = useCallback(
     (chainId) => applications.find((app) => app.chainID === chainId),
-    [applications],
-  );
-
-  const deleteApplicationByChainId = useCallback(
-    (chainId) => {
-      dispatch(deleteApplication(chainId));
-      if (currentApplication.chainID === chainId) {
-        // Set Lisk as default if application in use is being deleted
-        setCurrentApplication(defaultApplications.data[0]);
-      }
-    },
-    [],
+    [applications]
   );
 
+  const deleteApplicationByChainId = useCallback((chainId) => {
+    if (currentApplication.isDefault) return;
+
+    dispatch(deleteApplication(chainId));
+    if (currentApplication.chainID === chainId) {
+      // Set Lisk as default if application in use is being deleted
+      setCurrentApplication(defaultApplications[0]);
+    }
+  }, []);
+
   return {
-    applications, setApplication, getApplicationByChainId, deleteApplicationByChainId,
+    applications,
+    setApplication,
+    setApplications,
+    getApplicationByChainId,
+    deleteApplicationByChainId,
   };
 }

src/modules/blockchainApplication/manage/hooks/useApplicationManagement.test.js

@@ -4,6 +4,7 @@ import flushPromises from '@tests/unit-test-utils/flushPromises';
 import { queryWrapper as wrapper } from 'src/utils/test/queryWrapper';
 import actionTypes from '../store/actionTypes';
 import { useApplicationManagement } from './useApplicationManagement';
+import { useCurrentApplication } from './useCurrentApplication';
 
 jest.mock('./queries/useBlockchainApplicationMeta', () => ({
   useBlockchainApplicationMeta: jest.fn(() => ({
@@ -25,24 +26,22 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn().mockImplementation((fn) => fn(mockState)),
   useDispatch: () => mockDispatch,
 }));
-jest.mock('./useCurrentApplication', () => ({
-  useCurrentApplication: jest.fn(() => (
-    [mockCurrentApplication, mockSetApplication]
-  )),
-}));
+jest.mock('./useCurrentApplication');
 
 describe('useApplicationManagement hook', () => {
   beforeEach(() => {
     mockDispatch.mockClear();
   });
 
+  useCurrentApplication.mockImplementation(() => [mockCurrentApplication, mockSetApplication]);
+
   const { result } = renderHook(() => useApplicationManagement(), { wrapper });
 
   it('setApplication should dispatch an action', () => {
     const { setApplication } = result.current;
     const expectedAction = {
       type: actionTypes.addApplicationByChainId,
-      application: mockApplications[3],
+      app: mockApplications[3],
     };
     act(() => {
       setApplication(mockApplications[3]);
@@ -51,6 +50,19 @@ describe('useApplicationManagement hook', () => {
     expect(mockDispatch).toHaveBeenCalledWith(expectedAction);
   });
 
+  it('setApplications should dispatch an action', () => {
+    const { setApplications } = result.current;
+    const expectedAction = {
+      type: actionTypes.setApplications,
+      apps: mockApplications,
+    };
+    act(() => {
+      setApplications(mockApplications);
+    });
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith(expectedAction);
+  });
+
   it('setApplication should not dispatch an action while adding default application', () => {
     const { setApplication } = result.current;
     act(() => {
@@ -98,4 +110,21 @@ describe('useApplicationManagement hook', () => {
     expect(mockSetApplication).toHaveBeenCalledTimes(1);
     expect(mockSetApplication).toHaveBeenCalledWith(mockApplications[0]);
   });
+
+  it('deleteApplicationByChainId should not dispatch an action if application is default', async () => {
+    jest.clearAllMocks();
+    useCurrentApplication.mockImplementation(() => [mockApplications[1], mockSetApplication]);
+
+    const {
+      result: { current },
+    } = renderHook(() => useApplicationManagement(), { wrapper });
+
+    const { deleteApplicationByChainId } = current;
+    act(() => {
+      deleteApplicationByChainId(mockCurrentApplication.chainID);
+    });
+    await flushPromises();
+    expect(mockDispatch).not.toHaveBeenCalledTimes(1);
+    expect(mockSetApplication).not.toHaveBeenCalledTimes(1);
+  });
 });

src/modules/blockchainApplication/manage/hooks/useCurrentApplication.js

@@ -12,15 +12,13 @@ export function useCurrentApplication() {
 
   const { setCurrentNode } = useCurrentNode();
 
-  const setApplication = useCallback(
-    (application) => {
-      dispatch(setCurrentApplication(application));
-      /* istanbul ignore next */
-      client.create(application.serviceURLs[0]);
-      setCurrentNode(application.serviceURLs[0]);
-    },
-    [],
-  );
+  const setApplication = useCallback((application) => {
+    dispatch(setCurrentApplication(application));
+    // @TODO: probe to verify if serviceURL is reachable
+    /* istanbul ignore next */
+    client.create(application.serviceURLs[0]);
+    setCurrentNode(application.serviceURLs[0]);
+  }, []);
 
   return [currentApplication ?? {}, setApplication];
 }