@block-auth.io/angular 0.1.1 → 0.1.2

package/.turbo/turbo-typecheck.log

@@ -1,4 +1,19 @@
-
-> @block-auth.io/angular@0.1.0 typecheck /home/wenqi/Documents/blockauthio/blockauth-sdk/packages/angular
-> tsc -p tsconfig.lib.json --noEmit
-
+
+> @block-auth.io/angular@0.1.2 pretypecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> pnpm build:css
+
+
+> @block-auth.io/angular@0.1.2 build:css /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> tailwindcss -i ../ui-styles/src/input.css -c ./tailwind.config.cjs -o ./src/styles.generated.css --minify && node scripts/css-to-ts.mjs
+
+Browserslist: caniuse-lite is outdated. Please run:
+  npx update-browserslist-db@latest
+  Why you should do it regularly: https://github.com/browserslist/update-db#readme
+
+Rebuilding...
+
+Done in 1039ms.
+
+> @block-auth.io/angular@0.1.2 typecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> tsc -p tsconfig.lib.json --noEmit
+

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @block-auth.io/angular
 
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @block-auth.io/core@0.4.1
+
 ## 0.1.1
 
 ### Patch Changes

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@block-auth.io/angular",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "dependencies": {
     "nanostores": "^0.10.0",
     "tslib": "^2.6.0",
-    "@block-auth.io/core": "0.4.0",
+    "@block-auth.io/core": "0.4.1",
     "@block-auth.io/ui-styles": "0.4.0"
   },
   "peerDependencies": {

package/src/lib/components/txns/internals/permissions-required-modal.component.test.ts

@@ -1,14 +1,27 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, afterEach } from 'vitest';
 import { render, screen } from '@testing-library/angular';
+import { setLocale } from '@block-auth.io/core';
 import { PermissionsRequiredModalComponent } from './permissions-required-modal.component';
 
 // Port de packages/react/src/components/txns/internals/PermissionsRequiredModal.test.tsx
 // (mapa: packages/vue/.../PermissionsRequiredModal.test.ts).
 describe('PermissionsRequiredModal', () => {
+  afterEach(() => setLocale('en'));
+
   it('renderiza el modal de permisos requeridos', async () => {
     await render(PermissionsRequiredModalComponent);
     expect(screen.getByText('Temporal access to identity')).toBeDefined();
-    expect(screen.getByText('Access to the list of authorised apps')).toBeDefined();
-    expect(screen.getByText('Only this transaction will be signed')).toBeDefined();
+    expect(
+      screen.getByText('Access to the list of authorised apps'),
+    ).toBeDefined();
+    expect(
+      screen.getByText('Only this transaction will be signed'),
+    ).toBeDefined();
+  });
+
+  it('respeta el locale activo', async () => {
+    setLocale('es');
+    await render(PermissionsRequiredModalComponent);
+    expect(screen.getByText('Acceso temporal a tu identidad')).toBeDefined();
   });
 });

package/src/lib/components/txns/internals/permissions-required-modal.component.ts

@@ -1,14 +1,10 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { $locale, t as translate, type TextKey } from '@block-auth.io/core';
+import { injectStore } from '../../../inject-store';
 
 // Port literal de packages/react/src/components/txns/internals/PermissionsRequiredModal.tsx
-// (mapa: packages/vue/.../PermissionsRequiredModal.vue). Sin props/outputs, sin
-// lógica de core: solo itera un array fijo de permisos.
+// (mapa: packages/vue/.../PermissionsRequiredModal.vue). Sin props/outputs.
 const iconClassNames = 'bas-w-6 bas-h-6 bas-text-[#009F6B]';
-const requiredPermissions = [
-  { message: 'Temporal access to identity', icon: '👤' },
-  { message: 'Access to the list of authorised apps', icon: '📝' },
-  { message: 'Only this transaction will be signed', icon: '🔄' },
-];
 
 @Component({
   selector: 'ba-permissions-required-modal',
@@ -18,18 +14,30 @@ const requiredPermissions = [
     <div
       class="bal-ba-transition-2 bas-box-border bas-grid bas-w-[334px] bas-grid-rows-3 bas-gap-3 bas-rounded-md bas-border-2 bas-border-solid bas-border-[var(--bal-primary-100)] bas-bg-[var(--bal-primary-10)] bas-py-4 bas-pl-3 hover:bas-border-[var(--bal-primary-300)]"
     >
-      @for (permission of requiredPermissions; track $index) {
-        <div class="bas-flex bas-flex-row bas-items-center bas-gap-2">
-          <span [class]="iconClassNames" aria-hidden="true">{{ permission.icon }}</span>
-          <p class="bas-m-0 bas-text-start bas-text-base bas-text-[var(--bal-primary-800)]">
-            {{ permission.message }}
-          </p>
-        </div>
+      @for (permission of requiredPermissions(); track $index) {
+      <div class="bas-flex bas-flex-row bas-items-center bas-gap-2">
+        <span [class]="iconClassNames" aria-hidden="true">{{
+          permission.icon
+        }}</span>
+        <p
+          class="bas-m-0 bas-text-start bas-text-base bas-text-[var(--bal-primary-800)]"
+        >
+          {{ permission.message }}
+        </p>
+      </div>
       }
     </div>
   `,
 })
 export class PermissionsRequiredModalComponent {
   protected readonly iconClassNames = iconClassNames;
-  protected readonly requiredPermissions = requiredPermissions;
+
+  private readonly locale = injectStore($locale);
+  protected t = (key: TextKey): string => translate(key, this.locale());
+
+  protected readonly requiredPermissions = computed(() => [
+    { message: this.t('permTemporalIdentity'), icon: '👤' },
+    { message: this.t('permAuthorisedApps'), icon: '📝' },
+    { message: this.t('permOnlyThisTxn'), icon: '🔄' },
+  ]);
 }

package/src/lib/components/txns/internals/solicited-data-modal.component.test.ts

@@ -1,16 +1,25 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, afterEach } from 'vitest';
 import { Component } from '@angular/core';
 import { render, screen, fireEvent } from '@testing-library/angular';
-import { SolicitedDataModalComponent, type ParamChange } from './solicited-data-modal.component';
+import { setLocale } from '@block-auth.io/core';
+import {
+  SolicitedDataModalComponent,
+  type ParamChange,
+} from './solicited-data-modal.component';
 
 // Port de packages/react/src/components/txns/internals/SolicitedDataModal.test.tsx
 // (mapa: packages/vue/.../SolicitedDataModal.test.ts). Presentacional, sin client.
 describe('SolicitedDataModal', () => {
+  afterEach(() => setLocale('en'));
+
   it('renderiza el modal de datos solicitados con campos requeridos y opcionales', async () => {
     @Component({
       standalone: true,
       imports: [SolicitedDataModalComponent],
-      template: `<ba-solicited-data-modal [requiredParams]="['users-email']" [optionalParams]="['users-phone']" />`,
+      template: `<ba-solicited-data-modal
+        [requiredParams]="['users-email']"
+        [optionalParams]="['users-phone']"
+      />`,
     })
     class Host {}
     await render(Host);
@@ -18,6 +27,24 @@ describe('SolicitedDataModal', () => {
     expect(screen.getByText('Phone')).toBeDefined();
   });
 
+  it('respeta el locale activo', async () => {
+    setLocale('es');
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [requiredParams]="['users-email']"
+        [optionalParams]="['users-phone']"
+      />`,
+    })
+    class Host {}
+    await render(Host);
+    expect(screen.getByText('Correo electrónico')).toBeDefined();
+    expect(screen.getByText('Teléfono')).toBeDefined();
+    expect(screen.getByText('Requerido')).toBeDefined();
+    expect(screen.getByText('Opcional')).toBeDefined();
+  });
+
   it('emite paramChange al escribir y validationChange según validez', async () => {
     const paramChanges: ParamChange[] = [];
     const validationChanges: boolean[] = [];
@@ -44,7 +71,10 @@ describe('SolicitedDataModal', () => {
 
     const input = screen.getByRole('textbox');
     await fireEvent.input(input, { target: { value: 'not-an-email' } });
-    expect(paramChanges[paramChanges.length - 1]).toEqual({ slug: 'users-email', value: 'not-an-email' });
+    expect(paramChanges[paramChanges.length - 1]).toEqual({
+      slug: 'users-email',
+      value: 'not-an-email',
+    });
 
     fixture.componentInstance.vals = { 'users-email': 'a@b.com' };
     fixture.detectChanges();
@@ -67,6 +97,8 @@ describe('SolicitedDataModal', () => {
     await render(Host);
     const input = screen.getByRole('textbox');
     await fireEvent.blur(input);
-    expect(screen.getByText('Enter a valid email (e.g. name@domain.com)')).toBeDefined();
+    expect(
+      screen.getByText('Enter a valid email (e.g. name@domain.com)'),
+    ).toBeDefined();
   });
 });

package/src/lib/components/txns/internals/solicited-data-modal.component.ts

@@ -7,6 +7,8 @@ import {
   output,
   signal,
 } from '@angular/core';
+import { $locale, t as translate, type TextKey } from '@block-auth.io/core';
+import { injectStore } from '../../../inject-store';
 
 // `handleParamChange`/`onValidationChange` (callback props en react) -> outputs
 // `paramChange`/`validationChange`: notificaciones puras de "algo cambió en la
@@ -22,13 +24,12 @@ export interface ParamChange {
   value: string;
 }
 
-const PARAM_LABELS: Record<string, string> = {
-  'modules-kyc': 'KYC',
-  'users-firstname': 'First Name',
-  'users-lastname': 'Last Name',
-  'users-secondlastname': 'Second Last Name',
-  'users-email': 'Email',
-  'users-phone': 'Phone',
+const PARAM_LABEL_KEYS: Record<string, TextKey> = {
+  'users-firstname': 'firstName',
+  'users-lastname': 'lastName',
+  'users-secondlastname': 'secondLastName',
+  'users-email': 'email',
+  'users-phone': 'phone',
 };
 
 const PARAM_DISPLAY_ORDER = [
@@ -56,12 +57,12 @@ const PARAM_VALIDATORS: Record<string, (v: string) => boolean> = {
   'users-phone': (v) => /^\+?[\d\s\-().]{6,20}$/.test(v.trim()),
 };
 
-const PARAM_ERROR_MSG: Record<string, string> = {
-  'users-firstname': 'Only letters and spaces allowed',
-  'users-lastname': 'Only letters and spaces allowed',
-  'users-secondlastname': 'Only letters and spaces allowed',
-  'users-email': 'Enter a valid email (e.g. name@domain.com)',
-  'users-phone': 'Enter a valid phone number',
+const PARAM_ERROR_KEYS: Record<string, TextKey> = {
+  'users-firstname': 'onlyLettersAllowed',
+  'users-lastname': 'onlyLettersAllowed',
+  'users-secondlastname': 'onlyLettersAllowed',
+  'users-email': 'enterValidEmail',
+  'users-phone': 'enterValidPhone',
 };
 
 @Component({
@@ -73,54 +74,66 @@ const PARAM_ERROR_MSG: Record<string, string> = {
       class="bal-ba-transition-2 bas-box-border bas-flex bas-w-[334px] bas-flex-col bas-gap-3 bas-rounded-md bas-border-2 bas-border-solid bas-border-[var(--bal-primary-100)] bas-bg-[var(--bal-primary-10)] bas-px-4 bas-py-4 hover:bas-border-[var(--bal-primary-300)]"
     >
       @for (slug of visibleParams(); track slug) {
-        <div class="bas-flex bas-flex-col bas-gap-1">
-          <div class="bas-flex bas-items-center bas-justify-between">
-            <label class="bas-text-xs bas-font-medium bas-text-slate-600">{{ label(slug) }}</label>
-            <span
-              style="font-size: 10px"
-              [class]="
-                'bas-rounded bas-px-1 bas-py-px bas-font-bold bas-uppercase bas-tracking-wide ' +
-                (isRequired(slug)
-                  ? 'bas-bg-amber-100 bas-text-amber-600'
-                  : 'bas-bg-slate-100 bas-text-slate-400')
-              "
-            >
-              {{ isRequired(slug) ? requiredLabelTxt() : optionalLabelTxt() }}
-            </span>
-          </div>
-          <div class="bas-relative">
-            <input
-              [type]="inputType(slug)"
-              [value]="valueOf(slug)"
-              [class]="
-                'bas-w-full bas-rounded bas-border bas-bg-white bas-px-2 bas-py-1 bas-text-sm bas-text-slate-700 bas-outline-none bas-transition-colors ' +
-                (errorOf(slug)
-                  ? 'bas-border-red-400 bas-pr-7 focus:bas-border-red-500'
-                  : 'bas-border-slate-300 focus:bas-border-[var(--bal-primary-500)]')
-              "
-              (input)="onInput(slug, $event)"
-              (blur)="onBlur(slug)"
-            />
-            @if (errorOf(slug)) {
-              <svg
-                class="bas-absolute bas-right-2 bas-top-1/2 bas-h-4 bas-w-4 -bas-translate-y-1/2 bas-text-red-500"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path d="M12 2 1 21h22L12 2Zm0 6c.55 0 1 .45 1 1v5a1 1 0 1 1-2 0V9c0-.55.45-1 1-1Zm0 9.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z" />
-              </svg>
-            }
-          </div>
+      <div class="bas-flex bas-flex-col bas-gap-1">
+        <div class="bas-flex bas-items-center bas-justify-between">
+          <label class="bas-text-xs bas-font-medium bas-text-slate-600">{{
+            label(slug)
+          }}</label>
+          <span
+            style="font-size: 10px"
+            [class]="
+              'bas-rounded bas-px-1 bas-py-px bas-font-bold bas-uppercase bas-tracking-wide ' +
+              (isRequired(slug)
+                ? 'bas-bg-amber-100 bas-text-amber-600'
+                : 'bas-bg-slate-100 bas-text-slate-400')
+            "
+          >
+            {{
+              isRequired(slug)
+                ? requiredLabelTxtResolved()
+                : optionalLabelTxtResolved()
+            }}
+          </span>
+        </div>
+        <div class="bas-relative">
+          <input
+            [type]="inputType(slug)"
+            [value]="valueOf(slug)"
+            [class]="
+              'bas-w-full bas-rounded bas-border bas-bg-white bas-px-2 bas-py-1 bas-text-sm bas-text-slate-700 bas-outline-none bas-transition-colors ' +
+              (errorOf(slug)
+                ? 'bas-border-red-400 bas-pr-7 focus:bas-border-red-500'
+                : 'bas-border-slate-300 focus:bas-border-[var(--bal-primary-500)]')
+            "
+            (input)="onInput(slug, $event)"
+            (blur)="onBlur(slug)"
+          />
           @if (errorOf(slug)) {
-            <p style="font-size: 10px" class="bas-m-0 bas-px-2 bas-font-medium bas-text-red-500">
-              {{ errorOf(slug) }}
-            </p>
+          <svg
+            class="bas-absolute bas-right-2 bas-top-1/2 bas-h-4 bas-w-4 -bas-translate-y-1/2 bas-text-red-500"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              d="M12 2 1 21h22L12 2Zm0 6c.55 0 1 .45 1 1v5a1 1 0 1 1-2 0V9c0-.55.45-1 1-1Zm0 9.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z"
+            />
+          </svg>
           }
         </div>
-      }
-      @if (!allRequiredFilled()) {
-        <p class="bas-m-0 bas-text-center bas-text-xs bas-text-amber-600">{{ fillRequiredTxt() }}</p>
+        @if (errorOf(slug)) {
+        <p
+          style="font-size: 10px"
+          class="bas-m-0 bas-px-2 bas-font-medium bas-text-red-500"
+        >
+          {{ errorOf(slug) }}
+        </p>
+        }
+      </div>
+      } @if (!allRequiredFilled()) {
+      <p class="bas-m-0 bas-text-center bas-text-xs bas-text-amber-600">
+        {{ fillRequiredTxtResolved() }}
+      </p>
       }
     </div>
   `,
@@ -129,13 +142,26 @@ export class SolicitedDataModalComponent {
   requiredParams = input<string[]>([]);
   optionalParams = input<string[]>([]);
   userParamValues = input<Record<string, string>>({});
-  requiredLabelTxt = input('Required');
-  optionalLabelTxt = input('Optional');
-  fillRequiredTxt = input('Fill required fields to continue');
+  requiredLabelTxt = input<string>();
+  optionalLabelTxt = input<string>();
+  fillRequiredTxt = input<string>();
 
   paramChange = output<ParamChange>();
   validationChange = output<boolean>();
 
+  private readonly locale = injectStore($locale);
+  protected t = (key: TextKey): string => translate(key, this.locale());
+
+  protected readonly requiredLabelTxtResolved = computed(
+    () => this.requiredLabelTxt() ?? this.t('required'),
+  );
+  protected readonly optionalLabelTxtResolved = computed(
+    () => this.optionalLabelTxt() ?? this.t('optional'),
+  );
+  protected readonly fillRequiredTxtResolved = computed(
+    () => this.fillRequiredTxt() ?? this.t('fillRequiredFields'),
+  );
+
   private readonly touched = signal<Record<string, boolean>>({});
 
   protected readonly allRequiredFilled = computed(() =>
@@ -152,7 +178,8 @@ export class SolicitedDataModalComponent {
     PARAM_DISPLAY_ORDER.filter(
       (slug) =>
         slug !== 'modules-kyc' &&
-        (this.requiredParams().includes(slug) || this.optionalParams().includes(slug)),
+        (this.requiredParams().includes(slug) ||
+          this.optionalParams().includes(slug)),
     ),
   );
 
@@ -163,14 +190,17 @@ export class SolicitedDataModalComponent {
   }
 
   isRequired = (slug: string): boolean => this.requiredParams().includes(slug);
-  label = (slug: string): string => PARAM_LABELS[slug] ?? slug;
+  label = (slug: string): string => {
+    const key = PARAM_LABEL_KEYS[slug];
+    return key ? this.t(key) : slug;
+  };
   inputType = (slug: string): string => PARAM_INPUT_TYPE[slug] || 'text';
   valueOf = (slug: string): string => this.userParamValues()[slug] || '';
 
   private getError(slug: string, value: string): string | null {
     if (!value) return null;
     const validate = PARAM_VALIDATORS[slug];
-    if (validate && !validate(value)) return PARAM_ERROR_MSG[slug];
+    if (validate && !validate(value)) return this.t(PARAM_ERROR_KEYS[slug]);
     return null;
   }
 
@@ -182,6 +212,9 @@ export class SolicitedDataModalComponent {
   }
 
   onInput(slug: string, event: Event): void {
-    this.paramChange.emit({ slug, value: (event.target as HTMLInputElement).value });
+    this.paramChange.emit({
+      slug,
+      value: (event.target as HTMLInputElement).value,
+    });
   }
 }

package/src/lib/components/txns/internals/txn-error.component.test.ts

@@ -1,16 +1,22 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { Component } from '@angular/core';
 import { render, screen, fireEvent } from '@testing-library/angular';
+import { setLocale } from '@block-auth.io/core';
 import { TxnErrorComponent } from './txn-error.component';
 import { provideBlockAuthClientForTest } from '../../../testing';
 
 vi.mock('@wagmi/core', () => ({
   createConfig: vi.fn(() => ({ connectors: [] })),
-  connect: vi.fn(), disconnect: vi.fn(), getAccount: vi.fn(() => ({})),
-  signMessage: vi.fn(), watchAccount: vi.fn(() => () => undefined), http: vi.fn(),
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getAccount: vi.fn(() => ({})),
+  signMessage: vi.fn(),
+  watchAccount: vi.fn(() => () => undefined),
+  http: vi.fn(),
 }));
 vi.mock('@wagmi/connectors', () => ({
-  injected: vi.fn(() => ({ id: 'injected' })), walletConnect: vi.fn(() => ({ id: 'walletConnect' })),
+  injected: vi.fn(() => ({ id: 'injected' })),
+  walletConnect: vi.fn(() => ({ id: 'walletConnect' })),
 }));
 
 // Port de packages/react/src/components/txns/internals/TxnError.test.tsx +
@@ -20,6 +26,8 @@ describe('TxnError', () => {
     return { txns: { report } } as any;
   }
 
+  afterEach(() => setLocale('en'));
+
   it('renderiza el panel de error de txn', async () => {
     await render(TxnErrorComponent, {
       inputs: { errorMessageTxt: 'No transactions found' },
@@ -29,10 +37,22 @@ describe('TxnError', () => {
     expect(screen.getByText('REPORT')).toBeDefined();
   });
 
+  it('respeta el locale activo cuando no se pasan textos custom', async () => {
+    setLocale('es');
+    await render(TxnErrorComponent, {
+      inputs: { errorMessageTxt: 'No transactions found' },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(screen.getByText('REPORTAR')).toBeDefined();
+  });
+
   it('REPORT llama a client.txns.report(slug)', async () => {
     const report = vi.fn();
     await render(TxnErrorComponent, {
-      inputs: { errorMessageTxt: 'No transactions found', errorMessageSlug: 'no_transactions_found' },
+      inputs: {
+        errorMessageTxt: 'No transactions found',
+        errorMessageSlug: 'no_transactions_found',
+      },
       providers: [provideBlockAuthClientForTest(makeClient(report))],
     });
     await fireEvent.click(screen.getByText('REPORT'));
@@ -52,7 +72,10 @@ describe('TxnError', () => {
       @Component({
         standalone: true,
         imports: [TxnErrorComponent],
-        template: `<ba-txn-error errorMessageTxt="No transactions found" [closeTxns]="c" />`,
+        template: `<ba-txn-error
+          errorMessageTxt="No transactions found"
+          [closeTxns]="c"
+        />`,
       })
       class Host {
         c = closeTxns;
@@ -78,7 +101,11 @@ describe('TxnError', () => {
       @Component({
         standalone: true,
         imports: [TxnErrorComponent],
-        template: `<ba-txn-error errorMessageTxt="No transactions found" [closeTxns]="c" [isCountdown]="false" />`,
+        template: `<ba-txn-error
+          errorMessageTxt="No transactions found"
+          [closeTxns]="c"
+          [isCountdown]="false"
+        />`,
       })
       class Host {
         c = closeTxns;

package/src/lib/components/txns/internals/txn-error.component.ts

@@ -2,10 +2,13 @@ import {
   ChangeDetectionStrategy,
   Component,
   DestroyRef,
+  computed,
   inject,
   input,
   signal,
 } from '@angular/core';
+import { $locale, t as translate, type TextKey } from '@block-auth.io/core';
+import { injectStore } from '../../../inject-store';
 import { injectBlockAuthClient } from '../../../provide-block-auth';
 
 // `closeTxns` se mantiene como INPUT DE FUNCIÓN (no output): react lo invoca
@@ -31,40 +34,42 @@ import { injectBlockAuthClient } from '../../../provide-block-auth';
       >
         <p class="bas-m-0">{{ errorMessageTxt() }}</p>
       </div>
-      <div class="bas-box-border bas-flex bas-w-full bas-flex-col bas-items-center bas-justify-center bas-gap-1 bas-px-1">
+      <div
+        class="bas-box-border bas-flex bas-w-full bas-flex-col bas-items-center bas-justify-center bas-gap-1 bas-px-1"
+      >
         <div class="bas-h-16 bas-w-full">
           @if (!reportSent()) {
-            <p class="bas-m-0">{{ helpUsTxt() }}</p>
+          <p class="bas-m-0">{{ helpUsTxtResolved() }}</p>
           } @else {
-            <p class="bas-m-0">{{ thanksForReportTxt() }}</p>
+          <p class="bas-m-0">{{ thanksForReportTxtResolved() }}</p>
           }
         </div>
         @if (!reportSent()) {
-          <button
-            type="button"
-            id="btn-txn-report-error"
-            [disabled]="sendingReport()"
-            class="bal-ba-hover-ring-red-500 bal-ba-focus-ring-red-500 bas-mt-2 bas-w-[220px] bas-justify-center bas-bg-red-500 hover:bas-bg-red-600 bas-px-4 bas-text-center bas-text-xl bas-font-medium bas-text-[var(--bal-primary-10)]"
-            (click)="onReportErrorClicked()"
-          >
-            {{ sendingReport() ? '…' : reportTxt() }}
-          </button>
+        <button
+          type="button"
+          id="btn-txn-report-error"
+          [disabled]="sendingReport()"
+          class="bal-ba-hover-ring-red-500 bal-ba-focus-ring-red-500 bas-mt-2 bas-w-[220px] bas-justify-center bas-bg-red-500 hover:bas-bg-red-600 bas-px-4 bas-text-center bas-text-xl bas-font-medium bas-text-[var(--bal-primary-10)]"
+          (click)="onReportErrorClicked()"
+        >
+          {{ sendingReport() ? '…' : reportTxtResolved() }}
+        </button>
         } @else {
-          <button
-            type="button"
-            id="btn-txn-error-report"
-            class="bal-ba-hover-ring-primary-300 bal-ba-focus-ring-primary-300 bas-mt-2 bas-w-[220px] bas-justify-center bas-rounded-md bas-border-2 bas-border-solid bas-border-[var(--bal-primary-300)] bas-bg-transparent bas-px-4 bas-text-center bas-text-xl bas-font-medium bas-text-[var(--bal-primary-700)] group-hover:bas-text-[var(--bal-primary-900)]"
-            (click)="close()"
-          >
-            {{ textCloseTxt() }}
-          </button>
+        <button
+          type="button"
+          id="btn-txn-error-report"
+          class="bal-ba-hover-ring-primary-300 bal-ba-focus-ring-primary-300 bas-mt-2 bas-w-[220px] bas-justify-center bas-rounded-md bas-border-2 bas-border-solid bas-border-[var(--bal-primary-300)] bas-bg-transparent bas-px-4 bas-text-center bas-text-xl bas-font-medium bas-text-[var(--bal-primary-700)] group-hover:bas-text-[var(--bal-primary-900)]"
+          (click)="close()"
+        >
+          {{ textCloseTxtResolved() }}
+        </button>
         }
       </div>
       @if (reportSent() && isCountdown()) {
-        <div class="bas-flex bas-flex-row bas-items-end bas-gap-2">
-          <p class="bas-m-0">{{ modalWillCloseInTxt() }}</p>
-          <p class="bas-m-0">{{ countDown() }}</p>
-        </div>
+      <div class="bas-flex bas-flex-row bas-items-end bas-gap-2">
+        <p class="bas-m-0">{{ modalWillCloseInTxtResolved() }}</p>
+        <p class="bas-m-0">{{ countDown() }}</p>
+      </div>
       }
     </div>
   `,
@@ -73,14 +78,32 @@ export class TxnErrorComponent {
   errorMessageSlug = input('unknown');
   errorMessageTxt = input('unknown');
   closeTxns = input<() => void>(() => {});
-  helpUsTxt = input('Help us get better and report the error here');
-  thanksForReportTxt = input('Thanks for reporting the error!');
-  reportTxt = input('REPORT');
-  textCloseTxt = input('Close');
-  modalWillCloseInTxt = input('This modal will close in...');
+  helpUsTxt = input<string>();
+  thanksForReportTxt = input<string>();
+  reportTxt = input<string>();
+  textCloseTxt = input<string>();
+  modalWillCloseInTxt = input<string>();
   isCountdown = input(true);
 
   private readonly client = injectBlockAuthClient();
+  private readonly locale = injectStore($locale);
+  protected t = (key: TextKey): string => translate(key, this.locale());
+
+  protected readonly helpUsTxtResolved = computed(
+    () => this.helpUsTxt() ?? this.t('helpUsReport'),
+  );
+  protected readonly thanksForReportTxtResolved = computed(
+    () => this.thanksForReportTxt() ?? this.t('thanksForReport'),
+  );
+  protected readonly reportTxtResolved = computed(
+    () => this.reportTxt() ?? this.t('report'),
+  );
+  protected readonly textCloseTxtResolved = computed(
+    () => this.textCloseTxt() ?? this.t('close'),
+  );
+  protected readonly modalWillCloseInTxtResolved = computed(
+    () => this.modalWillCloseInTxt() ?? this.t('modalWillCloseIn'),
+  );
 
   protected readonly sendingReport = signal(false);
   protected readonly reportSent = signal(false);