import { Subscription } from 'rxjs';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CampaignService } from 'src/app/services/campaign.service';

@Component({
  selector: 'app-show-txhash',
  templateUrl: './show-txhash.component.html',
  styleUrls: ['./show-txhash.component.less']
})
export class ShowTxhashComponent implements OnInit, OnDestroy {

  txHash!: string;
  subscription: Subscription = new Subscription();

  constructor(
    private campaignService: CampaignService
  ) { }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

  ngOnInit(): void {
    this.subscription.add(this.campaignService.txHash$.subscribe((hash: string) => {
      this.txHash = hash;
    }))
    this.subscription.add(this.campaignService.stopTxHash$.subscribe((bool) => {
      if(bool) {
        this.txHash = '';
      }
    }));
  }

}

<div class="waiting" *ngIf="txHash">
    <div class="show-tx">
        <h4>Pending request ... </h4>
    </div>
    <div class="progress-bar">
        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </div>
    <div>
        <h6>tx. hash {{txHash}}</h6>
    </div>
</div>

// service
private txHash: BehaviorSubject<string> = new BehaviorSubject<string>('');
  public txHash$ = this.txHash.asObservable();

  private stopTxHash: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
    false
  );
  public get stopTxHash$() {
    return this.stopTxHash;
  }

public finalizeRequest(address: string, requestId: number): Observable<any> {
    this.instantiateCampaignContract(address);
    return from(
      this.CampaignContract.methods
        .finalizeRequest(requestId)
        .send({ from: this.account })
        .on('transactionHash', (hash: string) => {
// emit when the hash is available
          this.txHash.next(hash);
        })
    );
  }

// component
onCreateNewCampaign() {
    this.subscription.add(
      this.campaignService
        .createCampaign(this.libelle, this.minimumContribution)
        .subscribe((result) => {
// when we have a result we emit an event to stop showing the loading bar
          this.campaignService.stopTxHash$.next(true);
        })
    );
  }