From 80fedac3f6c8521916dbf3a20d187985433cb795 Mon Sep 17 00:00:00 2001 From: Ian-Bright Date: Tue, 6 Jun 2023 13:47:45 -0600 Subject: [PATCH] clean up dashboard --- package.json | 1 + src/App.tsx | 163 +++++++++++++------ src/assets/images/waxGreenLogo.webp | Bin 0 -> 5628 bytes src/components/Charts/AreaChart/index.tsx | 110 +++++++------ src/components/Charts/BarChart/index.tsx | 96 +++++------ src/components/Charts/ChartWrapper/index.tsx | 109 +++++++++---- src/components/Charts/LineChart/index.tsx | 109 +++++++------ src/components/Charts/PieChart/index.tsx | 65 ++++---- src/components/Charts/components/Tooltip.tsx | 59 +++++-- src/components/Counter/index.tsx | 6 +- src/data.ts | 98 +++++++---- src/index.css | 2 +- src/theme/index.ts | 8 + src/utils/constants.ts | 19 +-- yarn.lock | 5 + 15 files changed, 509 insertions(+), 341 deletions(-) create mode 100644 src/assets/images/waxGreenLogo.webp diff --git a/package.json b/package.json index 8915347..24e3f26 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "react-dom": "^18.2.0", "react-jss": "^10.10.0", "react-scripts": "5.0.1", + "react-virtualized-auto-sizer": "^1.0.20", "recharts": "^2.6.2", "typescript": "^4.9.5", "web-vitals": "^2.1.4" diff --git a/src/App.tsx b/src/App.tsx index 864c0ef..9ad53cc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,98 +1,155 @@ import Counter from 'components/Counter'; -import { CHARTS, COUNTERS } from 'data'; +import { CHARTS, COUNTERS, SECTIONS } from 'data'; import { useEffect, useState } from 'react'; import { createUseStyles } from 'react-jss'; import Flex from 'components/Flex'; import ChartWrapper from 'components/Charts/ChartWrapper'; import Typography from 'components/Typography'; +import logo from 'assets/images/waxGreenLogo.webp'; const { REACT_APP_API_URL } = process.env; const useStyles = createUseStyles({ card: { backgroundColor: '#34383D', + border: '1px solid #74FFCE', borderRadius: '4px', + color: '#74FFCE', padding: '20px', }, container: { - padding: '16px', + padding: '16px 16px 120px 16px', }, }); type Layout = { charts: any[]; counters: any[]; + description?: string; + title: string; }; function App() { const styles = useStyles(); - const [layout, setLayout] = useState({ - charts: [], - counters: [], - }); + const [layout, setLayout] = useState([]); useEffect(() => { (async () => { const res = await fetch(`${REACT_APP_API_URL}/queries`); const data = await res.json(); - const charts = CHARTS.map((chart) => ({ - ...chart, - data: data[chart.queryId], - })); - const counters = COUNTERS.map((counter) => ({ - ...counter, - data: data[counter.queryId], - })); - setLayout({ counters, charts }); + + setLayout( + SECTIONS.map((section) => { + let charts: any[] = []; + let counters: any[] = []; + if (section.charts[0] !== undefined) { + const range = section.charts; + charts = range[1] + ? CHARTS.slice(range[0], range[1]) + : CHARTS.slice(range[0]); + } + if (section.counters[0] !== undefined) { + const range = section.counters; + counters = range[1] + ? COUNTERS.slice(range[0], range[1]) + : COUNTERS.slice(range[0]); + } + return { + ...section, + charts: charts.map((chart) => ({ + ...chart, + data: data[chart.queryId], + })), + counters: counters.map((counter) => ({ + ...counter, + data: data[counter.queryId], + })), + }; + }) + ); })(); }, []); return (
+ + + Logo + + - BLS Wallet Analytics + WAX V1 Analytics - - {layout.counters.map((counter) => ( -
- - {counter.title} - - + {layout.map((section) => ( +
+
+ {section.title} + {section.description && ( + + {section.description} + + )}
- ))} - - - {layout.charts.map((chart) => ( -
- - {chart.title} - - -
- ))} - + + {section.counters.map((counter) => ( +
+ + {''} + + +
+ ))} + + + {section.charts.map((chart) => ( +
+ + {chart.title} + + +
+ ))} + +
+ ))}
); } diff --git a/src/assets/images/waxGreenLogo.webp b/src/assets/images/waxGreenLogo.webp new file mode 100644 index 0000000000000000000000000000000000000000..c9d1e088e01a48413be8b534ba01a435a9a3ddb3 GIT binary patch literal 5628 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 W1%C3vY=cbj*Z=?k000000000+G7p&m literal 0 HcmV?d00001 diff --git a/src/components/Charts/AreaChart/index.tsx b/src/components/Charts/AreaChart/index.tsx index 84cea1f..1047ee7 100644 --- a/src/components/Charts/AreaChart/index.tsx +++ b/src/components/Charts/AreaChart/index.tsx @@ -4,7 +4,6 @@ import { Area, AreaChart as RechartsAreaChart, CartesianGrid, - ResponsiveContainer, Tooltip as RechartsTooltip, TooltipProps, XAxis, @@ -27,8 +26,11 @@ export default function AreaChart({ color, data, grid, + height, scale, + showDecimals, stackBy, + width, xAxisTitle, xKey, yAxisTitle, @@ -39,60 +41,60 @@ export default function AreaChart({ }, [data, stackBy, xKey]); return ( - - - {grid && } - ) => ( - - )} - wrapperStyle={{ outline: 'none', zIndex: 100 }} - /> - {stackBy ? ( - data.keys?.map((key: string, index: number) => ( - - )) - ) : ( - + + {grid && } + ) => ( + )} - handleXKey(x, xKey)} - label={X_AXIS_LABEL_INSTRUCTIONS(xAxisTitle ?? '')} - fontSize={TICKMARK_FONT_SIZE} - tickFormatter={(tick) => - timeframe ? moment(tick).format(timeframe) : tick - } + wrapperStyle={{ outline: 'none', zIndex: 100 }} + /> + {stackBy ? ( + data.keys?.map((key: string, index: number) => ( + + )) + ) : ( + - formatLargeNumber(tick)} - scale={scale} - /> - - + )} + handleXKey(x, xKey)} + label={X_AXIS_LABEL_INSTRUCTIONS(xAxisTitle ?? '')} + fontSize={TICKMARK_FONT_SIZE} + tickFormatter={(tick) => + timeframe ? moment(tick).format(timeframe) : tick + } + /> + formatLargeNumber(tick)} + scale={scale} + /> + ); } diff --git a/src/components/Charts/BarChart/index.tsx b/src/components/Charts/BarChart/index.tsx index f4a6b09..a9bac49 100644 --- a/src/components/Charts/BarChart/index.tsx +++ b/src/components/Charts/BarChart/index.tsx @@ -4,7 +4,6 @@ import { Bar, BarChart as RechartsBarChart, CartesianGrid, - ResponsiveContainer, Tooltip as RechartsTooltip, TooltipProps, XAxis, @@ -27,8 +26,11 @@ export default function BarChart({ color, data, grid, + height, scale, + showDecimals, stackBy, + width, xAxisTitle, xKey, yAxisTitle, @@ -39,52 +41,52 @@ export default function BarChart({ }, [data, stackBy, xKey]); return ( - - - {grid && } - ) => ( - - )} - wrapperStyle={{ outline: 'none', zIndex: 100 }} - /> - {stackBy ? ( - data.keys?.map((key: string, index: number) => ( - - )) - ) : ( - + + {grid && } + ) => ( + )} - handleXKey(x, xKey)} - fontSize={TICKMARK_FONT_SIZE} - label={X_AXIS_LABEL_INSTRUCTIONS(xAxisTitle)} - name={xAxisTitle} - tickFormatter={(tick) => - timeframe ? moment(tick).format(timeframe) : tick - } - /> - formatLargeNumber(tick)} - /> - - + wrapperStyle={{ outline: 'none', zIndex: 100 }} + /> + {stackBy ? ( + data.keys?.map((key: string, index: number) => ( + + )) + ) : ( + + )} + handleXKey(x, xKey)} + fontSize={TICKMARK_FONT_SIZE} + label={X_AXIS_LABEL_INSTRUCTIONS(xAxisTitle)} + name={xAxisTitle} + tickFormatter={(tick) => + timeframe ? moment(tick).format(timeframe) : tick + } + /> + formatLargeNumber(tick)} + /> + ); } diff --git a/src/components/Charts/ChartWrapper/index.tsx b/src/components/Charts/ChartWrapper/index.tsx index 8a539b1..63dd13c 100644 --- a/src/components/Charts/ChartWrapper/index.tsx +++ b/src/components/Charts/ChartWrapper/index.tsx @@ -6,6 +6,7 @@ import { useMemo } from 'react'; import { ChartScale, ChartType, StackBy } from 'utils/constants'; import PieChart from '../PieChart'; import { generateStackData } from 'utils'; +import AutoSizer from 'react-virtualized-auto-sizer'; type ChartWrapperProps = { chartType: string; @@ -13,8 +14,9 @@ type ChartWrapperProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any data: any[]; grid?: boolean; - stackBy?: StackBy; scale?: ChartScale; + showDecimals?: boolean; + stackBy?: StackBy; xAxisTitle: string; xKey: string; yAxisTitle: string; @@ -27,6 +29,7 @@ export default function ChartWrapper({ data, grid, scale = ChartScale.Linear, + showDecimals, stackBy, xAxisTitle, xKey, @@ -67,48 +70,82 @@ export default function ChartWrapper({ if (chartType === ChartType.Area) { return ( - + + {({ height, width }: { height: number; width: number }) => ( + + )} + ); } else if (chartType === ChartType.Bar) { return ( - + + {({ height, width }: { height: number; width: number }) => ( + + )} + ); } else if (chartType === ChartType.Line) { return ( - + + {({ height, width }: { height: number; width: number }) => ( + + )} + ); } else { - return ; + return ( + + {({ height, width }: { height: number; width: number }) => ( + + )} + + ); } } diff --git a/src/components/Charts/LineChart/index.tsx b/src/components/Charts/LineChart/index.tsx index 0e27806..adea175 100644 --- a/src/components/Charts/LineChart/index.tsx +++ b/src/components/Charts/LineChart/index.tsx @@ -4,7 +4,6 @@ import { CartesianGrid, Line, LineChart as RechartsLineChart, - ResponsiveContainer, Tooltip as RechartsTooltip, TooltipProps, XAxis, @@ -25,11 +24,13 @@ type LineChartProps = AxisChartProps; export default function LineChart({ color, - curveType, data, grid, + height, scale, + showDecimals, stackBy, + width, xAxisTitle, xKey, yAxisTitle, @@ -39,59 +40,59 @@ export default function LineChart({ return determineTimeframe(stackBy ? data.formattedData : data, xKey); }, [data, stackBy, xKey]); return ( - - - {grid && } - ) => ( - - )} - wrapperStyle={{ outline: 'none', zIndex: 100 }} - /> - {stackBy ? ( - data.keys?.map((key: string, index: number) => ( - - )) - ) : ( - + + {grid && } + ) => ( + )} - handleXKey(x, xKey)} - fontSize={TICKMARK_FONT_SIZE} - label={X_AXIS_LABEL_INSTRUCTIONS(xAxisTitle)} - name={xAxisTitle} - tickFormatter={(tick) => - timeframe ? moment(tick).format(timeframe) : tick - } + wrapperStyle={{ outline: 'none', zIndex: 100 }} + /> + {stackBy ? ( + data.keys?.map((key: string, index: number) => ( + + )) + ) : ( + - formatLargeNumber(tick)} - /> - - + )} + handleXKey(x, xKey)} + fontSize={TICKMARK_FONT_SIZE} + label={X_AXIS_LABEL_INSTRUCTIONS(xAxisTitle)} + name={xAxisTitle} + tickFormatter={(tick) => + timeframe ? moment(tick).format(timeframe) : tick + } + /> + formatLargeNumber(tick)} + /> + ); } diff --git a/src/components/Charts/PieChart/index.tsx b/src/components/Charts/PieChart/index.tsx index 40116c5..febd82a 100644 --- a/src/components/Charts/PieChart/index.tsx +++ b/src/components/Charts/PieChart/index.tsx @@ -3,7 +3,6 @@ import { Cell, Pie, PieChart as RechartsPieChart, - ResponsiveContainer, Sector, Tooltip as RechartsTooltip, TooltipProps, @@ -16,13 +15,19 @@ type PieChartProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any data: any[]; dataKey: string; + height: number; nameKey: string; + showDecimals?: boolean; + width: number; }; export default function PieChart({ data, dataKey, + height, nameKey, + showDecimals, + width, }: PieChartProps): JSX.Element { const [activeIndex, setActiveIndex] = useState(-1); @@ -49,34 +54,34 @@ export default function PieChart({ }; return ( - - - ) => ( - - )} - wrapperStyle={{ outline: 'none', zIndex: 100 }} - /> - setActiveIndex(-1)} - > - {data.map((_, index) => ( - - ))} - - - + + ) => ( + + )} + wrapperStyle={{ outline: 'none', zIndex: 100 }} + /> + setActiveIndex(-1)} + > + {data.map((_, index) => ( + + ))} + + ); } diff --git a/src/components/Charts/components/Tooltip.tsx b/src/components/Charts/components/Tooltip.tsx index 104a687..4a1a1d7 100644 --- a/src/components/Charts/components/Tooltip.tsx +++ b/src/components/Charts/components/Tooltip.tsx @@ -14,28 +14,53 @@ const useStyles = createUseStyles({ }, }); -type TooltipProps = { xKey: string } & RechartsTooltipProps; +type TooltipProps = { + isPie?: boolean; + showDecimals?: boolean; + xKey: string; +} & RechartsTooltipProps; export default function Tooltip(props: TooltipProps): JSX.Element { - const { label, payload, xKey } = props; + const { isPie, label, payload, showDecimals, xKey } = props; const styles = useStyles(); - if (!payload) return <>; + if (!payload || payload[0] === undefined) return <>; return (
- -
{xKey}:
-
- {isDateOrTimestamp(label) - ? moment(label).format('MMM Do, YYYY') - : label} -
- - {payload.map(({ color, name, payload: { fill }, value }) => ( - -
{name}:
-
{formatNumber(value ?? 0, 0)}
- - ))} + {isPie ? ( + <> + +
{xKey}:
+
+ {isDateOrTimestamp(payload[0].name) + ? moment(payload[0].name).format('MMM Do, YYYY') + : payload[0].name} +
+ + +
{payload[0].dataKey}:
+
+ {formatNumber(payload[0].value ?? 0, showDecimals ? 2 : 0)} +
+ + + ) : ( + <> + +
{xKey}:
+
+ {isDateOrTimestamp(label) + ? moment(label).format('MMM Do, YYYY') + : label} +
+ + {payload.map(({ color, name, payload: { fill }, value }) => ( + +
{name}:
+
{formatNumber(value ?? 0, showDecimals ? 2 : 0)}
+ + ))} + + )}
); } diff --git a/src/components/Counter/index.tsx b/src/components/Counter/index.tsx index 46b2b3d..ee867ba 100644 --- a/src/components/Counter/index.tsx +++ b/src/components/Counter/index.tsx @@ -7,12 +7,14 @@ type CounterProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any data: any; label: string; + showDecimal?: boolean; }; export default function Counter({ counterKey, data, label, + showDecimal, }: CounterProps): JSX.Element { return ( <> @@ -23,9 +25,9 @@ export default function Counter({ style={{ color: '#FCFCFC' }} > - {label} + {label} - {formatNumber(data[0][counterKey], 0)} + {formatNumber(data[0][counterKey], showDecimal ? 2 : 0)} diff --git a/src/data.ts b/src/data.ts index 33ca0d9..d8422e8 100644 --- a/src/data.ts +++ b/src/data.ts @@ -3,13 +3,13 @@ import { ChartType } from "utils/constants"; export const COUNTERS = [ { counterKey: 'Num_Wallets_Created', - label: 'Wallets Created', + label: 'BLS Wallets Created', queryId: 'aa55c0623a28438eac9aecfb7b767726', title: 'Wallets' }, { counterKey: 'Num_Wallets_Recovered', - label: 'Wallets Recovered', + label: 'BLS Wallets Recovered', queryId: 'aa55c0623a28438eac9aecfb7b767726', title: 'Wallets' }, @@ -19,6 +19,12 @@ export const COUNTERS = [ queryId: 'aa55c0623a28438eac9aecfb7b767726', title: 'Tx Groups' }, + { + counterKey: 'Num_Operations_Submitted', + label: 'Operations Submitted', + queryId: 'aa55c0623a28438eac9aecfb7b767726', + title: 'Tx Groups' + }, { counterKey: 'Num_Operations_Failed', label: 'Operations Failed', @@ -31,28 +37,25 @@ export const COUNTERS = [ queryId: 'aa55c0623a28438eac9aecfb7b767726', title: 'Tx Groups' }, - { - counterKey: 'Num_Operations_Submitted', - label: 'Operations Submitted', - queryId: 'aa55c0623a28438eac9aecfb7b767726', - title: 'Tx Groups' - }, { counterKey: 'Avg_Operations_Per_Bundle', label: 'Operations/Bundle', queryId: 'aa55c0623a28438eac9aecfb7b767726', + showDecimal: true, title: 'Averages' }, { counterKey: 'Avg_Actions_Per_Bundle', label: 'Actions/Bundle', queryId: 'aa55c0623a28438eac9aecfb7b767726', + showDecimal: true, title: 'Averages' }, { counterKey: 'Avg_Actions_Per_Operation', label: 'Actions/Operations', queryId: 'aa55c0623a28438eac9aecfb7b767726', + showDecimal: true, title: 'Averages' }, { @@ -76,20 +79,6 @@ export const COUNTERS = [ ]; export const CHARTS = [ - { - chartType: ChartType.Pie, - queryId: '7ad7fb1828094272880202e903af4239', - title: 'Action Method Ids Called', - xKey: 'actionMethodId', - yKey: 'action_count' - }, - { - chartType: ChartType.Pie, - queryId: '2578dd88f123458183e0fe077d285243', - title: 'Action Recipients', - xKey: 'actionsRecipient', - yKey: 'action_count' - }, { chartType: ChartType.Bar, color: '#B8B7D0', @@ -113,6 +102,7 @@ export const CHARTS = [ { chartType: ChartType.Bar, color: '#CE83D9', + description: 'Number of bundles (a group of operations containing actions) submitted on-chain', queryId: 'ab1a30af5991425b8b4abd7c37f859fa', title: 'Number of Bundles Submitted per Day', xAxisTitle: 'Day', @@ -123,6 +113,7 @@ export const CHARTS = [ { chartType: ChartType.Bar, color: '#8784D8', + description: 'Number of Actions (function calls coming from a signed operation) submitted on-chain', queryId: 'ab1a30af5991425b8b4abd7c37f859fa', title: 'Number of Actions Submitted per Day', xAxisTitle: 'Day', @@ -133,6 +124,7 @@ export const CHARTS = [ { chartType: ChartType.Bar, color: '#C6C5CF', + description: 'Number of Operations (a group of actions) submitted on-chain', queryId: 'ab1a30af5991425b8b4abd7c37f859fa', title: 'Number of Operations Submitted per Day', xAxisTitle: 'Day', @@ -154,6 +146,7 @@ export const CHARTS = [ chartType: ChartType.Bar, color: '#84D9CC', queryId: 'ab1a30af5991425b8b4abd7c37f859fa', + showDecimals: true, title: 'Average Operations per Bundle per day', xAxisTitle: 'Day', xKey: 'day', @@ -164,6 +157,7 @@ export const CHARTS = [ chartType: ChartType.Bar, color: '#8784D8', queryId: 'ab1a30af5991425b8b4abd7c37f859fa', + showDecimals: true, title: 'Average Actions per Bundle Per Dayy', xAxisTitle: 'Day', xKey: 'day', @@ -174,6 +168,7 @@ export const CHARTS = [ chartType: ChartType.Bar, color: '#B6B6BF', queryId: 'ab1a30af5991425b8b4abd7c37f859fa', + showDecimals: true, title: 'Average Actions per Operation per Day', xAxisTitle: 'Day', xKey: 'day', @@ -210,6 +205,20 @@ export const CHARTS = [ yAxisTitle: 'Average Gas per Transaction', yKey: 'avgGas' }, + { + chartType: ChartType.Pie, + queryId: '7ad7fb1828094272880202e903af4239', + title: 'Action Method Ids Called', + xKey: 'actionMethodId', + yKey: 'action_count' + }, + { + chartType: ChartType.Pie, + queryId: '2578dd88f123458183e0fe077d285243', + title: 'Action Recipients', + xKey: 'actionsRecipient', + yKey: 'action_count' + }, { chartType: ChartType.Bar, queryId: '74a8783fd397441ca0dd9cbc96423e81', @@ -236,16 +245,35 @@ export const CHARTS = [ }, ]; -// type ChartWrapperProps = { -// chartType: string; -// color: string; -// // eslint-disable-next-line @typescript-eslint/no-explicit-any -// data: any[]; -// grid?: boolean; -// stackBy?: StackBy; -// scale?: ChartScale; -// xAxisTitle: string; -// xKey: string; -// yAxisTitle: string; -// yKey: string; -// }; \ No newline at end of file +export const SECTIONS = [ + { + charts: [0, 2], + counters: [0, 2], + description: 'BLS smart-contract wallets for use with WAX', + title: 'Wallets', + }, + { + charts: [2, 6], + counters: [2, 6], + description: 'Bundles, submitted on-chain, encompass Operations that carry Actions - the actual function calls.', + title: 'Bundle Composition' + }, + { + charts: [6, 9], + counters: [6, 9], + description: 'Bundle, Operations, & Actions Relationship', + title: 'Averages', + }, + { + charts: [9, 12], + counters: [9, 12], + description: 'The gas expenses for each bundle submission.', + title: 'Gas', + }, + { + charts: [12], + counters: [], + description: 'Metrics related to the contracts called and method IDs invoked within BLS Wallet actions.', + title: 'Actions' + } +]; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 7074120..b5292af 100644 --- a/src/index.css +++ b/src/index.css @@ -18,7 +18,7 @@ } body { - background-color: #262726; + background-color: #090213; margin: 0; font-family: 'Heebo', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', diff --git a/src/theme/index.ts b/src/theme/index.ts index 4764e7f..fcbd43a 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -2,6 +2,7 @@ import { CSSProperties } from 'react'; export type TypographyVariant = | 'caption' + | 'h2' | 'h4' | 'h5' | 'h6' @@ -21,6 +22,13 @@ export const typography: TypographyVariantMap = { fontWeight: 400, lineHeight: '14px', }, + h2: { + fontFamily: 'Heebo', + fontSize: '48px', + fontWeight: 500, + letterSpacing: '0.5px', + lineHeight: 'g6px', + }, h4: { fontFamily: 'Heebo', fontSize: '34px', diff --git a/src/utils/constants.ts b/src/utils/constants.ts index d185f1c..9e24ee4 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -8,6 +8,7 @@ export type AxisChartProps = { grid: boolean; height?: number; scale: ChartScale; + showDecimals?: boolean; stackBy?: StackBy; width?: number; xAxisTitle: string; @@ -35,18 +36,12 @@ export const MS_PER_MONTH = 30.44 * MS_PER_DAY; // Milleseconds per month export const MS_PER_YEAR = 365.25 * MS_PER_DAY; // Millesconds per year export const PALETTE = [ - '#a6cee3', - '#1f78b4', - '#b2df8a', - '#33a02c', - '#fb9a99', - '#e31a1c', - '#fdbf6f', - '#ff7f00', - '#cab2d6', - '#6a3d9a', - '#ffff99', - '#b15928', + '#84ACCE', + '#74FFCE', + '#E040FB', + '#3F51B5', + '#F18F01' + ]; export type StackBy = { diff --git a/yarn.lock b/yarn.lock index ad3f5e4..95ac1db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8087,6 +8087,11 @@ react-transition-group@2.9.0: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" +react-virtualized-auto-sizer@^1.0.20: + version "1.0.20" + resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.20.tgz#d9a907253a7c221c52fa57dc775a6ef40c182645" + integrity sha512-OdIyHwj4S4wyhbKHOKM1wLSj/UDXm839Z3Cvfg2a9j+He6yDa6i5p0qQvEiCnyQlGO/HyfSnigQwuxvYalaAXA== + react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"