fix: ramp v2 order detail's crypto amount formatting

Author: imyugioh

app/components/UI/Ramp/Views/OrderDetails/OrderContent.test.tsx

@@ -166,6 +166,38 @@ 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('does not render info row when statusDescription is absent', () => {
     const orderWithoutDescription: RampsOrder = {
       ...mockOrder,

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<OrderContentProps> = ({
           fontWeight={FontWeight.Bold}
           twClassName="mt-6 text-center"
         >
-          {order.cryptoAmount} {cryptoSymbol}
+          {order.cryptoAmount
+            ? (formatSubscriptNotation(
+                parseFloat(String(order.cryptoAmount)),
+              ) ??
+              formatWithThreshold(
+                parseFloat(String(order.cryptoAmount)),
+                0.00001,
+                I18n.locale,
+                {
+                  minimumFractionDigits: 0,
+                  maximumFractionDigits: 5,
+                },
+              ))
+            : '...'}{' '}
+          {cryptoSymbol}
         </Text>
       </Box>