1
1
// Import libraries
2
- import React , { useState , useEffect } from "react"
3
- import styled from "@emotion/styled"
2
+ import React , { useState , useEffect , ReactNode } from "react"
4
3
import { useIntl } from "react-intl"
5
- import { Spinner } from "@chakra-ui/react"
4
+ import { Code , Flex , Icon , Spinner } from "@chakra-ui/react"
6
5
// Import components
7
6
import Translation from "../Translation"
8
7
import Tooltip from "../Tooltip"
9
8
import Link from "../Link"
10
- import Icon from "../Icon"
11
9
// Import utilities
12
10
import { Lang } from "../../utils/languages"
13
11
import { getData } from "../../utils/cache"
14
12
import { getLocaleForNumberFormat } from "../../utils/translations"
13
+ import { MdInfoOutline } from "react-icons/md"
15
14
16
15
// Constants
17
16
const NA_ERROR = "n/a"
18
17
const ZERO = "0"
19
18
const MAX_EFFECTIVE_BALANCE = 32
20
19
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
+ }
55
42
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
+ }
64
64
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
+ }
76
78
79
+ //TODO: size="16" hover, active and focus
77
80
// BeaconchainTooltip component
78
81
const BeaconchainTooltip = ( { isEthStore } : { isEthStore ?: boolean } ) => (
79
82
< Tooltip
@@ -87,7 +90,15 @@ const BeaconchainTooltip = ({ isEthStore }: { isEthStore?: boolean }) => (
87
90
</ div >
88
91
}
89
92
>
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
+ />
91
102
</ Tooltip >
92
103
)
93
104
@@ -148,7 +159,7 @@ const StakingStatsBox: React.FC<IProps> = () => {
148
159
} , [ intl . locale ] )
149
160
150
161
return (
151
- < Container >
162
+ < Flex direction = { { base : "column" , md : "row" } } >
152
163
< Cell >
153
164
{ totalEth === ZERO ? (
154
165
< Spinner />
@@ -186,7 +197,7 @@ const StakingStatsBox: React.FC<IProps> = () => {
186
197
< BeaconchainTooltip isEthStore />
187
198
</ Label >
188
199
</ Cell >
189
- </ Container >
200
+ </ Flex >
190
201
)
191
202
}
192
203
0 commit comments