From 85e658750a2d146bcc9660ea3693a0b957b2c1ad Mon Sep 17 00:00:00 2001
From: remiroyc <remiroycourt@gmail.com>
Date: Mon, 14 Oct 2024 16:14:30 +0200
Subject: [PATCH] feat(ark-indexer-marketplace-admin): edit contract data

---
 .../[search]/components/SearchContracts.tsx   | 61 -------------------
 .../collections/search/[search]/page.tsx      | 13 ++--
 .../src/app/(dashboard)/indexer/page.tsx      | 34 +++++++++++
 .../src/app/(dashboard)/layout.tsx            |  1 +
 .../src/app/(dashboard)/page.tsx              | 56 ++++++++---------
 .../src/components/CollectionSearch.tsx       |  6 +-
 .../src/components/SearchContracts.tsx        | 18 ++++++
 .../components/dashboard/ContractGridItem.tsx | 56 +++++++++++++++++
 .../src/components/dashboard/Header.tsx       | 22 -------
 .../components/dashboard/NetworkSelector.tsx  |  2 +-
 .../dashboard/SearchCollectionsLayout.tsx     | 22 +++++++
 .../src/lib/queries/contract.ts               | 13 +++-
 .../src/server/api/routers/contract.ts        | 12 ++++
 13 files changed, 191 insertions(+), 125 deletions(-)
 delete mode 100644 ark-indexer-marketplace-admin/src/app/(dashboard)/collections/search/[search]/components/SearchContracts.tsx
 create mode 100644 ark-indexer-marketplace-admin/src/app/(dashboard)/indexer/page.tsx
 create mode 100644 ark-indexer-marketplace-admin/src/components/SearchContracts.tsx
 create mode 100644 ark-indexer-marketplace-admin/src/components/dashboard/ContractGridItem.tsx
 create mode 100644 ark-indexer-marketplace-admin/src/components/dashboard/SearchCollectionsLayout.tsx

diff --git a/ark-indexer-marketplace-admin/src/app/(dashboard)/collections/search/[search]/components/SearchContracts.tsx b/ark-indexer-marketplace-admin/src/app/(dashboard)/collections/search/[search]/components/SearchContracts.tsx
deleted file mode 100644
index 4fd18c28..00000000
--- a/ark-indexer-marketplace-admin/src/app/(dashboard)/collections/search/[search]/components/SearchContracts.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client";
-
-import Link from "next/link";
-
-import { api } from "~/trpc/react";
-
-export default function SearchContracts(props: { search: string }) {
-  const [contracts] = api.contract.searchContracts.useSuspenseQuery({
-    contractName: props.search,
-  });
-
-  return (
-    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
-      {contracts.map((contract) => (
-        <div key={contract.contract_address} className="space-y-3">
-          <Link
-            href={`/collections/${contract.contract_address}`}
-            className="relative block overflow-hidden rounded-md"
-            prefetch={false}
-          >
-            {contract.contract_image ? (
-              <div>
-                <img
-                  src={contract.contract_image}
-                  alt={contract.contract_name ?? ""}
-                  width={400}
-                  height={300}
-                  className="aspect-square h-auto w-auto object-cover transition-all hover:scale-105"
-                />
-              </div>
-            ) : (
-              <div className="h-[202px] w-full object-cover transition-opacity group-hover:opacity-80" />
-            )}
-
-            <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/70 to-transparent p-4">
-              <div>
-                <h3 className="text-lg font-semibold text-white">
-                  {contract.contract_name}
-                </h3>
-                <p className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-white/80"></p>
-                <div className="mt-2">
-                  {contract.is_spam && (
-                    <div className="mr-2 inline-flex items-center rounded-md bg-red-500 px-2 py-1 text-xs font-medium text-primary-foreground shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
-                      SPAM
-                    </div>
-                  )}
-
-                  {contract.is_verified && (
-                    <div className="inline-flex items-center rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
-                      VERIFIED
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </Link>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/ark-indexer-marketplace-admin/src/app/(dashboard)/collections/search/[search]/page.tsx b/ark-indexer-marketplace-admin/src/app/(dashboard)/collections/search/[search]/page.tsx
index 0dc54b2f..aa2d7ab2 100644
--- a/ark-indexer-marketplace-admin/src/app/(dashboard)/collections/search/[search]/page.tsx
+++ b/ark-indexer-marketplace-admin/src/app/(dashboard)/collections/search/[search]/page.tsx
@@ -1,6 +1,7 @@
 import { Suspense } from "react";
 
-import SearchContracts from "./components/SearchContracts";
+import SearchCollectionsLayout from "~/components/dashboard/SearchCollectionsLayout";
+import SearchContracts from "~/components/SearchContracts";
 
 export default function CollectionSearch({
   params,
@@ -8,16 +9,10 @@ export default function CollectionSearch({
   params: { search: string };
 }) {
   return (
-    <div className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold">Search Results</h1>
-        <p className="text-muted-foreground">
-          Explore the contracts that match your search query.
-        </p>
-      </div>
+    <SearchCollectionsLayout search={params.search}>
       <Suspense>
         <SearchContracts search={params.search} />
       </Suspense>
-    </div>
+    </SearchCollectionsLayout>
   );
 }
diff --git a/ark-indexer-marketplace-admin/src/app/(dashboard)/indexer/page.tsx b/ark-indexer-marketplace-admin/src/app/(dashboard)/indexer/page.tsx
new file mode 100644
index 00000000..c36aad7a
--- /dev/null
+++ b/ark-indexer-marketplace-admin/src/app/(dashboard)/indexer/page.tsx
@@ -0,0 +1,34 @@
+import { Suspense } from "react";
+import type { NextPage } from "next";
+
+import BlocksOverview from "~/components/dashboard/BlockOverview";
+import BlocksOverviewSkeleton from "~/components/dashboard/BlockOverviewSkeleton";
+import CreateIndexerTaskForm from "~/components/dashboard/CreateIndexerTaskForm";
+import IndexerBlocksList from "~/components/dashboard/IndexerBlocksList";
+import IndexerTasksList from "~/components/dashboard/IndexerTasksList";
+import { TaskFormProvider } from "~/components/dashboard/TaskFormProvider";
+
+const IndexerPage: NextPage = () => {
+  return (
+    <TaskFormProvider>
+      <div className="flex space-x-12">
+        <div className="flex-1 p-6">
+          <Suspense fallback={<BlocksOverviewSkeleton />}>
+            <BlocksOverview />
+          </Suspense>
+          <Suspense fallback={null}>
+            <IndexerTasksList />
+          </Suspense>
+          <Suspense fallback={null}>
+            <IndexerBlocksList />
+          </Suspense>
+        </div>
+        <div className="sticky top-0 h-screen border-l p-6">
+          <CreateIndexerTaskForm />
+        </div>
+      </div>
+    </TaskFormProvider>
+  );
+};
+
+export default IndexerPage;
diff --git a/ark-indexer-marketplace-admin/src/app/(dashboard)/layout.tsx b/ark-indexer-marketplace-admin/src/app/(dashboard)/layout.tsx
index 030c0376..128c7b27 100644
--- a/ark-indexer-marketplace-admin/src/app/(dashboard)/layout.tsx
+++ b/ark-indexer-marketplace-admin/src/app/(dashboard)/layout.tsx
@@ -1,5 +1,6 @@
 import { headers } from "next/headers";
 
+import CollectionSearch from "~/components/CollectionSearch";
 import Header from "~/components/dashboard/Header";
 import { NetworkProvider } from "~/components/dashboard/NetworkProvider";
 import { ThemeProvider } from "~/components/ThemeProvider";
diff --git a/ark-indexer-marketplace-admin/src/app/(dashboard)/page.tsx b/ark-indexer-marketplace-admin/src/app/(dashboard)/page.tsx
index 1bd9777f..4a4b929a 100644
--- a/ark-indexer-marketplace-admin/src/app/(dashboard)/page.tsx
+++ b/ark-indexer-marketplace-admin/src/app/(dashboard)/page.tsx
@@ -1,34 +1,34 @@
 import { Suspense } from "react";
-import type { NextPage } from "next";
 
-import BlocksOverview from "~/components/dashboard/BlockOverview";
-import BlocksOverviewSkeleton from "~/components/dashboard/BlockOverviewSkeleton";
-import CreateIndexerTaskForm from "~/components/dashboard/CreateIndexerTaskForm";
-import IndexerBlocksList from "~/components/dashboard/IndexerBlocksList";
-import IndexerTasksList from "~/components/dashboard/IndexerTasksList";
-import { TaskFormProvider } from "~/components/dashboard/TaskFormProvider";
+import CollectionSearch from "~/components/CollectionSearch";
+import ContractGridItem from "~/components/dashboard/ContractGridItem";
+import { api } from "~/trpc/server";
+import SearchContracts from "../../components/SearchContracts";
+
+export default async function DashboardPage({
+  params,
+}: {
+  params: { search: string };
+}) {
+  const contracts = await api.contract.getContracts.query();
 
-const DashboardPage: NextPage = () => {
   return (
-    <TaskFormProvider>
-      <div className="flex space-x-12">
-        <div className="flex-1 p-6">
-          <Suspense fallback={<BlocksOverviewSkeleton />}>
-            <BlocksOverview />
-          </Suspense>
-          <Suspense fallback={null}>
-            <IndexerTasksList />
-          </Suspense>
-          <Suspense fallback={null}>
-            <IndexerBlocksList />
-          </Suspense>
-        </div>
-        <div className="sticky top-0 h-screen border-l p-6">
-          <CreateIndexerTaskForm />
-        </div>
+    <div className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
+      <div className="mb-8 flex flex-col gap-2">
+        <h1 className="text-3xl font-bold">Contracts</h1>
+        <p className="text-muted-foreground">
+          Explore the contracts that match your search query.
+        </p>
+        <CollectionSearch />
+      </div>
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
+        {contracts.map((contract) => (
+          <ContractGridItem
+            key={contract.contract_address}
+            contract={contract}
+          />
+        ))}
       </div>
-    </TaskFormProvider>
+    </div>
   );
-};
-
-export default DashboardPage;
+}
diff --git a/ark-indexer-marketplace-admin/src/components/CollectionSearch.tsx b/ark-indexer-marketplace-admin/src/components/CollectionSearch.tsx
index 0dc4d009..861d1e35 100644
--- a/ark-indexer-marketplace-admin/src/components/CollectionSearch.tsx
+++ b/ark-indexer-marketplace-admin/src/components/CollectionSearch.tsx
@@ -5,8 +5,8 @@ import { useRouter } from "next/navigation";
 
 import { Input } from "./ui/input";
 
-export default function CollectionSearch() {
-  const [text, setText] = useState<string>("");
+export default function CollectionSearch(props: { search?: string }) {
+  const [text, setText] = useState<string>(props.search ?? "");
   const router = useRouter();
 
   return (
@@ -21,7 +21,7 @@ export default function CollectionSearch() {
           }
         }}
         type="search"
-        placeholder="Search collection..."
+        placeholder="Type collection name..."
         className="md:w-[100px] lg:w-[300px]"
         value={text}
       />
diff --git a/ark-indexer-marketplace-admin/src/components/SearchContracts.tsx b/ark-indexer-marketplace-admin/src/components/SearchContracts.tsx
new file mode 100644
index 00000000..80ba443e
--- /dev/null
+++ b/ark-indexer-marketplace-admin/src/components/SearchContracts.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import ContractGridItem from "~/components/dashboard/ContractGridItem";
+import { api } from "~/trpc/react";
+
+export default function SearchContracts(props: { search: string }) {
+  const [contracts] = api.contract.searchContracts.useSuspenseQuery({
+    contractName: props.search,
+  });
+
+  return (
+    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
+      {contracts.map((contract) => (
+        <ContractGridItem key={contract.contract_address} contract={contract} />
+      ))}
+    </div>
+  );
+}
diff --git a/ark-indexer-marketplace-admin/src/components/dashboard/ContractGridItem.tsx b/ark-indexer-marketplace-admin/src/components/dashboard/ContractGridItem.tsx
new file mode 100644
index 00000000..a6feffba
--- /dev/null
+++ b/ark-indexer-marketplace-admin/src/components/dashboard/ContractGridItem.tsx
@@ -0,0 +1,56 @@
+import Link from "next/link";
+
+import type { Contract } from "~/types";
+
+interface ContractGridItemProps {
+  contract: Contract;
+}
+
+export default function ContractGridItem(props: ContractGridItemProps) {
+  const { contract } = props;
+  return (
+    <div key={contract.contract_address} className="space-y-3">
+      <Link
+        href={`/collections/${contract.contract_address}`}
+        className="relative block overflow-hidden rounded-md"
+        prefetch={false}
+      >
+        {contract.contract_image ? (
+          <div className="border bg-card">
+            <img
+              src={contract.contract_image}
+              alt={contract.contract_name ?? ""}
+              width={400}
+              height={300}
+              className="aspect-square h-auto w-auto object-cover transition-all hover:scale-105"
+            />
+          </div>
+        ) : (
+          <div className="h-[202px] w-full border bg-card object-cover transition-opacity group-hover:opacity-80" />
+        )}
+
+        <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/70 to-transparent p-4">
+          <div>
+            <h3 className="text-lg font-semibold text-white">
+              {contract.contract_name}
+            </h3>
+            <p className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm text-white/80"></p>
+            <div className="mt-2">
+              {contract.is_spam && (
+                <div className="mr-2 inline-flex items-center rounded-md bg-red-500 px-2 py-1 text-xs font-medium text-primary-foreground shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
+                  SPAM
+                </div>
+              )}
+
+              {contract.is_verified && (
+                <div className="inline-flex items-center rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
+                  VERIFIED
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+}
diff --git a/ark-indexer-marketplace-admin/src/components/dashboard/Header.tsx b/ark-indexer-marketplace-admin/src/components/dashboard/Header.tsx
index ad50513f..bdc529db 100644
--- a/ark-indexer-marketplace-admin/src/components/dashboard/Header.tsx
+++ b/ark-indexer-marketplace-admin/src/components/dashboard/Header.tsx
@@ -33,7 +33,6 @@ export default function DashboardHeader({ user }: DashboardHeaderProps) {
         <Logo className="h-8 w-auto" />
         <DashboardNav />
         <div className="flex-grow" />
-        <CollectionSearch />
         <NetworkSelector />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -63,19 +62,6 @@ export default function DashboardHeader({ user }: DashboardHeaderProps) {
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <Link href="/dashboard">
-                <DropdownMenuItem className="cursor-pointer">
-                  Dashboard
-                </DropdownMenuItem>
-              </Link>
-              <Link href="/metadata">
-                <DropdownMenuItem className="cursor-pointer">
-                  Metadata
-                </DropdownMenuItem>
-              </Link>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
             <DropdownMenuGroup>
               <div className="flex items-center justify-between px-2 py-[6px]">
                 <span className="text-sm">Theme</span>
@@ -83,14 +69,6 @@ export default function DashboardHeader({ user }: DashboardHeaderProps) {
               </div>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <Link href="/home" target="_blank">
-                <DropdownMenuItem className="flex cursor-pointer justify-between">
-                  ArkProject.dev
-                </DropdownMenuItem>
-              </Link>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
             <DropdownMenuItem
               className="cursor-pointer"
               onClick={(event) => {
diff --git a/ark-indexer-marketplace-admin/src/components/dashboard/NetworkSelector.tsx b/ark-indexer-marketplace-admin/src/components/dashboard/NetworkSelector.tsx
index 1f6f7144..cbc66170 100644
--- a/ark-indexer-marketplace-admin/src/components/dashboard/NetworkSelector.tsx
+++ b/ark-indexer-marketplace-admin/src/components/dashboard/NetworkSelector.tsx
@@ -21,7 +21,7 @@ export default function NetworkSelector() {
           <SelectValue placeholder="Network" />
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value="production-mainnet">Production Mainnet</SelectItem>
+          <SelectItem value="production-mainnet">Mainnet</SelectItem>
           {/* <SelectItem value="production-sepolia">Production Sepolia</SelectItem>
           <SelectItem value="staging-mainnet">Staging Mainnet</SelectItem>
           <SelectItem value="staging-sepolia">Staging Sepolia</SelectItem> */}
diff --git a/ark-indexer-marketplace-admin/src/components/dashboard/SearchCollectionsLayout.tsx b/ark-indexer-marketplace-admin/src/components/dashboard/SearchCollectionsLayout.tsx
new file mode 100644
index 00000000..5daed324
--- /dev/null
+++ b/ark-indexer-marketplace-admin/src/components/dashboard/SearchCollectionsLayout.tsx
@@ -0,0 +1,22 @@
+import CollectionSearch from "~/components/CollectionSearch";
+
+export default function SearchCollectionsLayout({
+  children,
+  search,
+}: {
+  search?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
+      <div className="mb-8 flex flex-col gap-2">
+        <h1 className="text-3xl font-bold">Contracts</h1>
+        <p className="text-muted-foreground">
+          Explore the contracts that match your search query.
+        </p>
+        <CollectionSearch search={search} />
+      </div>
+      {children}
+    </div>
+  );
+}
diff --git a/ark-indexer-marketplace-admin/src/lib/queries/contract.ts b/ark-indexer-marketplace-admin/src/lib/queries/contract.ts
index 549f3737..416d93df 100644
--- a/ark-indexer-marketplace-admin/src/lib/queries/contract.ts
+++ b/ark-indexer-marketplace-admin/src/lib/queries/contract.ts
@@ -53,11 +53,22 @@ export async function fetchContract(contractAddress: string, chainId: string) {
   return res.rows.length > 0 ? res.rows[0] : undefined;
 }
 
+export async function getDefaultContracts(chainId: string) {
+  const res = await pool.query<Contract>(
+    `SELECT contract_address, chain_id, updated_timestamp, contract_type, contract_name, contract_symbol, contract_image, metadata_ok, is_spam, is_nsfw, deployed_timestamp, is_verified, save_images, is_refreshing
+     FROM contract
+     WHERE contract_type = 'ERC721' AND is_spam = false AND chain_id = $1 AND contract_name != '' ORDER BY contract_name ASC LIMIT 50`,
+    [chainId],
+  );
+
+  return res.rows;
+}
+
 export async function searchContracts(contractName: string, chainId: string) {
   const res = await pool.query<Contract>(
     `SELECT contract_address, chain_id, updated_timestamp, contract_type, contract_name, contract_symbol, contract_image, metadata_ok, is_spam, is_nsfw, deployed_timestamp, is_verified, save_images, is_refreshing
      FROM contract
-     WHERE contract_type = 'ERC721' AND contract_name ILIKE $1 AND chain_id = $2 ORDER BY contract_image ASC LIMIT 50`,
+     WHERE contract_type = 'ERC721' AND contract_name ILIKE $1 AND chain_id = $2 ORDER BY contract_image ASC, contract_name ASC LIMIT 50`,
     ["%" + contractName + "%", chainId],
   );
 
diff --git a/ark-indexer-marketplace-admin/src/server/api/routers/contract.ts b/ark-indexer-marketplace-admin/src/server/api/routers/contract.ts
index afeed94d..8dd169aa 100644
--- a/ark-indexer-marketplace-admin/src/server/api/routers/contract.ts
+++ b/ark-indexer-marketplace-admin/src/server/api/routers/contract.ts
@@ -5,6 +5,7 @@ import { spawnMetadataIndexerTask } from "~/lib/aws";
 import {
   fetchContract,
   fetchRefreshingContracts,
+  getDefaultContracts,
   searchContracts,
   updateContract,
   updateIsRefreshingContract,
@@ -25,6 +26,17 @@ export const contractRouter = createTRPCRouter({
       await clearListedTokensCache(input.contractAddress);
     }),
 
+  getContracts: protectedProcedure.query(async () => {
+    try {
+      const contracts = await getDefaultContracts(MAINNET_CHAIN_ID);
+
+      console.log("Contracts found:", JSON.stringify(contracts, null, 2));
+      return contracts;
+    } catch (err) {
+      return [];
+    }
+  }),
+
   searchContracts: protectedProcedure
     .input(
       z.object({