feat(app): add multichain info in app router

Nearblocks · Nov 14, 2024 · 52718a6 · 52718a6
1 parent b13f49f
commit 52718a6
Show file tree

Hide file tree

Showing 61 changed files with 1,436 additions and 327 deletions.
diff --git a/apps/app/public/images/metamask.svg b/apps/app/public/images/metamask.svg
diff --git a/apps/app/src/app/[locale]/about/page.tsx b/apps/app/src/app/[locale]/about/page.tsx
@@ -11,7 +11,7 @@ export default async function About({
   return (
     <>
       <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72 -mb-48"></div>
-      <div className="py-16 bg-white dark:bg-black-600 soft-shadow sm:container sm:mx-auto rounded-md my-10">
+      <div className="py-16 bg-white dark:bg-black-600 soft-shadow container-xxl sm:mx-auto rounded-md my-10">
         <h1 className="mb-4 pt-8 sm:text-2xl text-center text-2xl text-green-500 dark:text-green-250">
           {t('About Nearblocks')}
         </h1>

diff --git a/apps/app/src/app/[locale]/address/[id]/layout.tsx b/apps/app/src/app/[locale]/address/[id]/layout.tsx
@@ -6,21 +6,16 @@ import SponserdText from '@/components/app/SponserdText';
 import FaCheckCircle from '@/components/Icons/FaCheckCircle';
 import ListCheck from '@/components/Icons/ListCheck';
 import { appUrl, networkId } from '@/utils/app/config';
-
 const network = process.env.NEXT_PUBLIC_NETWORK_ID;
-
 export async function generateMetadata({
   params: { id, locale },
 }: {
   params: { id: string; locale: string };
 }) {
   unstable_setRequestLocale(locale);
-
   const thumbnail = `${appUrl}/api/og?account=true&address=${id}`;
-
   const metaTitle = `Near Account ${id} | NearBlocks`;
   const metaDescription = `Near Account ${id} page allows users to view transactions, balances, token holdings and transfers.`;
-
   return {
     alternates: {
       canonical: `${appUrl}/address/${id}`,
@@ -55,10 +50,10 @@ export default function AddressLayout({
   );
   return (
     <>
-      <div className="relative container mx-auto px-3 mb-10">
-        <div className="flex items-center justify-between flex-wrap pt-4">
-          <div className="flex md:flex-wrap w-full">
-            <div className="flex justify-between md:items-center dark:text-neargray-10 border-b w-full mb-5 dark:border-black-200">
+      <div className="relative container-xxl mx-auto px-3 mb-10">
+        <div className="flex items-center justify-between flex-wrap pt-3">
+          <div className="flex md:flex-wrap w-full border-b mb-5 dark:border-black-200">
+            <div className="sm:flex flex-1 justify-between md:items-center dark:text-neargray-10 w-full ">
               <h1 className="py-2 break-all space-x-2 text-xl text-gray-700 dark:text-white leading-8 px-2 font-medium">
                 Near Account:&nbsp;
                 {id && (
@@ -68,38 +63,42 @@ export default function AddressLayout({
                 )}
                 <Buttons address={id as string} />
               </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-lg 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://nearvalidate.org/address/${id}?network=${networkId}`}
-                          target="_blank"
-                        >
-                          Validate Account
-                          <span className="w-4 ml-3 dark:text-green-250">
-                            <FaCheckCircle />
-                          </span>
-                        </a>
-                      </li>
-                    </ul>
+              <div>
+                <ul className="flex relative md:pt-2 sm:pb-2 pb-1 items-center text-gray-500 text-xs">
+                  <span className="ml-2">
+                    <RpcMenu />
                   </span>
-                </li>
-              </ul>
+                  <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-lg 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://validate.nearblocks.io/address/${id}?network=${networkId}`}
+                            target="_blank"
+                          >
+                            Validate Account
+                            <span className="w-4 ml-3 dark:text-green-250">
+                              <FaCheckCircle />
+                            </span>
+                          </a>
+                        </li>
+                      </ul>
+                    </span>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
-          <div className="container mx-auto pl-2 pb-6 text-nearblue-600">
+          <div className="container-xxl justify-left pl-2 pb-6 text-nearblue-600">
             <div className="min-h-[80px] md:min-h-[25px]">
               <SponserdText />
             </div>

diff --git a/apps/app/src/app/[locale]/advertise/page.tsx b/apps/app/src/app/[locale]/advertise/page.tsx
@@ -52,7 +52,7 @@ export default async function Advertise({
 }) {
   const t = await getTranslations({ locale });
   return (
-    <div className="container mx-auto herobg flex flex-col items-center p-4.5 lg:!py-16 px-6">
+    <div className="container-xxl mx-auto herobg flex flex-col items-center p-4.5 lg:!py-16 px-6">
       <div className="w-full flex ">
         <div className="md:w-3/6 w-full flex flex-col items-start">
           <p className="text-green-500 text-sm lg:!text-base font-semibold lg:!mt-3 mt-5 dark:text-white">

diff --git a/apps/app/src/app/[locale]/blocks/[hash]/loading.tsx b/apps/app/src/app/[locale]/blocks/[hash]/loading.tsx
@@ -3,7 +3,7 @@ import HashLoading from '@/components/app/skeleton/blocks/hash';
 export default function Loading() {
   return (
     <>
-      <div className="relative container mx-auto px-3">
+      <div className="relative container-xxl mx-auto px-3">
         <HashLoading />
       </div>
       <div className="py-8"></div>

diff --git a/apps/app/src/app/[locale]/blocks/[hash]/page.tsx b/apps/app/src/app/[locale]/blocks/[hash]/page.tsx
@@ -19,7 +19,7 @@ export default async function Hash({
 
   return (
     <>
-      <div className="relative container mx-auto px-3">
+      <div className="relative container-xxl mx-auto px-3">
         <Suspense fallback={<HashLoading />}>
           <Details
             data={hashData}

diff --git a/apps/app/src/app/[locale]/blocks/page.tsx b/apps/app/src/app/[locale]/blocks/page.tsx
@@ -18,13 +18,13 @@ export default async function Blocks({
   return (
     <>
       <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72">
-        <div className="container mx-auto px-3">
+        <div className="container-xxl mx-auto px-3">
           <h1 className="mb-4 pt-8 sm:!text-2xl text-white text-lg font-medium">
             {t('blockHeading') || 'Latest Near Protocol Blocks'}
           </h1>
         </div>
       </div>
-      <div className="container mx-auto px-3 -mt-48">
+      <div className="container-xxl mx-auto px-3 -mt-48">
         <div className="relative block lg:flex lg:space-x-2">
           <div className="w-full">
             <Suspense fallback={<ListSkeleton />}>

diff --git a/apps/app/src/app/[locale]/charts/active-accounts/page.tsx b/apps/app/src/app/[locale]/charts/active-accounts/page.tsx
@@ -17,14 +17,14 @@ export default async function Tps({
   return (
     <section>
       <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72">
-        <div className="container mx-auto px-3">
+        <div className="container-xxl mx-auto px-3">
           <h1 className="mb-4 pt-8 sm:text-2xl text-xl text-white">
             {t('addressesCharts.heading')}
           </h1>
         </div>
       </div>
-      <div className="container mx-auto px-3 -mt-48">
-        <div className="container mx-auto px-3 -mt-36">
+      <div className="container-xxl mx-auto px-3 -mt-48">
+        <div className="container-xxl mx-auto px-3 -mt-36">
           <div className="relative">
             <Suspense
               fallback={<ChartDetails chartTypes="active-account-daily" />}

diff --git a/apps/app/src/app/[locale]/charts/addresses/page.tsx b/apps/app/src/app/[locale]/charts/addresses/page.tsx
@@ -56,14 +56,14 @@ export default async function AddressesChart({
   return (
     <section>
       <div className="bg-hero-pattern  dark:bg-hero-pattern-dark h-72">
-        <div className="container mx-auto px-3">
+        <div className="container-xxl mx-auto px-3">
           <h1 className="mb-4 pt-8 sm:!text-2xl text-xl text-white">
             {t('addressesCharts.heading')}
           </h1>
         </div>
       </div>
-      <div className="container mx-auto px-3 -mt-48">
-        <div className="container mx-auto px-3 -mt-36">
+      <div className="container-xxl mx-auto px-3 -mt-48">
+        <div className="container-xxl mx-auto px-3 -mt-36">
           <div className="relative">
             <Suspense fallback={<ChartDetails chartTypes="addresses" />}>
               <Chart

diff --git a/apps/app/src/app/[locale]/charts/blocks/page.tsx b/apps/app/src/app/[locale]/charts/blocks/page.tsx
@@ -56,14 +56,14 @@ export default async function BlocksChart({
   return (
     <section>
       <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72">
-        <div className="container mx-auto px-3">
+        <div className="container-xxl mx-auto px-3">
           <h1 className="mb-4 pt-8 sm:!text-2xl text-xl text-white">
             {t('blocksCharts.heading')}
           </h1>
         </div>
       </div>
-      <div className="container mx-auto px-3 -mt-48">
-        <div className="container mx-auto px-3 -mt-36">
+      <div className="container-xxl mx-auto px-3 -mt-48">
+        <div className="container-xxl mx-auto px-3 -mt-36">
           <div className="relative">
             <Suspense fallback={<ChartDetails chartTypes="blocks" />}>
               <Chart

diff --git a/apps/app/src/app/[locale]/charts/market-cap/page.tsx b/apps/app/src/app/[locale]/charts/market-cap/page.tsx
@@ -56,14 +56,14 @@ export default async function MarketCapChart({
   return (
     <section>
       <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72">
-        <div className="container mx-auto px-3">
+        <div className="container-xxl mx-auto px-3">
           <h1 className="mb-4 pt-8 sm:!text-2xl text-xl text-white">
             {t('marketCapCharts.heading')}
           </h1>
         </div>
       </div>
-      <div className="container mx-auto px-3 -mt-48">
-        <div className="container mx-auto px-3 -mt-36">
+      <div className="container-xxl mx-auto px-3 -mt-48">
+        <div className="container-xxl mx-auto px-3 -mt-36">
           <div className="relative">
             <Suspense fallback={<ChartDetails chartTypes="market-cap" />}>
               <Chart

diff --git a/apps/app/src/app/[locale]/charts/near-price/page.tsx b/apps/app/src/app/[locale]/charts/near-price/page.tsx
@@ -56,14 +56,14 @@ export default async function NearPriceChart({
   return (
     <section>
       <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72">
-        <div className="container mx-auto px-3">
+        <div className="container-xxl mx-auto px-3">
           <h1 className="mb-4 pt-8 sm:!text-2xl text-xl text-white">
             {t('charts.nearPrice.heading')}
           </h1>
         </div>
       </div>
-      <div className="container mx-auto px-3 -mt-48">
-        <div className="container mx-auto px-3 -mt-36">
+      <div className="container-xxl mx-auto px-3 -mt-48">
+        <div className="container-xxl mx-auto px-3 -mt-36">
           <div className="relative">
             <Suspense fallback={<ChartDetails chartTypes="near-price" />}>
               <Chart

diff --git a/apps/app/src/app/[locale]/charts/near-supply/page.tsx b/apps/app/src/app/[locale]/charts/near-supply/page.tsx
@@ -56,14 +56,14 @@ export default async function NearSupplyChart({
   return (
     <section>
       <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72">
-        <div className="container mx-auto px-3">
+        <div className="container-xxl mx-auto px-3">
           <h1 className="mb-4 pt-8 sm:!text-2xl text-xl text-white">
             {t('nearSupplyCharts.heading')}
           </h1>
         </div>
       </div>
-      <div className="container mx-auto px-3 -mt-48">
-        <div className="container mx-auto px-3 -mt-36">
+      <div className="container-xxl mx-auto px-3 -mt-48">
+        <div className="container-xxl mx-auto px-3 -mt-36">
           <div className="relative">
             <Suspense fallback={<ChartDetails chartTypes="near-supply" />}>
               <Chart

diff --git a/apps/app/src/app/[locale]/charts/page.tsx b/apps/app/src/app/[locale]/charts/page.tsx
@@ -16,14 +16,14 @@ export default async function ChartIndex({
   return (
     <>
       <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72">
-        <div className="container mx-auto px-3">
+        <div className="container-xxl mx-auto px-3">
           <h1 className="mb-4 pt-8 sm:!text-2xl text-xl text-white font-medium">
             {t('charts.heading')}
           </h1>
         </div>
       </div>
       <div className="mx-auto px-3 -mt-48">
-        <div className="container mx-auto px-3 -mt-36">
+        <div className="container-xxl mx-auto px-3 -mt-36">
           <div className="relative">
             <Suspense fallback={<ChartSkeletion />}>
               <Chart poweredBy={false} />

diff --git a/apps/app/src/app/[locale]/charts/tps/page.tsx b/apps/app/src/app/[locale]/charts/tps/page.tsx
@@ -52,14 +52,14 @@ export default async function Tps() {
   return (
     <section>
       <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72">
-        <div className="container mx-auto px-3">
+        <div className="container-xxl mx-auto px-3">
           <h1 className="mb-4 pt-8 sm:!text-2xl text-xl text-white">
             Near Transactions per Second Chart
           </h1>
         </div>
       </div>
-      <div className="container mx-auto px-3 -mt-48">
-        <div className="container mx-auto px-3 -mt-36">
+      <div className="container-xxl mx-auto px-3 -mt-48">
+        <div className="container-xxl mx-auto px-3 -mt-36">
           <div className="relative">
             <Suspense fallback={<ChartDetails chartTypes="near-tps" />}>
               <TpsChart chartTypes={'near-tps'} data={data} poweredBy={false} />

diff --git a/apps/app/src/app/[locale]/charts/txn-fee/page.tsx b/apps/app/src/app/[locale]/charts/txn-fee/page.tsx
@@ -56,14 +56,14 @@ export default async function TxnFeeChart({
   return (
     <section>
       <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72">
-        <div className="container mx-auto px-3">
+        <div className="container-xxl mx-auto px-3">
           <h1 className="mb-4 pt-8 sm:!text-2xl text-xl text-white">
             {t('txnFeeCharts.heading')}
           </h1>
         </div>
       </div>
-      <div className="container mx-auto px-3 -mt-48">
-        <div className="container mx-auto px-3 -mt-36">
+      <div className="container-xxl mx-auto px-3 -mt-48">
+        <div className="container-xxl mx-auto px-3 -mt-36">
           <div className="relative">
             <Suspense fallback={<ChartDetails chartTypes="txn-fee" />}>
               <Chart

diff --git a/apps/app/src/app/[locale]/charts/txn-volume/page.tsx b/apps/app/src/app/[locale]/charts/txn-volume/page.tsx
@@ -56,14 +56,14 @@ export default async function TxnVolumeChart({
   return (
     <section>
       <div className="bg-hero-pattern dark:bg-hero-pattern-dark h-72">
-        <div className="container mx-auto px-3">
+        <div className="container-xxl mx-auto px-3">
           <h1 className="mb-4 pt-8 sm:!text-2xl text-xl text-white">
             {t('txnVolumeCharts.heading')}
           </h1>
         </div>
       </div>
-      <div className="container mx-auto px-3 -mt-48">
-        <div className="container mx-auto px-3 -mt-36">
+      <div className="container-xxl mx-auto px-3 -mt-48">
+        <div className="container-xxl mx-auto px-3 -mt-36">
           <div className="relative">
             <Suspense fallback={<ChartDetails chartTypes="txn-volume" />}>
               <Chart