From 86375ac72a0c2a4a0bcaf6f80ba06b1be7341c4a Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Fri, 24 Jan 2025 14:00:40 +0100
Subject: [PATCH 1/2] feat: hide USD values > 100T

---
 packages/curve-ui-kit/src/shared/ui/Metric.tsx | 16 ++++++++++++++--
 packages/ui/src/utils/utilsConstants.ts        |  2 ++
 packages/ui/src/utils/utilsFormat.ts           |  5 +++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/curve-ui-kit/src/shared/ui/Metric.tsx b/packages/curve-ui-kit/src/shared/ui/Metric.tsx
index f206c33dd..a0a099488 100644
--- a/packages/curve-ui-kit/src/shared/ui/Metric.tsx
+++ b/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 && (
diff --git a/packages/ui/src/utils/utilsConstants.ts b/packages/ui/src/utils/utilsConstants.ts
index 6a7df8688..9f80e5a86 100644
--- a/packages/ui/src/utils/utilsConstants.ts
+++ b/packages/ui/src/utils/utilsConstants.ts
@@ -4,6 +4,8 @@ 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`
 
+export const MAX_USD_VALUE = 100_000_000_000_000 // $ 100T 🤑
+
 export const getImageBaseUrl = (blockchainId: string) =>
   `${CURVE_ASSETS_URL}/images/assets${blockchainId == 'ethereum' ? '' : `-${blockchainId}`}/`
 
diff --git a/packages/ui/src/utils/utilsFormat.ts b/packages/ui/src/utils/utilsFormat.ts
index da8ee92bf..d15d39a52 100644
--- a/packages/ui/src/utils/utilsFormat.ts
+++ b/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),
   )

From 0033c7ad7ffc94bc853464b870a4c8ae42ab8b6e Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Fri, 24 Jan 2025 14:13:21 +0100
Subject: [PATCH 2/2] chore: add comment

---
 packages/ui/src/utils/utilsConstants.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/utils/utilsConstants.ts b/packages/ui/src/utils/utilsConstants.ts
index 9f80e5a86..b7d935bf0 100644
--- a/packages/ui/src/utils/utilsConstants.ts
+++ b/packages/ui/src/utils/utilsConstants.ts
@@ -4,6 +4,7 @@ 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) =>