From 8858e52210693679e7626e25ee4dd9bcf30d7ae8 Mon Sep 17 00:00:00 2001 From: Karolis Ramanauskas Date: Thu, 26 Sep 2024 01:00:42 +0300 Subject: [PATCH] fix(explorer): various fixes (#3235) --- .changeset/silver-clouds-report.md | 8 ++++++++ .../[worldAddress]/explore/EditableTableCell.tsx | 6 ++++++ .../worlds/[worldAddress]/explore/TableSelector.tsx | 11 ++++++++--- .../worlds/[worldAddress]/explore/TablesViewer.tsx | 9 +++++++-- .../worlds/[worldAddress]/interact/FunctionField.tsx | 8 ++++++++ packages/explorer/src/app/(explorer)/layout.tsx | 2 +- 6 files changed, 38 insertions(+), 6 deletions(-) create mode 100644 .changeset/silver-clouds-report.md diff --git a/.changeset/silver-clouds-report.md b/.changeset/silver-clouds-report.md new file mode 100644 index 0000000000..a69b003f3f --- /dev/null +++ b/.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. diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/EditableTableCell.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/EditableTableCell.tsx index ac5aa1e3ed..f501873490 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/EditableTableCell.tsx +++ b/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(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); } diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TableSelector.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TableSelector.tsx index 5f8a32e09a..ee01049a33 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TableSelector.tsx +++ b/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 ( { - setTableId(newTableId as Hex); + value={constructTableName(table, worldAddress as Hex, chainId)} + onSelect={() => { + setTableId(table.tableId); setOpen(false); }} className="font-mono" diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx index 0f2a357669..638aa52911 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx +++ b/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 ; + try { + const keyTuple = getKeyTuple(table, row.original as never); + return ; + } catch (e) { + console.error(e); + return value; + } }, }; }); diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/FunctionField.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/FunctionField.tsx index 0ca1bf7e8c..8d54c757fa 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/FunctionField.tsx +++ b/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(null); + const { openConnectModal } = useConnectModal(); const mutation = useContractMutation({ abi, operationType }); + const account = useAccount(); const form = useForm>({ resolver: zodResolver(formSchema), @@ -40,6 +44,10 @@ export function FunctionField({ abi }: Props) { }); async function onSubmit(values: z.infer) { + if (!account.isConnected) { + return openConnectModal?.(); + } + const mutationResult = await mutation.mutateAsync({ inputs: values.inputs, value: values.value, diff --git a/packages/explorer/src/app/(explorer)/layout.tsx b/packages/explorer/src/app/(explorer)/layout.tsx index 533d78abcf..e37e033e76 100644 --- a/packages/explorer/src/app/(explorer)/layout.tsx +++ b/packages/explorer/src/app/(explorer)/layout.tsx @@ -38,7 +38,7 @@ export default function RootLayout({ > {children} - +