From 64ca34e4cca3cd3da75e9f9721a7cbacda3a2784 Mon Sep 17 00:00:00 2001
From: vinu-deriv <vinu@deriv.com>
Date: Thu, 27 Oct 2022 13:04:25 +0400
Subject: [PATCH] feat: added @deriv/ui in cashier

---
 packages/cashier/package.json                     |  1 +
 packages/cashier/src/app.jsx                      |  9 ++++++---
 packages/cashier/src/containers/routes/routes.tsx | 13 +++++++++++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/cashier/package.json b/packages/cashier/package.json
index db2d89dade19..fdfe3ce11fb9 100644
--- a/packages/cashier/package.json
+++ b/packages/cashier/package.json
@@ -42,6 +42,7 @@
         "@deriv/p2p": "^0.7.3",
         "@deriv/shared": "^1.0.0",
         "@deriv/translations": "^1.0.0",
+        "@deriv/ui": "^0.0.15",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
         "loadjs": "^4.2.0",
diff --git a/packages/cashier/src/app.jsx b/packages/cashier/src/app.jsx
index 940cf8bd14ac..5ae2caa7957e 100644
--- a/packages/cashier/src/app.jsx
+++ b/packages/cashier/src/app.jsx
@@ -4,6 +4,7 @@ import { init } from 'Utils/server_time';
 import Routes from 'Containers/routes';
 import { MobxContentProvider } from 'Stores/connect';
 import { StoreProvider } from './hooks';
+import { ThemeProvider } from '@deriv/ui';
 
 const App = ({ passthrough: { WS, root_store } }) => {
     React.useEffect(() => {
@@ -14,9 +15,11 @@ const App = ({ passthrough: { WS, root_store } }) => {
 
     return (
         <MobxContentProvider store={root_store}>
-            <StoreProvider store={root_store}>
-                <Routes />
-            </StoreProvider>
+            <ThemeProvider>
+                <StoreProvider store={root_store}>
+                    <Routes />
+                </StoreProvider>
+            </ThemeProvider>
         </MobxContentProvider>
     );
 };
diff --git a/packages/cashier/src/containers/routes/routes.tsx b/packages/cashier/src/containers/routes/routes.tsx
index ef00cade523d..3b745f2454a8 100644
--- a/packages/cashier/src/containers/routes/routes.tsx
+++ b/packages/cashier/src/containers/routes/routes.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
+import { useTheme } from '@deriv/ui';
 import { connect } from 'Stores/connect';
 import { TClientStore, TCommonStore, TRootStore } from 'Types';
 import BinaryRoutes from './binary-routes';
@@ -10,9 +11,16 @@ type TRoutesProps = RouteComponentProps & {
     has_error: TCommonStore['has_error'];
     is_logged_in: TClientStore['is_logged_in'];
     is_logging_in: TClientStore['is_logging_in'];
+    is_dark_mode_on: boolean;
 };
 
-const Routes = ({ error, has_error, is_logged_in, is_logging_in }: TRoutesProps) => {
+const Routes = ({ error, has_error, is_logged_in, is_logging_in, is_dark_mode_on }: TRoutesProps) => {
+    const { setColorMode } = useTheme();
+
+    React.useEffect(() => {
+        setColorMode(is_dark_mode_on ? 'dark' : 'light');
+    }, [is_dark_mode_on]);
+
     if (has_error) {
         return <ErrorComponent {...error} />;
     }
@@ -22,9 +30,10 @@ const Routes = ({ error, has_error, is_logged_in, is_logging_in }: TRoutesProps)
 
 // need to wrap withRouter around connect
 // to prevent updates on <BinaryRoutes /> from being blocked
-export default connect(({ client, common }: TRootStore) => ({
+export default connect(({ client, common, ui }: TRootStore) => ({
     is_logged_in: client.is_logged_in,
     is_logging_in: client.is_logging_in,
     error: common.error,
     has_error: common.has_error,
+    is_dark_mode_on: ui.is_dark_mode_on,
 }))(withRouter(Routes));