fix(governance,utils,react-helpers): token locale formatting issue (#4678)

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>

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

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

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 = (