feat(home): display currency in latest sales (#195)

ArkProjectNFTs · Oct 10, 2024 · 7d2f1fa · 7d2f1fa
1 parent ef02269
commit 7d2f1fa
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/apps/arkmarket/src/app/components/latest-sales.tsx b/apps/arkmarket/src/app/components/latest-sales.tsx
@@ -120,7 +120,7 @@ export default function LatestSales() {
                     </div>
                   </TableCell>
                   <TableCell className="text-foreground">
-                    <PriceTag price={sale.price} />
+                    <PriceTag price={sale.price} currency={sale.currency} />
                   </TableCell>
                   <TableCell className="text-primary">
                     <Link href={`/wallet/${sale.from}`}>

diff --git a/apps/arkmarket/src/types/index.ts b/apps/arkmarket/src/types/index.ts
@@ -309,6 +309,11 @@ export interface LatestSales {
   timestamp: number;
   to: string;
   transaction_hash: string | null;
+  currency: {
+    contract: string;
+    decimals: number;
+    symbol: string;
+  } | null;
 }
 
 export interface TrendingNow {

diff --git a/packages/ui/src/price-tag.tsx b/packages/ui/src/price-tag.tsx
@@ -1,13 +1,30 @@
 import type { PropsWithClassName } from ".";
 import { cn, ellipsableStyles, formatUnits } from ".";
-import { Ethereum } from "./icons";
+import { Ethereum, Starknet } from "./icons";
 
 interface PriceTagProps {
   price: number | bigint | string;
+  currency?: {
+    contract: string;
+    decimals: number;
+    symbol: string;
+  } | null;
 }
+
+function CurrencyIcon({ symbol }: { symbol: string }) {
+  switch (symbol) {
+    case "STRK":
+      return <Starknet className="size-5" />;
+    default:
+    case "ETH":
+      return <Ethereum className="size-5" />;
+  }
+}
+
 export function PriceTag({
   className,
   price,
+  currency,
 }: PropsWithClassName<PriceTagProps>) {
   if (!price) {
     return null;
@@ -22,10 +39,12 @@ export function PriceTag({
         className,
       )}
     >
-      <Ethereum className="size-5" />
+      <CurrencyIcon symbol={currency?.symbol ?? "ETH"} />
       <p className={ellipsableStyles}>
-        {isNaN(parsedPrice) ? formatUnits(price, 18) : parsedPrice.toFixed(5)}
-        <span className="text-muted-foreground"> ETH</span>
+        {isNaN(parsedPrice)
+          ? formatUnits(price, currency?.decimals ?? 18)
+          : parsedPrice.toFixed(5)}
+        <span className="text-muted-foreground">{` ${currency?.symbol ?? "ETH"}`}</span>
       </p>
     </div>
   );