feat(explorer): add chain switch (#3705)

Author: karooolis

.changeset/lovely-rats-notice.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Chain switching between supported networks is now accessible on the homepage and the world page.

packages/explorer/public/logos/anvil.svg

@@ -8,6 +8,7 @@ import { Command as CommandPrimitive } from "cmdk";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { ChainSwitch } from "../../../../components/ChainSwitch";
 import { Button } from "../../../../components/ui/Button";
 import { Command, CommandGroup, CommandItem, CommandList } from "../../../../components/ui/Command";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "../../../../components/ui/Form";
@@ -39,16 +40,16 @@ export function WorldsForm({ worlds, isLoading }: Props) {
     reValidateMode: "onChange",
   });
 
-  function onSubmit({ worldAddress }: z.infer<typeof formSchema>) {
+  const onSubmit = ({ worldAddress }: z.infer<typeof formSchema>) => {
     router.push(getWorldUrl(chainName as string, worldAddress));
-  }
+  };
 
-  function onLuckyWorld() {
+  const onLuckyWorld = () => {
     if (worlds.length > 0) {
       const luckyAddress = worlds[Math.floor(Math.random() * worlds.length)];
       router.push(getWorldUrl(chainName as string, luckyAddress as Address));
     }
-  }
+  };
 
   const handleOpenOptions = () => {
     if (!open && worlds.length > 0) {
@@ -66,40 +67,46 @@ export function WorldsForm({ worlds, isLoading }: Props) {
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
             <div>
-              <FormField
-                control={form.control}
-                name="worldAddress"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      <CommandPrimitive.Input
-                        asChild
-                        value={field.value}
-                        onValueChange={(value) => {
-                          field.onChange(value);
-                        }}
-                        onBlur={() => {
-                          field.onBlur();
-                          setOpen(false);
-                        }}
-                        onFocus={handleOpenOptions}
-                        placeholder={isLoading ? "Loading worlds..." : "Enter world address..."}
-                        // Need to manually trigger form submission as CommandPrimitive.Input captures Enter key events
-                        onKeyDown={(e) => {
-                          if (!open && e.key === "Enter") {
-                            e.preventDefault();
-                            form.handleSubmit(onSubmit)();
-                          }
-                        }}
-                        disabled={isLoading}
-                      >
-                        <Input className="h-12" />
-                      </CommandPrimitive.Input>
-                    </FormControl>
-                    <FormMessage className="uppercase" />
-                  </FormItem>
-                )}
-              />
+              <div className="flex items-center gap-x-2">
+                <div className="w-[260px] flex-shrink-0">
+                  <FormField
+                    control={form.control}
+                    name="worldAddress"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <CommandPrimitive.Input
+                            asChild
+                            value={field.value}
+                            onValueChange={(value) => {
+                              field.onChange(value);
+                            }}
+                            onBlur={() => {
+                              field.onBlur();
+                              setOpen(false);
+                            }}
+                            onFocus={handleOpenOptions}
+                            placeholder={isLoading ? "Loading worlds..." : "Enter world address..."}
+                            // Need to manually trigger form submission as CommandPrimitive.Input captures Enter key events
+                            onKeyDown={(e) => {
+                              if (!open && e.key === "Enter") {
+                                e.preventDefault();
+                                form.handleSubmit(onSubmit)();
+                              }
+                            }}
+                            disabled={isLoading}
+                          >
+                            <Input className="h-12" />
+                          </CommandPrimitive.Input>
+                        </FormControl>
+                        <FormMessage className="uppercase" />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <ChainSwitch className="w-full" />
+              </div>
 
               <div className="relative">
                 <CommandList>

packages/explorer/public/logos/garnet.svg

@@ -0,0 +1,43 @@
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
+import { anvil } from "viem/chains";
+import { useEnv } from "../app/(explorer)/providers/EnvProvider";
+import { supportedChains } from "../common";
+import { capitalize, cn } from "../utils";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/Select";
+
+type Props = {
+  className?: string;
+  size?: "default" | "sm" | "lg" | "icon";
+};
+
+export function ChainSwitch({ className, size = "default" }: Props) {
+  const router = useRouter();
+  const { chainName } = useParams();
+  const env = useEnv();
+  const chainId = Number(env.CHAIN_ID);
+
+  const onChainChange = (chainName: string) => {
+    router.push(`/${chainName}/worlds`);
+  };
+
+  return (
+    <Select value={chainName as string} onValueChange={onChainChange}>
+      <SelectTrigger className={cn("w-auto", className)} size={size}>
+        <SelectValue placeholder="Select chain" />
+      </SelectTrigger>
+      <SelectContent>
+        {Object.entries(supportedChains)
+          .filter(([, chain]) => (chainId === anvil.id ? true : chain.id !== anvil.id))
+          .map(([name, chain]) => (
+            <SelectItem key={name} value={name}>
+              <div className="flex items-center gap-x-2 pr-2">
+                <Image src={`/logos/${name}.svg`} alt={chain.name} width={24} height={24} />
+                {chain.id === anvil.id ? "Local" : capitalize(name)}
+              </div>
+            </SelectItem>
+          ))}
+      </SelectContent>
+    </Select>
+  );
+}

packages/explorer/public/logos/pyrope.svg

@@ -13,7 +13,7 @@ export function LatestBlock() {
   });
 
   return (
-    <div className="inline-block w-[50px]">
+    <div className="inline-block w-[80px]">
       {block ? (
         <div className="flex items-center justify-end gap-x-2 text-xs font-extrabold text-green-600">
           <span className="inline-block h-[8px] w-[8px] animate-pulse rounded-full bg-success"></span>

packages/explorer/public/logos/redstone.svg

@@ -9,6 +9,7 @@ import { useWorldAbiQuery } from "../app/(explorer)/queries/useWorldAbiQuery";
 import { LatestBlock } from "../components/LatestBlock";
 import { Separator } from "../components/ui/Separator";
 import { cn } from "../utils";
+import { ChainSwitch } from "./ChainSwitch";
 import { ConnectButton } from "./ConnectButton";
 
 function NavigationLink({ href, children }: { href: string; children: React.ReactNode }) {
@@ -53,6 +54,7 @@ export function Navigation() {
 
         <div className="flex items-center gap-x-4">
           <LatestBlock />
+          <ChainSwitch size="sm" />
           {!isReadOnly ? <ConnectButton /> : null}
         </div>
       </div>

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

@@ -1,10 +1,34 @@
 "use client";
 
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cva } from "class-variance-authority";
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "../../utils";
 
+const selectTriggerVariants = cva(
+  cn(
+    "flex items-center justify-between",
+    "rounded-md border border-input bg-background ring-offset-background",
+    "placeholder:text-muted-foreground",
+    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+  ),
+  {
+    variants: {
+      size: {
+        default: "h-12 w-full px-3 py-2 text-sm",
+        sm: "h-9 w-full px-3 py-1 text-sm",
+        lg: "h-11 w-full px-4 py-2 text-base",
+        icon: "h-10 w-10 p-2",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
 const Select = SelectPrimitive.Root;
 
 const SelectGroup = SelectPrimitive.Group;
@@ -13,19 +37,9 @@ const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between px-3 py-2 text-sm",
-      "rounded-md border border-input bg-background ring-offset-background",
-      "placeholder:text-muted-foreground",
-      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
-    )}
-    {...props}
-  >
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & { size?: "default" | "sm" | "lg" | "icon" }
+>(({ className, children, size, ...props }, ref) => (
+  <SelectPrimitive.Trigger ref={ref} className={cn(selectTriggerVariants({ size, className }))} {...props}>
     {children}
     <SelectPrimitive.Icon asChild>
       <ChevronDown className="h-4 w-4 opacity-50" />