From a7daabdf70c1793796e60a8d7913812b0c4c6098 Mon Sep 17 00:00:00 2001
From: le king fu <lekingfu@protonmail.com>
Date: Sun, 3 May 2026 16:29:12 -0400
Subject: [PATCH] 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>
---
 src/components/balance/BalanceOnboardingCard.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

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