@block-auth.io/angular 0.1.0

package/src/lib/components/modals/modal-overlay.component.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component, input } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { ModalOverlayComponent } from './modal-overlay.component';
+
+// Port de packages/react/src/components/modals/ModalOverlay.tsx (mapa:
+// packages/vue/src/components/modals/ModalOverlay.test.ts): verifica el
+// contrato de portal + backdrop-click + slot que comparten los 4 modales.
+// Los signal inputs no se pueden fijar por `componentInputs` de forma fiable,
+// así que se usa un host component con binding de template.
+@Component({
+  selector: 'ba-overlay-host',
+  standalone: true,
+  imports: [ModalOverlayComponent],
+  template: `
+    <ba-modal-overlay [open]="open()" testId="modal-x" (closed)="onClose()">
+      <div data-testid="panel-content">hola</div>
+    </ba-modal-overlay>
+  `,
+})
+class OverlayHostComponent {
+  open = input(false);
+  onClose = (): void => undefined;
+}
+
+describe('ModalOverlay', () => {
+  it('no renderiza nada cuando open es false', async () => {
+    await render(OverlayHostComponent);
+    expect(screen.queryByTestId('modal-x')).toBeNull();
+  });
+
+  it('se monta en document.body (portal) y renderiza el slot cuando open es true', async () => {
+    @Component({
+      selector: 'ba-overlay-host-open',
+      standalone: true,
+      imports: [ModalOverlayComponent],
+      template: `
+        <ba-modal-overlay [open]="true" testId="modal-x">
+          <div data-testid="panel-content">hola</div>
+        </ba-modal-overlay>
+      `,
+    })
+    class HostOpen {}
+    await render(HostOpen);
+    const overlay = screen.getByTestId('modal-x');
+    expect(overlay).toBeDefined();
+    expect(overlay.parentElement).toBe(document.body);
+    expect(screen.getByTestId('panel-content').textContent).toBe('hola');
+  });
+
+  it('el panel tiene role="dialog" y aria-modal="true"', async () => {
+    @Component({
+      selector: 'ba-overlay-host-dialog',
+      standalone: true,
+      imports: [ModalOverlayComponent],
+      template: `<ba-modal-overlay [open]="true" testId="modal-x" />`,
+    })
+    class HostDialog {}
+    await render(HostDialog);
+    const dialog = screen.getByRole('dialog');
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+  });
+
+  it('al hacer click en el backdrop emite closed', async () => {
+    const onClose = vi.fn();
+    @Component({
+      selector: 'ba-overlay-host-close',
+      standalone: true,
+      imports: [ModalOverlayComponent],
+      template: `<ba-modal-overlay [open]="true" testId="modal-x" (closed)="onClose()" />`,
+    })
+    class HostClose {
+      onClose = onClose;
+    }
+    await render(HostClose);
+    const backdrop = screen.getByTestId('modal-x').querySelector('[aria-hidden="true"]');
+    expect(backdrop).not.toBeNull();
+    await fireEvent.click(backdrop!);
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+});

package/src/lib/components/modals/modal-overlay.component.ts

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { TeleportBodyDirective } from '../../teleport-body.directive';
+
+// Overlay mínimo usado por los 4 modales. La fuente React usaba `<ModalBase>` de
+// `@block-auth.io/blockauth-lib-react` (un Dialog headless-ui con transiciones
+// + portal); esa lib aún no es dependencia de este paquete, así que este es un
+// stand-in ligero que preserva las clases `bas-` del panel original y el
+// contrato open/close. La visibilidad la maneja el estado core `$openModals`
+// en cada modal llamador.
+//
+// Se monta en `document.body` vía `baTeleportBody` (equivalente a
+// createPortal(..., document.body) / <Teleport to="body">): las apps host
+// montan `FlowBlockAuth` dentro de contenedores transformados/animados que de
+// otro modo atraparían el overlay `fixed` dentro de ese ancestro.
+@Component({
+  selector: 'ba-modal-overlay',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TeleportBodyDirective],
+  template: `
+    @if (open()) {
+      <div
+        baTeleportBody
+        [attr.data-testid]="testId()"
+        [class]="'bas-fixed bas-inset-0 bas-z-50 bas-bg-black/40 ' + containerClassName()"
+      >
+        <div class="bas-absolute bas-inset-0" aria-hidden="true" (click)="closed.emit()"></div>
+        <div [class]="'bas-relative ' + panelClassName()" role="dialog" aria-modal="true">
+          <ng-content />
+        </div>
+      </div>
+    }
+  `,
+})
+export class ModalOverlayComponent {
+  open = input.required<boolean>();
+  panelClassName = input('');
+  containerClassName = input(
+    'bas-flex bas-min-h-full bas-items-end xmd:bas-items-baseline xmd:bas-justify-center',
+  );
+  testId = input<string | undefined>(undefined);
+  closed = output<void>();
+}

package/src/lib/components/modals/modal-restoration-expired.component.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { atom } from 'nanostores';
+import type { ModalName } from '@block-auth.io/core';
+import { ModalRestorationExpiredComponent } from './modal-restoration-expired.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' })),
+}));
+
+// ModalRestorationExpired inyecta el client directamente (BlockAuthService no
+// expone finalizeRestorationExpired()), así que el fake sólo necesita
+// state.$openModals + los métodos.
+function makeClient() {
+  const $openModals = atom<ModalName[]>([]);
+  const openModal = (m: ModalName) => $openModals.set([...$openModals.get(), m]);
+  const closeModal = vi.fn(() => $openModals.set([]));
+  const finalizeRestorationExpired = vi.fn();
+  const client = { state: { $openModals }, openModal, closeModal, finalizeRestorationExpired } as any;
+  return { client, $openModals, openModal, closeModal, finalizeRestorationExpired };
+}
+
+// Port de packages/react/src/components/modals/ModalRestorationExpired.test.tsx.
+describe('ModalRestorationExpired', () => {
+  it('no renderiza cuando el modal está cerrado', async () => {
+    const { client } = makeClient();
+    await render(ModalRestorationExpiredComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    expect(screen.queryByTestId('modal-restoration-expired')).toBeNull();
+  });
+
+  it('renderiza el contenido cuando el modal restorationExpired está abierto', async () => {
+    const { client } = makeClient();
+    client.openModal('restorationExpired');
+    await render(ModalRestorationExpiredComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    expect(screen.getByTestId('modal-restoration-expired')).toBeDefined();
+    expect(screen.getByText('Restoration Period Expired')).toBeDefined();
+  });
+
+  it('al hacer click en "Continue" llama finalizeRestorationExpired() y luego closeModal()', async () => {
+    const { client } = makeClient();
+    const callOrder: string[] = [];
+    client.finalizeRestorationExpired = vi.fn(() => callOrder.push('finalize'));
+    client.closeModal = vi.fn(() => callOrder.push('closeModal'));
+    client.openModal('restorationExpired');
+
+    await render(ModalRestorationExpiredComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    await fireEvent.click(screen.getByRole('button', { name: /continue/i }));
+
+    expect(client.finalizeRestorationExpired).toHaveBeenCalledOnce();
+    expect(client.closeModal).toHaveBeenCalledOnce();
+    expect(callOrder).toEqual(['finalize', 'closeModal']);
+  });
+
+  it('al hacer click en el backdrop también llama finalizeRestorationExpired() y closeModal()', async () => {
+    const { client, finalizeRestorationExpired, closeModal } = makeClient();
+    client.openModal('restorationExpired');
+
+    await render(ModalRestorationExpiredComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    const backdrop = screen.getByTestId('modal-restoration-expired').querySelector('[aria-hidden="true"]');
+    await fireEvent.click(backdrop!);
+
+    expect(finalizeRestorationExpired).toHaveBeenCalledOnce();
+    expect(closeModal).toHaveBeenCalledOnce();
+  });
+});

package/src/lib/components/modals/modal-restoration-expired.component.ts

@@ -0,0 +1,83 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { ModalOverlayComponent } from './modal-overlay.component';
+import { BtnBaseComponent } from '../../primitives/btn-base.component';
+import { PiWarningFillComponent, FaArrowRightComponent } from '../../icons';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+
+const TEXTS = {
+  title: 'Restoration Period Expired',
+  message:
+    'Account permanently deleted, please complete the registration again to use Blockauth again',
+  button: 'Continue',
+};
+
+/**
+ * Modal de restauración expirada fino, dirigido por el core. Visibilidad por
+ * `openModals().includes('restorationExpired')`. Confirmar (o backdrop) ejecuta
+ * `finalizeRestorationExpired()` (limpia el storage de auth restante y resetea
+ * los flags de borrado/firma) y luego `closeModal()`.
+ *
+ * El `text` de React era un ReactNode (label + icono); igual que en el port Vue
+ * se usa el slot de contenido por defecto de `<ba-btn-base>` (`isIcon=false`)
+ * para renderizar la etiqueta + la flecha, en vez de la prop `text`.
+ *
+ * Se inyecta el client directamente (no via BlockAuthService) porque
+ * `finalizeRestorationExpired()` no está expuesto en el facade.
+ */
+@Component({
+  selector: 'ba-modal-restoration-expired',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ModalOverlayComponent, BtnBaseComponent, PiWarningFillComponent, FaArrowRightComponent],
+  template: `
+    <ba-modal-overlay
+      testId="modal-restoration-expired"
+      [open]="open()"
+      containerClassName="bas-flex bas-h-full bas-items-end bas-justify-center md:bas-items-center"
+      panelClassName="bas-overflow-hidden bas-bg-white bas-rounded-2xl bas-w-[90%] sm:bas-max-w-[540px]"
+      (closed)="onOkClicked()"
+    >
+      <header class="bas-w-full bas-border-b-2 bas-border-solid bas-border-[--bal-primary-100] bas-bg-[--bg-200] bas-py-6 bas-px-8 bas-text-center sm:bas-py-10">
+        <h3 class="bas-text-lg bas-font-bold bas-text-[--bal-primary-900] sm:bas-text-2xl">{{ TEXTS.title }}</h3>
+      </header>
+      <main class="bas-flex bas-flex-col bas-gap-8 bas-p-8 sm:bas-gap-10 sm:bas-p-12">
+        <div class="bas-flex bas-flex-col bas-items-center bas-gap-6 bas-text-center">
+          <ba-pi-warning-fill class="bas-h-12 bas-w-12 bas-text-black sm:bas-h-20 sm:bas-w-20" />
+          <article class="bas-text-sm bas-font-medium bas-leading-relaxed bas-text-black sm:bas-text-base">{{ TEXTS.message }}</article>
+        </div>
+        <footer class="bas-flex bas-w-full bas-justify-center">
+          <ba-btn-base
+            btnId="btn-ok-restoration-expired"
+            size="small"
+            bgClassNames="bas-bg-blue-900"
+            ringClassNames="bal-ba-hover-ring-blue-600 bal-ba-focus-ring-blue-600"
+            textClassNames="bas-text-white bas-font-semibold"
+            classNames="bas-w-full bas-justify-center bas-shadow-md"
+            paddingClassNames="bas-py-3"
+            [isIcon]="false"
+            [disabled]="!open()"
+            (action)="onOkClicked()"
+          >
+            <div class="bas-flex bas-items-center bas-gap-2">
+              <span class="bas-uppercase bas-tracking-wider">{{ TEXTS.button }}</span>
+              <ba-fa-arrow-right class="bas-text-white" />
+            </div>
+          </ba-btn-base>
+        </footer>
+      </main>
+    </ba-modal-overlay>
+  `,
+})
+export class ModalRestorationExpiredComponent {
+  protected readonly TEXTS = TEXTS;
+
+  private readonly client = injectBlockAuthClient();
+  private readonly openModals = injectStore(this.client.state.$openModals);
+  readonly open = computed(() => this.openModals().includes('restorationExpired'));
+
+  onOkClicked(): void {
+    this.client.finalizeRestorationExpired();
+    this.client.closeModal();
+  }
+}

package/src/lib/components/modals/modal-restore.component.test.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { atom } from 'nanostores';
+import type { ModalName, RestoreResult } from '@block-auth.io/core';
+import { ModalRestoreComponent } from './modal-restore.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' })),
+}));
+
+// ModalRestore inyecta el client directamente (BlockAuthService no expone
+// restore()), así que el fake sólo necesita state.$openModals + los métodos.
+function makeClient() {
+  const $openModals = atom<ModalName[]>([]);
+  const openModal = (m: ModalName) => $openModals.set([...$openModals.get(), m]);
+  const closeModal = vi.fn(() => $openModals.set([]));
+  const restore = vi.fn((): Promise<RestoreResult> => Promise.resolve({ success: true }));
+  const client = { state: { $openModals }, openModal, closeModal, restore } as any;
+  return { client, $openModals, openModal, closeModal, restore };
+}
+
+// Port de packages/react/src/components/modals/ModalRestore.test.tsx.
+describe('ModalRestore', () => {
+  it('no renderiza cuando el modal está cerrado', async () => {
+    const { client } = makeClient();
+    await render(ModalRestoreComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    expect(screen.queryByTestId('modal-restore')).toBeNull();
+  });
+
+  it('renderiza el contenido cuando el modal restore está abierto', async () => {
+    const { client } = makeClient();
+    client.openModal('restore');
+    await render(ModalRestoreComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    expect(screen.getByTestId('modal-restore')).toBeDefined();
+    expect(screen.getByText('Do you want to restore your account?')).toBeDefined();
+  });
+
+  it('click en "No" llama solo client.closeModal(), sin invocar restore()', async () => {
+    const { client, closeModal, restore } = makeClient();
+    client.openModal('restore');
+    await render(ModalRestoreComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    await fireEvent.click(screen.getByRole('button', { name: /no/i }));
+
+    expect(closeModal).toHaveBeenCalledOnce();
+    expect(restore).not.toHaveBeenCalled();
+  });
+
+  it('click en "Restore" llama closeModal() antes de await restore(), en ese orden', async () => {
+    const { client } = makeClient();
+    const callOrder: string[] = [];
+    client.closeModal = vi.fn(() => callOrder.push('closeModal'));
+    let resolveRestore: (result: RestoreResult) => void;
+    client.restore = vi.fn(() => {
+      callOrder.push('restore');
+      return new Promise<RestoreResult>((resolve) => { resolveRestore = resolve; });
+    });
+    client.openModal('restore');
+
+    await render(ModalRestoreComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    await fireEvent.click(screen.getByRole('button', { name: /restore/i }));
+
+    expect(client.closeModal).toHaveBeenCalledOnce();
+    expect(client.restore).toHaveBeenCalledOnce();
+    expect(callOrder).toEqual(['closeModal', 'restore']);
+
+    resolveRestore!({ success: true });
+  });
+});

package/src/lib/components/modals/modal-restore.component.ts

@@ -0,0 +1,104 @@
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { ModalOverlayComponent } from './modal-overlay.component';
+import { BtnBaseComponent } from '../../primitives/btn-base.component';
+import { FaTimesComponent, FaUndoComponent } from '../../icons';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+
+const TEXTS = {
+  title: 'Do you want to restore your account?',
+  message: 'By continuing you will be able to return to your usual operations.',
+  yes: 'Restore',
+  no: 'No',
+};
+
+/**
+ * Modal de restauración de cuenta fino, dirigido por el core. Visibilidad por
+ * `openModals().includes('restore')`; el cierre delega en `closeModal()`.
+ * Confirmar cierra el modal y luego `await client.restore()` (el core resuelve
+ * la dirección de borrado/DID, emite `sdk:restore` y espera el desenlace). Los
+ * botones se deshabilitan mientras la restauración está en curso.
+ *
+ * Se inyecta el client directamente (no via BlockAuthService) porque `restore()`
+ * no está expuesto en el facade.
+ */
+@Component({
+  selector: 'ba-modal-restore',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ModalOverlayComponent, BtnBaseComponent, FaTimesComponent, FaUndoComponent],
+  template: `
+    <ba-modal-overlay
+      testId="modal-restore"
+      [open]="open()"
+      containerClassName="bas-flex bas-h-full bas-items-end bas-justify-center md:bas-items-center"
+      panelClassName="bas-overflow-hidden bas-bg-white bas-rounded-2xl bas-w-[90%] sm:bas-max-w-[540px]"
+      (closed)="onNoClicked()"
+    >
+      <div class="bas-w-full bas-border-b-2 bas-border-solid bas-border-[--bal-primary-100] bas-bg-[--bg-200] bas-py-6 bas-px-8 sm:bas-py-10 bas-text-center">
+        <h3 class="bas-text-lg bas-font-bold bas-text-[--bal-primary-900] sm:bas-text-2xl">{{ TEXTS.title }}</h3>
+      </div>
+      <div class="bas-flex bas-flex-col bas-gap-8 bas-p-8 sm:bas-gap-10 sm:bas-p-12">
+        <div class="bas-flex bas-flex-col bas-gap-4 bas-text-center">
+          <p class="bas-text-base bas-text-[--bal-primary-800] sm:bas-text-lg">{{ TEXTS.message }}</p>
+        </div>
+        <div class="bas-flex bas-w-full bas-flex-col-reverse bas-gap-4 sm:bas-flex-row">
+          <ba-btn-base
+            btnId="btn-no-restore-account"
+            [text]="TEXTS.no"
+            size="small"
+            bgClassNames="bas-bg-blue-900"
+            ringClassNames="bal-ba-hover-ring-blue-600 bal-ba-focus-ring-blue-600"
+            textClassNames="bas-text-white bas-font-semibold bas-uppercase bas-tracking-wider"
+            classNames="bas-w-full bas-justify-center bas-shadow-md"
+            paddingClassNames="bas-py-3"
+            [isIcon]="true"
+            [disabled]="!open() || isRestoring()"
+            (action)="onNoClicked()"
+          >
+            <ba-fa-times slot="icon" class="bas-mr-2 bas-text-white" />
+          </ba-btn-base>
+          <ba-btn-base
+            btnId="btn-yes-restore-account"
+            [text]="TEXTS.yes"
+            size="small"
+            bgClassNames="bas-bg-green-600 hover:bas-bg-green-700"
+            ringClassNames="bal-ba-hover-ring-green-600 bal-ba-focus-ring-green-600"
+            textClassNames="bas-text-white bas-font-semibold bas-tracking-wider bas-uppercase"
+            classNames="bas-w-full bas-justify-center bas-shadow-lg"
+            paddingClassNames="bas-py-3"
+            [isIcon]="true"
+            [disabled]="!open() || isRestoring()"
+            (action)="onYesClicked()"
+          >
+            <ba-fa-undo slot="icon" class="bas-mr-2 bas-text-white" />
+          </ba-btn-base>
+        </div>
+      </div>
+    </ba-modal-overlay>
+  `,
+})
+export class ModalRestoreComponent {
+  protected readonly TEXTS = TEXTS;
+
+  private readonly client = injectBlockAuthClient();
+  private readonly openModals = injectStore(this.client.state.$openModals);
+  readonly open = computed(() => this.openModals().includes('restore'));
+  readonly isRestoring = signal(false);
+
+  onNoClicked(): void {
+    if (this.isRestoring()) return;
+    this.client.closeModal();
+  }
+
+  async onYesClicked(): Promise<void> {
+    if (this.isRestoring()) return;
+    this.isRestoring.set(true);
+    this.client.closeModal();
+    try {
+      await this.client.restore();
+    } finally {
+      this.isRestoring.set(false);
+    }
+  }
+}

package/src/lib/components/modals/modal-signin.component.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { atom, map } from 'nanostores';
+import type { ModalName } from '@block-auth.io/core';
+import { ModalSigninComponent } from './modal-signin.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' })),
+}));
+
+// Fake client con stores nanostores-backed: BlockAuthService lee $ws/$ui/$wallet/
+// $openModals, así que los cuatro deben existir. `openModal`/`closeModal`/
+// `cancelTxns` son spies (BlockAuthService captura closeModal/openModal por
+// referencia en construcción, por eso se fijan antes de render).
+function makeClient() {
+  const $openModals = atom<ModalName[]>([]);
+  const openModal = vi.fn((m: ModalName) => $openModals.set([...$openModals.get(), m]));
+  const closeModal = vi.fn(() => $openModals.set([]));
+  const cancelTxns = vi.fn();
+  const client = {
+    state: { $ws: map({}), $ui: map({}), $wallet: map({}), $openModals },
+    openModal, closeModal, cancelTxns,
+  } as any;
+  return { client, $openModals, openModal, closeModal, cancelTxns };
+}
+
+// Port de packages/react/src/components/modals/ModalSignin.test.tsx.
+describe('ModalSignin', () => {
+  it('no renderiza cuando el modal está cerrado', async () => {
+    const { client } = makeClient();
+    await render(ModalSigninComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    expect(screen.queryByTestId('modal-signin')).toBeNull();
+  });
+
+  it('renderiza el modal signin (teleportado a body) cuando está abierto', async () => {
+    const { client } = makeClient();
+    client.openModal('signin');
+    await render(ModalSigninComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    const overlay = screen.getByTestId('modal-signin');
+    expect(overlay).toBeDefined();
+    expect(overlay.parentElement).toBe(document.body);
+  });
+
+  it('al cerrar (backdrop) llama cancelTxns() y luego closeModal(), en ese orden', async () => {
+    const { client } = makeClient();
+    const callOrder: string[] = [];
+    client.cancelTxns = vi.fn(() => callOrder.push('cancelTxns'));
+    client.closeModal = vi.fn(() => callOrder.push('closeModal'));
+    client.openModal('signin');
+
+    await render(ModalSigninComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    const backdrop = screen.getByTestId('modal-signin').querySelector('[aria-hidden="true"]');
+    expect(backdrop).not.toBeNull();
+    await fireEvent.click(backdrop!);
+
+    expect(client.cancelTxns).toHaveBeenCalledOnce();
+    expect(client.closeModal).toHaveBeenCalledOnce();
+    expect(callOrder).toEqual(['cancelTxns', 'closeModal']);
+  });
+});

package/src/lib/components/modals/modal-signin.component.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { ModalOverlayComponent } from './modal-overlay.component';
+import { ContentSigninComponent } from '../contents/content-signin.component';
+import { BlockAuthService } from '../../block-auth.service';
+
+/**
+ * Modal de sign-in fino, dirigido por el core. La visibilidad se deriva de
+ * `openModals().includes('signin')` y el cierre llama a `cancelTxns()` y luego
+ * a `closeModal()`. El ORDEN importa (idéntico al `.tsx`): `cancelTxns()`
+ * primero (emite `user:txns:update { state:'cancelled' }` sobre el socket) y
+ * `closeModal()` después (cierra localmente).
+ *
+ * El contenido real es `<ba-content-signin [closeTxns]="handleClose" />`
+ * (port de A9), que muestra el overview de transacciones / spinner de firma.
+ */
+@Component({
+  selector: 'ba-modal-signin',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ModalOverlayComponent, ContentSigninComponent],
+  template: `
+    <ba-modal-overlay
+      testId="modal-signin"
+      [open]="open()"
+      panelClassName="xmd:bas-top-24 bas-w-full xsm1:bas-w-[380px] bas-overflow-hidden bas-bg-white bas-text-left bal-ba-shadow-base bal-ba-shadow-xl bas-h-[600px] bas-rounded-tl-lg bas-rounded-tr-lg xmd:bas-rounded-br-lg xmd:bas-rounded-bl-lg"
+      (closed)="handleClose()"
+    >
+      <div class="bas-flex bas-h-full bas-w-full bas-items-center bas-justify-center">
+        <div class="bas-relative bas-h-full bas-w-fit">
+          <ba-content-signin [closeTxns]="handleClose" />
+        </div>
+      </div>
+    </ba-modal-overlay>
+  `,
+})
+export class ModalSigninComponent {
+  private readonly ba = inject(BlockAuthService);
+  readonly open = computed(() => this.ba.openModals().includes('signin'));
+
+  readonly handleClose = (): void => {
+    this.ba.cancelTxns();
+    this.ba.closeModal();
+  };
+}

package/src/lib/components/modals/modal-signup.component.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { atom, map } from 'nanostores';
+import type { ModalName } from '@block-auth.io/core';
+import { ModalSignupComponent } from './modal-signup.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' })),
+}));
+
+function makeClient() {
+  const $openModals = atom<ModalName[]>([]);
+  const openModal = vi.fn((m: ModalName) => $openModals.set([...$openModals.get(), m]));
+  const closeModal = vi.fn(() => $openModals.set([]));
+  const client = {
+    state: { $ws: map({}), $ui: map({}), $wallet: map({}), $openModals },
+    openModal, closeModal,
+  } as any;
+  return { client, $openModals, openModal, closeModal };
+}
+
+// Port de packages/react/src/components/modals/ModalSignup.test.tsx.
+describe('ModalSignup', () => {
+  it('no renderiza cuando el modal está cerrado', async () => {
+    const { client } = makeClient();
+    await render(ModalSignupComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    expect(screen.queryByTestId('modal-signup')).toBeNull();
+  });
+
+  it('renderiza el modal signup (teleportado a body) cuando está abierto', async () => {
+    const { client } = makeClient();
+    client.openModal('signup');
+    await render(ModalSignupComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    const overlay = screen.getByTestId('modal-signup');
+    expect(overlay).toBeDefined();
+    expect(overlay.parentElement).toBe(document.body);
+  });
+
+  it('al hacer click en el backdrop llama client.closeModal()', async () => {
+    const { client, closeModal } = makeClient();
+    client.openModal('signup');
+    await render(ModalSignupComponent, { providers: [provideBlockAuthClientForTest(client)] });
+
+    const backdrop = screen.getByTestId('modal-signup').querySelector('[aria-hidden="true"]');
+    expect(backdrop).not.toBeNull();
+    await fireEvent.click(backdrop!);
+
+    expect(closeModal).toHaveBeenCalledOnce();
+  });
+});

package/src/lib/components/modals/modal-signup.component.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { ModalOverlayComponent } from './modal-overlay.component';
+import { ContentSignupComponent } from '../contents/content-signup.component';
+import { BlockAuthService } from '../../block-auth.service';
+
+/**
+ * Modal de sign-up fino, dirigido por el core. La visibilidad se deriva de
+ * `openModals().includes('signup')` y el cierre delega en `closeModal()`.
+ *
+ * El contenido real es `<ba-content-signup [isEditable]="false"
+ * [isEditing]="false" />` (port de A9).
+ * TODO: restaurar el estado de carga `<OvalSpinner>` cuando la lib de
+ *   componentes esté cableada en este paquete (igual que en el `.tsx`).
+ */
+@Component({
+  selector: 'ba-modal-signup',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ModalOverlayComponent, ContentSignupComponent],
+  template: `
+    <ba-modal-overlay
+      testId="modal-signup"
+      [open]="open()"
+      panelClassName="xmd:bas-top-24 xmd:bas-m-1 bas-min-w-fit bas-overflow-hidden bas-bg-white bas-text-left bal-ba-shadow-base bal-ba-shadow-xl xmd:bas-my-8 sm1:bas-h-[364px] bas-w-full xmd:bas-w-fit lg:bas-h-[376px] bas-h-[508px] bas-rounded-tl-lg bas-rounded-tr-lg xmd:bas-rounded-br-lg xmd:bas-rounded-bl-lg"
+      (closed)="onClose()"
+    >
+      <div class="bas-box-border bas-h-full bas-w-full bas-px-4 bas-pb-4 bas-pt-6 sm1:bas-pt-5 xmd:bas-pb-3.5 lg:bas-px-6 lg:bas-pb-5 lg:bas-pt-[26px]">
+        <ba-content-signup [isEditable]="false" [isEditing]="false" />
+      </div>
+    </ba-modal-overlay>
+  `,
+})
+export class ModalSignupComponent {
+  private readonly ba = inject(BlockAuthService);
+  readonly open = computed(() => this.ba.openModals().includes('signup'));
+
+  onClose(): void {
+    this.ba.closeModal();
+  }
+}