Skip to content

Commit 82893ee

Browse files
renanvalentinrenanvalentin
committed
[DDW-788] Chakra-ui - cleaner version
1 parent c0e7eab commit 82893ee

File tree

2 files changed

+144
-79
lines changed

2 files changed

+144
-79
lines changed

‎source/renderer/app/components/staking/widgets/ThumbPoolContent.js‎

Lines changed: 38 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import BigNumber from 'bignumber.js';
33
import React, { Component } from 'react';
44
import { observer } from 'mobx-react';
5-
import { Box, Text, Center, Flex } from '@chakra-ui/react';
5+
import { Box, Center } from '@chakra-ui/react';
66
import clockIcon from '../../../assets/images/clock-corner.inline.svg';
77
import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg';
88
import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
@@ -11,9 +11,21 @@ import {
1111
IS_RANKING_DATA_AVAILABLE,
1212
IS_SATURATION_DATA_AVAILABLE,
1313
} from '../../../config/stakingConfig';
14-
import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
1514
import { formattedWalletAmount } from '../../../utils/formatters';
16-
import { AdaIcon, ClockIcon, NoDataDashIcon } from './ThumbPoolContent.styles';
15+
import {
16+
ClockIcon,
17+
NoDataDashIcon,
18+
Container,
19+
Ticker,
20+
Rewards,
21+
NoDataDash,
22+
Ranking,
23+
RankingStar,
24+
SaturationBar,
25+
Clock,
26+
ColorBand,
27+
GreyColorBand,
28+
} from './ThumbPoolContent.styles';
1729

1830
type Props = {
1931
stakePool: StakePool,
@@ -55,99 +67,54 @@ export default class ThumbPoolContent extends Component<Props> {
5567
const color = getColorFromRange(ranking, numberOfRankedStakePools);
5668

5769
return (
58-
<Flex
59-
h="16"
60-
w="20"
61-
flexDirection="column"
62-
pt={!IS_SATURATION_DATA_AVAILABLE ? '3' : '2'}
63-
pos="relative"
64-
>
70+
<Container>
6571
<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>
72+
<Ticker>{ticker}</Ticker>
7673
{isGridRewardsView &&
7774
(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>
75+
<Rewards>{this.formattedRewards(potentialRewards)}</Rewards>
8476
) : (
85-
<Center flex="1 1 auto">
86-
<NoDataDashIcon svg={noDataDashBigImage} />
87-
</Center>
77+
<NoDataDash />
8878
))}
8979
{!isGridRewardsView &&
9080
(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>
81+
<Ranking color={color}>
82+
{nonMyopicMemberRewards ? (
83+
ranking
84+
) : (
85+
<>
86+
{numberOfRankedStakePools + 1}
87+
<RankingStar>*</RankingStar>
88+
</>
89+
)}
90+
</Ranking>
10391
) : (
10492
<Center flex="1 1 auto">
10593
<NoDataDashIcon svg={noDataDashBigImage} />
10694
</Center>
10795
))}
10896
{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>
97+
<SaturationBar
98+
width={parseFloat(saturation).toFixed(2)}
99+
color={getSaturationColor(saturation)}
100+
/>
129101
)}
130102
</Box>
131103
<Box alignSelf="flex-end" w="full">
132104
{IS_RANKING_DATA_AVAILABLE ? (
133105
<>
134106
{retiring && (
135-
<Box pos="absolute" right="0" top="0">
107+
<Clock>
136108
<ClockIcon svg={clockIcon} />
137-
</Box>
109+
</Clock>
138110
)}
139-
<Box h="1" w="full" sx={{ background: color }} flexShrink="0" />
111+
<ColorBand color={color} />
140112
</>
141113
) : (
142-
<Box
143-
h="1"
144-
w="full"
145-
sx={{ background: 'var(--theme-staking-stake-pool-grey-color)' }}
146-
flexShrink="0"
147-
/>
114+
<GreyColorBand />
148115
)}
149116
</Box>
150-
</Flex>
117+
</Container>
151118
);
152119
}
153120
}

‎source/renderer/app/components/staking/widgets/ThumbPoolContent.styles.js‎

Lines changed: 106 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,66 @@
1-
// @flow
1+
import React from 'react';
22
import SVGInline from 'react-svg-inline';
3+
import { Box, Text, Center, Flex } from '@chakra-ui/react';
34
import styled from '@emotion/styled';
5+
import clockIcon from '../../../assets/images/clock-corner.inline.svg';
6+
import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
7+
8+
export const Container = ({ children, isSaturationDataAvailable }) => (
9+
<Flex
10+
h="16"
11+
w="20"
12+
flexDirection="column"
13+
pt={!isSaturationDataAvailable ? '3' : '2'}
14+
pos="relative"
15+
>
16+
{children}
17+
</Flex>
18+
);
19+
20+
export const Ticker = ({ children, isSaturationDataAvailable }) => (
21+
<Center mb={!isSaturationDataAvailable ? '1' : 'px'}>
22+
<Text
23+
fontWeight="semibold"
24+
fontSize="sm"
25+
sx={{ color: 'var(--theme-staking-stake-pool-ticker-color)' }}
26+
lineHeight="none"
27+
>
28+
{children}
29+
</Text>
30+
</Center>
31+
);
32+
33+
export const Rewards = ({ children }) => (
34+
<Center py="0.5" pos="relative" flex="1 1 auto">
35+
<Text fontSize="sm" fontWeight="semibold">
36+
{children}
37+
</Text>
38+
<AdaIcon svg={adaIcon} />
39+
</Center>
40+
);
41+
42+
export const NoDataDash = ({ children }) => (
43+
<Center flex="1 1 auto">
44+
<NoDataDashIcon svg={noDataDashBigImage} />
45+
</Center>
46+
);
47+
48+
export const Ranking = ({ children, color }) => (
49+
<Center flex="1" style={{ color }} mt="1">
50+
<Text fontSize="xl" fontWeight="bold" lineHeight="none">
51+
{children}
52+
</Text>
53+
</Center>
54+
);
55+
56+
export const RankingStar = ({ children }) => (
57+
<Text display="inline-block">{children}</Text>
58+
);
459

560
export const AdaIcon = styled(SVGInline)`
661
svg {
762
height: 11px;
63+
margin-left: 3px;
864
width: 10px;
965
1066
& > g {
@@ -15,13 +71,6 @@ export const AdaIcon = styled(SVGInline)`
1571
}
1672
`;
1773

18-
export const ClockIcon = styled(SVGInline)`
19-
svg {
20-
height: 15px;
21-
width: 15px;
22-
}
23-
`;
24-
2574
export const NoDataDashIcon = styled(SVGInline)`
2675
svg {
2776
height: 3px;
@@ -33,3 +82,52 @@ export const NoDataDashIcon = styled(SVGInline)`
3382
}
3483
}
3584
`;
85+
86+
export const Clock = ({ children }) => (
87+
<Box pos="absolute" right="0" top="0">
88+
{children}
89+
</Box>
90+
);
91+
92+
export const ClockIcon = styled(SVGInline)`
93+
svg {
94+
height: 15px;
95+
width: 15px;
96+
}
97+
`;
98+
99+
export const ColorBand = ({ color }) => (
100+
<Box h="1" w="full" sx={{ background: color }} flexShrink="0" />
101+
);
102+
103+
export const GreyColorBand = () => (
104+
<Box
105+
h="1"
106+
w="full"
107+
sx={{ background: 'var(--theme-staking-stake-pool-grey-color)' }}
108+
flexShrink="0"
109+
/>
110+
);
111+
112+
export const SaturationBar = ({ width, color }) => (
113+
<Center my="1">
114+
<Flex
115+
h="1"
116+
w="10"
117+
sx={{
118+
background:
119+
'var(--theme-staking-stake-pool-saturation-background-color)',
120+
}}
121+
borderRadius="sm"
122+
>
123+
<Box
124+
as="span"
125+
h="1"
126+
sx={{
127+
width: `${width}%`,
128+
}}
129+
bg={`stakePoolSaturation.${color}`}
130+
/>
131+
</Flex>
132+
</Center>
133+
);

0 commit comments

Comments
 (0)