Merge branch 'feat/upgrade-fork'

BibliothecaDAO · Sep 10, 2024 · 9df4b04 · 9df4b04
2 parents d335099 + ab8c0c2
commit 9df4b04
Show file tree

Hide file tree

Showing 20 changed files with 439 additions and 770 deletions.
diff --git a/apps/arkmarket/package.json b/apps/arkmarket/package.json
@@ -32,19 +32,18 @@
     "@vercel/speed-insights": "^1.0.12",
     "blockies-ts": "^1.0.0",
     "embla-carousel-wheel-gestures": "^8.0.1",
-    "framer-motion": "^11.5.2",
-    "geist": "^1.3.1",
-    "get-starknet-core": "^3.3.3",
+    "framer-motion": "^11.2.6",
+    "geist": "^1.2.2",
+    "get-starknet-core": "^3.3.2",
     "lucide-react": "^0.381.0",
     "mobula-sdk": "^1.6.0",
     "moment": "^2.30.1",
-    "next": "^14.2.7",
-    "nuqs": "^1.19.0",
+    "next": "^14.2.3",
+    "nuqs": "^1.18.0",
     "react": "catalog:react18",
     "react-dom": "catalog:react18",
-    "react-icons": "^5.3.0",
-    "react-query": "^3.39.3",
-    "react-virtuoso": "^4.10.2",
+    "react-icons": "^5.0.1",
+    "react-virtuoso": "^4.7.11",
     "starknet": "^6.11.0",
     "starknetkit": "^1.1.9",
     "superjson": "2.2.1",

diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-
 import { cn, focusableStyles } from "@ark-market/ui";
 import {
   Collapsible,
@@ -20,9 +18,10 @@ import {
 import type { Collection } from "~/types";
 import CopyButton from "~/components/copy-button";
 import ExternalLink from "~/components/external-link";
-import getCollection from "~/lib/getCollection";
 import CollectionHeaderStats from "./collection-header-stats";
 import { CollectionDescription } from "~/config/homepage";
+import { useQuery } from "@tanstack/react-query";
+import getCollection from "~/lib/getCollection";
 
 interface CollectionHeaderProps {
   collectionAddress: string;
@@ -35,12 +34,20 @@ export default function CollectionHeader({
 }: CollectionHeaderProps) {
   const [collapsibleOpen, setCollapsibleOpen] = useState(false);
 
+
+  const { data } = useQuery({
+    queryKey: ["collection", collectionAddress],
+    queryFn: () => getCollection({ collectionAddress }),
+    initialData: collection,
+    refetchInterval: 15_000,
+  });
+
+
   const description = CollectionDescription[collection.address];
-  if (!description) {
+  if (!data || !description) {
     return null;
   }
 
-
   return (
     <div className="hidden lg:block">
       <Collapsible
@@ -101,11 +108,11 @@ export default function CollectionHeader({
           <p className="flex items-center gap-2 pt-8">
             Created
 
-            { }
+            {}
             <span className="text-muted-foreground"> {description.created}</span>
           </p>
           <p className="max-w-lg pt-4 text-sm">
-            { }
+            {}
             {description.description}
           </p>
           <div className="block lg:hidden">

diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx
@@ -1,8 +1,10 @@
 import { notFound } from "next/navigation";
 
 import getCollection from "~/lib/getCollection";
-import Collection from "./components/collection";
-import { notFound } from "next/navigation";
+import CollectionBanner from "./components/collection-banner";
+import CollectionHeader from "./components/collection-header";
+import CollectionItems from "./components/collection-items";
+import MobileCollectionHeader from "./components/mobile-collection-header";
 import { CollectionDescription } from "~/config/homepage";
 
 interface CollectionPageProps {
@@ -15,28 +17,28 @@ export default async function CollectionPage({ params }: CollectionPageProps) {
   const { collectionAddress } = params;
   const collection = await getCollection({ collectionAddress });
 
-  const collection = CollectionDescription[collectionAddress];
-  if (!collection) {
+  const collectionDescription = CollectionDescription[collectionAddress];
+  if (!collectionDescription || !collection) {
     return notFound();
   }
 
-
-  // const collectionTokensInitialData = await getCollectionTokens({
-  //   collectionAddress,
-  //   sortDirection: direction,
-  //   sortBy: sort,
-  // });
-
-  // if (!collectionTokensInitialData.data.length) {
-  //   // TODO @YohanTz: Handle case when a collection contract is deployed but no tokens in it
-  //   notFound();
-  // }
-
   return (
-    <Collection
-      collectionAddress={collectionAddress}
-      collectionInitialData={collectionInitialData}
-    // collectionTokensInitialData={collectionTokensInitialData}
-    />
-  );
+    <div className="flex min-h-[calc(100vh-var(--site-header-height))] flex-col">
+      <CollectionBanner
+        className="hidden md:block"
+        collectionAddress={collectionAddress}
+      />
+      <CollectionHeader
+        collectionAddress={collectionAddress}
+        collection={collection}
+      />
+      <MobileCollectionHeader
+        collectionAddress={collectionAddress}
+        collection={collection}
+      />
+      <CollectionItems
+        collectionAddress={collectionAddress}
+        collectionTokenCount={collection.token_count}
+      />
+    </div>);
 }
diff --git a/apps/arkmarket/src/app/components/main-carousel.tsx b/apps/arkmarket/src/app/components/main-carousel.tsx
@@ -100,7 +100,7 @@ export default function MainCarousel() {
                           <p className="mr-1">{carouselItem.itemsCount}</p>
                           <p className="mr-1 text-muted-foreground">
                             ITEMS
-                          </p> | <EthereumLogo2 className="size-4" />
+                          </p> | <Ethereum className="size-4" />
                           {/* <p className="mr-1">{carouselItem.floorPrice}</p> */}
                           <p className="text-muted-foreground">ETH</p>
                         </div>

diff --git a/...arkmarket/src/app/token/[contractAddress]/[tokenId]/components/desktop-token-activity.tsx b/...arkmarket/src/app/token/[contractAddress]/[tokenId]/components/desktop-token-activity.tsx
@@ -40,14 +40,13 @@ export default function DesktopTokenActivity({
         </TableHeader>
         <TableBody className="font-numbers text-sm font-medium">
           {tokenActivity.map((activity, index) => {
-            const activityItem = activityTypeToItem.get(activity.activity_type);
 
             return (
               <TableRow className="group h-[4.6875rem]" key={index}>
                 <TableCell className="pl-5 transition-colors group-hover:text-muted-foreground">
                   <div className="flex items-center gap-4 whitespace-nowrap">
-                    {activityItem?.icon}
-                    <p>{activityItem?.title}</p>
+                    {activityTypeMetadata[activity.activity_type].icon}
+                    <p>{activityTypeMetadata[activity.activity_type].title}</p>
                   </div>
                 </TableCell>
                 <TableCell>

diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-about.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-about.tsx
@@ -24,6 +24,7 @@ import type { Token } from "~/types";
 import Media from "~/components/media";
 import ownerOrShortAddress from "~/lib/ownerOrShortAddress";
 import { CollectionDescription } from "~/config/homepage";
+import { siteConfig } from "~/config/site";
 
 interface TokenAboutProps {
   contractAddress: string;
@@ -90,19 +91,19 @@ export default function TokenAbout({
         </div>
 
         <div className="mt-5 flex items-center gap-4 text-muted-foreground lg:mt-10">
-          <Link href="https://twitter.com/RealmsWorld" className="flex items-center gap-2">
+          <Link href={siteConfig.links.twitter} className="flex items-center gap-2">
             <Button variant="outline" size="icon-xl" className="w-full lg:w-12">
               <XIcon className="size-4" />
             </Button>
           </Link>
-          <Link href="https://discord.com/invite/realmsworld" className="flex items-center gap-2">
+          <Link href={siteConfig.links.discord} className="flex items-center gap-2">
             <Button variant="outline" size="icon-xl" className="w-full lg:w-12">
-              <DiscordIcon className="size-4" />
+              <Discord className="size-4" />
             </Button>
           </Link>
-          <Link href="https://realms.world" className="flex items-center gap-2">
+          <Link href={siteConfig.links.realms} className="flex items-center gap-2">
             <Button variant="outline" size="icon-xl" className="w-full lg:w-12">
-              <WebsiteIcon className="size-4" />
+              <Globe className="size-4" />
             </Button>
           </Link>
         </div>

diff --git a/...kmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-offer.tsx b/...kmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-offer.tsx
@@ -60,7 +60,6 @@ const backgroundImageStyle = {
 };
 
 function TokenActionsMakeOffer({ token, small }: TokenActionsMakeOfferProps) {
-  const { account, address } = useAccount();
   const [isOpen, setIsOpen] = useState(false);
   const [modalEnabled, setModalEnabled] = useState(true);
   const { account } = useAccount();
@@ -90,7 +89,7 @@ function TokenActionsMakeOffer({ token, small }: TokenActionsMakeOfferProps) {
         (val) => {
           const num = parseEther(val);
 
-          return ethBalance && ethBalance.value >= num;
+          return data && data.value >= num;
         },
         {
           message: "You don't have enough funds in your wallet",

diff --git a/...ket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx b/...ket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx
@@ -1,8 +1,7 @@
 import { parseEther } from "viem";
 
 import { cn, ellipsableStyles } from "@ark-market/ui";
-import LordsLogo from "~/icons/lords.svg";
-import VerifiedIcon from "@ark-market/ui/icons/verified-icon";
+import { VerifiedIcon, Lords } from "@ark-market/ui/icons";
 
 import type { WalletToken } from "~/app/wallet/[walletAddress]/queries/getWalletData";
 import type { CollectionToken, Token } from "~/types";
@@ -72,7 +71,7 @@ export default function TokenActionsTokenOverview({
 
       <div className="flex flex-col items-end gap-1">
         <div className="flex whitespace-nowrap text-lg font-semibold sm:text-xl">
-          <LordsLogo className="size-6 mr-2" />
+          <Lords className="size-6 mr-2" />
           {formattedAmount || "---"} LORDS
         </div>
         <div className="overflow-hidden text-clip text-right text-sm font-semibold text-muted-foreground">

diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-stats.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-stats.tsx
@@ -6,7 +6,7 @@ import { formatEther } from "viem";
 
 import type { PropsWithClassName } from "@ark-market/ui";
 import { cn, ellipsableStyles } from "@ark-market/ui";
-import LordsLogo from "~/icons/lords.svg";
+import { Lords, Ethereum } from "@ark-market/ui/icons";
 import { Separator } from "@ark-market/ui/separator";
 
 import type { Token, TokenMarketData } from "~/types";
@@ -41,57 +41,36 @@ export default function TokenStats({
   return (
     <div
       className={cn(
-        "grid grid-cols-1 items-center justify-between gap-2 md:grid-cols-2 lg:flex lg:h-14 lg:gap-4",
+        "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:gap-0",
         className,
       )}
     >
-      <div className="flex w-full flex-col gap-2 rounded-lg bg-card p-3.5 lg:bg-inherit lg:p-0">
+      <div className="flex flex-col justify-between p-2 lg:pr-4">
         <p className="text-sm font-medium text-muted-foreground">
           Collection Floor
         </p>
         <div className="flex min-h-6 items-center gap-1 font-medium font-numbers text-xl">
-          <LordsLogo className="size-5" />
-          {isLoading || (
-            <>{formatEther(BigInt(collection?.data.floor ?? 0))} LORDS</>
-          )}
+          <Lords className="size-5" />
+          <> {data.floor ? formatEther(BigInt(data.floor)) : "_"} LORDS</>
           {/* TODO @YohanTz: Proper color */}
           {/* <p className={cn("text-sm font-semibold text-green-500")}>+ {"_"}%</p> */}
         </div>
       </div>
-      <Separator orientation="vertical" className="hidden lg:block" />
-      <div className="flex w-full flex-col gap-2 rounded-lg bg-card p-3.5 lg:bg-inherit lg:p-0">
+      <div className="flex flex-col justify-between p-2 lg:border-l lg:px-4">
         <p className="text-sm font-medium text-muted-foreground">Last sale</p>
         <div className="flex items-center gap-1 font-numbers text-xl">
-          <LordsLogo className="size-5" />
-          <p className="font-medium">
-            {formatEther(BigInt(data?.last_price ?? 0))} LORDS
-          </p>
-          <div className="font-numbers flex items-center gap-1 text-lg font-medium">
-            <Ethereum className="size-5 flex-shrink-0" />
-            <div className="min-w-0 flex-1 truncate">
-              {isLoading
-                ? "Loading..."
-                : `${formatEther(BigInt(collection?.floor ?? 0))} ETH`}
-            </div>
-          </div>
-        </div>
-      </div>
-      <Separator orientation="vertical" className="hidden lg:block" />
-      <div className="flex w-full flex-col gap-2 rounded-lg bg-card p-3.5 lg:bg-inherit lg:p-0">
-        <p className="text-sm font-medium text-muted-foreground">Top offer</p>
-        <div className="flex items-center gap-1 font-numbers text-xl">
-          <LordsLogo className="size-5" />
+          <Lords className="size-5" />
           <p className="font-medium">
-            {formatEther(BigInt(data?.top_offer.amount ?? 0))} LORDS
+            {data.last_price ? formatEther(BigInt(data.last_price)) : "_"} LORDS
           </p>
         </div>
       </div>
       <div className="flex flex-col justify-between p-2 lg:border-l lg:px-4">
         <p className="text-sm font-medium text-muted-foreground">Top offer</p>
         <div className="flex items-center gap-1 font-numbers text-xl">
-          <LordsLogo className="size-5" />
+          <Lords className="size-5" />
           <p className="font-medium">
-            {formatEther(BigInt(data?.top_offer.amount ?? 0))} LORDS
+            {data.has_offer ? formatEther(BigInt(data.top_offer.amount)) : "_"}{" "}LORDS
           </p>
         </div>
       </div>

diff --git a/apps/arkmarket/src/components/data-footer.tsx b/apps/arkmarket/src/components/data-footer.tsx
@@ -1,8 +1,6 @@
 import type { PropsWithClassName } from "@ark-market/ui";
 import { cn } from "@ark-market/ui";
-import DiscordIcon from "@ark-market/ui/icons/discord-icon";
-import GithubIcon from "@ark-market/ui/icons/github-icon";
-import XIcon from "@ark-market/ui/icons/x-icon";
+import { Discord, Github, XIcon } from "@ark-market/ui/icons";
 import { Separator } from "@ark-market/ui/separator";
 
 import ExternalLink from "~/components/external-link";
@@ -25,10 +23,13 @@ export default function DataFooter({ className }: PropsWithClassName) {
           <XIcon />
         </ExternalLink>
         <ExternalLink href={siteConfig.links.discord}>
-          <DiscordIcon />
+          <Discord />
         </ExternalLink>
         <ExternalLink href={siteConfig.links.github}>
-          <GithubIcon className="size-4" />
+          <Github className="size-4" />
+        </ExternalLink>
+        <ExternalLink href={siteConfig.links.github}>
+          <Github className="size-4" />
         </ExternalLink>
         <Separator orientation="vertical" />
       </div>

diff --git a/apps/arkmarket/src/components/footer.tsx b/apps/arkmarket/src/components/footer.tsx
@@ -5,9 +5,7 @@ import { usePathname } from "next/navigation";
 
 import { cn, focusableStyles } from "@ark-market/ui";
 import { Button } from "@ark-market/ui/button";
-import DiscordIcon from "@ark-market/ui/icons/discord-icon";
-import GithubIcon from "@ark-market/ui/icons/github-icon";
-import XIcon from "@ark-market/ui/icons/x-icon";
+import { Discord as DiscordIcon, XIcon, Github } from "@ark-market/ui/icons";
 
 import { siteConfig } from "~/config/site";
 import { Icons } from "./icons";
@@ -35,23 +33,23 @@ export default function Footer() {
           </Link>
           <p className="font-medium text-muted-foreground">Realms World</p>
           <div className="flex items-center gap-4">
-            <Link href="https://twitter.com/RealmsWorld" className="flex items-center gap-2">
+            <Link href={siteConfig.links.twitter} className="flex items-center gap-2">
               <Button variant="outline" className="w-full lg:w-auto" size="xl">
                 <p className="hidden lg:block">Follow us on </p>
                 <XIcon className="size-4" />
               </Button>
             </Link>
 
-            <Link href="https://discord.com/invite/realmsworld" className="flex items-center gap-2">
+            <Link href={siteConfig.links.discord} className="flex items-center gap-2">
               <Button variant="outline" className="w-full lg:w-auto" size="xl">
                 <p className="hidden lg:block">Join us on</p>
                 <DiscordIcon className="size-4" />
               </Button>
             </Link>
-            <Link href="https://github.com/bibliothecaDAO" className="flex items-center gap-2">
+            <Link href={siteConfig.links.github} className="flex items-center gap-2">
               <Button variant="outline" className="w-full lg:w-auto" size="xl">
                 <p className="hidden lg:block">Browse our code </p>
-                <GithubIcon className="size-4" />
+                <Github className="size-4" />
               </Button>
             </Link>
           </div>