Fix deploy_json

examples/frontend/angular/libs/components/src/lib/action/action.component.ts

@@ -36,7 +36,7 @@ export class ActionComponent implements AfterViewInit, OnDestroy {
   async ngAfterViewInit(): Promise<void> {
     this.sdk_methods = Object.getOwnPropertyNames(Object.getPrototypeOf(this.sdk))
       .filter(name => typeof (this.sdk as any)[name] === 'function')
-      .filter(name => !['free', 'constructor', '__destroy_into_raw', 'getNodeAddress', 'setNodeAddress', 'getVerbosity', 'setVerbosity'].includes(name))
+      .filter(name => !['free', 'constructor', '__destroy_into_raw', 'getNodeAddress', 'setNodeAddress', 'getVerbosity', 'setVerbosity', 'watchDeploy', 'waitDeploy'].includes(name))
       .filter(name => !name.endsWith('_options'))
       .filter(name => !name.startsWith('chain_'))
       .filter(name => !name.startsWith('state_'))

examples/frontend/angular/libs/components/src/lib/form/form.component.html

@@ -25,6 +25,7 @@
             #inputTemplate
             [parentForm]="form"
             [inputField]="field.textarea"
+            (update_deploy_json)="updateDeployJson($event)"
           ></ui-textarea>
           <ng-container
             *ngTemplateOutlet="

examples/frontend/angular/libs/components/src/lib/form/form.component.ts

@@ -56,7 +56,6 @@ export class FormComponent implements AfterViewInit, OnDestroy {
 
   private setStateSubscription() {
     this.stateSubscription = this.stateService.getState().subscribe((state: State) => {
-      console.log(state);
       state.action && (this.action = state.action);
       this.changeDetectorRef.markForCheck();
     });
@@ -71,10 +70,12 @@ export class FormComponent implements AfterViewInit, OnDestroy {
 
   async onDeployFileSelected(deploy_json: string) {
     deploy_json = deploy_json && jsonPrettyPrint(new Deploy(deploy_json).toJson(), this.verbosity as Verbosity);
-    console.log(deploy_json);
+    this.updateDeployJson(deploy_json);
+  }
+
+  updateDeployJson(deploy_json: string) {
     deploy_json && this.stateService.setState({
       deploy_json
     });
   }
-
 }

examples/frontend/angular/libs/components/src/lib/private-key/private-key.component.ts

@@ -4,6 +4,7 @@ import { State, StateService } from '@util/state';
 import { privateToPublicKey } from 'casper-sdk';
 import { CONFIG, EnvironmentConfig } from '@util/config';
 import { Subscription } from 'rxjs';
+import { ErrorService } from '@util/error';
 
 @Component({
   selector: 'comp-private-key',
@@ -26,6 +27,7 @@ export class PrivateKeyComponent implements AfterViewInit, OnDestroy {
   constructor(
     @Inject(CONFIG) public readonly config: EnvironmentConfig,
     private readonly stateService: StateService,
+    private readonly errorService: ErrorService,
     private readonly changeDetectorRef: ChangeDetectorRef
   ) {
   }
@@ -58,7 +60,12 @@ export class PrivateKeyComponent implements AfterViewInit, OnDestroy {
         return;
       }
       text = text.trim();
-      public_key = privateToPublicKey(text);
+      this.errorService.setError("");
+      try {
+        public_key = privateToPublicKey(text);
+      } catch (err) {
+        this.errorService.setError(err as string);
+      }
       if (public_key) {
         this.private_key = text;
       }

examples/frontend/angular/libs/components/src/lib/submit-file/submit-file.component.html

@@ -7,7 +7,7 @@
       type="file"
       id="deployFileElt"
       (change)="onDeployFileSelected($event)"
-      accept=".json, .txt"
+      accept=".json, .txt, .deploy"
       e2e-id="deployFileElt"
     />
     <button class="btn btn-secondary" (click)="deployFileClick()">

examples/frontend/angular/libs/components/src/lib/submit-file/submit-file.component.ts

@@ -25,6 +25,7 @@ export class SubmitFileComponent {
   async onDeployFileSelected(event: Event) {
     const file = (event.target as HTMLInputElement).files?.item(0);
     let text;
+    this.deploy_json = '';
     if (file) {
       text = await file.text();
       if (!text.trim()) {
@@ -39,10 +40,9 @@ export class SubmitFileComponent {
         console.error(error);
         this.errorService.setError(error as string);
       }
-    } else {
-      this.deploy_json = '';
     }
     this.select_file.emit(this.deploy_json);
+    this.deployFileElt.nativeElement.value = '';
   }
 
   deployFileClick() {

examples/frontend/angular/libs/ui/src/lib/textarea/textarea.component.html

@@ -12,6 +12,7 @@
             inputField.class || 'form-control',
             isInvalid(inputField.controlName) ? 'is-invalid' : ''
           ]"
+          (change)="updateState($event)"
         >
         </textarea>
         <label *ngIf="inputField.placeholder" [for]="inputField.id">{{

examples/frontend/angular/libs/ui/src/lib/textarea/textarea.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { InputField } from '@util/form';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -15,6 +15,7 @@ export class TextareaComponent {
 
   @Input() inputField!: InputField;
   @Input() parentForm!: FormGroup;
+  @Output() update_deploy_json: EventEmitter<string> = new EventEmitter<string>();
 
   @ViewChild('template', { static: true }) template!: TemplateRef<never>;
 
@@ -23,4 +24,9 @@ export class TextareaComponent {
     return !!this.parentForm?.touched && !!control?.invalid;
   }
 
+  updateState($event: Event) {
+    const deploy_json = ($event.target as HTMLInputElement).value;
+    this.update_deploy_json.emit(deploy_json);
+  }
+
 }

examples/frontend/angular/libs/util/services/client/src/lib/client.service.ts

@@ -341,6 +341,7 @@ export class ClientService {
         const result_json = result.toJson();
         this.deploy_json = jsonPrettyPrint(result_json, this.verbosity as Verbosity);
         this.deploy_json && this.resultService.setResult(result_json);
+        !deploy_result && this.updateDeployJson(this.deploy_json);
       }
       return result;
     } catch (err) {
@@ -418,47 +419,53 @@ export class ClientService {
     //   payment_params,
     // );
     // console.log(test_transfer);
-    let result;
-    if (speculative) {
-      const maybe_block_options = {
-        maybe_block_id_as_string: undefined,
-        maybe_block_identifier: undefined,
-      };
-      this.getIdentifieBlock(maybe_block_options);
-      const { maybe_block_id_as_string, maybe_block_identifier } = maybe_block_options;
-      result = await this.sdk.speculative_transfer(
-        transfer_amount,
-        target_account,
-        undefined, // transfer_id
-        deploy_params,
-        payment_params,
-        maybe_block_id_as_string,
-        maybe_block_identifier
-      );
-    }
-    else if (deploy_result) {
-      result = await this.sdk.transfer(
-        transfer_amount,
-        target_account,
-        undefined, // transfer_id
-        deploy_params,
-        payment_params,
-      );
-    } else {
-      result = await this.sdk.make_transfer(
-        transfer_amount,
-        target_account,
-        undefined, // transfer_id
-        deploy_params,
-        payment_params,
-      );
-    }
-    if (result) {
-      const result_json = result.toJson();
-      this.deploy_json = jsonPrettyPrint(result_json, this.verbosity as Verbosity);
-      this.deploy_json && this.resultService.setResult(result_json);
+    try {
+      let result;
+      if (speculative) {
+        const maybe_block_options = {
+          maybe_block_id_as_string: undefined,
+          maybe_block_identifier: undefined,
+        };
+        this.getIdentifieBlock(maybe_block_options);
+        const { maybe_block_id_as_string, maybe_block_identifier } = maybe_block_options;
+        result = await this.sdk.speculative_transfer(
+          transfer_amount,
+          target_account,
+          undefined, // transfer_id
+          deploy_params,
+          payment_params,
+          maybe_block_id_as_string,
+          maybe_block_identifier
+        );
+      }
+      else if (deploy_result) {
+        result = await this.sdk.transfer(
+          transfer_amount,
+          target_account,
+          undefined, // transfer_id
+          deploy_params,
+          payment_params,
+        );
+      } else {
+        result = await this.sdk.make_transfer(
+          transfer_amount,
+          target_account,
+          undefined, // transfer_id
+          deploy_params,
+          payment_params,
+        );
+      }
+      if (result) {
+        const result_json = result.toJson();
+        this.deploy_json = jsonPrettyPrint(result_json, this.verbosity as Verbosity);
+        this.deploy_json && this.resultService.setResult(result_json);
+        !deploy_result && this.updateDeployJson(this.deploy_json);
+      }
+      return result;
+    } catch (err) {
+      err && this.errorService.setError(err as string);
+      return;
     }
-    return result;
   }
 
   async put_deploy() {
@@ -549,6 +556,13 @@ export class ClientService {
     signed_deploy = signed_deploy.sign(this.private_key);
     this.deploy_json = jsonPrettyPrint(signed_deploy.toJson(), this.verbosity as Verbosity);
     this.getIdentifier('deployJson')?.setValue(this.deploy_json);
+    this.updateDeployJson(this.deploy_json);
+  }
+
+  private updateDeployJson(deploy_json: string) {
+    deploy_json && this.stateService.setState({
+      deploy_json
+    });
   }
 
   async make_deploy(wasm?: Uint8Array) {

examples/frontend/angular/libs/util/services/form/src/lib/form.service.ts

@@ -27,8 +27,8 @@ export class FormService {
         state.action && (this.action = state.action);
         this.initializeForm();
       }
-      this.action && this.updateForm();
       state && (this.state = state);
+      this.action && this.updateForm();
     });
     this.form = this.defaultForm;
   }
@@ -98,23 +98,30 @@ export class FormService {
     }
     const disabledTargets: string[] = [];
     fields.forEach((row) => {
-      row.forEach(({ input }) => {
-        const name = input?.controlName;
+      row.forEach(({ input, textarea }) => {
+        const name = input?.controlName || textarea?.controlName;
         if (!name) {
           return;
         }
         const control = this.form.get(name);
         if (!control) {
           return;
         }
-        if (input.enabled_when) {
+
+        if (textarea) {
+          const state = textarea?.state_name || [];
+          const stateName = state && state.find(name => this.state[name as keyof State]);
+          const updateValue = stateName ? this.state[stateName as keyof State] : '';
+          control.setValue(updateValue);
+        }
+        else if (input && input.enabled_when) {
           if (this.select_dict_identifier && !input.enabled_when?.includes(this.select_dict_identifier)) {
             control.disable();
           } else if (this.select_dict_identifier) {
             control.enable();
           }
         }
-        else if (input.disabled_when) {
+        else if (input && input.disabled_when) {
           const fieldName: string = control.value && input.disabled_when?.find(field => field.includes('value'));
           const targetControlName = fieldName && fieldName.split('.')[0];
           const targetControl = targetControlName && this.form?.get(targetControlName);