feat(explorer): active chain as dynamic param (#3181)

.changeset/perfect-plants-hang.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Added ability to connect World Explorer to Redstone and Garnet chains. The active chain is now passed as a dynamic route parameter.

packages/explorer/next.config.mjs

@@ -8,6 +8,15 @@ export default function config() {
       config.externals.push("pino-pretty", "lokijs", "encoding");
       return config;
     },
+    redirects: async () => {
+      return [
+        {
+          source: "/:chainName/worlds/:worldAddress/explorer",
+          destination: "/:chainName/worlds/:worldAddress/explore",
+          permanent: true,
+        },
+      ];
+    },
   };
 
   return nextConfig;

packages/explorer/src/app/(explorer)/[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/(explorer)/Providers.tsx → packages/explorer/src/app/(explorer)/[chainName]/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/(explorer)/[chainName]/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 { useChain } 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 { id: chainId } = useChain();
   const account = useAccount();
 
   const [value, setValue] = useState<unknown>(defaultValue);

packages/explorer/src/app/(explorer)/worlds/[worldAddress]/explore/TableSelector.tsx → packages/explorer/src/app/(explorer)/[chainName]/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/(explorer)/[chainName]/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/(explorer)/[chainName]/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/(explorer)/[chainName]/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/(explorer)/[chainName]/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 { useChain } 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 { id: chainId } = useChain();
+  const queryClient = useQueryClient();
+  const wagmiConfig = useConfig();
   const account = useAccount();
 
   return useMutation({

packages/explorer/src/app/(explorer)/worlds/[worldAddress]/layout.tsx → packages/explorer/src/app/(explorer)/[chainName]/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/(explorer)/[chainName]/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/(explorer)/[chainName]/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/(explorer)/[chainName]/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/(explorer)/[chainName]/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();
+}