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,14 +43,10 @@ function AppInsider({ history }) {
   return (
     <div className="App">
       <DashboardThemeProvider>
-        <ThemeProvider theme={theme}>
         <Suspense fallback={'Loading...'}>
           <Router history={history}>
             <Switch>
-                <Route
+              <Route path={'/one_click_demo'} children={<OneClickDemoPage />} />
-                  path={'/one_click_demo'}
-                  children={<OneClickDemoPage />}
-                />
               <Route path={'/auth/register/verify'}>
                 <EnsureAuthenticated>
                   <EnsureUserEmailNotVerified>
@@ -81,7 +70,6 @@ function AppInsider({ history }) {
         </Suspense>
 
         <GlobalErrors />
-        </ThemeProvider>
       </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>
   );
 }