fix(market): format price tag using currency (#207)

ArkProjectNFTs · Nov 20, 2024 · 3963b2b · 3963b2b
1 parent c2f93cc
commit 3963b2b
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 43 deletions.
diff --git a/apps/arkmarket/src/app/components/latest-sales.tsx b/apps/arkmarket/src/app/components/latest-sales.tsx
@@ -83,11 +83,10 @@ export default function LatestSales() {
             </TableRow>
           </TableHeader>
           <TableBody className="text-sm font-semibold">
-            {data.data.map((sale, index) => {
-              // TOOD @YohanTz: Proper key when real data
+            {data.data.map((sale) => {
               return (
                 <TableRow
-                  key={index}
+                  key={`ls-${sale.transaction_hash}`}
                   className="group h-[5.75rem] text-muted-foreground"
                 >
                   <TableCell className="text-foreground transition-colors group-hover:text-muted-foreground">

diff --git a/...arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-offers-list-item.tsx b/...arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-offers-list-item.tsx
@@ -49,7 +49,11 @@ export default function TokenOffersListItem({
       <div className="mb-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4 overflow-hidden">
-            <PriceTag price={offer.price} className="h-7 text-xs" />
+            <PriceTag
+              price={offer.price}
+              currency={offer.currency}
+              className="h-7 text-xs"
+            />
             {offer.floor_difference ? (
               <p
                 className={cn(

diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/components/mobile-portfolio-offers.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/components/mobile-portfolio-offers.tsx
@@ -64,7 +64,11 @@ export default function MobilePortfolioOffers({
                 </div>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-4">
-                    <PriceTag price={offer.price} className="h-7 text-xs" />{" "}
+                    <PriceTag
+                      price={offer.price}
+                      currency={offer.currency}
+                      className="h-7 text-xs"
+                    />{" "}
                     <p
                       className={cn(
                         "text-sm font-medium",

diff --git a/apps/arkmarket/src/components/cells/offer-price-cell.tsx b/apps/arkmarket/src/components/cells/offer-price-cell.tsx
@@ -10,7 +10,11 @@ interface OfferProps {
 export default function OfferPriceCell({ offer }: OfferProps) {
   return (
     <TableCell>
-      <PriceTag price={offer.price} className="max-w-full" />
+      <PriceTag
+        price={offer.price}
+        currency={offer.currency}
+        className="max-w-full"
+      />
     </TableCell>
   );
 }
diff --git a/apps/arkmarket/src/components/cells/token-price-cell.tsx b/apps/arkmarket/src/components/cells/token-price-cell.tsx
@@ -17,7 +17,7 @@ export default function TokenPriceCell({ token }: PriceCellProps) {
           <LoaderCircle className="ml-4 size-4 animate-spin" />
         </div>
       ) : token.price ? (
-        <PriceTag price={token.price} />
+        <PriceTag price={token.price} currency={token.listing.currency} />
       ) : (
         "_"
       )}

diff --git a/apps/arkmarket/src/types/index.ts b/apps/arkmarket/src/types/index.ts
@@ -182,11 +182,7 @@ export interface PortfolioActivity {
   to: string;
   token_id: string;
   transaction_hash: string | null;
-  currency?: {
-    contract: string;
-    decimals: number;
-    symbol: string;
-  } | null;
+  currency: Currency;
 }
 
 export interface PortfolioOffers {
@@ -214,7 +210,7 @@ export interface PortfolioOffers {
     start_amount: string;
     start_date: number | null;
   };
-  currency?: Currency | null;
+  currency: Currency;
 }
 
 export interface CollectionActivity {
@@ -229,11 +225,7 @@ export interface CollectionActivity {
   token_id: string;
   token_metadata: TokenMetadata | null;
   transaction_hash: string | null;
-  currency?: {
-    contract: string;
-    decimals: number;
-    symbol: string;
-  } | null;
+  currency: Currency;
 }
 
 export interface TokenOffer {
@@ -243,6 +235,7 @@ export interface TokenOffer {
   offer_id: number;
   price: string;
   source: string;
+  currency: Currency;
 }
 
 export interface TokenApiResponse {
@@ -320,11 +313,7 @@ export interface TokenActivity {
   time_stamp: number;
   to: string | null;
   transaction_hash: string | null;
-  currency?: {
-    contract: string;
-    decimals: number;
-    symbol: string;
-  } | null;
+  currency: Currency;
 }
 
 export interface Filters {
@@ -341,11 +330,7 @@ export interface LatestSales {
   timestamp: number;
   to: string;
   transaction_hash: string | null;
-  currency: {
-    contract: string;
-    decimals: number;
-    symbol: string;
-  } | null;
+  currency: Currency;
 }
 
 export interface TrendingNow {

diff --git a/packages/ui/src/price-tag.tsx b/packages/ui/src/price-tag.tsx
@@ -1,14 +1,16 @@
+import { formatUnits } from "viem";
+
 import type { PropsWithClassName } from ".";
-import { cn, ellipsableStyles, formatUnits } from ".";
+import { cn, ellipsableStyles } from ".";
 import { Ethereum, Starknet } from "./icons";
 
 interface PriceTagProps {
-  price: number | bigint | string;
-  currency?: {
+  price: string;
+  currency: {
     contract: string;
-    decimals: number;
     symbol: string;
-  } | null;
+    decimals: number;
+  };
 }
 
 function CurrencyIcon({ symbol }: { symbol: string }) {
@@ -27,11 +29,7 @@ export function PriceTag({
   price,
   currency,
 }: PropsWithClassName<PriceTagProps>) {
-  if (!price) {
-    return null;
-  }
-
-  const parsedPrice = parseFloat(formatUnits(price, 18));
+  const formattedPrice = formatUnits(BigInt(price), currency.decimals);
 
   return (
     <div
@@ -40,12 +38,10 @@ export function PriceTag({
         className,
       )}
     >
-      <CurrencyIcon symbol={currency?.symbol ?? "ETH"} />
+      <CurrencyIcon symbol={currency.symbol} />
       <p className={ellipsableStyles}>
-        {isNaN(parsedPrice)
-          ? formatUnits(price, currency?.decimals ?? 18)
-          : parsedPrice.toFixed(5)}
-        <span className="text-muted-foreground">{` ${currency?.symbol ?? "ETH"}`}</span>
+        {formattedPrice}{" "}
+        <span className="text-muted-foreground">{currency.symbol}</span>
       </p>
     </div>
   );