import { Component , OnInit } from '@angular/core' ; import { BehaviorSubject , Observable } from 'rxjs' ; import { map } from 'rxjs/operators' ; import { ConfigsService } from '../../../../../common/services/configs.service' ; import { ThemeService } from '../../../../../common/services/theme.service' ; import { BoostModalService , BoostPaymentMethod , } from '../../boost-modal.service' ; /**
 * Payment method selector component (offchain / onchain etc).
 */ @ Component ( { selector : 'm-boostModal__paymentMethodSelector' , template : `
    <div class="m-boostModalPayments__header">
      <h2
        class="m-boostModalPayments__title"
        i18n="@@BOOST_MODAL__PAYMENT_METHOD"
      >
        Payment Method
      </h2>
      <a href="/token" target="_blank">
        <span
          class="m-boostModalPayments__buyTokens"
          i18n="@@BOOST_MODAL__BUY_TOKENS"
          >Buy tokens</span
        >
      </a>
    </div>
    <select
      class="m-boostModalPayments__optionSelect"
      [ngModel]="paymentMethod$ | async"
      (ngModelChange)="paymentMethod$.next($event)"
      [ngStyle]="selectBackground$ | async"
      data-cy="data-minds-boost-modal-method-select"
    >
      <option value="onchain">
        On-chain ({{ onchainBalance$ | async }} Tokens)
      </option>
      <option value="offchain">
        Off-chain ({{ offchainBalance$ | async }} Tokens)
      </option>
    </select>
  ` , styleUrls : [ './payment-method-selector.component.ng.scss' ] , } ) export class BoostModalPaymentMethodSelectorComponent implements OnInit { private readonly cdnAssetsUrl : string ; constructor ( private service , private theme , configs ) { this . cdnAssetsUrl = configs . get ( 'cdn_assets_url' ) ; } async ngOnInit ( ) { await this . service . fetchBalance ( ) . toPromise ( ) ; } returns { BehaviorSubject < number > } get onchainBalance$ ( ) : BehaviorSubject < number > { return this . service . onchainBalance$ ; } returns { BehaviorSubject < number > } get offchainBalance$ ( ) : BehaviorSubject < number > { return this . service . offchainBalance$ ; } returns { BehaviorSubject < BoostPaymentMethod > } get paymentMethod$ ( ) : BehaviorSubject < BoostPaymentMethod > { return this . service . paymentMethod$ ; } returns { Observable < { background : string } > } get selectBackground$ ( ) : Observable < { background : string ; } > { return this . theme . isDark$ . pipe ( map ( isDark => { return isDark ? { background : `url('${ this . cdnAssetsUrl }assets/icons/arrow-drop-down-white.svg') 98% center no-repeat` , } : { background : `url('${ this . cdnAssetsUrl }assets/icons/arrow-drop-down-black.svg') 98% center no-repeat` , } ; } ) ) ; } }