Fouad
e5f41731ae
* bootstrap next app + add overview page * fix AssetList type * fix up nav stuff * Refactor Nav component and add network components pages * Refactor WorldMap component and update TelegramIcon, GitHubIcon, NymVpnIcon, DiscordIcon, and TwitterIcon components * add service providers page * mixnodes page * delegations page + use material react table for all tables * nodes map page * Refactor StyledLink component and remove unnecessary console.log statements * Refactor ESLint configuration, remove unused dependencies, and update component imports * update deps * Refactor imports and update dependencies * fix dark mode * build single mixnode page * build single gateway page * Refactor handleOnDelegate function to use useCallback in mixnodes page.tsx * Add defaults for constants --------- Co-authored-by: Mark Sinclair <mmsinclair@users.noreply.github.com>
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
import { Box, Typography } from '@mui/material'
|
|
import { useIsMobile } from '@/app/hooks/useIsMobile'
|
|
import { EconomicsProgress } from './EconomicsProgress'
|
|
|
|
export const StakeSaturationProgressBar = ({
|
|
value,
|
|
threshold,
|
|
}: {
|
|
value: number
|
|
threshold: number
|
|
}) => {
|
|
const isTablet = useIsMobile('lg')
|
|
const percentageColor = value > (threshold || 100) ? 'warning' : 'inherit'
|
|
const textColor =
|
|
percentageColor === 'warning' ? 'warning.main' : 'nym.wallet.fee'
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flexDirection: isTablet ? 'column' : 'row',
|
|
}}
|
|
id="field"
|
|
color={percentageColor}
|
|
>
|
|
<Typography
|
|
sx={{
|
|
mr: isTablet ? 0 : 1,
|
|
mb: isTablet ? 1 : 0,
|
|
fontWeight: '600',
|
|
fontSize: '12px',
|
|
color: textColor,
|
|
}}
|
|
id="stake-saturation-progress-bar"
|
|
>
|
|
{value}%
|
|
</Typography>
|
|
<EconomicsProgress
|
|
value={value}
|
|
threshold={threshold}
|
|
color={percentageColor}
|
|
/>
|
|
</Box>
|
|
)
|
|
}
|