Merge branch 'develop' into 639-improve-unlock-wallet-user-experience

make-software · Dec 19, 2023 · b07f80e · b07f80e
2 parents 6228c4b + 8a5f8fb
commit b07f80e
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 29 deletions.
diff --git a/src/apps/connect-to-app/index.tsx b/src/apps/connect-to-app/index.tsx
@@ -20,6 +20,7 @@ import { selectThemeModeSetting } from '@background/redux/settings/selectors';
 import { useSystemThemeDetector } from '@src/hooks';
 import { themeModeSettingChanged } from '@background/redux/settings/actions';
 import { ThemeMode } from '@background/redux/settings/types';
+import { isSafariBuild } from '@src/utils';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
@@ -40,8 +41,10 @@ const Tree = () => {
   const themeMode = selectThemeModeSetting(store.getState());
 
   // Set theme mode to system if it is no present in the store
-  if (themeMode === undefined) {
+  if (themeMode === undefined && !isSafariBuild) {
     dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM));
+  } else if (themeMode === undefined && isSafariBuild) {
+    dispatchToMainStore(themeModeSettingChanged(ThemeMode.LIGHT));
   }
 
   const isDarkMode =

diff --git a/src/apps/import-account-with-file/index.tsx b/src/apps/import-account-with-file/index.tsx
@@ -20,6 +20,7 @@ import { selectThemeModeSetting } from '@background/redux/settings/selectors';
 import { useSystemThemeDetector } from '@src/hooks';
 import { themeModeSettingChanged } from '@background/redux/settings/actions';
 import { ThemeMode } from '@background/redux/settings/types';
+import { isSafariBuild } from '@src/utils';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
@@ -40,8 +41,10 @@ const Tree = () => {
   const themeMode = selectThemeModeSetting(store.getState());
 
   // Set theme mode to system if it is no present in the store
-  if (themeMode === undefined) {
+  if (themeMode === undefined && !isSafariBuild) {
     dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM));
+  } else if (themeMode === undefined && isSafariBuild) {
+    dispatchToMainStore(themeModeSettingChanged(ThemeMode.LIGHT));
   }
 
   const isDarkMode =

diff --git a/src/apps/popup/index.tsx b/src/apps/popup/index.tsx
@@ -16,6 +16,7 @@ import { selectThemeModeSetting } from '@background/redux/settings/selectors';
 import { ThemeMode } from '@background/redux/settings/types';
 import { useSystemThemeDetector } from '@src/hooks';
 import { themeModeSettingChanged } from '@background/redux/settings/actions';
+import { isSafariBuild } from '@src/utils';
 
 import { AppRouter } from './app-router';
 
@@ -41,8 +42,10 @@ const Tree = () => {
   const themeMode = selectThemeModeSetting(store.getState());
 
   // Set theme mode to system if it is no present in the store
-  if (themeMode === undefined) {
+  if (themeMode === undefined && !isSafariBuild) {
     dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM));
+  } else if (themeMode === undefined && isSafariBuild) {
+    dispatchToMainStore(themeModeSettingChanged(ThemeMode.LIGHT));
   }
 
   const isDarkMode =

diff --git a/src/apps/popup/pages/navigation-menu/index.tsx b/src/apps/popup/pages/navigation-menu/index.tsx
@@ -148,7 +148,7 @@ export function NavigationMenuPageContent() {
         items: [
           {
             id: 1,
-            title: t('Contacts list'),
+            title: t('Contacts'),
             iconPath: 'assets/icons/team.svg',
             currentValue: countOfContacts,
             disabled: false,

diff --git a/src/apps/signature-request/index.tsx b/src/apps/signature-request/index.tsx
@@ -21,6 +21,7 @@ import { selectThemeModeSetting } from '@background/redux/settings/selectors';
 import { useSystemThemeDetector } from '@src/hooks';
 import { themeModeSettingChanged } from '@background/redux/settings/actions';
 import { ThemeMode } from '@background/redux/settings/types';
+import { isSafariBuild } from '@src/utils';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
@@ -41,8 +42,10 @@ const Tree = () => {
   const themeMode = selectThemeModeSetting(store.getState());
 
   // Set theme mode to system if it is no present in the store
-  if (themeMode === undefined) {
+  if (themeMode === undefined && !isSafariBuild) {
     dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM));
+  } else if (themeMode === undefined && isSafariBuild) {
+    dispatchToMainStore(themeModeSettingChanged(ThemeMode.LIGHT));
   }
 
   const isDarkMode =

diff --git a/src/background/redux/settings/reducer.ts b/src/background/redux/settings/reducer.ts
@@ -2,6 +2,7 @@ import { createReducer } from 'typesafe-actions';
 
 import { TimeoutDurationSetting } from '@popup/constants';
 import { NetworkSetting } from '@src/constants';
+import { isSafariBuild } from '@src/utils';
 
 import {
   activeNetworkSettingChanged,
@@ -14,8 +15,8 @@ import { SettingsState, ThemeMode } from './types';
 const initialState: SettingsState = {
   activeNetwork: NetworkSetting.Mainnet,
   activeTimeoutDuration: TimeoutDurationSetting['5 min'],
-  isDarkMode: false,
-  themeMode: ThemeMode.SYSTEM
+  isDarkMode: false, // Deprecated
+  themeMode: isSafariBuild ? ThemeMode.LIGHT : ThemeMode.SYSTEM
 };
 
 export const reducer = createReducer(initialState)

diff --git a/src/libs/ui/components/theme-switcher/theme-switcher.tsx b/src/libs/ui/components/theme-switcher/theme-switcher.tsx
@@ -17,6 +17,7 @@ import { selectThemeModeSetting } from '@background/redux/settings/selectors';
 import { dispatchToMainStore } from '@background/redux/utils';
 import { themeModeSettingChanged } from '@background/redux/settings/actions';
 import { Button, List, SvgIcon, Typography } from '@libs/ui';
+import { isSafariBuild } from '@src/utils';
 
 const Container = styled(FlexColumn)`
   padding-top: 24px;
@@ -42,26 +43,42 @@ export const ThemeSwitcher = ({ closeSwitcher }: ThemeSwitcherProps) => {
   const themeMode = useSelector(selectThemeModeSetting);
 
   const listOfThemes = useMemo(
-    () => [
-      {
-        id: 1,
-        name: ThemeMode.SYSTEM,
-        icon: 'assets/icons/theme.svg',
-        isActive: themeMode === ThemeMode.SYSTEM
-      },
-      {
-        id: 2,
-        name: ThemeMode.DARK,
-        icon: 'assets/icons/moon.svg',
-        isActive: themeMode === ThemeMode.DARK
-      },
-      {
-        id: 3,
-        name: ThemeMode.LIGHT,
-        icon: 'assets/icons/sun.svg',
-        isActive: themeMode === ThemeMode.LIGHT
-      }
-    ],
+    () =>
+      isSafariBuild
+        ? [
+            {
+              id: 1,
+              name: ThemeMode.DARK,
+              icon: 'assets/icons/moon.svg',
+              isActive: themeMode === ThemeMode.DARK
+            },
+            {
+              id: 2,
+              name: ThemeMode.LIGHT,
+              icon: 'assets/icons/sun.svg',
+              isActive: themeMode === ThemeMode.LIGHT
+            }
+          ]
+        : [
+            {
+              id: 1,
+              name: ThemeMode.SYSTEM,
+              icon: 'assets/icons/theme.svg',
+              isActive: themeMode === ThemeMode.SYSTEM
+            },
+            {
+              id: 2,
+              name: ThemeMode.DARK,
+              icon: 'assets/icons/moon.svg',
+              isActive: themeMode === ThemeMode.DARK
+            },
+            {
+              id: 3,
+              name: ThemeMode.LIGHT,
+              icon: 'assets/icons/sun.svg',
+              isActive: themeMode === ThemeMode.LIGHT
+            }
+          ],
     [themeMode]
   );
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -180,8 +180,8 @@ const options = {
           from: isChrome
             ? ManifestPath.v3
             : isSafari
-            ? ManifestPath.v2_Safari
-            : ManifestPath.v2,
+              ? ManifestPath.v2_Safari
+              : ManifestPath.v2,
           to: path.join(__dirname, buildDir, 'manifest.json'),
           force: true,
           transform: function (content) {