@block-auth.io/angular 0.2.10 → 0.3.0

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

@@ -5,6 +5,7 @@ import {
   effect,
   input,
   signal,
+  untracked,
 } from '@angular/core';
 import {
   $extension,
@@ -12,6 +13,7 @@ import {
   openExtensionOnTxn,
   t as translate,
   type TextKey,
+  type TxnDataRequest,
 } from '@block-auth.io/core';
 import { injectBlockAuthClient } from '../../provide-block-auth';
 import { injectStore } from '../../inject-store';
@@ -22,7 +24,21 @@ import { PermissionsRequiredModalComponent } from './internals/permissions-requi
 import {
   SolicitedDataModalComponent,
   type ParamChange,
+  type ShareChange,
 } from './internals/solicited-data-modal.component';
+import {
+  EMPTY_SOLICITED_DATA_FORM,
+  getSolicitedAcceptParams,
+  getSolicitedFields,
+  getSolicitedParams,
+  isSolicitedDataComplete,
+  saveSolicitedValue,
+  setSolicitedShared,
+  setSolicitedValue,
+  undoSolicitedValue,
+  type SolicitedDataForm,
+  type SolicitedParam,
+} from '@block-auth.io/core';
 
 // Orquestador de txns: lee las solicitudes pendientes de `$ws.requests` y la
 // config de UI de `$ui.uiConfig` (vía injectStore). Se conserva la navegación
@@ -84,13 +100,15 @@ const TXN_ERROR_TEXT_KEYS: Record<string, TextKey> = {
         [isCountdown]="false"
       />
       } @else if (!isEmpty()) {
-      <div class="bas-flex bas-flex-col bas-items-center bas-gap-3">
+      <div
+        class="bal-ba-glass-rise bas-flex bas-flex-col bas-items-center bas-gap-3"
+      >
         <img
           [src]="
             preParams().iconUrl ||
             'https://dashboard.block-auth.io/img/blockauth_logo.png'
           "
-          class="bas-h-16"
+          class="bal-ba-glass-logo bas-h-16"
           alt="app logo"
         />
         <h2 class="bas-m-0 bas-text-base bas-text-[var(--bal-primary-600)]">
@@ -138,9 +156,12 @@ const TXN_ERROR_TEXT_KEYS: Record<string, TextKey> = {
         <ba-txn
           [hasSolicitedData]="hasSolicitedData()"
           [allRequiredFilled]="allRequiredFilled()"
+          [solicitedDataPending]="solicitedDataPending()"
           [closeTxns]="closeTxns()"
           [selectedTxnPreParams]="preParams()"
-          [userParamValues]="userParamValues()"
+          [userParamValues]="acceptParams().userParams"
+          [grantedParams]="acceptParams().grantedParams"
+          [revokedParams]="acceptParams().revokedParams"
           [addError]="addError"
           (permissionsRequiredClicked)="showPermissions.set(true)"
           (solicitedDataClicked)="showSolicitedData.set(true)"
@@ -148,7 +169,7 @@ const TXN_ERROR_TEXT_KEYS: Record<string, TextKey> = {
       </div>
       } } @if (showPermissions()) {
       <div
-        class="bal-ba-transition-2 bal-ba-backdrop-blur-base bal-ba-backdrop-blur-sm bas-absolute bas-z-30 bas-box-border bas-h-full bas-w-full"
+        class="bal-ba-glass-backdrop bal-ba-backdrop-blur-base bal-ba-backdrop-blur-sm bas-absolute bas-z-30 bas-box-border bas-h-full bas-w-full"
         (click)="showPermissions.set(false)"
       ></div>
       <div class="bas-absolute bas-top-44 bas-z-40">
@@ -156,18 +177,27 @@ const TXN_ERROR_TEXT_KEYS: Record<string, TextKey> = {
       </div>
       } @if (showSolicitedData()) {
       <div
-        class="bal-ba-transition-2 bal-ba-backdrop-blur-base bal-ba-backdrop-blur-sm bas-absolute bas-z-30 bas-box-border bas-h-full bas-w-full"
+        class="bal-ba-glass-backdrop bal-ba-backdrop-blur-base bal-ba-backdrop-blur-sm bas-absolute bas-z-30 bas-box-border bas-h-full bas-w-full"
         (click)="showSolicitedData.set(false)"
       ></div>
-      <div class="bas-absolute bas-top-32 bas-z-40">
-        <ba-solicited-data-modal
-          [requiredParams]="requiredParams()"
-          [optionalParams]="optionalParams()"
-          [userParamValues]="userParamValues()"
-          (paramChange)="handleParamChange($event)"
-          (validationChange)="allRequiredFilled.set($event)"
-        />
-      </div>
+      <ba-solicited-data-modal
+        class="bal-ba-glass-modal-slot bas-absolute bas-inset-y-6 bas-z-40"
+        [requiredParams]="requiredParams()"
+        [optionalParams]="optionalParams()"
+        [params]="txnData()?.params"
+        [userParamValues]="solicitedForm().values"
+        [sharedParams]="solicitedForm().shared"
+        [savedParams]="solicitedForm().saved"
+        [errorTxt]="acceptTxnError() ? t('requiredDataError') : undefined"
+        [closable]="true"
+        [acceptable]="true"
+        (paramChange)="handleParamChange($event)"
+        (shareChange)="handleShareChange($event)"
+        (saveParam)="handleSaveParam($event)"
+        (undoParam)="handleUndoParam($event)"
+        (closed)="showSolicitedData.set(false)"
+        (accepted)="showSolicitedData.set(false)"
+      />
       }
     </div>
   `,
@@ -187,8 +217,12 @@ export class TxnsOverviewComponent {
   protected readonly selectedIndex = signal(0);
   protected readonly showPermissions = signal(false);
   protected readonly showSolicitedData = signal(false);
-  protected readonly userParamValues = signal<Record<string, string>>({});
-  protected readonly allRequiredFilled = signal(false);
+  protected readonly solicitedForm = signal<SolicitedDataForm>(
+    EMPTY_SOLICITED_DATA_FORM,
+  );
+  protected readonly txnData = signal<TxnDataRequest | null>(null);
+  private readonly isLoadingTxnData = signal(false);
+  private readonly txnDataReload = signal(0);
   protected readonly error = signal<{ value: boolean; messageSlug: string }>({
     value: false,
     messageSlug: '',
@@ -198,6 +232,7 @@ export class TxnsOverviewComponent {
   protected readonly did = computed(() => this.ws().did);
   protected readonly isSigning = computed(() => this.ui().isSigning);
   protected readonly isOtpRequired = computed(() => this.ui().isOtpRequired);
+  protected readonly acceptTxnError = computed(() => this.ui().acceptTxnError);
   protected readonly openExtensionOnTxn = openExtensionOnTxn;
   protected readonly isEmpty = computed(() => this.txns().length === 0);
   protected readonly errorText = computed(() =>
@@ -244,16 +279,86 @@ export class TxnsOverviewComponent {
   protected readonly optionalParams = computed(
     () => this.requiredOptionalParams().optionalParams,
   );
-  protected readonly hasSolicitedData = computed(
-    () => this.requiredParams().length > 0 || this.optionalParams().length > 0,
+  private readonly selectedTxnId = computed(
+    () => this.selectedTxn()?.['id'] as number | string | undefined,
+  );
+  private readonly solicitedParams = computed(() =>
+    getSolicitedParams({
+      params: this.txnData()?.params,
+      requiredParams: this.requiredParams(),
+      optionalParams: this.optionalParams(),
+    }),
+  );
+  protected readonly hasSolicitedData = computed(() =>
+    this.txnData()
+      ? this.solicitedParams().length > 0
+      : this.requiredParams().length > 0 || this.optionalParams().length > 0,
+  );
+  private readonly solicitedFields = computed(() =>
+    getSolicitedFields(
+      this.solicitedParams(),
+      this.solicitedForm(),
+      !!this.txnData(),
+    ),
+  );
+  private readonly isSolicitedComplete = computed(() =>
+    isSolicitedDataComplete(this.solicitedFields()),
+  );
+  protected readonly allRequiredFilled = computed(
+    () =>
+      (!this.isLoadingTxnData() || this.solicitedParams().length === 0) &&
+      this.isSolicitedComplete(),
+  );
+  protected readonly solicitedDataPending = computed(
+    () =>
+      this.hasSolicitedData() &&
+      !this.isLoadingTxnData() &&
+      !this.isSolicitedComplete(),
+  );
+  protected readonly acceptParams = computed(() =>
+    getSolicitedAcceptParams(this.solicitedFields()),
   );
 
   constructor() {
-    // ACCEPT is gated on `allRequiredFilled`. With no required params there's
-    // nothing to fill, so it must default to true.
+    effect((onCleanup) => {
+      const txnId = this.selectedTxnId();
+      this.txnDataReload();
+      untracked(() => {
+        this.txnData.set(null);
+        if (txnId == null) {
+          this.isLoadingTxnData.set(false);
+          return;
+        }
+        let active = true;
+        this.isLoadingTxnData.set(true);
+        Promise.resolve()
+          .then(() => this.client.txns.dataRequest(txnId))
+          .catch(() => null)
+          .then((result) => {
+            if (!active) return;
+            this.txnData.set(result ?? null);
+            this.isLoadingTxnData.set(false);
+          });
+        onCleanup(() => {
+          active = false;
+        });
+      });
+    });
+
     effect(() => {
-      const params = this.requiredParams();
-      this.allRequiredFilled.set(params.length === 0);
+      if (!this.acceptTxnError()) return;
+      untracked(() => {
+        this.showSolicitedData.set(true);
+        this.txnDataReload.update((n) => n + 1);
+      });
+    });
+
+    effect(() => {
+      this.selectedTxnId();
+      untracked(() => {
+        this.solicitedForm.set(EMPTY_SOLICITED_DATA_FORM);
+        this.client.state.$ui.setKey('acceptTxnError', null);
+      });
     });
   }
 
@@ -263,8 +368,33 @@ export class TxnsOverviewComponent {
     this.client.state.$ui.setKey('isAcceptingTxn', false);
   };
 
+  private updateParam(
+    slug: string,
+    update: (
+      form: SolicitedDataForm,
+      item: SolicitedParam,
+    ) => SolicitedDataForm,
+  ): void {
+    const item = this.solicitedParams().find((param) => param.slug === slug);
+    if (item) this.solicitedForm.update((prev) => update(prev, item));
+  }
+
   handleParamChange({ slug, value }: ParamChange): void {
-    this.userParamValues.update((prev) => ({ ...prev, [slug]: value }));
+    this.updateParam(slug, (form, item) =>
+      setSolicitedValue(form, item, value),
+    );
+  }
+
+  handleShareChange({ slug, shared }: ShareChange): void {
+    this.solicitedForm.update((prev) => setSolicitedShared(prev, slug, shared));
+  }
+
+  handleSaveParam(slug: string): void {
+    this.solicitedForm.update((prev) => saveSolicitedValue(prev, slug));
+  }
+
+  handleUndoParam(slug: string): void {
+    this.updateParam(slug, undoSolicitedValue);
   }
 
   onPrevTxnClicked(): void {

package/src/lib/primitives/arrow-icon.component.test.ts

@@ -9,4 +9,17 @@ describe('ArrowIconComponent', () => {
     const { container } = await render(Host);
     expect(container.querySelector('.bal-ba-arrow-left')).toBeTruthy();
   });
+
+  it('es visible por defecto y se oculta con visible=false', async () => {
+    @Component({
+      standalone: true,
+      imports: [ArrowIconComponent],
+      template: `<ba-arrow-icon direction="right" /><ba-arrow-icon direction="left" [visible]="false" />`,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const wrappers = container.querySelectorAll('[aria-hidden="true"]');
+    expect(wrappers[0].className).not.toContain('bas-invisible');
+    expect(wrappers[1].className).toContain('bas-invisible');
+  });
 });

package/src/lib/primitives/arrow-icon.component.ts

@@ -7,7 +7,13 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="bas-flex bas-h-[30px] bas-w-[65px] bas-items-center bas-justify-center">
+    <div
+      aria-hidden="true"
+      [class]="
+        'bal-ba-transition-3 bas-flex bas-h-[30px] bas-w-[65px] bas-items-center bas-justify-center ' +
+        (visible() ? 'bas-opacity-100' : 'bas-invisible bas-opacity-0')
+      "
+    >
       <div
         [class]="
           'bal-ba-arrow bas-relative bas-flex bas-h-[65px] bas-w-[65px] bas-cursor-pointer bas-justify-center ' +
@@ -25,6 +31,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 })
 export class ArrowIconComponent {
   direction = input<'right' | 'left'>('right');
+  visible = input(true);
 
   spanClassNames = computed(
     () =>

package/src/public-api.ts

@@ -82,4 +82,5 @@ export { PermissionsRequiredModalComponent } from './lib/components/txns/interna
 export {
   SolicitedDataModalComponent,
   type ParamChange,
+  type ShareChange,
 } from './lib/components/txns/internals/solicited-data-modal.component';