Skip to content

Commit 33a9024

Browse files
renanvalentinrenanvalentin
committed
[DDW-788] Chakra-ui - cleaner version
1 parent 20881db commit 33a9024

File tree

2 files changed

+145
-82
lines changed

2 files changed

+145
-82
lines changed

‎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+
);

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

Lines changed: 39 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import BigNumber from 'bignumber.js';
22
import React, { Component } from 'react';
33
import { observer } from 'mobx-react';
4-
import { Box, Text, Center, Flex } from '@chakra-ui/react';
5-
// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../assets/images/clock-c... Remove this comment to see the full error message
4+
import { Box, Center } from '@chakra-ui/react';
5+
// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../assets/images/no-data... Remove this comment to see the full error message
66
import clockIcon from '../../../assets/images/clock-corner.inline.svg';
77
// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../assets/images/no-data... Remove this comment to see the full error message
88
import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg';
@@ -13,10 +13,21 @@ import {
1313
IS_RANKING_DATA_AVAILABLE,
1414
IS_SATURATION_DATA_AVAILABLE,
1515
} from '../../../config/stakingConfig';
16-
// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../assets/images/ada-sym... Remove this comment to see the full error message
17-
import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
1816
import { formattedWalletAmount } from '../../../utils/formatters';
19-
import { AdaIcon, ClockIcon, NoDataDashIcon } from './ThumbPoolContent.styles';
17+
import {
18+
ClockIcon,
19+
NoDataDashIcon,
20+
Container,
21+
Ticker,
22+
Rewards,
23+
NoDataDash,
24+
Ranking,
25+
RankingStar,
26+
SaturationBar,
27+
Clock,
28+
ColorBand,
29+
GreyColorBand,
30+
} from './ThumbPoolContent.styles';
2031

2132
type Props = {
2233
stakePool: StakePool;
@@ -62,100 +73,54 @@ class ThumbPoolContent extends Component<Props> {
6273
const color = getColorFromRange(ranking, numberOfRankedStakePools);
6374

6475
return (
65-
<Flex
66-
h="16"
67-
w="20"
68-
flexDirection="column"
69-
pt={!IS_SATURATION_DATA_AVAILABLE ? '3' : '2'}
70-
pos="relative"
71-
>
76+
<Container>
7277
<Box h="full">
73-
<Center mb={!IS_SATURATION_DATA_AVAILABLE ? '1' : 'px'}>
74-
<Text
75-
fontWeight="semibold"
76-
fontSize="sm"
77-
sx={{ color: 'var(--theme-staking-stake-pool-ticker-color)' }}
78-
lineHeight="none"
79-
>
80-
{ticker}
81-
</Text>
82-
</Center>
78+
<Ticker>{ticker}</Ticker>
8379
{isGridRewardsView &&
8480
(IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
85-
<Center py="0.5" pos="relative" flex="1 1 auto">
86-
<Text fontSize="sm" fontWeight="semibold">
87-
{this.formattedRewards(potentialRewards)}
88-
</Text>
89-
<AdaIcon svg={adaIcon} />
90-
</Center>
81+
<Rewards>{this.formattedRewards(potentialRewards)}</Rewards>
9182
) : (
92-
<Center flex="1 1 auto">
93-
<NoDataDashIcon svg={noDataDashBigImage} />
94-
</Center>
83+
<NoDataDash />
9584
))}
9685
{!isGridRewardsView &&
9786
(IS_RANKING_DATA_AVAILABLE ? (
98-
<Center flex="1" style={{ color }} mt="1">
99-
<Text fontSize="xl" fontWeight="bold" lineHeight="none">
100-
{nonMyopicMemberRewards ? (
101-
ranking
102-
) : (
103-
<>
104-
{numberOfRankedStakePools + 1}
105-
<Text display="inline-block">*</Text>
106-
</>
107-
)}
108-
</Text>
109-
</Center>
87+
<Ranking color={color}>
88+
{nonMyopicMemberRewards ? (
89+
ranking
90+
) : (
91+
<>
92+
{numberOfRankedStakePools + 1}
93+
<RankingStar>*</RankingStar>
94+
</>
95+
)}
96+
</Ranking>
11097
) : (
11198
<Center flex="1 1 auto">
11299
<NoDataDashIcon svg={noDataDashBigImage} />
113100
</Center>
114101
))}
115102
{IS_SATURATION_DATA_AVAILABLE && (
116-
<Center my="1">
117-
<Flex
118-
h="1"
119-
w="10"
120-
sx={{
121-
background:
122-
'var(--theme-staking-stake-pool-saturation-background-color)',
123-
}}
124-
borderRadius="sm"
125-
>
126-
<Box
127-
as="span"
128-
h="1"
129-
sx={{
130-
// @ts-ignore ts-migrate(2345) FIXME: Argument of type 'number' is not assignable to par... Remove this comment to see the full error message
131-
width: `${parseFloat(saturation).toFixed(2)}%`,
132-
}}
133-
bg={`stakePoolSaturation.${getSaturationColor(saturation)}`}
134-
/>
135-
</Flex>
136-
</Center>
103+
<SaturationBar
104+
width={parseFloat(saturation).toFixed(2)}
105+
color={getSaturationColor(saturation)}
106+
/>
137107
)}
138108
</Box>
139109
<Box alignSelf="flex-end" w="full">
140110
{IS_RANKING_DATA_AVAILABLE ? (
141111
<>
142112
{retiring && (
143-
<Box pos="absolute" right="0" top="0">
113+
<Clock>
144114
<ClockIcon svg={clockIcon} />
145-
</Box>
115+
</Clock>
146116
)}
147-
<Box h="1" w="full" sx={{ background: color }} flexShrink="0" />
117+
<ColorBand color={color} />
148118
</>
149119
) : (
150-
<Box
151-
h="1"
152-
w="full"
153-
sx={{ background: 'var(--theme-staking-stake-pool-grey-color)' }}
154-
flexShrink="0"
155-
/>
120+
<GreyColorBand />
156121
)}
157122
</Box>
158-
</Flex>
123+
</Container>
159124
);
160125
}
161126
}

0 commit comments

Comments
 (0)