Merge branch 'develop' into WALLET-236-as-a-casper-wallet-i-should-me…

…rge-recent-recipients-with-contacts-list

src/apps/connect-to-app/index.tsx

@@ -11,15 +11,21 @@ import { ErrorBoundary } from '@src/libs/layout/error';
 
 import {
   createMainStoreReplica,
+  dispatchToMainStore,
   PopupState
 } from '@src/background/redux/utils';
 import { connectWindowInit } from '@src/background/redux/windowManagement/actions';
 import { useSubscribeToRedux } from '@src/hooks/use-subscribe-to-redux';
-import { selectDarkModeSetting } from '@background/redux/settings/selectors';
+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';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
 
+  const isSystemDarkTheme = useSystemThemeDetector();
+
   useSubscribeToRedux({
     windowInitAction: connectWindowInit,
     setPopupState: setState
@@ -31,7 +37,17 @@ const Tree = () => {
 
   const store = createMainStoreReplica(state);
 
-  const isDarkMode = selectDarkModeSetting(store.getState());
+  const themeMode = selectThemeModeSetting(store.getState());
+
+  // Set theme mode to system if it is no present in the store
+  if (themeMode === undefined) {
+    dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM));
+  }
+
+  const isDarkMode =
+    themeMode === ThemeMode.SYSTEM
+      ? isSystemDarkTheme
+      : themeMode === ThemeMode.DARK;
 
   return (
     <Suspense fallback={null}>

src/apps/import-account-with-file/index.tsx

@@ -8,18 +8,24 @@ import { Provider as ReduxProvider } from 'react-redux';
 import { importWindowInit } from '@src/background/redux/windowManagement/actions';
 import {
   createMainStoreReplica,
+  dispatchToMainStore,
   PopupState
 } from '@src/background/redux/utils';
 import { darkTheme, GlobalStyle, lightTheme } from '@libs/ui';
 import { ErrorBoundary } from '@src/libs/layout/error';
 
 import { AppRouter } from './app-router';
 import { useSubscribeToRedux } from '@src/hooks/use-subscribe-to-redux';
-import { selectDarkModeSetting } from '@background/redux/settings/selectors';
+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';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
 
+  const isDarkTheme = useSystemThemeDetector();
+
   useSubscribeToRedux({
     windowInitAction: importWindowInit,
     setPopupState: setState
@@ -31,7 +37,15 @@ const Tree = () => {
 
   const store = createMainStoreReplica(state);
 
-  const isDarkMode = selectDarkModeSetting(store.getState());
+  const themeMode = selectThemeModeSetting(store.getState());
+
+  // Set theme mode to system if it is no present in the store
+  if (themeMode === undefined) {
+    dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM));
+  }
+
+  const isDarkMode =
+    themeMode === ThemeMode.SYSTEM ? isDarkTheme : themeMode === ThemeMode.DARK;
 
   return (
     <Suspense fallback={null}>

src/apps/popup/index.tsx

@@ -6,10 +6,16 @@ import { ThemeProvider } from 'styled-components';
 import { darkTheme, GlobalStyle, lightTheme } from '@libs/ui';
 import { ErrorBoundary } from '@src/libs/layout/error';
 import { useSubscribeToRedux } from '@src/hooks/use-subscribe-to-redux';
-
-import { createMainStoreReplica, PopupState } from '@background/redux/utils';
+import {
+  createMainStoreReplica,
+  dispatchToMainStore,
+  PopupState
+} from '@background/redux/utils';
 import { popupWindowInit } from '@background/redux/windowManagement/actions';
-import { selectDarkModeSetting } from '@background/redux/settings/selectors';
+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 { AppRouter } from './app-router';
 
@@ -19,6 +25,8 @@ import 'react-loading-skeleton/dist/skeleton.css';
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
 
+  const isSystemDarkTheme = useSystemThemeDetector();
+
   useSubscribeToRedux({
     windowInitAction: popupWindowInit,
     setPopupState: setState
@@ -30,7 +38,17 @@ const Tree = () => {
 
   const store = createMainStoreReplica(state);
 
-  const isDarkMode = selectDarkModeSetting(store.getState());
+  const themeMode = selectThemeModeSetting(store.getState());
+
+  // Set theme mode to system if it is no present in the store
+  if (themeMode === undefined) {
+    dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM));
+  }
+
+  const isDarkMode =
+    themeMode === ThemeMode.SYSTEM
+      ? isSystemDarkTheme
+      : themeMode === ThemeMode.DARK;
 
   return (
     <Suspense fallback={null}>

src/apps/popup/pages/connect-another-account/index.tsx

@@ -124,7 +124,7 @@ export function ConnectAnotherAccountPageContent() {
         renderRow={(account, index) => (
           <ListItemContainer key={account.name}>
             <SvgIcon
-              src="assets/icons/checkbox-checked.svg"
+              src="assets/icons/radio-button-on.svg"
               color="contentPositive"
             />
 

src/apps/popup/pages/navigation-menu/index.tsx

@@ -15,22 +15,29 @@ import {
   SpaceBetweenFlexRow,
   SpacingSize
 } from '@src/libs/layout';
-import { SvgIcon, Typography, List, Link, Toggle } from '@src/libs/ui';
+import {
+  SvgIcon,
+  Typography,
+  List,
+  Link,
+  Modal,
+  ThemeSwitcher
+} from '@src/libs/ui';
 
 import {
   selectCountOfConnectedSites,
   selectVaultHasImportedAccount
 } from '@src/background/redux/vault/selectors';
 import {
-  selectDarkModeSetting,
+  selectThemeModeSetting,
   selectTimeoutDurationSetting
 } from '@src/background/redux/settings/selectors';
 import { dispatchToMainStore } from '@src/background/redux/utils';
 import { lockVault } from '@src/background/redux/sagas/actions';
 import { TimeoutDurationSetting } from '@popup/constants';
 import { isSafariBuild } from '@src/utils';
-import { darkModeSettingChanged } from '@background/redux/settings/actions';
 import { selectCountOfContacts } from '@background/redux/contacts/selectors';
+import { ThemeMode } from '@background/redux/settings/types';
 
 interface ListItemClickableContainerProps {
   disabled: boolean;
@@ -64,6 +71,7 @@ interface MenuItem {
   handleOnClick?: () => void;
   hide?: boolean;
   toggleButton?: boolean;
+  isModalWindow?: boolean;
 }
 
 interface MenuGroup {
@@ -78,8 +86,8 @@ export function NavigationMenuPageContent() {
   const timeoutDurationSetting = useSelector(selectTimeoutDurationSetting);
   const countOfConnectedSites = useSelector(selectCountOfConnectedSites);
   const vaultHasImportedAccount = useSelector(selectVaultHasImportedAccount);
-  const isDarkMode = useSelector(selectDarkModeSetting);
   const countOfContacts = useSelector(selectCountOfContacts);
+  const themeMode = useSelector(selectThemeModeSetting);
 
   const { openWindow } = useWindowManager();
   const { closeNavigationMenu } = useNavigationMenu();
@@ -172,12 +180,16 @@ export function NavigationMenuPageContent() {
           },
           {
             id: 4,
-            title: t('Dark mode'),
-            iconPath: isDarkMode
-              ? 'assets/icons/sun.svg'
-              : 'assets/icons/moon.svg',
-            toggleButton: true,
-            disabled: false
+            title: t('Theme'),
+            iconPath:
+              themeMode === ThemeMode.SYSTEM
+                ? 'assets/icons/theme.svg'
+                : themeMode === ThemeMode.DARK
+                  ? 'assets/icons/moon.svg'
+                  : 'assets/icons/sun.svg',
+            currentValue: themeMode,
+            disabled: false,
+            isModalWindow: true
           }
         ]
       },
@@ -256,14 +268,53 @@ export function NavigationMenuPageContent() {
       countOfContacts,
       countOfConnectedSites,
       timeoutDurationSetting,
-      isDarkMode,
+      themeMode,
       vaultHasImportedAccount,
       closeNavigationMenu,
       navigate,
       openWindow
     ]
   );
 
+  const listItem = (groupItem: MenuItem, groupLabel: string) => (
+    <ListItemClickableContainer
+      disabled={groupItem.disabled}
+      key={groupLabel + groupItem.id}
+      as={groupItem.href ? Link : 'div'}
+      href={groupItem.href ? groupItem.href : undefined}
+      target={groupItem.href ? '_blank' : undefined}
+      onClick={groupItem.disabled ? undefined : groupItem.handleOnClick}
+      hide={groupItem.hide}
+    >
+      <SvgIcon
+        src={groupItem.iconPath}
+        color={groupItem.disabled ? 'contentSecondary' : 'contentAction'}
+      />
+      <SpaceBetweenContainer>
+        {groupItem.description ? (
+          <FlexColumn>
+            <Typography
+              type="body"
+              color={groupItem.disabled ? 'contentSecondary' : 'contentPrimary'}
+            >
+              {groupItem.title}
+            </Typography>
+            <Typography type="listSubtext" color="contentSecondary">
+              {groupItem.description}
+            </Typography>
+          </FlexColumn>
+        ) : (
+          <Typography type="body">{groupItem.title}</Typography>
+        )}
+        {groupItem.currentValue != null && (
+          <Typography type="bodySemiBold" color="contentAction">
+            {groupItem.currentValue}
+          </Typography>
+        )}
+      </SpaceBetweenContainer>
+    </ListItemClickableContainer>
+  );
+
   return (
     <ContentContainer>
       {menuGroups.map(
@@ -275,60 +326,21 @@ export function NavigationMenuPageContent() {
             marginLeftForItemSeparatorLine={60}
             headerLabelTop={SpacingSize.Large}
             contentTop={index === 0 ? SpacingSize.Medium : SpacingSize.Small}
-            renderRow={groupItem => (
-              <ListItemClickableContainer
-                disabled={groupItem.disabled}
-                key={groupLabel + groupItem.id}
-                as={groupItem.href ? Link : 'div'}
-                href={groupItem.href ? groupItem.href : undefined}
-                target={groupItem.href ? '_blank' : undefined}
-                onClick={
-                  groupItem.disabled ? undefined : groupItem.handleOnClick
-                }
-                hide={groupItem.hide}
-              >
-                <SvgIcon
-                  src={groupItem.iconPath}
-                  color={
-                    groupItem.disabled ? 'contentSecondary' : 'contentAction'
-                  }
-                />
-                <SpaceBetweenContainer>
-                  {groupItem.description ? (
-                    <FlexColumn>
-                      <Typography
-                        type="body"
-                        color={
-                          groupItem.disabled
-                            ? 'contentSecondary'
-                            : 'contentPrimary'
-                        }
-                      >
-                        {groupItem.title}
-                      </Typography>
-                      <Typography type="listSubtext" color="contentSecondary">
-                        {groupItem.description}
-                      </Typography>
-                    </FlexColumn>
-                  ) : (
-                    <Typography type="body">{groupItem.title}</Typography>
-                  )}
-                  {groupItem.currentValue != null && (
-                    <Typography type="bodySemiBold" color="contentAction">
-                      {groupItem.currentValue}
-                    </Typography>
-                  )}
-                  {groupItem.toggleButton && (
-                    <Toggle
-                      toggled={isDarkMode}
-                      onClick={() =>
-                        dispatchToMainStore(darkModeSettingChanged())
-                      }
-                    />
-                  )}
-                </SpaceBetweenContainer>
-              </ListItemClickableContainer>
-            )}
+            renderRow={groupItem => {
+              if (groupItem.isModalWindow) {
+                return (
+                  <Modal
+                    renderContent={({ closeModal }) => (
+                      <ThemeSwitcher closeSwitcher={closeModal} />
+                    )}
+                    placement="fullBottom"
+                    children={() => listItem(groupItem, groupLabel)}
+                  />
+                );
+              }
+
+              return listItem(groupItem, groupLabel);
+            }}
           />
         )
       )}

src/apps/signature-request/index.tsx

@@ -8,16 +8,25 @@ import { Provider as ReduxProvider } from 'react-redux/es/exports';
 import { darkTheme, GlobalStyle, lightTheme } from '@libs/ui';
 
 import { signWindowInit } from '@background/redux/windowManagement/actions';
-import { createMainStoreReplica, PopupState } from '@background/redux/utils';
+import {
+  createMainStoreReplica,
+  dispatchToMainStore,
+  PopupState
+} from '@background/redux/utils';
 import { ErrorBoundary } from '@src/libs/layout/error';
 
 import { AppRouter } from './app-router';
 import { useSubscribeToRedux } from '@src/hooks/use-subscribe-to-redux';
-import { selectDarkModeSetting } from '@background/redux/settings/selectors';
+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';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
 
+  const isSystemDarkTheme = useSystemThemeDetector();
+
   useSubscribeToRedux({
     windowInitAction: signWindowInit,
     setPopupState: setState
@@ -29,7 +38,17 @@ const Tree = () => {
 
   const store = createMainStoreReplica(state);
 
-  const isDarkMode = selectDarkModeSetting(store.getState());
+  const themeMode = selectThemeModeSetting(store.getState());
+
+  // Set theme mode to system if it is no present in the store
+  if (themeMode === undefined) {
+    dispatchToMainStore(themeModeSettingChanged(ThemeMode.SYSTEM));
+  }
+
+  const isDarkMode =
+    themeMode === ThemeMode.SYSTEM
+      ? isSystemDarkTheme
+      : themeMode === ThemeMode.DARK;
 
   return (
     <Suspense fallback={null}>