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

.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.

.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.

.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.

apps/ledger-live-desktop/release-notes.json

@@ -1,14 +1,6 @@
 [
   {
-    "tag_name": "2.49.2",
-    "body": "\n### 🐛 Fixes\n\nWe have fixed a critical issue preventing macOS users from accessing their nano device.\n"
-  },
-  {
-    "tag_name": "2.49.1",
-    "body": "\nWe’ve done few small but important changes behind the curtain.\nDon’t forget to update your Ledger Live app so that you can access these new features.\n"
-  },
-  {
-    "tag_name": "2.49.0",
-    "body": "\nA few small but mighty improvements have been made to Ledger Live's swapping capabilities 👇\n\n### 🚀 Features\n\n- You can now filter swap quotes based on floating or fixed rates.\n\n### 🐛 Fixes\n\n- Trying to swap some assets with Changelly, such as GALA and MBOX, may have resulted in the app crashing. We've sorted this out and everything is working as it should now.\n"
+    "tag_name": "2.50.0",
+    "body": "\n### 🚀 Features\n\n- **EIP-1559 is here.** Now you can enjoy **more predictable fees and reduced confirmation delays** for Ethereum-based transactions. You can also avoid overpaying fees—specify the max fee you're willing to pay and get reimbursed if the transaction is processed at a lower price.\n- **Don’t trust, verify.** Ledger now supports the **EIP-712** standard that will display data in signing prompts in a readable format instead of complex hexadecimal strings.\n- **Swap crypto with CIC from the US without leaving Ledger Live.** Access to CIC swapping options to grow and diversify your portfolio from the security of your Ledger Nano.\n\n### 🐛 Fixes\n\n- A sneaky bug caused the value of some Cardano tokens to be displayed incorrectly. This has now been fixed.\n"
   }
 ]

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"
             />
           )}

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,
     });
   }
 

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={{}} />

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;
 }

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} />

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";

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}

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";

apps/ledger-live-mobile/src/components/GraphCard.tsx

@@ -126,7 +126,7 @@ function GraphCard({
               </Text>
             ) : (
               <>
-                <Flex>
+                <Flex mx={6}>
                   {!balanceHistory ? (
                     <BigPlaceholder mt="8px" />
                   ) : (

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.round(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) ||