fix(app): title mismatch issue on near block count chart (#841)

Co-authored-by: yudho <yadudevpro@gmail.com>

Author: kevin-devstack

apps/app/public/images/charts/blocks.svg

@@ -70,7 +70,7 @@ const Chart = (props: Props) => {
     },
     {
       link: '/charts/blocks',
-      text: t ? t('charts:blocks.heading') : 'New Blocks',
+      text: t ? t('charts:blocks.heading') : 'Near Block Count',
       image: `/images/charts/blocks.svg`,
       image_dark: `/images/charts/blocks_dark.svg`,
       exclude: false,
@@ -200,10 +200,10 @@ const Chart = (props: Props) => {
             'Near Supply Growth Chart shows a breakdown of daily and the total Near supply.';
           break;
         case 'blocks':
-          titleText = 'New Blocks';
+          titleText = 'Near Block Count';
           yLabel = 'Blocks per Day';
           description =
-            'New Blocks Chart shows the historical number of blocks produced daily on Near blockchain.';
+            'Near Block Count Chart shows the historical number of blocks produced daily on Near blockchain.';
           break;
         case 'addresses':
           titleText = 'Near Unique Accounts Chart';

apps/app/public/images/charts/blocks_dark.svg

@@ -63,7 +63,7 @@ const TpsChart = (props: Props) => {
     },
     {
       link: '/charts/blocks',
-      text: t ? t('charts:blocks.heading') : 'New Blocks',
+      text: t ? t('charts:blocks.heading') : 'Near Block Count',
       image: `/images/charts/blocks.svg`,
       image_dark: `/images/charts/blocks_dark.svg`,
       exclude: false,

apps/app/src/components/Charts/Chart.tsx

@@ -938,17 +938,17 @@ const Details = (props: Props) => {
                 </div>
               </Tooltip>
               NEP-245 Tokens Transferred
-              <div className="px-[0.65em] py-[0.45em] rounded-[1rem] leading-[.50rem] bg-neargray-700 dark:bg-black-200 text-black-500 dark:text-neargray-10 ml-1 font-semibold items-center text-center justify-center">
-                {`${totalTokenIdsCount}`}
-              </div>
             </div>
             {loading ? (
               <div className="w-full md:w-3/4">
                 <Loader wrapperClassName="flex w-full max-w-xs" />
               </div>
             ) : (
               <div className="relative w-full md:w-3/4">
-                <NEPTokenTransactions events={allEvents} />
+                <NEPTokenTransactions
+                  events={allEvents}
+                  totalTokenIdsCount={totalTokenIdsCount}
+                />
               </div>
             )}
           </div>

apps/app/src/components/Charts/TpsChart.tsx

@@ -2,13 +2,14 @@ import React, { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import { parseEventLogs } from '@/utils/near';
 import FaRight from '../Icons/FaRight';
-import { shortenAddress } from '@/utils/libs';
+import { localFormat, shortenAddress } from '@/utils/libs';
 import TokenInfo from './TokenInfo';
 import { TransactionLog } from '@/utils/types';
 import ArrowDownDouble from '../Icons/ArrowDownDouble';
 
 interface ParsedEventListProps {
   events: TransactionLog[];
+  totalTokenIdsCount?: number;
 }
 
 const RenderAllTransfers: React.FC<ParsedEventListProps> = ({ events }) => {
@@ -334,6 +335,7 @@ const RenderNetTransfers: React.FC<ParsedEventListProps> = ({ events }) => {
 
 const NEPTokenTransactions: React.FC<ParsedEventListProps> = ({
   events,
+  totalTokenIdsCount,
 }: ParsedEventListProps) => {
   const [tabIndex, setTabIndex] = useState(1);
 
@@ -350,6 +352,11 @@ const NEPTokenTransactions: React.FC<ParsedEventListProps> = ({
           onClick={() => onTab(1)}
         >
           <h2 className="p-1.5">All Transfers</h2>
+          {totalTokenIdsCount && (
+            <div className="absolute text-white bg-neargreen text-[10px] h-4 inline-flex items-center font-semibold rounded-full ml-7 -top-2 z-10 px-[0.65em] py-[0.45em]">
+              {localFormat(totalTokenIdsCount.toString())}
+            </div>
+          )}
         </button>
         <button
           className={`pl-1 relative text-xs leading-4 font-medium inline-block cursor-pointer mb-3 mr-3 focus:outline-none rounded-lg ${

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

@@ -70,7 +70,7 @@ export default function (props: Props) {
     },
     {
       link: '/charts/blocks',
-      text: t ? t('charts:blocks.heading') : 'New Blocks',
+      text: t ? t('charts:blocks.heading') : 'Near Block Count',
       image: `/images/charts/blocks.svg`,
       image_dark: `/images/charts/blocks_dark.svg`,
       exclude: false,