copay-crown/src/pages/integrations/coinbase/buy-coinbase/buy-coinbase.html

A Secure Crown Wallet

<ion-header>
  <ion-navbar>
    <ion-title>Coinbase</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list *ngIf="buyRequestInfo">
    <ion-item>
      <div class="sending-label">
        <img class="sending-img" src="assets/img/icon-tx-sent-outline.svg">
        <span>Buying</span>
      </div>
      <div class="amount-label">
        <div class="amount">{{amountUnitStr}}</div>
        <div class="alternative" *ngIf="buyPrice">
          <span ng-show="isFiat">{{buyRequestInfo.amount.amount}} {{buyRequestInfo.amount.currency}}</span> @ ${{buyPrice.amount}} per BTC
        </div>
      </div>
    </ion-item>

    <ion-item-group class="info">
      <ion-item>
        <ion-label stacked>Payment Method</ion-label>
        <ion-select [(ngModel)]="selectedPaymentMethodId" (ionChange)="buyRequest()">
          <ion-option *ngFor="let item of paymentMethods" [value]="item.id">{{item.name}}</ion-option>
        </ion-select>
      </ion-item>
      <button ion-item (click)="showWallets()" class="wallets-list">
        <div>Receive in</div>
        <div class="wallet">
          <ion-icon item-start>
            <img *ngIf="network == 'testnet'" [ngStyle]="{'background-color': wallet && wallet.color}" src="assets/img/icon-wallet-testnet.svg" class="icon-wallet" />
            <img *ngIf="network != 'testnet'" [ngStyle]="{'background-color': wallet && wallet.color}" src="assets/img/icon-wallet.svg" class="icon-wallet" />
          </ion-icon>
          <div>{{wallet ? wallet.name : '...'}}</div>
        </div>
      </button>
      <ion-item-divider>
        Transaction details
      </ion-item-divider>
      <ion-item>
        <span>Amount</span>
        <ion-note item-end>
          {{buyRequestInfo.subtotal.amount}} {{buyRequestInfo.subtotal.currency}}
        </ion-note>
      </ion-item>
      <ion-item *ngFor="let fee of buyRequestInfo.fees">
        <span class="capitalized">{{fee.type}} fee</span>
        <ion-note item-end>
          {{fee.amount.amount}} {{fee.amount.currency}}
        </ion-note>
      </ion-item>
      <ion-item>
        <span>Total to pay</span>
        <ion-note item-end>
          {{buyRequestInfo.total.amount}} {{buyRequestInfo.total.currency}}
        </ion-note>
      </ion-item>
    </ion-item-group>
  </ion-list>
</ion-content>

<ion-footer>
  <button ion-button full class="button-footer" (click)="buyConfirm()" [disabled]="!wallet || !buyRequestInfo || !selectedPaymentMethodId">Confirm purchase</button>
</ion-footer>