fix(explorer): stlye the main page table (#2349)

kadena-community · Jul 2, 2024 · e80d984 · e80d984
1 parent 31612f6
commit e80d984
Show file tree

Hide file tree

Showing 12 changed files with 337 additions and 187 deletions.
diff --git a/.changeset/warm-ways-join.md b/.changeset/warm-ways-join.md
@@ -0,0 +1,2 @@
+---
+---
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
@@ -1,36 +1,66 @@
-import React from 'react';
+import { Stack } from '@kadena/kode-ui';
+import React, { useEffect, useState } from 'react';
+import { barClass } from './style.css';
+
+interface IData {
+  height: number;
+  data: number;
+}
 
 interface IBlockActivityChartProps {
-  data: number[];
+  data: IData[];
+  maxBlockTxCount: number;
 }
 
-const BlockActivityChart: React.FC<IBlockActivityChartProps> = ({ data }) => {
-  const barWidth = 15;
-  const gap = 4;
-  const totalWidth = data.length * (barWidth + gap); // Calculate total width
-  const height = 50;
-  const maxValue = Math.max(...data);
+const BlockActivityChart: React.FC<IBlockActivityChartProps> = ({
+  data,
+  maxBlockTxCount,
+}) => {
+  const [innerData, setInnerData] = useState<IData[]>(
+    data.map((o) => ({ ...o, data: 2 })),
+  );
+  const barWidth = 12;
+  const height = 40;
+  const maxValue = maxBlockTxCount;
   const scaleFactor = maxValue !== 0 ? height / maxValue : 1;
 
+  useEffect(() => {
+    if (!data.length) return;
+
+    setInnerData(
+      data.map((o) => {
+        return {
+          ...o,
+          data: Math.max(o.data * scaleFactor, o.data === 0 ? 2 : 0),
+        };
+      }),
+    );
+  }, [data]);
   return (
-    <svg width={totalWidth} height={height} xmlns="http://www.w3.org/2000/svg">
-      {data.map((value, index) => {
-        const barHeight = Math.max(value * scaleFactor, value === 0 ? 2 : 0);
-        const x = index * (barWidth + gap);
-        const y = height - barHeight;
+    <>
+      <Stack
+        position="relative"
+        style={{ height, transform: 'translateX(-20px)' }}
+      >
+        {data.map((data, idx) => {
+          const barHeight = innerData[idx].data;
+          const x = idx * barWidth;
+          const y = height - barHeight;
 
-        return (
-          <rect
-            key={index}
-            x={x}
-            y={y}
-            width={barWidth}
-            height={barHeight}
-            fill="black"
-          />
-        );
-      })}
-    </svg>
+          return (
+            <Stack
+              className={barClass}
+              key={data.height}
+              style={{
+                left: x,
+                top: y,
+                height: barHeight,
+              }}
+            ></Stack>
+          );
+        })}
+      </Stack>
+    </>
   );
 };
 

diff --git a/packages/apps/explorer/src/components/block-activity-graph/style.css.ts b/packages/apps/explorer/src/components/block-activity-graph/style.css.ts
@@ -0,0 +1,13 @@
+import { tokens } from '@kadena/kode-ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const barClass = style([
+  {
+    position: 'absolute',
+    left: 0,
+    width: '8px',
+    backgroundColor:
+      tokens.kda.foundation.color.icon.brand.primary.inverse.default,
+    transition: 'all 1s ease',
+  },
+]);
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
@@ -1,13 +1,89 @@
-import { atoms } from '@kadena/kode-ui/styles';
-import { style } from '@vanilla-extract/css';
+import { barClass } from '@/components/block-activity-graph/style.css';
+import { $$pageWidth } from '@/components/layout/styles.css';
+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([
+  {
+    paddingBlockEnd: '0',
+  },
+]);
 
 export const headerColumnStyle = style([
   atoms({
+    display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
-    borderStyle: 'solid',
-    borderWidth: 'hairline',
-    padding: 'md',
+    paddingBlock: 'sm',
+    backgroundColor: 'surface.default',
+  }),
+  {
+    selectors: {
+      '&:nth-child(even)': {
+        background: token('color.background.layer.default'),
+      },
+      '&:nth-child(3), &:nth-child(5)': {
+        background: token('color.background.input.default'),
+      },
+    },
+  },
+  responsiveStyle({
+    xs: {
+      selectors: {
+        '&:nth-child(2), &:nth-child(7)': {
+          display: 'none',
+        },
+      },
+    },
+    md: {
+      selectors: {
+        '&:nth-child(2), &:nth-child(7)': {
+          display: 'flex',
+        },
+      },
+    },
+  }),
+]);
+
+globalStyle(
+  `${blockGridHoverableStyle}:hover ${headerColumnStyle}:nth-child(even)`,
+  {
+    backgroundColor: tokens.kda.foundation.color.background.base['@hover'],
+  },
+);
+
+globalStyle(
+  `${blockGridHoverableStyle}:hover ${headerColumnStyle}:nth-child(3), ${blockGridHoverableStyle}:hover ${headerColumnStyle}:nth-child(5)`,
+  {
+    background: token('color.background.input.default'),
+  },
+);
+
+globalStyle(`${blockGridHoverableStyle}:hover ${barClass}`, {
+  backgroundColor:
+    tokens.kda.foundation.color.icon.brand.primary.inverse['@hover'],
+});
+
+export const columnTitleClass = style([
+  atoms({
+    color: 'text.gray.default',
+  }),
+]);
+
+export const blockHeaderFixedClass = style([
+  atoms({
+    position: 'fixed',
+  }),
+  {
+    top: '70px',
+    width: '100%',
+    zIndex: tokens.kda.foundation.zIndex.dialog,
+  },
+  responsiveStyle({
+    xxl: {
+      width: $$pageWidth,
+    },
   }),
 ]);
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
@@ -1,77 +1,68 @@
 import { Media } from '@/components/layout/media';
 import { Grid, Stack, Text } from '@kadena/kode-ui';
+import classNames from 'classnames';
 import React from 'react';
-import {
-  blockGridStyle,
-  blockHeightColumnHeaderStyle,
-} from '../block-table.css';
-import { headerColumnStyle } from './block-header.css';
+import { blockGridStyle } from '../block-table.css';
+import { columnTitleClass, headerColumnStyle } from './block-header.css';
 
 interface IBlockTableHeaderProps {
   startColumns: Array<{ title: string; subtitle?: string }>;
   heightColumns: Array<number>;
   endColumn: { title: string; subtitle?: string };
-  isCompact?: boolean;
 }
 
 const blockHeightColumnDescription = 'Block Height';
+const blockHeightColumnSmallDescription = 'B. Height';
 
 const BlockTableHeader: React.FC<IBlockTableHeaderProps> = ({
   startColumns,
   heightColumns,
   endColumn,
-  isCompact,
 }) => {
   return (
-    <Grid columns={4} className={blockGridStyle}>
-      {isCompact ? (
-        <Stack key={0} className={headerColumnStyle}>
-          <Text variant="body" size="small">
-            {startColumns[0].title}
-          </Text>
-          <Text variant="body" size="small" bold>
-            {startColumns[0].subtitle}
+    <Grid className={classNames(blockGridStyle)}>
+      {startColumns.map((column, index) => (
+        <Stack key={index} className={headerColumnStyle}>
+          <Text as="p" variant="body" size="small" className={columnTitleClass}>
+            {column.title}
           </Text>
+
+          <Media greaterThanOrEqual="md">
+            <Text as="p" variant="body" size="small" bold>
+              {column.subtitle}
+            </Text>
+          </Media>
         </Stack>
-      ) : (
-        startColumns.map((column, index) => (
-          <Stack key={index} className={headerColumnStyle}>
-            <Text variant="body" size="small">
-              {column.title}
+      ))}
+
+      {heightColumns.map((height, index) => (
+        <Stack key={index} className={headerColumnStyle}>
+          <Media greaterThanOrEqual="md">
+            <Text variant="body" size="small" className={columnTitleClass}>
+              {blockHeightColumnDescription}
             </Text>
-            {isCompact ?? (
-              <Text variant="body" size="small" bold>
-                {column.subtitle}
-              </Text>
-            )}
-          </Stack>
-        ))
-      )}
-      <Stack borderStyle="solid" borderWidth="hairline">
-        {heightColumns.map((height, index) => (
-          <Stack key={index} className={blockHeightColumnHeaderStyle}>
-            <Media greaterThanOrEqual="sm">
-              <Text variant="body" size="small">
-                {blockHeightColumnDescription}
-              </Text>
-            </Media>
+          </Media>
 
-            <Text variant="body" size="small" bold>
-              {height}
+          <Media lessThan="md">
+            <Text variant="body" size="small" className={columnTitleClass}>
+              {blockHeightColumnSmallDescription}
             </Text>
-          </Stack>
-        ))}
-      </Stack>
-      {!isCompact && (
-        <Stack className={headerColumnStyle}>
-          <Text variant="body" size="small">
-            {endColumn.title}
-          </Text>
+          </Media>
+
           <Text variant="body" size="small" bold>
-            {endColumn.subtitle}
+            {height}
           </Text>
         </Stack>
-      )}
+      ))}
+
+      <Stack className={headerColumnStyle}>
+        <Text as="p" variant="body" size="small" className={columnTitleClass}>
+          {endColumn.title}
+        </Text>
+        <Text as="p" variant="body" size="small" bold>
+          {endColumn.subtitle}
+        </Text>
+      </Stack>
     </Grid>
   );
 };