Skip to content

Commit

Permalink
feat(app): migrate blocks page to app router (#537)
Browse files Browse the repository at this point in the history
  • Loading branch information
kevin-devstack authored Oct 11, 2024
1 parent 63c361c commit 46c2b7c
Show file tree
Hide file tree
Showing 9 changed files with 133 additions and 309 deletions.
2 changes: 1 addition & 1 deletion apps/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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#c23d13c6e049ad5721dfd71a8f0cbd8e6725c6ae",
"nearblocks-trans-next-intl": "https://github.com/kevin-devstack/translations.git#3f83876f543977b95c8b11f45c621576084114fe",
"next": "14.2.5",
"next-intl": "^3.19.4",
"next-runtime-env": "1.x",
Expand Down
2 changes: 1 addition & 1 deletion apps/app/src/app/[locale]/blocks/[hash]/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export async function generateMetadata({
const metaTitle = t('block.metaTitle', { block: hash });
const metaDescription = t('block.metaDescription', { block: hash });

const ogImageUrl = `${ogUrl}/api/og?block=true&block_height=${encodeURIComponent(
const ogImageUrl = `${ogUrl}/api/og?blockHash=true&block_height=${encodeURIComponent(
blockHeight,
)}&title=${encodeURIComponent(metaTitle)}`;

Expand Down
51 changes: 51 additions & 0 deletions apps/app/src/app/[locale]/blocks/layout.tsx
Original file line number Diff line number Diff line change
@@ -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: { hash, locale },
}: {
params: { hash: string; locale: string };
}): Promise<Metadata> {
unstable_setRequestLocale(locale);

const metaTitle = 'Latest Near Protocol Blocks';
const metaDescription =
'All Near (Ⓝ Blocks that are included in Near blockchain. The timestamp, author, gas used, gas price and included transactions are shown.';

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}/blocks/${hash}`,
},
};
}

export default async function HashLayout({
children,
}: {
children: React.ReactNode;
params: any;
}) {
return <>{children}</>;
}
29 changes: 29 additions & 0 deletions apps/app/src/app/[locale]/blocks/loading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import ListSkeleton from '@/components/app/skeleton/blocks/list';
import Skeleton from '@/components/app/skeleton/common/Skeleton';

export default function Loading() {
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">
Latest Near Protocol Blocks
</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 pb-1">
<div className="pl-6 max-w-lg w-full py-5">
<Skeleton className="pl-6 max-w-sm leading-7 h-4" />
</div>
<ListSkeleton />
</div>
</div>
</div>
</div>
<div className="py-8"></div>
</>
);
}
46 changes: 46 additions & 0 deletions apps/app/src/app/[locale]/blocks/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import List from '@/components/app/Blocks/List';
import ListSkeleton from '@/components/app/skeleton/blocks/list';
import { Suspense } from 'react';
import { getRequest } from '@/utils/app/api';
import { getTranslations } from 'next-intl/server';

export default async function Blocks({
params: { locale },
searchParams,
}: {
params: { locale: string };
searchParams: { cursor?: string };
}) {
const data = await getRequest('blocks', { cursor: searchParams?.cursor });
const dataCount = await getRequest('blocks/count');
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">
{t('blockHeading') || 'Latest Near Protocol Blocks'}
</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={<ListSkeleton />}>
<List
data={data}
totalCount={dataCount}
apiUrl={'blocks'}
error={!data}
/>
</Suspense>
</div>
</div>
</div>
<div className="py-8"></div>
</>
);
}

export const revalidate = 20;
8 changes: 4 additions & 4 deletions apps/app/src/app/api/og/route.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export async function GET(request: Request) {
const title = url.searchParams.get('title') || 'Near blocks';
const basic = url.searchParams.has('basic');
const account = url.searchParams.has('account');
const block = url.searchParams.has('block');
const blockHash = url.searchParams.has('blockHash');
const token = url.searchParams.has('token');
const nft = url.searchParams.has('nft');

Expand All @@ -53,7 +53,7 @@ export async function GET(request: Request) {
svgString = thumbnailBasicSvg(brandConfig);
} else if (account) {
svgString = thumbnailAccountSvg(brandConfig);
} else if (block) {
} else if (blockHash) {
svgString = thumbnailBlockSvg(brandConfig);
} else if (token) {
svgString = thumbnailTokenSvg(brandConfig);
Expand All @@ -77,7 +77,7 @@ export async function GET(request: Request) {
: null;

let titleText = title;
if (block && blockHeight) {
if (blockHash) {
titleText = `${
brand.charAt(0).toUpperCase() + brand.slice(1)
} Block Height`;
Expand Down Expand Up @@ -167,7 +167,7 @@ export async function GET(request: Request) {
>
<div>{titleText}</div>

{block && blockHeight && (
{blockHash && blockHeight && (
<div
style={{
marginTop: '10px',
Expand Down
2 changes: 1 addition & 1 deletion apps/app/src/components/app/Blocks/List.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ const List = ({
{data && (
<span>
{(t &&
t('listing', {
t('block.listing', {
from: start?.block_height
? localFormat(String(start?.block_height))
: '',
Expand Down
151 changes: 0 additions & 151 deletions apps/app/src/pages/[locale]/blocks/index.tsx

This file was deleted.

Loading

0 comments on commit 46c2b7c

Please sign in to comment.