cd5ec3ee3b
* tidy: refactor text
* tidy: refactor text
* fix display of vaults table
* feat: added unstyled select
* tidy: useToggle
* tidy: useToggle
* add vaults to types
* MP-2344: first unstyled version of Select
* fix: fixed the build
* MP-2344: progress on the Select
* MP-2344: almost finished the Select
* implement basic vault modal (no logic)
* 🍱 max + displaycur for token input
* Convert to BN for TokenInputs
* env: update wallet-connector
* fix: fixed build errors and relative imports
* fix: updated TokenInput
* tidy: format
* fix: BN instead of new BigNumber
---------
Co-authored-by: Linkie Link <linkielink.dev@gmail.com>
102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
import moment from 'moment'
|
|
import {
|
|
Area,
|
|
AreaChart,
|
|
CartesianGrid,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from 'recharts'
|
|
|
|
import { FormattedNumber } from 'components/FormattedNumber'
|
|
import Text from 'components/Text'
|
|
import useStore from 'store'
|
|
import { formatValue } from 'utils/formatters'
|
|
|
|
export const RiskChart = ({ data }: RiskChartProps) => {
|
|
const enableAnimations = useStore((s) => s.enableAnimations)
|
|
const accountStats = null
|
|
const currentRisk = 0
|
|
|
|
return (
|
|
<div className='flex w-full flex-wrap overflow-hidden py-2'>
|
|
<FormattedNumber
|
|
className='px-3 pb-2 text-lg'
|
|
amount={currentRisk * 100}
|
|
options={{
|
|
maxDecimals: 0,
|
|
minDecimals: 0,
|
|
prefix: 'Risk score: ',
|
|
suffix: '/100',
|
|
}}
|
|
animate
|
|
/>
|
|
<div className='-ml-6 h-[100px] w-[412px]'>
|
|
<ResponsiveContainer width='100%' height='100%'>
|
|
<AreaChart
|
|
data={data}
|
|
margin={{
|
|
top: 0,
|
|
right: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
}}
|
|
>
|
|
<defs>
|
|
<linearGradient id='chartGradient' x1='0' y1='0' x2='0' y2='1'>
|
|
<stop offset='0%' stopColor={'#FFFFFF'} stopOpacity={0.2} />
|
|
<stop offset='100%' stopColor={'#FFFFFF'} stopOpacity={0.02} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid
|
|
strokeDasharray='0'
|
|
horizontalPoints={[0, 20, 40, 60, 80, 100]}
|
|
vertical={false}
|
|
stroke='rgba(255,255,255,0.1)'
|
|
/>
|
|
<XAxis
|
|
stroke='rgba(255, 255, 255, 0.6)'
|
|
tickLine={false}
|
|
tickFormatter={(value) => {
|
|
return moment(value).format('DD')
|
|
}}
|
|
fontSize={10.53}
|
|
dataKey='date'
|
|
/>
|
|
<YAxis
|
|
ticks={[0, 20, 40, 60, 80, 100]}
|
|
tickLine={false}
|
|
fontSize={10.53}
|
|
stroke='rgba(255, 255, 255, 0.6)'
|
|
/>
|
|
<Tooltip
|
|
wrapperStyle={{ outline: 'none' }}
|
|
content={({ payload, label }) => {
|
|
if (payload && payload.length) {
|
|
const risk = Number(payload[0].value) ?? 0
|
|
return (
|
|
<div className='max-w-[320px] rounded-lg px-4 py-2 shadow-tooltip gradient-tooltip '>
|
|
<Text size='sm'>{moment(label).format('MM-DD-YYYY')}</Text>
|
|
<Text size='sm'>
|
|
Risk: {formatValue(risk, { minDecimals: 0, maxDecimals: 0, suffix: '%' })}
|
|
</Text>
|
|
</div>
|
|
)
|
|
}
|
|
}}
|
|
/>
|
|
<Area
|
|
type='monotone'
|
|
dataKey='risk'
|
|
stroke='#FFFFFF'
|
|
fill='url(#chartGradient)'
|
|
isAnimationActive={enableAnimations}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|