Merge dev.

src/components/metrics/ListTable.tsx

@@ -4,8 +4,8 @@ import { useSpring, config } from '@react-spring/web';
 import classNames from 'classnames';
 import { AnimatedDiv } from '@/components/common/AnimatedDiv';
 import { Empty } from '@/components/common/Empty';
-import { formatLongNumber } from '@/lib/format';
 import { useMessages } from '@/components/hooks';
+import { formatLongCurrency, formatLongNumber } from '@/lib/format';
 import styles from './ListTable.module.css';
 
 const ITEM_SIZE = 30;
@@ -21,6 +21,7 @@ export interface ListTableProps {
   virtualize?: boolean;
   showPercentage?: boolean;
   itemCount?: number;
+  currency?: string;
 }
 
 export function ListTable({
@@ -34,6 +35,7 @@ export function ListTable({
   virtualize = false,
   showPercentage = true,
   itemCount = 10,
+  currency,
 }: ListTableProps) {
   const { formatMessage, labels } = useMessages();
 
@@ -49,6 +51,7 @@ export function ListTable({
         animate={animate && !virtualize}
         showPercentage={showPercentage}
         change={renderChange ? renderChange(row, index) : null}
+        currency={currency}
       />
     );
   };
@@ -82,7 +85,15 @@ export function ListTable({
   );
 }
 
-const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentage = true }) => {
+const AnimatedRow = ({
+  label,
+  value = 0,
+  percent,
+  change,
+  animate,
+  showPercentage = true,
+  currency,
+}) => {
   const props = useSpring({
     width: percent,
     y: value,
@@ -96,7 +107,9 @@ const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentag
       <div className={styles.value}>
         {change}
         <AnimatedDiv className={styles.value} title={props?.y as any}>
-          {props.y?.to(formatLongNumber)}
+          {currency
+            ? props.y?.to(n => formatLongCurrency(n, currency))
+            : props.y?.to(formatLongNumber)}
         </AnimatedDiv>
       </div>
       {showPercentage && (