Merge pull request #125 from BuidlerDAO/nig-718

fix: nig-718

src/components/NumberDisplayer.test.tsx

@@ -17,6 +17,11 @@ it('if integer part less than 1, decimal part should have 4 decimals', () => {
 it('if decimal part less than 0.0001, decimal part should round into 4 decimals', () => {
   expect(render(<NumberDisplayer text="000000000012455" />).container).toMatchSnapshot();
 });
+it('if decimal part less than 0.0001, decimal part should round into 3 decimals', () => {
+  expect(
+    render(<NumberDisplayer text="000000000012455" longZeroCasePrecision={3} />).container
+  ).toMatchSnapshot();
+});
 
 it('should throw error if text is not string', () => {
   expect(() =>

src/components/NumberDisplayer.tsx

@@ -9,14 +9,24 @@ type NumberDisplayerProps = {
    * @default false
    */
   loading?: boolean;
+  /**
+   * 有很多个零的情况下最后数字的精度
+   * @default 4
+   */
+  longZeroCasePrecision?: number;
 };
 
 /**
  * 展示 bignumber 组件
  *
  * eg. 0.0{4}5252
  */
-export function NumberDisplayer({ text = '0', className, loading = false }: NumberDisplayerProps) {
+export function NumberDisplayer({
+  text = '0',
+  className,
+  loading = false,
+  longZeroCasePrecision = 4,
+}: NumberDisplayerProps) {
   // 防止不会使用，或者错误传错类型，有助于开发阶段尽早发现问题
   if (typeof text !== 'string') throw new Error('text should be string');
   // 转成处理过后的字符串形式
@@ -46,11 +56,13 @@ export function NumberDisplayer({ text = '0', className, loading = false }: Numb
       const lastZeroIndex = getLastZero(valueAfterDot);
       const zeroCount = valueAfterDot.substring(0, lastZeroIndex + 1).length;
       const noneZeroValue = valueAfterDot.substring(lastZeroIndex + 1);
-      const [, noneZeroRealValue] = BigNumber(`0.${noneZeroValue}`).toFixed(4).split('.');
+      const [, noneZeroRealValue] = BigNumber(`0.${noneZeroValue}`)
+        .toFixed(longZeroCasePrecision)
+        .split('.');
       value = `0{${zeroCount}}${noneZeroRealValue}`;
     }
     return value;
-  }, [valueAfterDot, valueBeforeDot]);
+  }, [longZeroCasePrecision, valueAfterDot, valueBeforeDot]);
   // 拆分成2部分
 
   return (

src/components/__snapshots__/NumberDisplayer.test.tsx.snap

@@ -8,6 +8,14 @@ exports[`bignumber should work well 1`] = `
 </div>
 `;
 
+exports[`if decimal part less than 0.0001, decimal part should round into 3 decimals 1`] = `
+<div>
+  <span>
+    0.0{13}125
+  </span>
+</div>
+`;
+
 exports[`if decimal part less than 0.0001, decimal part should round into 4 decimals 1`] = `
 <div>
   <span>

src/components/twitterAdded/feedsPage/ethIcon.tsx

@@ -94,7 +94,7 @@ export const FriendPrice: FC<FriendPriceProps> = ({ twitterUsername }) => {
         </defs>
       </svg>
       <p className="mx-auto text-[12px] font-medium">
-        <NumberDisplayer text={userInfo?.price} />
+        <NumberDisplayer text={userInfo?.price} longZeroCasePrecision={3} />
       </p>
     </div>
   ) : null;