22import BigNumber from 'bignumber.js' ;
33import React , { Component } from 'react' ;
44import { observer } from 'mobx-react' ;
5- import { Box , Text , Center , Flex } from '@chakra-ui/react' ;
65import clockIcon from '../../../assets/images/clock-corner.inline.svg' ;
76import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg' ;
87import { getColorFromRange , getSaturationColor } from '../../../utils/colors' ;
@@ -13,7 +12,6 @@ import {
1312} from '../../../config/stakingConfig' ;
1413import adaIcon from '../../../assets/images/ada-symbol.inline.svg' ;
1514import { formattedWalletAmount } from '../../../utils/formatters' ;
16- import { AdaIcon , ClockIcon , NoDataDashIcon } from './ThumbPoolContent.styles' ;
1715
1816type Props = {
1917 stakePool : StakePool ,
@@ -54,100 +52,74 @@ export default class ThumbPoolContent extends Component<Props> {
5452 } = stakePool ;
5553 const color = getColorFromRange ( ranking , numberOfRankedStakePools ) ;
5654
55+ const componentClassnames = classnames ( [
56+ styles . component ,
57+ ! IS_SATURATION_DATA_AVAILABLE ? styles . hideSaturation : null ,
58+ ] ) ;
59+
60+ const saturationClassnames = classnames ( [
61+ styles . saturationBar ,
62+ styles [ getSaturationColor ( saturation ) ] ,
63+ ] ) ;
64+
5765 return (
58- < Flex
59- h = "16"
60- w = "20"
61- flexDirection = "column"
62- pt = { ! IS_SATURATION_DATA_AVAILABLE ? '3' : '2' }
63- pos = "relative"
64- >
65- < Box h = "full" >
66- < Center mb = { ! IS_SATURATION_DATA_AVAILABLE ? '1' : 'px' } >
67- < Text
68- fontWeight = "semibold"
69- fontSize = "sm"
70- sx = { { color : 'var(--theme-staking-stake-pool-ticker-color)' } }
71- lineHeight = "none"
72- >
73- { ticker }
74- </ Text >
75- </ Center >
76- { isGridRewardsView &&
77- ( IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
78- < Center py = "0.5" pos = "relative" flex = "1 1 auto" >
79- < Text fontSize = "sm" fontWeight = "semibold" >
80- { this . formattedRewards ( potentialRewards ) }
81- </ Text >
82- < AdaIcon svg = { adaIcon } />
83- </ Center >
84- ) : (
85- < Center flex = "1 1 auto" >
86- < NoDataDashIcon svg = { noDataDashBigImage } />
87- </ Center >
88- ) ) }
89- { ! isGridRewardsView &&
90- ( IS_RANKING_DATA_AVAILABLE ? (
91- < Center flex = "1" style = { { color } } mt = "1" >
92- < Text fontSize = "xl" fontWeight = "bold" lineHeight = "none" >
93- { nonMyopicMemberRewards ? (
94- ranking
95- ) : (
96- < >
97- { numberOfRankedStakePools + 1 }
98- < Text display = "inline-block" > *</ Text >
99- </ >
100- ) }
101- </ Text >
102- </ Center >
103- ) : (
104- < Center flex = "1 1 auto" >
105- < NoDataDashIcon svg = { noDataDashBigImage } />
106- </ Center >
107- ) ) }
108- { IS_SATURATION_DATA_AVAILABLE && (
109- < Center my = "1" >
110- < Flex
111- h = "1"
112- w = "10"
113- sx = { {
114- background :
115- 'var(--theme-staking-stake-pool-saturation-background-color)' ,
116- } }
117- borderRadius = "sm"
118- >
119- < Box
120- as = "span"
121- h = "1"
122- sx = { {
123- width : `${ parseFloat ( saturation ) . toFixed ( 2 ) } %` ,
124- } }
125- bg = { `stakePoolSaturation.${ getSaturationColor ( saturation ) } ` }
126- />
127- </ Flex >
128- </ Center >
129- ) }
130- </ Box >
131- < Box alignSelf = "flex-end" w = "full" >
132- { IS_RANKING_DATA_AVAILABLE ? (
133- < >
134- { retiring && (
135- < Box pos = "absolute" right = "0" top = "0" >
136- < ClockIcon svg = { clockIcon } />
137- </ Box >
66+ < div className = { componentClassnames } >
67+ < div className = { styles . ticker } > { ticker } </ div >
68+ { isGridRewardsView &&
69+ ( IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
70+ < div className = { styles . rewards } >
71+ { this . formattedRewards ( potentialRewards ) }
72+ < SVGInline svg = { adaIcon } className = { styles . adaIcon } />
73+ </ div >
74+ ) : (
75+ < div className = { styles . noDataDash } >
76+ < SVGInline svg = { noDataDashBigImage } />
77+ </ div >
78+ ) ) }
79+ { ! isGridRewardsView &&
80+ ( IS_RANKING_DATA_AVAILABLE ? (
81+ < div className = { styles . ranking } style = { { color } } >
82+ { nonMyopicMemberRewards ? (
83+ ranking
84+ ) : (
85+ < >
86+ { numberOfRankedStakePools + 1 }
87+ < sup > *</ sup >
88+ </ >
13889 ) }
139- < Box h = "1" w = "full" sx = { { background : color } } flexShrink = "0" />
140- </ >
90+ </ div >
14191 ) : (
142- < Box
143- h = "1"
144- w = "full"
145- sx = { { background : 'var(--theme-staking-stake-pool-grey-color)' } }
146- flexShrink = "0"
92+ < div className = { styles . noDataDash } >
93+ < SVGInline svg = { noDataDashBigImage } />
94+ </ div >
95+ ) ) }
96+ { IS_SATURATION_DATA_AVAILABLE && (
97+ < div className = { saturationClassnames } >
98+ < span
99+ style = { {
100+ width : `${ parseFloat ( saturation ) . toFixed ( 2 ) } %` ,
101+ } }
102+ />
103+ </ div >
104+ ) }
105+ { IS_RANKING_DATA_AVAILABLE ? (
106+ < >
107+ { retiring && (
108+ < div className = { styles . clock } >
109+ < SVGInline svg = { clockIcon } className = { styles . clockIcon } />
110+ </ div >
111+ ) }
112+ < div
113+ className = { styles . colorBand }
114+ style = { {
115+ background : color ,
116+ } }
147117 />
148- ) }
149- </ Box >
150- </ Flex >
118+ </ >
119+ ) : (
120+ < div className = { styles . greyColorBand } />
121+ ) }
122+ </ div >
151123 ) ;
152124 }
153125}
0 commit comments