diff --git a/app/components/UI/Ramp/Views/OrderDetails/OrderContent.test.tsx b/app/components/UI/Ramp/Views/OrderDetails/OrderContent.test.tsx index 099eedd049bd..dd8acc74a218 100644 --- a/app/components/UI/Ramp/Views/OrderDetails/OrderContent.test.tsx +++ b/app/components/UI/Ramp/Views/OrderDetails/OrderContent.test.tsx @@ -166,6 +166,48 @@ describe('OrderContent', () => { ).toBeOnTheScreen(); }); + it('truncates long crypto amounts to 5 decimal places', () => { + const longDecimalOrder: RampsOrder = { + ...mockOrder, + cryptoAmount: 0.01588973776561068, + }; + renderOrder(longDecimalOrder); + const tokenAmount = screen.getByTestId('ramps-order-details-token-amount'); + expect(tokenAmount.props.children).not.toContain('0.01588973776561068'); + expect(tokenAmount).toHaveTextContent('0.01589 ETH'); + }); + + it('uses subscript notation for very small crypto amounts', () => { + const tinyAmountOrder: RampsOrder = { + ...mockOrder, + cryptoAmount: 0.00000614, + }; + renderOrder(tinyAmountOrder); + const tokenAmount = screen.getByTestId('ramps-order-details-token-amount'); + // 0.00000614 has 5 leading zeros → "0.0₅614" + expect(tokenAmount).toHaveTextContent('0.0₅614 ETH'); + }); + + it('shows "..." when cryptoAmount is missing', () => { + const noAmountOrder: RampsOrder = { + ...mockOrder, + cryptoAmount: undefined as unknown as number, + }; + renderOrder(noAmountOrder); + const tokenAmount = screen.getByTestId('ramps-order-details-token-amount'); + expect(tokenAmount).toHaveTextContent('... ETH'); + }); + + it('renders "0" when cryptoAmount is zero', () => { + const zeroAmountOrder: RampsOrder = { + ...mockOrder, + cryptoAmount: 0, + }; + renderOrder(zeroAmountOrder); + const tokenAmount = screen.getByTestId('ramps-order-details-token-amount'); + expect(tokenAmount).toHaveTextContent('0 ETH'); + }); + it('does not render info row when statusDescription is absent', () => { const orderWithoutDescription: RampsOrder = { ...mockOrder, diff --git a/app/components/UI/Ramp/Views/OrderDetails/OrderContent.tsx b/app/components/UI/Ramp/Views/OrderDetails/OrderContent.tsx index c73658759dd5..ed6c21707a09 100644 --- a/app/components/UI/Ramp/Views/OrderDetails/OrderContent.tsx +++ b/app/components/UI/Ramp/Views/OrderDetails/OrderContent.tsx @@ -24,9 +24,11 @@ import BadgeWrapper, { BadgePosition, } from '../../../../../component-library/components/Badges/BadgeWrapper'; import { AvatarSize } from '../../../../../component-library/components/Avatars/Avatar'; -import { strings } from '../../../../../../locales/i18n'; +import I18n, { strings } from '../../../../../../locales/i18n'; import { toDateFormat } from '../../../../../util/date'; import { renderFiat } from '../../../../../util/number'; +import { formatSubscriptNotation } from '../../../../../util/number/subscriptNotation'; +import { formatWithThreshold } from '../../../../../util/assets'; import { getNetworkImageSource } from '../../../../../util/networks'; import Logger from '../../../../../util/Logger'; import Button, { @@ -318,7 +320,21 @@ const OrderContent: React.FC = ({ fontWeight={FontWeight.Bold} twClassName="mt-6 text-center" > - {order.cryptoAmount} {cryptoSymbol} + {order.cryptoAmount != null + ? (formatSubscriptNotation( + parseFloat(String(order.cryptoAmount)), + ) ?? + formatWithThreshold( + parseFloat(String(order.cryptoAmount)), + 0.00001, + I18n.locale, + { + minimumFractionDigits: 0, + maximumFractionDigits: 5, + }, + )) + : '...'}{' '} + {cryptoSymbol}