From 7d2f1fa50fea9b2b92bae8c4bdc9e0bf2b0d0d49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Roycourt?=
 <11146088+remiroyc@users.noreply.github.com>
Date: Thu, 10 Oct 2024 20:19:10 +0200
Subject: [PATCH] feat(home): display currency in latest sales (#195)

---
 .../src/app/components/latest-sales.tsx       |  2 +-
 apps/arkmarket/src/types/index.ts             |  5 ++++
 packages/ui/src/price-tag.tsx                 | 27 ++++++++++++++++---
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/apps/arkmarket/src/app/components/latest-sales.tsx b/apps/arkmarket/src/app/components/latest-sales.tsx
index 09e4f657..db9fa1bd 100644
--- 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
index a86e6a6c..ac8080e7 100644
--- 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
index 518336eb..23a4cb13 100644
--- 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>
   );