From 7bac3e4ee0fff3920e607634db307ac9d15126cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hampus=20Sj=C3=B6berg?= Date: Fri, 16 Feb 2024 19:38:33 +0400 Subject: [PATCH] Add the ability to hide amounts on overview screen Long-press on the balance to activate. There is also a setting for it. --- locales/en.json | 3 ++ src/components/TransactionCard.tsx | 34 +++++++++++-- src/state/Settings.ts | 13 +++++ src/storage/app.ts | 3 ++ src/windows/Overview.tsx | 80 +++++++++++++++++++++--------- src/windows/Settings/Settings.tsx | 25 ++++++++++ 6 files changed, 132 insertions(+), 26 deletions(-) diff --git a/locales/en.json b/locales/en.json index f9993d4c8..964eec071 100644 --- 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 index e536d2a6b..5f39de312 100644 --- 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} + + )} + + )} )} diff --git a/src/state/Settings.ts b/src/state/Settings.ts index 087a60ff0..16379c254 100644 --- a/src/state/Settings.ts +++ b/src/state/Settings.ts @@ -93,6 +93,7 @@ export interface ISettingsModel { changeLightningBoxServer: Thunk; changeLightningBoxAddress: Thunk; changeLightningBoxLnurlPayDesc: Thunk; + changeHideAmountsEnabled: Thunk; setBitcoinUnit: Action; setFiatUnit: Action; @@ -141,6 +142,7 @@ export interface ISettingsModel { setLightningBoxServer: Action; setLightningBoxAddress: Action; SetLightningBoxLnurlPayDesc: Action; + setHideAmountsEnabled: Action; 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 index 82e88a3a8..ee1a53707 100644 --- 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(StorageItem.hideAmountsEnabled, false), ]); }; diff --git a/src/windows/Overview.tsx b/src/windows/Overview.tsx index 566164dfe..ce5b80d4b 100644 --- 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"); }; @@ -267,9 +276,11 @@ function Overview({ navigation }: IOverviewProps) { } */} + {/* The main balance text */} - {!preferFiat && bitcoinBalance} - {preferFiat && fiatBalance} + {!hideAmountsEnabled && ( + <> + {!preferFiat && bitcoinBalance} + {preferFiat && fiatBalance} + + )} + {hideAmountsEnabled && ( + <> + {!preferFiat && <>●●● {getUnitNice(new BigNumber(2), bitcoinUnit)}} + {preferFiat && <>●●● {fiatUnit}} + + )} - {pendingOpenBalance.equals(0) && ( - - {!preferFiat && fiatBalance} - {preferFiat && bitcoinBalance} - - )} - {pendingOpenBalance.greaterThan(0) && ( - - {!preferFiat && ( - <> - ({formatBitcoin(pendingOpenBalance, bitcoinUnit)}{" "} - {t("msg.pending", { ns: namespaces.common })}) - + {/* The smaller one underneath */} + {!hideAmountsEnabled && ( + <> + {pendingOpenBalance.equals(0) && ( + + {!preferFiat && fiatBalance} + {preferFiat && bitcoinBalance} + )} - {preferFiat && ( - <> - ({convertBitcoinToFiat(pendingOpenBalance, currentRate, fiatUnit)}{" "} - {t("msg.pending", { ns: namespaces.common })}) - + {pendingOpenBalance.greaterThan(0) && ( + + {!preferFiat && ( + <> + ({formatBitcoin(pendingOpenBalance, bitcoinUnit)}{" "} + {t("msg.pending", { ns: namespaces.common })}) + + )} + {preferFiat && ( + <> + ({convertBitcoinToFiat(pendingOpenBalance, currentRate, fiatUnit)}{" "} + {t("msg.pending", { ns: namespaces.common })}) + + )} + )} - + + )} + {hideAmountsEnabled && ( + <> + + {preferFiat && <>●●● {getUnitNice(new BigNumber(2), bitcoinUnit)}} + {!preferFiat && <>●●● {fiatUnit}} + + )} diff --git a/src/windows/Settings/Settings.tsx b/src/windows/Settings/Settings.tsx index 1bbdefb44..805521b51 100644 --- 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 ( @@ -1632,6 +1643,20 @@ ${t("experimental.tor.disabled.msg2")}`; )} + + + + + + {t("general.hideAmountsEnabled.title")} + + + + + {t("wallet.title")}