stampchain-io · wichopy · Dec 15, 2024
diff --git a/client/hooks/useURLUpdate.ts b/client/hooks/useURLUpdate.ts
@@ -33,7 +33,7 @@ export function useURLUpdate() {
 
     url.searchParams.set("page", "1");
 
-    self.history.pushState({}, "", url.toString());
+    // self.history.pushState({}, "", url.toString());
     self.dispatchEvent(
       new CustomEvent("urlChanged", { detail: url.toString() }),
     );

diff --git a/components/shared/Button.tsx b/components/shared/Button.tsx
@@ -1,7 +1,14 @@
 import { JSX } from "preact";
 import { IS_BROWSER } from "$fresh/runtime.ts";
 
-type ButtonVariant = "default" | "mint" | "wallet" | "cancel" | "submit";
+type ButtonVariant =
+  | "default"
+  | "unselected-filter"
+  | "selected"
+  | "mint"
+  | "wallet"
+  | "cancel"
+  | "submit";
 
 interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
@@ -13,6 +20,10 @@ interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement> {
 const VARIANT_STYLES = {
   default:
     "inline-flex items-center justify-center bg-stamp-purple border-2 border-stamp-purple rounded-md text-sm mobileLg:text-base font-extrabold text-black tracking-[0.05em] h-[42px] mobileLg:h-[48px] px-4 mobileLg:px-5 hover:border-stamp-purple-highlight hover:bg-stamp-purple-highlight transition-colors",
+  "unselected-filter":
+    "inline-flex items-center justify-center bg-stamp-purple border-2 border-stamp-purple rounded-md text-sm mobileLg:text-base font-extrabold text-black tracking-[0.05em] h-[34px] mobileLg:h-[34px] px-4 mobileLg:px-5 hover:border-stamp-purple-highlight hover:bg-stamp-purple-highlight transition-colors",
+  selected:
+    "inline-flex items-center justify-center bg-stamp-purple-highlight border-2 border-stamp-purple rounded-md text-sm mobileLg:text-base font-extrabold text-black tracking-[0.05em] h-[34px] mobileLg:h-[34px] px-4 mobileLg:px-5",
   mint:
     "inline-flex items-center justify-center bg-stamp-purple border-2 border-stamp-purple rounded-md text-xs mobileLg:text-sm font-extrabold text-black tracking-[0.05em] h-[36px] mobileLg:h-[42px] px-3 mobileLg:px-4 hover:border-stamp-purple-highlight hover:bg-stamp-purple-highlight transition-colors",
   wallet: "flex items-center justify-center w-8 h-8 cursor-pointer",

diff --git a/islands/src20/SRC20Header.tsx b/islands/src20/SRC20Header.tsx
@@ -1,11 +1,125 @@
 import { useState } from "preact/hooks";
-
+import { Button } from "$components/shared/Button.tsx";
 import { SRC20_FILTER_TYPES } from "$globals";
+import { useURLUpdate } from "$client/hooks/useURLUpdate.ts";
 
-import { Filter } from "$islands/datacontrol/Filter.tsx";
 import { Sort } from "$islands/datacontrol/Sort.tsx";
 import { SRC20SearchClient } from "$islands/src20/SRC20Search.tsx";
 
+type FilterTypes = SRC20_FILTER_TYPES;
+
+const FilterRow = ({
+  initialFilter,
+}: {
+  initialFilter: SRC20_FILTER_TYPES[];
+}) => {
+  const [filterValue, setFilterValue] = useState<SRC20_FILTER_TYPES[]>(
+    initialFilter,
+  );
+  const [loading, setLoading] = useState<boolean>(false);
+  const { updateURL } = useURLUpdate();
+
+  const handleFilterChange = (value: FilterTypes) => () => {
+    setFilterValue((prevValue) => {
+      const newFilters = prevValue.includes(value)
+        ? prevValue.filter((f) => f !== value)
+        : [...prevValue, value];
+      updateURL({ filterBy: newFilters });
+      setLoading(true);
+      return newFilters;
+    });
+  };
+
+  const clearAll = () => {
+    setFilterValue([]);
+    updateURL({ filterBy: [] });
+  };
+
+  return (
+    <div className="flex gap-3 justify-start overflow-x-auto">
+      <Button
+        variant={filterValue.length === 0 ? "selected" : "unselected-filter"}
+        onClick={clearAll}
+        disabled={loading}
+      >
+        All
+      </Button>
+      <Button
+        disabled={loading}
+        variant={filterValue.includes("minting")
+          ? "selected"
+          : "unselected-filter"}
+        onClick={handleFilterChange("minting")}
+      >
+        Minting
+      </Button>
+      <Button
+        disabled={loading}
+        variant={filterValue.includes("trending mints")
+          ? "selected"
+          : "unselected-filter"}
+        onClick={handleFilterChange("trending mints")}
+      >
+        Trending mints
+      </Button>
+      <Button
+        disabled={loading}
+        variant={filterValue.includes("deploy")
+          ? "selected"
+          : "unselected-filter"}
+        onClick={handleFilterChange("deploy")}
+      >
+        Deploy
+      </Button>
+      <Button
+        disabled={loading}
+        variant={filterValue.includes("supply")
+          ? "selected"
+          : "unselected-filter"}
+        onClick={handleFilterChange("supply")}
+      >
+        Supply
+      </Button>
+      <Button
+        disabled={loading}
+        variant={filterValue.includes("marketcap")
+          ? "selected"
+          : "unselected-filter"}
+        onClick={handleFilterChange("marketcap")}
+      >
+        Marketcap
+      </Button>
+      <Button
+        disabled={loading}
+        variant={filterValue.includes("holders")
+          ? "selected"
+          : "unselected-filter"}
+        onClick={handleFilterChange("holders")}
+      >
+        Holders
+      </Button>
+      <Button
+        disabled={loading}
+        variant={filterValue.includes("volume")
+          ? "selected"
+          : "unselected-filter"}
+        onClick={handleFilterChange("volume")}
+      >
+        Volume
+      </Button>
+      <Button
+        disabled={loading}
+        variant={filterValue.includes("price change")
+          ? "selected"
+          : "unselected-filter"}
+        onClick={handleFilterChange("price change")}
+      >
+        Price Change
+      </Button>
+    </div>
+  );
+};
+
 export const SRC20Header = (
   { filterBy, sortBy }: {
     filterBy: SRC20_FILTER_TYPES | SRC20_FILTER_TYPES[];
@@ -25,7 +139,7 @@ export const SRC20Header = (
   };
 
   return (
-    <div className="tabs">
+    <div className="tabs flex flex-col gap-9">
       <div class="flex flex-row justify-between items-center gap-3 w-full">
         <h1 className="hidden tablet:block text-5xl desktop:text-6xl purple-gradient1 font-black">
           SRC-20 TOKENS
@@ -35,21 +149,6 @@ export const SRC20Header = (
         </h1>
         <div class="flex gap-3 justify-between h-[40px]">
           <Sort initSort={sortBy} />
-          <Filter
-            initFilter={Array.isArray(filterBy) ? filterBy : [filterBy]}
-            open={isOpen1}
-            handleOpen={handleOpen1}
-            filterButtons={[
-              "minting",
-              "trending mints",
-              "deploy",
-              "supply",
-              "marketcap",
-              "holders",
-              "volume",
-              "price change",
-            ]}
-          />
           <SRC20SearchClient open2={isOpen2} handleOpen2={handleOpen2} />
           {
             /* <Search
@@ -63,6 +162,9 @@ export const SRC20Header = (
           }
         </div>
       </div>
+      <FilterRow
+        initialFilter={Array.isArray(filterBy) ? filterBy : [filterBy]}
+      />
     </div>
   );
 };