fix(explorer): various fixes (#3235)

.changeset/silver-clouds-report.md

@@ -0,0 +1,8 @@
+---
+"@latticexyz/explorer": patch
+---
+
+- Tables can be searched by specific values.
+- Improved handling of dynamic SQL queries.
+- The "Connect" modal is triggered during a write action if the wallet is not connected.
+- Toast messages are now dismissible.

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

@@ -13,6 +13,7 @@ import {
   getValueSchema,
 } from "@latticexyz/protocol-parser/internal";
 import IBaseWorldAbi from "@latticexyz/world/out/IBaseWorld.sol/IBaseWorld.abi.json";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { waitForTransactionReceipt, writeContract } from "@wagmi/core";
 import { Checkbox } from "../../../../../../components/ui/Checkbox";
@@ -28,6 +29,7 @@ type Props = {
 
 export function EditableTableCell({ name, table, keyTuple, value: defaultValue }: Props) {
   const [value, setValue] = useState<unknown>(defaultValue);
+  const { openConnectModal } = useConnectModal();
   const wagmiConfig = useConfig();
   const queryClient = useQueryClient();
   const { worldAddress } = useParams();
@@ -85,6 +87,10 @@ export function EditableTableCell({ name, table, keyTuple, value: defaultValue }
   });
 
   const handleSubmit = (newValue: unknown) => {
+    if (!account.isConnected) {
+      return openConnectModal?.();
+    }
+
     if (newValue !== defaultValue) {
       mutate(newValue);
     }

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

@@ -1,4 +1,5 @@
 import { CheckIcon, ChevronsUpDownIcon, Link2Icon, Link2OffIcon } from "lucide-react";
+import { useParams } from "next/navigation";
 import { useQueryState } from "nuqs";
 import { Hex } from "viem";
 import { useState } from "react";
@@ -15,6 +16,8 @@ import {
 } from "../../../../../../components/ui/Command";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../../../../components/ui/Popover";
 import { cn } from "../../../../../../utils";
+import { useChain } from "../../../../hooks/useChain";
+import { constructTableName } from "../../../../utils/constructTableName";
 
 function TableSelectorItem({ table, selected, asOption }: { table: Table; selected: boolean; asOption?: boolean }) {
   const { type, name, namespace } = table;
@@ -29,6 +32,8 @@ function TableSelectorItem({ table, selected, asOption }: { table: Table; select
 }
 
 export function TableSelector({ tables }: { tables?: Table[] }) {
+  const { worldAddress } = useParams();
+  const { id: chainId } = useChain();
   const [selectedTableId, setTableId] = useQueryState("tableId");
   const [open, setOpen] = useState(false);
   const selectedTableConfig = tables?.find(({ tableId }) => tableId === selectedTableId);
@@ -71,9 +76,9 @@ export function TableSelector({ tables }: { tables?: Table[] }) {
                   return (
                     <CommandItem
                       key={table.tableId}
-                      value={table.tableId}
-                      onSelect={(newTableId) => {
-                        setTableId(newTableId as Hex);
+                      value={constructTableName(table, worldAddress as Hex, chainId)}
+                      onSelect={() => {
+                        setTableId(table.tableId);
                         setOpen(false);
                       }}
                       className="font-mono"

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

@@ -64,8 +64,13 @@ export function TablesViewer({
             return value;
           }
 
-          const keyTuple = getKeyTuple(table, row.original as never);
-          return <EditableTableCell name={name} table={table} value={value} keyTuple={keyTuple} />;
+          try {
+            const keyTuple = getKeyTuple(table, row.original as never);
+            return <EditableTableCell name={name} table={table} value={value} keyTuple={keyTuple} />;
+          } catch (e) {
+            console.error(e);
+            return value;
+          }
         },
       };
     });

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

@@ -2,10 +2,12 @@
 
 import { Coins, Eye, Send } from "lucide-react";
 import { AbiFunction } from "viem";
+import { useAccount } from "wagmi";
 import { z } from "zod";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { Button } from "../../../../../../components/ui/Button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../../../../../../components/ui/Form";
 import { Input } from "../../../../../../components/ui/Input";
@@ -30,7 +32,9 @@ export function FunctionField({ abi }: Props) {
   const operationType: FunctionType =
     abi.stateMutability === "view" || abi.stateMutability === "pure" ? FunctionType.READ : FunctionType.WRITE;
   const [result, setResult] = useState<string | null>(null);
+  const { openConnectModal } = useConnectModal();
   const mutation = useContractMutation({ abi, operationType });
+  const account = useAccount();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -40,6 +44,10 @@ export function FunctionField({ abi }: Props) {
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
+    if (!account.isConnected) {
+      return openConnectModal?.();
+    }
+
     const mutationResult = await mutation.mutateAsync({
       inputs: values.inputs,
       value: values.value,

packages/explorer/src/app/(explorer)/layout.tsx

@@ -38,7 +38,7 @@ export default function RootLayout({
           >
             {children}
           </div>
-          <Toaster richColors />
+          <Toaster richColors closeButton duration={10000} />
         </Theme>
       </body>
     </html>