Add the ability to hide amounts on overview screen

Long-press on the balance to activate. There is also a setting for it.
hsjoberg · Feb 16, 2024 · a9ff298 · a9ff298
1 parent 6b41fd4
commit a9ff298
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 27 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -639,6 +639,9 @@
       },
       "mapTheme": {
         "title": "Set Map theme"
+      },
+      "hideAmountsEnabled": {
+        "title": "Hide amounts"
       }
     },
     "wallet": {

diff --git a/src/components/TransactionCard.tsx b/src/components/TransactionCard.tsx
@@ -8,10 +8,16 @@ import { ITransaction } from "../storage/database/transaction";
 import { blixtTheme } from ".././native-base-theme/variables/commonColor";
 import { capitalize, formatISO, isLong } from "../utils";
 import { extractDescription } from "../utils/NameDesc";
-import { IBitcoinUnits, formatBitcoin, convertBitcoinToFiat } from "../utils/bitcoin-units";
+import {
+  IBitcoinUnits,
+  formatBitcoin,
+  convertBitcoinToFiat,
+  getUnitNice,
+} from "../utils/bitcoin-units";
 import { useStoreState } from "../state/store";
 import { getLightningService } from "../utils/lightning-services";
 import { fontFactor, fontFactorSubtle, zoomed } from "../utils/scale";
+import BigNumber from "bignumber.js";
 
 interface IProps {
   onPress: (id: string) => void;
@@ -26,6 +32,8 @@ export default function TransactionCard({ onPress, transaction, unit }: IProps)
   const fiatUnit = useStoreState((store) => store.settings.fiatUnit);
   const currentRate = useStoreState((store) => store.fiat.currentRate);
   const preferFiat = useStoreState((store) => store.settings.preferFiat);
+  const hideAmountsEnabled = useStoreState((store) => store.settings.hideAmountsEnabled);
+  const bitcoinUnit = useStoreState((store) => store.settings.bitcoinUnit);
 
   let transactionValue: Long;
   if (isLong(amtPaidSat) && amtPaidSat.greaterThan(0)) {
@@ -108,8 +116,28 @@ export default function TransactionCard({ onPress, transaction, unit }: IProps)
                   {transactionValue.notEquals(0) && (
                     <>
                       {positive ? "+" : ""}
-                      {!preferFiat && formatBitcoin(transactionValue, unit)}
-                      {preferFiat && convertBitcoinToFiat(transactionValue, currentRate, fiatUnit)}
+
+                      {!hideAmountsEnabled && (
+                        <>
+                          {!preferFiat && formatBitcoin(transactionValue, unit)}
+                          {preferFiat &&
+                            convertBitcoinToFiat(transactionValue, currentRate, fiatUnit)}
+                        </>
+                      )}
+                      {hideAmountsEnabled && (
+                        <>
+                          {!preferFiat && (
+                            <>
+                              {!positive ? "-" : ""}●●● {getUnitNice(new BigNumber(2), bitcoinUnit)}
+                            </>
+                          )}
+                          {preferFiat && (
+                            <>
+                              {!positive ? "-" : ""}●●● {fiatUnit}
+                            </>
+                          )}
+                        </>
+                      )}
                     </>
                   )}
                 </Text>

diff --git a/src/state/Settings.ts b/src/state/Settings.ts
@@ -93,6 +93,7 @@ export interface ISettingsModel {
   changeLightningBoxServer: Thunk<ISettingsModel, string>;
   changeLightningBoxAddress: Thunk<ISettingsModel, string>;
   changeLightningBoxLnurlPayDesc: Thunk<ISettingsModel, string>;
+  changeHideAmountsEnabled: Thunk<ISettingsModel, boolean>;
 
   setBitcoinUnit: Action<ISettingsModel, keyof IBitcoinUnits>;
   setFiatUnit: Action<ISettingsModel, keyof IFiatRates>;
@@ -141,6 +142,7 @@ export interface ISettingsModel {
   setLightningBoxServer: Action<ISettingsModel, string>;
   setLightningBoxAddress: Action<ISettingsModel, string>;
   SetLightningBoxLnurlPayDesc: Action<ISettingsModel, string>;
+  setHideAmountsEnabled: Action<ISettingsModel, boolean>;
 
   bitcoinUnit: keyof IBitcoinUnits;
   fiatUnit: keyof IFiatRates;
@@ -189,6 +191,7 @@ export interface ISettingsModel {
   lightningBoxServer: string;
   lightningBoxAddress: string;
   lightningBoxLnurlPayDesc: string;
+  hideAmountsEnabled: boolean;
 }
 
 export const settings: ISettingsModel = {
@@ -283,6 +286,7 @@ export const settings: ISettingsModel = {
     actions.SetLightningBoxLnurlPayDesc(
       (await getItem(StorageItem.lightningBoxLnurlPayDesc)) ?? DEFAULT_LIGHTNINGBOX_LNURLPDESC,
     );
+    actions.setHideAmountsEnabled((await getItemObject(StorageItem.hideAmountsEnabled)) ?? false);
 
     log.d("Done");
   }),
@@ -526,6 +530,11 @@ export const settings: ISettingsModel = {
     actions.SetLightningBoxLnurlPayDesc(payload);
   }),
 
+  changeHideAmountsEnabled: thunk(async (actions, payload) => {
+    await setItemObject(StorageItem.hideAmountsEnabled, payload);
+    actions.setHideAmountsEnabled(payload);
+  }),
+
   setBitcoinUnit: action((state, payload) => {
     state.bitcoinUnit = payload;
   }),
@@ -667,6 +676,9 @@ export const settings: ISettingsModel = {
   SetLightningBoxLnurlPayDesc: action((state, payload) => {
     state.lightningBoxLnurlPayDesc = payload;
   }),
+  setHideAmountsEnabled: action((state, payload) => {
+    state.hideAmountsEnabled = payload;
+  }),
 
   bitcoinUnit: "bitcoin",
   fiatUnit: "USD",
@@ -715,4 +727,5 @@ export const settings: ISettingsModel = {
   lightningBoxServer: DEFAULT_LIGHTNINGBOX_SERVER,
   lightningBoxAddress: "",
   lightningBoxLnurlPayDesc: DEFAULT_LIGHTNINGBOX_LNURLPDESC,
+  hideAmountsEnabled: false,
 };
diff --git a/src/storage/app.ts b/src/storage/app.ts
@@ -89,6 +89,7 @@ export enum StorageItem { // const enums not supported in Babel 7...
   lightningBoxServer = "lightningBoxServer",
   lightningBoxAddress = "lightningBoxAddress",
   lightningBoxLnurlPayDesc = "lightningBoxLnurlPayDesc",
+  hideAmountsEnabled = "hideAmountsEnabled",
 }
 
 export const setItem = async (key: StorageItem, value: string) =>
@@ -192,6 +193,7 @@ export const clearApp = async () => {
     removeItem(StorageItem.lightningBoxServer),
     removeItem(StorageItem.lightningBoxAddress),
     removeItem(StorageItem.lightningBoxLnurlPayDesc),
+    removeItem(StorageItem.hideAmountsEnabled),
   ]);
 };
 
@@ -283,5 +285,6 @@ export const setupApp = async () => {
     setItem(StorageItem.lightningBoxServer, DEFAULT_LIGHTNINGBOX_SERVER),
     // setItem(StorageItem.lightningBoxAddress, ""),
     setItem(StorageItem.lightningBoxLnurlPayDesc, DEFAULT_LIGHTNINGBOX_LNURLPDESC),
+    setItemObject<boolean>(StorageItem.hideAmountsEnabled, false),
   ]);
 };
diff --git a/src/windows/Overview.tsx b/src/windows/Overview.tsx
@@ -19,13 +19,14 @@ import { createBottomTabNavigator, BottomTabNavigationProp } from "@react-naviga
 import { getStatusBarHeight } from "react-native-status-bar-height";
 import Long from "long";
 import { FlashList } from "@shopify/flash-list";
+import BigNumber from "bignumber.js";
 
 import { RootStackParamList } from "../Main";
 import { useStoreActions, useStoreState } from "../state/store";
 import TransactionCard from "../components/TransactionCard";
 import Container from "../components/Container";
 import { timeout, toast } from "../utils/index";
-import { formatBitcoin, convertBitcoinToFiat } from "../utils/bitcoin-units";
+import { formatBitcoin, convertBitcoinToFiat, getUnitNice } from "../utils/bitcoin-units";
 import FooterNav from "../components/FooterNav";
 import Drawer from "../components/Drawer";
 import * as nativeBaseTheme from "../native-base-theme/variables/commonColor";
@@ -65,7 +66,11 @@ function Overview({ navigation }: IOverviewProps) {
   const preferFiat = useStoreState((store) => store.settings.preferFiat);
   const changePreferFiat = useStoreActions((store) => store.settings.changePreferFiat);
   const hideExpiredInvoices = useStoreState((store) => store.settings.hideExpiredInvoices);
-
+  const hideAmountsEnabled = useStoreState((store) => store.settings.hideAmountsEnabled);
+  const changeHideAmountsEnabled = useStoreActions(
+    (store) => store.settings.changeHideAmountsEnabled,
+  );
+  console.log(hideAmountsEnabled);
   const bitcoinAddress = useStoreState((store) => store.onChain.address);
   const onboardingState = useStoreState((store) => store.onboardingState);
 
@@ -170,6 +175,10 @@ function Overview({ navigation }: IOverviewProps) {
     await changePreferFiat(!preferFiat);
   };
 
+  const onLongPressBalanceHeader = async () => {
+    await changeHideAmountsEnabled(!hideAmountsEnabled);
+  };
+
   const onPressSyncIcon = () => {
     navigation.navigate("SyncInfo");
   };
@@ -206,7 +215,7 @@ function Overview({ navigation }: IOverviewProps) {
             />
           )}
           estimatedItemSize={86}
-          keyExtractor={(transaction) => transaction.id!?.toString()}
+          keyExtractor={(transaction) => transaction.id?.toString()}
           ListEmptyComponent={
             <Text style={{ textAlign: "center", margin: 16 }}>{t("noTransactionsYet")}</Text>
           }
@@ -267,9 +276,11 @@ function Overview({ navigation }: IOverviewProps) {
             } */}
           </View>
 
+          {/* The main balance text */}
           <Animated.Text
             testID="BIG_BALANCE_HEADER"
             onPress={onPressBalanceHeader}
+            onLongPress={onLongPressBalanceHeader}
             style={[
               headerInfo.btc,
               {
@@ -292,31 +303,54 @@ function Overview({ navigation }: IOverviewProps) {
               },
             ]}
           >
-            {!preferFiat && bitcoinBalance}
-            {preferFiat && fiatBalance}
+            {!hideAmountsEnabled && (
+              <>
+                {!preferFiat && bitcoinBalance}
+                {preferFiat && fiatBalance}
+              </>
+            )}
+            {hideAmountsEnabled && (
+              <>
+                {!preferFiat && <>●●● {getUnitNice(new BigNumber(2), bitcoinUnit)}</>}
+                {preferFiat && <>●●● {fiatUnit}</>}
+              </>
+            )}
           </Animated.Text>
 
-          {pendingOpenBalance.equals(0) && (
-            <Animated.Text style={[{ opacity: headerFiatOpacity }, headerInfo.fiat]}>
-              {!preferFiat && fiatBalance}
-              {preferFiat && bitcoinBalance}
-            </Animated.Text>
-          )}
-          {pendingOpenBalance.greaterThan(0) && (
-            <Animated.Text style={[{ opacity: headerFiatOpacity }, headerInfo.pending]}>
-              {!preferFiat && (
-                <>
-                  ({formatBitcoin(pendingOpenBalance, bitcoinUnit)}{" "}
-                  {t("msg.pending", { ns: namespaces.common })})
-                </>
+          {/* The smaller one underneath */}
+          {!hideAmountsEnabled && (
+            <>
+              {pendingOpenBalance.equals(0) && (
+                <Animated.Text style={[{ opacity: headerFiatOpacity }, headerInfo.fiat]}>
+                  {!preferFiat && fiatBalance}
+                  {preferFiat && bitcoinBalance}
+                </Animated.Text>
               )}
-              {preferFiat && (
-                <>
-                  ({convertBitcoinToFiat(pendingOpenBalance, currentRate, fiatUnit)}{" "}
-                  {t("msg.pending", { ns: namespaces.common })})
-                </>
+              {pendingOpenBalance.greaterThan(0) && (
+                <Animated.Text style={[{ opacity: headerFiatOpacity }, headerInfo.pending]}>
+                  {!preferFiat && (
+                    <>
+                      ({formatBitcoin(pendingOpenBalance, bitcoinUnit)}{" "}
+                      {t("msg.pending", { ns: namespaces.common })})
+                    </>
+                  )}
+                  {preferFiat && (
+                    <>
+                      ({convertBitcoinToFiat(pendingOpenBalance, currentRate, fiatUnit)}{" "}
+                      {t("msg.pending", { ns: namespaces.common })})
+                    </>
+                  )}
+                </Animated.Text>
               )}
-            </Animated.Text>
+            </>
+          )}
+          {hideAmountsEnabled && (
+            <>
+              <Animated.Text style={[{ opacity: headerFiatOpacity }, headerInfo.fiat]}>
+                {preferFiat && <>●●● {getUnitNice(new BigNumber(2), bitcoinUnit)}</>}
+                {!preferFiat && <>●●● {fiatUnit}</>}
+              </Animated.Text>
+            </>
           )}
         </Animated.View>
       </View>

diff --git a/src/windows/Settings/Settings.tsx b/src/windows/Settings/Settings.tsx
@@ -1433,6 +1433,8 @@ ${t("experimental.tor.disabled.msg2")}`;
     await changeLndCompactDb(true);
     restartNeeded();
   };
+
+  // Enforce speedloader on startup
   const enforceSpeedloaderOnStartup = useStoreState(
     (store) => store.settings.enforceSpeedloaderOnStartup,
   );
@@ -1537,6 +1539,15 @@ ${t("experimental.tor.disabled.msg2")}`;
     }
   };
 
+  // Hide amounts
+  const hideAmountsEnabled = useStoreState((store) => store.settings.hideAmountsEnabled);
+  const changeHideAmountsEnabled = useStoreActions(
+    (store) => store.settings.changeHideAmountsEnabled,
+  );
+  const onToggleHideAmountsEnabled = async () => {
+    await changeHideAmountsEnabled(!hideAmountsEnabled);
+  };
+
   return (
     <Container>
       <Content style={{ padding: 10 }}>
@@ -1632,6 +1643,20 @@ ${t("experimental.tor.disabled.msg2")}`;
               </Body>
             </ListItem>
           )}
+          <ListItem style={style.listItem} icon={true} onPress={onToggleHideAmountsEnabled}>
+            <Left>
+              <Icon style={style.icon} type="Feather" name="align-justify" />
+            </Left>
+            <Body>
+              <Text>{t("general.hideAmountsEnabled.title")}</Text>
+            </Body>
+            <Right>
+              <CheckBox
+                checked={hideAmountsEnabled}
+                onPress={onToggleTransactionGeolocationEnabled}
+              />
+            </Right>
+          </ListItem>
 
           <ListItem style={style.itemHeader} itemHeader={true} first={true}>
             <Text>{t("wallet.title")}</Text>