@block-auth.io/angular 0.1.0

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

@@ -0,0 +1,188 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { TxnComponent } from './txn.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(),
+}));
+vi.mock('@wagmi/connectors', () => ({
+  injected: vi.fn(() => ({ id: 'injected' })), walletConnect: vi.fn(() => ({ id: 'walletConnect' })),
+}));
+
+// Port de packages/react/src/components/txns/internals/Txn.test.tsx +
+// TxnActions.behavior.test.tsx (mapa: packages/vue/.../Txn.test.ts).
+//
+// El toggle PPTC se ejerce vía `data-testid="txn-pptc-toggle"` (el div exterior,
+// único dueño del handler que alterna `pptcAccepted`), no vía click directo en
+// `checkbox-animated` (que es `bas-hidden`).
+describe('Txn', () => {
+  function makeClient(overrides: Record<string, any> = {}) {
+    return {
+      txns: { reject: vi.fn(), accept: vi.fn(), report: vi.fn() },
+      closeModal: vi.fn(),
+      state: { $ui: map({}), $ws: map({ requests: [] }) },
+      ...overrides,
+    } as any;
+  }
+
+  it('renderiza el cuerpo de la txn con aceptar/rechazar', async () => {
+    await render(TxnComponent, {
+      inputs: { hasSolicitedData: true },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(screen.getByText('Permissions required')).toBeDefined();
+    expect(screen.getByText('ACCEPT')).toBeDefined();
+    expect(screen.getByText('REJECT')).toBeDefined();
+  });
+
+  it('ACCEPT esta deshabilitado hasta aceptar PPTC (y allRequiredFilled)', async () => {
+    await render(TxnComponent, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    const acceptBtn = screen.getByText('ACCEPT').closest('button') as HTMLButtonElement;
+    const checkbox = screen.getByTestId('checkbox-animated') as HTMLInputElement;
+    expect(acceptBtn.disabled).toBe(true);
+    expect(checkbox.checked).toBe(false);
+
+    await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+    expect(checkbox.checked).toBe(true);
+    expect(acceptBtn.disabled).toBe(false);
+  });
+
+  it('ACCEPT sigue deshabilitado si allRequiredFilled=false aunque PPTC este aceptado', async () => {
+    await render(TxnComponent, {
+      inputs: { allRequiredFilled: false },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+    const acceptBtn = screen.getByText('ACCEPT').closest('button') as HTMLButtonElement;
+    expect(acceptBtn.disabled).toBe(true);
+  });
+
+  it('REJECT llama client.txns.reject() y luego closeModal() (no closeTxns)', async () => {
+    const client = makeClient();
+    const closeTxns = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [TxnComponent],
+      template: `<ba-txn [closeTxns]="c" />`,
+    })
+    class Host {
+      c = closeTxns;
+    }
+    await render(Host, { providers: [provideBlockAuthClientForTest(client)] });
+    await fireEvent.click(screen.getByText('REJECT'));
+
+    expect(client.txns.reject).toHaveBeenCalledOnce();
+    expect(client.closeModal).toHaveBeenCalledOnce();
+    expect(closeTxns).not.toHaveBeenCalled();
+  });
+
+  it('ACCEPT llama a addError("no_app_key_found") cuando falta appKey', async () => {
+    const client = makeClient();
+    const addError = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [TxnComponent],
+      template: `<ba-txn [selectedTxnPreParams]="{}" [addError]="e" />`,
+    })
+    class Host {
+      e = addError;
+    }
+    await render(Host, { providers: [provideBlockAuthClientForTest(client)] });
+    await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+    await fireEvent.click(screen.getByText('ACCEPT'));
+    expect(addError).toHaveBeenCalledWith('no_app_key_found');
+    expect(client.txns.accept).not.toHaveBeenCalled();
+  });
+
+  it('ACCEPT llama a addError("no_contract_address_found") cuando falta to', async () => {
+    const client = makeClient();
+    const addError = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [TxnComponent],
+      template: `<ba-txn [selectedTxnPreParams]="{ appKey: 'k' }" [addError]="e" />`,
+    })
+    class Host {
+      e = addError;
+    }
+    await render(Host, { providers: [provideBlockAuthClientForTest(client)] });
+    await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+    await fireEvent.click(screen.getByText('ACCEPT'));
+    expect(addError).toHaveBeenCalledWith('no_contract_address_found');
+    expect(client.txns.accept).not.toHaveBeenCalled();
+  });
+
+  it('ACCEPT llama a client.txns.accept con lifetime/userParams cuando los preParams son validos', async () => {
+    const client = makeClient();
+    @Component({
+      standalone: true,
+      imports: [TxnComponent],
+      template: `<ba-txn [selectedTxnPreParams]="{ appKey: 'k', to: '0xabc' }" [userParamValues]="{ 'users-email': 'a@b.com' }" />`,
+    })
+    class Host {}
+    await render(Host, { providers: [provideBlockAuthClientForTest(client)] });
+    await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+    await fireEvent.click(screen.getByText('ACCEPT'));
+
+    expect(client.txns.accept).toHaveBeenCalledWith({
+      lifetime: 3600,
+      userParams: { 'users-email': 'a@b.com' },
+    });
+  });
+
+  it('emite permissionsRequiredClicked/solicitedDataClicked (solo si hasSolicitedData)', async () => {
+    const onPerm = vi.fn();
+    const onSol = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [TxnComponent],
+      template: `<ba-txn [hasSolicitedData]="true" (permissionsRequiredClicked)="p()" (solicitedDataClicked)="s()" />`,
+    })
+    class Host {
+      p = onPerm;
+      s = onSol;
+    }
+    await render(Host, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    await fireEvent.click(screen.getByText('Permissions required'));
+    await fireEvent.click(screen.getByText('Solicited data'));
+    expect(onPerm).toHaveBeenCalledOnce();
+    expect(onSol).toHaveBeenCalledOnce();
+  });
+
+  it('el boton de configurar sesion revela el LifetimeSliderBase (slider + TimePicker)', async () => {
+    const { container } = await render(TxnComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    // Antes del click no hay ni slider ni TimePicker.
+    expect(container.querySelector('#txn-lifetime-slider-slider')).toBeNull();
+    await fireEvent.click(screen.getByText('I want to configure my session time'));
+    // El slider estilado (SliderBase) y el input del TimePicker aparecen.
+    const slider = container.querySelector('#txn-lifetime-slider-slider') as HTMLInputElement;
+    expect(slider).not.toBeNull();
+    expect(slider.type).toBe('range');
+    const timeInput = container.querySelector(
+      '#txn-lifetime-slider-time-picker-time-input',
+    ) as HTMLInputElement;
+    expect(timeInput).not.toBeNull();
+    // Refleja el lifetime por defecto (3600s → 01:00:00) como HH:MM:SS.
+    expect(timeInput.value).toBe('01:00:00');
+  });
+
+  it('mover el slider actualiza el valor HH:MM:SS del TimePicker', async () => {
+    const { container } = await render(TxnComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    await fireEvent.click(screen.getByText('I want to configure my session time'));
+    const slider = container.querySelector('#txn-lifetime-slider-slider') as HTMLInputElement;
+    await fireEvent.input(slider, { target: { value: '7200' } }); // 02:00:00
+    const timeInput = container.querySelector(
+      '#txn-lifetime-slider-time-picker-time-input',
+    ) as HTMLInputElement;
+    expect(timeInput.value).toBe('02:00:00');
+  });
+});

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

@@ -0,0 +1,298 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { injectBlockAuthClient } from '../../../provide-block-auth';
+import { ArrowIconComponent } from '../../../primitives/arrow-icon.component';
+import { LifetimeSliderBaseComponent } from '../../../primitives/lifetime-slider-base.component';
+import { getTimeBySec } from '../../../primitives/helpers';
+
+// Con `showLifetime` se revela el `<ba-lifetime-slider-base>` completo (slider +
+// TimePicker HH:MM:SS con dropdown animado), igual que react/vue. El slider y el
+// picker reportan en segundos; `onLifetimeValueChanged` mantiene ambas vistas
+// (`lifetimeSign` número + `lifetimeTimeValue` HH:MM:SS) en sync. El valor
+// elegido (segundos) es lo que ACCEPT envía como `lifetime`. El botón que revela
+// el control (`id="btn-configure-session-time"`) se mantiene idéntico.
+//
+// `onPermissionsRequiredClicked`/`onSolicitedDataClicked` (callback props) ->
+// outputs `permissionsRequiredClicked`/`solicitedDataClicked`. `closeTxns`/
+// `addError` se mantienen como INPUTS DE FUNCIÓN (invocados imperativamente).
+//
+// `close()` NO llama a `closeTxns`: reject ya emite `cancelled` por sí mismo y
+// accept no debe deshacerse (encadenar `closeTxns()` cancelaría dos veces en
+// reject y cancelaría una txn ya aceptada). El `setTimeout` de autocierre de 4s
+// se limpia vía `DestroyRef`. `data-testid="txn-pptc-toggle"` en el div exterior
+// del check PPTC (solo testability, igual que el port Vue).
+interface TxnPreParams {
+  appKey?: string;
+  to?: string;
+  lifetime?: { value?: number; min?: number; max?: number };
+  [key: string]: unknown;
+}
+
+@Component({
+  selector: 'ba-txn',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ArrowIconComponent, LifetimeSliderBaseComponent],
+  template: `
+    <div class="bas-flex bas-h-full bas-w-full bas-flex-col bas-items-center bas-justify-between">
+      <div class="bal-ba-transition-3 bas-flex bas-w-full bas-flex-col bas-gap-8 bas-pt-2">
+        <div
+          class="bal-ba-outline-none bas-grid bas-h-[30px] bas-cursor-pointer bas-grid-cols-[65px_auto_65px] bas-items-center bas-justify-center bas-gap-2"
+          (click)="permissionsRequiredClicked.emit()"
+        >
+          <ba-arrow-icon direction="right" />
+          <div class="bas-flex bas-h-full bas-w-full bas-items-end">
+            <p class="bas-m-0 bas-text-center bas-text-lg bas-font-medium bas-text-[var(--bal-primary-900)]">
+              {{ permissionsRequiredTxt() }}
+            </p>
+          </div>
+          <ba-arrow-icon direction="left" />
+        </div>
+
+        <div
+          [class]="
+            'bas-grid bas-h-[30px] bas-grid-cols-[65px_auto_65px] bas-items-center bas-justify-center bas-gap-2 ' +
+            (hasSolicitedData() ? 'bas-cursor-pointer' : 'bas-cursor-not-allowed bas-opacity-40')
+          "
+          (click)="onSolicitedDataClick()"
+        >
+          <ba-arrow-icon direction="right" />
+          <div class="bas-flex bas-h-full bas-w-full bas-items-end bas-justify-center">
+            <p
+              [class]="
+                'bas-m-0 bas-text-center bas-text-lg bas-transition-colors ' +
+                (hasSolicitedData()
+                  ? 'bas-font-medium bas-text-[var(--bal-primary-900)]'
+                  : 'bas-text-slate-400')
+              "
+            >
+              {{ solicitedDataTxt() }}
+            </p>
+          </div>
+          <ba-arrow-icon direction="left" />
+        </div>
+      </div>
+
+      @if (!showLifetime()) {
+        <button
+          type="button"
+          id="btn-configure-session-time"
+          class="bal-ba-transition-2 bas-flex bas-w-full bas-cursor-pointer bas-flex-row bas-items-end bas-justify-center bas-gap-2 bas-border-0 bas-bg-transparent bas-text-[--bal-primary-700] hover:bas-text-[--bal-primary-900]"
+          (click)="showLifetime.set(true)"
+        >
+          <p class="bas-m-0 bas-text-center bas-text-base">{{ configureSessionTimeTxt() }}</p>
+          <svg class="bas-h-5 bas-w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 7v5l3 2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </button>
+      } @else {
+        <ba-lifetime-slider-base
+          id="txn-lifetime-slider"
+          [sliderValue]="lifetimeSign()"
+          [step]="1"
+          [min]="minLifetime()"
+          [max]="maxLifetime()"
+          [timeInputValue]="lifetimeTimeValue()"
+          [isOpen]="isTimePickerOpen()"
+          [isTimePickerInsideModal]="true"
+          modalId="txns-overview"
+          timePickerDropdownDirection="up"
+          classNames="bas-grid bas-h-auto bas-w-full bas-items-center bas-gap-3 bas-grid-cols-[152px_1fr]"
+          timePickerContainerClassNames="bas-flex bas-w-full bas-items-center bas-justify-center"
+          (sliderValueChanged)="onLifetimeValueChanged($event)"
+          (timeChanged)="onLifetimeValueChanged($event)"
+          (isOpenChange)="isTimePickerOpen.set($event)"
+          (toggleTimerDropdown)="toggleTimerDropdown()"
+        />
+      }
+
+      <div class="bal-ba-transition-3 bas-flex bas-w-full bas-flex-col bas-gap-8 bas-pb-4">
+        <div
+          data-testid="txn-pptc-toggle"
+          [class]="
+            'bas-group bal-ba-transition-2 bas-box-border bas-flex bas-h-fit bas-w-full bas-flex-row bas-items-center bas-gap-3 bas-rounded-md bas-border-2 bas-border-solid bas-border-[var(--bal-primary-100)] bas-p-1 bas-pl-2 bal-ba-ring-base bal-ba-hover-ring-2 ' +
+            (pptcAccepted()
+              ? 'bas-border-[var(--bal-primary-300)] bal-ba-hover-ring-primary-300'
+              : 'bal-ba-hover-ring-primary-200')
+          "
+          (click)="pptcAccepted.set(!pptcAccepted())"
+        >
+          <div class="bas-flex bas-h-full bas-items-center bas-pb-1">
+            <label
+              for="txn-pptc-checkbox"
+              class="bal-ba-transition-3 bas-group bas-relative bas-flex bas-cursor-default bas-flex-row bas-items-center bas-gap-[5px] bas-text-sm bas-text-[var(--bal-primary-600)] hover:bas-text-[#003366]"
+            >
+              <input
+                type="checkbox"
+                id="txn-pptc-checkbox"
+                data-testid="checkbox-animated"
+                [checked]="pptcAccepted()"
+                class="bal-ba-checkbox-animated-input bal-ba-outline-none bas-peer bas-hidden"
+                (change)="pptcAccepted.set(!pptcAccepted())"
+              />
+              <span class="bal-ba-input-check bal-ba-input-check-big bal-ba-transition-3 bas-relative bas-top-0 bas-inline-block bas-h-[25px] bas-w-[25px] bas-cursor-pointer bas-rounded-[4px] bas-border-2 bas-border-solid bas-border-[#c2c6c8] group-hover:bas-border-[#61a5c2] peer-checked:bas-border-2 peer-checked:bas-border-solid peer-checked:bas-border-[var(--bal-primary-600)] peer-checked:bas-bg-[var(--bal-primary-600)] peer-disabled:bas-cursor-not-allowed peer-disabled:bas-opacity-50"></span>
+            </label>
+          </div>
+          <div class="bas-flex bas-flex-col bas-gap-0.5 bas-text-sm bas-text-[var(--bal-primary-500)] group-hover:bas-text-[var(--bal-primary-800)]">
+            <div class="bas-flex bas-flex-row bas-items-center bas-gap-1">
+              <p class="bal-ba-transition-2 bas-m-0 bas-cursor-default">{{ iAuthorizeTheTxt() }}</p>
+              <button
+                type="button"
+                data-testid="btn-privacy-policy"
+                class="bal-ba-transition-2 bas-flex bas-h-full bas-cursor-pointer bas-items-center bas-border-none bas-bg-transparent bas-p-0 bas-pb-[1px] bas-text-sm bas-text-[var(--bal-primary-700)] bas-underline group-hover:bas-text-[var(--bal-primary-900)]"
+                (click)="openPrivacyPolicy()"
+              >
+                {{ privacyPolicyTxt() }}
+              </button>
+              <p class="bal-ba-transition-2 bas-m-0 bas-cursor-default">{{ andTheTxt() }}</p>
+            </div>
+            <button
+              type="button"
+              data-testid="btn-terms-and-conditions"
+              class="bal-ba-transition-2 bas-flex bas-h-full bas-w-fit bas-cursor-pointer bas-items-center bas-border-none bas-bg-transparent bas-p-0 bas-pb-[1px] bas-text-sm bas-text-[var(--bal-primary-700)] bas-underline group-hover:bas-text-[var(--bal-primary-900)]"
+              (click)="openTermsAndConditions()"
+            >
+              {{ termsAndConditionsTxt() }}
+            </button>
+          </div>
+        </div>
+        <div class="bas-flex bas-w-full bas-flex-row bas-items-center bas-justify-between bas-gap-2">
+          <button
+            type="button"
+            id="btn-txn-reject"
+            class="bal-ba-ring-base bal-ba-ring bal-ba-transition-2 bas-group bas-relative bas-box-border bas-flex bas-flex-row bas-gap-2 bas-items-center bas-overflow-hidden bas-bg-transparent bal-ba-hover-ring-slate-400 bal-ba-focus-ring-slate-400 bas-h-[42px] bas-px-2.5 bas-py-0 disabled:bas-cursor-not-allowed disabled:bas-opacity-50 bal-ba-hover-ring-2 bas-cursor-pointer bal-ba-focus-ring-2 focus:bas-opacity-90 bal-ba-focus-ring-offset-0 bas-w-full bas-justify-center bas-border-2 bas-border-slate-400 bas-rounded-md bas-border-solid"
+            (click)="onTxnRejectClicked()"
+          >
+            <span class="bal-ba-transition-2 bas-text-center bas-text-base bas-font-medium bas-text-slate-600 group-hover:bas-text-slate-800 bas-flex bas-h-full bas-items-center">
+              {{ rejectTxt() }}
+            </span>
+          </button>
+          <button
+            type="button"
+            id="btn-txn-accept"
+            [disabled]="!pptcAccepted() || !allRequiredFilled()"
+            class="bal-ba-ring-base bal-ba-ring bal-ba-transition-2 bas-group bas-relative bas-box-border bas-flex bas-flex-row bas-gap-2 bas-items-center bas-overflow-hidden bas-bg-[#38b000] hover:bas-bg-[#329e00] bal-ba-hover-ring-green-500 bal-ba-focus-ring-green-500 bas-h-[42px] bas-px-2.5 bas-py-0 disabled:bas-cursor-not-allowed disabled:bas-opacity-50 bal-ba-hover-ring-2 bas-cursor-pointer bal-ba-focus-ring-2 focus:bas-opacity-90 bal-ba-focus-ring-offset-2 bal-ba-hover-ring-offset-2 bas-w-full bas-justify-center bas-border-none bas-rounded-md"
+            (click)="onTxnAcceptClicked()"
+          >
+            <span class="bal-ba-transition-2 bas-text-white bas-text-center bas-text-base bas-font-medium bas-flex bas-h-full bas-items-center">
+              {{ acceptTxt() }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TxnComponent {
+  permissionsRequiredTxt = input('Permissions required');
+  solicitedDataTxt = input('Solicited data');
+  rejectTxt = input('REJECT');
+  acceptTxt = input('ACCEPT');
+  iAuthorizeTheTxt = input('I authorize the');
+  privacyPolicyTxt = input('Privacy Policy');
+  andTheTxt = input('and the');
+  termsAndConditionsTxt = input('Terms and Conditions');
+  configureSessionTimeTxt = input('I want to configure my session time');
+  hasSolicitedData = input(false);
+  allRequiredFilled = input(true);
+  closeTxns = input<() => void>(() => {});
+  /** Session lifetime in seconds (default 3600). */
+  lifetime = input(3600);
+  /** Pre-params from the selected transaction (used for validation). */
+  selectedTxnPreParams = input<TxnPreParams>({});
+  /** User-provided parameter values for solicited data. */
+  userParamValues = input<Record<string, string>>({});
+  /** Callback when an error occurs during accept validation. */
+  addError = input<(messageSlug: string) => void>(() => {});
+
+  permissionsRequiredClicked = output<void>();
+  solicitedDataClicked = output<void>();
+
+  private readonly client = injectBlockAuthClient();
+
+  protected readonly pptcAccepted = signal(false);
+  protected readonly showLifetime = signal(false);
+
+  private readonly lifetimeData = computed(() => this.selectedTxnPreParams().lifetime ?? {});
+  protected readonly minLifetime = computed(() => this.lifetimeData().min ?? 10);
+  protected readonly maxLifetime = computed(() => this.lifetimeData().max ?? 29100);
+  protected readonly lifetimeSign = signal(this.lifetime());
+  // El TimePicker refleja `lifetimeSign` como string HH:MM:SS; tanto el slider
+  // como el picker reportan en segundos, así un único handler mantiene ambos
+  // en sync.
+  protected readonly lifetimeTimeValue = signal(getTimeBySec(this.lifetime()));
+  protected readonly isTimePickerOpen = signal(false);
+
+  private autoCloseTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  constructor() {
+    // Init lifetimeSign/lifetimeTimeValue from the selected txn's lifetime value
+    // (or the default).
+    const initialLifetime = this.lifetimeData().value ?? this.lifetime();
+    this.lifetimeSign.set(initialLifetime);
+    this.lifetimeTimeValue.set(getTimeBySec(initialLifetime));
+    inject(DestroyRef).onDestroy(() => {
+      if (this.autoCloseTimeout) clearTimeout(this.autoCloseTimeout);
+    });
+  }
+
+  onSolicitedDataClick(): void {
+    if (this.hasSolicitedData()) this.solicitedDataClicked.emit();
+  }
+
+  toggleTimerDropdown(): void {
+    this.isTimePickerOpen.update((v) => !v);
+  }
+
+  // El slider y el TimePicker reportan en segundos; un único handler mantiene
+  // ambas vistas (número + HH:MM:SS) en sync.
+  onLifetimeValueChanged(value: number): void {
+    this.lifetimeSign.set(value);
+    this.lifetimeTimeValue.set(getTimeBySec(value));
+  }
+
+  openPrivacyPolicy(): void {
+    if (typeof window !== 'undefined')
+      window.open('https://block-auth.io/politica-de-privacidad/', '_blank');
+  }
+  openTermsAndConditions(): void {
+    if (typeof window !== 'undefined')
+      window.open('https://block-auth.io/aviso-legal/', '_blank');
+  }
+
+  // Solo resetea flags locales/UI y cierra el modal.
+  // NO cancela la txn (ver comentario de cabecera).
+  private close(): void {
+    this.pptcAccepted.set(false);
+    this.client.state.$ui.setKey('isAcceptingTxn', false);
+    this.client.closeModal();
+  }
+
+  onTxnRejectClicked(): void {
+    this.client.txns.reject();
+    this.close();
+  }
+
+  onTxnAcceptClicked(): void {
+    const preParams = this.selectedTxnPreParams();
+    if (!preParams) return this.addError()('no_transactions_params_found');
+    if (!preParams.appKey) return this.addError()('no_app_key_found');
+    if (!preParams.to) return this.addError()('no_contract_address_found');
+    this.client.state.$ui.setKey('isAcceptingTxn', true);
+    this.client.txns.accept({ lifetime: this.lifetimeSign(), userParams: this.userParamValues() });
+    // Auto-close after 4s if txns are cleared (matches original behaviour).
+    this.autoCloseTimeout = setTimeout(() => {
+      const requests = this.client.state.$ws.get().requests;
+      if (requests && requests.length === 0) this.close();
+    }, 4000);
+  }
+}

package/src/lib/components/txns/txns-overview.component.test.ts

@@ -0,0 +1,107 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { TxnsOverviewComponent } from './txns-overview.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(),
+}));
+vi.mock('@wagmi/connectors', () => ({
+  injected: vi.fn(() => ({ id: 'injected' })), walletConnect: vi.fn(() => ({ id: 'walletConnect' })),
+}));
+
+// Port de packages/react/src/components/txns/TxnsOverview.test.tsx, extendido
+// con la vista poblada (Txn + navegación prev/next), igual que el port Vue.
+describe('TxnsOverview', () => {
+  function makeClient(ws: Record<string, any> = {}, ui: Record<string, any> = {}) {
+    return {
+      txns: { reject: vi.fn(), accept: vi.fn(), report: vi.fn() },
+      closeModal: vi.fn(),
+      state: { $ui: map({ ...ui }), $ws: map({ requests: [], ...ws }) },
+    } as any;
+  }
+
+  it('renderiza la vista general de txns (estado vacio sin crashear)', async () => {
+    await render(TxnsOverviewComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient({}, { isSigning: false }))],
+    });
+    expect(screen.getByTestId('txns-overview')).toBeDefined();
+    expect(screen.queryByText('No transactions found')).toBeNull();
+  });
+
+  it('estado vacio + isSigning muestra el error "No transactions found"', async () => {
+    await render(TxnsOverviewComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient({}, { isSigning: true }))],
+    });
+    expect(screen.getByText('No transactions found')).toBeDefined();
+  });
+
+  it('con txns pendientes renderiza el header + TxnType + Txn', async () => {
+    await render(TxnsOverviewComponent, {
+      providers: [
+        provideBlockAuthClientForTest(
+          makeClient({
+            did: '0x1234567890abcdef',
+            requests: [
+              { id: 1, pre_params: JSON.stringify({ appName: 'Acme', domain: 'acme.io', txnType: 'Log In' }) },
+            ],
+          }),
+        ),
+      ],
+    });
+    expect(screen.getByTestId('txns-overview')).toBeDefined();
+    expect(screen.getByText('acme.io')).toBeDefined();
+    expect(screen.getByText(/Acme/)).toBeDefined();
+    expect(screen.getByText('Log In')).toBeDefined();
+    expect(screen.getByText('ACCEPT')).toBeDefined();
+    expect(screen.getByText('REJECT')).toBeDefined();
+    // Single txn -> no prev/next nav.
+    expect(screen.queryByLabelText('next transaction')).toBeNull();
+  });
+
+  it('navega entre txns con prev/next', async () => {
+    await render(TxnsOverviewComponent, {
+      providers: [
+        provideBlockAuthClientForTest(
+          makeClient({
+            requests: [
+              { id: 1, pre_params: JSON.stringify({ txnType: 'Log In' }) },
+              { id: 2, pre_params: JSON.stringify({ txnType: 'Sign message' }) },
+            ],
+          }),
+        ),
+      ],
+    });
+    expect(screen.getByText('Log In')).toBeDefined();
+    await fireEvent.click(screen.getByLabelText('next transaction'));
+    expect(screen.getByText('Sign message')).toBeDefined();
+    await fireEvent.click(screen.getByLabelText('next transaction'));
+    expect(screen.getByText('Log In')).toBeDefined();
+    await fireEvent.click(screen.getByLabelText('previous transaction'));
+    expect(screen.getByText('Sign message')).toBeDefined();
+  });
+
+  it('un pre_params invalido no rompe el render (fallback a valores por defecto)', async () => {
+    await render(TxnsOverviewComponent, {
+      providers: [
+        provideBlockAuthClientForTest(makeClient({ requests: [{ id: 1, pre_params: 'not-json' }] })),
+      ],
+    });
+    expect(screen.getByText('dashboard.block-auth.io')).toBeDefined();
+    expect(screen.getByText('Log In')).toBeDefined();
+  });
+
+  it('addError de Txn muestra el error correspondiente en TxnsOverview', async () => {
+    await render(TxnsOverviewComponent, {
+      providers: [
+        provideBlockAuthClientForTest(makeClient({ requests: [{ id: 1, pre_params: JSON.stringify({}) }] })),
+      ],
+    });
+    await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+    await fireEvent.click(screen.getByText('ACCEPT'));
+    expect(screen.getByText('No application key found')).toBeDefined();
+  });
+});