feat(app): migrate node-explorer page to app router (#572)

apps/app/src/app/[locale]/node-explorer/layout.tsx

@@ -0,0 +1,67 @@
+import ExplorerIndex from '@/components/app/skeleton/node-explorer/Index';
+import { appUrl } from '@/utils/app/config';
+import { Metadata } from 'next';
+import { unstable_setRequestLocale } from 'next-intl/server';
+import { Suspense } from 'react';
+
+const network = process.env.NEXT_PUBLIC_NETWORK_ID;
+const ogUrl = process.env.NEXT_PUBLIC_OG_URL;
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { hash: string; locale: string };
+}): Promise<Metadata> {
+  unstable_setRequestLocale(locale);
+
+  const metaTitle = 'NEAR Validator List | Nearblocks';
+  const metaDescription = '';
+
+  const ogImageUrl = `${ogUrl}/api/og?basic=true&title=${encodeURIComponent(
+    metaTitle,
+  )}`;
+
+  return {
+    title: `${network === 'testnet' ? 'TESTNET' : ''} ${metaTitle}`,
+    description: metaDescription,
+    openGraph: {
+      title: metaTitle,
+      description: metaDescription,
+      images: [
+        {
+          url: ogImageUrl.toString(),
+          width: 720,
+          height: 405,
+          alt: metaTitle,
+        },
+      ],
+    },
+    alternates: {
+      canonical: `${appUrl}/node-explorer`,
+    },
+  };
+}
+
+export default async function ExplorerLayout({
+  children,
+}: {
+  children: React.ReactNode;
+  params: any;
+}) {
+  return (
+    <>
+      <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72">
+        <div className="container mx-auto px-3">
+          <h1 className="mb-4 pt-8 sm:!text-2xl text-xl text-white">
+            NEAR Protocol Validator Explorer
+          </h1>
+        </div>
+      </div>
+      <div className="container mx-auto px-3 -mt-48">
+        <div className="relative">
+          <Suspense fallback={<ExplorerIndex />}>{children}</Suspense>
+        </div>
+      </div>
+    </>
+  );
+}

apps/app/src/app/[locale]/node-explorer/page.tsx

@@ -0,0 +1,29 @@
+import NodeList from '@/components/app/NodeExplorer/NodeList';
+import { getRequest } from '@/utils/app/api';
+import { RpcProviders } from '@/utils/app/rpc';
+import { cookies } from 'next/headers';
+import QueryString from 'qs';
+
+const getCookieFromRequest = (cookieName: string): string | null => {
+  const cookie = cookies().get(cookieName);
+  return cookie ? cookie.value : null;
+};
+
+export default async function NodeExplorer({ searchParams }: any) {
+  const rpcUrl = getCookieFromRequest('rpcUrl') || RpcProviders?.[0]?.url;
+
+  const data = await getRequest(
+    `validators?${QueryString.stringify(searchParams)}&rpc=${rpcUrl}`,
+  );
+  const statsDetails = await getRequest('stats');
+  const latestBlock = await getRequest('blocks/latest?limit=1');
+
+  return (
+    <NodeList
+      data={data}
+      totalSupply={statsDetails}
+      latestBlock={latestBlock}
+      error={!data}
+    />
+  );
+}