feat(explorer): resolve paths using chain ID or name (#3735)

Co-authored-by: Kevin Ingersoll <kingersoll@gmail.com>

Author: karooolis

.changeset/nine-pugs-speak.md

@@ -0,0 +1,7 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Explorer will now automatically resolve and redirect deep links using a chain ID to their corresponding chain name, e.g.
+
+https://explorer.mud.dev/690/worlds/0x2d70F1eFFbFD865764CAF19BE2A01a72F3CE774f

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

@@ -1,7 +1,7 @@
 "use client";
 
-import { notFound } from "next/navigation";
-import { isValidChainName } from "../../../common";
+import { notFound, redirect, usePathname, useSearchParams } from "next/navigation";
+import { chainIdToName, isValidChainId, isValidChainName } from "../../../common";
 import { Providers } from "./Providers";
 
 type Props = {
@@ -11,8 +11,22 @@ type Props = {
   children: React.ReactNode;
 };
 
-export default function ChainLayout({ params: { chainName }, children }: Props) {
-  if (!isValidChainName(chainName)) {
+export default function ChainLayout({ params: { chainName: chainIdOrName }, children }: Props) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  if (!isValidChainName(chainIdOrName)) {
+    const chainId = Number(chainIdOrName);
+    if (isValidChainId(chainId)) {
+      const chainName = chainIdToName[chainId];
+      const newPathname = pathname.replace(chainIdOrName, chainName);
+
+      if (pathname !== newPathname) {
+        const search = searchParams.toString();
+        const redirectUrl = search ? `${newPathname}?${search}` : `${newPathname}`;
+        return redirect(redirectUrl);
+      }
+    }
     return notFound();
   }