feat(app): migrate txns deatils to app router (#553)

feat(app): migrate txns deatils
Nearblocks · Oct 15, 2024 · 71a8f75 · 71a8f75
1 parent bf1b3f6
commit 71a8f75
Show file tree

Hide file tree

Showing 72 changed files with 7,454 additions and 992 deletions.
diff --git a/apps/app/src/app/[locale]/txns/[hash]/layout.tsx b/apps/app/src/app/[locale]/txns/[hash]/layout.tsx
@@ -0,0 +1,111 @@
+import FaCheckCircle from '@/components/app/Icons/FaCheckCircle';
+import SponserdText from '@/components/app/SponserdText';
+import ListCheck from '@/components/Icons/ListCheck';
+import { networkId } from '@/utils/app/config';
+import { getTranslations } from 'next-intl/server';
+import dynamic from 'next/dynamic';
+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, hash },
+}: {
+  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/${hash}`,
+    },
+  };
+}
+
+export default async function TxnsLayout({
+  params: { hash, locale },
+  children,
+}: {
+  children: React.ReactNode;
+  params: any;
+}) {
+  const t = await getTranslations({ locale });
+  const RpcMenu = dynamic(
+    () => import('../../../../components/app/Layouts/RpcMenu'),
+    {
+      ssr: false,
+    },
+  );
+  return (
+    <>
+      <div className="md:flex items-center justify-between container mx-auto px-3">
+        <div className="flex justify-between dark:text-neargray-10 border-b w-full px-2 pt-3 dark:border-black-200">
+          <h1 className="py-2 space-x-2 text-xl leading-8 text-nearblue-600">
+            {t ? t('txn.heading') : 'Transaction Details'}
+          </h1>
+
+          <ul className="flex relative md:pt-0 pt-2 items-center text-gray-500 text-xs">
+            <RpcMenu />
+            <li className="ml-3 max-md:mb-2">
+              <span className="group flex w-full relative h-full">
+                <a
+                  className={`md:flex justify-center w-full hover:text-green-500 dark:hover:text-green-250 hover:no-underline px-0 py-1`}
+                  href="#"
+                >
+                  <div className="py-2 px-2 h-8 bg-gray-100 dark:bg-black-200 rounded border">
+                    <ListCheck className="h-4 dark:filter dark:invert" />
+                  </div>
+                </a>
+                <ul className="bg-white dark:bg-black-600 soft-shadow hidden min-w-full absolute top-full right-0 rounded-md group-hover:block py-1 z-[99]">
+                  <li className="pb-2">
+                    <a
+                      className={`flex items-center whitespace-nowrap px-2 pt-2 hover:text-green-400 dark:text-neargray-10 dark:hover:text-green-250`}
+                      href={`https://lite.nearblocks.io/txns/${hash}?network=${networkId}`}
+                      target="_blank"
+                    >
+                      Validate Transaction
+                      <span className="w-4 ml-3 dark:text-green-250">
+                        <FaCheckCircle />
+                      </span>
+                    </a>
+                  </li>
+                </ul>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="container mx-auto pt-3 pb-6 px-5 text-nearblue-600">
+        <div className="min-h-[44px] md:min-h-[25px]">
+          <SponserdText />
+        </div>
+      </div>
+      {children}
+    </>
+  );
+}
diff --git a/apps/app/src/app/[locale]/txns/[hash]/page.tsx b/apps/app/src/app/[locale]/txns/[hash]/page.tsx
@@ -0,0 +1,23 @@
+import TxnsTabsSkeleton from '@/components/app/skeleton/txns/TxnsTabs';
+import TxnsTabs from '@/components/app/Transactions/TxnsTabs';
+import { Suspense } from 'react';
+
+export default async function TxnsHashIndex({
+  params: { hash, locale },
+  searchParams,
+}: {
+  params: { hash: string; locale: string };
+  searchParams: { tab: string; cursor?: string; p?: string; order: string };
+}) {
+  return (
+    <Suspense
+      fallback={
+        <TxnsTabsSkeleton tab={searchParams?.tab || 'overview'} hash={hash} />
+      }
+    >
+      <TxnsTabs hash={hash} locale={locale} searchParams={searchParams} />
+    </Suspense>
+  );
+}
+
+export const revalidate = 20;
diff --git a/apps/app/src/components/app/Transactions/Action/AddKey.tsx b/apps/app/src/components/app/Transactions/Action/AddKey.tsx
@@ -0,0 +1,80 @@
+import FaRight from '@/components/Icons/FaRight';
+import { Link } from '@/i18n/routing';
+import { shortenAddress, shortenHex } from '@/utils/libs';
+import { TransactionActionInfo } from '@/utils/types';
+import { useTranslations } from 'next-intl';
+
+const AddKey = (props: TransactionActionInfo) => {
+  const t = useTranslations();
+  if (typeof props.args.access_key?.permission !== 'object') {
+    return (
+      <div className="py-1">
+        <FaRight className="inline-flex text-gray-400 dark:text-neargray-10 text-xs mr-1" />
+        {t ? t('txn.actions.addKey.0') : 'New key'} (
+        <span className="font-bold">{shortenHex(props.args.public_key)}</span>){' '}
+        {t ? t('txn.actions.addKey.2') : 'added for'}
+        <Link
+          href={`/address/${props.receiver}`}
+          className="text-green-500 dark:text-green-250 font-bold hover:no-underline mx-1"
+        >
+          {shortenAddress(props.receiver)}
+        </Link>
+        {t ? t('txn.actions.addKey.4') : 'with permission'}
+        <span className="font-bold ml-1">
+          {props.args.access_key?.permission}
+        </span>
+      </div>
+    );
+  }
+
+  if (props.args.access_key.permission.permission_kind) {
+    return (
+      <div className="py-1">
+        <FaRight className="inline-flex text-gray-400 dark:text-neargray-10 text-xs mr-1" />
+        {t ? t('txn.actions.addKey.0') : 'New key'} (
+        <span className="font-bold">{shortenHex(props.args.public_key)}</span>)
+        {t ? t('txn.actions.addKey.2') : 'added for'}{' '}
+        <Link
+          href={`/address/${props.receiver}`}
+          className="text-green-500 dark:text-green-250 font-bold hover:no-underline mx-1"
+        >
+          {shortenAddress(props.receiver)}
+        </Link>
+        {t ? t('txn.actions.addKey.4') : 'with permission'}{' '}
+        <span className="font-bold ml-1">
+          {props.args.access_key.permission.permission_kind}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-1">
+      <FaRight className="inline-flex text-gray-400 dark:text-neargray-10 text-xs mr-1" />
+      {t ? t('txn.actions.addKey.1') : 'Access key'} (
+      <span className="font-bold">{shortenHex(props.args.public_key)}</span>){' '}
+      {t ? t('txn.actions.addKey.2') : 'added for'}
+      <span className="mx-1">{t ? t('txn.actions.addKey.3') : 'contract'}</span>
+      <Link
+        href={`/address/${props.args.access_key.permission.FunctionCall.receiver_id}`}
+        className="text-green-500 dark:text-green-250 font-bold hover:no-underline mr-1"
+      >
+        {shortenAddress(
+          props.args.access_key.permission.FunctionCall.receiver_id,
+        )}
+      </Link>
+      {t ? t('txn.actions.addKey.4') : 'with permission'}
+      <span className="mx-1">{t ? t('txn.actions.addKey.5') : 'to call'}</span>
+      <span className="font-bold">
+        {props.args.access_key.permission.FunctionCall.method_names.length > 0
+          ? props.args.access_key.permission.FunctionCall.method_names.join(
+              ', ',
+            )
+          : 'any'}{' '}
+      </span>
+      {t ? t('txn.actions.addKey.6') : 'methods'}
+    </div>
+  );
+};
+
+export default AddKey;
diff --git a/apps/app/src/components/app/Transactions/Action/Burrow/Borrow.tsx b/apps/app/src/components/app/Transactions/Action/Burrow/Borrow.tsx
@@ -0,0 +1,56 @@
+import TokenInfo from '@/components/common/TokenInfo';
+import { Link } from '@/i18n/routing';
+import { shortenAddress } from '@/utils/libs';
+import { DepositPropsInfo } from '@/utils/types';
+
+const Borrow = (props: DepositPropsInfo) => {
+  const FaRight = (props: { className: string }) => {
+    return (
+      <svg
+        stroke="currentColor"
+        fill="currentColor"
+        stroke-width="0"
+        viewBox="0 0 192 512"
+        className={props.className}
+        height="1em"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path>
+      </svg>
+    );
+  };
+
+  const log = props.event?.[0];
+
+  if (!log?.token_id || !log?.account_id || !log?.amount) return null;
+
+  return (
+    <div className="action flex flex-wrap items-center break-all leading-7">
+      <FaRight className="inline-flex text-gray-400 text-xs" />
+      <span className="font-bold px-1">Borrow </span>
+
+      <TokenInfo contract={log.token_id} amount={log.amount} decimals={18} />
+      <span className="font-bold text-gray px-1">
+        To{' '}
+        <Link
+          href={`/address/${log.account_id}`}
+          className="text-green-500 dark:text-green-250 font-normal pl-1 hover:no-underline"
+        >
+          {shortenAddress(log.account_id)}
+        </Link>
+      </span>
+      <span className="font-bold text-gray px-1">
+        On{' '}
+        <Link
+          href="/address/contract.main.burrow.near"
+          className="text-green-500 dark:text-green-250 font-normal hover:no-underline"
+        >
+          Burrow
+        </Link>
+      </span>
+    </div>
+  );
+};
+
+export default Borrow;
diff --git a/apps/app/src/components/app/Transactions/Action/Burrow/DecreaseCollateral.tsx b/apps/app/src/components/app/Transactions/Action/Burrow/DecreaseCollateral.tsx
@@ -0,0 +1,55 @@
+import TokenInfo from '@/components/common/TokenInfo';
+import { Link } from '@/i18n/routing';
+import { shortenAddress } from '@/utils/libs';
+import { DepositPropsInfo } from '@/utils/types';
+
+const DescreaseCollateral = (props: DepositPropsInfo) => {
+  const FaRight = (props: { className: string }) => {
+    return (
+      <svg
+        stroke="currentColor"
+        fill="currentColor"
+        stroke-width="0"
+        viewBox="0 0 192 512"
+        className={props.className}
+        height="1em"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path>
+      </svg>
+    );
+  };
+  const log = props.event?.[0];
+
+  if (!log?.token_id || !log?.account_id || !log?.amount) return null;
+
+  return (
+    <div className="action flex flex-wrap items-center break-all leading-7">
+      <FaRight className="inline-flex text-gray-400 dark:text-neargray-10 text-xs" />
+      <span className="font-bold px-1">Decrease Collateral </span>
+
+      <TokenInfo contract={log.token_id} amount={log.amount} decimals={18} />
+      <span className="font-bold text-gray px-1">
+        From{' '}
+        <Link
+          href={`/address/${log.account_id}`}
+          className="text-green-500 dark:text-green-250 font-normal pl-1 hover:no-underline"
+        >
+          {shortenAddress(log.account_id)}
+        </Link>
+      </span>
+      <span className="font-bold text-gray px-1">
+        On{' '}
+        <Link
+          href="/address/contract.main.burrow.near"
+          className="text-green-500 dark:text-green-250 font-normal hover:no-underline"
+        >
+          Burrow
+        </Link>
+      </span>
+    </div>
+  );
+};
+
+export default DescreaseCollateral;
diff --git a/apps/app/src/components/app/Transactions/Action/Burrow/Deposit.tsx b/apps/app/src/components/app/Transactions/Action/Burrow/Deposit.tsx
@@ -0,0 +1,55 @@
+import TokenInfo from '@/components/common/TokenInfo';
+import { Link } from '@/i18n/routing';
+import { shortenAddress } from '@/utils/libs';
+import { DepositPropsInfo } from '@/utils/types';
+
+const Deposit = (props: DepositPropsInfo) => {
+  const FaRight = (props: { className: string }) => {
+    return (
+      <svg
+        stroke="currentColor"
+        fill="currentColor"
+        stroke-width="0"
+        viewBox="0 0 192 512"
+        className={props.className}
+        height="1em"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path>
+      </svg>
+    );
+  };
+  const log = props.event?.[0];
+
+  if (!log?.token_id || !log?.account_id || !log?.amount) return null;
+
+  return (
+    <div className="action flex flex-wrap items-center break-all leading-7">
+      <FaRight className="inline-flex text-gray-400 dark:text-neargray-10 text-xs" />
+      <span className="font-bold px-1">Deposit </span>
+
+      <TokenInfo contract={log.token_id} amount={log.amount} decimals={18} />
+      <span className="font-bold text-gray px-1">
+        From{' '}
+        <Link
+          href={`/address/${log.account_id}`}
+          className="text-green-500 dark:text-green-250 font-normal pl-1 hover:no-underline"
+        >
+          {shortenAddress(log.account_id)}
+        </Link>
+      </span>
+      <span className="font-bold text-gray px-1">
+        On{' '}
+        <Link
+          href="/address/contract.main.burrow.near"
+          className="text-green-500 dark:text-green-250 font-normal hover:no-underline"
+        >
+          Burrow
+        </Link>
+      </span>
+    </div>
+  );
+};
+
+export default Deposit;