Feat/LIVE-4533 LIVE-4532 - Improve decimal handling to show more digi…

…ts (#2037) * Add dynamicSignificantDigits parameter to formatCurrencyUnit to show more digits of value when needed. Also increased this default parameter value from 4 to 6, so more digits will be displayed throught LLM and LLD. * fix an issue with the currency amount formatter where if the first number was 1 or 2, there was an extra number displayed
LedgerHQ · Dec 20, 2022 · 3574c62 · 3574c62
1 parent ddbb883
commit 3574c62
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 32 deletions.
diff --git a/.changeset/fast-seas-march.md b/.changeset/fast-seas-march.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+use new parameter from formatCurrencyUnit, dynamicSignificantDigits, in all related display value components/utils. Increased this value for the display of the account crypto value in Account page so more digits are shown.
diff --git a/.changeset/perfect-candles-pretend.md b/.changeset/perfect-candles-pretend.md
@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-common": minor
+---
+
+Add dynamicSignificantDigits parameter to formatCurrencyUnit to show more digits of value when needed. Also increased this default parameter value from 4 to 6, so more digits will be displayed throught LLM and LLD.
diff --git a/.changeset/shaggy-dogs-remain.md b/.changeset/shaggy-dogs-remain.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+use new parameter from formatCurrencyUnit, dynamicSignificantDigits, in all related display value components/utils. Increased this value for the display of the account crypto value in Account page so more digits are shown.
diff --git a/apps/ledger-live-desktop/src/renderer/components/BalanceInfos/index.jsx b/apps/ledger-live-desktop/src/renderer/components/BalanceInfos/index.jsx
@@ -33,6 +33,7 @@ type BalanceTotalProps = {
   showCryptoEvenIfNotAvailable?: boolean,
   account?: AccountLike,
   withTransactionsPendingConfirmationWarning?: boolean,
+  dynamicSignificantDigits?: number,
 };
 
 type Props = {
@@ -78,6 +79,7 @@ export function BalanceTotal({
   children = null,
   withTransactionsPendingConfirmationWarning,
   account,
+  dynamicSignificantDigits,
   ...boxProps
 }: BalanceTotalProps) {
   return (
@@ -95,6 +97,7 @@ export function BalanceTotal({
               fontSize={8}
               showCode
               val={totalBalance}
+              dynamicSignificantDigits={dynamicSignificantDigits}
               data-test-id="total-balance"
             />
           )}

diff --git a/apps/ledger-live-desktop/src/renderer/components/FormattedVal.jsx b/apps/ledger-live-desktop/src/renderer/components/FormattedVal.jsx
@@ -61,6 +61,7 @@ type OwnProps = {
   suffix?: string,
   showAllDigits?: boolean,
   alwaysShowValue?: boolean, // overrides discreet mode
+  dynamicSignificantDigits?: number,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -94,6 +95,7 @@ function FormattedVal(props: Props) {
     showAllDigits,
     alwaysShowValue,
     discreet,
+    dynamicSignificantDigits,
     ...p
   } = props;
   const valProp = props.val;
@@ -127,6 +129,7 @@ function FormattedVal(props: Props) {
       subMagnitude,
       discreet: alwaysShowValue ? false : discreet,
       showAllDigits,
+      dynamicSignificantDigits,
     });
   }
 

diff --git a/apps/ledger-live-desktop/src/renderer/screens/account/AccountBalanceSummaryHeader.jsx b/apps/ledger-live-desktop/src/renderer/screens/account/AccountBalanceSummaryHeader.jsx
@@ -43,7 +43,7 @@ export default function AccountBalanceSummaryHeader({
   const unit = getAccountUnit(account);
   const cvUnit = counterValue.units[0];
   const data = [
-    { valueChange: cryptoChange, balance: last.value, unit },
+    { valueChange: cryptoChange, balance: last.value, unit, dynamicSignificantDigits: 8 },
     { valueChange: countervalueChange, balance: last.countervalue, unit: cvUnit },
   ];
   if (countervalueFirst) {
@@ -75,6 +75,7 @@ export default function AccountBalanceSummaryHeader({
           isAvailable={isAvailable}
           totalBalance={data[0].balance}
           unit={data[0].unit}
+          dynamicSignificantDigits={data[0].dynamicSignificantDigits}
         >
           <Wrapper style={{ marginTop: 4 }}>
             <div style={{ width: "auto", marginRight: 20 }}>
@@ -88,6 +89,7 @@ export default function AccountBalanceSummaryHeader({
                   fontSize={6}
                   showCode
                   val={data[1].balance}
+                  dynamicSignificantDigits={data[1].dynamicSignificantDigits}
                 />
               ) : (
                 <NoCountervaluePlaceholder style={{}} />

diff --git a/apps/ledger-live-mobile/src/analytics/TrackScreen.tsx b/apps/ledger-live-mobile/src/analytics/TrackScreen.tsx
@@ -38,7 +38,7 @@ export default function TrackScreen({
         screen(category, name, props);
       }
     }
-  }, [category, name, props, isFocused]);
+  }, [category, name, props, isFocused, refreshSource]);
 
   return null;
 }
diff --git a/apps/ledger-live-mobile/src/components/AccountGraphCard.tsx b/apps/ledger-live-mobile/src/components/AccountGraphCard.tsx
@@ -35,7 +35,7 @@ import { QrCodeMedium } from "@ledgerhq/native-ui/assets/icons";
 import { useNavigation } from "@react-navigation/native";
 import { useTimeRange } from "../actions/settings";
 import Delta from "./Delta";
-import CurrencyUnitValue from "./CurrencyUnitValue";
+import CurrencyUnitValue, { CurrencyUnitValueProps } from "./CurrencyUnitValue";
 import { Item } from "./Graph/types";
 import getWindowDimensions from "../logic/getWindowDimensions";
 import Graph from "./Graph";
@@ -235,10 +235,11 @@ const GraphCardHeader = ({
   parentAccount,
   currency,
 }: HeaderTitleProps) => {
-  const items = [
+  const items: CurrencyUnitValueProps[] = [
     {
       unit: cryptoCurrencyUnit,
       value: item.value,
+      dynamicSignificantDigits: 8,
     },
     {
       unit: counterValueUnit,
@@ -309,10 +310,7 @@ const GraphCardHeader = ({
           numberOfLines={1}
           adjustsFontSizeToFit
         >
-          <CurrencyUnitValue
-            disableRounding={shouldUseCounterValue}
-            {...items[0]}
-          />
+          <CurrencyUnitValue {...items[0]} />
         </Text>
         <Flex flexDirection="row" alignItems="center">
           <Delta percent show0Delta valueChange={valueChange} />

diff --git a/apps/ledger-live-mobile/src/components/CounterValue.tsx b/apps/ledger-live-mobile/src/components/CounterValue.tsx
@@ -15,7 +15,7 @@ import {
   addExtraSessionTrackingPair,
 } from "../actions/general";
 import CurrencyUnitValue from "./CurrencyUnitValue";
-import type { Props as CurrencyUnitValueProps } from "./CurrencyUnitValue";
+import type { CurrencyUnitValueProps } from "./CurrencyUnitValue";
 import LText from "./LText";
 import Circle from "./Circle";
 import IconHelp from "../icons/Info";

diff --git a/apps/ledger-live-mobile/src/components/CurrencyUnitValue.tsx b/apps/ledger-live-mobile/src/components/CurrencyUnitValue.tsx
@@ -3,33 +3,28 @@ import { formatCurrencyUnit } from "@ledgerhq/live-common/currencies/index";
 import { Unit } from "@ledgerhq/types-cryptoassets";
 import { useSelector } from "react-redux";
 import { BigNumber } from "bignumber.js";
+import { formatCurrencyUnitOptions } from "@ledgerhq/live-common/currencies/formatCurrencyUnit";
 import { useLocale } from "../context/Locale";
 import DiscreetModeContext from "../context/DiscreetModeContext";
 import { discreetModeSelector } from "../reducers/settings";
 
-export type Props = {
+export type CurrencyUnitValueProps = {
   unit: Unit;
   value?: BigNumber | number | null;
-  showCode?: boolean;
-  alwaysShowSign?: boolean;
   alwaysShowValue?: boolean;
   before?: string;
   after?: string;
-  disableRounding?: boolean;
-  joinFragmentsSeparator?: string;
-};
+} & formatCurrencyUnitOptions;
 
 const CurrencyUnitValue = ({
   unit,
   value: valueProp,
   showCode = true,
-  alwaysShowSign,
   alwaysShowValue,
   before = "",
   after = "",
-  disableRounding = false,
-  joinFragmentsSeparator = "",
-}: Props): JSX.Element => {
+  ...otherFormatCurrencyUnitOptions
+}: CurrencyUnitValueProps): JSX.Element => {
   const { locale } = useLocale();
   const discreet = useSelector(discreetModeSelector);
   const shouldApplyDiscreetMode = useContext(DiscreetModeContext);
@@ -51,11 +46,9 @@ const CurrencyUnitValue = ({
         (value
           ? formatCurrencyUnit(unit, value, {
               showCode,
-              alwaysShowSign,
               locale: loc,
-              disableRounding,
               discreet: !alwaysShowValue && shouldApplyDiscreetMode && discreet,
-              joinFragmentsSeparator,
+              ...otherFormatCurrencyUnitOptions,
             })
           : "") +
         after}

diff --git a/apps/ledger-live-mobile/src/components/DoubleCountervalue.tsx b/apps/ledger-live-mobile/src/components/DoubleCountervalue.tsx
@@ -7,9 +7,7 @@ import { useCalculate } from "@ledgerhq/live-common/countervalues/react";
 import { useTheme } from "@react-navigation/native";
 import { Trans } from "react-i18next";
 import { counterValueCurrencySelector } from "../reducers/settings";
-import CurrencyUnitValue, {
-  Props as CurrencyUnitValueProps,
-} from "./CurrencyUnitValue";
+import CurrencyUnitValue, { CurrencyUnitValueProps } from "./CurrencyUnitValue";
 import LText from "./LText";
 import InfoIcon from "../icons/Info";
 import BottomModal from "./BottomModal";

diff --git a/apps/ledger-live-mobile/src/components/GraphCard.tsx b/apps/ledger-live-mobile/src/components/GraphCard.tsx
@@ -126,7 +126,7 @@ function GraphCard({
               </Text>
             ) : (
               <>
-                <Flex>
+                <Flex mx={6}>
                   {!balanceHistory ? (
                     <BigPlaceholder mt="8px" />
                   ) : (

diff --git a/libs/ledger-live-common/src/__tests__/currencies.ts b/libs/ledger-live-common/src/__tests__/currencies.ts
@@ -158,7 +158,7 @@ test("formatter will floor values by default", () => {
   expect(
     formatCurrencyUnit(
       getCryptoCurrencyById("bitcoin").units[0],
-      new BigNumber(1000010)
+      new BigNumber(1000001)
     )
   ).toBe("0.01");
   expect(
@@ -172,7 +172,7 @@ test("formatter will floor values by default", () => {
       getCryptoCurrencyById("bitcoin").units[0],
       new BigNumber("999999999999")
     )
-  ).toBe("9,999");
+  ).toBe("9,999.99");
 });
 test("formatter rounding can be disabled", () => {
   expect(
@@ -265,7 +265,7 @@ test("sub magnitude", () => {
         subMagnitude: 2,
       }
     )
-  ).toBe("9,999");
+  ).toBe("9,999.99");
 });
 test("parseCurrencyUnit", () => {
   expect(

diff --git a/libs/ledger-live-common/src/currencies/formatCurrencyUnit.ts b/libs/ledger-live-common/src/currencies/formatCurrencyUnit.ts
@@ -25,7 +25,12 @@ const defaultFormatOptions = {
   // discrete mode will hide amounts
   discreet: false,
   joinFragmentsSeparator: "",
+  // Increase the significant digits. Ex: For a value of 1.121212 BTC, dynamicSignificantDigits of 4 => 1.121 / dynamicSignificantDigits of 6 => 1.12121
+  dynamicSignificantDigits: 6,
 };
+
+export type formatCurrencyUnitOptions = Partial<typeof defaultFormatOptions>;
+
 type FormatFragment =
   | {
       kind: "value";
@@ -47,7 +52,7 @@ type FormatFragmentTypes = "value" | "sign" | "code" | "separator";
 export function formatCurrencyUnitFragment(
   unit: Unit,
   value: BigNumber,
-  _options?: Partial<typeof defaultFormatOptions>
+  _options?: formatCurrencyUnitOptions
 ): FormatFragment[] {
   if (!BigNumber.isBigNumber(value)) {
     console.warn("formatCurrencyUnit called with value=", value);
@@ -82,6 +87,7 @@ export function formatCurrencyUnitFragment(
     useGrouping,
     subMagnitude,
     discreet,
+    dynamicSignificantDigits,
   } = { ...defaultFormatOptions, ...unit, ...options };
   const { magnitude, code } = unit;
   const floatValue = value.div(new BigNumber(10).pow(magnitude));
@@ -94,7 +100,8 @@ export function formatCurrencyUnitFragment(
         Math.max(
           0, // dynamic max number of digits based on the value itself. to only show significant part
           Math.min(
-            4 - Math.round(Math.log10(floatValueAbs.toNumber())),
+            dynamicSignificantDigits -
+              Math.ceil(Math.log10(floatValueAbs.toNumber())),
             magnitude + subMagnitude,
             8
           )
@@ -140,7 +147,7 @@ export function formatCurrencyUnitFragment(
 export function formatCurrencyUnit(
   unit: Unit,
   value: BigNumber,
-  options?: Partial<typeof defaultFormatOptions>
+  options?: formatCurrencyUnitOptions
 ): string {
   const joinFragmentsSeparator =
     (options && options.joinFragmentsSeparator) ||
-Original file line number
+Diff line change
@@ Expand Up / @@ -126,7 +126,7 @@ function GraphCard({ @@
                   </Text>
                 ) : (
                   <>
-                    <Flex>
+                    <Flex mx={6}>
                       {!balanceHistory ? (
                         <BigPlaceholder mt="8px" />
                       ) : (
@@ Expand Down @@