b5c097d661
* upgrade to next 13 * WIP: adjust to app dir * add docker + wallet connector * fix: update the wallet connect component * tidy: format * wip: make the wallet balance fetcher work * fix balance retrieval * MP-2258: added estimateFee hook (#94) * Mp 2259 queries to api (#96) * update next config for build errors * Convert queries to API + remove config * tidy: save some bytes by adding constants/env.ts * tidy: added URL_ prefix to REST, RPC and GQL --------- Co-authored-by: Linkie Link <linkielink.dev@gmail.com> * MP-2261: created useBroadcast hook for transactions (#95) * tidy: remove unneeded wallet images * Mp 2264 convert store (#97) * Merge stores into 1 * refactor codebase to use new store * fiex build and rename whitelisted to marketassets * tidy: import refactor * updated account navigation basics * feat: added loading component and fixed the disconnect button * fix: format * update new routing system * update config and dependencies * feat: create and delete credit account are restored * tidy: format * fix: fixed the deployment * update route structure (#98) * fix: creditAccountDeposit works again * fix: bugfixes * add apis, remove allowedCoins, get basic borrow tables (#99) Co-authored-by: bwvdhelm <34470358+bobthebuidlr@users.noreply.github.com> --------- Co-authored-by: bwvdhelm <34470358+bobthebuidlr@users.noreply.github.com>
94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
import classNames from 'classnames'
|
|
import { ReactNode } from 'react'
|
|
|
|
import { Tooltip } from 'components/Tooltip'
|
|
import useStore from 'store'
|
|
|
|
interface Props {
|
|
tooltip: string | ReactNode
|
|
strokeWidth?: number
|
|
background?: string
|
|
diameter?: number
|
|
value: number
|
|
label?: string
|
|
}
|
|
|
|
export const Gauge = ({
|
|
background = '#15161A',
|
|
diameter = 40,
|
|
value = 0,
|
|
label,
|
|
tooltip,
|
|
}: Props) => {
|
|
const enableAnimations = useStore((s) => s.enableAnimations)
|
|
|
|
const percentage = value * 100
|
|
const percentageValue = percentage > 100 ? 100 : percentage < 0 ? 0 : percentage
|
|
const semiCirclePercentage = percentageValue == -50 ? 0 : Math.abs(percentageValue / 2 - 50)
|
|
|
|
return (
|
|
<Tooltip content={tooltip}>
|
|
<div
|
|
className={classNames(
|
|
'relative overflow-hidden',
|
|
`w-${diameter / 4} h-${diameter / 8 + 1}`,
|
|
)}
|
|
>
|
|
<svg
|
|
viewBox='2 -2 28 36'
|
|
width={diameter}
|
|
height={diameter}
|
|
style={{ transform: 'rotate(180deg)' }}
|
|
className='absolute top-0 left-0'
|
|
>
|
|
<linearGradient id='gradient'>
|
|
<stop stopColor='#C13338' offset='0%'></stop>
|
|
<stop stopColor='#4F3D9F' offset='50%'></stop>
|
|
<stop stopColor='#15BFA9' offset='100%'></stop>
|
|
</linearGradient>
|
|
<circle
|
|
fill='none'
|
|
stroke={background}
|
|
strokeWidth={4}
|
|
strokeDasharray='50 100'
|
|
strokeLinecap='round'
|
|
r='16'
|
|
cx='16'
|
|
cy='16'
|
|
shapeRendering='geometricPrecision'
|
|
/>
|
|
<circle
|
|
r='16'
|
|
cx='16'
|
|
cy='16'
|
|
fill='none'
|
|
strokeLinecap='round'
|
|
stroke='url(#gradient)'
|
|
strokeDasharray='50 100'
|
|
strokeWidth={5}
|
|
style={{
|
|
strokeDashoffset: semiCirclePercentage,
|
|
transition: enableAnimations ? 'stroke-dashoffset 1s ease' : 'none',
|
|
}}
|
|
shapeRendering='geometricPrecision'
|
|
/>
|
|
</svg>
|
|
{label && (
|
|
<span
|
|
className='text-xs'
|
|
style={{
|
|
width: '100%',
|
|
left: '0',
|
|
textAlign: 'center',
|
|
bottom: '-2px',
|
|
position: 'absolute',
|
|
}}
|
|
>
|
|
{label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Tooltip>
|
|
)
|
|
}
|