fix: update last sold price (#1565)

coinbase · Nov 4, 2024 · c0cb733 · c0cb733
1 parent 878aabe
commit c0cb733
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/src/nft/components/mint/NFTAssetCost.tsx b/src/nft/components/mint/NFTAssetCost.tsx
@@ -1,5 +1,6 @@
 import { multiplyFloats } from '../../../internal/utils/multiplyFloats';
 import { cn, text } from '../../../styles/theme';
+import { formatAmount as formatSN } from '../../../swap/utils/formatAmount';
 import { formatAmount } from '../../../token/utils/formatAmount';
 import { useNFTContext } from '../NFTProvider';
 
@@ -25,7 +26,8 @@ export function NFTAssetCost({ className }: NFTAssetCostReact) {
   return (
     <div className={cn('flex py-2', text.body, className)}>
       <div className={text.headline}>
-        {multiplyFloats(Number(price.amount), quantity)} {price.currency}
+        {formatSN(`${multiplyFloats(Number(price.amount), quantity)}`)}{' '}
+        {price.currency}
       </div>
       <div className="px-2">~</div>
       <div>

diff --git a/src/nft/components/view/NFTLastSoldPrice.test.tsx b/src/nft/components/view/NFTLastSoldPrice.test.tsx
@@ -33,11 +33,26 @@ describe('NFTLastSoldPrice', () => {
 
   it('should render', () => {
     const { getByText } = render(<NFTLastSoldPrice />);
-    expect(getByText('Mint price')).toBeInTheDocument();
+    expect(getByText('Last sale price')).toBeInTheDocument();
     expect(getByText('1 ETH')).toBeInTheDocument();
     expect(getByText('$3,000.00')).toBeInTheDocument();
   });
 
+  it('should render scientific notation', () => {
+    (useNFTContext as Mock).mockReturnValue({
+      lastSoldPrice: {
+        amount: '5e-05',
+        currency: 'ETH',
+        amountUSD: '0.13',
+      },
+    });
+
+    const { getByText } = render(<NFTLastSoldPrice />);
+    expect(getByText('Last sale price')).toBeInTheDocument();
+    expect(getByText('0.00005 ETH')).toBeInTheDocument();
+    expect(getByText('$0.13')).toBeInTheDocument();
+  });
+
   it('should render null if price is not available', () => {
     (useNFTContext as Mock).mockReturnValue({
       lastSoldPrice: {
@@ -59,11 +74,13 @@ describe('NFTLastSoldPrice', () => {
 
   it('should apply custom className', () => {
     const { getByText } = render(<NFTLastSoldPrice className="custom-class" />);
-    expect(getByText('Mint price').parentElement).toHaveClass('custom-class');
+    expect(getByText('Last sale price').parentElement).toHaveClass(
+      'custom-class',
+    );
   });
 
   it('should display custom label', () => {
-    const { getByText } = render(<NFTLastSoldPrice label="Last Sold Price" />);
-    expect(getByText('Last Sold Price')).toBeInTheDocument();
+    const { getByText } = render(<NFTLastSoldPrice label="Mint Price" />);
+    expect(getByText('Mint Price')).toBeInTheDocument();
   });
 });
diff --git a/src/nft/components/view/NFTLastSoldPrice.tsx b/src/nft/components/view/NFTLastSoldPrice.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { cn, color, text } from '../../../styles/theme';
+import { formatAmount as formatSN } from '../../../swap/utils/formatAmount';
 import { formatAmount } from '../../../token/utils/formatAmount';
 import { useNFTContext } from '../NFTProvider';
 
@@ -10,7 +11,7 @@ type NFTLastSoldPriceReact = {
 
 export function NFTLastSoldPrice({
   className,
-  label = 'Mint price',
+  label = 'Last sale price',
 }: NFTLastSoldPriceReact) {
   const { lastSoldPrice } = useNFTContext();
 
@@ -29,7 +30,7 @@ export function NFTLastSoldPrice({
       <div className={cn(color.foregroundMuted)}>{label}</div>
       <div className="flex">
         <div className={text.label1}>
-          {amount} {currency}
+          {formatSN(amount)} {currency}
         </div>
         <div className="px-2">~</div>
         <div>