@block-auth.io/angular 0.1.1 → 0.1.2

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

@@ -1,17 +1,23 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import { Component } from '@angular/core';
 import { render, screen, fireEvent } from '@testing-library/angular';
 import { map } from 'nanostores';
+import { setLocale } from '@block-auth.io/core';
 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(),
+  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' })),
+  injected: vi.fn(() => ({ id: 'injected' })),
+  walletConnect: vi.fn(() => ({ id: 'walletConnect' })),
 }));
 
 // Port de packages/react/src/components/txns/internals/Txn.test.tsx +
@@ -30,6 +36,8 @@ describe('Txn', () => {
     } as any;
   }
 
+  afterEach(() => setLocale('en'));
+
   it('renderiza el cuerpo de la txn con aceptar/rechazar', async () => {
     await render(TxnComponent, {
       inputs: { hasSolicitedData: true },
@@ -40,10 +48,27 @@ describe('Txn', () => {
     expect(screen.getByText('REJECT')).toBeDefined();
   });
 
+  it('respeta el locale activo cuando no se pasan textos custom', async () => {
+    setLocale('es');
+    await render(TxnComponent, {
+      inputs: { hasSolicitedData: true },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(screen.getByText('Permisos requeridos')).toBeDefined();
+    expect(screen.getByText('ACEPTAR')).toBeDefined();
+    expect(screen.getByText('RECHAZAR')).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;
+    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);
 
@@ -58,7 +83,9 @@ describe('Txn', () => {
       providers: [provideBlockAuthClientForTest(makeClient())],
     });
     await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
-    const acceptBtn = screen.getByText('ACCEPT').closest('button') as HTMLButtonElement;
+    const acceptBtn = screen
+      .getByText('ACCEPT')
+      .closest('button') as HTMLButtonElement;
     expect(acceptBtn.disabled).toBe(true);
   });
 
@@ -105,7 +132,10 @@ describe('Txn', () => {
     @Component({
       standalone: true,
       imports: [TxnComponent],
-      template: `<ba-txn [selectedTxnPreParams]="{ appKey: 'k' }" [addError]="e" />`,
+      template: `<ba-txn
+        [selectedTxnPreParams]="{ appKey: 'k' }"
+        [addError]="e"
+      />`,
     })
     class Host {
       e = addError;
@@ -122,7 +152,10 @@ describe('Txn', () => {
     @Component({
       standalone: true,
       imports: [TxnComponent],
-      template: `<ba-txn [selectedTxnPreParams]="{ appKey: 'k', to: '0xabc' }" [userParamValues]="{ 'users-email': 'a@b.com' }" />`,
+      template: `<ba-txn
+        [selectedTxnPreParams]="{ appKey: 'k', to: '0xabc' }"
+        [userParamValues]="{ 'users-email': 'a@b.com' }"
+      />`,
     })
     class Host {}
     await render(Host, { providers: [provideBlockAuthClientForTest(client)] });
@@ -141,13 +174,19 @@ describe('Txn', () => {
     @Component({
       standalone: true,
       imports: [TxnComponent],
-      template: `<ba-txn [hasSolicitedData]="true" (permissionsRequiredClicked)="p()" (solicitedDataClicked)="s()" />`,
+      template: `<ba-txn
+        [hasSolicitedData]="true"
+        (permissionsRequiredClicked)="p()"
+        (solicitedDataClicked)="s()"
+      />`,
     })
     class Host {
       p = onPerm;
       s = onSol;
     }
-    await render(Host, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    await render(Host, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
     await fireEvent.click(screen.getByText('Permissions required'));
     await fireEvent.click(screen.getByText('Solicited data'));
     expect(onPerm).toHaveBeenCalledOnce();
@@ -160,9 +199,13 @@ describe('Txn', () => {
     });
     // 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'));
+    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;
+    const slider = container.querySelector(
+      '#txn-lifetime-slider-slider',
+    ) as HTMLInputElement;
     expect(slider).not.toBeNull();
     expect(slider.type).toBe('range');
     const timeInput = container.querySelector(
@@ -177,8 +220,12 @@ describe('Txn', () => {
     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.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',

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

@@ -8,6 +8,8 @@ import {
   output,
   signal,
 } from '@angular/core';
+import { $locale, t as translate, type TextKey } from '@block-auth.io/core';
+import { injectStore } from '../../../inject-store';
 import { injectBlockAuthClient } from '../../../provide-block-auth';
 import { ArrowIconComponent } from '../../../primitives/arrow-icon.component';
 import { LifetimeSliderBaseComponent } from '../../../primitives/lifetime-slider-base.component';
@@ -42,16 +44,22 @@ interface TxnPreParams {
   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="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
+              class="bas-m-0 bas-text-center bas-text-lg bas-font-medium bas-text-[var(--bal-primary-900)]"
+            >
+              {{ permissionsRequiredTxtResolved() }}
             </p>
           </div>
           <ba-arrow-icon direction="left" />
@@ -60,12 +68,16 @@ interface TxnPreParams {
         <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')
+            (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">
+          <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 ' +
@@ -74,7 +86,7 @@ interface TxnPreParams {
                   : 'bas-text-slate-400')
               "
             >
-              {{ solicitedDataTxt() }}
+              {{ solicitedDataTxtResolved() }}
             </p>
           </div>
           <ba-arrow-icon direction="left" />
@@ -82,40 +94,55 @@ interface TxnPreParams {
       </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)"
+      <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">
+          {{ configureSessionTimeTxtResolved() }}
+        </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"
         >
-          <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>
+          <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()"
-        />
+      <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
+        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]="
@@ -139,21 +166,29 @@ interface TxnPreParams {
                 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>
+              <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-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>
+              <p class="bal-ba-transition-2 bas-m-0 bas-cursor-default">
+                {{ iAuthorizeTheTxtResolved() }}
+              </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() }}
+                {{ privacyPolicyTxtResolved() }}
               </button>
-              <p class="bal-ba-transition-2 bas-m-0 bas-cursor-default">{{ andTheTxt() }}</p>
+              <p class="bal-ba-transition-2 bas-m-0 bas-cursor-default">
+                {{ andTheTxtResolved() }}
+              </p>
             </div>
             <button
               type="button"
@@ -161,19 +196,23 @@ interface TxnPreParams {
               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() }}
+              {{ termsAndConditionsTxtResolved() }}
             </button>
           </div>
         </div>
-        <div class="bas-flex bas-w-full bas-flex-row bas-items-center bas-justify-between bas-gap-2">
+        <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
+              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"
+            >
+              {{ rejectTxtResolved() }}
             </span>
           </button>
           <button
@@ -183,8 +222,10 @@ interface TxnPreParams {
             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
+              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"
+            >
+              {{ acceptTxtResolved() }}
             </span>
           </button>
         </div>
@@ -193,15 +234,15 @@ interface TxnPreParams {
   `,
 })
 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');
+  permissionsRequiredTxt = input<string>();
+  solicitedDataTxt = input<string>();
+  rejectTxt = input<string>();
+  acceptTxt = input<string>();
+  iAuthorizeTheTxt = input<string>();
+  privacyPolicyTxt = input<string>();
+  andTheTxt = input<string>();
+  termsAndConditionsTxt = input<string>();
+  configureSessionTimeTxt = input<string>();
   hasSolicitedData = input(false);
   allRequiredFilled = input(true);
   closeTxns = input<() => void>(() => {});
@@ -218,13 +259,49 @@ export class TxnComponent {
   solicitedDataClicked = output<void>();
 
   private readonly client = injectBlockAuthClient();
+  private readonly locale = injectStore($locale);
+  protected t = (key: TextKey): string => translate(key, this.locale());
+
+  protected readonly permissionsRequiredTxtResolved = computed(
+    () => this.permissionsRequiredTxt() ?? this.t('permissionsRequired'),
+  );
+  protected readonly solicitedDataTxtResolved = computed(
+    () => this.solicitedDataTxt() ?? this.t('solicitedData'),
+  );
+  protected readonly rejectTxtResolved = computed(
+    () => this.rejectTxt() ?? this.t('reject'),
+  );
+  protected readonly acceptTxtResolved = computed(
+    () => this.acceptTxt() ?? this.t('accept'),
+  );
+  protected readonly iAuthorizeTheTxtResolved = computed(
+    () => this.iAuthorizeTheTxt() ?? this.t('iAuthorizeThe'),
+  );
+  protected readonly privacyPolicyTxtResolved = computed(
+    () => this.privacyPolicyTxt() ?? this.t('privacyPolicy'),
+  );
+  protected readonly andTheTxtResolved = computed(
+    () => this.andTheTxt() ?? this.t('andThe'),
+  );
+  protected readonly termsAndConditionsTxtResolved = computed(
+    () => this.termsAndConditionsTxt() ?? this.t('termsAndConditions'),
+  );
+  protected readonly configureSessionTimeTxtResolved = computed(
+    () => this.configureSessionTimeTxt() ?? this.t('configureSessionTime'),
+  );
 
   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);
+  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
@@ -288,7 +365,10 @@ export class TxnComponent {
     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() });
+    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;