Merge pull request #219 from pastelnetwork/feature/add-filter-for-NFT

add filter for NFT
pastelnetwork · May 3, 2024 · 9f7f9ca · 9f7f9ca
2 parents 335ea1e + eba5c4c
commit 9f7f9ca
Show file tree

Hide file tree

Showing 15 changed files with 971 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "axios": "1.6.7",
     "buffer": "6.0.3",
     "css-vendor": "2.0.8",
+    "dagre": "0.8.5",
     "date-fns": "3.3.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -76,6 +77,7 @@
     "react-share": "5.1.0",
     "react-timeago": "7.2.0",
     "react-virtualized": "9.22.5",
+    "reactflow": "11.11.2",
     "redux": "5.0.1",
     "redux-persist": "6.0.0",
     "redux-thunk": "3.1.0",
@@ -86,6 +88,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@redux-devtools/extension": "3.3.0",
+    "@types/dagre": "0.7.52",
     "@types/enzyme": "3.10.18",
     "@types/file-saver": "2.0.7",
     "@types/jest": "29.5.12",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -1874,8 +1874,23 @@
       "minedByPool": {
         "message": "Mined by a pool",
         "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "chartTransactions": {
+        "message": "Flow",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "beforeTransactions": {
+        "message": "Before",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "afterTransactions": {
+        "message": "After",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "currentBalance": {
+        "message": "Current balance",
+        "description": "Used for the CascadeAndSenseStatistics page"
       }
-
     },
     "pastelIdDetails": {
       "tickets": {
@@ -3370,8 +3385,16 @@
         "message": "Total Cost",
         "description": "Used for the Tickets page"
       },
-      "registeringSupernode": {
-        "message": "Registering Supernode",
+      "available": {
+        "message": "Yes",
+        "description": "Used for the Tickets page"
+      },
+      "unAvailable": {
+        "message": "No",
+        "description": "Used for the Tickets page"
+      },
+      "publiclyAccessible": {
+        "message": "Publicly Accessible",
         "description": "Used for the Tickets page"
       }
     },

diff --git a/src/hooks/useTicketsType.ts b/src/hooks/useTicketsType.ts
@@ -10,6 +10,7 @@ export default function useTicketsType(
   limit: number,
   period: string,
   status: string,
+  nftStatus: string,
   customDateRange: {
     startDate: number;
     endDate: number | null;
@@ -21,6 +22,10 @@ export default function useTicketsType(
   if (status) {
     qStatus = `&status=${status}`;
   }
+  let qNftStatus = '';
+  if (status) {
+    qNftStatus = `&nftStatus=${nftStatus}`;
+  }
 
   let dateParam = '';
   if (customDateRange.startDate) {
@@ -36,7 +41,7 @@ export default function useTicketsType(
     total: number;
     senses: TSenseRequests[];
   }>(
-    `${URLS.GET_TICKETS}/${type}?offset=${offset}&limit=${limit}&sort=${sort}&type=${type}${dateParam}${qStatus}&include=all`,
+    `${URLS.GET_TICKETS}/${type}?offset=${offset}&limit=${limit}&sort=${sort}&type=${type}${dateParam}${qStatus}${qNftStatus}&include=all`,
     axiosGet,
     SWR_OPTIONS,
   );

diff --git a/src/pages/Details/AddressDetails/AddressDetails.tsx b/src/pages/Details/AddressDetails/AddressDetails.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { CircularProgress, Grid } from '@mui/material';
 import Box from '@mui/material/Box';
 import Tooltip from '@mui/material/Tooltip';
@@ -10,7 +10,7 @@ import InfinityTable, {
   ISortData,
 } from '@components/InfinityTable/InfinityTable';
 import { translate, translateDropdown } from '@utils/helpers/i18n';
-
+import * as ROUTES from '@utils/constants/routes';
 import { getCurrencyName, isPastelBurnAddress } from '@utils/appInfo';
 import * as TableStyles from '@components/Table/Table.styles';
 import Fire from '@components/SvgIcon/Fire';
@@ -35,6 +35,7 @@ interface IAddressDataRef {
 }
 
 const AddressDetails = () => {
+  const navigate = useNavigate();
   const [status, setStatus] = useState('');
 
   const { id } = useParams();
@@ -76,6 +77,17 @@ const AddressDetails = () => {
     }
   };
 
+  useEffect(() => {
+    if (
+      !swrData.isLoading &&
+      !swrData?.data?.totalReceived &&
+      !swrData?.data?.totalSent &&
+      !swrData?.data?.balance?.length
+    ) {
+      navigate(ROUTES.NOT_FOUND);
+    }
+  }, [swrData]);
+
   useEffect(() => {
     handleShowSubMenu();
     window.addEventListener('resize', handleShowSubMenu);

diff --git a/src/pages/Details/BlockDetails/BlockDetails.helpers.tsx b/src/pages/Details/BlockDetails/BlockDetails.helpers.tsx
@@ -1,10 +1,19 @@
 import { Grid, Typography } from '@mui/material';
 import parse from 'html-react-parser';
+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 * as Styles from './BlockDetails.styles';
 
+const dagreGraph = new dagre.graphlib.Graph();
+dagreGraph.setDefaultEdgeLabel(() => ({}));
+
 export const blockHeaders: Array<HeaderType> = [
   { id: 1, header: 'pages.blockDetails.height' },
   { id: 3, header: 'pages.blockDetails.confirmations' },
@@ -29,3 +38,226 @@ export const generateDetailsElement = (name: string, value: string) => (
     </Grid>
   </Styles.DetailsContainer>
 );
+
+export const getGraphChartData = (block: IBlock) => {
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+  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;
+
+  if (block.transactions?.length) {
+    nodes.push({
+      id: `block-${block.height}`,
+      sourcePosition: 'right' as Position,
+      data: { label: `${block.height}` },
+      position,
+      connectable: false,
+      style: {
+        borderRadius: '4px',
+        width: '50px',
+        height: '30px',
+        padding: '5px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: !isHorizontal ? '10px' : '8px',
+      },
+      width: nodeWidth,
+      height: nodeHeight,
+    });
+
+    let counter = 1;
+    block.transactions.forEach(transaction => {
+      const addresses = block.addresses?.filter(e => e.transactionHash === transaction.id);
+      nodes.push({
+        id: `node-block-trans-${counter}`,
+        sourcePosition: 'right' as Position,
+        targetPosition: 'left' as Position,
+        data: { label: `${counter}` },
+        position,
+        style: {
+          borderRadius: '4px',
+          width: '18px',
+          height: '18px',
+          padding: '2px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#E8CD95',
+          color: '#000',
+          fontSize: !isHorizontal ? '10px' : '8px',
+        },
+        width: edgeNodeWidth,
+        height: edgeNodeHeight,
+      });
+      edges.push({
+        id: `edges-node-block-trans-${counter}`,
+        source: `block-${block.height}`,
+        target: `node-block-trans-${counter}`,
+        data: {
+          label: `${formatNumber(transaction.totalAmount, { decimalsLength: 2 })} ${getCurrencyName()}`,
+          isHorizontal,
+          type: 'block',
+        },
+        markerEnd: {
+          type: MarkerType.Arrow,
+        },
+        type: 'custom',
+        style: {
+          fontSize: !isHorizontal ? '10px' : '8px',
+        },
+      });
+      nodes.push({
+        id: `trans-${transaction.id}`,
+        sourcePosition: 'right' as Position,
+        targetPosition: 'left' as Position,
+        data: { label: `${formatAddress(transaction.id, 3, -3)}` },
+        position,
+        style: {
+          borderRadius: '4px',
+          width: '50px',
+          height: '30px',
+          padding: '5px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: !isHorizontal ? '10px' : '8px',
+        },
+        width: nodeWidth,
+        height: nodeHeight,
+      });
+      edges.push({
+        id: `edges-node-block-trans-trans-2-${counter}`,
+        source: `node-block-trans-${counter}`,
+        target: `trans-${transaction.id}`,
+        data: {
+          label: `${formatNumber(transaction.totalAmount, { decimalsLength: 2 })} ${getCurrencyName()}`,
+          isHorizontal,
+        },
+        markerEnd: {
+          type: MarkerType.Arrow,
+        },
+        type: 'custom',
+        style: {
+          fontSize: !isHorizontal ? '10px' : '8px',
+        },
+      });
+      counter += 1;
+      if (addresses?.length) {
+        nodes.push({
+          id: `node-trans-address-${counter}`,
+          sourcePosition: 'right' as Position,
+          targetPosition: 'left' as Position,
+          data: { label: `${counter}` },
+          position,
+          style: {
+            borderRadius: '4px',
+            width: '18px',
+            height: '18px',
+            padding: '2px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#E8CD95',
+            color: '#000',
+            fontSize: !isHorizontal ? '10px' : '8px',
+          },
+          width: edgeNodeWidth,
+          height: edgeNodeHeight,
+        });
+        edges.push({
+          id: `edges-node-trans-address-${counter}`,
+          source: `trans-${transaction.id}`,
+          target: `node-trans-address-${counter}`,
+          data: {
+            label: `${formatNumber(transaction.totalAmount, { decimalsLength: 2 })} ${getCurrencyName()}`,
+            isHorizontal,
+          },
+          markerEnd: {
+            type: MarkerType.Arrow,
+          },
+          type: 'custom',
+          style: {
+            fontSize: !isHorizontal ? '10px' : '8px',
+          },
+        });
+        addresses.forEach((address, index) => {
+          nodes.push({
+            id: `address-detail-${index}-${transaction.id}-${address.address}`,
+            sourcePosition: 'right' as Position,
+            targetPosition: 'left' as Position,
+            data: { label: `${formatAddress(address.address, 3, -3)}` },
+            position,
+            style: {
+              borderRadius: '4px',
+              width: '50px',
+              height: '30px',
+              padding: '5px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: !isHorizontal ? '10px' : '8px',
+            },
+            width: nodeWidth,
+            height: nodeHeight,
+          });
+          edges.push({
+            id: `node-trans-address-end-${index}-${transaction.id}-${address.address}-${counter}`,
+            source: `node-trans-address-${counter}`,
+            target: `address-detail-${index}-${transaction.id}-${address.address}`,
+            data: {
+              label: `${formatNumber(address.amount, { decimalsLength: 2 })} ${getCurrencyName()}`,
+              type: 'address',
+              isHorizontal,
+            },
+            markerEnd: {
+              type: MarkerType.Arrow,
+            },
+            type: 'custom',
+            style: {
+              fontSize: !isHorizontal ? '10px' : '8px',
+            },
+          });
+        });
+        counter += 1;
+      }
+    });
+  }
+
+  dagreGraph.setGraph({ rankdir: isHorizontal ? 'LR' : 'TB' });
+  nodes.forEach(node => {
+    dagreGraph.setNode(node.id, { width: node.width, height: node.height });
+  });
+
+  edges.forEach(edge => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  dagre.layout(dagreGraph);
+
+  nodes.forEach(node => {
+    const newNode = node;
+    const nodeWithPosition = dagreGraph.node(node.id);
+    newNode.targetPosition = (isHorizontal ? 'left' : 'top') as Position;
+    newNode.sourcePosition = (isHorizontal ? 'right' : 'bottom') as Position;
+
+    const width = node.width || 0;
+    const height = node.height || 0;
+    newNode.position = {
+      x: nodeWithPosition.x - width / 2,
+      y: nodeWithPosition.y - height / 2,
+    };
+
+    return newNode;
+  });
+
+  return {
+    nodes,
+    edges,
+  };
+};
diff --git a/src/pages/Details/BlockDetails/BlockDetails.styles.ts b/src/pages/Details/BlockDetails/BlockDetails.styles.ts
@@ -39,6 +39,10 @@ export const Wrapper = styled('div')`
     }
   }
 
+  .react-flow__panel.react-flow__attribution {
+    display: none;
+  }
+
   .custom-table {
     &.block {
       .table__row-header {