feat(neuron-ui): display balance with thousandth delimiter

Author: Keith-CY

packages/neuron-ui/src/utils/formatters.test.ts

@@ -144,15 +144,15 @@ describe(`formatters`, () => {
         },
         {
           source: `1234567890123456789012345678901234567890123456789012345678901234567890123400000000`,
-          target: `12345678901234567890123456789012345678901234567890123456789012345678901234`,
+          target: `12,345,678,901,234,567,890,123,456,789,012,345,678,901,234,567,890,123,456,789,012,345,678,901,234`,
         },
         {
           source: `12345678901234567890123456789012345678901234567890123456789012345678901234`,
-          target: `123456789012345678901234567890123456789012345678901234567890123456.78901234`,
+          target: `123,456,789,012,345,678,901,234,567,890,123,456,789,012,345,678,901,234,567,890,123,456.78901234`,
         },
         {
           source: `1234567890123456789012345678901234567890123456789012345678901234567890123400`,
-          target: `12345678901234567890123456789012345678901234567890123456789012345678.901234`,
+          target: `12,345,678,901,234,567,890,123,456,789,012,345,678,901,234,567,890,123,456,789,012,345,678.901234`,
         },
 
         {
@@ -173,15 +173,15 @@ describe(`formatters`, () => {
         },
         {
           source: `-1234567890123456789012345678901234567890123456789012345678901234567890123400000000`,
-          target: `-12345678901234567890123456789012345678901234567890123456789012345678901234`,
+          target: `-12,345,678,901,234,567,890,123,456,789,012,345,678,901,234,567,890,123,456,789,012,345,678,901,234`,
         },
         {
           source: `-12345678901234567890123456789012345678901234567890123456789012345678901234`,
-          target: `-123456789012345678901234567890123456789012345678901234567890123456.78901234`,
+          target: `-123,456,789,012,345,678,901,234,567,890,123,456,789,012,345,678,901,234,567,890,123,456.78901234`,
         },
         {
           source: `-1234567890123456789012345678901234567890123456789012345678901234567890123400`,
-          target: `-12345678901234567890123456789012345678901234567890123456789012345678.901234`,
+          target: `-12,345,678,901,234,567,890,123,456,789,012,345,678,901,234,567,890,123,456,789,012,345,678.901234`,
         },
         {
           source: `0`,

packages/neuron-ui/src/utils/formatters.ts

@@ -83,23 +83,26 @@ export const CKBToShannonFormatter = (amount: string, uint: CapacityUnit) => {
 
 export const shannonToCKBFormatter = (shannon: string) => {
   const sign = shannon.startsWith('-') ? '-' : ''
-  const unsignedShannon = shannon.replace(/^-/, '')
-  let unsignedCkbStr = [...unsignedShannon.padStart(8, '0')]
-    .map((char, idx) => {
-      if (idx === Math.max(unsignedShannon.length - 8, 0)) {
-        return `.${char}`
-      }
-      return char
-    })
-    .join('')
-    .replace(/(^0+|\.?0+$)/g, '')
-  if (!unsignedCkbStr) {
-    return '0'
+  const unsignedShannon = shannon.replace(/^-?0*/, '')
+  let unsignedCKB = ''
+  if (unsignedShannon.length <= 8) {
+    unsignedCKB = `0.${unsignedShannon.padStart(8, '0')}`.replace(/\.?0+$/, '')
+  } else {
+    const decimal = `.${unsignedShannon.slice(-8)}`.replace(/\.?0+$/, '')
+    const int = unsignedShannon.slice(0, -8).replace(/\^0+/, '')
+    unsignedCKB = `${(
+      int
+        .split('')
+        .reverse()
+        .join('')
+        .match(/\d{1,3}/g) || ['0']
+    )
+      .join(',')
+      .split('')
+      .reverse()
+      .join('')}${decimal}`
   }
-  if (unsignedCkbStr.startsWith('.')) {
-    unsignedCkbStr = `0${unsignedCkbStr}`
-  }
-  return sign + unsignedCkbStr
+  return +unsignedCKB === 0 ? '0' : `${sign}${unsignedCKB}`
 }
 
 export const localNumberFormatter = (num: string | number = 0) => {