@block-auth.io/angular 0.1.0

package/src/lib/components/btns/btn-signin.component.ts

@@ -0,0 +1,108 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  computed,
+  effect,
+  inject,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { BtnBaseComponent } from '../../primitives/btn-base.component';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+
+/**
+ * Botón "Log In" genérico que dispara el flujo de firma vía
+ * `client.requestSignin()`.
+ *
+ * En click: guarda contra reentrada mientras hay una firma en curso
+ * (`isConnecting || isSigning`), marca `isSigning` + el loader del botón, llama
+ * a `requestSignin()` (emite `user:txns:create`) y abre el modal de signin con
+ * `isSigningLoader = true` para que se abra cubierto por el spinner mientras
+ * llegan las txns pendientes (`ContentSignin` lo limpia al recibirlas).
+ *
+ * Escucha en `document` los eventos `ext:txn:response` / `ext:txn:closed`
+ * (listeners registrados en el constructor, limpiados con `DestroyRef`), y un
+ * `effect()` sobre `ui().isSigning`.
+ */
+@Component({
+  selector: 'ba-btn-signin',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BtnBaseComponent],
+  template: `
+    <ba-btn-base
+      btnId="btn-login-signup"
+      type="button-outlined"
+      [text]="text()"
+      size="small"
+      [isIcon]="false"
+      paddingClassNames="bas-px-8"
+      [disabled]="isDisabled() || isConnecting() || ui().isSigning"
+      [applyDisabledStyles]="false"
+      [isFocusOutlinedEnabled]="false"
+      textClassNames="bas-text-white bas-font-semibold bas-leading-6 bas-text-base"
+      [bgClassNames]="bgClassNames()"
+      [isLoader]="isConnecting() || ui().isSigning"
+      (action)="onBtnSigninClicked()"
+    />
+  `,
+})
+export class BtnSigninComponent {
+  text = input('Log In');
+  isDisabled = input(false);
+  isEditable = input(false);
+
+  clicked = output<void>();
+
+  private client = injectBlockAuthClient();
+  ui = injectStore(this.client.state.$ui);
+  isConnecting = signal(false);
+
+  bgClassNames = computed(() =>
+    this.isDisabled()
+      ? 'bas-bg-[var(--bal-primary-500)] hover:bas-bg-[var(--bal-primary-700)]'
+      : 'bas-bg-[rgba(0,78,152,0.8)] hover:bas-bg-[rgba(0,62,121,0.8)]',
+  );
+
+  constructor() {
+    const destroyRef = inject(DestroyRef);
+    const handleTxnResponse = () => this.isConnecting.set(false);
+    const handleTxnClosed = () => {
+      this.client.state.$ui.setKey('isSigning', false);
+      this.isConnecting.set(false);
+    };
+    document.addEventListener('ext:txn:response', handleTxnResponse);
+    document.addEventListener('ext:txn:closed', handleTxnClosed);
+    destroyRef.onDestroy(() => {
+      document.removeEventListener('ext:txn:response', handleTxnResponse);
+      document.removeEventListener('ext:txn:closed', handleTxnClosed);
+    });
+
+    effect(() => {
+      if (!this.ui().isSigning) this.isConnecting.set(false);
+    });
+  }
+
+  onBtnSigninClicked(): void {
+    if (this.isEditable()) return;
+    if (this.isConnecting() || this.ui().isSigning) return;
+
+    this.isConnecting.set(true);
+    this.client.state.$ui.setKey('isSigning', true);
+
+    this.client.requestSignin();
+
+    const uiState = this.client.state.$ui.get();
+    const serviceName = uiState.serviceName ?? 'blockauth';
+    const enabled = (uiState.uiConfig as { config?: Record<string, { enabled?: boolean }> } | null)
+      ?.config?.[serviceName]?.enabled;
+    if (enabled) {
+      this.client.openModal('signin');
+      this.client.state.$ui.setKey('isSigningLoader', true);
+    }
+    this.clicked.emit();
+  }
+}

package/src/lib/components/btns/btn-wallet-connect.component.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { BtnWalletConnectComponent } from './btn-wallet-connect.component';
+import { provideBlockAuthClientForTest } from '../../testing';
+
+describe('BtnWalletConnect', () => {
+  it('al hacer click delega en client.wallet.evm.connectWalletConnect()', async () => {
+    const connectSpy = vi.fn(async () => undefined);
+    const fakeClient = {
+      wallet: { evm: { connectWalletConnect: connectSpy } },
+      state: { $wallet: map({ address: null, isConnecting: false }) },
+    } as any;
+    await render(BtnWalletConnectComponent, {
+      providers: [provideBlockAuthClientForTest(fakeClient)],
+    });
+    await fireEvent.click(screen.getByRole('button'));
+    await waitFor(() => expect(connectSpy).toHaveBeenCalled());
+  });
+});

package/src/lib/components/btns/btn-wallet-connect.component.ts

@@ -0,0 +1,109 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { BtnBaseComponent } from '../../primitives/btn-base.component';
+import { providersStyles } from '../../primitives/providersStyles';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+
+/**
+ * Botón WalletConnect. El click delega en
+ * `client.wallet.evm.connectWalletConnect()`. Los colores/iconos de marca por
+ * wallet salen del primitivo `providersStyles` indexado por `walletService`.
+ */
+const bgByWallet: Record<string, string> = {
+  trustwallet: 'bas-bg-[#140dda] hover:bas-bg-[#140dda]',
+  binance: 'bas-bg-[#464646] hover:bas-bg-[#191919]',
+  uniswap: 'bas-bg-[#f64399] hover:bas-bg-[#d76fa1]',
+};
+const styles = {
+  disabledBgClassNames: 'bas-bg-[rgba(235,89,0,0.75)] hover:bas-bg-[rgba(216,81,0,0.75)]',
+  ringClassNames: 'bal-ba-hover-ring-gray-400',
+  paddingClassNames: 'bas-px-12',
+  textClassNames: 'bas-text-white bas-font-semibold bas-leading-6 bas-text-base',
+  loaderWidth: 70,
+  loaderColor: '#fefefe',
+};
+
+@Component({
+  selector: 'ba-btn-wallet-connect',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BtnBaseComponent],
+  template: `
+    @if (isDropdownProfile()) {
+      <button
+        [id]="'btn-provider-' + walletServiceFormatted() + '-dropdown'"
+        class="bas-h-full bas-w-full bas-border-0 bas-bg-transparent bas-p-0"
+        (click)="onWalletSigning()"
+      ><ng-content /></button>
+    } @else {
+      <ba-btn-base
+        [btnId]="'btn-provider-' + walletServiceFormatted()"
+        [text]="btnText()"
+        type="button-outlined"
+        size="small"
+        [bgClassNames]="wallet().isConnecting ? disabledBg : bgClassNames()"
+        [ringClassNames]="ring"
+        [paddingClassNames]="padding"
+        [textClassNames]="textCls"
+        [isLoader]="wallet().isConnecting"
+        [loaderWidth]="loaderWidth"
+        [loaderColor]="loaderColor"
+        [isIcon]="iconEnabled()"
+        [isFocusOutlinedEnabled]="false"
+        [disabled]="disabled()"
+        (action)="onWalletSigning()"
+      >
+        <img
+          slot="icon"
+          [src]="style()?.imgSrc ?? ''"
+          height="24"
+          width="24"
+          class="bas-rounded-lg"
+          [alt]="style()?.name ?? walletService()"
+        />
+      </ba-btn-base>
+    }
+  `,
+})
+export class BtnWalletConnectComponent {
+  isDropdownProfile = input(false);
+  text = input('Connect Wallet');
+  isTextInsteadOfAccount = input(false);
+  iconEnabled = input(true);
+  disabled = input(false);
+  isEditable = input(false);
+  walletService = input('Trust Wallet');
+
+  clicked = output<void>();
+
+  private client = injectBlockAuthClient();
+  wallet = injectStore(this.client.state.$wallet);
+
+  ring = styles.ringClassNames;
+  padding = styles.paddingClassNames;
+  textCls = styles.textClassNames;
+  disabledBg = styles.disabledBgClassNames;
+  loaderWidth = styles.loaderWidth;
+  loaderColor = styles.loaderColor;
+
+  walletServiceFormatted = computed(() => this.walletService().toLowerCase().replace(' ', ''));
+  style = computed(() => providersStyles[this.walletServiceFormatted()]);
+  bgClassNames = computed(
+    () => bgByWallet[this.walletServiceFormatted()] ?? 'bas-bg-[#140dda] hover:bas-bg-[#140dda]',
+  );
+  btnText = computed(() => {
+    const short = (a: string | null) => (a ? `${a.slice(0, 6)}…${a.slice(-4)}` : '');
+    return this.isTextInsteadOfAccount() ? this.text() : short(this.wallet().address) || this.text();
+  });
+
+  async onWalletSigning(): Promise<void> {
+    if (this.isEditable()) return;
+    if (this.wallet().isConnecting) return;
+    try {
+      await this.client.wallet.evm.connectWalletConnect();
+    } catch {
+      /* connection cancelled/failed */
+    }
+    this.clicked.emit();
+  }
+}

package/src/lib/components/btns/index.ts

@@ -0,0 +1,11 @@
+// Barrel de los botones de proveedor de @block-auth.io/angular (Task A7),
+// espejo 1:1 de packages/react/src/components/btns/*.
+export { BtnBaseProviderComponent } from './btn-base-provider.component';
+export { BtnBlockAuthComponent } from './btn-block-auth.component';
+export { BtnGmailComponent } from './btn-gmail.component';
+export { BtnGoogleBaseComponent } from './btn-google-base.component';
+export { BtnMetamaskComponent } from './btn-metamask.component';
+export { BtnMicrosoftComponent } from './btn-microsoft.component';
+export { BtnPhantomComponent } from './btn-phantom.component';
+export { BtnSigninComponent } from './btn-signin.component';
+export { BtnWalletConnectComponent } from './btn-wallet-connect.component';

package/src/lib/components/contents/content-signin.component.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { ContentSigninComponent } from './content-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' })),
+}));
+
+function makeClient() {
+  return { state: { $ws: map({}), $ui: map({}) } } as any;
+}
+
+// Port de packages/react/src/components/contents/ContentSignin.test.tsx (con
+// el cross-check del port Vue que verifica el overview real: A10 cableó el
+// placeholder de A9 al `<ba-txns-overview>` real).
+describe('ContentSignin', () => {
+  it('renderiza el contenido de signin', async () => {
+    await render(ContentSigninComponent, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    expect(screen.getByTestId('content-signin')).toBeDefined();
+  });
+
+  it('sin spinner (estado por defecto) renderiza el overview de txns real', async () => {
+    await render(ContentSigninComponent, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    expect(screen.getByTestId('txns-overview')).toBeDefined();
+  });
+});

package/src/lib/components/contents/content-signin.component.ts

@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, signal } from '@angular/core';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+import { OvalSpinnerComponent } from '../../primitives/oval-spinner.component';
+import { TxnsOverviewComponent } from '../txns/txns-overview.component';
+
+/**
+ * Contenido de sign-in dirigido por el core (overview de transacciones).
+ * Muestra un `<ba-oval-spinner>` mientras `isAcceptingTxn || isSigningLoader`,
+ * luego el overview de transacciones. En el montaje emite `user:txns { token }`
+ * y auto-limpia el signing loader al recibir transacciones (debounce 200ms) o
+ * tras 1.5s.
+ *
+ * El `effect()` reprograma los timers cada vez que cambian `ws.requests` (o
+ * `isLoaded`), y emite `user:txns` una única vez guardado en `isLoaded`.
+ * Escribir `isLoaded.set(true)` dentro del propio effect que lee `isLoaded`
+ * dispara una segunda ejecución inmediata (limpieza+reprogramación de timers).
+ */
+@Component({
+  selector: 'ba-content-signin',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [OvalSpinnerComponent, TxnsOverviewComponent],
+  template: `
+    <div data-testid="content-signin" class="bas-flex bas-h-full bas-w-full">
+      @if (showSpinner()) {
+        <ba-oval-spinner [showLogo]="true" [animateBg]="false" />
+      } @else {
+        <ba-txns-overview [closeTxns]="closeTxns()" />
+      }
+    </div>
+  `,
+})
+export class ContentSigninComponent {
+  closeTxns = input<() => void>(() => {});
+
+  private readonly client = injectBlockAuthClient();
+  private readonly ws = injectStore(this.client.state.$ws);
+  private readonly ui = injectStore(this.client.state.$ui);
+  private readonly isLoaded = signal(false);
+
+  protected showSpinner = computed(() => {
+    const ui = this.ui() as Record<string, any>;
+    return !!ui.isAcceptingTxn || !!ui.isSigningLoader;
+  });
+
+  constructor() {
+    effect((onCleanup) => {
+      const requests = (this.ws() as Record<string, any>).requests ?? [];
+      const loaded = this.isLoaded();
+      const t1 = setTimeout(() => {
+        if (requests.length > 0) this.client.state.$ui.setKey('isSigningLoader', false);
+      }, 200);
+      const t2 = setTimeout(() => {
+        this.client.state.$ui.setKey('isSigningLoader', false);
+      }, 1500);
+      if (!loaded && this.client.provider?.wsc) {
+        const s = this.client.state.$ws.get();
+        this.client.provider.wsc.emit('user:txns', { token: (s as Record<string, any>).token });
+        this.isLoaded.set(true);
+      }
+      onCleanup(() => {
+        clearTimeout(t1);
+        clearTimeout(t2);
+      });
+    });
+  }
+}

package/src/lib/components/contents/content-signup.component.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/angular';
+import { map } from 'nanostores';
+
+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' })),
+}));
+
+// Espía makeQrDataUrl para evitar canvas/qrcode en jsdom y verificar el
+// cableado selección de servicio -> QR. deepLinkFor se deja real (función pura).
+const FAKE_QR_DATA_URL = 'data:image/png;base64,FAKEQR==';
+vi.mock('@block-auth.io/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@block-auth.io/core')>();
+  return { ...actual, makeQrDataUrl: vi.fn(async () => FAKE_QR_DATA_URL) };
+});
+
+import { ContentSignupComponent } from './content-signup.component';
+import { makeQrDataUrl } from '@block-auth.io/core';
+import { provideBlockAuthClientForTest } from '../../testing';
+
+// El $ui es propio del client falso (no el singleton del core), así que el
+// uiConfig se fija directamente en el map, sin setUiConfig ni reset global.
+function makeClient(ui: Record<string, unknown> = {}) {
+  return {
+    state: {
+      $ui: map<Record<string, unknown>>({ ...ui }),
+      $ws: map({}),
+      $wallet: map({}),
+      $openModals: map({}),
+    },
+  } as any;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  (makeQrDataUrl as ReturnType<typeof vi.fn>).mockResolvedValue(FAKE_QR_DATA_URL);
+});
+
+// Port de packages/react/src/components/contents/ContentSignup.test.tsx.
+describe('ContentSignup', () => {
+  it('renderiza el contenido de signup', async () => {
+    await render(ContentSignupComponent, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    expect(screen.getByTestId('content-signup')).toBeDefined();
+  });
+
+  it('no llama a makeQrDataUrl cuando el servicio inicial no es web3', async () => {
+    // El servicio por defecto es 'blockauth' (FALLBACK_PROVIDERS[0]), no web3.
+    const client = makeClient({ uiConfig: { domain: 'app.com' } });
+    await render(ContentSignupComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    expect(makeQrDataUrl).not.toHaveBeenCalled();
+  });
+
+  it('solo muestra los proveedores Web2 (google/microsoft/blockauth), no web3', async () => {
+    const client = makeClient({
+      uiConfig: {
+        domain: 'app.com',
+        config: {
+          blockauth: { enabled: true, orderIndex: 0 },
+          google: { enabled: true, orderIndex: 1 },
+          microsoft: { enabled: true, orderIndex: 2 },
+          metamask: { enabled: true, orderIndex: 3 },
+          phantom: { enabled: true, orderIndex: 4 },
+        },
+      },
+    });
+    await render(ContentSignupComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    expect(screen.getByAltText('BlockAuth')).toBeDefined();
+    expect(screen.getByAltText('Google')).toBeDefined();
+    expect(screen.getByAltText('Microsoft')).toBeDefined();
+    expect(screen.queryByAltText('MetaMask')).toBeNull();
+    expect(screen.queryByAltText('Phantom')).toBeNull();
+  });
+});

package/src/lib/components/contents/content-signup.component.ts

@@ -0,0 +1,225 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  signal,
+  untracked,
+} from '@angular/core';
+import {
+  $locale,
+  deepLinkFor,
+  makeQrDataUrl,
+  t as translate,
+  type TextKey,
+} from '@block-auth.io/core';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+import { providersStyles } from '../../primitives/providersStyles';
+import { ProgressbarComponent } from '../../primitives/progressbar.component';
+import { ProvidersSectionComponent } from '../sections/providers-section.component';
+import { LoginSectionComponent } from '../sections/login-section.component';
+import { FooterSectionComponent } from '../sections/footer-section.component';
+import type { WebTypeItem } from '../sections/internals/providers-filters.component';
+
+/**
+ * Contenido de sign-up: el `<ba-progressbar>` de 3 pasos, la
+ * `<ba-providers-section>` (cabecera + filtros + grid), la
+ * `<ba-login-section>` (logo + CTA + descripción) y la `<ba-footer-section>`,
+ * en el grid responsive de dos columnas.
+ */
+const ENABLED_PROVIDERS = ['google', 'microsoft', 'blockauth'];
+const WEB2 = ['google', 'microsoft'];
+const FALLBACK_PROVIDERS = ['blockauth', 'google', 'microsoft'];
+
+function applyFilters(providers: string[], { webType, search }: { webType: string; search: string }): string[] {
+  let result = providers;
+  if (webType === 'web2') result = result.filter((item) => WEB2.includes(item));
+  else if (webType === 'web3') result = result.filter((item) => !WEB2.includes(item));
+  if (search) {
+    const q = search.toLowerCase();
+    result = result.filter((item) => item.toLowerCase().includes(q));
+  }
+  return result;
+}
+
+@Component({
+  selector: 'ba-content-signup',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ProgressbarComponent, ProvidersSectionComponent, LoginSectionComponent, FooterSectionComponent],
+  template: `
+    <div
+      data-testid="content-signup"
+      [attr.data-device]="device()"
+      [class]="
+        'bas-grid bas-h-full ' +
+        (!isEditable()
+          ? 'bas-w-full bas-grid-cols-1 bas-grid-rows-[52px_140px_228px_48px] sm1:bas-w-fit sm1:bas-grid-cols-[240px_384px] sm1:bas-grid-rows-[52px_auto_auto] lg:bas-grid-cols-[240px_640px]'
+          : 'bas-w-fit')
+      "
+    >
+      <ba-providers-section
+        [container]="container()"
+        [uiConfigProvidersInfo]="uiConfigProvidersInfo()"
+        [selectedService]="selectedService()"
+        (selectedServiceChange)="selectedService.set($event)"
+        [showedProviders]="showedProviders()"
+        (changeWebType)="onChangeWebType($event)"
+        (changeProviderSearch)="onChangeProviderSearch($event)"
+        [isEditable]="isEditable()"
+        [isEditing]="isEditing()"
+        [device]="device()"
+      />
+
+      <section
+        [class]="
+          'bas-flex bas-items-center bas-justify-center ' + (!isEditable() ? 'bas-row-start-1 sm1:bas-row-start-auto' : '')
+        "
+      >
+        <ba-progressbar
+          [step1]="false"
+          [fillStep1]="true"
+          [step2]="!hasBeenConnected() && showImgLoader()"
+          [step3]="!showImgLoader()"
+          [goBackToStep2]="(serviceName() !== selectedService() || !isServiceConnected()) && hasBeenConnected()"
+        />
+      </section>
+
+      <ba-login-section
+        [imgQR]="imgQR() ?? ''"
+        [showImgLoader]="showImgLoader()"
+        [selectedService]="selectedService()"
+        [isServiceConnected]="isServiceConnected()"
+        [isEditable]="isEditable()"
+        [device]="device()"
+        [btnsConnectTxt]="btnsConnectTxt()"
+        [loginTxt]="loginTxt()"
+        [lastStepTxt]="lastStepTxt()"
+      />
+
+      <ba-footer-section
+        [isEditable]="isEditable()"
+        [device]="device() === 'phone' ? 'phone' : 'desktop'"
+        [text1]="footerText1()"
+        [text2]="footerText2()"
+        [href]="footerHref()"
+      />
+    </div>
+  `,
+})
+export class ContentSignupComponent {
+  container = input<HTMLElement | null>(null);
+  isEditable = input(false);
+  isEditing = input(false);
+  device = input<'desktop' | 'tablet' | 'phone'>('desktop');
+
+  private readonly client = injectBlockAuthClient();
+  private readonly ui = injectStore(this.client.state.$ui);
+  private readonly locale = injectStore($locale);
+  private readonly t = (key: TextKey): string => translate(key, this.locale());
+
+  // Etiquetas localizadas del text-map del backend, con fallback al i18n del core.
+  private readonly content = computed(() => (this.ui() as Record<string, any>)?.uiConfig?.config?.content);
+  protected btnsConnectTxt = computed(() => this.content()?.btns?.connect?.[this.locale()] ?? '');
+  protected loginTxt = computed(() => this.content()?.login?.[this.locale()] ?? this.t('login'));
+  protected lastStepTxt = computed(() => this.content()?.lastStep?.[this.locale()] ?? this.t('lastStep'));
+  protected footerText1 = computed(() => this.content()?.footer?.first?.[this.locale()] ?? this.t('footerFirst'));
+  protected footerText2 = computed(() => this.content()?.footer?.second?.[this.locale()] ?? this.t('footerSecond'));
+  protected footerHref = computed(() => this.content()?.footer?.url ?? 'https://block-auth.io');
+
+  protected serviceName = computed(() => (this.ui() as Record<string, any>)?.serviceName);
+  protected isServiceConnected = computed(() => !!(this.ui() as Record<string, any>)?.isServiceConnected);
+  private readonly domain = computed(
+    () => (this.ui() as Record<string, any>)?.uiConfig?.domain as string | undefined,
+  );
+
+  protected uiConfigProvidersInfo = computed(() => {
+    const config = (this.ui() as Record<string, any>)?.uiConfig?.config;
+    if (!config) return undefined;
+    return {
+      providersColumns: Number(config.providersColumns) || undefined,
+      showProviderNameOnMobile: config.showProviderNameOnMobile,
+      enableSearch: config.enableSearch,
+      enableWebTypeFilter: config.enableWebTypeFilter,
+    };
+  });
+
+  private readonly allProviders = computed<string[]>(() => {
+    const config = (this.ui() as Record<string, any>)?.uiConfig?.config;
+    if (config) {
+      const enabled = Object.keys(config)
+        .filter(
+          (key) =>
+            ENABLED_PROVIDERS.includes(key) &&
+            providersStyles[key] &&
+            typeof config[key] === 'object' &&
+            config[key] !== null &&
+            'enabled' in config[key] &&
+            'orderIndex' in config[key],
+        )
+        .filter((key) => config[key].enabled)
+        .sort((a, b) => config[a].orderIndex - config[b].orderIndex);
+      if (enabled.length > 0) return enabled;
+    }
+    return FALLBACK_PROVIDERS;
+  });
+
+  protected selectedService = signal<string>(this.allProviders()[0] ?? 'blockauth');
+  protected showedProviders = signal<string[]>(this.allProviders());
+  protected hasBeenConnected = signal(false);
+  protected imgQR = signal<string | null>(null);
+  // Estado de filtros no reactivo: mutarlo no dispara reactividad.
+  private filterState: { webType: string; search: string } = { webType: 'all', search: '' };
+
+  protected showImgLoader = computed(
+    () => !(this.isServiceConnected() && this.serviceName() === this.selectedService()),
+  );
+
+  constructor() {
+    // Efecto 1: re-deriva showedProviders/selectedService cuando cambia allProviders.
+    effect(() => {
+      const providers = this.allProviders();
+      this.showedProviders.set(applyFilters(providers, this.filterState));
+      const cur = untracked(() => this.selectedService());
+      this.selectedService.set(providers.includes(cur) ? cur : providers[0] ?? 'blockauth');
+    });
+
+    // Efecto 2: marca hasBeenConnected cuando el servicio seleccionado conecta.
+    effect(() => {
+      if (this.serviceName() === this.selectedService() && this.isServiceConnected()) {
+        this.hasBeenConnected.set(true);
+      }
+    });
+
+    // Efecto 3: genera el QR para providers web3 (metamask/phantom), con guard
+    // de cancelación.
+    effect((onCleanup) => {
+      const svc = this.selectedService();
+      const dom = this.domain();
+      const isWeb3 = svc === 'metamask' || svc === 'phantom';
+      if (!isWeb3 || !dom) {
+        this.imgQR.set(null);
+        return;
+      }
+      let cancelled = false;
+      const deepLink = deepLinkFor(svc, dom);
+      makeQrDataUrl(deepLink).then((dataUrl) => {
+        if (!cancelled) this.imgQR.set(dataUrl);
+      });
+      onCleanup(() => {
+        cancelled = true;
+      });
+    });
+  }
+
+  onChangeWebType(webType: WebTypeItem): void {
+    this.filterState = { ...this.filterState, webType: webType.value };
+    this.showedProviders.set(applyFilters(this.allProviders(), this.filterState));
+  }
+  onChangeProviderSearch(value: string): void {
+    this.filterState = { ...this.filterState, search: value };
+    this.showedProviders.set(applyFilters(this.allProviders(), this.filterState));
+  }
+}