From 3d8db6f76f3634d532d39cf4091f22fee0a32b68 Mon Sep 17 00:00:00 2001 From: Karolis Ramanauskas Date: Tue, 8 Oct 2024 13:56:54 +0300 Subject: [PATCH] feat(explorer): add functions filter to query state (#3268) Co-authored-by: Kevin Ingersoll --- .changeset/brown-sheep-confess.md | 5 +++++ .../[chainName]/worlds/[worldAddress]/interact/Form.tsx | 5 +++-- 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 .changeset/brown-sheep-confess.md diff --git a/.changeset/brown-sheep-confess.md b/.changeset/brown-sheep-confess.md new file mode 100644 index 0000000000..55703829e7 --- /dev/null +++ b/.changeset/brown-sheep-confess.md @@ -0,0 +1,5 @@ +--- +"@latticexyz/explorer": patch +--- + +Function filters in `Interact` tab are now included as part of the URL. diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/Form.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/Form.tsx index a65dba8646..e6eb68ff84 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/Form.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/Form.tsx @@ -1,8 +1,9 @@ "use client"; import { Coins, Eye, Send } from "lucide-react"; +import { useQueryState } from "nuqs"; import { AbiFunction } from "viem"; -import { useDeferredValue, useState } from "react"; +import { useDeferredValue } from "react"; import { Input } from "../../../../../../components/ui/Input"; import { Separator } from "../../../../../../components/ui/Separator"; import { Skeleton } from "../../../../../../components/ui/Skeleton"; @@ -14,7 +15,7 @@ import { FunctionField } from "./FunctionField"; export function Form() { const [hash] = useHashState(); const { data, isFetched } = useWorldAbiQuery(); - const [filterValue, setFilterValue] = useState(""); + const [filterValue, setFilterValue] = useQueryState("function", { defaultValue: "" }); const deferredFilterValue = useDeferredValue(filterValue); const filteredFunctions = data?.abi?.filter( (item) => item.type === "function" && item.name.toLowerCase().includes(deferredFilterValue.toLowerCase()),