@block-auth.io/angular 0.1.1 → 0.2.0

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/darius_jvc/projects/blockauth-sdk/packages/angular
+> pnpm build:css
+
+
+> @block-auth.io/angular@0.1.2 build:css /home/darius_jvc/projects/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 770ms.
+
+> @block-auth.io/angular@0.1.2 typecheck /home/darius_jvc/projects/blockauth-sdk/packages/angular
+> tsc -p tsconfig.lib.json --noEmit
+

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @block-auth.io/angular
 
+## 0.2.0
+
+### Minor Changes
+
+- Conditionally render DropdownProfile actions based on authentication state
+
+## 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.2.0",
   "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/dds/dropdown-profile-btn.component.ts

@@ -62,30 +62,22 @@ import { TbCopyComponent, TbCopyCheckFilledComponent } from '../../icons';
             <ba-tb-copy class="bal-ba-transition-2 bas-h-[18px] bas-w-[18px] bas-shrink-0" />
           }
         </div>
+        <!-- Solo texto, no copiable (la fila DID de arriba es la única acción de copiar) -->
         @if (showAccountRow()) {
-          <div
-            [class]="
-              'bal-ba-transition-2 bas-flex bas-max-w-full bas-flex-row bas-items-center bas-justify-center bas-gap-1 bas-cursor-pointer ' +
-              (isAccountCopied() ? 'bas-text-[#4d849b]' : 'hover:bas-opacity-50')
-            "
-            (click)="onCopyAccount($event)"
-          >
+          <div class="bal-ba-transition-2 bas-flex bas-max-w-full bas-flex-row bas-items-center bas-justify-center bas-gap-1">
             <p class="bas-m-0 bas-truncate bas-text-xs">{{ accountSubtitle() }}</p>
-            @if (isAccountCopied()) {
-              <ba-tb-copy-check-filled class="bal-ba-transition-2 bas-h-4 bas-w-4 bas-shrink-0" />
-            } @else {
-              <ba-tb-copy class="bal-ba-transition-2 bas-h-4 bas-w-4 bas-shrink-0" />
-            }
           </div>
         }
       </div>
       <div [class]="arrowContainerClassNames()">
-        <ba-dropdown-arrow
-          id="ba-ddp-btn-arrow"
-          [isOpen]="isProfileOpen()"
-          [color]="style().colorBase"
-          [sizeClassNames]="arrowSizesClassNames()"
-        />
+        @if (isSigned()) {
+          <ba-dropdown-arrow
+            id="ba-ddp-btn-arrow"
+            [isOpen]="isProfileOpen()"
+            [color]="style().colorBase"
+            [sizeClassNames]="arrowSizesClassNames()"
+          />
+        }
       </div>
     </div>
   `,
@@ -154,7 +146,6 @@ export class DropdownProfileBtnComponent {
   );
 
   protected readonly isDidCopied = signal(false);
-  protected readonly isAccountCopied = signal(false);
 
   protected readonly gridClassNames = computed(() => this.gridClassNamesBySize[this.dropdownBtnSize()]);
   protected readonly imgSizesClassNames = computed(() => this.imgSizesClassNamesBySize[this.dropdownBtnSize()]);
@@ -168,18 +159,12 @@ export class DropdownProfileBtnComponent {
   });
 
   onCopyDid(e: MouseEvent): void {
-    this.copy(this.rawDid(), this.isDidCopied, e);
-  }
-  onCopyAccount(e: MouseEvent): void {
-    this.copy(this.rawAccount(), this.isAccountCopied, e);
-  }
-
-  private copy(value: string, copiedSignal: { set: (v: boolean) => void }, e: MouseEvent): void {
     // Don't toggle the dropdown open/closed when the user only wants to copy.
     e.stopPropagation();
+    const value = this.rawDid();
     if (!value) return;
     void navigator.clipboard?.writeText(value);
-    copiedSignal.set(true);
-    setTimeout(() => copiedSignal.set(false), 3000);
+    this.isDidCopied.set(true);
+    setTimeout(() => this.isDidCopied.set(false), 3000);
   }
 }

package/src/lib/components/dds/dropdown-profile.component.test.ts

@@ -18,13 +18,15 @@ vi.mock('@wagmi/connectors', () => ({
 // packages/vue/.../DropdownProfile.test.ts). Client falso con `logout` spy y
 // stores nanostores; serviceName 'blockauth' para textos en inglés.
 describe('DropdownProfile', () => {
-  function makeClient(logout = vi.fn(async () => {})) {
+  // isSigned: true — el item list (My profile/Change account/Disconnect)
+  // solo se muestra autenticado (ver dropdown-profile.component.ts).
+  function makeClient(logout = vi.fn(async () => {}), uiOverrides: Record<string, unknown> = {}) {
     return {
       logout,
       web3: { signup: vi.fn() },
       oauth: { signupGoogle: vi.fn(), signupMicrosoft: vi.fn() },
       connectBlockAuth: vi.fn(),
-      state: { $ui: map({ serviceName: 'blockauth' }), $ws: map({}) },
+      state: { $ui: map({ serviceName: 'blockauth', isSigned: true, ...uiOverrides }), $ws: map({}) },
     } as any;
   }
 
@@ -95,4 +97,14 @@ describe('DropdownProfile', () => {
     });
     expect(screen.getByTestId('dropdown-profile').className).toContain('bas-w-fit');
   });
+
+  it('sin firmar (conectado pero no autenticado) solo permite copiar el DID', async () => {
+    await render(DropdownProfileComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient(vi.fn(), { isSigned: false }))],
+    });
+    await fireEvent.click(screen.getByTestId('dropdown-profile-btn'));
+    expect(screen.queryByText('My profile')).toBeNull();
+    expect(screen.queryByText('Change account')).toBeNull();
+    expect(screen.queryByText('Disconnect')).toBeNull();
+  });
 });

package/src/lib/components/dds/dropdown-profile.component.ts

@@ -88,22 +88,23 @@ export interface DropdownProfileAdditionalItem {
                 (clicked)="item.onClick()"
               />
             }
-            <!-- CHANGE ACCOUNT -->
-            <ba-change-account
-              [serviceName]="serviceName()"
-              [text]="localized(btnsTexts().changeAccount, 'Change account')"
-              [disabled]="disabled()"
-              [isTopBorder]="isWeb3Service() || itemsToShow().length > 0"
-              (changeAccountClicked)="onChangeAccountClicked()"
-            />
-            <!-- DISCONNECT -->
-            <ba-dropdown-profile-item
-              id="ba-dd8-disconnect-0"
-              [text]="localized(btnsTexts().disconnect, 'Disconnect')"
-              [firstIcon]="disconnectIcon"
-              [isTopBorder]="true"
-              (clicked)="onDisconnectClicked()"
-            />
+            <!-- CHANGE ACCOUNT + DISCONNECT — hidden until the login transaction is signed -->
+            @if (isSigned()) {
+              <ba-change-account
+                [serviceName]="serviceName()"
+                [text]="localized(btnsTexts().changeAccount, 'Change account')"
+                [disabled]="disabled()"
+                [isTopBorder]="isWeb3Service() || itemsToShow().length > 0"
+                (changeAccountClicked)="onChangeAccountClicked()"
+              />
+              <ba-dropdown-profile-item
+                id="ba-dd8-disconnect-0"
+                [text]="localized(btnsTexts().disconnect, 'Disconnect')"
+                [firstIcon]="disconnectIcon"
+                [isTopBorder]="true"
+                (clicked)="onDisconnectClicked()"
+              />
+            }
           </ul>
         </div>
       }
@@ -153,6 +154,7 @@ export class DropdownProfileComponent {
   private animTimeout: ReturnType<typeof setTimeout> | undefined;
 
   protected readonly serviceName = computed(() => this.ui().serviceName ?? 'blockauth');
+  protected readonly isSigned = computed(() => this.ui().isSigned);
 
   private readonly uiConfigContent = computed(
     () =>
@@ -191,12 +193,15 @@ export class DropdownProfileComponent {
     },
   ]);
 
-  protected readonly itemsToShow = computed(
-    () => this.additionalDropdownItems() ?? this.defaultAdditionalDropdownItems(),
+  // Not fully authenticated yet (connected but transaction unsigned): only the
+  // "Copy DID" row in `DropdownProfileBtnComponent` is a valid action, so the
+  // item list (My profile / Change account / Disconnect) stays empty.
+  protected readonly itemsToShow = computed(() =>
+    this.isSigned() ? this.additionalDropdownItems() ?? this.defaultAdditionalDropdownItems() : [],
   );
   private readonly web2Services = ['google', 'microsoft'];
   protected readonly isWeb3Service = computed(() => !this.web2Services.includes(this.serviceName()));
-  protected readonly totalDropdownItems = computed(() => 2 + this.itemsToShow().length);
+  protected readonly totalDropdownItems = computed(() => (this.isSigned() ? 2 + this.itemsToShow().length : 0));
 
   private readonly heightBySize: Record<string, number> = { xs: 46, small: 52, base: 58, large: 64 };
 
@@ -217,6 +222,7 @@ export class DropdownProfileComponent {
   }
 
   onProfileClicked(): void {
+    if (!this.isSigned()) return;
     this.isAnimationCompleted.set(false);
     const next = !this.isProfileOpen();
     this.isProfileOpen.set(next);

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,
+    });
   }
 }