Add discreet mode field to settings - Closes #2330

i18n/locales/en/common.json

@@ -129,6 +129,7 @@
   "Delegates are the most commited Lisk community members responsible for \n            securing the network and processing all the transactions on Lisk’s blockchain \n            network.": "Delegates are the most commited Lisk community members responsible for \n            securing the network and processing all the transactions on Lisk’s blockchain \n            network.",
   "Delete": "Delete",
   "Details": "Details",
+  "Discreet Mode": "Discreet Mode",
   "Dive into the details": "Dive into the details",
   "Does the problem still persist?": "Does the problem still persist?",
   "Don’t be a stranger! Connect with our worldwide community.": "Don’t be a stranger! Connect with our worldwide community.",
@@ -185,6 +186,7 @@
   "Help Center": "Help Center",
   "Help improve Lisk Hub by allowing Lisk to gather anonymous usage data used for analytical purposes.": "Help improve Lisk Hub by allowing Lisk to gather anonymous usage data used for analytical purposes.",
   "Here’s your address! You can now securely store and manage your LSK tokens.": "Here’s your address! You can now securely store and manage your LSK tokens.",
+  "Hide balance and transactions amounts": "Hide balance and transactions amounts",
   "Hide passphrase": "Hide passphrase",
   "Hide the QR code": "Hide the QR code",
   "High": "High",

src/components/setting/setting.js

@@ -113,6 +113,18 @@ class Setting extends React.Component {
                   <p>{t('Log out automatically after 10 minutes.')}</p>
                 </div>
               </label>
+              <label className={`${styles.fieldGroup} ${styles.checkboxField}`}>
+                <CheckBox
+                  name="discreetMode"
+                  className={`${styles.checkbox} discreetMode`}
+                  checked={settings.discreetMode}
+                  onChange={this.handleCheckboxChange}
+                />
+                <div>
+                  <span className={styles.labelName}>{t('Discreet Mode')}</span>
+                  <p>{t('Hide balance and transactions amounts')}</p>
+                </div>
+              </label>
               {isAuthenticated && settings.token.active !== tokenMap.BTC.key
                 ? (
                   <SecondPassphraseSetting

src/components/setting/setting.test.js

@@ -13,6 +13,7 @@ describe('Setting', () => {
     showNetwork: false,
     currency: undefined,
     statistics: false,
+    discreetMode: false,
     token: {
       list: {
         BTC: true,
@@ -99,6 +100,14 @@ describe('Setting', () => {
     expect(props.settingsUpdated).toBeCalledWith(expectedCallToSettingsUpdated);
   });
 
+  it('should change discreet mode setting when clicking on checkbox', () => {
+    wrapper.find('.discreetMode input').at(0).simulate('change', { target: { name: 'discreetMode' } });
+    const expectedCallToSettingsUpdated = {
+      discreetMode: !settings.discreetMode,
+    };
+    expect(props.settingsUpdated).toBeCalledWith(expectedCallToSettingsUpdated);
+  });
+
   it('should change showNetwork setting when clicking on checkbox', () => {
     wrapper.find('.showNetwork input').at(0).simulate('change', { target: { name: 'showNetwork' } });
     const expectedCallToSettingsUpdated = {

src/store/reducers/settings.js

@@ -33,6 +33,7 @@ export const initialState = deepMergeObj({
   isRequestHowItWorksDisable: false,
   statistics: false,
   areTermsOfUseAccepted: false,
+  discreetMode: false,
   token: {
     active: tokenKeys[0],
     list: tokenKeys.reduce((acc, key) => { acc[key] = true; return acc; }, {}),