Skip to content

Commit bb42155

Browse files
wackerowwackerow
committed
Merge branch 'dev' into translation-banner-logic
2 parents 9dea2a1 + aac0b3c commit bb42155

17 files changed

+397
-355
lines changed

‎src/components/Staking/StakingStatsBox.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useTranslation } from "next-i18next"
33
import { MdInfoOutline } from "react-icons/md"
44
import { Code, Flex, Icon, VStack } from "@chakra-ui/react"
55

6-
import type { BeaconchainData, ChildOnlyProp, Lang } from "@/lib/types"
6+
import type { ChildOnlyProp, Lang, StakingStatsData } from "@/lib/types"
77

88
import InlineLink from "@/components/Link"
99
import Text from "@/components/OldText"
@@ -64,7 +64,7 @@ const BeaconchainTooltip = ({ children }: ChildOnlyProp) => (
6464

6565
// StatsBox component
6666
type StakingStatsBoxProps = {
67-
data: BeaconchainData
67+
data: StakingStatsData
6868
}
6969
const StakingStatsBox = ({ data }: StakingStatsBoxProps) => {
7070
const { locale } = useRouter()

‎src/components/StatErrorMessage.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import React from "react"
2-
import { TextProps } from "@chakra-ui/react"
1+
import type { TextProps } from "@chakra-ui/react"
32

43
import Text from "./OldText"
54
import Translation from "./Translation"
65

7-
export interface IProps extends TextProps {}
8-
9-
const StatErrorMessage: React.FC<IProps> = (props) => (
6+
const StatErrorMessage = (props: TextProps) => (
107
<Text as="span" fontSize="2rem" {...props}>
118
<Translation id="loading-error-refresh" />
129
</Text>

‎src/components/StatLoadingMessage.tsx

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/components/StatsBoxGrid/GridItem.tsx

Lines changed: 48 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,36 @@
1-
import React from "react"
21
import { kebabCase } from "lodash"
32
import { MdInfoOutline } from "react-icons/md"
43
import { Area, AreaChart, ResponsiveContainer, XAxis, YAxis } from "recharts"
5-
import { Box, Flex, Icon, Text,VStack } from "@chakra-ui/react"
4+
import { Box, Flex, Icon, Text, VStack } from "@chakra-ui/react"
5+
6+
import type { StatsBoxMetric } from "@/lib/types"
7+
8+
import { RANGES } from "@/lib/constants"
69

7-
import { Direction } from "../../types"
810
import InlineLink from "../Link"
911
import OldText from "../OldText"
1012
import StatErrorMessage from "../StatErrorMessage"
11-
import StatLoadingMessage from "../StatLoadingMessage"
1213
import Tooltip from "../Tooltip"
1314
import Translation from "../Translation"
1415

15-
import { Metric, ranges } from "./useStatsBoxGrid"
16-
17-
const tooltipContent = (metric: Metric) => (
16+
const tooltipContent = (metric: StatsBoxMetric) => (
1817
<div>
1918
<Translation id="data-provided-by" />{" "}
2019
<InlineLink to={metric.apiUrl}>{metric.apiProvider}</InlineLink>
2120
</div>
2221
)
2322

24-
interface IGridItemProps {
25-
metric: Metric
26-
dir?: Direction
23+
type GridItemProps = {
24+
metric: StatsBoxMetric
2725
}
2826

29-
export const GridItem: React.FC<IGridItemProps> = ({ metric, dir }) => {
27+
export const GridItem = ({ metric }: GridItemProps) => {
3028
const { title, description, state, buttonContainer, range } = metric
31-
const isLoading = !state.value
32-
const value = state.hasError ? (
29+
const hasError = "error" in state
30+
const hasData = "data" in state
31+
32+
const value = hasError ? (
3333
<StatErrorMessage />
34-
) : isLoading ? (
35-
<StatLoadingMessage />
3634
) : (
3735
<VStack>
3836
<Box>
@@ -46,7 +44,7 @@ export const GridItem: React.FC<IGridItemProps> = ({ metric, dir }) => {
4644
_hover={{ fill: "primary.base" }}
4745
_active={{ fill: "primary.base" }}
4846
_focus={{ fill: "primary.base" }}
49-
></Icon>
47+
/>
5048
</Tooltip>
5149
</Box>
5250
</VStack>
@@ -55,29 +53,30 @@ export const GridItem: React.FC<IGridItemProps> = ({ metric, dir }) => {
5553
// Returns either 90 or 30-day data range depending on `range` selection
5654
const filteredData = (data: Array<{ timestamp: number }>) => {
5755
if (!data) return
58-
if (range === ranges[1]) return [...data]
56+
if (range === RANGES[1]) return [...data]
5957
return data.filter(({ timestamp }) => {
6058
const millisecondRange = 1000 * 60 * 60 * 24 * 30
6159
const now = new Date().getTime()
6260
return timestamp >= now - millisecondRange
6361
})
6462
}
6563

66-
const minValue = state.data.reduce(
67-
(prev, { value }) => (prev < value ? prev : value),
68-
1e42
69-
)
64+
const minValue = hasData
65+
? state.data.reduce(
66+
(prev, { value }) => (prev < value ? prev : value),
67+
Infinity
68+
)
69+
: 0
7070

71-
const maxValue = state.data.reduce(
72-
(prev, { value }) => (prev > value ? prev : value),
73-
0
74-
)
71+
const maxValue = hasData
72+
? state.data.reduce((prev, { value }) => (prev > value ? prev : value), 0)
73+
: 0
7574

7675
const chart: React.ReactNode = (
7776
<ResponsiveContainer width="100%" height="100%">
7877
<AreaChart
79-
data={filteredData(state.data)}
80-
margin={{ insetInlineStart: -5, insetInlineEnd: -5 }}
78+
data={hasData ? filteredData(state.data) : []}
79+
margin={{ left: -5, right: -5 }}
8180
>
8281
<defs>
8382
<linearGradient
@@ -122,7 +121,6 @@ export const GridItem: React.FC<IGridItemProps> = ({ metric, dir }) => {
122121
height={80}
123122
flexDirection="column"
124123
justifyContent="space-between"
125-
alignItems="flex-start"
126124
borderX={{
127125
base: "0px solid #000000",
128126
lg: "1px solid",
@@ -146,52 +144,29 @@ export const GridItem: React.FC<IGridItemProps> = ({ metric, dir }) => {
146144
</Text>
147145
<OldText>{description}</OldText>
148146
</Box>
149-
{!state.hasError && !isLoading && (
150-
<>
151-
<Box
152-
position="absolute"
153-
insetInlineStart={0}
154-
bottom={0}
155-
width="100%"
156-
height="65%"
157-
>
158-
{chart}
159-
</Box>
160-
{dir === "rtl" ? (
161-
<Box
162-
position="absolute"
163-
bottom="20px"
164-
fontFamily="monospace"
165-
insetInlineStart="20px"
166-
>
167-
{buttonContainer}
168-
</Box>
169-
) : (
170-
<Box
171-
position="absolute"
172-
bottom="20px"
173-
fontFamily="monospace"
174-
insetInlineEnd="20px"
175-
>
176-
{buttonContainer}
177-
</Box>
178-
)}
179-
</>
147+
{hasData && (
148+
<Box position="absolute" insetInline="0" bottom={0} height="65%">
149+
{chart}
150+
</Box>
180151
)}
181-
<Box
182-
position="absolute"
183-
bottom="8%"
184-
fontSize={{ base: "max(8.8vw, 48px)", lg: "min(4.4vw, 4rem)" }}
185-
fontWeight={600}
186-
marginTop={0}
187-
marginBottom={4}
188-
color="text"
189-
flexWrap="wrap"
190-
textOverflow="ellipsis"
191-
lineHeight="1.6rem"
192-
>
193-
{value}
194-
</Box>
152+
<Flex justifyContent="space-between">
153+
<Box
154+
fontSize={{ base: "max(8.8vw, 48px)", lg: "min(4.4vw, 4rem)" }}
155+
fontWeight={600}
156+
color="text"
157+
flexWrap="wrap"
158+
textOverflow="ellipsis"
159+
lineHeight="1.6rem"
160+
mb="2"
161+
>
162+
{value}
163+
</Box>
164+
{hasData && (
165+
<Box fontFamily="monospace" me="-1" mb="-1">
166+
{buttonContainer}
167+
</Box>
168+
)}
169+
</Flex>
195170
</Flex>
196171
)
197172
}

‎src/components/StatsBoxGrid/RangeSelector.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import React from "react"
21
import { Button } from "@chakra-ui/react"
32

4-
import { MatomoEventOptions, trackCustomEvent } from "../../utils/matomo"
3+
import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
54

6-
import { ranges } from "./useStatsBoxGrid"
5+
import { RANGES } from "@/lib/constants"
76

87
interface IRangeSelectorProps {
98
state: string
@@ -17,10 +16,10 @@ export const RangeSelector: React.FC<IRangeSelectorProps> = ({
1716
matomo,
1817
}) => (
1918
<div>
20-
{ranges.map((range, idx) => (
19+
{RANGES.map((range, idx) => (
2120
<Button
2221
onClick={() => {
23-
setState(ranges[idx])
22+
setState(RANGES[idx])
2423
trackCustomEvent(matomo)
2524
}}
2625
key={idx}
@@ -40,7 +39,7 @@ export const RangeSelector: React.FC<IRangeSelectorProps> = ({
4039
opacity: "0.7",
4140
}}
4241
size="sm"
43-
backgroundColor={state === ranges[idx] ? "homeBoxPurple" : ""}
42+
backgroundColor={state === RANGES[idx] ? "homeBoxPurple" : ""}
4443
>
4544
{range}
4645
</Button>

‎src/components/StatsBoxGrid/index.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import React from "react"
21
import { SimpleGrid } from "@chakra-ui/react"
32

3+
import type { AllMetricData, MetricReturnData } from "@/lib/types"
4+
45
import { GridItem } from "./GridItem"
56
import { useStatsBoxGrid } from "./useStatsBoxGrid"
67

7-
export interface IProps {}
8-
9-
const StatsBoxGrid: React.FC<IProps> = () => {
10-
const { metrics } = useStatsBoxGrid()
8+
type StatsBoxGridProps = {
9+
data: AllMetricData
10+
}
1111

12+
const StatsBoxGrid = ({ data }: StatsBoxGridProps) => {
13+
const metrics = useStatsBoxGrid(data)
1214
return (
1315
<SimpleGrid
1416
columns={{ base: 1, lg: 2 }}

0 commit comments

Comments
 (0)