feat: buy now / show all filters

ArkProjectNFTs · Oct 9, 2024 · 2934342 · 2934342
1 parent 3e9fd2e
commit 2934342
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 29 deletions.
diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-data.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items-data.tsx
@@ -21,6 +21,7 @@ interface CollectionItemsDataProps {
   sortDirection: CollectionSortDirection;
   viewType: ViewType;
   filters: Filters;
+  buyNow: boolean;
 }
 
 export default function CollectionItemsData({
@@ -29,6 +30,7 @@ export default function CollectionItemsData({
   sortDirection,
   viewType,
   filters,
+  buyNow,
 }: CollectionItemsDataProps) {
   const {
     data: infiniteData,
@@ -42,6 +44,7 @@ export default function CollectionItemsData({
       sortBy,
       collectionAddress,
       filters,
+      buyNow,
     ],
     refetchInterval: 10_000,
     getNextPageParam: (lastPage: CollectionTokensApiResponse) =>
@@ -54,6 +57,7 @@ export default function CollectionItemsData({
         sortDirection,
         sortBy,
         filters,
+        buyNow,
       }),
   });
 

diff --git a/...et/src/app/collection/[collectionAddress]/components/collection-items-filters-content.tsx b/...et/src/app/collection/[collectionAddress]/components/collection-items-filters-content.tsx
@@ -1,14 +1,30 @@
 import { Label } from "@ark-market/ui/label";
 import { RadioGroup, RadioGroupItem } from "@ark-market/ui/radio-group";
 
-export default function CollectionItemsFiltersContent() {
+interface CollectionItemsFiltersContentProps {
+  buyNow: boolean;
+  setBuyNow: (buyNow: boolean) => void;
+}
+
+export default function CollectionItemsFiltersContent({
+  buyNow,
+  setBuyNow,
+}: CollectionItemsFiltersContentProps) {
+  function onValueChange(value: string) {
+    if (value === "buy-now") {
+      setBuyNow(true);
+      return;
+    }
+    setBuyNow(false);
+  }
   return (
     <div>
-      <p className="px-5 pt-6 font-bold">Status</p>
+      <p className="px-5 py-4 text-base font-bold">Status</p>
 
       <RadioGroup
-        defaultValue="show-all"
-        className="mt-6 whitespace-nowrap px-5 pb-6"
+        className="whitespace-nowrap px-5 pb-6"
+        value={buyNow ? "buy-now" : "show-all"}
+        onValueChange={onValueChange}
       >
         <div className="flex items-center space-x-2">
           <RadioGroupItem value="show-all" id="show-all" />

diff --git a/...rket/src/app/collection/[collectionAddress]/components/collection-items-filters-panel.tsx b/...rket/src/app/collection/[collectionAddress]/components/collection-items-filters-panel.tsx
@@ -5,20 +5,25 @@ import { SearchInput } from "@ark-market/ui/search-input";
 
 import type { Filters } from "~/types";
 import getCollectionTraits from "~/lib/getCollectionTraits";
+import CollectionItemsFiltersContent from "./collection-items-filters-content";
 import CollectionItemsFiltersTrait from "./collection-items-filters-trait";
 
 interface CollectionItemsFiltersPanelProps {
   collectionAddress: string;
   filters: Filters;
   onFiltersChange: (newFilters: Filters) => Promise<void>;
   isOpen: boolean;
+  buyNow: boolean;
+  setBuyNow: (buyNow: boolean) => void;
 }
 
 export default function CollectionItemsFiltersPanel({
   collectionAddress,
   filters,
   onFiltersChange,
   isOpen,
+  buyNow,
+  setBuyNow,
 }: CollectionItemsFiltersPanelProps) {
   const { data } = useSuspenseQuery({
     queryKey: ["collectionTraits", collectionAddress],
@@ -66,40 +71,43 @@ export default function CollectionItemsFiltersPanel({
     (trait) => Object.keys(trait).length > 0,
   );
 
+  const showTraitsSection = Object.keys(data).length > 0;
+
   return (
     <div className="no-scrollbar sticky top-[var(--site-header-height)] z-10 hidden h-[calc(100vh-var(--site-header-height)-var(--site-footer-height))] w-64 flex-shrink-0 overflow-y-auto border-r border-border lg:block">
-      <div className="">
-        <div className="px-5 py-4 text-base font-bold">Traits</div>
-        <div className="px-4 pb-4">
-          {hasTraits && (
+      <CollectionItemsFiltersContent buyNow={buyNow} setBuyNow={setBuyNow} />
+      {showTraitsSection && (
+        <div className="">
+          <div className="px-5 pb-4 text-base font-bold">Traits</div>
+          <div className="px-4 pb-4">
             <SearchInput
               value={searchQuery}
               className="h-10"
               placeholder="Search"
               type="text"
               onChange={(e) => setSearchQuery(e.target.value)}
             />
-          )}
-        </div>
-        <div className="flex flex-col gap-2">
-          {searchQuery.length > 0 && !hasTraits && (
-            <div className="px-5">
-              <div className="mb-2 text-sm text-muted-foreground">
-                No traits found for "{searchQuery}"
+          </div>
+          <div className="flex flex-col gap-2">
+            {searchQuery.length > 0 && !hasTraits && (
+              <div className="px-5">
+                <div className="mb-2 text-sm text-muted-foreground">
+                  No traits found for "{searchQuery}"
+                </div>
               </div>
-            </div>
-          )}
-          {Object.keys(filteredData).map((key: string) => (
-            <CollectionItemsFiltersTrait
-              key={key}
-              name={key}
-              trait={filteredData[key] ?? {}}
-              selectedTraits={filters.traits}
-              onChange={handleTraitChange}
-            />
-          ))}
+            )}
+            {Object.keys(filteredData).map((key: string) => (
+              <CollectionItemsFiltersTrait
+                key={key}
+                name={key}
+                trait={filteredData[key] ?? {}}
+                selectedTraits={filters.traits}
+                onChange={handleTraitChange}
+              />
+            ))}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-items.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Suspense, useCallback, useEffect, useState } from "react";
-import { parseAsJson, useQueryState } from "nuqs";
+import { parseAsBoolean, parseAsJson, useQueryState } from "nuqs";
 
 import type { ViewType } from "~/components/view-type-toggle-group";
 import type { Filters } from "~/types";
@@ -48,6 +48,10 @@ export default function CollectionItems({
       traits: {},
     }),
   );
+  const [buyNow, setBuyNow] = useQueryState(
+    "buy_now",
+    parseAsBoolean.withDefault(false),
+  );
 
   useEffect(() => {
     const savedViewType = localStorage.getItem("viewType");
@@ -105,6 +109,8 @@ export default function CollectionItems({
           filters={filters}
           onFiltersChange={handlerFiltersChange}
           isOpen={filtersPanelOpen}
+          buyNow={buyNow}
+          setBuyNow={setBuyNow}
         />
       </Suspense>
       <CollectionItemsFiltersDialog
@@ -147,6 +153,7 @@ export default function CollectionItems({
             sortBy={sortBy}
             viewType={viewType}
             filters={filters}
+            buyNow={buyNow}
           />
         </Suspense>
       </div>

diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-summary.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import type { PropsWithClassName } from "@ark-market/ui";
 import { cn, ellipsableStyles, focusableStyles } from "@ark-market/ui";
-import { Share2, VerifiedIcon } from "@ark-market/ui/icons";
+import { VerifiedIcon } from "@ark-market/ui/icons";
 
 import type { Token } from "~/types";
 import CopyButton from "~/components/copy-button";

diff --git a/apps/arkmarket/src/lib/getCollectionTokens.ts b/apps/arkmarket/src/lib/getCollectionTokens.ts
@@ -37,6 +37,7 @@ interface GetCollectionTokensParams {
   sortDirection?: CollectionSortDirection;
   sortBy?: CollectionSortBy;
   filters?: Filters;
+  buyNow?: boolean;
 }
 
 export async function getCollectionTokens({
@@ -45,6 +46,7 @@ export async function getCollectionTokens({
   sortDirection,
   sortBy,
   filters,
+  buyNow,
 }: GetCollectionTokensParams) {
   const queryParams = [`items_per_page=${itemsPerPage}`];
 
@@ -56,6 +58,10 @@ export async function getCollectionTokens({
     queryParams.push(`page=${page}`);
   }
 
+  if (buyNow) {
+    queryParams.push("buy_now=true");
+  }
+
   if (sortBy !== undefined) {
     queryParams.push(`sort=${sortBy}`);
   }