displayed list of all collections of Configurations

app/.env

@@ -2,3 +2,4 @@ NEXT_PUBLIC_NETWORK_URL="https://raw.githubusercontent.com/overlock-network/net/
 NEXT_PUBLIC_CONFIGURATION_COLLECTION_UPDATE_AUTHORITY="7yJ14gQeQn3nNGv8sG1Up1MHLZdk8WD61g1s4A5Kn81h,7yJ14gQeQn3nNGv8sG1Up1MHLZdk8WD61g1s4A5Kn81h"
 NEXT_PUBLIC_ANCHOR_PROVIDER_URL="http://localhost:8899"
 NEXT_PUBLIC_GAS_CONTRACT_ID="1"
+NEXT_PUBLIC_CONFIGURATION_CONTRACT_ID='2'

app/src/app/marketplace/configuration/content.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { ContractsProvider, NftContractClient } from "@/chain/client";
+import { ContractsTable } from "@/components/ContractsTable";
+
+export function Content() {
+  const contractCodeId = process.env.NEXT_PUBLIC_CONFIGURATION_CONTRACT_ID;
+
+  if (!contractCodeId) return;
+  return (
+    <ContractsProvider
+      queryClientClass={NftContractClient}
+      fetchInfo={async (client) => {
+        const info = await client.contractInfo();
+        return {
+          ...info,
+          address: client.contractAddress,
+        };
+      }}
+      contractCodeId={contractCodeId}
+    >
+      <ContractsTable />
+    </ContractsProvider>
+  );
+}

app/src/app/marketplace/configuration/page.tsx

@@ -0,0 +1,18 @@
+import { Metadata } from "next";
+import { Inset } from "@/components/AppSidebar";
+import { Content } from "./content";
+
+export const metadata: Metadata = {
+  title: "Configuration Collections Marketplace",
+  description: "List of available Configuration Collections on marketplace.",
+};
+
+export default function ConfigurationsPage() {
+  return (
+    <Inset pageTitle={metadata.title as string}>
+      <div className="flex h-full items-center flex-col p-8">
+        <Content />
+      </div>
+    </Inset>
+  );
+}

app/src/app/marketplace/gas/collection/content.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { GasContractClient } from "@/chain/client";
-
+import { NftContractClient } from "@/chain/client";
 import { useSearchParams } from "next/navigation";
 import { NftProvider } from "@/chain/client";
 import { GasCards } from "@/components/GasCards";
@@ -12,8 +11,8 @@ export function Content() {
   if (!contractId) return;
 
   return (
-    <NftProvider<GasContractClient>
-      queryClientClass={GasContractClient}
+    <NftProvider<NftContractClient>
+      queryClientClass={NftContractClient}
       fetchInfo={async (client, tokenId) => {
         return await client.nftInfo({ tokenId });
       }}

app/src/app/marketplace/gas/content.tsx

@@ -1,14 +1,17 @@
 "use client";
 
-import { ContractsProvider, GasContractClient } from "@/chain/client";
+import { ContractsProvider, NftContractClient } from "@/chain/client";
 import { ContractsTable } from "@/components/ContractsTable";
+import { useRouter } from "next/navigation";
 
 export function Content() {
   const contractCodeId = process.env.NEXT_PUBLIC_GAS_CONTRACT_ID;
+  const router = useRouter();
+
   if (!contractCodeId) return;
   return (
     <ContractsProvider
-      queryClientClass={GasContractClient}
+      queryClientClass={NftContractClient}
       fetchInfo={async (client) => {
         const info = await client.contractInfo();
         return {
@@ -18,7 +21,11 @@ export function Content() {
       }}
       contractCodeId={contractCodeId}
     >
-      <ContractsTable />
+      <ContractsTable
+        onRowClick={(row) => {
+          router.push(`/marketplace/gas/collection?id=${row.address}`);
+        }}
+      />
     </ContractsProvider>
   );
 }

app/src/chain/client/cosmos/index.ts

@@ -1,4 +1,4 @@
 export * from "./components";
 export * from "./lib/types";
 export * from "./hooks";
-export { Cw721baseQueryClient as GasContractClient } from "@/../../generated/Cw721base.client";
+export { Cw721baseQueryClient as NftContractClient } from "@/../../generated/Cw721base.client";

app/src/components/AppSidebar/AppSidebar.tsx

@@ -31,6 +31,7 @@ import {
   LibraryBig,
   SquareStack,
   ChevronDown,
+  Code,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 
@@ -40,6 +41,11 @@ const marketplace = [
     url: "/marketplace/gas",
     icon: Fuel,
   },
+  {
+    title: "Configurations",
+    url: "/marketplace/configuration",
+    icon: Code,
+  },
 ];
 
 const items = [

app/src/components/ContractsTable/ContractsTable.tsx

@@ -2,21 +2,21 @@ import { useContracts } from "@/chain/client";
 import { DataTable } from "../ListTable/DataTable";
 import { Contract } from "@/lib/types";
 import { ContractInfoColumns } from "../ListTable/ContractInfoColumns";
-import { useRouter } from "next/navigation";
 
-export function ContractsTable() {
+export function ContractsTable({
+  onRowClick,
+}: {
+  onRowClick?: (row: Contract) => void;
+}) {
   const { contracts, loading } = useContracts();
-  const router = useRouter();
 
   return (
     <div className="max-w-[1400px] w-full">
       <DataTable<Contract>
         columns={ContractInfoColumns()}
         data={contracts}
         isLoading={loading}
-        onRowClick={(row) =>
-          router.push(`/marketplace/gas/collection?id=${row.address}`)
-        }
+        onRowClick={(row) => onRowClick && onRowClick(row)}
       />
     </div>
   );