graph performance

packages/core/package.json

@@ -75,6 +75,7 @@
     "@mui/material": "5.14.5",
     "@mui/styled-engine-sc": "5.12.0",
     "@mui/styles": "5.14.5",
+    "@mui/x-charts": "7.3.2",
     "@rollup/plugin-alias": "5.0.0",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "25.0.4",
@@ -116,6 +117,7 @@
     "@mui/material": "^5.14.5",
     "@mui/styled-engine-sc": "^5.12.0",
     "@mui/styles": "^5.14.5",
+    "@mui/x-charts": "^7.3.2",
     "electron": "^30.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/core/src/components/FormatLargeNumber/FormatLargeNumber.tsx

@@ -25,7 +25,7 @@ export default function FormatLargeNumber(props: FormatLargeNumberProps) {
   const [locale] = useLocale();
 
   const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);
-  const formatedValue = useMemo(() => {
+  const formattedValue = useMemo(() => {
     if (typeof value === 'undefined' || value === null) {
       return value;
     }
@@ -42,5 +42,5 @@ export default function FormatLargeNumber(props: FormatLargeNumberProps) {
     return numberFormat.format(value);
   }, [value, numberFormat, locale]);
 
-  return <span>{formatedValue}</span>;
+  return <span>{formattedValue}</span>;
 }

packages/core/src/components/LineChart/LineChart.tsx

@@ -0,0 +1,104 @@
+import { alpha } from '@mui/material';
+import { SparkLineChart, type SparkLineChartProps } from '@mui/x-charts';
+import { areaElementClasses } from '@mui/x-charts/LineChart';
+import BigNumber from 'bignumber.js';
+import JSONbig from 'json-bigint';
+import React, { useMemo, memo } from 'react';
+import styled from 'styled-components';
+
+import Color from '../../constants/Color';
+
+const StyledGraphContainer = styled.div<{ height: number }>`
+  position: relative;
+  min-height: 80px;
+  height: ${({ height }) => `${height}px`};
+`;
+
+function LinearGradient() {
+  return (
+    <defs>
+      <linearGradient id="graph-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+        <stop offset="0%" stopColor={alpha(Color.Green[500], 0.4)} />
+        <stop offset="100%" stopColor={alpha(Color.Green[500], 0)} />
+      </linearGradient>
+    </defs>
+  );
+}
+
+const sx = {
+  [`& .${areaElementClasses.root}`]: {
+    fill: 'url(#graph-gradient)',
+  },
+};
+
+const chartColors = [Color.Green[500]];
+const chartMargin = { top: 0, bottom: 0, left: 0, right: 0 };
+const defaultXValueFormatter = (value: number) => value.toString();
+const defaultYValueFormatter = (value: number | BigNumber | null) => (value !== null ? value.toString() : '');
+
+type Point = {
+  x: number;
+  y: number | BigNumber;
+};
+
+const MemoLineChart = memo((props: SparkLineChartProps) => (
+  <SparkLineChart {...props}>
+    <LinearGradient />
+    <rect x={0} y={0} width={0} height="100%" fill="url(#graph-gradient)" />
+  </SparkLineChart>
+));
+
+export type LineChartProps = {
+  data: Point[];
+  // min?: number;
+  height?: number;
+  xValueFormatter?: (value: number) => string;
+  yValueFormatter?: (value: number | BigNumber | null) => string;
+};
+
+export default function LineChart(props: LineChartProps) {
+  const {
+    data,
+    // min: defaultMin = 0,
+    xValueFormatter = defaultXValueFormatter,
+    yValueFormatter = defaultYValueFormatter,
+    height = 150,
+  } = props;
+
+  const stringifiedData = useMemo(() => JSONbig.stringify(data), [data]);
+  const freezedData = useMemo<Point[]>(() => JSONbig.parse(stringifiedData), [stringifiedData]);
+
+  const yData = useMemo(() => freezedData.map((item) => item.y), [freezedData]);
+  const xData = useMemo(() => freezedData.map((item) => item.x), [freezedData]);
+
+  const yDataNumber = useMemo(
+    () => yData.map((value) => (value instanceof BigNumber ? value.toNumber() : value)),
+    [yData],
+  );
+
+  const xAxis = useMemo(
+    () => ({
+      data: xData,
+      valueFormatter: xValueFormatter,
+    }),
+    [xData, xValueFormatter],
+  );
+
+  return (
+    <StyledGraphContainer height={height}>
+      <MemoLineChart
+        xAxis={xAxis}
+        data={yDataNumber}
+        height={height || 0}
+        valueFormatter={yValueFormatter}
+        curve="monotoneX"
+        margin={chartMargin}
+        colors={chartColors}
+        area
+        showHighlight
+        showTooltip
+        sx={sx}
+      />
+    </StyledGraphContainer>
+  );
+}

packages/core/src/components/LineChart/index.ts

@@ -0,0 +1,2 @@
+export { default } from './LineChart';
+export * from './LineChart';

packages/core/src/components/index.ts

@@ -45,6 +45,7 @@ export { default as LayoutDashboard, LayoutDashboardSub } from './LayoutDashboar
 export { default as LayoutHero } from './LayoutHero';
 export { default as LayoutLoading } from './LayoutLoading';
 export { default as LayoutMain } from './LayoutMain';
+export { default as LineChart } from './LineChart';
 export { default as Link } from './Link';
 export { default as Loading } from './Loading';
 export { default as LoadingOverlay } from './LoadingOverlay';

packages/gui/package.json

@@ -50,6 +50,7 @@
     "@mui/material": "5.14.5",
     "@mui/styled-engine-sc": "5.12.0",
     "@mui/styles": "5.14.5",
+    "@mui/x-charts": "7.3.2",
     "@rehooks/local-storage": "2.4.4",
     "@walletconnect/sign-client": "2.10.0",
     "@walletconnect/utils": "2.10.0",

packages/gui/src/components/plotNFT/PlotNFTGraph.tsx

@@ -79,7 +79,6 @@ export default function PlotNFTGraph(props: PlotNFTGraphProps) {
         )}
         <Box height={100} position="relative" ref={ref}>
           <VictoryChart
-            animate={{ duration: 300, onLoad: { duration: 0 } }}
             width={containerSize.width || 1}
             height={containerSize.height || 1}
             domain={{ x: [maxX, minX], y: [0, maxY] }}

packages/wallets/package.json

@@ -41,8 +41,7 @@
     "react-use": "17.4.0",
     "react-use-timeout": "1.0.0",
     "use-dark-mode": "2.3.1",
-    "validator": "13.11.0",
-    "victory": "36.6.11"
+    "validator": "13.11.0"
   },
   "devDependencies": {
     "@babel/core": "7.22.10",