frontend: added hiding amounts feature

A feature to hide amounts (fiat & coin) on all screens except
essential parts of send screen, improving privacy when using
the app.

Author: shonsirsha

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 - Drop support for SAI token
 - Log Javascript console messages in the app log.txt
+- Add amounts hiding feature to enhance privacy when using the app in public
 
 ## 4.39.0
 - Bundle BitBox02 firmware version v9.15.0

frontends/web/src/components/accountselector/accountselector.module.css

@@ -1,6 +1,7 @@
-.balance, .balanceSingleValue{
-    margin-left: auto;
+.balance, .balanceSingleValue {
     color: var(--color-secondary);
+    margin-left: auto;
+    text-transform: uppercase;
 }
 
 .balanceSingleValue {

frontends/web/src/components/accountselector/accountselector.tsx

@@ -14,12 +14,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FunctionComponent, useEffect, useState } from 'react';
+import { FunctionComponent, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import Select, { components, SingleValueProps, OptionProps, SingleValue, DropdownIndicatorProps } from 'react-select';
 import { AccountCode, IAccount } from '../../api/account';
 import { Button } from '../forms';
-import Select, { components, SingleValueProps, OptionProps, SingleValue, DropdownIndicatorProps } from 'react-select';
 import Logo from '../icon/logo';
+import AppContext from '../../contexts/AppContext';
 import styles from './accountselector.module.css';
 
 export type TOption = {
@@ -39,29 +40,31 @@ type TAccountSelector = {
 }
 
 const SelectSingleValue: FunctionComponent<SingleValueProps<TOption>> = (props) => {
+  const { hideAmounts } = useContext(AppContext);
   const { label, coinCode, balance } = props.data;
   return (
     <div className={styles.singleValueContainer}>
       <components.SingleValue {...props}>
         <div className={styles.valueContainer}>
           {coinCode ? <Logo coinCode={coinCode} alt={coinCode} /> : null}
           <span className={styles.selectLabelText}>{label}</span>
-          {coinCode && balance && <span className={styles.balanceSingleValue}>{balance}</span>}
+          {coinCode && balance && <span className={styles.balanceSingleValue}>{hideAmounts ? `*** ${coinCode}` : balance}</span>}
         </div>
       </components.SingleValue>
     </div>
   );
 };
 
 const SelectOption: FunctionComponent<OptionProps<TOption>> = (props) => {
+  const { hideAmounts } = useContext(AppContext);
   const { label, coinCode, balance } = props.data;
 
   return (
     <components.Option {...props}>
       <div className={styles.valueContainer}>
         {coinCode ? <Logo coinCode={coinCode} alt={coinCode} /> : null}
         <span className={styles.selectLabelText}>{label}</span>
-        {coinCode && balance && <span className={styles.balance}>{balance}</span>}
+        {coinCode && balance && <span className={styles.balance}>{hideAmounts ? `*** ${coinCode}` : balance}</span>}
       </div>
     </components.Option>
   );

frontends/web/src/components/amount/amount.test.tsx

@@ -13,12 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { describe, expect, it } from 'vitest';
+import { useContext } from 'react';
+import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import { Amount } from './amount';
 import { CoinUnit, ConversionUnit } from './../../api/account';
 
+vi.mock('react', () => ({
+  ...vi.importActual('react'),
+  useContext: vi.fn(),
+  createContext: vi.fn()
+}));
+
+
 const validateSpacing = (values: string[], elements: Element[]) => {
   // each element in `values` is an expected
   // "spaced" element. E.g:
@@ -41,6 +48,22 @@ const validateSpacing = (values: string[], elements: Element[]) => {
 
 describe('Amount formatting', () => {
 
+  beforeEach(() => {
+    (useContext as Mock).mockReturnValue({ hideAmounts: false });
+  });
+
+  describe('hide amounts', () => {
+
+    it('should render triple-asterisks (***) when amount is set to be hidden', () => {
+      (useContext as Mock).mockReturnValue({ hideAmounts: true });
+      const { container } = render(
+        <Amount amount="1'340.25" unit={'EUR'} />
+      );
+      expect(container).toHaveTextContent('***');
+    });
+
+  });
+
   describe('sat amounts', () => {
     let coins: CoinUnit[] = ['sat', 'tsat'];
     coins.forEach((coin) => {
@@ -255,4 +278,9 @@ describe('Amount formatting', () => {
 
     });
   });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
 });

frontends/web/src/components/amount/amount.tsx

@@ -13,16 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import style from './amount.module.css';
+import { useContext } from 'react';
+import AppContext from '../../contexts/AppContext';
+
 import { CoinUnit, ConversionUnit } from './../../api/account';
+import style from './amount.module.css';
 
 type TProps = {
   amount: string;
   unit: CoinUnit | ConversionUnit;
   removeBtcTrailingZeroes?: boolean;
+  alwaysShowAmounts?: boolean
 };
 
-export const Amount = ({ amount, unit, removeBtcTrailingZeroes }: TProps) => {
+export const Amount = ({ amount, unit, removeBtcTrailingZeroes, alwaysShowAmounts = false }: TProps) => {
+  const { hideAmounts } = useContext(AppContext);
   const formatSats = (amount: string): JSX.Element => {
     const blocks: JSX.Element[] = [];
     const blockSize = 3;
@@ -52,6 +57,10 @@ export const Amount = ({ amount, unit, removeBtcTrailingZeroes }: TProps) => {
     </span>;
   };
 
+  if (hideAmounts && !alwaysShowAmounts) {
+    return '***';
+  }
+
   switch (unit) {
   case 'BTC':
   case 'TBTC':

frontends/web/src/components/balance/balance.tsx

@@ -22,8 +22,8 @@ import { Amount } from '../../components/amount/amount';
 import style from './balance.module.css';
 
 type TProps = {
-    balance?: IBalance;
-    noRotateFiat?: boolean;
+  balance?: IBalance;
+  noRotateFiat?: boolean;
 }
 
 export const Balance = ({
@@ -46,11 +46,17 @@ export const Balance = ({
               <Amount
                 amount={balance.available.amount}
                 unit={balance.available.unit}
-                removeBtcTrailingZeroes/>
+                removeBtcTrailingZeroes
+              />
             </td>
             <td className={style.availableUnit}>{balance.available.unit}</td>
           </tr>
-          <FiatConversion amount={balance.available} tableRow noAction={noRotateFiat} noBtcZeroes/>
+          <FiatConversion
+            amount={balance.available}
+            tableRow
+            noAction={noRotateFiat}
+            noBtcZeroes
+          />
         </tbody>
       </table>
       {

frontends/web/src/components/forms/button.module.css

@@ -23,6 +23,10 @@
     will-change: background-color, color;
 }
 
+.button:hover {
+    cursor: pointer;
+}
+
 .button:focus {
     outline: none;
 }

frontends/web/src/components/hideamountsbutton/hideamountsbutton.module.css

@@ -0,0 +1,13 @@
+.button {
+    display: flex;
+}
+
+.button img {
+    width: 18px;
+    height: 18px;
+}
+
+.button span {
+    width: 96px;
+    margin-left: var(--space-eight);
+}

frontends/web/src/components/hideamountsbutton/hideamountsbutton.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2023 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLoad } from '../../hooks/api';
+import AppContext from '../../contexts/AppContext';
+import { Button } from '../forms/button';
+import { EyeClosed, EyeOpened } from '../icon';
+import { getConfig } from '../../utils/config';
+import styles from './hideamountsbutton.module.css';
+
+export const HideAmountsButton = () => {
+  const { t } = useTranslation();
+  const { hideAmounts, toggleHideAmounts } = useContext(AppContext);
+  const config = useLoad(getConfig);
+  return (
+    <>
+      {
+        config && config.frontend.allowHideAmounts ?
+          <Button className={styles.button} onClick={toggleHideAmounts} transparent>
+            {hideAmounts ?
+              <><EyeClosed /> <span>{t('newSettings.appearance.hideAmounts.showAmounts')}</span></> :
+              <><EyeOpened /> <span>{t('newSettings.appearance.hideAmounts.hideAmounts')}</span></>
+            }
+          </Button> :
+          null
+      }
+    </>
+
+  );
+};