@@ -3,10 +3,10 @@ import BigNumber from 'bignumber.js';
3
3
import React , { Component } from 'react' ;
4
4
import { observer } from 'mobx-react' ;
5
5
import SVGInline from 'react-svg-inline' ;
6
- import classnames from 'classnames' ;
6
+ import { Box , Text , Center , Flex } from '@chakra-ui/react' ;
7
+ import styled from '@emotion/styled' ;
7
8
import clockIcon from '../../../assets/images/clock-corner.inline.svg' ;
8
9
import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg' ;
9
- import styles from './ThumbPoolContent.scss' ;
10
10
import { getColorFromRange , getSaturationColor } from '../../../utils/colors' ;
11
11
import StakePool from '../../../domains/StakePool' ;
12
12
import {
@@ -16,6 +16,38 @@ import {
16
16
import adaIcon from '../../../assets/images/ada-symbol.inline.svg' ;
17
17
import { formattedWalletAmount } from '../../../utils/formatters' ;
18
18
19
+ const AdaIcon = styled ( SVGInline ) `
20
+ svg {
21
+ height: 11px;
22
+ width: 10px;
23
+
24
+ & > g {
25
+ & > g {
26
+ stroke: var(--theme-staking-wallet-row-ticker-ada-icon-fill-color);
27
+ }
28
+ }
29
+ }
30
+ ` ;
31
+
32
+ const ClockIcon = styled ( SVGInline ) `
33
+ svg {
34
+ height: 15px;
35
+ width: 15px;
36
+ }
37
+ ` ;
38
+
39
+ const NoDataDashIcon = styled ( SVGInline ) `
40
+ svg {
41
+ height: 3px;
42
+ width: 12px;
43
+
44
+ path {
45
+ fill: var(--theme-staking-stake-pool-grey-color) !important;
46
+ opacity: 1 !important;
47
+ }
48
+ }
49
+ ` ;
50
+
19
51
type Props = {
20
52
stakePool : StakePool ,
21
53
numberOfRankedStakePools : number ,
@@ -55,74 +87,100 @@ export default class ThumbPoolContent extends Component<Props> {
55
87
} = stakePool ;
56
88
const color = getColorFromRange ( ranking , numberOfRankedStakePools ) ;
57
89
58
- const componentClassnames = classnames ( [
59
- styles . component ,
60
- ! IS_SATURATION_DATA_AVAILABLE ? styles . hideSaturation : null ,
61
- ] ) ;
62
-
63
- const saturationClassnames = classnames ( [
64
- styles . saturationBar ,
65
- styles [ getSaturationColor ( saturation ) ] ,
66
- ] ) ;
67
-
68
90
return (
69
- < div className = { componentClassnames } >
70
- < div className = { styles . ticker } > { ticker } </ div >
71
- { isGridRewardsView &&
72
- ( IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
73
- < div className = { styles . rewards } >
74
- { this . formattedRewards ( potentialRewards ) }
75
- < SVGInline svg = { adaIcon } className = { styles . adaIcon } />
76
- </ div >
77
- ) : (
78
- < div className = { styles . noDataDash } >
79
- < SVGInline svg = { noDataDashBigImage } />
80
- </ div >
81
- ) ) }
82
- { ! isGridRewardsView &&
83
- ( IS_RANKING_DATA_AVAILABLE ? (
84
- < div className = { styles . ranking } style = { { color } } >
85
- { nonMyopicMemberRewards ? (
86
- ranking
87
- ) : (
88
- < >
89
- { numberOfRankedStakePools + 1 }
90
- < sup > *</ sup >
91
- </ >
91
+ < Flex
92
+ h = "16"
93
+ w = "20"
94
+ flexDirection = "column"
95
+ pt = { ! IS_SATURATION_DATA_AVAILABLE ? '3' : '2' }
96
+ pos = "relative"
97
+ >
98
+ < Box h = "full" >
99
+ < Center mb = { ! IS_SATURATION_DATA_AVAILABLE ? '1' : 'px' } >
100
+ < Text
101
+ fontWeight = "semibold"
102
+ fontSize = "sm"
103
+ sx = { { color : 'var(--theme-staking-stake-pool-ticker-color)' } }
104
+ lineHeight = "none"
105
+ >
106
+ { ticker }
107
+ </ Text >
108
+ </ Center >
109
+ { isGridRewardsView &&
110
+ ( IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
111
+ < Center py = "0.5" pos = "relative" flex = "1 1 auto" >
112
+ < Text fontSize = "sm" fontWeight = "semibold" >
113
+ { this . formattedRewards ( potentialRewards ) }
114
+ </ Text >
115
+ < AdaIcon svg = { adaIcon } />
116
+ </ Center >
117
+ ) : (
118
+ < Center flex = "1 1 auto" >
119
+ < NoDataDashIcon svg = { noDataDashBigImage } />
120
+ </ Center >
121
+ ) ) }
122
+ { ! isGridRewardsView &&
123
+ ( IS_RANKING_DATA_AVAILABLE ? (
124
+ < Center flex = "1" style = { { color } } mt = "1" >
125
+ < Text fontSize = "xl" fontWeight = "bold" lineHeight = "none" >
126
+ { nonMyopicMemberRewards ? (
127
+ ranking
128
+ ) : (
129
+ < >
130
+ { numberOfRankedStakePools + 1 }
131
+ < Text display = "inline-block" > *</ Text >
132
+ </ >
133
+ ) }
134
+ </ Text >
135
+ </ Center >
136
+ ) : (
137
+ < Center flex = "1 1 auto" >
138
+ < NoDataDashIcon svg = { noDataDashBigImage } />
139
+ </ Center >
140
+ ) ) }
141
+ { IS_SATURATION_DATA_AVAILABLE && (
142
+ < Center my = "1" >
143
+ < Flex
144
+ h = "1"
145
+ w = "10"
146
+ sx = { {
147
+ background :
148
+ 'var(--theme-staking-stake-pool-saturation-background-color)' ,
149
+ } }
150
+ borderRadius = "sm"
151
+ >
152
+ < Box
153
+ as = "span"
154
+ h = "1"
155
+ sx = { {
156
+ width : `${ parseFloat ( saturation ) . toFixed ( 2 ) } %` ,
157
+ } }
158
+ bg = { `stakePoolSaturation.${ getSaturationColor ( saturation ) } ` }
159
+ />
160
+ </ Flex >
161
+ </ Center >
162
+ ) }
163
+ </ Box >
164
+ < Box alignSelf = "flex-end" w = "full" >
165
+ { IS_RANKING_DATA_AVAILABLE ? (
166
+ < >
167
+ { retiring && (
168
+ < Box pos = "absolute" right = "0" top = "0" >
169
+ < ClockIcon svg = { clockIcon } />
170
+ </ Box >
92
171
) }
93
- </ div >
172
+ < Box h = "1" w = "full" sx = { { background : color } } flexShrink = "0" />
173
+ </ >
94
174
) : (
95
- < div className = { styles . noDataDash } >
96
- < SVGInline svg = { noDataDashBigImage } />
97
- </ div >
98
- ) ) }
99
- { IS_SATURATION_DATA_AVAILABLE && (
100
- < div className = { saturationClassnames } >
101
- < span
102
- style = { {
103
- width : `${ parseFloat ( saturation ) . toFixed ( 2 ) } %` ,
104
- } }
105
- />
106
- </ div >
107
- ) }
108
- { IS_RANKING_DATA_AVAILABLE ? (
109
- < >
110
- { retiring && (
111
- < div className = { styles . clock } >
112
- < SVGInline svg = { clockIcon } className = { styles . clockIcon } />
113
- </ div >
114
- ) }
115
- < div
116
- className = { styles . colorBand }
117
- style = { {
118
- background : color ,
119
- } }
175
+ < Box
176
+ h = "1"
177
+ w = "full"
178
+ sx = { { background : 'var(--theme-staking-stake-pool-grey-color)' } }
179
+ flexShrink = "0"
120
180
/>
121
- </ >
122
- ) : (
123
- < div className = { styles . greyColorBand } />
124
- ) }
125
- </ div >
181
+ ) }
182
+ </ Box >
183
+ </ Flex >
126
184
) ;
127
185
}
128
186
}
0 commit comments