feat(explorer): dozer integration

.changeset/cyan-chefs-obey.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Hosted SQL API integration has been added for Redstone and Garnet.

packages/explorer/package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
     "@latticexyz/common": "workspace:*",
+    "@latticexyz/config": "workspace:*",
     "@latticexyz/protocol-parser": "workspace:*",
     "@latticexyz/schema-type": "workspace:*",
     "@latticexyz/store": "workspace:*",

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

@@ -7,7 +7,7 @@ import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { getDefaultAnvilConnectors } from "../../../../../connectors/anvil";
-import { useChain } from "../../../../../hooks/useChain";
+import { useChain } from "../../../hooks/useChain";
 
 const queryClient = new QueryClient();
 

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

@@ -5,38 +5,39 @@ import { Hex } from "viem";
 import { useAccount, useConfig } from "wagmi";
 import { ChangeEvent, useState } from "react";
 import { encodeField, getFieldIndex } from "@latticexyz/protocol-parser/internal";
-import { SchemaAbiType } from "@latticexyz/schema-type/internal";
 import IBaseWorldAbi from "@latticexyz/world/out/IBaseWorld.sol/IBaseWorld.abi.json";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { waitForTransactionReceipt, writeContract } from "@wagmi/core";
 import { Checkbox } from "../../../../../../components/ui/Checkbox";
-import { useChain } from "../../../../../../hooks/useChain";
-import { camelCase, cn } from "../../../../../../lib/utils";
-import { TableConfig } from "../../../../../api/table/route";
+import { DeployedTable } from "../../../../api/utils/decodeTable";
+import { useChain } from "../../../../hooks/useChain";
+import { cn } from "../../../../lib/utils";
 
 type Props = {
   name: string;
   value: string;
   keyTuple: string[];
-  config: TableConfig;
+  deployedTable: DeployedTable;
 };
 
-export function EditableTableCell({ name, config, keyTuple, value: defaultValue }: Props) {
+export function EditableTableCell({ name, deployedTable, keyTuple, value: defaultValue }: Props) {
+  const [value, setValue] = useState<unknown>(defaultValue);
   const wagmiConfig = useConfig();
   const queryClient = useQueryClient();
   const { worldAddress } = useParams();
   const { id: chainId } = useChain();
   const account = useAccount();
-
-  const [value, setValue] = useState<unknown>(defaultValue);
-
-  const tableId = config?.table_id;
-  const fieldType = config?.value_schema[camelCase(name)] as SchemaAbiType;
+  const tableId = deployedTable?.tableId;
+  const valueSchema = deployedTable?.valueSchema;
+  const type = valueSchema[name]?.type;
 
   const { mutate, isPending } = useMutation({
     mutationFn: async (newValue: unknown) => {
-      const fieldIndex = getFieldIndex(config?.value_schema, camelCase(name));
-      const encodedField = encodeField(fieldType, newValue);
+      const fieldIndex = getFieldIndex(
+        Object.fromEntries(Object.entries(valueSchema).map(([key, value]) => [key, value.type])),
+        name,
+      );
+      const encodedField = encodeField(type, newValue);
       const txHash = await writeContract(wagmiConfig, {
         abi: IBaseWorldAbi,
         address: worldAddress as Hex,
@@ -86,7 +87,7 @@ export function EditableTableCell({ name, config, keyTuple, value: defaultValue
     }
   };
 
-  if (fieldType === "bool") {
+  if (type === "bool") {
     return (
       <>
         <Checkbox

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { parseAsString, useQueryState } from "nuqs";
+import { Hex } from "viem";
+import { anvil } from "viem/chains";
+import { useEffect } from "react";
+import { useChain } from "../../../../hooks/useChain";
+import { getTableName } from "../../../../lib/getTableName";
+import { useDeployedTablesQuery } from "../../../../queries/useDeployedTablesQuery";
+import { useTableDataQuery } from "../../../../queries/useTableDataQuery";
+import { SQLEditor } from "./SQLEditor";
+import { TableSelector } from "./TableSelector";
+import { TablesViewer } from "./TablesViewer";
+
+export function Explorer() {
+  const { worldAddress } = useParams();
+  const { id: chainId } = useChain();
+  const [query, setQuery] = useQueryState("query", parseAsString.withDefault(""));
+  const [selectedTableId] = useQueryState("tableId");
+
+  const { data: deployedTables } = useDeployedTablesQuery();
+  const deployedTable = deployedTables?.find(({ tableId }) => tableId === selectedTableId);
+  const { data: tableData, isLoading, isFetched } = useTableDataQuery({ deployedTable, query });
+
+  useEffect(() => {
+    if (!deployedTable) return;
+
+    const tableName = getTableName(deployedTable, worldAddress as Hex, chainId);
+    if (chainId === anvil.id) {
+      setQuery(`SELECT * FROM "${tableName}"`);
+    } else {
+      setQuery(`SELECT ${Object.keys(deployedTable.schema).join(", ")} FROM ${tableName}`);
+    }
+  }, [chainId, setQuery, selectedTableId, deployedTable, worldAddress]);
+
+  return (
+    <>
+      {chainId !== anvil.id && <SQLEditor />}
+      <TableSelector tables={deployedTables} />
+      <TablesViewer deployedTable={deployedTable} tableData={tableData} isLoading={isLoading || !isFetched} />
+    </>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { PlayIcon } from "lucide-react";
+import { useQueryState } from "nuqs";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { Button } from "../../../../../../components/ui/Button";
+import { Form, FormControl, FormField, FormItem } from "../../../../../../components/ui/Form";
+import { Input } from "../../../../../../components/ui/Input";
+
+export function SQLEditor() {
+  const [query, setQuery] = useQueryState("query");
+  const form = useForm({
+    defaultValues: {
+      query: query || "",
+    },
+  });
+
+  const handleSubmit = form.handleSubmit((data) => {
+    setQuery(data.query);
+  });
+
+  useEffect(() => {
+    form.reset({ query: query || "" });
+  }, [query, form]);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit}>
+        <div className="relative">
+          <FormField
+            name="query"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Input {...field} className="pr-[90px]" disabled={!query} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <Button className="absolute right-1 top-1 h-8 px-4" type="submit">
+            <PlayIcon className="mr-1.5 h-3 w-3" /> Run
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

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

@@ -1,9 +1,8 @@
-import { Check, ChevronsUpDown, Lock } from "lucide-react";
-import { useParams } from "next/navigation";
+import { CheckIcon, ChevronsUpDownIcon, Link2Icon, Link2OffIcon } from "lucide-react";
 import { useQueryState } from "nuqs";
 import { Hex } from "viem";
-import { useEffect, useState } from "react";
-import { internalTableNames } from "@latticexyz/store-sync/sqlite";
+import { useState } from "react";
+import { useEffect } from "react";
 import { Button } from "../../../../../../components/ui/Button";
 import {
   Command,
@@ -14,59 +13,77 @@ import {
   CommandList,
 } from "../../../../../../components/ui/Command";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../../../../components/ui/Popover";
-import { cn } from "../../../../../../lib/utils";
+import { DeployedTable } from "../../../../api/utils/decodeTable";
+import { cn } from "../../../../lib/utils";
 
-type Props = {
-  tables: string[];
-};
+function TableSelectorItem({
+  table,
+  selected,
+  asOption,
+}: {
+  table: DeployedTable;
+  selected: boolean;
+  asOption?: boolean;
+}) {
+  const { type, name, namespace } = table;
+  return (
+    <div className="flex items-center">
+      {asOption && <CheckIcon className={cn("mr-2 h-4 w-4", selected ? "opacity-100" : "opacity-0")} />}
+      {type === "offchainTable" && <Link2OffIcon className="mr-2 inline-block opacity-70" size={14} />}
+      {type === "table" && <Link2Icon className="mr-2 inline-block opacity-70" size={14} />}
+      {name} {namespace && <span className="ml-2 opacity-70">({namespace})</span>}
+    </div>
+  );
+}
 
-export function TableSelector({ tables }: Props) {
+export function TableSelector({ tables }: { tables?: DeployedTable[] }) {
   const [selectedTableId, setTableId] = useQueryState("tableId");
   const [open, setOpen] = useState(false);
-  const { worldAddress } = useParams();
+  const selectedTable = tables?.find(({ tableId }) => tableId === selectedTableId);
 
   useEffect(() => {
-    if (!selectedTableId && tables.length > 0) {
-      setTableId(tables[0] as Hex);
+    if (!selectedTableId && Array.isArray(tables) && tables.length > 0) {
+      setTableId(tables[0].tableId);
     }
   }, [selectedTableId, setTableId, tables]);
 
   return (
     <div className="w-full py-4">
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
-          <Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between">
-            {selectedTableId
-              ? tables.find((tableId) => tableId === selectedTableId)?.replace(`${worldAddress}__`, "")
-              : "Select table..."}
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between"
+            disabled={!tables}
+          >
+            {selectedTable && (
+              <TableSelectorItem table={selectedTable} selected={selectedTableId === selectedTable.tableId} />
+            )}
+            {!selectedTable && <span className="opacity-50">Select table...</span>}
+            <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
 
         <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
           <Command>
             <CommandInput placeholder="Search tables..." className="font-mono" />
             <CommandList>
-              <CommandEmpty>No framework found.</CommandEmpty>
+              <CommandEmpty className="py-4 text-center font-mono text-sm">No table found.</CommandEmpty>
               <CommandGroup>
-                {tables.map((tableId) => {
+                {tables?.map((table) => {
                   return (
                     <CommandItem
-                      key={tableId}
-                      value={tableId}
+                      key={table.tableId}
+                      value={table.tableId}
                       onSelect={(newTableId) => {
                         setTableId(newTableId as Hex);
                         setOpen(false);
                       }}
                       className="font-mono"
                     >
-                      <Check
-                        className={cn("mr-2 h-4 w-4", selectedTableId === tableId ? "opacity-100" : "opacity-0")}
-                      />
-                      {(internalTableNames as string[]).includes(tableId) && (
-                        <Lock className="mr-2 inline-block opacity-70" size={14} />
-                      )}
-                      {tableId.replace(`${worldAddress}__`, "")}
+                      <TableSelectorItem table={table} selected={selectedTableId === table.tableId} asOption />
                     </CommandItem>
                   );
                 })}