chore: Optimize seo (#1381)

src/app/[lng]/scan/[[...segments]]/page.tsx

@@ -1,49 +1,36 @@
-'use client';
-import { LiFiExplorer } from '@lifi/explorer';
-import type { PaletteMode } from '@mui/material';
-import { alpha, Box, useTheme } from '@mui/material';
-import { useMemo } from 'react';
-import { ClientOnly } from 'src/components/ClientOnly';
-import { fallbackLng } from 'src/i18n';
-import { JUMPER_SCAN_PATH } from '@/const/urls';
+import ScanPage from '@/app/ui/scan/ScanPage';
+import type { Metadata } from 'next';
+
+export async function generateMetadata({
+  params: { segments },
+}: {
+  params: {
+    segments: string[];
+  };
+}): Promise<Metadata> {
+  const slugToTitle: { [key: string]: string } = {
+    tx: 'Transaction',
+    block: 'Block',
+    wallet: 'wallet',
+  };
+
+  const [slug, address] = segments;
+
+  return {
+    title: `Jumper Scan | ${slugToTitle[slug]} ${address}`,
+    description:
+      'Jumper Scan is a blockchain explorer that allows you to search and explore transactions, blocks, and wallets on multiple blockchains.',
+    alternates: {
+      canonical: `${process.env.NEXT_PUBLIC_SITE_URL}/scan/${segments.join('/')}`,
+    },
+  };
+}
 
 export default function Page({
   params: { lng },
 }: {
   children: React.ReactNode;
   params: { lng: string };
 }) {
-  const theme = useTheme();
-
-  const explorerConfig = useMemo(
-    () => ({
-      appearance: 'light' as PaletteMode, //theme.palette.mode, // This controls light and dark mode
-      integrator: process.env.NEXT_PUBLIC_WIDGET_INTEGRATOR, // TODO: change as needed
-      base: `${lng !== fallbackLng ? `${lng}` : ''}${JUMPER_SCAN_PATH}`, // Important for the routing and having everything served under /scan. Do not remove!
-      theme: {
-        // These colors and values correspond to the figma design
-        shape: { borderRadiusSecondary: 900, borderRadius: 12 },
-        palette: {
-          background: {
-            default: alpha(theme.palette.white.main, 0.8),
-            paper: alpha(theme.palette.white.main, 0.8),
-          },
-        },
-      },
-    }),
-    [lng, theme.palette.mode, theme.palette.white.main],
-  );
-
-  return (
-    <ClientOnly>
-      <Box
-        sx={{
-          p: 4,
-          paddingBottom: 8,
-        }}
-      >
-        <LiFiExplorer config={explorerConfig} />
-      </Box>
-    </ClientOnly>
-  );
+  return <ScanPage lng={lng} />;
 }

src/app/[lng]/scan/layout.tsx

@@ -1,18 +1,13 @@
 import { ThemeProviderV2 } from '@/providers/ThemeProviderV2';
 import { ThemeProvider as NextThemeProvider } from 'next-themes';
-import { cookies } from 'next/headers';
 import React from 'react';
 import { Layout } from 'src/Layout';
 
-export default async function PartnerThemeLayout({
+export default async function RootLayout({
   children,
-  params: { partnerTheme },
 }: {
   children: React.ReactNode;
-  params: { partnerTheme: string };
 }) {
-  const cookiesHandler = cookies();
-
   return (
     <NextThemeProvider
       themes={['light']}

src/app/ui/scan/ScanPage.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { ClientOnly } from '@/components/ClientOnly';
+import { alpha, Box, type PaletteMode, useTheme } from '@mui/material';
+import { LiFiExplorer } from '@lifi/explorer';
+import { useMemo } from 'react';
+import { fallbackLng } from 'src/i18n';
+import { JUMPER_SCAN_PATH } from '@/const/urls';
+
+export default function ScanPage({ lng }: { lng: string }) {
+  const theme = useTheme();
+
+  const explorerConfig = useMemo(
+    () => ({
+      appearance: 'light' as PaletteMode, //theme.palette.mode, // This controls light and dark mode
+      integrator: process.env.NEXT_PUBLIC_WIDGET_INTEGRATOR, // TODO: change as needed
+      base: `${lng !== fallbackLng ? `${lng}` : ''}${JUMPER_SCAN_PATH}`, // Important for the routing and having everything served under /scan. Do not remove!
+      theme: {
+        // These colors and values correspond to the figma design
+        shape: { borderRadiusSecondary: 900, borderRadius: 12 },
+        palette: {
+          background: {
+            default: alpha(theme.palette.white.main, 0.8),
+            paper: alpha(theme.palette.white.main, 0.8),
+          },
+        },
+      },
+    }),
+    [lng, theme.palette.mode, theme.palette.white.main],
+  );
+
+  return (
+    <ClientOnly>
+      <Box
+        sx={{
+          p: 4,
+          paddingBottom: 8,
+        }}
+      >
+        <LiFiExplorer config={explorerConfig} />
+      </Box>
+    </ClientOnly>
+  );
+}

src/components/Menus/WalletMenu/WalletCard.tsx

@@ -86,7 +86,7 @@ export const WalletCard = ({ account }: WalletCardProps) => {
 
   const handleScanButton = () => {
     account.chainId && closeAllMenus();
-    const url = `${JUMPER_SCAN_PATH}/wallet/${account.address}/`;
+    const url = `${JUMPER_SCAN_PATH}/wallet/${account.address}`;
 
     trackEvent({
       category: TrackingCategory.WalletMenu,