fix(explorer): display remotely updated table values (#3737)

Co-authored-by: Kevin Ingersoll <kingersoll@gmail.com>

Author: karooolis

.changeset/eighty-pumpkins-leave.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Table values updated remotely are now also reflected in the table viewer.

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

@@ -33,15 +33,7 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const [query, setQuery] = useSQLQueryState();
 
   const validateQuery = useQueryValidator(table);
-  const {
-    data: tableData,
-    refetch,
-    isRefetching: isTableDataRefetching,
-  } = useTableDataQuery({
-    table,
-    query,
-    isLiveQuery,
-  });
+  const { data: tableData, refetch, isRefetching: isTableDataRefetching } = useTableDataQuery({ table, isLiveQuery });
   const isRefetching = isTableDataRefetching && isUserTriggeredRefetch;
   useMonacoSuggestions(table);
 

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

@@ -0,0 +1,56 @@
+import { Hex } from "viem";
+import { useEffect } from "react";
+import { Table } from "@latticexyz/config";
+import { Checkbox } from "../../../../../../../components/ui/Checkbox";
+import { cn } from "../../../../../../../utils";
+import { useSetField } from "./useSetField";
+
+type EditableProps = {
+  name: string;
+  value: boolean;
+  table: Table;
+  keyTuple: readonly Hex[];
+  blockHeight: number;
+  disabled?: boolean;
+  readOnly?: false;
+};
+
+type ReadOnlyProps = {
+  value: boolean;
+  readOnly: true;
+};
+
+type Props = EditableProps | ReadOnlyProps;
+
+function ReadonlyBooleanField(props: ReadOnlyProps) {
+  return <Checkbox className="ml-2" checked={props.value} disabled />;
+}
+
+function EditableBooleanField({ name, value, table, keyTuple, blockHeight, disabled }: EditableProps) {
+  const write = useSetField<Table, never, boolean>({ table, keyTuple, fieldName: name as never });
+
+  useEffect(() => {
+    if (write.status === "success" && BigInt(blockHeight) >= write.data.receipt.blockNumber) {
+      write.reset();
+    }
+  }, [write, blockHeight]);
+
+  return (
+    <Checkbox
+      className={cn("ml-2", write.isPending ? "cursor-wait" : "")}
+      checked={write.status === "success" || write.status === "pending" ? write.variables.value : value}
+      onCheckedChange={(checked) => {
+        if (checked === "indeterminate") return;
+        write.mutate({ value: checked });
+      }}
+      disabled={disabled || write.isPending}
+    />
+  );
+}
+
+export function BooleanField(props: Props) {
+  if (props.readOnly) {
+    return <ReadonlyBooleanField {...props} />;
+  }
+  return <EditableBooleanField {...props} />;
+}

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

@@ -0,0 +1,43 @@
+import { Hex } from "viem";
+import { useAccount } from "wagmi";
+import { AbiType, Table } from "@latticexyz/config";
+import { TDataRow } from "../../../../../queries/useTableDataQuery";
+import { BooleanField } from "./BooleanField";
+import { TextField } from "./TextField";
+
+type Props = {
+  name: string;
+  value: TDataRow[string];
+  tableConfig: Table;
+  keyTuple: readonly Hex[];
+  blockHeight?: number;
+  fieldType: AbiType;
+};
+
+export function EditableTableColumn({ name, value, fieldType, tableConfig, keyTuple, blockHeight = 0 }: Props) {
+  const { isConnected } = useAccount();
+
+  if (fieldType === "bool") {
+    return (
+      <BooleanField
+        name={name}
+        value={Boolean(value)}
+        table={tableConfig}
+        keyTuple={keyTuple}
+        blockHeight={blockHeight}
+        readOnly={!isConnected}
+      />
+    );
+  }
+
+  return (
+    <TextField
+      name={name}
+      value={String(value)}
+      table={tableConfig}
+      keyTuple={keyTuple}
+      blockHeight={blockHeight}
+      readOnly={!isConnected}
+    />
+  );
+}

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

@@ -0,0 +1,15 @@
+import { AbiType } from "@latticexyz/config";
+import { BooleanField } from "./BooleanField";
+import { TextField } from "./TextField";
+
+type Props = {
+  type?: AbiType;
+  value: unknown;
+};
+
+export function TableColumn({ type = "string", value }: Props) {
+  if (type === "bool") {
+    return <BooleanField value={value as boolean} readOnly />;
+  }
+  return <TextField value={value as string} readOnly />;
+}

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

@@ -0,0 +1,96 @@
+import { Hex } from "viem";
+import { useEffect, useState } from "react";
+import { Table } from "@latticexyz/config";
+import { cn } from "../../../../../../../utils";
+import { useSetField } from "./useSetField";
+
+type EditableProps = {
+  name: string;
+  value: string;
+  table: Table;
+  keyTuple: readonly Hex[];
+  blockHeight: number;
+  readOnly?: false;
+  disabled?: boolean;
+};
+
+type ReadOnlyProps = {
+  value: string;
+  readOnly: true;
+};
+
+type Props = EditableProps | ReadOnlyProps;
+
+function ReadonlyTextField(props: ReadOnlyProps) {
+  return <div className="px-2 py-4">{props.value}</div>;
+}
+
+function EditableTextField({ name, value, table, keyTuple, blockHeight, disabled }: EditableProps) {
+  const write = useSetField<Table, never, string>({ table, keyTuple, fieldName: name as never });
+  useEffect(() => {
+    if (write.status === "success" && BigInt(blockHeight) >= write.data.receipt.blockNumber) {
+      write.reset();
+    }
+  }, [write, blockHeight]);
+
+  const [edit, setEdit] = useState<{ value: string; initialValue: string } | null>(null);
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+
+        if (!edit) return;
+
+        // Skip if our input hasn't changed from the indexer value
+        if (edit.value === value) {
+          setEdit(null);
+          return;
+        }
+
+        // Indexer value changed while we were editing, so we might
+        // be at risk of overwriting a change from somewhere else.
+        if (edit.initialValue !== value) {
+          if (
+            !window.confirm("The value of this field changed while editing. Are you sure you want to overwrite it?")
+          ) {
+            setEdit(null);
+            return;
+          }
+        }
+
+        write.mutate({ value: edit.value });
+        setEdit(null);
+      }}
+    >
+      <input
+        className={cn("bg-transparent px-2 py-4", write.isPending && "cursor-wait")}
+        name={name}
+        value={edit ? edit.value : write.status !== "idle" ? String(write.variables.value) : value}
+        onFocus={(event) => setEdit({ value: event.currentTarget.value, initialValue: value })}
+        onChange={(event) => {
+          const nextValue = event.currentTarget.value;
+          setEdit((state) => ({
+            value: nextValue,
+            initialValue: state?.initialValue ?? value,
+          }));
+        }}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.currentTarget.blur();
+          } else if (event.key === "Escape") {
+            setEdit(null);
+          }
+        }}
+        onBlur={(event) => event.currentTarget.form?.requestSubmit()}
+        disabled={disabled || write.isPending}
+      />
+    </form>
+  );
+}
+
+export function TextField(props: Props) {
+  if (props.readOnly) {
+    return <ReadonlyTextField {...props} />;
+  }
+  return <EditableTextField {...props} />;
+}