feat: typeing AppIntlProvider

packages/webapp/src/components/App.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import { defaultTheme, ThemeProvider } from '@xstyled/emotion';
 import { lazy, Suspense } from 'react';
 import { Router, Switch, Route } from 'react-router';
 import { createBrowserHistory } from 'history';
@@ -37,12 +36,6 @@ const PaymentPortalPage = lazy(
   () => import('@/containers/PaymentPortal/PaymentPortalPage'),
 );
 
-
-const theme = {
-  ...defaultTheme,
-  bpPrefix: 'bp4',
-}
-
 /**
  * App inner.
  */
@@ -50,38 +43,33 @@ function AppInsider({ history }) {
   return (
     <div className="App">
       <DashboardThemeProvider>
-        <ThemeProvider theme={theme}>
-          <Suspense fallback={'Loading...'}>
-            <Router history={history}>
-              <Switch>
-                <Route
-                  path={'/one_click_demo'}
-                  children={<OneClickDemoPage />}
-                />
-                <Route path={'/auth/register/verify'}>
-                  <EnsureAuthenticated>
-                    <EnsureUserEmailNotVerified>
-                      <RegisterVerify />
-                    </EnsureUserEmailNotVerified>
-                  </EnsureAuthenticated>
-                </Route>
+        <Suspense fallback={'Loading...'}>
+          <Router history={history}>
+            <Switch>
+              <Route path={'/one_click_demo'} children={<OneClickDemoPage />} />
+              <Route path={'/auth/register/verify'}>
+                <EnsureAuthenticated>
+                  <EnsureUserEmailNotVerified>
+                    <RegisterVerify />
+                  </EnsureUserEmailNotVerified>
+                </EnsureAuthenticated>
+              </Route>
 
-                <Route
-                  path={'/auth/email_confirmation'}
-                  children={<EmailConfirmation />}
-                />
-                <Route path={'/auth'} children={<AuthenticationPage />} />
-                <Route
-                  path={'/payment/:linkId'}
-                  children={<PaymentPortalPage />}
-                />
-                <Route path={'/'} children={<DashboardPrivatePages />} />
-              </Switch>
-            </Router>
-          </Suspense>
+              <Route
+                path={'/auth/email_confirmation'}
+                children={<EmailConfirmation />}
+              />
+              <Route path={'/auth'} children={<AuthenticationPage />} />
+              <Route
+                path={'/payment/:linkId'}
+                children={<PaymentPortalPage />}
+              />
+              <Route path={'/'} children={<DashboardPrivatePages />} />
+            </Switch>
+          </Router>
+        </Suspense>
 
-          <GlobalErrors />
-        </ThemeProvider>
+        <GlobalErrors />
       </DashboardThemeProvider>
     </div>
   );

packages/webapp/src/components/AppIntlProvider.tsx

@@ -1,12 +1,31 @@
 // @ts-nocheck
 import React, { createContext } from 'react';
 
-const AppIntlContext = createContext();
+interface AppIntlContextValue {
+  currentLocale: string;
+  direction: 'rtl' | 'ltr';
+  isRTL: boolean;
+  isLTR: boolean;
+}
+
+const AppIntlContext = createContext<AppIntlContextValue>(
+  {} as AppIntlContextValue,
+);
+
+interface AppIntlProviderProps {
+  currentLocale: string;
+  isRTL: boolean;
+  children: React.ReactNode;
+}
 
 /**
  * Application intl provider.
  */
-function AppIntlProvider({ currentLocale, isRTL, children }) {
+function AppIntlProvider({
+  currentLocale,
+  isRTL,
+  children,
+}: AppIntlProviderProps) {
   const provider = {
     currentLocale,
     isRTL,
@@ -21,6 +40,7 @@ function AppIntlProvider({ currentLocale, isRTL, children }) {
   );
 }
 
-const useAppIntlContext = () => React.useContext(AppIntlContext);
+const useAppIntlContext = () =>
+  React.useContext<AppIntlContextValue>(AppIntlContext);
 
 export { AppIntlProvider, useAppIntlContext };

packages/webapp/src/components/Dashboard/DashboardThemeProvider.tsx

@@ -1,9 +1,20 @@
-// @ts-nocheck
 import React from 'react';
-import { ThemeProvider, StyleSheetManager } from 'styled-components';
+import {
+  ThemeProvider as StyleComponentsThemeProvider,
+  StyleSheetManager,
+} from 'styled-components';
 import rtlcss from 'stylis-rtlcss';
+import {
+  defaultTheme,
+  ThemeProvider as XStyledEmotionThemeProvider,
+} from '@xstyled/emotion';
 import { useAppIntlContext } from '../AppIntlProvider';
 
+const theme = {
+  ...defaultTheme,
+  bpPrefix: 'bp4',
+};
+
 interface DashboardThemeProviderProps {
   children: React.ReactNode;
 }
@@ -17,7 +28,11 @@ export function DashboardThemeProvider({
     <StyleSheetManager
       {...(direction === 'rtl' ? { stylisPlugins: [rtlcss] } : {})}
     >
-      <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>
+      <StyleComponentsThemeProvider theme={{ dir: direction }}>
+        <XStyledEmotionThemeProvider theme={theme}>
+          {children}
+        </XStyledEmotionThemeProvider>
+      </StyleComponentsThemeProvider>
     </StyleSheetManager>
   );
 }