feat(explorer): active chain as dynamic param

packages/explorer/src/app/(explorer)/Providers.tsx → packages/explorer/src/app/[chainName]/(explorer)/worlds/[worldAddress]/Providers.tsx

@@ -2,35 +2,37 @@
 
 import { WagmiProvider, createConfig, http } from "wagmi";
 import { injected, metaMask, safe } from "wagmi/connectors";
-import { ReactNode } from "react";
+import { ReactNode, useMemo } from "react";
 import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { getChain } from "../../common";
-import { defaultAnvilConnectors } from "../../connectors/anvil";
+import { getDefaultAnvilConnectors } from "../../../../../connectors/anvil";
+import { useChain } from "../../../../../hooks/useChain";
 
 const queryClient = new QueryClient();
 
-const chain = getChain();
-export const wagmiConfig = createConfig({
-  chains: [chain],
-  connectors: [
-    injected(),
-    metaMask({
-      dappMetadata: {
-        name: "World Explorer",
+export function Providers({ children }: { children: ReactNode }) {
+  const chain = useChain();
+  const wagmiConfig = useMemo(() => {
+    return createConfig({
+      chains: [chain],
+      connectors: [
+        injected(),
+        metaMask({
+          dappMetadata: {
+            name: "World Explorer",
+          },
+        }),
+        safe(),
+        ...getDefaultAnvilConnectors(chain.id),
+      ],
+      transports: {
+        [chain.id]: http(),
       },
-    }),
-    safe(),
-    ...defaultAnvilConnectors,
-  ],
-  transports: {
-    [chain.id]: http(),
-  },
-  ssr: true,
-});
+      ssr: true,
+    });
+  }, [chain]);
 
-export function Providers({ children }: { children: ReactNode }) {
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>

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

@@ -2,18 +2,17 @@ import { Loader } from "lucide-react";
 import { useParams } from "next/navigation";
 import { toast } from "sonner";
 import { Hex } from "viem";
-import { useAccount } from "wagmi";
+import { useAccount, useConfig } from "wagmi";
 import { ChangeEvent, useState } from "react";
 import { encodeField, getFieldIndex } from "@latticexyz/protocol-parser/internal";
 import { SchemaAbiType } from "@latticexyz/schema-type/internal";
 import IBaseWorldAbi from "@latticexyz/world/out/IBaseWorld.sol/IBaseWorld.abi.json";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { waitForTransactionReceipt, writeContract } from "@wagmi/core";
-import { getChain } from "../../../../../common";
-import { Checkbox } from "../../../../../components/ui/Checkbox";
-import { camelCase, cn } from "../../../../../lib/utils";
-import { TableConfig } from "../../../../api/table/route";
-import { wagmiConfig } from "../../../Providers";
+import { Checkbox } from "../../../../../../components/ui/Checkbox";
+import { useChainId } from "../../../../../../hooks/useChain";
+import { camelCase, cn } from "../../../../../../lib/utils";
+import { TableConfig } from "../../../../../api/table/route";
 
 type Props = {
   name: string;
@@ -22,12 +21,11 @@ type Props = {
   config: TableConfig;
 };
 
-const chain = getChain();
-const chainId = chain.id;
-
 export function EditableTableCell({ name, config, keyTuple, value: defaultValue }: Props) {
+  const wagmiConfig = useConfig();
   const queryClient = useQueryClient();
   const { worldAddress } = useParams();
+  const chainId = useChainId();
   const account = useAccount();
 
   const [value, setValue] = useState<unknown>(defaultValue);

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

@@ -1,7 +1,7 @@
 import { Lock } from "lucide-react";
 import { useParams } from "next/navigation";
 import { internalTableNames } from "@latticexyz/store-sync/sqlite";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../../components/ui/Select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../../../components/ui/Select";
 
 type Props = {
   value: string | undefined;

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

@@ -14,10 +14,10 @@ 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../components/ui/Table";
+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";
 import { bufferToBigInt } from "../utils/bufferToBigInt";
 import { EditableTableCell } from "./EditableTableCell";
 

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

@@ -3,12 +3,12 @@
 import { Coins, Eye, Send } from "lucide-react";
 import { AbiFunction } from "viem";
 import { useDeferredValue, useState } from "react";
-import { Input } from "../../../../../components/ui/Input";
-import { Separator } from "../../../../../components/ui/Separator";
-import { Skeleton } from "../../../../../components/ui/Skeleton";
-import { useHashState } from "../../../../../hooks/useHashState";
-import { cn } from "../../../../../lib/utils";
-import { useAbiQuery } from "../../../../../queries/useAbiQuery";
+import { Input } from "../../../../../../components/ui/Input";
+import { Separator } from "../../../../../../components/ui/Separator";
+import { Skeleton } from "../../../../../../components/ui/Skeleton";
+import { useHashState } from "../../../../../../hooks/useHashState";
+import { cn } from "../../../../../../lib/utils";
+import { useAbiQuery } from "../../../../../../queries/useAbiQuery";
 import { FunctionField } from "./FunctionField";
 
 export function Form() {

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

@@ -6,10 +6,10 @@ import { z } from "zod";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-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";
+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";
 import { useContractMutation } from "./useContractMutation";
 
 export enum FunctionType {

packages/explorer/src/app/(explorer)/worlds/[worldAddress]/interact/useContractMutation.ts → packages/explorer/src/app/[chainName]/(explorer)/worlds/[worldAddress]/interact/useContractMutation.ts

@@ -1,24 +1,22 @@
 import { useParams } from "next/navigation";
 import { toast } from "sonner";
 import { Abi, AbiFunction, Hex } from "viem";
-import { useAccount } from "wagmi";
+import { useAccount, useConfig } from "wagmi";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { readContract, waitForTransactionReceipt, writeContract } from "@wagmi/core";
-import { getChain } from "../../../../../common";
-import { wagmiConfig } from "../../../Providers";
+import { useChainId } from "../../../../../../hooks/useChain";
 import { FunctionType } from "./FunctionField";
 
 type UseContractMutationProps = {
   abi: AbiFunction;
   operationType: FunctionType;
 };
 
-const chain = getChain();
-const chainId = chain.id;
-
 export function useContractMutation({ abi, operationType }: UseContractMutationProps) {
-  const queryClient = useQueryClient();
   const { worldAddress } = useParams();
+  const chainId = useChainId();
+  const queryClient = useQueryClient();
+  const wagmiConfig = useConfig();
   const account = useAccount();
 
   return useMutation({

packages/explorer/src/app/(explorer)/worlds/[worldAddress]/layout.tsx → packages/explorer/src/app/[chainName]/(explorer)/worlds/[worldAddress]/layout.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { Navigation } from "../../../../components/Navigation";
+import { Navigation } from "../../../../../components/Navigation";
+import { Providers } from "./Providers";
 
 export default function WorldLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div>
+    <Providers>
       <Navigation />
       {children}
-    </div>
+    </Providers>
   );
 }

packages/explorer/src/app/(explorer)/worlds/[worldAddress]/observe/Write.tsx → packages/explorer/src/app/[chainName]/(explorer)/worlds/[worldAddress]/observe/Write.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type Write } from "../../../../../observer/store";
+import { type Write } from "../../../../../../observer/store";
 import { msPerViewportWidth } from "./common";
 
 export type Props = Write;

packages/explorer/src/app/(explorer)/worlds/[worldAddress]/observe/Writes.tsx → packages/explorer/src/app/[chainName]/(explorer)/worlds/[worldAddress]/observe/Writes.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useStore } from "zustand";
-import { KeepInView } from "../../../../../components/KeepInView";
-import { store } from "../../../../../observer/store";
+import { KeepInView } from "../../../../../../components/KeepInView";
+import { store } from "../../../../../../observer/store";
 import { Write } from "./Write";
 
 export function Writes() {

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

@@ -0,0 +1,13 @@
+import { redirect } from "next/navigation";
+
+type Props = {
+  params: {
+    chainName: string;
+    worldAddress: string;
+  };
+};
+
+export default async function WorldPage({ params }: Props) {
+  const { chainName, worldAddress } = params;
+  return redirect(`/${chainName}/worlds/${worldAddress}/explore`);
+}

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

@@ -0,0 +1,15 @@
+import { notFound, redirect } from "next/navigation";
+
+export const dynamic = "force-dynamic";
+
+type Props = {
+  params: {
+    chainName: string;
+  };
+};
+
+export default function WorldsPage({ params }: Props) {
+  const worldAddress = process.env.WORLD_ADDRESS;
+  if (worldAddress) return redirect(`/${params.chainName}/worlds/${worldAddress}`);
+  return notFound();
+}

packages/explorer/src/app/[chainName]/page.tsx

@@ -0,0 +1,11 @@
+import { redirect } from "next/navigation";
+
+type Props = {
+  params: {
+    chainName: string;
+  };
+};
+
+export default async function ChainPage({ params }: Props) {
+  return redirect(`/${params.chainName}/worlds`);
+}

packages/explorer/src/app/api/world/route.ts

@@ -3,21 +3,21 @@ import { getBlockNumber, getLogs } from "viem/actions";
 import { helloStoreEvent } from "@latticexyz/store";
 import { helloWorldEvent } from "@latticexyz/world";
 import { getWorldAbi } from "@latticexyz/world/internal";
-import { getChain } from "../../../common";
+import { SupportedChainIds, chains, isValidChainId } from "../../../common";
 
 export const dynamic = "force-dynamic";
 
-async function getClient() {
+async function getClient(chainId: SupportedChainIds) {
   const client = createWalletClient({
-    chain: getChain(),
+    chain: chains[chainId],
     transport: http(),
   });
 
   return client;
 }
 
-async function getParameters(worldAddress: Address) {
-  const client = await getClient();
+async function getParameters(chainId: SupportedChainIds, worldAddress: Address) {
+  const client = await getClient(chainId);
   const toBlock = await getBlockNumber(client);
   const logs = await getLogs(client, {
     strict: true,
@@ -35,15 +35,17 @@ async function getParameters(worldAddress: Address) {
 
 export async function GET(req: Request) {
   const { searchParams } = new URL(req.url);
-  const worldAddress = searchParams.get("address") as Hex;
+  const worldAddress = searchParams.get("worldAddress") as Hex;
+  const chainId = Number(searchParams.get("chainId"));
+  isValidChainId(chainId);
 
   if (!worldAddress) {
     return Response.json({ error: "address is required" }, { status: 400 });
   }
 
   try {
-    const client = await getClient();
-    const { fromBlock, toBlock, isWorldDeployed } = await getParameters(worldAddress);
+    const client = await getClient(chainId);
+    const { fromBlock, toBlock, isWorldDeployed } = await getParameters(chainId, worldAddress);
     const worldAbiResponse = await getWorldAbi({
       client,
       worldAddress,