Skip to content

Commit 3672fb2

Browse files
Lucasrenanvalentin
Lucas
and
renanvalentin
committed
[DDW-787] Discreet mode - Implement the Settings option (#2740)
* [DDW-785] Discreet mode - Create the Discreet Mode variables * [DDW-786] Discreet mode - Create the TopBar icon (#2725) * [DDW-786] Added discreet mode toggle component * [DDW-789] Remove specific styles from component * [DDW-789] Fix translations * [DDW-789] CHANGELOG * [DDW-789] Fix eslint issue * [DDW-789] Remove popover theme variables * [DDW-789] Increase height for hide icon * [DDW-789] Remove style * [DDW-789] Rearrange icons to group by action or info * [DDW-786] Add japanese translations * [DDW-786] Rearrange icons order * [DDW-786] Add opacity * [DDW-786] Add isDiscreetMode control to story * [DDW-786] Fix gap width * [DDW-786] Fix default message * [DDW-786] Update to use mobx feature pattern * [DDW-786] Fix style * [DDW-787] Implement discreet mode settings * [DDW-787] Fix text * [DDW-787] Add story * [DDW-787] Update translations * [DDW-787] Update translations * [DDW-787] Discreet mode tooltip local storage setting * [DDW-787] NotificationPopOver component * [DDW-787] Migrate Sidebar to functional component * [DDW-787] Wrap categories with NotificationPopOver * [DDW-787] Fix lint * [DDW-787] Add new placements * [DDW-787] Add default translations * [DDW-787] Adjust styles * [DDW-787] One time fixed popOver * [DDW-787] Add red dot to discreet mode settings * [DDW-787] Update initial translations * [DDW-787] Add styles specific for language * [DDW-787] Update action text * [DDW-787] Review changes * [DDW-787] Update translations * [DDW-787] Changelog * [DDW-787] Fix tooltip showing after accessing security tab * [DDW-787] Fix notification dot click * [DDW-787] Fix jumping icons * [DDW-787] Add jp translation * [DDW-787] Fix styling issues * [DDW-787] Remove red dot when user leaves security tab * [DDW-787] Fix tooltip overlap * [DDW-787] Fix click through tooltip * [DDW-787] Fix tooltip overlap dialogs * [DDW-787] Fix prettier issue * [DDW-787] Dismiss tooltip on route leave * [DDW-787] Fix tooltip overlaping issues * [DDW-787] Fix closing discreet mode popover on staking page * [DDW-787] Fix merge conflicts * [DDW-787] Move condition to const * [DDW-787] Move trigger component to stand alone hook * [DDW-787] Fix type import * [DDW-787] Remove unused * [DDW-787] Review changes Co-authored-by: Renan Ferreira <[email protected]>
1 parent 39c5772 commit 3672fb2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+900
-225
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
### Features
2727

28-
- Implemented "discreet mode" ([PR 2723](https://github.com/input-output-hk/daedalus/pull/2723), [PR 2724](https://github.com/input-output-hk/daedalus/pull/2724), [PR 2725](https://github.com/input-output-hk/daedalus/pull/2725), [PR 2742](https://github.com/input-output-hk/daedalus/pull/2742))
28+
- Implemented "discreet mode" ([PR 2723](https://github.com/input-output-hk/daedalus/pull/2723), [PR 2724](https://github.com/input-output-hk/daedalus/pull/2724), [PR 2725](https://github.com/input-output-hk/daedalus/pull/2725), [PR 2742](https://github.com/input-output-hk/daedalus/pull/2742), [PR 2740](https://github.com/input-output-hk/daedalus/pull/2740))
2929
- Implemented "Catalyst Fund7" voting registration changes ([PR 2732](https://github.com/input-output-hk/daedalus/pull/2732))
3030
- Added "Over-saturation" warning in the delegation wizard ([PR 2733](https://github.com/input-output-hk/daedalus/pull/2733), [PR 2738](https://github.com/input-output-hk/daedalus/pull/2738))
3131
- Added Catalyst footer links ([PR 2721](https://github.com/input-output-hk/daedalus/pull/2721))

‎source/common/config/electron-store.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export const STORAGE_KEYS: {
2121
CURRENCY_SELECTED: 'CURRENCY-SELECTED',
2222
DATA_LAYER_MIGRATION_ACCEPTANCE: 'DATA-LAYER-MIGRATION-ACCEPTANCE',
2323
DISCREET_MODE_ENABLED: 'DISCREET-MODE-ENABLED',
24+
DISCREET_MODE_SETTINGS_TOOLTIP: 'DISCREET-MODE-SETTINGS-TOOLTIP',
25+
DISCREET_MODE_NOTIFICATION: 'DISCREET-MODE-NOTIFICATION',
2426
DOWNLOAD_MANAGER: 'DOWNLOAD-MANAGER',
2527
HARDWARE_WALLETS: 'HARDWARE-WALLETS',
2628
HARDWARE_WALLET_DEVICES: 'HARDWARE-WALLET-DEVICES',

‎source/common/types/electron-store.types.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ export type StorageKey =
1212
| 'CURRENCY-SELECTED'
1313
| 'DATA-LAYER-MIGRATION-ACCEPTANCE'
1414
| 'DISCREET-MODE-ENABLED'
15+
| 'DISCREET-MODE-SETTINGS-TOOLTIP'
16+
| 'DISCREET-MODE-NOTIFICATION'
1517
| 'DOWNLOAD-MANAGER'
1618
| 'HARDWARE-WALLET-DEVICES'
1719
| 'HARDWARE-WALLETS'

‎source/main/ipc/electronStoreConversation.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ const reset = async () => {
3333
await unset(keys.CURRENCY_SELECTED);
3434
await unset(keys.DATA_LAYER_MIGRATION_ACCEPTANCE);
3535
await unset(keys.DISCREET_MODE_ENABLED);
36+
await unset(keys.DISCREET_MODE_SETTINGS_TOOLTIP);
37+
await unset(keys.DISCREET_MODE_NOTIFICATION);
3638
await unset(keys.DOWNLOAD_MANAGER);
3739
await unset(keys.HARDWARE_WALLET_DEVICES);
3840
await unset(keys.HARDWARE_WALLETS);

‎source/renderer/app/Routes.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import WalletsSettingsPage from './containers/settings/categories/WalletsSetting
1212
import StakePoolsSettingsPage from './containers/settings/categories/StakePoolsSettingsPage';
1313
import SupportSettingsPage from './containers/settings/categories/SupportSettingsPage';
1414
import TermsOfUseSettingsPage from './containers/settings/categories/TermsOfUseSettingsPage';
15+
import SecuritySettingsPage from './containers/settings/categories/SecuritySettingsPage';
1516
import TermsOfUsePage from './containers/profile/TermsOfUsePage';
1617
import DataLayerMigrationPage from './containers/profile/DataLayerMigrationPage';
1718
import DisplaySettingsPage from './containers/settings/categories/DisplaySettingsPage';
@@ -114,6 +115,10 @@ export const Routes = withRouter(() => (
114115
path={ROUTES.SETTINGS.DISPLAY}
115116
component={DisplaySettingsPage}
116117
/>
118+
<Route
119+
path={ROUTES.SETTINGS.SECURITY}
120+
component={SecuritySettingsPage}
121+
/>
117122
</Settings>
118123
</Route>
119124
<Route

‎source/renderer/app/components/layout/TopBar.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
display: flex;
3131
flex-direction: column;
3232
font-family: var(--font-regular);
33-
max-width: 45%;
33+
max-width: 60%;
3434
text-align: center;
3535
user-select: text;
3636

@@ -86,7 +86,7 @@
8686
justify-content: center;
8787
left: 70px;
8888
position: absolute;
89-
width: calc(100% - 140px);
89+
width: calc(100% - 210px);
9090
}
9191

9292
.rectangle {

‎source/renderer/app/components/settings/categories/SecuritySettings.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// @flow
2+
import React from 'react';
3+
import { injectIntl } from 'react-intl';
4+
import NormalSwitch from '../../widgets/forms/NormalSwitch';
5+
import styles from './SecuritySettings.scss';
6+
import messages from './SecuritySettings.messages';
7+
import type { Intl } from '../../../types/i18nTypes';
8+
9+
type Props = {
10+
intl: Intl,
11+
discreetMode: boolean,
12+
openDiscreetMode: boolean,
13+
onDiscreetModeToggle: () => void,
14+
onOpenDiscreetModeToggle: () => void,
15+
};
16+
17+
const SecuritySettings = ({
18+
intl,
19+
discreetMode,
20+
openDiscreetMode,
21+
onDiscreetModeToggle,
22+
onOpenDiscreetModeToggle,
23+
}: Props) => {
24+
return (
25+
<div className={styles.root}>
26+
<div className={styles.setting}>
27+
<div className={styles.title}>
28+
{intl.formatMessage(messages.discreetModeTitle)}
29+
</div>
30+
<div className={styles.settingContent}>
31+
<p className={styles.description}>
32+
{intl.formatMessage(messages.discreetModeDescription)}
33+
</p>
34+
<NormalSwitch
35+
checked={discreetMode}
36+
onChange={onDiscreetModeToggle}
37+
/>
38+
</div>
39+
</div>
40+
<div className={styles.setting}>
41+
<div className={styles.title}>
42+
{intl.formatMessage(messages.openInDiscreetModeTitle)}
43+
</div>
44+
<div className={styles.settingContent}>
45+
<p className={styles.description}>
46+
{intl.formatMessage(messages.openInDiscreetModeDescription)}
47+
</p>
48+
<NormalSwitch
49+
checked={openDiscreetMode}
50+
onChange={onOpenDiscreetModeToggle}
51+
/>
52+
</div>
53+
</div>
54+
</div>
55+
);
56+
};
57+
58+
export default injectIntl(SecuritySettings);

‎source/renderer/app/components/settings/categories/SecuritySettings.messages.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// @flow
2+
import { defineMessages } from 'react-intl';
3+
4+
export default defineMessages({
5+
discreetModeTitle: {
6+
id: 'settings.security.discreetMode.title',
7+
defaultMessage: '!!!Discreet mode',
8+
description:
9+
'Title for the "Discreet mode" setting in the security category.',
10+
},
11+
discreetModeDescription: {
12+
id: 'settings.security.discreetMode.description',
13+
defaultMessage: '!!!This mode uses asterisks to hide sensitive data',
14+
description:
15+
'Description for the "Discreet mode" setting in the security category.',
16+
},
17+
openInDiscreetModeTitle: {
18+
id: 'settings.security.openInDiscreetMode.title',
19+
defaultMessage: '!!!Start the application in Discreet mode',
20+
description:
21+
'Title for the "Open in discreet mode" setting in the security category.',
22+
},
23+
openInDiscreetModeDescription: {
24+
id: 'settings.security.openInDiscreetMode.description',
25+
defaultMessage:
26+
'!!!Daedalus will start with Discreet mode enabled by default',
27+
description:
28+
'Description for the "Open in discreet mode" setting in the security category.',
29+
},
30+
});

‎source/renderer/app/components/settings/categories/SecuritySettings.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.root {
2+
color: var(--theme-support-settings-text-color);
3+
font-size: 16px;
4+
line-height: 1.38;
5+
6+
.title {
7+
font-family: var(--font-medium);
8+
margin-bottom: 14px;
9+
}
10+
11+
.setting {
12+
margin-bottom: 20px;
13+
}
14+
15+
.settingContent {
16+
display: flex;
17+
flex-direction: row;
18+
justify-content: space-between;
19+
margin-bottom: 20px;
20+
}
21+
22+
.description {
23+
font-family: var(--font-light);
24+
margin-right: 20px;
25+
}
26+
27+
:global {
28+
.SimpleSwitch_root {
29+
margin: 0;
30+
}
31+
}
32+
}

‎source/renderer/app/components/settings/menu/SecurityMenuItem.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// @flow
2+
import React from 'react';
3+
import classnames from 'classnames';
4+
import { observer } from 'mobx-react';
5+
import { injectIntl } from 'react-intl';
6+
import styles from './SettingsMenu.scss';
7+
import messages from './SettingsMenu.messages';
8+
import SettingsMenuItem from './SettingsMenuItem';
9+
import NotificationDot from '../../widgets/notification-dot/NotificationDot';
10+
import { ROUTES } from '../../../routes-config';
11+
import { useTriggerOnRouteLeave } from './hooks';
12+
import { useDiscreetModeFeature } from '../../../features/discreet-mode';
13+
import type { Intl } from '../../../types/i18nTypes';
14+
15+
type Props = {
16+
intl: Intl,
17+
currentLocale: string,
18+
isActiveItem: Function,
19+
onClick: Function,
20+
};
21+
22+
const SecurityMenuItem = ({
23+
intl,
24+
isActiveItem,
25+
currentLocale,
26+
onClick,
27+
}: Props) => {
28+
const {
29+
isNotificationEnabled,
30+
setDiscreetModeNotification,
31+
setDiscreetModeSettingsTooltip,
32+
} = useDiscreetModeFeature();
33+
const disableNotification = () => {
34+
setDiscreetModeNotification(false);
35+
setDiscreetModeSettingsTooltip(false);
36+
};
37+
const isJapanese = currentLocale === 'ja-JP';
38+
const isActive = isActiveItem(ROUTES.SETTINGS.SECURITY);
39+
40+
useTriggerOnRouteLeave({
41+
enabled: isNotificationEnabled,
42+
isOnRoute: isActive,
43+
onLeave: disableNotification,
44+
});
45+
46+
return (
47+
<NotificationDot
48+
enabled={isNotificationEnabled}
49+
dotClassName={classnames(
50+
styles.dot,
51+
isActive && styles.active,
52+
isJapanese && styles.jp
53+
)}
54+
>
55+
<SettingsMenuItem
56+
active={isActive}
57+
label={intl.formatMessage(messages.security)}
58+
onClick={() => onClick(ROUTES.SETTINGS.SECURITY)}
59+
className="security"
60+
/>
61+
</NotificationDot>
62+
);
63+
};
64+
65+
export default injectIntl(observer(SecurityMenuItem));

0 commit comments

Comments
 (0)