feat(explorer): block info in table block detail. Stop calling networ…

…kInfo when error (#2403) * feat(explorer): block info in table block detail. Stop calling networkInfo when error * feat(explorer): use inMemoryCache for ApolloClient * fix(graph): remove AND part from query
kadena-community · Jul 12, 2024 · 1707e63 · 1707e63
1 parent 3b4016c
commit 1707e63
Show file tree

Hide file tree

Showing 32 changed files with 235 additions and 257 deletions.
diff --git a/.changeset/heavy-maps-own.md b/.changeset/heavy-maps-own.md
@@ -0,0 +1,8 @@
+---
+'@kadena/explorer': patch
+'@kadena/graph': patch
+---
+
+Improve performance by memoizing networkInfo result in graph every 30 seconds.
+Skipping in explorer when there's an error. Added block info to row-block
+component on main page
diff --git a/packages/apps/explorer/next.config.js b/packages/apps/explorer/next.config.js
@@ -22,7 +22,7 @@ module.exports = withSentryConfig(module.exports, {
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options
 
-  org: 'kadena-test',
+  org: 'kadena',
   project: 'kadena-explorer',
 
   // Only print logs for uploading source maps in CI

diff --git a/...es/apps/explorer/src/components/account.transactions-table/account.transactions-table.tsx b/...es/apps/explorer/src/components/account.transactions-table/account.transactions-table.tsx
@@ -8,7 +8,10 @@ import { graphqlIdFor } from '@/utils/graphqlIdFor';
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import CompactTable from '../compact-table/compact-table';
-import { FormatLink } from '../compact-table/utils/format-link';
+import {
+  FormatJsonParse,
+  FormatLink,
+} from '../compact-table/utils/format-link';
 import { FormatStatus } from '../compact-table/utils/format-status';
 import { useToast } from '../toasts/toast-context/toast-context';
 import { loadingData } from './loading-data-account-transactionsquery';
@@ -91,6 +94,7 @@ const AccountTransactionsTable: FC<{ accountName: string }> = ({
           key: 'cmd.payload.code',
           variant: 'code',
           width: '40%',
+          render: FormatJsonParse(),
         },
       ]}
       data={innerData.node!.transactions.edges.map(

diff --git a/packages/apps/explorer/src/components/block-activity-graph/block-activity-graph.tsx b/packages/apps/explorer/src/components/block-activity-graph/block-activity-graph.tsx
@@ -7,12 +7,12 @@ interface IData {
   data: number;
 }
 
-interface IBlockActivityChartProps {
+interface IChainActivityChartProps {
   data: IData[];
   maxBlockTxCount: number;
 }
 
-const BlockActivityChart: React.FC<IBlockActivityChartProps> = ({
+const ChainActivityChart: React.FC<IChainActivityChartProps> = ({
   data,
   maxBlockTxCount,
 }) => {
@@ -64,4 +64,4 @@ const BlockActivityChart: React.FC<IBlockActivityChartProps> = ({
   );
 };
 
-export default BlockActivityChart;
+export default ChainActivityChart;
diff --git a/packages/apps/explorer/src/components/block-table/block-cell/block-cell.tsx b/packages/apps/explorer/src/components/block-table/block-cell/block-cell.tsx
@@ -26,6 +26,7 @@ const BlockCell: FC<IProps> = ({ height, chainId, isSelected, isLoading }) => {
   const { handleOpenHeightBlock } = useBlockInfo();
 
   const handleOpenHeight = useCallback(() => {
+    if (isLoading) return;
     if (handleOpenHeightBlock) {
       handleOpenHeightBlock(chainId, height);
     }

diff --git a/packages/apps/explorer/src/components/block-table/block-header/block-header.css.ts b/packages/apps/explorer/src/components/block-table/block-header/block-header.css.ts
@@ -4,7 +4,7 @@ import { atoms, responsiveStyle, token, tokens } from '@kadena/kode-ui/styles';
 import { globalStyle, style } from '@vanilla-extract/css';
 import { blockGridHoverableStyle } from '../block-table.css';
 
-export const blockActivityColumnClass = style([
+export const chainActivityColumnClass = style([
   {
     paddingBlockEnd: '0',
   },

diff --git a/packages/apps/explorer/src/components/block-table/block-header/block-header.tsx b/packages/apps/explorer/src/components/block-table/block-header/block-header.tsx
@@ -13,8 +13,8 @@ interface IBlockTableHeaderProps {
   isLoading: boolean;
 }
 
-const blockHeightColumnDescription = 'Block Height';
-const blockHeightColumnSmallDescription = 'B. Height';
+const blockHeightColumnDescription = 'Height';
+const blockHeightColumnSmallDescription = 'Height';
 
 const BlockTableHeader: React.FC<IBlockTableHeaderProps> = ({
   startColumns,

diff --git a/packages/apps/explorer/src/components/block-table/block-row/block-row.tsx b/packages/apps/explorer/src/components/block-table/block-row/block-row.tsx
@@ -1,4 +1,4 @@
-import BlockActivityChart from '@/components/block-activity-graph/block-activity-graph';
+import ChainActivityChart from '@/components/block-activity-graph/block-activity-graph';
 import ValueLoader from '@/components/loading-skeleton/value-loader/value-loader';
 import type { IHeightBlock } from '@/services/block';
 import { formatNumberWithUnit } from '@/services/format';
@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import React from 'react';
 import BlockCell from '../block-cell/block-cell';
 import {
-  blockActivityColumnClass,
+  chainActivityColumnClass,
   columnTitleClass,
   headerColumnStyle,
 } from '../block-header/block-header.css';
@@ -43,12 +43,12 @@ const BlockTableRow: React.FC<IBlockTableRowProps> = ({
     blockRowData[heights[0]]?.difficulty ||
     'N/A';
 
-  const isShowHeightInfo = selectedChainId === chainId;
+  const isShowBlockDetails = selectedChainId === chainId;
 
   return (
     <Stack
       className={classNames(blockWrapperClass, {
-        [blockWrapperSelectedClass]: isShowHeightInfo,
+        [blockWrapperSelectedClass]: isShowBlockDetails,
       })}
       width="100%"
       flexDirection="column"
@@ -75,7 +75,9 @@ const BlockTableRow: React.FC<IBlockTableRowProps> = ({
           blockRowData[height] ? (
             <BlockCell
               isLoading={isLoading}
-              isSelected={isShowHeightInfo && height === selectedHeight?.height}
+              isSelected={
+                isShowBlockDetails && height === selectedHeight?.height
+              }
               key={`${height}${chainId}`}
               height={blockRowData[height]}
               chainId={chainId}
@@ -92,9 +94,9 @@ const BlockTableRow: React.FC<IBlockTableRowProps> = ({
         )}
 
         <Stack
-          className={classNames(headerColumnStyle, blockActivityColumnClass)}
+          className={classNames(headerColumnStyle, chainActivityColumnClass)}
         >
-          <BlockActivityChart
+          <ChainActivityChart
             maxBlockTxCount={maxBlockTxCount}
             data={heights.map((height) => ({
               height,
@@ -103,7 +105,7 @@ const BlockTableRow: React.FC<IBlockTableRowProps> = ({
           />
         </Stack>
       </Grid>
-      {isShowHeightInfo && <HeightInfo height={selectedHeight} />}
+      {isShowBlockDetails && <HeightInfo blockData={selectedHeight} />}
     </Stack>
   );
 };

diff --git a/packages/apps/explorer/src/components/block-table/block-row/height-info/height-info.tsx b/packages/apps/explorer/src/components/block-table/block-row/height-info/height-info.tsx
@@ -1,18 +1,22 @@
 import BlockTransactions from '@/components/block-transactions/block-transactions';
-import Link from '@/components/routing/link';
+import DataRenderComponent from '@/components/data-render-component/data-render-component';
+// import Link from '@/components/routing/link';
 import routes from '@/constants/routes';
 import type { IBlockData } from '@/services/block';
-import { Heading, Stack, TextLink } from '@kadena/kode-ui';
+import {
+  // Heading,
+  Stack,
+} from '@kadena/kode-ui';
 import type { FC } from 'react';
 import React from 'react';
 import { blockInfoClass } from './styles.css';
 
 interface IProps {
-  height?: IBlockData;
+  blockData?: IBlockData;
 }
 
-const HeightInfo: FC<IProps> = ({ height }) => {
-  if (!height) return null;
+const HeightInfo: FC<IProps> = ({ blockData }) => {
+  if (!blockData) return null;
 
   return (
     <Stack
@@ -22,19 +26,29 @@ const HeightInfo: FC<IProps> = ({ height }) => {
       flexDirection="column"
     >
       <Stack alignItems="center" paddingInlineEnd="md">
-        <Heading as="h6">Block {height.height}</Heading>
+        <DataRenderComponent
+          type="horizontal"
+          fields={[
+            {
+              key: 'Chain',
+              value: blockData.chainId.toString(10),
+            },
+            {
+              key: 'Height',
+              value: blockData.height.toString(),
+            },
+            {
+              key: 'Hash',
+              value: blockData.hash,
+              link: `${routes.BLOCK_DETAILS}/${blockData.hash}`,
+            },
+          ]}
+        />
 
         <Stack flex={1} />
-        <Link
-          href={`${routes.BLOCK_DETAILS}/${height.hash}`}
-          legacyBehavior
-          passHref
-        >
-          <TextLink>See all details</TextLink>
-        </Link>
       </Stack>
 
-      <BlockTransactions hash={height.hash} />
+      <BlockTransactions hash={blockData.hash} />
     </Stack>
   );
 };

diff --git a/packages/apps/explorer/src/components/block-table/block-table.tsx b/packages/apps/explorer/src/components/block-table/block-table.tsx
@@ -22,9 +22,9 @@ export const startColumns = [
   { title: 'Chain', subtitle: 'Difficulty' },
 ];
 
-const endColumn = { title: 'Block', subtitle: 'Activity' };
+const endColumn = { title: 'Chain', subtitle: 'Activity' };
 
-const getmaxBlockTxCount = (blockData: IChainBlock): number => {
+const getMaxBlockTxCount = (blockData: IChainBlock): number => {
   const txCounts = Math.max(
     ...Object.entries(blockData)
       .map(([, chain]) => {
@@ -154,7 +154,7 @@ const BlockTable: React.FC = () => {
     if (newBlocksData) {
       const updatedBlockData = addBlockData(blockData, newBlocksData);
       setBlockData(updatedBlockData);
-      setmaxBlockTxCount(getmaxBlockTxCount(updatedBlockData));
+      setmaxBlockTxCount(getMaxBlockTxCount(updatedBlockData));
       if (!newBlocksData.newBlocks) return;
 
       const newMaxHeight = Math.max(

diff --git a/packages/apps/explorer/src/components/block-transactions/block-transactions.graph.ts b/packages/apps/explorer/src/components/block-transactions/block-transactions.graph.ts
@@ -11,6 +11,7 @@ export const blockTransactions: DocumentNode = gql`
   ) {
     node(id: $id) {
       ... on Block {
+        hash
         transactions(
           first: $first
           after: $after
@@ -27,6 +28,7 @@ export const blockTransactions: DocumentNode = gql`
           edges {
             cursor
             node {
+              id
               hash
               cmd {
                 meta {

diff --git a/packages/apps/explorer/src/components/block-transactions/block-transactions.tsx b/packages/apps/explorer/src/components/block-transactions/block-transactions.tsx
@@ -6,7 +6,10 @@ import { Heading, Stack } from '@kadena/kode-ui';
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import CompactTable from '../compact-table/compact-table';
-import { FormatLink } from '../compact-table/utils/format-link';
+import {
+  FormatJsonParse,
+  FormatLink,
+} from '../compact-table/utils/format-link';
 import { FormatStatus } from '../compact-table/utils/format-status';
 import { useToast } from '../toasts/toast-context/toast-context';
 import { loadingData } from './loading-data-blocktransactionsquery';
@@ -107,6 +110,7 @@ const BlockTransactions: FC<IProps> = ({ hash }) => {
           key: 'cmd.payload.code',
           variant: 'code',
           width: '40%',
+          render: FormatJsonParse(),
         },
       ]}
       data={innerData.node.transactions.edges.map(