Merge pull request #220 from pastelnetwork/hotfix/fix-format-datetime…

…-bugs-for-supernodes-page fix format datetime issues
pastelnetwork · May 28, 2024 · 7c928c0 · 7c928c0
2 parents 9f7f9ca + 38fd5cb
commit 7c928c0
Show file tree

Hide file tree

Showing 14 changed files with 247 additions and 111 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -1890,6 +1890,18 @@
       "currentBalance": {
         "message": "Current balance",
         "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "address": {
+        "message": "Address",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "output": {
+        "message": "Output",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "blockHeight": {
+        "message": "Block Height",
+        "description": "Used for the CascadeAndSenseStatistics page"
       }
     },
     "pastelIdDetails": {
@@ -3034,6 +3046,18 @@
       "seeLess": {
         "message": "See less",
         "description": "Used for the Supernodes page"
+      },
+      "pubkey": {
+        "message": "Pubkey",
+        "description": "Used for the Supernodes page"
+      },
+      "extAddress": {
+        "message": "Ext Address",
+        "description": "Used for the Supernodes page"
+      },
+      "extP2P": {
+        "message": "Ext P2P",
+        "description": "Used for the Supernodes page"
       }
     },
     "tickets": {

diff --git a/src/components/Summary/Summary.helpers.ts b/src/components/Summary/Summary.helpers.ts
@@ -94,7 +94,10 @@ export const calculateDifference = (
   const firstValue = parseFloat(first.toString());
   const secondValue = parseFloat(second.toString());
 
-  const difference = ((firstValue - secondValue) / ((firstValue + secondValue) / 2)) * 100;
+  let difference = ((firstValue - secondValue) / ((firstValue + secondValue) / 2)) * 100;
+  if (firstValue < secondValue) {
+    difference = ((firstValue - secondValue) / secondValue) * 100;
+  }
 
   if (Number.isNaN(difference)) return '0.00';
 

diff --git a/src/components/Summary/Summary.tsx b/src/components/Summary/Summary.tsx
@@ -27,7 +27,7 @@ import { ISocketData } from '@utils/types/ISocketData';
 import { getCurrencyName } from '@utils/appInfo';
 import useNetwork from '@hooks/useNetwork';
 import { translate } from '@utils/helpers/i18n';
-import { getMinMax } from '@utils/helpers/statisticsLib';
+import { getMinMax, checkValidateData } from '@utils/helpers/statisticsLib';
 
 import * as Styles from './Summary.styles';
 import { LineChart } from './LineChart';
@@ -172,6 +172,28 @@ const Summary: React.FC = () => {
     };
   };
 
+  const transformSupplyChartData = (key: string) => {
+    const dataX = [];
+    const dataY = [];
+    if (summaryChartData) {
+      const items = summaryChartData[key as keyof ISummaryChartStats] as TSummaryChartProps[];
+      if (items.length) {
+        for (let i = 0; i < items.length; i += 1) {
+          dataX.push(new Date(items[i].time).toLocaleString());
+          dataY.push(Number(items[i].value) < 0 ? 0 : Number(items[i].value));
+        }
+        if (checkValidateData(items[items.length - 1]?.time)) {
+          dataX.push(new Date().toLocaleString());
+          dataY.push(dataY[dataY.length - 1]);
+        }
+      }
+    }
+    return {
+      dataX,
+      dataY,
+    };
+  };
+
   const transformNetworkChartData = (key: string) => {
     const dataX = [];
     const dataY = [];
@@ -201,13 +223,13 @@ const Summary: React.FC = () => {
 
     switch (key) {
       case 'circulatingSupply':
-        parseChartData = transformChartData(key);
+        parseChartData = transformSupplyChartData(key);
         dataX = parseChartData?.dataX;
         dataY = parseChartData?.dataY;
         offset = 0;
         break;
       case 'coinSupply':
-        parseChartData = transformChartData(key);
+        parseChartData = transformSupplyChartData(key);
         dataX = parseChartData?.dataX;
         dataY = parseChartData?.dataY;
         offset = 0;

diff --git a/src/pages/Details/BlockDetails/BlockDetails.helpers.tsx b/src/pages/Details/BlockDetails/BlockDetails.helpers.tsx
@@ -4,10 +4,10 @@ import { Node, Edge, Position, MarkerType } from 'reactflow';
 import dagre from 'dagre';
 
 import { getCurrencyName } from '@utils/appInfo';
-import { formatAddress } from '@utils/helpers/format';
 import { formatNumber } from '@utils/helpers/formatNumbers/formatNumbers';
 import { IBlock } from '@utils/types/IBlocks';
 import { HeaderType } from '@components/Table/Table';
+import { translateDropdown } from '@utils/helpers/i18n';
 
 import * as Styles from './BlockDetails.styles';
 
@@ -45,29 +45,31 @@ export const getGraphChartData = (block: IBlock) => {
   const position = { x: 0, y: 0 };
 
   const isHorizontal = block.transactions?.length < 3;
-  const nodeWidth = isHorizontal ? 110 : 50;
-  const nodeHeight = isHorizontal ? 30 : 90;
-  const edgeNodeWidth = isHorizontal ? 72 : 18;
-  const edgeNodeHeight = isHorizontal ? 18 : 72;
+  const nodeWidth = isHorizontal ? 110 : 55;
+  const nodeHeight = isHorizontal ? 40 : 110;
+  const edgeNodeWidth = isHorizontal ? 180 : 55;
+  const edgeNodeHeight = isHorizontal ? 18 : 40;
 
   if (block.transactions?.length) {
     nodes.push({
       id: `block-${block.height}`,
       sourcePosition: 'right' as Position,
-      data: { label: `${block.height}` },
+      data: {
+        label: `${translateDropdown('pages.blockDetails.blockHeight')}:\n${formatNumber(block.height)}`,
+      },
       position,
       connectable: false,
       style: {
         borderRadius: '4px',
-        width: '50px',
-        height: '30px',
+        width: !isHorizontal ? '80px' : '60px',
+        height: '40px',
         padding: '5px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         fontSize: !isHorizontal ? '10px' : '8px',
       },
-      width: nodeWidth,
+      width: isHorizontal ? nodeWidth : nodeWidth - 20,
       height: nodeHeight,
     });
 
@@ -78,11 +80,11 @@ export const getGraphChartData = (block: IBlock) => {
         id: `node-block-trans-${counter}`,
         sourcePosition: 'right' as Position,
         targetPosition: 'left' as Position,
-        data: { label: `${counter}` },
+        data: { label: `${translateDropdown('pages.blockDetails.output')} ${counter}` },
         position,
         style: {
           borderRadius: '4px',
-          width: '18px',
+          width: !isHorizontal ? '60px' : '45px',
           height: '18px',
           padding: '2px',
           display: 'flex',
@@ -92,8 +94,8 @@ export const getGraphChartData = (block: IBlock) => {
           color: '#000',
           fontSize: !isHorizontal ? '10px' : '8px',
         },
-        width: edgeNodeWidth,
-        height: edgeNodeHeight,
+        width: !isHorizontal ? edgeNodeWidth - 40 : edgeNodeWidth,
+        height: !isHorizontal ? edgeNodeHeight - 20 : edgeNodeHeight,
       });
       edges.push({
         id: `edges-node-block-trans-${counter}`,
@@ -116,20 +118,22 @@ export const getGraphChartData = (block: IBlock) => {
         id: `trans-${transaction.id}`,
         sourcePosition: 'right' as Position,
         targetPosition: 'left' as Position,
-        data: { label: `${formatAddress(transaction.id, 3, -3)}` },
+        data: { label: transaction.id, type: 'transaction' },
         position,
         style: {
           borderRadius: '4px',
-          width: '50px',
-          height: '30px',
+          width: !isHorizontal ? '130px' : '100px',
+          height: !isHorizontal ? '50px' : '40px',
           padding: '5px',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           fontSize: !isHorizontal ? '10px' : '8px',
+          whiteSpace: 'wrap',
+          wordBreak: 'break-word',
         },
-        width: nodeWidth,
-        height: nodeHeight,
+        width: !isHorizontal ? nodeWidth + 30 : nodeWidth + 50,
+        height: !isHorizontal ? edgeNodeHeight + 10 : nodeHeight,
       });
       edges.push({
         id: `edges-node-block-trans-trans-2-${counter}`,
@@ -153,11 +157,11 @@ export const getGraphChartData = (block: IBlock) => {
           id: `node-trans-address-${counter}`,
           sourcePosition: 'right' as Position,
           targetPosition: 'left' as Position,
-          data: { label: `${counter}` },
+          data: { label: `${translateDropdown('pages.blockDetails.output')} ${counter}` },
           position,
           style: {
             borderRadius: '4px',
-            width: '18px',
+            width: !isHorizontal ? '60px' : '45px',
             height: '18px',
             padding: '2px',
             display: 'flex',
@@ -167,7 +171,7 @@ export const getGraphChartData = (block: IBlock) => {
             color: '#000',
             fontSize: !isHorizontal ? '10px' : '8px',
           },
-          width: edgeNodeWidth,
+          width: !isHorizontal ? edgeNodeWidth - 40 : edgeNodeWidth,
           height: edgeNodeHeight,
         });
         edges.push({
@@ -191,19 +195,24 @@ export const getGraphChartData = (block: IBlock) => {
             id: `address-detail-${index}-${transaction.id}-${address.address}`,
             sourcePosition: 'right' as Position,
             targetPosition: 'left' as Position,
-            data: { label: `${formatAddress(address.address, 3, -3)}` },
+            data: {
+              label: address.address,
+              type: 'address',
+            },
             position,
             style: {
               borderRadius: '4px',
-              width: '50px',
-              height: '30px',
+              width: !isHorizontal ? '130px' : '100px',
+              height: '40px',
               padding: '5px',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
               fontSize: !isHorizontal ? '10px' : '8px',
+              whiteSpace: 'wrap',
+              wordBreak: 'break-word',
             },
-            width: nodeWidth,
+            width: !isHorizontal ? nodeWidth + 30 : nodeWidth,
             height: nodeHeight,
           });
           edges.push({

diff --git a/src/pages/Details/BlockDetails/BlockDetails.styles.ts b/src/pages/Details/BlockDetails/BlockDetails.styles.ts
@@ -4,6 +4,7 @@ import {
   Typography as MuiTypography,
   Accordion as MuiAccordion,
   Grid,
+  Box,
   IconButton,
 } from '@mui/material';
 
@@ -318,3 +319,8 @@ export const MinedIconWrapper = styled.span`
     margin-left: 2px;
   }
 `;
+
+export const FlowNodeTooltip = styled(Box)`
+  background: ${props => props.theme.palette.background.paper};
+  border-radius: 8px;
+`;