Skip to content

Commit f07d097

Browse files
corwintinescorwintines
authored
Merge pull request #14867 from JoeChenJ/Setup_layer-2/networks_for_translation
Setup layer-2/networks for translation
2 parents 06cd71e + 4037cec commit f07d097

File tree

11 files changed

+284
-170
lines changed

11 files changed

+284
-170
lines changed

‎src/components/Layer2NetworksTable/NetworkMaturityTooltip.tsx

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,43 @@ import { MaturityLevel } from "@/lib/types"
33
import Tooltip from "@/components/Tooltip"
44
import { Tag } from "@/components/ui/tag"
55

6+
import useTranslation from "@/hooks/useTranslation"
7+
68
const NetworkMaturityTooltip = ({ maturity }: { maturity: MaturityLevel }) => {
9+
const { t } = useTranslation("page-layer-2-networks")
10+
711
const maturityDescription = {
812
"n/a": {
9-
label: "N/A",
10-
description: "Not applicable to Ethereum mainnet.",
13+
label: t("page-layer-2-networks-n/a-label"),
14+
description: t("page-layer-2-networks-n/a-description"),
1115
tag: {
1216
variant: "outline",
1317
},
1418
},
1519
robust: {
16-
label: "Robust",
17-
description:
18-
"Fully decentralized and secure network that cannot be tampered with or stopped by any individual or group, including its creators.\n\nThis is a network that fulfills Ethereum's vision of decentralization.",
20+
label: t("page-layer-2-networks-robust-label"),
21+
description: t("page-layer-2-networks-robust-description"),
1922
tag: {
2023
className: "bg-blue-600 text-white border-none",
2124
},
2225
},
2326
maturing: {
24-
label: "Maturing",
25-
description:
26-
"A network transitioning to being decentralized. A group of actors still may be able to halt the network in extreme situations.",
27+
label: t("page-layer-2-networks-maturing-label"),
28+
description: t("page-layer-2-networks-maturing-description"),
2729
tag: {
2830
className: "bg-blue-400 text-white border-none",
2931
},
3032
},
3133
developing: {
32-
label: "Developing",
33-
description:
34-
"A centralized operator runs the network but adds fail-safe features to reduce risks of centralization.",
34+
label: t("page-layer-2-networks-developing-label"),
35+
description: t("page-layer-2-networks-developing-description"),
3536
tag: {
3637
className: "bg-blue-200 text-black border-none",
3738
},
3839
},
3940
emerging: {
40-
label: "Emerging",
41-
description:
42-
"A centralized operator runs the network. The data is publicly visible on Ethereum to verify whether the operator is being honest.",
41+
label: t("page-layer-2-networks-emerging-label"),
42+
description: t("page-layer-2-networks-emerging-description"),
4343
tag: {
4444
className: "bg-blue-100 text-black border-none",
4545
},
@@ -51,7 +51,8 @@ const NetworkMaturityTooltip = ({ maturity }: { maturity: MaturityLevel }) => {
5151
content={
5252
<div className="flex flex-col gap-2">
5353
<p className="text-lg font-bold">
54-
Network maturity: {maturityDescription[maturity].label}
54+
{t("page-layer-2-networks-network-maturity-with-colon")}{" "}
55+
{maturityDescription[maturity].label}
5556
</p>
5657
<p className="whitespace-pre-wrap">
5758
{maturityDescription[maturity].description}
@@ -60,7 +61,7 @@ const NetworkMaturityTooltip = ({ maturity }: { maturity: MaturityLevel }) => {
6061
}
6162
>
6263
<Tag variant="solid" {...maturityDescription[maturity].tag}>
63-
{maturity.toUpperCase()}
64+
{t(`page-layer-2-networks-${maturity}-label`).toUpperCase()}
6465
</Tag>
6566
</Tooltip>
6667
)

‎src/components/Layer2NetworksTable/NetworksNoResults.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
22

33
import { Button } from "../ui/buttons/Button"
44

5+
import useTranslation from "@/hooks/useTranslation"
6+
57
const FindWalletsNoResults = ({ resetFilters }) => {
8+
const { t } = useTranslation("page-layer-2-networks")
9+
610
// Track empty state
711
trackCustomEvent({
812
eventCategory: "Wallet_empty_state",
@@ -22,12 +26,12 @@ const FindWalletsNoResults = ({ resetFilters }) => {
2226
return (
2327
<div className="m-24 border-2 border-dashed border-body-light">
2428
<div className="p-12">
25-
<h3 className="mb-6 text-3xl font-normal">No results</h3>
26-
<p>
27-
There are no networks matching your criteria, try adding some filters
28-
</p>
29+
<h3 className="mb-6 text-3xl font-normal">
30+
{t("page-layer-2-networks-no-results-title")}
31+
</h3>
32+
<p>{t("page-layer-2-networks-no-results-description")}</p>
2933
<Button variant="ghost" onClick={handleClick}>
30-
Reset filters
34+
{t("page-layer-2-networks-reset-filters")}
3135
</Button>
3236
</div>
3337
</div>

‎src/components/Layer2NetworksTable/NetworksSubComponent.tsx

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Tooltip from "@/components/Tooltip"
66
import { ButtonLink } from "../ui/buttons/Button"
77
import InlineLink from "../ui/Link"
88

9+
import useTranslation from "@/hooks/useTranslation"
10+
911
const formatNumber = (num: number): string => {
1012
if (num >= 1e9) {
1113
return (num / 1e9).toFixed(2) + "B"
@@ -20,6 +22,8 @@ const formatNumber = (num: number): string => {
2022
}
2123

2224
const NetworkSubComponent = ({ network }) => {
25+
const { t } = useTranslation("page-layer-2-networks")
26+
2327
return (
2428
<div className="flex w-full flex-col gap-4 px-6 pb-4">
2529
<div className="flex flex-col gap-8 md:flex-row">
@@ -28,18 +32,20 @@ const NetworkSubComponent = ({ network }) => {
2832
<div className="flex-1">
2933
<div>
3034
<p className="text-xs font-bold text-body-medium">
31-
Age{" "}
35+
{t("page-layer-2-networks-age")}{" "}
3236
<Tooltip
3337
content={
3438
<div className="flex flex-col gap-2">
35-
<p className="text-lg font-bold">Age</p>
36-
<p>Shows how long the networks has been operational.</p>
39+
<p className="text-lg font-bold">
40+
{t("page-layer-2-networks-age")}
41+
</p>
42+
<p>{t("page-layer-2-networks-show-how-long")}</p>
3743
<p>
38-
Data from{" "}
44+
{t("page-layer-2-networks-data-from")}{" "}
3945
<InlineLink href="https://growthepie.xyz">
4046
growthepie
4147
</InlineLink>
42-
.
48+
{t("page-layer-2-networks-period")}
4349
</p>
4450
</div>
4551
}
@@ -71,14 +77,15 @@ const NetworkSubComponent = ({ network }) => {
7177
<div className="flex-1">
7278
<div>
7379
<p className="text-xs font-bold text-body-medium">
74-
Wallet support{" "}
80+
{t("page-layer-2-networks-wallet-support")}{" "}
7581
<Tooltip
7682
content={
7783
<div className="flex flex-col gap-2">
78-
<p className="text-lg font-bold">Wallet support</p>
84+
<p className="text-lg font-bold">
85+
{t("page-layer-2-networks-wallet-support")}
86+
</p>
7987
<p>
80-
Indicates how many wallet apps support using the
81-
network.
88+
{t("page-layer-2-networks-how-many-wallet-support")}
8289
</p>
8390
</div>
8491
}
@@ -105,23 +112,22 @@ const NetworkSubComponent = ({ network }) => {
105112
<div className="flex-1">
106113
<div>
107114
<p className="text-xs font-bold text-body-medium">
108-
Active addresses{" "}
115+
{t("page-layer-2-networks-active-address")}{" "}
109116
<Tooltip
110117
content={
111118
<div className="flex flex-col gap-2">
112119
<p className="text-lg font-bold">
113-
Active addresses (weekly)
120+
{t("page-layer-2-networks-active-address-weekly")}
114121
</p>
115122
<p>
116-
Number of active addresses on the network in the past
117-
7 days.
123+
{t("page-layer-2-networks-active-address-number")}
118124
</p>
119125
<p>
120-
Data from{" "}
126+
{t("page-layer-2-networks-data-from")}{" "}
121127
<InlineLink href="https://growthepie.xyz">
122128
growthepie
123129
</InlineLink>
124-
.
130+
{t("page-layer-2-networks-period")}
125131
</p>
126132
</div>
127133
}
@@ -140,15 +146,12 @@ const NetworkSubComponent = ({ network }) => {
140146
<div className="flex-1">
141147
<div>
142148
<p className="text-xs font-bold text-body-medium">
143-
Fee token{" "}
149+
{t("page-layer-2-networks-fee-token")}{" "}
144150
<Tooltip
145151
content={
146152
<div className="flex flex-col gap-2">
147153
<p className="text-lg font-bold">Fee token</p>
148-
<p>
149-
The token that is used to pay for transactions and
150-
using the network.
151-
</p>
154+
<p>{t("page-layer-2-networks-token-used-to-pay")}</p>
152155
</div>
153156
}
154157
customMatomoEvent={{
@@ -168,21 +171,20 @@ const NetworkSubComponent = ({ network }) => {
168171
<div className="flex-1 gap-2">
169172
<div>
170173
<p className="text-xs font-bold text-body-medium">
171-
Network usage{" "}
174+
{t("page-layer-2-networks-network-usage")}{" "}
172175
<Tooltip
173176
content={
174177
<div className="flex flex-col gap-2">
175-
<p className="text-lg font-bold">Network usage</p>
176-
<p>
177-
An overview of network usage. Measures transaction count
178-
in respective areas within the last 30 days.
178+
<p className="text-lg font-bold">
179+
{t("page-layer-2-networks-network-usage")}
179180
</p>
181+
<p>{t("page-layer-2-networks-network-usage-overview")}</p>
180182
<p>
181-
Data from{" "}
183+
{t("page-layer-2-networks-data-from")}{" "}
182184
<InlineLink href="https://growthepie.xyz">
183185
growthepie
184186
</InlineLink>
185-
.
187+
{t("page-layer-2-networks-period")}
186188
</p>
187189
</div>
188190
}
@@ -196,7 +198,7 @@ const NetworkSubComponent = ({ network }) => {
196198
)}
197199
{network.blockspaceData === null && (
198200
<div className="flex h-20 w-full items-center justify-center">
199-
<p>No data available</p>
201+
<p>{t("page-layer-2-networks-no-data-available")}</p>
200202
</div>
201203
)}
202204
</div>
@@ -205,7 +207,9 @@ const NetworkSubComponent = ({ network }) => {
205207
</div>
206208
<div className="flex flex-col gap-6 p-4">
207209
<div className="flex flex-col gap-1">
208-
<p className="text-xs text-body-medium">Links</p>
210+
<p className="text-xs text-body-medium">
211+
{t("page-layer-2-networks-links")}
212+
</p>
209213
<div className="flex flex-col gap-4">
210214
<div>
211215
<InlineLink
@@ -216,7 +220,7 @@ const NetworkSubComponent = ({ network }) => {
216220
eventName: network.name,
217221
}}
218222
>
219-
Official website
223+
{t("page-layer-2-networks-official-website")}
220224
</InlineLink>
221225
</div>
222226
<div className="flex flex-col gap-0.5">
@@ -229,10 +233,12 @@ const NetworkSubComponent = ({ network }) => {
229233
eventName: network.name,
230234
}}
231235
>
232-
Risk analysis
236+
{t("page-layer-2-networks-risk-analysis")}
233237
</InlineLink>
234238
</div>
235-
<p className="text-xs text-body-medium">Assessment by L2BEAT</p>
239+
<p className="text-xs text-body-medium">
240+
{t("page-layer-2-networks-assessment-by-l2beat")}
241+
</p>
236242
</div>
237243
<div className="flex flex-col gap-0.5">
238244
<div>
@@ -244,11 +250,11 @@ const NetworkSubComponent = ({ network }) => {
244250
eventName: network.name,
245251
}}
246252
>
247-
Detailed analytics
253+
{t("page-layer-2-networks-detailed-analytics")}
248254
</InlineLink>
249255
</div>
250256
<p className="text-xs text-body-medium">
251-
Assessment by growthepie
257+
{t("page-layer-2-networks-assessment-by-growthepie")}
252258
</p>
253259
</div>
254260
</div>
@@ -264,7 +270,7 @@ const NetworkSubComponent = ({ network }) => {
264270
eventName: network.name,
265271
}}
266272
>
267-
Bridge to {network.name}
273+
{t("page-layer-2-networks-bridge-to")} {network.name}
268274
</ButtonLink>
269275
<ButtonLink
270276
href={network.applicationsLink}
@@ -275,7 +281,7 @@ const NetworkSubComponent = ({ network }) => {
275281
eventName: network.name,
276282
}}
277283
>
278-
View apps
284+
{t("page-layer-2-networks-view-apps")}
279285
</ButtonLink>
280286
</div>
281287
</div>

‎src/components/Layer2NetworksTable/NetworksWalletSelectInput.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import {
1313

1414
import { walletsData } from "@/data/wallets/wallet-data"
1515

16+
import useTranslation from "@/hooks/useTranslation"
17+
1618
interface NetworksWalletSelectInputProps {
1719
filterIndex: number
1820
itemIndex: number
@@ -31,6 +33,7 @@ const NetworksWalletSelectInput = ({
3133
updateFilterState,
3234
}: NetworksWalletSelectInputProps) => {
3335
const [searchQuery, setSearchQuery] = useState("")
36+
const { t } = useTranslation("page-layer-2-networks")
3437

3538
const filteredWallets = walletsData
3639
.filter((wallet) =>
@@ -48,7 +51,7 @@ const NetworksWalletSelectInput = ({
4851
}}
4952
>
5053
<SelectTrigger className="w-full">
51-
<SelectValue placeholder="Select wallet" />
54+
<SelectValue placeholder={t("page-layer-2-networks-select-wallet")} />
5255
</SelectTrigger>
5356
<SelectContent
5457
position="popper"
@@ -63,7 +66,7 @@ const NetworksWalletSelectInput = ({
6366
>
6467
<Input
6568
type="search"
66-
placeholder="Search wallets..."
69+
placeholder={t("page-layer-2-networks-search-wallets")}
6770
value={searchQuery}
6871
onChange={(e) => setSearchQuery(e.target.value)}
6972
className="w-full"
@@ -77,7 +80,7 @@ const NetworksWalletSelectInput = ({
7780
))
7881
) : (
7982
<div className="p-2 text-center text-body-medium">
80-
No wallets found
83+
{t("page-layer-2-networks-no-wallet-found")}
8184
</div>
8285
)}
8386
</SelectContent>

0 commit comments

Comments
 (0)