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

@@ -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";