add card stats (#3354)

manifoldmarkets · Jan 15, 2025 · 445bede · 445bede
1 parent f5253d3
commit 445bede
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 4 deletions.
diff --git a/mani/components/contract/feed-card.tsx b/mani/components/contract/feed-card.tsx
@@ -21,6 +21,7 @@ import { ContractPair, getDefinedContract } from 'lib/contracts'
 import { Animated } from 'react-native'
 import { useEffect, useRef } from 'react'
 import { getIsLive } from 'common/sports-info'
+import { TokenNumber } from 'components/token/token-number'
 
 function LiveDot() {
   const pulseAnim = useRef(new Animated.Value(0.4)).current
@@ -127,7 +128,7 @@ export function FeedCard(props: { contractPair: ContractPair }) {
           </Row>
         )}
       </Row>
-      {getIsLive(contract) && <LiveDot />}
+
       {isMultipleChoice ? (
         //   !isBinaryMc &&
         <>
@@ -184,6 +185,20 @@ export function FeedCard(props: { contractPair: ContractPair }) {
       ) : (
         <MultiBinaryBetButtons contract={contract as CPMMMultiContract} />
       )}
+      <Row style={{ justifyContent: 'space-between' }}>
+        <Row style={{ gap: 4 }}>
+          <TokenNumber
+            amount={contract.volume}
+            size="sm"
+            color={color.textTertiary}
+            shortened
+          />
+          <ThemedText color={color.textQuaternary} size="sm">
+            volume
+          </ThemedText>
+        </Row>
+        {getIsLive(contract) && <LiveDot />}
+      </Row>
     </TouchableOpacity>
   )
 }
diff --git a/mani/components/token/token-number.tsx b/mani/components/token/token-number.tsx
@@ -1,12 +1,19 @@
+import { formatShortened } from 'lib/shorten-number'
 import { Row } from '../layout/row'
 import { ThemedText, ThemedTextProps } from '../themed-text'
 import { FontSize } from '../themed-text'
 import { Token } from './token'
 
 export function TokenNumber({
   amount,
+  showDecimals = false,
+  shortened = false,
   ...rest
-}: { amount: number } & ThemedTextProps) {
+}: {
+  amount: number
+  showDecimals?: boolean
+  shortened?: boolean
+} & ThemedTextProps) {
   const getTokenSize = (size?: FontSize): number => {
     switch (size) {
       case 'xs':
@@ -43,7 +50,7 @@ export function TokenNumber({
   const getGapSize = (size?: FontSize): number => {
     switch (size) {
       case 'xs':
-        return 0.5
+        return 1
       case 'sm':
         return 1
       case 'md':
@@ -69,6 +76,12 @@ export function TokenNumber({
     }
   }
 
+  const formattedNumber = shortened
+    ? formatShortened(amount)
+    : showDecimals
+    ? amount.toFixed(2)
+    : Math.round(amount).toString()
+
   return (
     <Row style={{ alignItems: 'center', gap: getGapSize(rest.size) }}>
       <Token
@@ -79,7 +92,7 @@ export function TokenNumber({
         }}
       />
       <ThemedText family={'JetBrainsMono'} {...rest}>
-        {Number.isInteger(amount) ? amount : Number(amount.toFixed(2))}
+        {formattedNumber}
       </ThemedText>
     </Row>
   )

diff --git a/mani/lib/shorten-number.ts b/mani/lib/shorten-number.ts
@@ -0,0 +1,11 @@
+export const formatShortened = (num: number): string => {
+  const absNum = Math.abs(num)
+  const sign = num < 0 ? '-' : ''
+
+  if (absNum < 1000) return `${sign}${Math.round(absNum)}`
+  if (absNum < 10000) return `${sign}${(absNum / 1000).toFixed(1)}k`
+  if (absNum < 1000000) return `${sign}${Math.round(absNum / 1000)}k`
+  if (absNum < 10000000) return `${sign}${(absNum / 1000000).toFixed(1)}m`
+  if (absNum < 1000000000) return `${sign}${Math.round(absNum / 1000000)}m`
+  return `${sign}${Math.round(absNum / 1000000000)}b`
+}