Skip to content

Commit e19c674

Browse files
author
soheil
committed
migrate the StakingStatsBox to Chakra UI
1 parent efa2d96 commit e19c674

File tree

1 file changed

+71
-60
lines changed

1 file changed

+71
-60
lines changed

src/components/Staking/StakingStatsBox.tsx

Lines changed: 71 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,82 @@
11
// Import libraries
2-
import React, { useState, useEffect } from "react"
3-
import styled from "@emotion/styled"
2+
import React, { useState, useEffect, ReactNode } from "react"
43
import { useIntl } from "react-intl"
5-
import { Spinner } from "@chakra-ui/react"
4+
import { Code, Flex, Icon, Spinner } from "@chakra-ui/react"
65
// Import components
76
import Translation from "../Translation"
87
import Tooltip from "../Tooltip"
98
import Link from "../Link"
10-
import Icon from "../Icon"
119
// Import utilities
1210
import { Lang } from "../../utils/languages"
1311
import { getData } from "../../utils/cache"
1412
import { getLocaleForNumberFormat } from "../../utils/translations"
13+
import { MdInfoOutline } from "react-icons/md"
1514

1615
// Constants
1716
const NA_ERROR = "n/a"
1817
const ZERO = "0"
1918
const MAX_EFFECTIVE_BALANCE = 32
2019

21-
// Styled components
22-
const Container = styled.div`
23-
display: flex;
24-
@media (max-width: ${({ theme }) => theme.breakpoints.m}) {
25-
flex-direction: column;
26-
}
27-
`
28-
29-
const Cell = styled.div`
30-
display: flex;
31-
flex-direction: column;
32-
align-items: center;
33-
padding: 1rem 2rem;
34-
border-left: 1px solid ${({ theme }) => theme.colors.preBorder};
35-
@media (max-width: ${({ theme }) => theme.breakpoints.m}) {
36-
border-left: none;
37-
border-top: 1px solid #33333355;
38-
}
39-
&:first-child {
40-
border-left: none;
41-
border-top: none;
42-
}
43-
`
44-
45-
const Value = styled.code`
46-
font-weight: 700;
47-
font-size: 2rem;
48-
background: none;
49-
display: flex;
50-
align-items: center;
51-
text-align: center;
52-
text-transform: uppercase;
53-
color: ${({ theme }) => theme.colors.primary};
54-
`
20+
//TODO: check out borderLeftColor
21+
const Cell: React.FC<{ children: ReactNode }> = ({ children }) => {
22+
return (
23+
<Flex
24+
direction="column"
25+
alignItems="center"
26+
py={4}
27+
px={8}
28+
borderLeft={{ base: "none", md: "1px solid" }}
29+
borderLeftColor={{ md: "preBorder" }}
30+
borderTop={{ base: "1px solid #33333355", md: "none" }}
31+
sx={{
32+
"&:first-child": {
33+
borderLeft: "none",
34+
borderTop: "none",
35+
},
36+
}}
37+
>
38+
{children}
39+
</Flex>
40+
)
41+
}
5542

56-
const Label = styled.div`
57-
display: flex;
58-
flex-wrap: nowrap;
59-
align-items: center;
60-
text-transform: uppercase;
61-
font-size: 0.875rem;
62-
margin-top: 0.5rem;
63-
`
43+
//TODO: code and title
44+
const Value: React.FC<{ children: ReactNode; title: string }> = ({
45+
children,
46+
title,
47+
}) => {
48+
return (
49+
<Code
50+
title={title}
51+
fontWeight="bold"
52+
fontSize="2rem"
53+
background="none"
54+
display="flex"
55+
alignItems="center"
56+
textAlign="center"
57+
textTransform="uppercase"
58+
color="primary"
59+
>
60+
{children}
61+
</Code>
62+
)
63+
}
6464

65-
const StyledIcon = styled(Icon)`
66-
fill: ${({ theme }) => theme.colors.text};
67-
margin-inline-start: 0.5rem;
68-
@media (max-width: ${({ theme }) => theme.breakpoints.l}) {
69-
}
70-
&:hover,
71-
&:active,
72-
&:focus {
73-
fill: ${({ theme }) => theme.colors.primary};
74-
}
75-
`
65+
const Label: React.FC<{ children: ReactNode }> = ({ children }) => {
66+
return (
67+
<Flex
68+
wrap="nowrap"
69+
alignItems="center"
70+
textTransform="uppercase"
71+
fontSize="sm"
72+
mt={2}
73+
>
74+
{children}
75+
</Flex>
76+
)
77+
}
7678

79+
//TODO: size="16" hover, active and focus
7780
// BeaconchainTooltip component
7881
const BeaconchainTooltip = ({ isEthStore }: { isEthStore?: boolean }) => (
7982
<Tooltip
@@ -87,7 +90,15 @@ const BeaconchainTooltip = ({ isEthStore }: { isEthStore?: boolean }) => (
8790
</div>
8891
}
8992
>
90-
<StyledIcon name="info" size="16" />
93+
<Icon
94+
as={MdInfoOutline}
95+
fill="text"
96+
marginInlineStart={2}
97+
_hover={{ fill: "primary" }}
98+
_active={{ fill: "primary" }}
99+
_focus={{ fill: "primary" }}
100+
boxSize={4}
101+
/>
91102
</Tooltip>
92103
)
93104

@@ -148,7 +159,7 @@ const StakingStatsBox: React.FC<IProps> = () => {
148159
}, [intl.locale])
149160

150161
return (
151-
<Container>
162+
<Flex direction={{ base: "column", md: "row" }}>
152163
<Cell>
153164
{totalEth === ZERO ? (
154165
<Spinner />
@@ -186,7 +197,7 @@ const StakingStatsBox: React.FC<IProps> = () => {
186197
<BeaconchainTooltip isEthStore />
187198
</Label>
188199
</Cell>
189-
</Container>
200+
</Flex>
190201
)
191202
}
192203

0 commit comments

Comments
 (0)