feat: design qa feedbacks (#194)

ArkProjectNFTs · Oct 9, 2024 · ef02269 · ef02269
1 parent 0e866c5
commit ef02269
Show file tree

Hide file tree

Showing 38 changed files with 421 additions and 276 deletions.
diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header-stats.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header-stats.tsx
@@ -20,7 +20,7 @@ export default function CollectionHeaderStats({
       <div className="rounded-lg bg-card p-3.5 md:bg-transparent md:p-0">
         <p className="text-sm font-medium text-muted-foreground">Floor</p>
         <div className="font-numbers flex items-center gap-2 text-sm font-medium lg:text-xl">
-          <Ethereum className="size-5" />
+          <Ethereum className="size-5" weight={45} />
           <p>{formatUnits(collection.floor ?? 0, 18)} ETH</p>
           <p
             className={cn(
@@ -42,7 +42,7 @@ export default function CollectionHeaderStats({
           Total Volume
         </p>
         <div className="font-numbers flex items-center gap-2 text-sm lg:text-xl">
-          <Ethereum className="size-5" />
+          <Ethereum className="size-5" weight={45} />
           <p className="font-medium">
             {formatNumber(collection.total_volume)} ETH
           </p>
@@ -53,7 +53,7 @@ export default function CollectionHeaderStats({
       <div className="rounded-lg bg-card p-3.5 md:bg-transparent md:p-0">
         <p className="text-sm font-medium text-muted-foreground">7D Volume</p>
         <div className="font-numbers flex items-center gap-2 text-sm lg:text-xl">
-          <Ethereum className="size-5" />
+          <Ethereum className="size-5" weight={45} />
           <p className="font-medium">
             {formatNumber(collection.volume_7d_eth)} ETH
           </p>

diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx
@@ -66,7 +66,9 @@ export default function CollectionHeader({
             <div className="flex h-full flex-shrink-0 flex-col items-start justify-between">
               <div>
                 <div className="flex items-center gap-1 text-xl">
-                  <p className="text-2xl font-semibold">{collection.name}</p>
+                  <p className="font-display text-2xl font-semibold">
+                    {collection.name}
+                  </p>
                   {collection.is_verified && (
                     <VerifiedIcon className="mt-1 text-primary" />
                   )}

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-modal.tsx b/...rket/src/app/collection/[collectionAddress]/components/collection-items-filters-modal.tsx
@@ -20,7 +20,7 @@ export default function CollectionItemsFiltersModal({
       <DialogContent>
         <DialogTitle className="sr-only">Filters</DialogTitle>
         <div className="flex h-full flex-col justify-between">
-          <CollectionItemsFiltersContent />
+          <CollectionItemsFiltersContent buyNow={false} setBuyNow={() => 1} />
           <div>
             <Button className="w-full" size="xl">
               Done

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,38 +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">
-          <SearchInput
-            value={searchQuery}
-            className="h-10 focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-            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>
-          )}
-          {Object.keys(filteredData).map((key: string) => (
-            <CollectionItemsFiltersTrait
-              key={key}
-              name={key}
-              trait={filteredData[key] ?? {}}
-              selectedTraits={filters.traits}
-              onChange={handleTraitChange}
+      <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>
+            )}
+            {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>