Merge pull request #629 from curvefi/feat/filter-giga-usd

feat: hide USD values > 100T

Author: DanielSchiavini

packages/curve-ui-kit/src/shared/ui/Metric.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import Alert from '@mui/material/Alert'
 import Stack from '@mui/material/Stack'
@@ -13,6 +13,7 @@ import { TypographyVariantKey } from '@ui-kit/themes/typography'
 import { abbreviateNumber, scaleSuffix } from '@ui-kit/utils'
 import { Duration } from '../../themes/design/0_primitives'
 import AlertTitle from '@mui/material/AlertTitle'
+import { MAX_USD_VALUE } from 'ui'
 
 const { Spacing, IconSize } = SizesAndSpaces
 
@@ -94,6 +95,14 @@ type MetricValueProps = Required<Pick<Props, 'value' | 'formatter' | 'abbreviate
   copyValue: () => void
 }
 
+function runFormatter(value: number, formatter: (value: number) => string, abbreviate: boolean, symbol?: string) {
+  if (symbol === '$' && value > MAX_USD_VALUE) {
+    console.warn(`USD value is too large: ${value}`)
+    return `?`
+  }
+  return formatter(abbreviate ? abbreviateNumber(value) : value)
+}
+
 const MetricValue = ({
   value,
   formatter,
@@ -114,7 +123,10 @@ const MetricValue = ({
         )}
 
         <Typography variant={fontVariant} color="textPrimary">
-          {formatter(abbreviate ? abbreviateNumber(value) : value)}
+          {useMemo(
+            () => runFormatter(value, formatter, abbreviate, unit?.symbol),
+            [formatter, abbreviate, value, unit?.symbol],
+          )}
         </Typography>
 
         {abbreviate && (

packages/ui/src/utils/utilsConstants.ts

@@ -4,6 +4,9 @@ export const CURVE_ASSETS_URL = `${CURVE_CDN_URL}/curve-assets`
 export const CURVE_LOGO_URL = `${CURVE_ASSETS_URL}/branding/logo.png`
 export const NOT_FOUND_IMAGE_URL = `${CURVE_ASSETS_URL}/branding/four-oh-llama.jpg`
 
+// Sometimes API returns overflowed USD values. Don't show them!
+export const MAX_USD_VALUE = 100_000_000_000_000 // $ 100T 🤑
+
 export const getImageBaseUrl = (blockchainId: string) =>
   `${CURVE_ASSETS_URL}/images/assets${blockchainId == 'ethereum' ? '' : `-${blockchainId}`}/`
 

packages/ui/src/utils/utilsFormat.ts

@@ -2,6 +2,7 @@ import { detect, fromUrl, fromNavigator } from '@lingui/detect-locale'
 import BigNumber from 'bignumber.js'
 import isUndefined from 'lodash/isUndefined'
 import isNaN from 'lodash/isNaN'
+import { MAX_USD_VALUE } from './utilsConstants'
 
 BigNumber.config({ EXPONENTIAL_AT: 20, ROUNDING_MODE: BigNumber.ROUND_HALF_UP })
 export const BN = BigNumber
@@ -140,6 +141,10 @@ export function formatNumber(val: number | string | undefined | null, options?:
 }
 
 function _formatNumber(val: string | number, options: NumberFormatOptions) {
+  if (options.currency === 'USD' && Number(val) > MAX_USD_VALUE) {
+    console.warn(`USD value is too large: ${val}`)
+    return `?`
+  }
   return new Intl.NumberFormat(localeDetected, options).format(
     options.style === 'percent' ? Number(val) / 100 : Number(val),
   )