applications/wallet/src/app/App.tsx

   1 import type { FunctionComponent } from 'react';
   2 import { useState } from 'react';
   3 import { Router } from 'react-router-dom';
   4
   5 import {
   6     ArcElement,
   7     CategoryScale,
   8     Chart as ChartJS,
   9     Filler,
  10     Legend,
  11     LineElement,
  12     LinearScale,
  13     PointElement,
  14     Title,
  15     Tooltip,
  16 } from 'chart.js';
  17 import { c } from 'ttag';
  18
  19 import {
  20     ApiProvider,
  21     AuthenticationProvider,
  22     DelinquentContainer,
  23     ErrorBoundary,
  24     EventManagerProvider,
  25     LoaderPage,
  26     ProtonApp,
  27     StandardErrorPage,
  28     StandardLoadErrorPage,
  29     StandardPrivateApp,
  30     SubscriptionModalProvider,
  31     useNotifications,
  32 } from '@proton/components';
  33 import useEffectOnce from '@proton/hooks/useEffectOnce';
  34 import { ProtonStoreProvider } from '@proton/redux-shared-store';
  35 import { WALLET_APP_NAME } from '@proton/shared/lib/constants';
  36 import { getNonEmptyErrorMessage } from '@proton/shared/lib/helpers/error';
  37 import { DRAWER_VISIBILITY } from '@proton/shared/lib/interfaces';
  38 import { FlagProvider } from '@proton/unleash';
  39 import ExtendedApiProvider from '@proton/wallet/contexts/ExtendedApiContext/ExtendedApiProvider';
  40 import type { WalletStore } from '@proton/wallet/store';
  41 import { extraThunkArguments } from '@proton/wallet/store/thunk';
  42 import { isWasmSupported } from '@proton/wallet/utils/wasm';
  43
  44 import { type bootstrapApp } from './bootstrap';
  45 import * as config from './config';
  46
  47 ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, Title, Filler);
  48
  49 const lazyBootstrapApp = (...args: Parameters<typeof bootstrapApp>) =>
  50     import(/* webpackChunkName: "bootstrap" */ './bootstrap').then((result) => result.bootstrapApp(...args));
  51
  52 const defaultState: {
  53     store?: WalletStore;
  54     MainContainer?: FunctionComponent;
  55     error?: { message: string } | undefined;
  56     showDrawerSidebar?: boolean;
  57 } = {
  58     error: undefined,
  59     showDrawerSidebar: false,
  60 };
  61
  62 const AppInner = () => {
  63     const [state, setState] = useState(defaultState);
  64     const notificationsManager = useNotifications();
  65
  66     useEffectOnce(() => {
  67         void (async () => {
  68             try {
  69                 const { scopes, userSettings, MainContainer, store } = await lazyBootstrapApp({
  70                     config,
  71                     notificationsManager,
  72                 });
  73
  74                 setState({
  75                     store,
  76                     MainContainer: scopes.delinquent ? DelinquentContainer : MainContainer,
  77                     showDrawerSidebar: userSettings.HideSidePanel === DRAWER_VISIBILITY.SHOW,
  78                 });
  79             } catch (error: any) {
  80                 setState({
  81                     error: {
  82                         message: getNonEmptyErrorMessage(error),
  83                     },
  84                 });
  85             }
  86         })();
  87     });
  88
  89     if (state.error) {
  90         return <StandardLoadErrorPage errorMessage={state.error.message} />;
  91     }
  92
  93     const loader = <LoaderPage />;
  94     if (!state.MainContainer || !state.store) {
  95         return loader;
  96     }
  97
  98     return (
  99         <ProtonStoreProvider store={state.store}>
 100             <AuthenticationProvider store={extraThunkArguments.authentication}>
 101                 <FlagProvider unleashClient={extraThunkArguments.unleashClient} startClient={false}>
 102                     <Router history={extraThunkArguments.history}>
 103                         <EventManagerProvider eventManager={extraThunkArguments.eventManager}>
 104                             <ApiProvider api={extraThunkArguments.api}>
 105                                 <ExtendedApiProvider walletApi={extraThunkArguments.walletApi}>
 106                                     <ErrorBoundary big component={<StandardErrorPage big />}>
 107                                         <StandardPrivateApp
 108                                             hasReadableMemberKeyActivation
 109                                             hasMemberKeyMigration
 110                                             hasPrivateMemberKeyGeneration
 111                                         >
 112                                             <SubscriptionModalProvider app={config.APP_NAME}>
 113                                                 <state.MainContainer />
 114                                             </SubscriptionModalProvider>
 115                                         </StandardPrivateApp>
 116                                     </ErrorBoundary>
 117                                 </ExtendedApiProvider>
 118                             </ApiProvider>
 119                         </EventManagerProvider>
 120                     </Router>
 121                 </FlagProvider>
 122             </AuthenticationProvider>
 123         </ProtonStoreProvider>
 124     );
 125 };
 126
 127 const App = () => {
 128     if (!isWasmSupported()) {
 129         return (
 130             <div className="unsupported-wasm-container">
 131                 <span>{c('Wallet')
 132                     .t`Your browser or device software does not support ${WALLET_APP_NAME}. Please update your browser or device. Alternatively, you can use one of our mobile apps.`}</span>
 133             </div>
 134         );
 135     }
 136
 137     return (
 138         <ProtonApp config={config}>
 139             <AppInner />
 140         </ProtonApp>
 141     );
 142 };
 143
 144 export default App;