yauheni/74383/ converting app.jsx in account to functional component (#…

…6282)

* yauheni/74383/ converting app in account to functional component

* converted to tsx with rootstore

* added todo for future types implementation

Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”>
Co-authored-by: Matin shafiei <matin@deriv.com>
Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

packages/account/build/webpack.config.js

@@ -8,7 +8,7 @@ module.exports = function (env) {
         context: path.resolve(__dirname, '../src'),
         devtool: IS_RELEASE ? undefined : 'eval-cheap-module-source-map',
         entry: {
-            account: path.resolve(__dirname, '../src', 'index.js'),
+            account: path.resolve(__dirname, '../src', 'index.tsx'),
             'accept-risk-config': 'Configs/accept-risk-config',
             'account-limits': 'Components/account-limits',
             'address-details': 'Components/address-details',

packages/account/src/App.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Routes from 'Containers/routes.jsx';
+import ResetTradingPassword from 'Containers/reset-trading-password.jsx';
+import { MobxContentProvider } from 'Stores/connect';
+import initStore from 'Stores/init-store';
+import { TCoreStore } from 'Stores/index';
+
+// TODO: add correct types for stores and WS after implementing them
+type TAppProps = {
+    passthrough: {
+        root_store: TCoreStore;
+        WS: Record<string, any>;
+    };
+};
+
+const App = ({ passthrough }: TAppProps) => {
+    const { root_store, WS } = passthrough;
+    initStore(root_store, WS);
+
+    return (
+        <MobxContentProvider store={root_store}>
+            <Routes />
+            <ResetTradingPassword />
+        </MobxContentProvider>
+    );
+};
+
+export default App;

packages/account/src/Stores/index.ts

@@ -0,0 +1,26 @@
+export type TCoreStore = {
+    client: Record<string, any>;
+    common: Record<string, any>;
+    ui: Record<string, any>;
+    gtm: Record<string, any>;
+    rudderstack: Record<string, any>;
+    pushwoosh: Record<string, any>;
+};
+
+export default class RootStore {
+    public client: Record<string, any>;
+    public common: Record<string, any>;
+    public ui: Record<string, any>;
+    public gtm: Record<string, any>;
+    public rudderstack: Record<string, any>;
+    public pushwoosh: Record<string, any>;
+
+    constructor(core_store: TCoreStore) {
+        this.client = core_store.client;
+        this.common = core_store.common;
+        this.ui = core_store.ui;
+        this.gtm = core_store.gtm;
+        this.rudderstack = core_store.rudderstack;
+        this.pushwoosh = core_store.pushwoosh;
+    }
+}

packages/account/src/index.js → packages/account/src/index.tsx

@@ -3,7 +3,7 @@ import { makeLazyLoader, moduleLoader } from '@deriv/shared';
 import { Loading } from '@deriv/components';
 
 const App = makeLazyLoader(
-    () => moduleLoader(() => import(/* webpackChunkName: "account-app", webpackPreload: true */ './App.jsx')),
+    () => moduleLoader(() => import(/* webpackChunkName: "account-app", webpackPreload: true */ './App')),
     () => <Loading />
 )();