@block-auth.io/angular 0.1.0 → 0.1.2

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

@@ -6,19 +6,23 @@ import {
   input,
   signal,
 } from '@angular/core';
+import { $locale, t as translate, type TextKey } from '@block-auth.io/core';
 import { injectBlockAuthClient } from '../../provide-block-auth';
 import { injectStore } from '../../inject-store';
 import { TxnComponent } from './internals/txn.component';
 import { TxnTypeComponent } from './internals/txn-type.component';
 import { TxnErrorComponent } from './internals/txn-error.component';
 import { PermissionsRequiredModalComponent } from './internals/permissions-required-modal.component';
-import { SolicitedDataModalComponent, type ParamChange } from './internals/solicited-data-modal.component';
+import {
+  SolicitedDataModalComponent,
+  type ParamChange,
+} from './internals/solicited-data-modal.component';
 
 // 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
 // prev/next, la composición de overlays permisos/datos-solicitados, la
 // derivación de required/optional params desde `uiConfig` y las clases `bas-`.
-// Se elimina `useLocale` (textos inline) y los wrappers framer-motion.
+// Se elimina los wrappers framer-motion.
 interface TxnPreParams {
   iconUrl?: string;
   domain?: string;
@@ -31,14 +35,16 @@ interface TxnPreParams {
 }
 
 const accountShort = (addr: string | null | undefined): string =>
-  addr && addr.length > 10 ? `${addr.slice(0, 6)}…${addr.slice(-4)}` : (addr ?? '');
-
-const TXN_ERROR_TEXTS: Record<string, string> = {
-  no_transactions_found: 'No transactions found',
-  no_app_key_found: 'No application key found',
-  no_contract_address_found: 'No contract address found',
-  no_transactions_params_found: 'No transaction params found',
-  unknown: 'Something went wrong',
+  addr && addr.length > 10
+    ? `${addr.slice(0, 6)}…${addr.slice(-4)}`
+    : addr ?? '';
+
+const TXN_ERROR_TEXT_KEYS: Record<string, TextKey> = {
+  no_transactions_found: 'noTransactionsFound',
+  no_app_key_found: 'noAppKeyFound',
+  no_contract_address_found: 'noContractAddressFound',
+  no_transactions_params_found: 'noTransactionsParamsFound',
+  unknown: 'somethingWentWrong',
 };
 
 @Component({
@@ -58,79 +64,80 @@ const TXN_ERROR_TEXTS: Record<string, string> = {
       class="bas-flex bas-box-border bas-relative bas-h-full bas-w-full bas-gap-6 bas-flex-col bas-items-center bas-p-6 bas-font-medium bas-justify-center"
     >
       @if (isEmpty() && isSigning()) {
-        <ba-txn-error
-          errorMessageTxt="No transactions found"
-          errorMessageSlug="no_transactions_found"
-          [closeTxns]="closeTxns()"
-          [isCountdown]="false"
-        />
+      <ba-txn-error
+        [errorMessageTxt]="t('noTransactionsFound')"
+        errorMessageSlug="no_transactions_found"
+        [closeTxns]="closeTxns()"
+        [isCountdown]="false"
+      />
       } @else if (!isEmpty() && error().value) {
-        <ba-txn-error
-          [errorMessageTxt]="errorText()"
-          [errorMessageSlug]="error().messageSlug"
+      <ba-txn-error
+        [errorMessageTxt]="errorText()"
+        [errorMessageSlug]="error().messageSlug"
+        [closeTxns]="closeTxns()"
+        [isCountdown]="false"
+      />
+      } @else if (!isEmpty()) {
+      <div class="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"
+          alt="app logo"
+        />
+        <h2 class="bas-m-0 bas-text-base bas-text-[var(--bal-primary-600)]">
+          {{ preParams().domain || 'dashboard.block-auth.io' }}
+        </h2>
+        <p class="bas-m-0 bas-text-lg bas-text-[var(--bal-primary-800)]">
+          {{ preParams().appName || 'Block-Auth' }}
+          <span class="bas-text-base bas-text-[var(--bal-primary-500)]">{{
+            t('solicitsTo')
+          }}</span>
+          {{ accountShort(did()) }}
+        </p>
+      </div>
+      <ba-txn-type
+        [txnType]="preParams().txnType || t('login')"
+        [txnsLength]="txns().length"
+        (prevTxnClicked)="onPrevTxnClicked()"
+        (nextTxnClicked)="onNextTxnClicked()"
+      />
+      <div class="bas-h-[334px] bas-w-full bas-max-w-[330px]">
+        <ba-txn
+          [hasSolicitedData]="hasSolicitedData()"
+          [allRequiredFilled]="allRequiredFilled()"
           [closeTxns]="closeTxns()"
-          [isCountdown]="false"
+          [selectedTxnPreParams]="preParams()"
+          [userParamValues]="userParamValues()"
+          [addError]="addError"
+          (permissionsRequiredClicked)="showPermissions.set(true)"
+          (solicitedDataClicked)="showSolicitedData.set(true)"
         />
-      } @else if (!isEmpty()) {
-        <div class="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"
-            alt="app logo"
-          />
-          <h2 class="bas-m-0 bas-text-base bas-text-[var(--bal-primary-600)]">
-            {{ preParams().domain || 'dashboard.block-auth.io' }}
-          </h2>
-          <p class="bas-m-0 bas-text-lg bas-text-[var(--bal-primary-800)]">
-            {{ preParams().appName || 'Block-Auth' }}
-            <span class="bas-text-base bas-text-[var(--bal-primary-500)]">solicits to</span>
-            {{ accountShort(did()) }}
-          </p>
-        </div>
-        <ba-txn-type
-          [txnType]="preParams().txnType || 'Log In'"
-          [txnsLength]="txns().length"
-          (prevTxnClicked)="onPrevTxnClicked()"
-          (nextTxnClicked)="onNextTxnClicked()"
+      </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"
+        (click)="showPermissions.set(false)"
+      ></div>
+      <div class="bas-absolute bas-top-44 bas-z-40">
+        <ba-permissions-required-modal />
+      </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"
+        (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 class="bas-h-[334px] bas-w-full bas-max-w-[330px]">
-          <ba-txn
-            [hasSolicitedData]="hasSolicitedData()"
-            [allRequiredFilled]="allRequiredFilled()"
-            [closeTxns]="closeTxns()"
-            [selectedTxnPreParams]="preParams()"
-            [userParamValues]="userParamValues()"
-            [addError]="addError"
-            (permissionsRequiredClicked)="showPermissions.set(true)"
-            (solicitedDataClicked)="showSolicitedData.set(true)"
-          />
-        </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"
-          (click)="showPermissions.set(false)"
-        ></div>
-        <div class="bas-absolute bas-top-44 bas-z-40">
-          <ba-permissions-required-modal />
-        </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"
-          (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>
+      </div>
       }
     </div>
   `,
@@ -141,6 +148,8 @@ export class TxnsOverviewComponent {
   private readonly client = injectBlockAuthClient();
   private readonly ws = injectStore(this.client.state.$ws);
   private readonly ui = injectStore(this.client.state.$ui);
+  private readonly locale = injectStore($locale);
+  protected t = (key: TextKey): string => translate(key, this.locale());
 
   protected readonly accountShort = accountShort;
 
@@ -158,8 +167,11 @@ export class TxnsOverviewComponent {
   protected readonly did = computed(() => this.ws().did);
   protected readonly isSigning = computed(() => this.ui().isSigning);
   protected readonly isEmpty = computed(() => this.txns().length === 0);
-  protected readonly errorText = computed(
-    () => TXN_ERROR_TEXTS[this.error().messageSlug] ?? TXN_ERROR_TEXTS['unknown'],
+  protected readonly errorText = computed(() =>
+    this.t(
+      TXN_ERROR_TEXT_KEYS[this.error().messageSlug] ??
+        TXN_ERROR_TEXT_KEYS['unknown'],
+    ),
   );
 
   private readonly selectedTxn = computed(
@@ -177,22 +189,28 @@ export class TxnsOverviewComponent {
 
   private readonly requiredOptionalParams = computed(() => {
     const cfg =
-      (this.ui().uiConfig as { config?: Record<string, unknown> } | null)?.config ?? {};
+      (this.ui().uiConfig as { config?: Record<string, unknown> } | null)
+        ?.config ?? {};
     const required: string[] = [];
     const optional: string[] = [];
-    const kycMode = (cfg['modules'] as { kyc?: { mode?: string } } | undefined)?.kyc?.mode;
+    const kycMode = (cfg['modules'] as { kyc?: { mode?: string } } | undefined)
+      ?.kyc?.mode;
     if (kycMode === 'required') required.push('modules-kyc');
     else if (kycMode === 'optional') optional.push('modules-kyc');
-    Object.entries((cfg['params'] as Record<string, { mode?: string }>) || {}).forEach(
-      ([slug, paramCfg]) => {
-        if (paramCfg.mode === 'required') required.push(slug);
-        else if (paramCfg.mode === 'optional') optional.push(slug);
-      },
-    );
+    Object.entries(
+      (cfg['params'] as Record<string, { mode?: string }>) || {},
+    ).forEach(([slug, paramCfg]) => {
+      if (paramCfg.mode === 'required') required.push(slug);
+      else if (paramCfg.mode === 'optional') optional.push(slug);
+    });
     return { requiredParams: required, optionalParams: optional };
   });
-  protected readonly requiredParams = computed(() => this.requiredOptionalParams().requiredParams);
-  protected readonly optionalParams = computed(() => this.requiredOptionalParams().optionalParams);
+  protected readonly requiredParams = computed(
+    () => this.requiredOptionalParams().requiredParams,
+  );
+  protected readonly optionalParams = computed(
+    () => this.requiredOptionalParams().optionalParams,
+  );
   protected readonly hasSolicitedData = computed(
     () => this.requiredParams().length > 0 || this.optionalParams().length > 0,
   );