1  import { Box } from '@mui/material';
 2  import { ParentSize } from '@visx/responsive';
 3  import type { ComputedReserveData } from 'src/hooks/app-data-provider/useAppDataProvider';
 4  
 5  import { GraphLegend } from './GraphLegend';
 6  import { InterestRateModelGraph } from './InterestRateModelGraph';
 7  
 8  type InteresetRateModelGraphContainerProps = {
 9    reserve: ComputedReserveData;
10  };
11  
12  export type Field = 'variableBorrowRate' | 'utilizationRate';
13  
14  export type Fields = { name: Field; color: string; text: string }[];
15  
16  // This graph takes in its data via props, thus having no loading/error states
17  export const InterestRateModelGraphContainer = ({
18    reserve,
19  }: InteresetRateModelGraphContainerProps): JSX.Element => {
20    const CHART_HEIGHT = 155;
21    const fields: Fields = [
22      { name: 'variableBorrowRate', text: 'Borrow APR, variable', color: '#B6509E' },
23    ];
24  
25    return (
26      <Box sx={{ mt: 8, mb: 10 }}>
27        <Box
28          sx={{
29            display: 'flex',
30            alignItems: 'center',
31            justifyContent: 'space-between',
32            mb: 4,
33          }}
34        >
35          <GraphLegend labels={[...fields, { text: 'Utilization Rate', color: '#0062D2' }]} />
36        </Box>
37        <ParentSize>
38          {({ width }) => (
39            <InterestRateModelGraph
40              width={width}
41              height={CHART_HEIGHT}
42              fields={fields}
43              reserve={{
44                baseVariableBorrowRate: reserve.baseVariableBorrowRate,
45                optimalUsageRatio: reserve.optimalUsageRatio,
46                utilizationRate: reserve.borrowUsageRatio,
47                variableRateSlope1: reserve.variableRateSlope1,
48                variableRateSlope2: reserve.variableRateSlope2,
49                totalLiquidityUSD: reserve.totalLiquidityUSD,
50                totalDebtUSD: reserve.totalDebtUSD,
51              }}
52            />
53          )}
54        </ParentSize>
55      </Box>
56    );
57  };