feat: add Sort input in Filters

.changeset/config.json

@@ -8,7 +8,7 @@
   "fixed": [],
   "linked": [],
   "access": "restricted",
-  "baseBranch": "next",
+  "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "privatePackages": { "version": true, "tag": false },
   "ignore": [

.changeset/slow-tools-perform.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/web": minor
+---
+
+Added sort input in the Filters

apps/web/src/components/Filters/SortToggle.tsx

@@ -0,0 +1,25 @@
+import type { FC } from "react";
+import React from "react";
+import {
+  BarsArrowDownIcon,
+  BarsArrowUpIcon,
+} from "@heroicons/react/24/outline";
+
+import type { Sort } from "~/hooks/useQueryParams";
+import { IconButton } from "../IconButton";
+
+type SortToggleProps = {
+  type: Sort;
+  onChange: (type: Sort) => void;
+};
+
+export const SortToggle: FC<SortToggleProps> = function ({ type, onChange }) {
+  return (
+    <IconButton
+      onClick={() => onChange(type === "asc" ? "desc" : "asc")}
+      className="bg-controlBackground-light p-2 shadow-md dark:bg-controlBackground-dark"
+    >
+      {type === "desc" ? <BarsArrowDownIcon /> : <BarsArrowUpIcon />}
+    </IconButton>
+  );
+};

apps/web/src/components/Filters/index.tsx

@@ -5,6 +5,7 @@ import type { DateRangeType } from "react-tailwindcss-datepicker";
 import type { UrlObject } from "url";
 
 import { Button } from "~/components/Button";
+import type { Sort } from "~/hooks/useQueryParams";
 import { useQueryParams } from "~/hooks/useQueryParams";
 import { getISODate } from "~/utils";
 import { Card } from "../Cards/Card";
@@ -13,13 +14,15 @@ import type { NumberRange } from "../Inputs/NumberRangeInput";
 import { BlockNumberFilter } from "./BlockNumberFilter";
 import { ROLLUP_OPTIONS, RollupFilter } from "./RollupFilter";
 import { SlotFilter } from "./SlotFilter";
+import { SortToggle } from "./SortToggle";
 import { TimestampFilter } from "./TimestampFilter";
 
 type FiltersState = {
   rollup: Option | null;
   timestampRange: DateRangeType | null;
   blockNumberRange: NumberRange | null;
   slotRange: NumberRange | null;
+  sort: Sort;
 };
 
 type ClearAction<V extends keyof FiltersState> = {
@@ -44,6 +47,7 @@ const INIT_STATE: FiltersState = {
   },
   blockNumberRange: null,
   slotRange: null,
+  sort: "desc",
 };
 
 function reducer<V extends keyof FiltersState>(
@@ -75,11 +79,13 @@ export const Filters: FC = function () {
     !filters.timestampRange?.endDate &&
     !filters.timestampRange?.startDate &&
     !filters.blockNumberRange &&
-    !filters.slotRange;
+    !filters.slotRange &&
+    !filters.sort;
 
   const handleFilter = () => {
     const query: UrlObject["query"] = {};
-    const { rollup, timestampRange, blockNumberRange, slotRange } = filters;
+    const { rollup, timestampRange, blockNumberRange, slotRange, sort } =
+      filters;
 
     if (rollup) {
       if (rollup.value === "null") {
@@ -125,6 +131,10 @@ export const Filters: FC = function () {
       }
     }
 
+    if (sort) {
+      query.sort = sort;
+    }
+
     router.push({
       pathname: router.pathname,
       query,
@@ -141,6 +151,7 @@ export const Filters: FC = function () {
       endBlock,
       startSlot,
       endSlot,
+      sort,
     } = queryParams;
     const newFilters: Partial<FiltersState> = {};
 
@@ -175,13 +186,23 @@ export const Filters: FC = function () {
       };
     }
 
+    if (sort) {
+      newFilters.sort = sort;
+    }
+
     dispatch({ type: "UPDATE", payload: newFilters });
   }, [queryParams]);
 
   return (
     <Card>
       <div className="flex flex-col justify-between gap-4 lg:flex-row lg:gap-0">
         <div className="flex w-full flex-col items-center gap-2 md:flex-row">
+          <SortToggle
+            type={filters.sort}
+            onChange={(newSort) => {
+              dispatch({ type: "UPDATE", payload: { sort: newSort } });
+            }}
+          />
           <div className="w-full md:w-40">
             <RollupFilter
               selected={filters.rollup}

apps/web/src/components/IconButton.tsx

@@ -26,6 +26,10 @@ const iconVariants = cva(
         focus-visible:outline-iconHighlight-dark
 
         fill-icon-light
+        aria-pressed:fill-primary-700
+        aria-pressed:text-primary-700
+       dark:aria-pressed:fill-primary-100
+        dark:aria-pressed:text-primary-100
         text-icon-light
         hover:fill-iconHighlight-light
         hover:text-iconHighlight-light
@@ -47,10 +51,15 @@ const iconVariants = cva(
   }
 );
 
-type Props = ButtonHTMLAttributes<HTMLButtonElement> &
+export type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof iconVariants>;
 
-const IconButton: FC<Props> = ({ className, variant, size, ...props }) => {
+const IconButton: FC<IconButtonProps> = ({
+  className,
+  variant,
+  size,
+  ...props
+}) => {
   return (
     <button
       className={twMerge(iconVariants({ variant, size }), className)}

apps/web/src/hooks/useQueryParams.ts

@@ -5,6 +5,8 @@ import { Rollup } from "@blobscan/api/enums";
 
 import type { Rollup as LowercaseRollup } from "~/types";
 
+export type Sort = "asc" | "desc";
+
 type QueryParams = {
   from?: string;
   p: number;
@@ -16,6 +18,7 @@ type QueryParams = {
   endBlock?: number;
   startSlot?: number;
   endSlot?: number;
+  sort?: Sort;
 };
 
 const DEFAULT_INITIAL_PAGE_SIZE = 50;
@@ -44,6 +47,7 @@ export function useQueryParams() {
       endBlock,
       startSlot,
       endSlot,
+      sort,
     } = router.query;
 
     setQueryParams({
@@ -63,6 +67,7 @@ export function useQueryParams() {
       endBlock: parseInt(endBlock as string) || undefined,
       startSlot: parseInt(startSlot as string) || undefined,
       endSlot: parseInt(endSlot as string) || undefined,
+      sort: sort ? (sort as Sort) : undefined,
     });
   }, [router]);
 

apps/web/src/pages/blobs.tsx

@@ -62,6 +62,7 @@ const Blobs: NextPage = function () {
     endBlock,
     startSlot,
     endSlot,
+    sort,
   } = useQueryParams();
   const { data, error, isLoading } = api.blob.getAll.useQuery({
     p,
@@ -74,6 +75,7 @@ const Blobs: NextPage = function () {
     endBlock,
     startSlot,
     endSlot,
+    sort,
   });
   const { blobs, totalBlobs } = data || {};
 

apps/web/src/pages/blocks.tsx

@@ -68,6 +68,7 @@ const Blocks: NextPage = function () {
     endBlock,
     startSlot,
     endSlot,
+    sort,
   } = useQueryParams();
   const {
     data: rawBlocksData,
@@ -84,6 +85,7 @@ const Blocks: NextPage = function () {
     endBlock,
     startSlot,
     endSlot,
+    sort,
   });
   const blocksData = useMemo(() => {
     if (!rawBlocksData) {

apps/web/src/pages/txs.tsx

@@ -94,6 +94,7 @@ const Txs: NextPage = function () {
     endBlock,
     startSlot,
     endSlot,
+    sort,
   } = useQueryParams();
 
   const {
@@ -115,6 +116,7 @@ const Txs: NextPage = function () {
     startSlot,
     endSlot,
     expand: "block,blob",
+    sort,
   });
   const txsData = useMemo(() => {
     if (!rawTxsData) {