feat(app): translation package migration (#504)

.github/workflows/beta-build-images.yaml

@@ -0,0 +1,39 @@
+name: Build Docker Images
+
+on:
+  push:
+    branches: ['beta']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: linux/amd64,linux/arm64
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Docker Login
+        uses: docker/login-action@v3.0.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push (APP)
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: apps/app/Dockerfile
+          platforms: linux/amd64
+          push: true
+          tags: ghcr.io/nearblocks/app:beta
+          cache-from: type=registry,ref=ghcr.io/nearblocks/app:beta
+          cache-to: type=inline

apps/app/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

apps/app/next.config.js

@@ -1,10 +1,12 @@
 const path = require('path');
 const { configureRuntimeEnv } = require('next-runtime-env/build/configure');
-const nextTranslate = require('next-translate-plugin');
+
+const withNextIntl = require('next-intl/plugin')();
+
 configureRuntimeEnv();
 
 /** @type {import('next').NextConfig} */
-const nextConfig = nextTranslate({
+const nextConfig = withNextIntl({
   reactStrictMode: true,
   poweredByHeader: false,
   optimizeFonts: false,
@@ -49,6 +51,7 @@ module.exports = nextConfig;
 
 const { withSentryConfig } = require('@sentry/nextjs');
 
+// Skip all paths that should not be internationalized
 module.exports = withSentryConfig(module.exports, {
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options

apps/app/package.json

@@ -59,7 +59,9 @@
     "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",
     "next": "14.2.5",
+    "next-intl": "^3.19.4",
     "next-runtime-env": "1.x",
     "next-sitemap": "4.2.3",
     "next-themes": "^0.3.0",

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

@@ -0,0 +1,53 @@
+import { appUrl } from '@/utils/app/config';
+import { getTranslations, 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,
+}: {
+  params: { hash: string; locale: string };
+}) {
+  unstable_setRequestLocale(params?.locale);
+
+  const t = await getTranslations({ locale: params.locale });
+
+  const thumbnail = `${ogUrl}/thumbnail/basic?title=${encodeURIComponent(
+    t('heading') || 'Latest Near Protocol Blocks',
+  )}&brand=near`;
+
+  const metaTitle =
+    t('block.metaTitle', { block: params.hash }) ||
+    'All Near Latest Protocol Blocks | NearBlocks';
+  const metaDescription =
+    t('block.metaDescription', { block: params.hash }) ||
+    'All Near (Ⓝ Blocks that are included in Near blockchain. The timestamp, author, gas used, gas price and included transactions are shown.';
+
+  return {
+    title: `${network === 'testnet' ? 'TESTNET' : ''} ${metaTitle}`,
+    description: metaDescription,
+    openGraph: {
+      title: metaTitle,
+      description: metaDescription,
+      images: [thumbnail],
+    },
+    twitter: {
+      title: metaTitle,
+      description: metaDescription,
+      images: [thumbnail],
+    },
+    alternates: {
+      canonical: `${appUrl}/blocks/${params.hash}`,
+    },
+  };
+}
+
+export default async function HaseLayout({
+  children,
+}: {
+  children: React.ReactNode;
+  params: any;
+}) {
+  return <>{children}</>;
+}

apps/app/src/app/[locale]/blocks/[hash]/loading.tsx

@@ -0,0 +1,12 @@
+import HashLoading from '@/components/app/skeleton/blocks/hash';
+
+export default function Loading() {
+  return (
+    <>
+      <div className="relative container mx-auto px-3">
+        <HashLoading />
+      </div>
+      <div className="py-8"></div>
+    </>
+  );
+}

apps/app/src/app/[locale]/blocks/[hash]/page.tsx

@@ -0,0 +1,60 @@
+import Details from '@/components/app/Blocks/Details';
+import { nanoToMilli } from '@/utils/app/libs';
+import { Suspense } from 'react';
+import HashLoading from '@/components/app/skeleton/blocks/hash';
+import { getRequest } from '@/utils/app/api';
+import { unstable_setRequestLocale } from 'next-intl/server';
+
+export default async function Hash({
+  params,
+}: {
+  params: { hash: string; locale: string };
+}) {
+  unstable_setRequestLocale(params?.locale);
+
+  const [hashData, priceData] = await fetchHashAndPriceData(params.hash);
+
+  return (
+    <>
+      <div className="relative container mx-auto px-3">
+        <Suspense fallback={<HashLoading />}>
+          <Details
+            hash={params.hash}
+            data={hashData}
+            loading={!hashData}
+            price={priceData}
+          />
+        </Suspense>
+      </div>
+      <div className="py-8"></div>
+    </>
+  );
+}
+
+async function fetchHashAndPriceData(hash: string) {
+  const hashDataPromise = fetchHashData(hash);
+
+  const priceDataPromise = hashDataPromise.then(async (data) => {
+    const timestamp = data?.blocks?.[0]?.block_timestamp;
+    return timestamp ? fetchPriceData(timestamp) : null;
+  });
+
+  const [hashData, priceData] = await Promise.all([
+    hashDataPromise,
+    priceDataPromise,
+  ]);
+  return [hashData, priceData];
+}
+
+async function fetchHashData(hash: string) {
+  return getRequest(`blocks/${hash}`);
+}
+
+async function fetchPriceData(timestamp: any) {
+  const formattedTimestamp = formatTimestamp(timestamp);
+  return getRequest(`stats/price?date=${formattedTimestamp}`);
+}
+
+function formatTimestamp(timestamp: any) {
+  return new Date(nanoToMilli(timestamp)).toISOString().split('T')[0];
+}

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

@@ -0,0 +1,91 @@
+import { NextIntlClientProvider } from 'next-intl';
+import Layout from '@/components/app/Layouts';
+import { getRequest } from '@/utils/app/api';
+import {
+  getLocale,
+  getMessages,
+  unstable_setRequestLocale,
+} from 'next-intl/server';
+
+export default async function ProviderLayout({
+  children,
+}: {
+  children: React.ReactNode;
+  params: any;
+}) {
+  const locale = await getLocale();
+  const messages = await getMessages({ locale });
+  unstable_setRequestLocale(locale);
+
+  const [stats, blocks] = await Promise.all([
+    getRequest(`stats`),
+    getRequest(`blocks/latest?limit=1`),
+  ]);
+
+  const handleFilterAndKeyword = async (
+    keyword: string,
+    filter: string,
+    returnPath: any,
+  ) => {
+    'use server';
+
+    if (keyword.includes('.')) {
+      keyword = keyword.toLowerCase();
+    }
+
+    const res = await getRequest(`search${filter}?keyword=${keyword}`);
+
+    const data = {
+      blocks: [],
+      txns: [],
+      accounts: [],
+      receipts: [],
+    };
+
+    if (res?.blocks?.length) {
+      if (returnPath) {
+        return { type: 'block', path: res.blocks[0].block_hash };
+      }
+      data.blocks = res.blocks;
+    }
+
+    if (res?.txns?.length) {
+      if (returnPath) {
+        return { type: 'txn', path: res.txns[0].transaction_hash };
+      }
+      data.txns = res.txns;
+    }
+
+    if (res?.receipts?.length) {
+      if (returnPath) {
+        return {
+          type: 'txn',
+          path: res.receipts[0].originated_from_transaction_hash,
+        };
+      }
+      data.receipts = res.receipts;
+    }
+
+    if (res?.accounts?.length) {
+      if (returnPath) {
+        return { type: 'address', path: res.accounts[0].account_id };
+      }
+      data.accounts = res.accounts;
+    }
+
+    return returnPath ? null : data;
+  };
+  return (
+    <>
+      <NextIntlClientProvider messages={messages}>
+        <Layout
+          stats={stats}
+          blocks={blocks}
+          handleFilterAndKeyword={handleFilterAndKeyword}
+        >
+          {children}
+        </Layout>
+      </NextIntlClientProvider>
+    </>
+  );
+}

apps/app/src/app/_not-found-component.tsx

@@ -0,0 +1,11 @@
+'use client';
+import Error from 'next/error';
+export default function NotFound() {
+  return (
+    <html>
+      <body>
+        <Error statusCode={404} />
+      </body>
+    </html>
+  );
+}