Skip to content

Commit 6eaf8db

Browse files
wackerowwackerow
authored
Merge pull request #7190 from ethereum/post-merge
Post-merge content updates
2 parents a2bee0f + 7b3bf07 commit 6eaf8db

File tree

108 files changed

+1431
-1302
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

108 files changed

+1431
-1302
lines changed

‎docs/chakra-migration-guide.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,12 @@ const Paragraph = styled.p`
8686
We will use [the Chakra default breakpoints](https://chakra-ui.com/docs/styled-system/theme#breakpoints) from now on. Check the following table to do the conversion:
8787
| old breakpoints | new breakpoints |
8888
|-----------------|-----------------|
89-
| xs | - |
90-
| s | sm |
91-
| m | md |
92-
| l | lg |
93-
| xl | xl |
94-
| - | 2xl |
95-
89+
| xs | - |
90+
| s | sm |
91+
| m | md |
92+
| l | lg |
93+
| xl | xl |
94+
| - | 2xl |
9695

9796
```tsx
9897
// before

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"react-icons": "^4.3.1",
7070
"react-instantsearch-dom": "^6.32.0",
7171
"react-intl": "^3.12.1",
72+
"react-rewards": "^2.0.4",
7273
"react-select": "^4.3.0",
7374
"recharts": "^2.1.9",
7475
"styled-system": "^5.1.5",

‎src/assets/home/default_hero.png

7.75 MB
Loading

‎src/assets/home/hero.png

-6.34 MB
Loading

‎src/components/BannerNotification.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,33 @@
11
import React from "react"
2-
import { Flex, useMediaQuery } from "@chakra-ui/react"
2+
import { Flex, FlexProps, useMediaQuery } from "@chakra-ui/react"
33
import { lightTheme as oldTheme } from "../theme"
44

5-
export interface IProps {
6-
children?: React.ReactNode
5+
export interface IProps extends FlexProps {
76
shouldShow?: boolean
8-
className?: string
97
}
108

119
const BannerNotification: React.FC<IProps> = ({
1210
children,
13-
className,
1411
shouldShow = false,
12+
...props
1513
}) => {
1614
const [isLGScreen] = useMediaQuery(`min-width: ${oldTheme.breakpoints.l}`)
17-
1815
return (
1916
<>
2017
{shouldShow && (
2118
<Flex
22-
className={className}
2319
maxW={isLGScreen ? oldTheme.variables.maxPageWidth : "100%"}
2420
w="100%"
2521
py="4"
2622
px="8"
2723
bg="primary"
2824
color="background"
29-
borderBottom="1px solid primary"
3025
sx={{
3126
a: {
3227
color: "background",
3328
},
3429
}}
30+
{...props}
3531
>
3632
{children}
3733
</Flex>

‎src/components/Banners/PostMergeBanner.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from "react"
2+
import styled from "@emotion/styled"
3+
import BannerNotification from "../BannerNotification"
4+
import Translation from "../Translation"
5+
6+
import { TranslationKey } from "../../utils/translations"
7+
8+
const StyledBannerNotification = styled(BannerNotification)`
9+
display: flex;
10+
z-index: 1;
11+
justify-content: center;
12+
p {
13+
max-width: 100ch;
14+
margin: 0;
15+
padding: 0;
16+
}
17+
a {
18+
text-decoration: underline;
19+
}
20+
text-align: center;
21+
`
22+
23+
export interface IProps {
24+
translationString: TranslationKey
25+
}
26+
27+
const PostMergeBanner: React.FC<IProps> = ({ translationString }) => (
28+
<StyledBannerNotification shouldShow={true}>
29+
<p>
30+
<Translation id={translationString} />
31+
</p>
32+
</StyledBannerNotification>
33+
)
34+
35+
export default PostMergeBanner

‎src/components/EnergyConsumptionChart.tsx

Lines changed: 116 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useMemo } from "react"
2+
import { Box, Center } from "@chakra-ui/react"
23
import { useTheme } from "@emotion/react"
3-
import styled from "@emotion/styled"
44
import {
55
BarChart,
66
Bar,
@@ -12,39 +12,9 @@ import {
1212
ResponsiveContainer,
1313
Legend,
1414
} from "recharts"
15-
15+
import Translation from "./Translation"
1616
import { useWindowSize } from "../hooks/useWindowSize"
1717

18-
const Container = styled.div`
19-
max-width: 500px;
20-
width: 100%;
21-
border-radius: 0.3rem;
22-
`
23-
24-
// @ts-ignore
25-
const StyledText = styled(Text)`
26-
font-size: 10px;
27-
28-
@media (min-width: ${({ theme }) => theme.breakpoints.m}) {
29-
font-size: 12px;
30-
}
31-
`
32-
33-
const StyledLegend = styled.div`
34-
text-align: center;
35-
color: ${({ theme }) => (theme.isDark ? theme.colors.text : "#08084d")};
36-
font-weight: 600;
37-
margin-top: 2rem;
38-
`
39-
40-
interface ILegendProps {
41-
legend: string
42-
}
43-
44-
const CustomLegend: React.FC<ILegendProps> = ({ legend }) => {
45-
return <StyledLegend>{legend}</StyledLegend>
46-
}
47-
4818
interface ITickProps {
4919
x: number
5020
y: number
@@ -56,87 +26,143 @@ const CustomTick: React.FC<ITickProps> = ({ x, y, payload }) => {
5626

5727
return (
5828
<g transform={`translate(${x},${y})`}>
59-
<StyledText
29+
<Text
6030
x={0}
6131
y={0}
6232
dy={15}
6333
width={50}
6434
fill={theme.colors.text}
6535
textAnchor="middle"
6636
verticalAnchor="middle"
37+
fontSize="10px"
6738
>
6839
{payload.value}
69-
</StyledText>
40+
</Text>
7041
</g>
7142
)
7243
}
7344

74-
export interface IProps {
75-
data: Array<{
45+
const EnergyConsumptionChart: React.FC = () => {
46+
const theme = useTheme()
47+
const [width] = useWindowSize()
48+
49+
const smallBreakpoint = Number(theme.breakpoints.s.replace("px", ""))
50+
const mediumBreakpoint = Number(theme.breakpoints.m.replace("px", ""))
51+
52+
type Data = Array<{
7653
name: string
7754
amount: number
7855
color: string
7956
breakpoint?: number
8057
}>
81-
legend: string
82-
}
83-
84-
const EnergyConsumptionChart: React.FC<IProps> = ({ data, legend }) => {
85-
const theme = useTheme()
86-
const [width] = useWindowSize()
87-
88-
const filteredData = useMemo(() => {
89-
return data.filter((cell) => {
90-
if (!cell.breakpoint) {
91-
return true
92-
}
9358

94-
return cell.breakpoint < width
95-
})
96-
}, [data, width])
59+
// TODO: Extract translatable strings
60+
const energyConsumptionChartData: Data = [
61+
{
62+
name: "YouTube",
63+
amount: 244,
64+
color: "#FF0000",
65+
},
66+
{
67+
name: "Gold mining",
68+
amount: 240,
69+
color: "#D7B14A",
70+
breakpoint: mediumBreakpoint,
71+
},
72+
{
73+
name: "BTC PoW",
74+
amount: 200,
75+
color: "#F2A900",
76+
},
77+
{
78+
name: "ETH PoW",
79+
amount: 112,
80+
color: "#C1B6F5",
81+
},
82+
{
83+
name: "Netflix",
84+
amount: 94,
85+
color: "#E50914",
86+
breakpoint: smallBreakpoint,
87+
},
88+
{
89+
name: "Gaming",
90+
amount: 34,
91+
color: "#71BB8A",
92+
breakpoint: mediumBreakpoint,
93+
},
94+
{
95+
name: "PayPal",
96+
amount: 0.26,
97+
color: "#C1B6F5",
98+
breakpoint: smallBreakpoint,
99+
},
100+
{
101+
name: "ETH PoS",
102+
amount: 0.01,
103+
color: "#C1B6F5",
104+
},
105+
]
106+
107+
const filteredData = useMemo(
108+
() =>
109+
energyConsumptionChartData.filter(
110+
(cell) => !cell.breakpoint || cell.breakpoint < width
111+
),
112+
[energyConsumptionChartData, width]
113+
)
97114

98115
return (
99-
<Container>
100-
<ResponsiveContainer height={500}>
101-
<BarChart
102-
margin={{ top: 30, right: 30, bottom: 30, left: 30 }}
103-
barGap={15}
104-
barSize={38}
105-
data={filteredData}
106-
>
107-
<CartesianGrid
108-
vertical={false}
109-
strokeDasharray="5 3"
110-
stroke="#B9B9B9"
111-
/>
112-
<XAxis
113-
dataKey="name"
114-
tickLine={false}
115-
axisLine={false}
116-
// @ts-ignore
117-
tick={<CustomTick />}
118-
interval={0}
119-
/>
120-
<Legend content={<CustomLegend legend={legend} />} />
121-
<Bar
122-
dataKey="amount"
123-
radius={[4, 4, 0, 0]}
124-
// Disable animation ~ issue w/ LabelList. Ref: https://github.com/recharts/recharts/issues/1135
125-
isAnimationActive={false}
116+
<Center w="full">
117+
<Box maxW="500px" w="full">
118+
<ResponsiveContainer height={500}>
119+
<BarChart
120+
margin={{ top: 30, right: 30, bottom: 30, left: 30 }}
121+
barGap={15}
122+
barSize={38}
123+
// data={energyConsumptionChartData}
124+
data={filteredData}
126125
>
127-
<LabelList
128-
position="top"
129-
fill={theme.colors.text}
130-
fontSize={14}
131-
offset={10}
126+
<CartesianGrid
127+
vertical={false}
128+
strokeDasharray="5 3"
129+
stroke="#B9B9B9"
130+
/>
131+
<XAxis
132+
dataKey="name"
133+
tickLine={false}
134+
axisLine={false}
135+
// @ts-ignore
136+
tick={<CustomTick />}
137+
interval={0}
138+
/>
139+
<Legend
140+
content={
141+
<Box textAlign="center" color="text" fontWeight="600" mt={8}>
142+
<Translation id="page-what-is-ethereum-energy-consumption-chart-legend" />
143+
</Box>
144+
}
132145
/>
133-
{filteredData.map((cell, index) => (
134-
<Cell key={`cell-${index}`} fill={cell.color} />
135-
))}
136-
</Bar>
137-
</BarChart>
138-
</ResponsiveContainer>
139-
</Container>
146+
<Bar
147+
dataKey="amount"
148+
radius={[4, 4, 0, 0]}
149+
// Disable animation ~ issue w/ LabelList. Ref: https://github.com/recharts/recharts/issues/1135
150+
isAnimationActive={false}
151+
>
152+
<LabelList
153+
position="top"
154+
fill={theme.colors.text}
155+
fontSize={14}
156+
offset={10}
157+
/>
158+
{filteredData.map((cell, index) => (
159+
<Cell key={`cell-${index}`} fill={cell.color} />
160+
))}
161+
</Bar>
162+
</BarChart>
163+
</ResponsiveContainer>
164+
</Box>
165+
</Center>
140166
)
141167
}
142168

‎src/components/EthVideo.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Box } from "@chakra-ui/react"
55
import darkVideo from "../assets/ethereum-hero-dark.mp4"
66
import lightVideo from "../assets/ethereum-hero-light.mp4"
77

8-
98
export interface IProps {
109
className?: string
1110
videoSrc?: string

0 commit comments

Comments
 (0)