Skip to content

Commit b5202bd

Browse files
AugustoLAugustoL
authored
Merge pull request #209 from MatiasOS/i18n-fixes
I18n fixes
2 parents 4c3894a + 68b235e commit b5202bd

19 files changed

Lines changed: 235 additions & 330 deletions

‎src/components/pages/evm/gastracker/index.tsx‎

Lines changed: 70 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useCallback, useContext, useEffect, useRef, useState } from "react";
2+
import { useTranslation } from "react-i18next";
23
import { useParams } from "react-router-dom";
34
import { AppContext, useNetwork } from "../../../../context/AppContext";
45
import { useDataService } from "../../../../hooks/useDataService";
@@ -11,14 +12,42 @@ const REFRESH_INTERVAL = 15000; // 15 seconds
1112

1213
// Common transaction gas estimates
1314
const TX_GAS_ESTIMATES = [
14-
{ name: "ETH Transfer", gas: 21000, description: "Native token transfer" },
15-
{ name: "ERC20 Transfer", gas: 65000, description: "Token transfer" },
16-
{ name: "ERC20 Approve", gas: 46000, description: "Token approval" },
17-
{ name: "NFT Transfer", gas: 85000, description: "ERC721 transfer" },
18-
{ name: "Swap", gas: 150000, description: "DEX swap" },
19-
{ name: "NFT Mint", gas: 120000, description: "Mint an NFT" },
20-
{ name: "Contract Deploy (Simple)", gas: 300000, description: "Deploy basic contract" },
21-
];
15+
{
16+
nameKey: "gasTracker.ethTransfer",
17+
descriptionKey: "gasTracker.ethTransferDesc",
18+
gas: 21000,
19+
},
20+
{
21+
nameKey: "gasTracker.erc20Transfer",
22+
descriptionKey: "gasTracker.erc20TransferDesc",
23+
gas: 65000,
24+
},
25+
{
26+
nameKey: "gasTracker.erc20Approve",
27+
descriptionKey: "gasTracker.erc20ApproveDesc",
28+
gas: 46000,
29+
},
30+
{
31+
nameKey: "gasTracker.nftTransfer",
32+
descriptionKey: "gasTracker.nftTransferDesc",
33+
gas: 85000,
34+
},
35+
{
36+
nameKey: "gasTracker.swap",
37+
descriptionKey: "gasTracker.swapDesc",
38+
gas: 150000,
39+
},
40+
{
41+
nameKey: "gasTracker.nftMint",
42+
descriptionKey: "gasTracker.nftMintDesc",
43+
gas: 120000,
44+
},
45+
{
46+
nameKey: "gasTracker.contractDeploy",
47+
descriptionKey: "gasTracker.contractDeployDesc",
48+
gas: 300000,
49+
},
50+
] as const;
2251

2352
interface GasTrackerData {
2453
gasPrices: GasPrices | null;
@@ -65,6 +94,7 @@ function calculateTxCost(
6594
}
6695

6796
export default function GasTracker() {
97+
const { t } = useTranslation("network");
6898
const { networkId } = useParams<{ networkId?: string }>();
6999
const numericNetworkId = Number(networkId) || 1;
70100
const networkConfig = useNetwork(numericNetworkId);
@@ -129,19 +159,17 @@ export default function GasTracker() {
129159
<div className="container-wide">
130160
<div className="block-display-card">
131161
<div className="gas-tracker-header">
132-
<h1 className="page-title-small">Gas Tracker</h1>
162+
<h1 className="page-title-small">{t("gasTracker.title")}</h1>
133163
</div>
134164

135-
{loading && !gasPrices && <Loader text="Loading gas prices..." />}
165+
{loading && !gasPrices && <Loader text={t("gasTracker.loadingGasPrices")} />}
136166

137-
{error && <p className="error-text-center">Error: {error}</p>}
167+
{error && <p className="error-text-center">{t("gasTracker.errorLoadingGas", { error })}</p>}
138168

139169
{gasPrices && (
140170
<>
141171
<section className="gas-tracker-section">
142-
<p className="gas-tracker-section-subtitle">
143-
Based on the last 20 blocks. Prices include base fee + priority fee.
144-
</p>
172+
<p className="gas-tracker-section-subtitle">{t("gasTracker.basedOnLastBlocks")}</p>
145173

146174
{(() => {
147175
const lowPrice = formatGasPrice(gasPrices.low);
@@ -153,32 +181,38 @@ export default function GasTracker() {
153181
<>
154182
<div className="gas-price-cards">
155183
<div className="gas-price-card gas-price-low">
156-
<div className="gas-price-tier-label">Low</div>
184+
<div className="gas-price-tier-label">{t("gasTracker.low")}</div>
157185
<div className="gas-price-tier-value">
158186
{lowPrice.value} {lowPrice.unit}
159187
</div>
160-
<div className="gas-price-tier-time">~5+ min</div>
188+
<div className="gas-price-tier-time">
189+
{t("gasTracker.estimatedTimeLow")}
190+
</div>
161191
</div>
162192

163193
<div className="gas-price-card gas-price-avg">
164-
<div className="gas-price-tier-label">Average</div>
194+
<div className="gas-price-tier-label">{t("gasTracker.average")}</div>
165195
<div className="gas-price-tier-value">
166196
{avgPrice.value} {avgPrice.unit}
167197
</div>
168-
<div className="gas-price-tier-time">~1-3 min</div>
198+
<div className="gas-price-tier-time">
199+
{t("gasTracker.estimatedTimeAvg")}
200+
</div>
169201
</div>
170202

171203
<div className="gas-price-card gas-price-high">
172-
<div className="gas-price-tier-label">High</div>
204+
<div className="gas-price-tier-label">{t("gasTracker.high")}</div>
173205
<div className="gas-price-tier-value">
174206
{highPrice.value} {highPrice.unit}
175207
</div>
176-
<div className="gas-price-tier-time">~30 sec</div>
208+
<div className="gas-price-tier-time">
209+
{t("gasTracker.estimatedTimeHigh")}
210+
</div>
177211
</div>
178212
</div>
179213

180214
<div className="gas-base-fee">
181-
<span className="gas-base-fee-label">Base Fee:</span>
215+
<span className="gas-base-fee-label">{t("gasTracker.baseFee")}</span>
182216
<span className="gas-base-fee-value">
183217
{baseFee.value} {baseFee.unit}
184218
</span>
@@ -189,19 +223,21 @@ export default function GasTracker() {
189223
</section>
190224

191225
<section className="gas-tracker-section">
192-
<h2 className="gas-tracker-section-title">Transaction Cost Estimates</h2>
226+
<h2 className="gas-tracker-section-title">
227+
{t("gasTracker.transactionCostEstimates")}
228+
</h2>
193229
<p className="gas-tracker-section-subtitle">
194-
Estimated costs at current gas prices
230+
{t("gasTracker.estimatedCostsAtCurrent")}
195231
{price && ` (${currency} @ $${price.toFixed(2)})`}
196232
</p>
197233

198234
<div className="tx-cost-table">
199235
<div className="tx-cost-header">
200-
<div className="tx-cost-col-name">Transaction Type</div>
201-
<div className="tx-cost-col-gas">Gas</div>
202-
<div className="tx-cost-col-low">Low</div>
203-
<div className="tx-cost-col-avg">Avg</div>
204-
<div className="tx-cost-col-high">High</div>
236+
<div className="tx-cost-col-name">{t("gasTracker.transactionType")}</div>
237+
<div className="tx-cost-col-gas">{t("gasTracker.gas")}</div>
238+
<div className="tx-cost-col-low">{t("gasTracker.low")}</div>
239+
<div className="tx-cost-col-avg">{t("gasTracker.average")}</div>
240+
<div className="tx-cost-col-high">{t("gasTracker.high")}</div>
205241
</div>
206242

207243
{TX_GAS_ESTIMATES.map((tx) => {
@@ -210,10 +246,10 @@ export default function GasTracker() {
210246
const highCost = calculateTxCost(gasPrices.high, tx.gas, price);
211247

212248
return (
213-
<div key={tx.name} className="tx-cost-row">
249+
<div key={tx.nameKey} className="tx-cost-row">
214250
<div className="tx-cost-col-name">
215-
<span className="tx-cost-name">{tx.name}</span>
216-
<span className="tx-cost-desc">{tx.description}</span>
251+
<span className="tx-cost-name">{t(tx.nameKey)}</span>
252+
<span className="tx-cost-desc">{t(tx.descriptionKey)}</span>
217253
</div>
218254
<div className="tx-cost-col-gas">{tx.gas.toLocaleString()}</div>
219255
<div className="tx-cost-col-low">
@@ -244,7 +280,9 @@ export default function GasTracker() {
244280

245281
{data.lastUpdated && (
246282
<div className="gas-tracker-updated">
247-
Last updated: {new Date(data.lastUpdated).toLocaleTimeString()}
283+
{t("gasTracker.lastUpdated", {
284+
time: new Date(data.lastUpdated).toLocaleTimeString(),
285+
})}
248286
</div>
249287
)}
250288
</div>

‎src/i18n.ts‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import enAddress from "./locales/en/address.json";
66
import enBlock from "./locales/en/block.json";
77
import enCommon from "./locales/en/common.json";
88
import enDevtools from "./locales/en/devtools.json";
9-
import enErrors from "./locales/en/errors.json";
109
import enHome from "./locales/en/home.json";
1110
import enNetwork from "./locales/en/network.json";
1211
import enSettings from "./locales/en/settings.json";
@@ -17,7 +16,6 @@ import esAddress from "./locales/es/address.json";
1716
import esBlock from "./locales/es/block.json";
1817
import esCommon from "./locales/es/common.json";
1918
import esDevtools from "./locales/es/devtools.json";
20-
import esErrors from "./locales/es/errors.json";
2119
import esHome from "./locales/es/home.json";
2220
import esNetwork from "./locales/es/network.json";
2321
import esSettings from "./locales/es/settings.json";
@@ -43,7 +41,6 @@ i18n
4341
transaction: enTransaction,
4442
devtools: enDevtools,
4543
network: enNetwork,
46-
errors: enErrors,
4744
tokenDetails: enTokenDetails,
4845
},
4946
es: {
@@ -55,23 +52,12 @@ i18n
5552
transaction: esTransaction,
5653
devtools: esDevtools,
5754
network: esNetwork,
58-
errors: esErrors,
5955
tokenDetails: esTokenDetails,
6056
},
6157
},
6258
fallbackLng: "en",
6359
defaultNS: "common",
64-
ns: [
65-
"common",
66-
"home",
67-
"settings",
68-
"address",
69-
"block",
70-
"transaction",
71-
"devtools",
72-
"network",
73-
"errors",
74-
],
60+
ns: ["common", "home", "settings", "address", "block", "transaction", "devtools", "network"],
7561
interpolation: {
7662
escapeValue: false,
7763
},

‎src/i18next.d.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type address from "./locales/en/address.json";
22
import type block from "./locales/en/block.json";
33
import type common from "./locales/en/common.json";
44
import type devtools from "./locales/en/devtools.json";
5-
import type errors from "./locales/en/errors.json";
65
import type home from "./locales/en/home.json";
76
import type network from "./locales/en/network.json";
87
import type settings from "./locales/en/settings.json";
@@ -20,7 +19,6 @@ declare module "i18next" {
2019
transaction: typeof transaction;
2120
devtools: typeof devtools;
2221
network: typeof network;
23-
errors: typeof errors;
2422
tokenDetails: typeof tokenDetails;
2523
};
2624
}

0 commit comments

Comments
 (0)