52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
|
import { styled } from '@mui/styles';
|
||
|
|
import { StatsTitle, StatsValue, Percentage } from './Summary';
|
||
|
|
import { GridStats } from '../api/bbgo';
|
||
|
|
|
||
|
|
const StatsSection = styled('div')(() => ({
|
||
|
|
display: 'grid',
|
||
|
|
gridTemplateColumns: '1fr 1fr 1fr',
|
||
|
|
gap: '10px',
|
||
|
|
}));
|
||
|
|
|
||
|
|
export default function Stats({
|
||
|
|
stats,
|
||
|
|
gridProfitsPercentage,
|
||
|
|
gridAprPercentage,
|
||
|
|
}: {
|
||
|
|
stats: GridStats;
|
||
|
|
gridProfitsPercentage: number;
|
||
|
|
gridAprPercentage: number;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<StatsSection>
|
||
|
|
<div>
|
||
|
|
<StatsTitle>Grid Profits</StatsTitle>
|
||
|
|
<StatsValue>{stats.gridProfits}</StatsValue>
|
||
|
|
<Percentage>{gridProfitsPercentage}%</Percentage>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<StatsTitle>Floating PNL</StatsTitle>
|
||
|
|
<StatsValue>{stats.floatingPNL}</StatsValue>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<StatsTitle>Grid APR</StatsTitle>
|
||
|
|
<Percentage>{gridAprPercentage}%</Percentage>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<StatsTitle>Current Price</StatsTitle>
|
||
|
|
<div>{stats.currentPrice}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<StatsTitle>Price Range</StatsTitle>
|
||
|
|
<div>
|
||
|
|
{stats.lowestPrice}~{stats.highestPrice}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</StatsSection>
|
||
|
|
);
|
||
|
|
}
|