match filename to component name

packages/explorer/src/app/(home)/EditableTableCell.tsx

@@ -6,7 +6,7 @@ import { ChangeEvent, useState } from "react";
 import { encodeField } from "@latticexyz/protocol-parser/internal";
 import { SchemaAbiType } from "@latticexyz/schema-type/internal";
 import { waitForTransactionReceipt } from "@wagmi/core";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Checkbox } from "@/components/ui/Checkbox";
 import { ACCOUNT_PRIVATE_KEYS } from "@/consts";
 import { useWorldAddress } from "@/hooks/useWorldAddress";
 import { useStore } from "@/store";

packages/explorer/src/app/(home)/SQLEditor.tsx

@@ -0,0 +1,44 @@
+import { FormEvent, useEffect, useState } from "react";
+
+export function SQLEditor({
+  table,
+  setQuery,
+  tablesLoading,
+}: {
+  table: string | undefined;
+  setQuery: React.Dispatch<React.SetStateAction<string | undefined>>;
+  tablesLoading: boolean;
+}) {
+  const [deferredQuery, setDeferredQuery] = useState<string | undefined>("");
+
+  const submitQuery = (evt: FormEvent) => {
+    evt.preventDefault();
+    setQuery(deferredQuery);
+  };
+
+  useEffect(() => {
+    if (table) {
+      const initialQuery = `SELECT * FROM '${table}' LIMIT 30`;
+      setQuery(initialQuery);
+      setDeferredQuery(initialQuery);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, tablesLoading]);
+
+  return (
+    <form onSubmit={submitQuery}>
+      {/* <Flex direction="row" gap="2">
+        <TextField.Root
+          style={{ flex: "1" }}
+          placeholder="SQL query…"
+          value={deferredQuery}
+          onChange={(evt) => setDeferredQuery(evt.target.value)}
+        >
+          <TextField.Slot></TextField.Slot>
+        </TextField.Root>
+
+        <Button type="submit">Execute query</Button>
+      </Flex> */}
+    </form>
+  );
+}

packages/explorer/src/app/(home)/TableSelector.tsx

@@ -5,7 +5,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@/components/ui/Select";
 import { NON_EDITABLE_TABLES } from "@/consts";
 import { useWorldAddress } from "@/hooks/useWorldAddress";
 

packages/explorer/src/app/(home)/TablesViewer.tsx

@@ -14,17 +14,17 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/Button";
+import { Checkbox } from "@/components/ui/Checkbox";
+import { Input } from "@/components/ui/Input";
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "@/components/ui/Table";
 import { NON_EDITABLE_TABLES } from "@/consts";
 import { EditableTableCell } from "./EditableTableCell";
 import { bufferToBigInt } from "./utils/bufferToBigInt";

packages/explorer/src/app/interact/Form.tsx

@@ -3,7 +3,7 @@
 import { Coins, Eye, Send } from "lucide-react";
 import { Abi, AbiFunction } from "viem";
 import { useDeferredValue, useState } from "react";
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/ui/Input";
 import { useHashState } from "@/hooks/useHash";
 import { cn } from "@/lib/utils";
 import { FunctionField } from "./FunctionField";

packages/explorer/src/app/interact/FunctionField.tsx

@@ -10,17 +10,17 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { readContract, waitForTransactionReceipt } from "@wagmi/core";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/Button";
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
+} from "@/components/ui/Form";
+import { Input } from "@/components/ui/Input";
+import { Separator } from "@/components/ui/Separator";
 import { ACCOUNT_PRIVATE_KEYS } from "@/consts";
 import { useWorldAddress } from "@/hooks/useWorldAddress";
 import { useStore } from "@/store";

packages/explorer/src/app/layout.tsx

@@ -3,7 +3,7 @@ import { Inter, JetBrains_Mono } from "next/font/google";
 import { Toaster } from "sonner";
 import { Theme } from "@radix-ui/themes";
 import "@radix-ui/themes/styles.css";
-import { Navigation } from "@/components/navigation";
+import { Navigation } from "@/components/Navigation";
 import { Providers } from "./_providers";
 import "./globals.css";
 

packages/explorer/src/components/Account.tsx

@@ -0,0 +1,16 @@
+import { useAccount, useDisconnect, useEnsAvatar, useEnsName } from "wagmi";
+
+export function Account() {
+  const { address } = useAccount();
+  const { disconnect } = useDisconnect();
+  const { data: ensName } = useEnsName({ address });
+  const { data: ensAvatar } = useEnsAvatar({ name: ensName! });
+
+  return (
+    <div>
+      {ensAvatar && <img alt="ENS Avatar" src={ensAvatar} />}
+      {address && <div>{ensName ? `${ensName} (${address})` : address}</div>}
+      <button onClick={() => disconnect()}>Disconnect</button>
+    </div>
+  );
+}

packages/explorer/src/components/AccountSelect.tsx

@@ -0,0 +1,39 @@
+import { formatEther } from "viem";
+import { useEffect } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/Select";
+import { ACCOUNTS } from "@/consts";
+import { useStore } from "@/store";
+
+export function AccountSelect() {
+  const { account, setAccount, balances, fetchBalances } = useStore();
+
+  useEffect(() => {
+    fetchBalances();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Select value={account} onValueChange={setAccount}>
+      <SelectTrigger className="w-[300px] text-left">
+        <SelectValue placeholder="Account" />
+      </SelectTrigger>
+      <SelectContent>
+        {ACCOUNTS.map((address, idx) => {
+          return (
+            <SelectItem key={address} value={address} className="font-mono">
+              Account {idx + 1}{" "}
+              {balances[address] !== undefined &&
+                `(${formatEther(balances[address])} ETH)`}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}

packages/explorer/src/components/LatestBlock.tsx

@@ -0,0 +1,25 @@
+import { useBlockNumber } from "wagmi";
+
+export function LatestBlock() {
+  const { data: block } = useBlockNumber({
+    watch: true,
+  });
+
+  if (block === undefined || block === BigInt(0)) {
+    return;
+  }
+
+  return (
+    <div className="inline-block">
+      <div className="flex items-center justify-between text-xs font-extrabold text-green-600">
+        <span
+          className="mr-2 inline-block h-[8px] w-[8px] rounded-full animate-pulse"
+          style={{
+            background: "rgb(64, 182, 107)",
+          }}
+        ></span>
+        <span className="opacity-70">{block.toString()}</span>
+      </div>
+    </div>
+  );
+}

packages/explorer/src/components/Navigation.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { LatestBlock } from "@/components/LatestBlock";
+import { Separator } from "@/components/ui/Separator";
+import { cn } from "@/lib/utils";
+import { AccountSelect } from "./AccountSelect";
+
+export function Navigation() {
+  const pathname = usePathname();
+
+  return (
+    <div className="mb-8 sticky top-0 bg-background z-10">
+      <div className="flex justify-between items-center">
+        <div className="flex gap-x-6 py-4">
+          <Link
+            href="/"
+            className={cn("underline-offset-[16px] text-sm uppercase", {
+              "font-semibold underline decoration-orange-500 decoration-4":
+                pathname === "/",
+            })}
+          >
+            Data explorer
+          </Link>
+
+          <Link
+            href="/interact"
+            className={cn("underline-offset-[16px] text-sm uppercase", {
+              "font-semibold underline decoration-orange-500 decoration-4":
+                pathname === "/interact",
+            })}
+          >
+            Interact
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-x-4">
+          <LatestBlock />
+          <AccountSelect />
+        </div>
+      </div>
+
+      <Separator />
+    </div>
+  );
+}

packages/explorer/src/components/ui/Button.tsx

@@ -0,0 +1,56 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  // eslint-disable-next-line max-len
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

packages/explorer/src/components/ui/Checkbox.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Check } from "lucide-react";
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      // eslint-disable-next-line max-len
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };