Limit large numbers to 3 sig figs

common/util/format.ts

@@ -29,6 +29,20 @@ export function formatPercent(zeroToOne: number) {
   return (zeroToOne * 100).toFixed(decimalPlaces) + '%'
 }
 
+// Eg 1234567.89 => 1.23M; 5678 => 5.68K
+export function formatLargeNumber(num: number, sigfigs = 3): string {
+  const absNum = Math.abs(num)
+  if (absNum < 1000) {
+    return num.toPrecision(sigfigs)
+  }
+
+  const suffix = ['', 'K', 'M', 'B', 'T', 'Q']
+  const suffixIdx = Math.floor(Math.log10(absNum) / 3)
+  const suffixStr = suffix[suffixIdx]
+  const numStr = (num / Math.pow(10, 3 * suffixIdx)).toPrecision(sigfigs)
+  return `${numStr}${suffixStr}`
+}
+
 export function toCamelCase(words: string) {
   const camelCase = words
     .split(' ')

web/components/contract/contract-card.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import Link from 'next/link'
 import { Row } from '../layout/row'
-import { formatPercent } from 'common/util/format'
+import { formatLargeNumber, formatPercent } from 'common/util/format'
 import {
   Contract,
   contractPath,
@@ -255,7 +255,7 @@ export function NumericResolutionOrExpectation(props: {
       ) : (
         <>
           <div className="text-3xl text-blue-400">
-            {getExpectedValue(contract)}
+            {formatLargeNumber(getExpectedValue(contract))}
           </div>
           <div className="text-base text-blue-400">expected</div>
         </>