From b5ba4f99d9011e7ce8c8f47cbaa2aba2abc8709f Mon Sep 17 00:00:00 2001
From: Sam Keen <samuel.kleinmann@gmail.com>
Date: Mon, 4 Sep 2023 12:09:38 +0100
Subject: [PATCH] fix(governance,utils,react-helpers): token locale formatting
 issue (#4678)

---
 .../src/components/wallet-card/wallet-card.tsx  | 17 +++++++++++++----
 .../react-helpers/src/hooks/use-number-parts.ts |  2 +-
 libs/utils/src/lib/format/number.spec.ts        | 16 ++++++++--------
 libs/utils/src/lib/format/number.ts             |  6 +++---
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/apps/governance/src/components/wallet-card/wallet-card.tsx b/apps/governance/src/components/wallet-card/wallet-card.tsx
index aa8b06e5f..6a1b1e5fa 100644
--- a/apps/governance/src/components/wallet-card/wallet-card.tsx
+++ b/apps/governance/src/components/wallet-card/wallet-card.tsx
@@ -54,7 +54,7 @@ export const WalletCardRow = ({
 }) => {
   const ref = React.useRef<HTMLDivElement | null>(null);
   useAnimateValue(ref, value);
-  const [integers, decimalsPlaces] = useNumberParts(value, decimals);
+  const [integers, decimalsPlaces, separator] = useNumberParts(value, decimals);
 
   return (
     <div
@@ -75,7 +75,10 @@ export const WalletCardRow = ({
           className="font-mono flex-1 text-right"
           data-testid="associated-amount"
         >
-          <span>{integers}.</span>
+          <span>
+            {integers}
+            {separator}
+          </span>
           <span>{decimalsPlaces}</span>
         </span>
       )}
@@ -110,7 +113,10 @@ export const WalletCardAsset = ({
   border,
   subheading,
 }: WalletCardAssetProps) => {
-  const [integers, decimalsPlaces] = useNumberParts(balance, decimals);
+  const [integers, decimalsPlaces, separator] = useNumberParts(
+    balance,
+    decimals
+  );
 
   return (
     <div className="flex flex-nowrap mt-2 mb-4">
@@ -132,7 +138,10 @@ export const WalletCardAsset = ({
           </div>
         </div>
         <div className="px-2 basis-full font-mono" data-testid="currency-value">
-          <span>{integers}.</span>
+          <span>
+            {integers}
+            {separator}
+          </span>
           <span className="text-neutral-400">{decimalsPlaces}</span>
         </div>
       </div>
diff --git a/libs/react-helpers/src/hooks/use-number-parts.ts b/libs/react-helpers/src/hooks/use-number-parts.ts
index 606e854a8..2c3ba399d 100644
--- a/libs/react-helpers/src/hooks/use-number-parts.ts
+++ b/libs/react-helpers/src/hooks/use-number-parts.ts
@@ -5,6 +5,6 @@ import { toNumberParts } from '@vegaprotocol/utils';
 export const useNumberParts = (
   value: BigNumber | null | undefined,
   decimals: number
-): [integers: string, decimalPlaces: string] => {
+): [integers: string, decimalPlaces: string, separator: string | undefined] => {
   return useMemo(() => toNumberParts(value, decimals), [decimals, value]);
 };
diff --git a/libs/utils/src/lib/format/number.spec.ts b/libs/utils/src/lib/format/number.spec.ts
index 119087fca..d30e14ab7 100644
--- a/libs/utils/src/lib/format/number.spec.ts
+++ b/libs/utils/src/lib/format/number.spec.ts
@@ -86,17 +86,17 @@ describe('number utils', () => {
 
   describe('toNumberParts', () => {
     it.each([
-      { v: null, d: 3, o: ['0', '000'] },
-      { v: undefined, d: 3, o: ['0', '000'] },
-      { v: new BigNumber(123), d: 3, o: ['123', '00'] },
-      { v: new BigNumber(123.123), d: 3, o: ['123', '123'] },
-      { v: new BigNumber(123.123), d: 6, o: ['123', '123'] },
-      { v: new BigNumber(123.123), d: 0, o: ['123', ''] },
-      { v: new BigNumber(123), d: undefined, o: ['123', '00'] },
+      { v: null, d: 3, o: ['0', '000', '.'] },
+      { v: undefined, d: 3, o: ['0', '000', '.'] },
+      { v: new BigNumber(123), d: 3, o: ['123', '00', '.'] },
+      { v: new BigNumber(123.123), d: 3, o: ['123', '123', '.'] },
+      { v: new BigNumber(123.123), d: 6, o: ['123', '123', '.'] },
+      { v: new BigNumber(123.123), d: 0, o: ['123', '', '.'] },
+      { v: new BigNumber(123), d: undefined, o: ['123', '00', '.'] },
       {
         v: new BigNumber(30000),
         d: undefined,
-        o: ['30,000', '00'],
+        o: ['30,000', '00', '.'],
       },
     ])('returns correct tuple given the different arguments', ({ v, d, o }) => {
       expect(toNumberParts(v, d)).toStrictEqual(o);
diff --git a/libs/utils/src/lib/format/number.ts b/libs/utils/src/lib/format/number.ts
index bf5a93ff4..261502a38 100644
--- a/libs/utils/src/lib/format/number.ts
+++ b/libs/utils/src/lib/format/number.ts
@@ -165,15 +165,15 @@ export const formatNumberPercentage = (value: BigNumber, decimals?: number) => {
 export const toNumberParts = (
   value: BigNumber | null | undefined,
   decimals = 18
-): [integers: string, decimalPlaces: string] => {
+): [integers: string, decimalPlaces: string, separator: string] => {
   if (!value) {
-    return ['0', '0'.repeat(decimals)];
+    return ['0', '0'.repeat(decimals), '.'];
   }
   const separator = getDecimalSeparator() || '.';
   const [integers, decimalsPlaces] = formatNumber(value, decimals)
     .toString()
     .split(separator);
-  return [integers, decimalsPlaces || ''];
+  return [integers, decimalsPlaces || '', separator];
 };
 
 export const isNumeric = (