add block height param

Author: karooolis

packages/explorer/package.json

@@ -54,6 +54,7 @@
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@radix-ui/themes": "^3.0.5",

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx

@@ -1,15 +1,20 @@
 "use client";
 
-import { CommandIcon, CornerDownLeft, LoaderIcon, PauseIcon, PlayIcon } from "lucide-react";
+import { ClockIcon, CommandIcon, CornerDownLeft, LoaderIcon, PauseIcon, PlayIcon } from "lucide-react";
 import { KeyCode, KeyMod, editor } from "monaco-editor/esm/vs/editor/editor.api";
+import { useQueryState } from "nuqs";
+import { useConfig } from "wagmi";
+import { getBlock } from "wagmi/actions";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { Table } from "@latticexyz/config";
 import Editor from "@monaco-editor/react";
 import { Tooltip } from "../../../../../../components/Tooltip";
 import { Button } from "../../../../../../components/ui/Button";
 import { Form, FormField } from "../../../../../../components/ui/Form";
+import { Input } from "../../../../../../components/ui/Input";
 import { cn } from "../../../../../../utils";
+import { useChain } from "../../../../hooks/useChain";
 import { useTableDataQuery } from "../../../../queries/useTableDataQuery";
 import { PAGE_SIZE_OPTIONS, monacoOptions } from "./consts";
 import { usePaginationState } from "./hooks/usePaginationState";
@@ -31,6 +36,12 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const [isUserTriggeredRefetch, setIsUserTriggeredRefetch] = useState(false);
   const [pagination, setPagination] = usePaginationState();
   const [query, setQuery] = useSQLQueryState();
+  const [blockHeight, setBlockHeight] = useQueryState("blockHeight");
+  const [blockTimestamp, setBlockTimestamp] = useState<number | null>(null);
+  const [isLoadingBlock, setIsLoadingBlock] = useState(false);
+
+  const wagmiConfig = useConfig();
+  const { id: chainId } = useChain();
 
   const validateQuery = useQueryValidator(table);
   const { data: tableData, refetch, isRefetching: isTableDataRefetching } = useTableDataQuery({ table, isLiveQuery });
@@ -76,6 +87,32 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
     form.reset({ query });
   }, [query, form]);
 
+  // Fetch block timestamp when blockHeight changes
+  useEffect(() => {
+    const fetchBlockTimestamp = async () => {
+      if (!blockHeight || !wagmiConfig || !chainId) {
+        setBlockTimestamp(null);
+        return;
+      }
+
+      setIsLoadingBlock(true);
+      try {
+        const block = await getBlock(wagmiConfig, {
+          chainId,
+          blockNumber: BigInt(blockHeight),
+        });
+        setBlockTimestamp(Number(block.timestamp));
+      } catch (error) {
+        console.error("Failed to fetch block timestamp:", error);
+        setBlockTimestamp(null);
+      } finally {
+        setIsLoadingBlock(false);
+      }
+    };
+
+    fetchBlockTimestamp();
+  }, [blockHeight, wagmiConfig, chainId]);
+
   const updateHeight = () => {
     if (editorRef.current) {
       const contentHeight = Math.min(200, editorRef.current.getContentHeight());
@@ -182,6 +219,29 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
             </>
           ) : null}
 
+          <Input
+            type="number"
+            step="1000"
+            className="w-[120px]"
+            value={blockHeight ?? ""}
+            onChange={(e) => setBlockHeight(e.target.value)}
+          />
+
+          {blockHeight && (
+            <div className="flex items-center gap-2 text-xs text-white/60">
+              <ClockIcon className="h-3 w-3" />
+              {isLoadingBlock ? (
+                <span>Loading...</span>
+              ) : blockTimestamp ? (
+                <Tooltip text={new Date(blockTimestamp * 1000).toISOString()}>
+                  <span>{new Date(blockTimestamp * 1000).toLocaleString()}</span>
+                </Tooltip>
+              ) : (
+                <span>Invalid block</span>
+              )}
+            </div>
+          )}
+
           <Button className="group relative flex gap-2 pl-4 pr-3" type="submit" disabled={isRefetching}>
             Run
             <span className="relative flex items-center gap-0.5 text-white/60">

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/content/encodeFunctionArgs.ts

@@ -8,9 +8,30 @@ export function encodeFunctionArgs(args: unknown[], inputs: AbiFunction): unknow
     if (input.type.includes("[]")) return JSON.parse(arg as string);
     if (input.type === "tuple") return JSON.parse(arg as string);
     if (input.type === "bool") return arg === "true";
+
     if (input.type.startsWith("uint") || input.type.startsWith("int")) {
-      if (typeof arg === "string" && arg.endsWith("n")) return arg.slice(0, -1);
-      return arg;
+      const argStr = String(arg).trim();
+
+      // Handle values ending with "n" (BigInt notation)
+      if (argStr.endsWith("n")) {
+        const numericPart = argStr.slice(0, -1);
+        return BigInt(numericPart);
+      }
+
+      // Handle regular numeric strings
+      if (argStr === "") return 0n;
+
+      // Remove any non-numeric characters except minus sign and decimal point
+      const cleanArg = argStr.replace(/[^\d.-]/g, "");
+      if (cleanArg === "" || cleanArg === "-" || cleanArg === ".") return 0n;
+
+      // Handle decimal numbers by truncating to integer
+      if (cleanArg.includes(".")) {
+        const [integerPart] = cleanArg.split(".");
+        return BigInt(integerPart || "0");
+      }
+
+      return BigInt(cleanArg);
     }
 
     return arg;

packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts

@@ -1,4 +1,5 @@
 import { useParams } from "next/navigation";
+import { useQueryState } from "nuqs";
 import { Hex, stringify } from "viem";
 import { Table } from "@latticexyz/config";
 import { useQuery } from "@tanstack/react-query";
@@ -24,6 +25,7 @@ export function useTableDataQuery({ table, isLiveQuery }: Props) {
   const { chainName, worldAddress } = useParams();
   const { id: chainId } = useChain();
   const [query] = useSQLQueryState();
+  const [blockHeightParm] = useQueryState("blockHeight");
   const indexer = useIndexerForChainId(chainId);
 
   return useQuery<DozerResponse & { queryDuration: number; blockHeight: number }, Error, TData | undefined>({
@@ -39,6 +41,7 @@ export function useTableDataQuery({ table, isLiveQuery }: Props) {
           {
             address: worldAddress as Hex,
             query,
+            ...(blockHeightParm ? { block_height: parseInt(blockHeightParm), block_height_direction: "<=" } : {}),
           },
         ]),
       });

packages/explorer/src/components/LatestBlock.tsx

@@ -8,7 +8,7 @@ export function LatestBlock() {
     watch: true,
     chainId,
     query: {
-      refetchInterval: 1000,
+      refetchInterval: 2_000,
     },
   });
 

packages/explorer/src/components/ui/Slider.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../../utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    {/* // TODO: adjust later */}
+    {/* eslint-disable-next-line max-len */}
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };