Merge pull request #2 from ArkProjectNFTs/feature/dev-382-refactor-app

chore(app): update app organisation

apps/arkmarket/src/app/(authenticated)/assets/[contract_address]/[token_id]/components/token-offers.tsx → apps/arkmarket/app/assets/[contract_address]/[token_id]/components/token-offers.tsx

@@ -46,7 +46,7 @@ const TokenOffers: React.FC<TokenOffersProps> = ({ token }) => {
   const { address, account } = useAccount();
   const isOwner = address && areAddressesEqual(token.owner, address);
   const { fulfillOffer } = useFulfillOffer();
-  if (account === undefined) return null;
+  const isConnected = account !== undefined;
 
   return (
     <div className="space-y-2">
@@ -100,7 +100,7 @@ const TokenOffers: React.FC<TokenOffersProps> = ({ token }) => {
                       <TableCell>
                         {truncateString(offer.offer_maker, 8)}
                       </TableCell>
-                      {isOwner && (
+                      {isConnected && isOwner && (
                         <TableCell>
                           <Button
                             className="opacity-0 transition-opacity group-hover:opacity-100"

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

@@ -3,8 +3,8 @@
 import React from "react";
 import { useQuery } from "react-query";
 
-import { fetchCollection } from "../queries/fetchCollection";
-import { fetchCollectionMarket } from "../queries/fetchCollectionMarket";
+import { fetchTokensMarketdata } from "../queries/fetchTokensMarketdata";
+import { fetchTokensMetadata } from "../queries/fetchTokensMetadata";
 import { mergeTokenData } from "../utils";
 import { columns } from "./columns";
 import { DataTable } from "./data-table";
@@ -26,7 +26,7 @@ export default function Collection({
     isLoading: collectionDataIsLoading,
   }: any = useQuery(
     "tokens",
-    async () => await fetchCollection(collectionAddress),
+    async () => await fetchTokensMetadata(collectionAddress),
     {
       initialData: initialCollectionData,
       refetchInterval: 10_000,
@@ -39,7 +39,7 @@ export default function Collection({
     isLoading: collectionMarketIsLoading,
   }: any = useQuery(
     "collectionMarket",
-    async () => await fetchCollectionMarket(collectionAddress),
+    async () => await fetchTokensMarketdata(collectionAddress),
     {
       initialData: initialCollectionMarketData,
       refetchInterval: 10_000,

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

@@ -0,0 +1,15 @@
+import React from "react";
+
+interface HeaderProps {
+  collectionMetadata: unknown;
+}
+
+const Header = ({ collectionMetadata }: HeaderProps) => {
+  return (
+    <div className="border-b">
+      <div className="flex h-16 items-center px-4">Header</div>
+    </div>
+  );
+};
+
+export default Header;

apps/arkmarket/app/collection/[collectionAddress]/layout.tsx

@@ -0,0 +1,25 @@
+import "@ark-market/ui/globals.css";
+
+import CollectionHeader from "./components/header";
+import { fetchCollectionMetadata } from "./queries/fetchCollectionMetadata";
+
+interface CollectionLayoutProps {
+  children: React.ReactNode;
+  params: { collectionAddress: string };
+}
+
+export default async function CollectionLayout({
+  children,
+  params,
+}: CollectionLayoutProps) {
+  const { collectionAddress } = params;
+  const collectionMetadata: unknown =
+    await fetchCollectionMetadata(collectionAddress);
+
+  return (
+    <div>
+      <CollectionHeader collectionMetadata={collectionMetadata} />
+      <div>{children}</div>
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 import Collection from "./components/collection";
-import { fetchCollection } from "./queries/fetchCollection";
-import { fetchCollectionMarket } from "./queries/fetchCollectionMarket";
+import { fetchTokensMarketdata } from "./queries/fetchTokensMarketdata";
+import { fetchTokensMetadata } from "./queries/fetchTokensMetadata";
 
 interface CollectionPageProps {
   params: {
@@ -12,9 +12,9 @@ export default async function CollectionPage({ params }: CollectionPageProps) {
   const { collectionAddress } = params;
 
   const initialCollectionData: unknown =
-    await fetchCollection(collectionAddress);
+    await fetchTokensMetadata(collectionAddress);
   const initialCollectionMarketData: unknown =
-    await fetchCollectionMarket(collectionAddress);
+    await fetchTokensMarketdata(collectionAddress);
 
   return (
     <main className="container py-16">

apps/arkmarket/app/collection/[collectionAddress]/queries/fetchCollectionMetadata.ts

@@ -0,0 +1,16 @@
+import { env } from "~/env";
+
+export async function fetchCollectionMetadata(contract_address: string) {
+  const response = await fetch(
+    `${env.NEXT_PUBLIC_NFT_API_URL}/v1/contracts/${contract_address}`,
+    {
+      headers: {
+        "x-api-key": env.NEXT_PUBLIC_NFT_API_KEY,
+      },
+    },
+  );
+  if (!response.ok) {
+    throw new Error("Failed to fetch data");
+  }
+  return response.json();
+}

apps/arkmarket/src/app/collection/[collectionAddress]/queries/fetchCollectionMarket.ts → apps/arkmarket/app/collection/[collectionAddress]/queries/fetchTokensMarketdata.ts

@@ -2,7 +2,7 @@ import { validateAndParseAddress } from "starknet";
 
 import { env } from "~/env";
 
-export async function fetchCollectionMarket(collectionAddress: string) {
+export async function fetchTokensMarketdata(collectionAddress: string) {
   const response = await fetch(
     `${env.NEXT_PUBLIC_ORDERBOOK_API_URL}/tokens/collection/${validateAndParseAddress(collectionAddress)}`,
   );

apps/arkmarket/src/app/collection/[collectionAddress]/queries/fetchCollection.ts → apps/arkmarket/app/collection/[collectionAddress]/queries/fetchTokensMetadata.ts

@@ -2,7 +2,7 @@ import { validateAndParseAddress } from "starknet";
 
 import { env } from "~/env";
 
-export const fetchCollection = async (collectionAddress: string) => {
+export const fetchTokensMetadata = async (collectionAddress: string) => {
   const response = await fetch(
     `${env.NEXT_PUBLIC_NFT_API_URL}/v1/tokens/${validateAndParseAddress(collectionAddress)}`,
     {

apps/arkmarket/app/page.tsx

@@ -0,0 +1,58 @@
+import Link from "next/link";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@ark-market/ui/components/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@ark-market/ui/components/carousel";
+
+export default async function HomePage() {
+  return (
+    <main className="container py-12">
+      <div className="flex flex-col space-y-4">
+        <Carousel
+          opts={{
+            align: "start",
+          }}
+          className="w-full"
+        >
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+                <div className="p-1">
+                  <Link
+                    href={`/collection/${"0x32d99485b22f2e58c8a0206d3b3bb259997ff0db70cffd25585d7dd9a5b0546"}`}
+                  >
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>Everai</CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <CardDescription>
+                          Collection description
+                        </CardDescription>
+                      </CardContent>
+                      <CardFooter>Floor price 0.2 eth</CardFooter>
+                    </Card>
+                  </Link>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </main>
+  );
+}

apps/arkmarket/components/icons.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+type IconProps = React.HTMLAttributes<SVGElement>;
+
+export const Icons = {
+  logo: (props: IconProps) => (
+    <svg
+      width="95"
+      height="95"
+      viewBox="0 0 95 95"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle cx="47.4238" cy="47" r="47" fill="#63D056" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M47.3448 78.8654C66.511 82.4541 84.4313 68.1791 87.2369 53.3224C89.5641 40.8078 78.1305 31.0202 60.6526 27.7384C39.9004 23.8615 19.8112 30.8775 17.2007 44.6607C14.632 58.5044 29.8668 75.5835 47.3448 78.8654ZM67.5151 61.4883C71.2494 62.4889 75.4354 58.9755 76.8648 53.6408C78.2942 48.3061 76.4258 43.1704 72.6915 42.1698C68.9573 41.1692 64.7713 44.6827 63.3419 50.0173C61.9124 55.352 63.7809 60.4877 67.5151 61.4883ZM70.8451 50.9925C72.7122 51.4928 74.6314 50.3848 75.1317 48.5177C75.632 46.6505 74.524 44.7314 72.6568 44.2311C70.7897 43.7308 68.8705 44.8388 68.3702 46.7059C67.8699 48.5731 68.978 50.4923 70.8451 50.9925ZM57.4542 50.1715C56.3819 56.569 52.1067 61.1844 47.9053 60.4802C43.7039 59.7759 41.1674 54.0188 42.2397 47.6213C43.312 41.2237 47.5872 36.6083 51.7886 37.3126C55.99 38.0168 58.5266 43.7739 57.4542 50.1715ZM52.5965 39.8912C54.7304 40.463 55.9967 42.6563 55.425 44.7902C54.8532 46.9241 52.6599 48.1904 50.526 47.6186C48.3921 47.0468 47.1258 44.8535 47.6976 42.7196C48.2693 40.5858 50.4627 39.3194 52.5965 39.8912Z"
+        fill="white"
+      />
+    </svg>
+  ),
+};

apps/arkmarket/src/components/main-nav.tsx → apps/arkmarket/components/main-nav.tsx

@@ -6,6 +6,9 @@ import { usePathname } from "next/navigation";
 
 import { cn } from "@ark-market/ui/lib/utils";
 
+import { Icons } from "~/components/icons";
+import { siteConfig } from "~/config/site";
+
 const mainNavLinks = [
   { name: "Home", href: "/" },
   { name: "Collections", href: "/collections" },
@@ -23,6 +26,12 @@ export function MainNav({
       className={cn("flex items-center space-x-4 lg:space-x-6", className)}
       {...props}
     >
+      <Link href="/" className="flex items-center space-x-2">
+        <Icons.logo className="h-6 w-6" />
+        <span className="hidden font-bold sm:inline-block">
+          {siteConfig.name}
+        </span>
+      </Link>
       {mainNavLinks.map((mainNavLink) => {
         const isActiveLink = mainNavLink.href === pathname;
 

apps/arkmarket/config/site.ts

@@ -0,0 +1,13 @@
+export const siteConfig = {
+  name: "ArkMarket",
+  url: "https://market.arkproject.dev",
+  ogImage: "",
+  description:
+    "Clean and simple ArkProject marketplace starter repo using Turbo repo.",
+  links: {
+    twitter: "https://twitter.com/ArkProjectNFTs",
+    github: "https://github.com/ArkProjectNFTs/ark-market",
+  },
+};
+
+export type SiteConfig = typeof siteConfig;

apps/arkmarket/next.config.js

@@ -2,7 +2,7 @@ import { fileURLToPath } from "url";
 import createJiti from "jiti";
 
 // Import env files to validate at build time. Use jiti so we can load .ts files in here.
-createJiti(fileURLToPath(import.meta.url))("./src/env");
+createJiti(fileURLToPath(import.meta.url))("./env");
 
 /** @type {import("next").NextConfig} */
 const config = {

apps/arkmarket/tailwind.config.ts

@@ -1,7 +1,8 @@
 import type { Config } from "tailwindcss";
-import baseConfig from "@ark-market/tailwind-config/web";
 import { fontFamily } from "tailwindcss/defaultTheme";
 
+import baseConfig from "@ark-market/tailwind-config/web";
+
 export default {
   // We need to append the path to the UI package to the content array so that
   // those classes are included correctly.

apps/arkmarket/tsconfig.json

@@ -10,7 +10,7 @@
     "baseUrl": ".",
     "paths": {
       "~/*": [
-        "./src/*"
+        "./*"
       ]
     },
     "plugins": [

packages/ui/components.json

@@ -11,7 +11,8 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "@/components",
-    "utils": "@ark-market/ui/lib/utils"
+    "components": "@ark-market/ui/components",
+    "utils": "@ark-market/ui/lib/utils",
+    "ui": "@ark-market/ui/components"
   }
 }

packages/ui/package.json

@@ -7,11 +7,11 @@
     "./globals.css": "./src/globals.css",
     "./postcss.config": "./postcss.config.js",
     "./lib/*": "./src/lib/*.ts",
-    "./components/*": "./src/components/ui/*.tsx"
+    "./components/*": "./src/components/*.tsx"
   },
   "license": "MIT",
   "scripts": {
-    "add": "pnpm dlx shadcn-ui add",
+    "add": "pnpm dlx shadcn-ui add -p src/components",
     "clean": "rm -rf .turbo node_modules",
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "lint": "eslint .",
@@ -34,6 +34,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
+    "embla-carousel-react": "^8.0.2",
     "ethers": "^6.11.1",
     "next-themes": "^0.2.1",
     "react-hook-form": "^7.51.1",