add latest block url

latticexyz · Jan 9, 2025 · 96b7a6e · 96b7a6e
1 parent 579881c
commit 96b7a6e
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 25 deletions.
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx
@@ -10,6 +10,7 @@ import Editor from "@monaco-editor/react";
 import { Button } from "../../../../../../components/ui/Button";
 import { Form, FormField } from "../../../../../../components/ui/Form";
 import { cn } from "../../../../../../utils";
+import { useTableDataQuery } from "../../../../queries/useTableDataQuery";
 import { monacoOptions } from "./consts";
 import { useMonacoSuggestions } from "./useMonacoSuggestions";
 import { useQueryValidator } from "./useQueryValidator";
@@ -24,6 +25,7 @@ export function SQLEditor({ table }: Props) {
   const [isFocused, setIsFocused] = useState(false);
   const [query, setQuery] = useQueryState("query", { defaultValue: "" });
   const validateQuery = useQueryValidator(table);
+  const { data } = useTableDataQuery({ table, query });
   useMonacoSuggestions(table);
 
   const form = useForm({
@@ -97,22 +99,31 @@ export function SQLEditor({ table }: Props) {
           )}
         />
 
-        <Button className="absolute bottom-1 right-1 ml-2 flex h-8 items-center gap-2 pl-4 pr-3" type="submit">
-          Run
-          <span className="flex items-center gap-0.5 text-white/60">
-            {navigator.platform.toLowerCase().includes("mac") ? (
-              <>
-                <CommandIcon className="h-3 w-3" />
-                <CornerDownLeft className="h-3 w-3" />
-              </>
-            ) : (
-              <>
-                <span className="text-xs">CTRL</span>
-                <CornerDownLeft className="h-3 w-3" />
-              </>
-            )}
-          </span>
-        </Button>
+        <div className="absolute bottom-1 right-1 flex items-center gap-2">
+          {data?.executionTime && (
+            <span className="flex items-center gap-1.5 text-xs text-white/60">
+              <span className="inline-block h-[6px] w-[6px] animate-pulse rounded-full bg-success" />
+              <span>{Math.round(data.executionTime)}ms</span>
+            </span>
+          )}
+
+          <Button className="ml-2 h-8 gap-2 pl-4 pr-3" type="submit">
+            Run
+            <span className="flex items-center gap-0.5 text-white/60">
+              {navigator.platform.toLowerCase().includes("mac") ? (
+                <>
+                  <CommandIcon className="h-3 w-3" />
+                  <CornerDownLeft className="h-3 w-3" />
+                </>
+              ) : (
+                <>
+                  <span className="text-xs">CTRL</span>
+                  <CornerDownLeft className="h-3 w-3" />
+                </>
+              )}
+            </span>
+          </Button>
+        </div>
       </form>
     </Form>
   );

diff --git a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts
@@ -15,16 +15,18 @@ export type TDataRow = Record<string, unknown>;
 export type TData = {
   columns: string[];
   rows: TDataRow[];
+  executionTime: number;
 };
 
 export function useTableDataQuery({ table, query }: Props) {
   const { chainName, worldAddress } = useParams();
   const { id: chainId } = useChain();
   const decodedQuery = decodeURIComponent(query ?? "");
 
-  return useQuery<DozerResponse, Error, TData | undefined>({
+  return useQuery<DozerResponse & { executionTime: number }, Error, TData | undefined>({
     queryKey: ["tableData", chainName, worldAddress, decodedQuery],
     queryFn: async () => {
+      const startTime = performance.now();
       const indexer = indexerForChainId(chainId);
       const response = await fetch(indexer.url, {
         method: "POST",
@@ -40,13 +42,15 @@ export function useTableDataQuery({ table, query }: Props) {
       });
 
       const data = await response.json();
+      const executionTime = performance.now() - startTime;
+
       if (!response.ok) {
         throw new Error(data.msg || "Network response was not ok");
       }
 
-      return data;
+      return { ...data, executionTime };
     },
-    select: (data: DozerResponse): TData | undefined => {
+    select: (data: DozerResponse & { executionTime: number }): TData | undefined => {
       if (!table || !data?.result?.[0]) return undefined;
 
       const indexer = indexerForChainId(chainId);
@@ -77,6 +81,7 @@ export function useTableDataQuery({ table, query }: Props) {
       return {
         columns,
         rows,
+        executionTime: data.executionTime,
       };
     },
     enabled: !!table && !!query,

diff --git a/packages/explorer/src/app/(explorer)/utils/blockExplorerBlockUrl.ts b/packages/explorer/src/app/(explorer)/utils/blockExplorerBlockUrl.ts
@@ -0,0 +1,18 @@
+import { chainIdToName, supportedChains, validateChainId } from "../../../common";
+
+export function blockExplorerBlockUrl({
+  blockNumber,
+  chainId,
+}: {
+  blockNumber: bigint;
+  chainId: number;
+}): string | undefined {
+  if (!blockNumber) return undefined;
+  validateChainId(chainId);
+
+  const chainName = chainIdToName[chainId];
+  const chain = supportedChains[chainName];
+  const explorerUrl = "blockExplorers" in chain && chain.blockExplorers?.default.url;
+  if (!explorerUrl) return undefined;
+  return `${explorerUrl}/block/${blockNumber.toString()}`;
+}
diff --git a/packages/explorer/src/components/LatestBlock.tsx b/packages/explorer/src/components/LatestBlock.tsx
@@ -1,24 +1,39 @@
+import Link from "next/link";
 import { useBlockNumber } from "wagmi";
 import { useChain } from "../app/(explorer)/hooks/useChain";
+import { blockExplorerBlockUrl } from "../app/(explorer)/utils/blockExplorerBlockUrl";
 import { Skeleton } from "./ui/Skeleton";
 
+function BlockView({ blockNumber }: { blockNumber: bigint }) {
+  return (
+    <div className="flex items-center justify-end gap-x-2 text-xs font-extrabold text-green-600">
+      <span className="inline-block h-[6px] w-[6px] animate-pulse rounded-full bg-success"></span>
+      <span className="opacity-70">{blockNumber.toString()}</span>
+    </div>
+  );
+}
+
 export function LatestBlock() {
   const { id: chainId } = useChain();
-  const { data: block } = useBlockNumber({
+  const { data: blockNumber } = useBlockNumber({
     watch: true,
     chainId,
     query: {
       refetchInterval: 1000,
     },
   });
+  const blockUrl = blockNumber ? blockExplorerBlockUrl({ blockNumber, chainId }) : undefined;
 
   return (
     <div className="inline-block">
-      {block ? (
-        <div className="flex items-center justify-end gap-x-2 text-xs font-extrabold text-green-600">
-          <span className="inline-block h-[8px] w-[8px] animate-pulse rounded-full bg-success"></span>
-          <span className="opacity-70">{block.toString()}</span>
-        </div>
+      {blockNumber ? (
+        blockUrl ? (
+          <Link href={blockUrl} target="_blank">
+            <BlockView blockNumber={blockNumber} />
+          </Link>
+        ) : (
+          <BlockView blockNumber={blockNumber} />
+        )
       ) : (
         <Skeleton className="h-[10px]" />
       )}