refactor(balance): use useTranslation directly in BalanceOnboardingCard.Step (S5)

The internal Step component received `t: TFunction` as a prop while every
other component in the codebase calls useTranslation() directly at the
top of the function. Aligns with the majority pattern.

Suggestion S5 from PR #184 review (#187).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
le king fu 2026-05-03 16:29:12 -04:00
parent 372a785834
commit a7daabdf70

View file

@ -16,7 +16,6 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import type { TFunction } from "i18next";
import { Wallet, FileText, Check, ArrowRight } from "lucide-react"; import { Wallet, FileText, Check, ArrowRight } from "lucide-react";
interface BalanceOnboardingCardProps { interface BalanceOnboardingCardProps {
@ -81,7 +80,6 @@ export default function BalanceOnboardingCard({
description={t("balance.onboarding.step1.description")} description={t("balance.onboarding.step1.description")}
ctaLabel={t("balance.onboarding.step1.cta")} ctaLabel={t("balance.onboarding.step1.cta")}
ctaHref="/balance/accounts" ctaHref="/balance/accounts"
t={t}
/> />
<Step <Step
number={2} number={2}
@ -92,7 +90,6 @@ export default function BalanceOnboardingCard({
ctaLabel={t("balance.onboarding.step2.cta")} ctaLabel={t("balance.onboarding.step2.cta")}
ctaHref="/balance/snapshot" ctaHref="/balance/snapshot"
disabledHint={t("balance.onboarding.step2.disabledHint")} disabledHint={t("balance.onboarding.step2.disabledHint")}
t={t}
/> />
</ol> </ol>
</div> </div>
@ -112,7 +109,6 @@ interface StepProps {
ctaLabel: string; ctaLabel: string;
ctaHref: string; ctaHref: string;
disabledHint?: string; disabledHint?: string;
t: TFunction;
} }
function Step({ function Step({
@ -124,8 +120,8 @@ function Step({
ctaLabel, ctaLabel,
ctaHref, ctaHref,
disabledHint, disabledHint,
t,
}: StepProps) { }: StepProps) {
const { t } = useTranslation();
const isDone = state === "done"; const isDone = state === "done";
const isActive = state === "active"; const isActive = state === "active";
const isDisabled = state === "disabled"; const isDisabled = state === "disabled";