feat: update prices to lords

apps/arkmarket/next.config.js

@@ -11,6 +11,26 @@ const config = {
   /** Enables hot reloading for local packages without a build step */
   transpilePackages: ["@ark-market/ui"],
 
+  webpack(config, { isServer }) {
+
+    config.module.rules.push({
+      test: /\.svg$/i,
+      //issuer: /\.[jt]sx?$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
+
+  experimental: {
+    turbo: {
+      rules: {
+        "*.svg": {
+          loaders: ["@svgr/webpack"],
+          as: "*.js",
+        },
+      },
+    },
+  },
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },

apps/arkmarket/package.json

@@ -20,6 +20,7 @@
     "@hookform/error-message": "^2.0.1",
     "@starknet-react/chains": "^0.1.7",
     "@starknet-react/core": "^2.8.3",
+    "@svgr/webpack": "^8.1.0",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "catalog:",
     "@tanstack/react-table": "^8.15.3",
@@ -34,6 +35,7 @@
     "geist": "^1.2.2",
     "get-starknet-core": "^3.2.0",
     "lucide-react": "^0.381.0",
+    "mobula-sdk": "^1.6.0",
     "moment": "^2.30.1",
     "next": "^14.2.3",
     "nuqs": "^1.17.4",

apps/arkmarket/src/app/api/prices/route.ts

@@ -1,19 +1,41 @@
-interface PriceEngineResponse {
-  eth_usd: number;
-  strk_usd: number;
-}
+import { env } from "~/env";
+import { Mobula } from "mobula-sdk";
 
-export async function GET() {
-  const response = await fetch("https://price-engine.arkproject.dev");
+const mobula = new Mobula({
+  apiKeyAuth: env.NEXT_PUBLIC_MOBULA_API_KEY,
+});
 
-  if (!response.ok) {
-    throw new Error("Failed to fetch price data");
-  }
+const defaultResponse = {
+  ethereum: { price: 0 },
+  starknet: { price: 0 },
+  lords: { price: 0 },
+};
+export async function GET() {
+  try {
+    const { multiDataResponse } = await mobula.fetchMultipleAssetMarketData({
+      assets: "ethereum,starknet,lords",
+    });
 
-  const data = (await response.json()) as PriceEngineResponse;
+    if (multiDataResponse?.data === undefined) {
+      return Response.json(defaultResponse);
+    }
 
-  return Response.json({
-    ethereum: { price: data.eth_usd },
-    starknet: { price: data.strk_usd },
-  });
+    return Response.json({
+      ethereum: {
+        // @ts-expect-error trust me compiler
+        price: multiDataResponse.data.ethereum.price as number,
+      },
+      starknet: {
+        // @ts-expect-error It's ok compiler
+        price: multiDataResponse.data.starknet.price as number,
+      },
+      lords: {
+        // @ts-expect-error It's ok compiler
+        price: multiDataResponse.data.lords.price as number,
+      }
+    })
+  } catch (error) {
+    console.error("Failed to fetch prices", error);
+    return Response.json(defaultResponse);
+  }
 }

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header-stats.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithClassName } from "@ark-market/ui";
 import { cn, formatNumber, formatUnits } from "@ark-market/ui";
-import EthereumLogo2 from "@ark-market/ui/icons/ethereum-logo-2";
+import LordsLogo from "~/icons/lords.svg";
 import { Separator } from "@ark-market/ui/separator";
 
 import type { Collection } from "~/types";
@@ -25,8 +25,8 @@ export default function CollectionHeaderStats({
       <div className="rounded-lg bg-card p-3.5 md:bg-transparent md:p-0">
         <p className="text-sm font-medium text-muted-foreground">Floor</p>
         <div className="flex items-center gap-2 font-medium font-numbers text-xl">
-          <EthereumLogo2 className="size-5" />
-          <p>{formatUnits(collection.floor ?? 0, 18)} ETH</p>
+          <LordsLogo className="size-5" />
+          <p>{formatUnits(collection.floor ?? 0, 18)} LORDS</p>
           {/* TODO @YohanTz: Proper color */}
           {/* <p
             className={cn(
@@ -48,9 +48,9 @@ export default function CollectionHeaderStats({
           Total Volume
         </p>
         <div className="flex items-center font-numbers gap-2 text-xl">
-          <EthereumLogo2 className="size-5" />
+          <LordsLogo className="size-5" />
           <p className="font-medium">
-            {formatNumber(collection.total_volume)} ETH
+            {formatNumber(collection.total_volume)} LORDS
           </p>
         </div>
       </div>
@@ -59,9 +59,9 @@ export default function CollectionHeaderStats({
       <div className="rounded-lg bg-card p-3.5 md:bg-transparent md:p-0">
         <p className="text-sm font-medium text-muted-foreground">7D Volume</p>
         <div className="flex items-center gap-2 font-numbers text-xl">
-          <EthereumLogo2 className="size-5" />
+          <LordsLogo className="size-5" />
           <p className="font-medium">
-            {formatNumber(collection.volume_7d_eth)} ETH
+            {formatNumber(collection.volume_7d_eth)} LORDS
           </p>
         </div>
       </div>

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx

@@ -21,6 +21,7 @@ import type { Collection } from "~/types";
 import CopyButton from "~/components/copy-button";
 import ExternalLink from "~/components/external-link";
 import CollectionHeaderStats from "./collection-header-stats";
+import { CollectionDescription } from "~/config/homepage";
 
 interface CollectionHeaderProps {
   collectionAddress: string;
@@ -36,6 +37,12 @@ export default function CollectionHeader({
 }: PropsWithClassName<CollectionHeaderProps>) {
   const [collapsibleOpen, setCollapsibleOpen] = useState(false);
 
+  const description = CollectionDescription[collection.address];
+  if (!description) {
+    return null;
+  }
+
+
   return (
     <div className={className} style={style}>
       <Collapsible
@@ -101,19 +108,13 @@ export default function CollectionHeader({
         <CollapsibleContent className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
           <p className="flex items-center gap-2 pt-8">
             Created
-            <span className="text-muted-foreground"> Feb 2000</span>
-            <svg width="4" height="4" viewBox="0 0 4 4" fill="none">
-              <circle cx="2" cy="2" r="2" fill="#D9D9D9" />
-            </svg>
-            Creator earnings
-            <span className="text-muted-foreground"> 1000%</span>
+
+            { }
+            <span className="text-muted-foreground"> {description.created}</span>
           </p>
           <p className="max-w-lg pt-4 text-sm">
-            Everai is a pioneering web3 brand set to expand its universe powered
-            by the collective creativity of its artistic partners and vibrant
-            community. In the Everai Universe, the Everais stand as the
-            mightiest heroes of Shodai&apos;s civilization… Get yours now to
-            join us in this collaborative journey to shape the Everai Universe!
+            { }
+            {description.description}
           </p>
           <CollectionHeaderStats
             collection={collection}

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-buy-now.tsx

@@ -72,6 +72,7 @@ export default function CollectionItemsBuyNow({
       tokenId: token.token_id,
       orderHash: tokenMarketData.listing.order_hash,
       startAmount: tokenMarketData.listing.start_amount,
+      currencyAddress: tokenMarketData.listing.currency_address,
     });
   };
 

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-data-grid-view.tsx

@@ -109,7 +109,7 @@ export default function CollectionItemsDataGridView({
                             ellipsableStyles,
                           )}
                         >
-                          {formatUnits(token.price, 18)} ETH
+                          {formatUnits(token.price, 18)} LORDS
                         </p>
                       ) : (
                         <p

apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-data-list-view.tsx

@@ -7,7 +7,7 @@ import { PriceTag } from "@ark-market/ui/price-tag";
 
 import { cn, ellipsableStyles, formatUnits } from "@ark-market/ui";
 import { Button } from "@ark-market/ui/button";
-import EthereumLogo2 from "@ark-market/ui/icons/ethereum-logo-2";
+import LordsLogo from "~/icons/lords.svg";
 import {
   Table,
   TableBody,
@@ -124,18 +124,18 @@ export default function CollectionItemsDataListView({
                 </TableCell>
                 <TableCell>
                   {token.price ? (
-                    <PriceTag price={token.price} />
+                    <PriceTag price={token.price} token="lords" />
                   ) : (
                     "_"
                   )}
                 </TableCell>
                 <TableCell>
                   {token.last_price ? (
                     <div className="flex items-center">
-                      <EthereumLogo2 className="size-4" />
+                      <LordsLogo className="size-4" />
                       <p>
                         {formatUnits(token.last_price, 18)}{" "}
-                        <span className="text-muted-foreground">ETH</span>
+                        <span className="text-muted-foreground">LORDS</span>
                       </p>
                     </div>
                   ) : (

apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx

@@ -1,5 +1,7 @@
 import getCollection from "~/lib/getCollection";
 import Collection from "./components/collection";
+import { notFound } from "next/navigation";
+import { CollectionDescription } from "~/config/homepage";
 
 interface CollectionPageProps {
   params: {
@@ -19,6 +21,12 @@ export default async function CollectionPage({
     collectionAddress,
   });
 
+  const collection = CollectionDescription[collectionAddress];
+  if (!collection) {
+    return notFound();
+  }
+
+
   // const collectionTokensInitialData = await getCollectionTokens({
   //   collectionAddress,
   //   sortDirection: direction,
@@ -34,7 +42,7 @@ export default async function CollectionPage({
     <Collection
       collectionAddress={collectionAddress}
       collectionInitialData={collectionInitialData}
-      // collectionTokensInitialData={collectionTokensInitialData}
+    // collectionTokensInitialData={collectionTokensInitialData}
     />
   );
 }

apps/arkmarket/src/app/components/explore-collection.tsx

@@ -43,19 +43,15 @@ export default function ExploreCollection() {
                 className={cn("group", focusableStyles)}
               >
                 <div>
-                  {collection.banner_image !== undefined ? (
-                    <div className="aspect-video w-full overflow-hidden rounded-lg">
-                      <Image
-                        src={collection.banner_image}
-                        className="aspect-video transition-transform group-hover:scale-110"
-                        alt={collection.name}
-                        height={512}
-                        width={932}
-                      />
-                    </div>
-                  ) : (
-                    <div className="aspect-video rounded-lg bg-secondary" />
-                  )}
+                  <div className="aspect-video w-full overflow-hidden rounded-lg">
+                    <Image
+                      src={collection.banner_image}
+                      className="aspect-video transition-transform group-hover:scale-110"
+                      alt={collection.name}
+                      height={512}
+                      width={932}
+                    />
+                  </div>
                   <div className="mt-4 flex items-center gap-2">
                     <Image
                       className="aspect-square w-16 rounded-sm"

apps/arkmarket/src/app/components/main-carousel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -25,24 +25,24 @@ export default function MainCarousel() {
   const intervalId = useRef<number | null>(null);
   const progressIntervalId = useRef<number | null>(null);
 
-  const startProgress = () => {
+  const startProgress = useCallback(() => {
     progressIntervalId.current = window.setInterval(() => {
       setProgressPercentage((prev) => (prev < 100 ? prev + 1 : 0));
     }, AUTO_SLIDE_INTERVAL / 100);
-  };
+  }, []);
 
-  const startAutoSlide = () => {
+  const startAutoSlide = useCallback(() => {
     intervalId.current = window.setInterval(() => {
       const nextIndex = (selectedItem + 1) % homepageConfig.mainCarousel.length;
       api?.scrollTo(nextIndex);
       setProgressPercentage(0);
     }, AUTO_SLIDE_INTERVAL);
-  };
+  }, [api, selectedItem]);
 
-  const stopAutoSlide = () => {
+  const stopAutoSlide = useCallback(() => {
     if (intervalId.current) clearInterval(intervalId.current);
     if (progressIntervalId.current) clearInterval(progressIntervalId.current);
-  };
+  }, []);
 
   useEffect(() => {
     if (api) {
@@ -53,7 +53,7 @@ export default function MainCarousel() {
         stopAutoSlide();
       };
     }
-  }, [api, selectedItem]);
+  }, [api, selectedItem, startAutoSlide, startProgress, stopAutoSlide]);
 
   useEffect(() => {
     if (api) {

apps/arkmarket/src/app/page.tsx

@@ -1,12 +1,5 @@
-import { Button } from "@ark-market/ui/button";
-
-import ExploreCategory from "./components/explore-category";
 import ExploreCollection from "./components/explore-collection";
-import LatestDrop from "./components/latest-drop";
-import LatestSales from "./components/latest-sales";
-import LiveAuctions from "./components/live-auctions";
 import MainCarousel from "./components/main-carousel";
-import TrendingNow from "./components/trending-now";
 
 export default function HomePage() {
   return (

apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/desktop-token-activity.tsx

@@ -78,7 +78,7 @@ export default function DesktopTokenActivity({
                 </TableCell>
                 <TableCell>
                   {activity.price !== null ? (
-                    <PriceTag price={activity.price} />
+                    <PriceTag price={activity.price} token="lords" />
                   ) : (
                     "_"
                   )}

apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/toast-executed-transaction-content.tsx

@@ -38,7 +38,7 @@ export default function ToastExecutedTransactionContent({
           </p>
         </div>
         <div className="text-end">
-          <p className="font-medium">{formattedPrice} ETH</p>
+          <p className="font-medium">{formattedPrice} LORDS</p>
           <p className="text-xs font-medium">${priceInUsd}</p>
         </div>
       </div>

apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/toast-rejected-transaction-content.tsx

@@ -40,7 +40,7 @@ export default function ToastRejectedTransactionContent({
           </p>
         </div>
         <div className="text-end">
-          <p className="font-medium">{formattedPrice} ETH</p>
+          <p className="font-medium">{formattedPrice} LORDS</p>
           <p className="text-xs font-medium">${priceInUsd}</p>
         </div>
       </div>