feat(app): migrate txns page to app router (#543)

apps/app/package.json

@@ -60,7 +60,7 @@
     "near-api-js": "5.0.0",
     "near-social-vm": "github:NearSocial/VM#2.5.5",
     "nearblock-translations": "https://github.com/Nearblocks/translations.git#516d489658dea178226e90f1707935e970598c51",
-    "nearblocks-trans-next-intl": "https://github.com/kevin-devstack/translations.git#3f83876f543977b95c8b11f45c621576084114fe",
+    "nearblocks-trans-next-intl": "https://github.com/kevin-devstack/translations.git#f6c7048b53230160efe5a48c20189c1a4a2b16e0",
     "next": "14.2.5",
     "next-intl": "^3.19.4",
     "next-runtime-env": "1.x",

apps/app/src/app/[locale]/blocks/layout.tsx

@@ -6,7 +6,7 @@ const network = process.env.NEXT_PUBLIC_NETWORK_ID;
 const ogUrl = process.env.NEXT_PUBLIC_OG_URL;
 
 export async function generateMetadata({
-  params: { hash, locale },
+  params: { locale },
 }: {
   params: { hash: string; locale: string };
 }): Promise<Metadata> {
@@ -36,12 +36,12 @@ export async function generateMetadata({
       ],
     },
     alternates: {
-      canonical: `${appUrl}/blocks/${hash}`,
+      canonical: `${appUrl}/blocks`,
     },
   };
 }
 
-export default async function HashLayout({
+export default async function BlockLayout({
   children,
 }: {
   children: React.ReactNode;

apps/app/src/app/[locale]/txns/layout.tsx

@@ -0,0 +1,51 @@
+import { appUrl } from '@/utils/app/config';
+import { Metadata } from 'next';
+import { unstable_setRequestLocale } from 'next-intl/server';
+
+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 = 'All Latest Near Protocol Transactions | NearBlocks';
+  const metaDescription =
+    'All Latest Near Protocol transactions confirmed on Near Blockchain. The list consists of transactions from sending Near and the transactions details for each transaction.';
+
+  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}/txns`,
+    },
+  };
+}
+
+export default async function TxnsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+  params: any;
+}) {
+  return <>{children}</>;
+}

apps/app/src/app/[locale]/txns/loading.tsx

@@ -0,0 +1,38 @@
+import TableSkeleton from '@/components/app/skeleton/common/table';
+
+const t = (key: string, p?: any): any => {
+  p = {};
+  const simulateAbsence = true;
+  return simulateAbsence ? undefined : { key, p };
+};
+
+function TransactionLoading() {
+  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">
+            {t('txns:heading') || 'Latest Near Protocol transactions'}
+          </h1>
+        </div>
+      </div>
+      <div className="container mx-auto px-3 -mt-48">
+        <div className="relative block lg:flex lg:space-x-2">
+          <div className=" w-full">
+            <div className=" bg-white dark:bg-black-600 dark:border-black-200 border soft-shadow rounded-xl overflow-hidden">
+              <div className={`flex flex-col lg:flex-row pt-4`}>
+                <div className="flex flex-col">
+                  <p className="leading-7 pl-6 text-sm mb-4 text-nearblue-600 dark:text-neargray-10 h-7" />
+                </div>
+              </div>
+              <TableSkeleton />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="py-8"></div>
+    </>
+  );
+}
+
+export default TransactionLoading;

apps/app/src/app/[locale]/txns/page.tsx

@@ -0,0 +1,41 @@
+import ListSkeletion from '@/components/app/skeleton/txns/List';
+import List from '@/components/app/Transactions/List';
+import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
+
+export default async function TransactionList({
+  params: { locale },
+  searchParams,
+}: {
+  params: { locale: string };
+  searchParams: { cursor?: string; p?: string; order: string };
+}) {
+  const t = await getTranslations({ locale });
+
+  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"
+            suppressHydrationWarning={true}
+          >
+            {t('txnsHeading') || 'Latest Near Protocol Transactions'}
+          </h1>
+        </div>
+      </div>
+      <div className="container mx-auto px-3 -mt-48">
+        <div className="relative block lg:flex lg:space-x-2">
+          <div className=" w-full">
+            <Suspense fallback={<ListSkeletion />}>
+              <List searchParams={searchParams} />
+            </Suspense>
+          </div>
+        </div>
+      </div>
+      <div className="py-8"></div>
+    </>
+  );
+}
+
+export const revalidate = 10;

apps/app/src/components/app/Transactions/List.tsx

@@ -0,0 +1,20 @@
+import { getRequest } from '@/utils/app/api';
+import ListActions from './ListActions';
+
+const List = async ({ searchParams }: any) => {
+  const [data, count] = await Promise.all([
+    getRequest(`txns`, searchParams),
+    getRequest(`txns/count`, searchParams),
+  ]);
+
+  return (
+    <>
+      <ListActions
+        txnsData={data}
+        txnsCount={count}
+        error={!data || data === null}
+      />
+    </>
+  );
+};
+export default List;