💄 style: Format value in TokenTag

package.json

@@ -98,6 +98,7 @@
     "leva": "^0.9.35",
     "lodash-es": "^4.17.21",
     "lucide-react": "latest",
+    "numeral": "^2.0.6",
     "polished": "^4.3.1",
     "prism-react-renderer": "^2.3.1",
     "query-string": "^9.0.0",
@@ -130,6 +131,7 @@
     "@types/chroma-js": "^2.4.4",
     "@types/lodash-es": "^4.17.12",
     "@types/mdx": "^2.0.13",
+    "@types/numeral": "^2.0.5",
     "@types/pangu": "^4.0.2",
     "@types/query-string": "^6.3.0",
     "@types/react": "18.2.40",

src/TokenTag/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useResponsive } from 'antd-style';
+import numeral from 'numeral';
 import { forwardRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -9,6 +10,8 @@ import { DivProps } from '@/types';
 
 import { ICON_SIZE, useStyles } from './style';
 
+const format = (number: number) => numeral(number).format('0,0');
+
 export interface TokenTagProps extends DivProps {
   /**
    * @default 'left'
@@ -82,7 +85,7 @@ const TokenTag = forwardRef<HTMLDivElement, TokenTagProps>(
                 : displayMode === 'remained'
                   ? text?.remained || 'Remained'
                   : text?.used || 'Used',
-              displayMode === 'remained' ? valueLeft : value,
+              displayMode === 'remained' ? format(valueLeft) : format(value),
             ].join(' ')
           : text?.overload || 'Overload'}
       </Flexbox>