fix: fix the formatPrice fn to show at least 1 relevant decimal

webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx

@@ -91,6 +91,9 @@ export const BuyWithCryptoModal = (props: Props) => {
     getMANAToken(asset.chainId)
   )
   const [canBuyAsset, setCanBuyAsset] = useState<boolean | undefined>()
+  const [insufficientToken, setInsufficientToken] = useState<
+    Token | undefined
+  >()
   const [showChainSelector, setShowChainSelector] = useState(false)
   const [showTokenSelector, setShowTokenSelector] = useState(false)
   const [crossChainProvider, setCrossChainProvider] = useState<
@@ -275,6 +278,9 @@ export const BuyWithCryptoModal = (props: Props) => {
             if (selectedToken.symbol === routeFeeCost.token.symbol) {
               canBuy =
                 balance > Number(fromAmount) + Number(routeFeeCost.totalCost)
+              if (!canBuy) {
+                setInsufficientToken(selectedToken)
+              }
             } else {
               const networkProvider = await getNetworkProvider(
                 Number(routeFeeCost.token.chainId)
@@ -289,6 +295,11 @@ export const BuyWithCryptoModal = (props: Props) => {
                 ethers.utils.parseEther(routeFeeCost.totalCost)
               )
               canBuy = canPayForGas && balance > Number(fromAmount)
+              if (!canBuy) {
+                setInsufficientToken(
+                  !canPayForGas ? routeFeeCost.token : selectedToken
+                )
+              }
             }
           }
         }
@@ -789,7 +800,7 @@ export const BuyWithCryptoModal = (props: Props) => {
               {!canBuyAsset && !isFetchingBalance && !isFetchingRoute ? (
                 <span className={styles.warning}>
                   {t('buy_with_crypto_modal.insufficient_funds', {
-                    token: selectedToken?.symbol || 'MANA'
+                    token: insufficientToken?.symbol || 'MANA'
                   })}
                 </span>
               ) : null}

webapp/src/components/Modals/BuyWithCryptoModal/utils.spec.ts

@@ -0,0 +1,32 @@
+import { Token } from 'decentraland-transactions/crossChain'
+import { formatPrice } from './utils'
+
+let token: Token
+
+describe('Utils', () => {
+  describe('formatPrice with high value token', () => {
+    beforeEach(() => {
+      token = { usdPrice: 1000 } as Token
+    })
+    it('should render the right amount of decimals', () => {
+      expect(formatPrice(1234.5678, token)).toBe(1234.5678)
+      expect(formatPrice('1234.5678', token)).toBe(1234.5678)
+      expect(formatPrice(1234.56789, token)).toBe(1234.5678)
+      expect(formatPrice('1234.56789', token)).toBe(1234.5678)
+      expect(formatPrice(0.0000001, token)).toBe(0.0000001) // show first relevant decimal even if it's too low
+    })
+  })
+
+  describe('formatPrice with low value token', () => {
+    beforeEach(() => {
+      token = { usdPrice: 0.5 } as Token
+    })
+    it('should render the right amount of decimals', () => {
+      expect(formatPrice(0.0001234, token)).toBe(0.00012)
+      expect(formatPrice('0.0001234', token)).toBe(0.00012)
+      expect(formatPrice(0.0001267, token)).toBe(0.00012)
+      expect(formatPrice('0.0001267', token)).toBe(0.00012)
+      expect(formatPrice(0.0000001, token)).toBe(0.0000001) // show first relevant decimal even if it's too low
+    })
+  })
+})

webapp/src/components/Modals/BuyWithCryptoModal/utils.ts

@@ -67,14 +67,21 @@ function truncateToDecimals(num: number, dec = 2) {
 }
 
 export function formatPrice(price: string | number, token: Token): number {
-  // Determine the number of decimals based on the USD price
-  let decimalsToShow: number
+  // Convert price to a number if it's a string
+  const numericPrice = typeof price === 'string' ? parseFloat(price) : price
 
-  // Show more decimals for smaller fractions of higher-value tokens like Ethereum
-  if (token.usdPrice && token.usdPrice <= 1.5) {
-    decimalsToShow = 4 // Show 4 decimals for tokens with prices less than 1 USD
+  // Determine the minimum number of decimals to show based on the value
+  let decimalsToShow: number
+  if (token.usdPrice && token.usdPrice >= 1.5) {
+    decimalsToShow = 4 // For tokens priced over $1.5, show up to 4 decimals
   } else {
-    decimalsToShow = 2 // Show 2 decimals for other tokens or higher-value fractions
+    decimalsToShow = 2 // Default to 2 decimals
+  }
+
+  // Ensure small values are displayed with at least two significant digits
+  if (numericPrice !== 0 && numericPrice < 0.01) {
+    const significantDigits = Math.ceil(-Math.log10(numericPrice)) + 1
+    decimalsToShow = Math.max(decimalsToShow, significantDigits)
   }
 
   // Format the price using toFixed to round and limit the number of decimals