copay-crown/src/pages/includes/wallet-selector/wallet-selector.html

A Secure Crown Wallet

<div class="backdrop" *ngIf="showWalletsSelector" (click)="backdropDismiss()">
</div>
<div class="wallet-selector slider" [ngClass]="{'opened': showSlideEffect, 'closed': !showSlideEffect }" [hidden]="!showWalletsSelector">
  <div class="back-button">
    <ion-icon (click)="backdropDismiss()" name="arrow-round-back"></ion-icon>
  </div>
  <div class="destination-title" *ngIf="title">{{ title }}</div>
  <!--<div *ngFor="let wallet of wallets" (click)="selectWallet(wallet)">{{wallet.name}}</div>-->
  <div *ngIf="walletsBtc && walletsBtc[0]">
    <ion-item-divider>
      <div class="title">
        <img src="assets/img/icon-bitcoin.svg" alt="Bitcoin Wallets" width="16" />
        <span translate>Bitcoin Wallets</span>
      </div>
    </ion-item-divider>

    <ion-list>
      <button ion-item detail-none *ngFor="let wallet of walletsBtc" class="wallet-button" (click)="selectWallet(wallet)">
        <ion-icon item-start>
          <img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg"
            class="icon-wallet" />
          <img *ngIf="wallet.network != 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet.svg"
            class="icon-wallet" />
        </ion-icon>
        <ion-icon item-end>
          <img class="check" src="assets/img/icon-check-selected.svg" *ngIf="selectedWalletId === wallet.id">
        </ion-icon>
        <h2 class="wallet-name">{{wallet.credentials.walletName}}</h2>
        <p>
          <span class="wallet-warning" *ngIf="!wallet.isComplete()" translate>
            Incomplete
          </span>
          <span class="wallet-warning" *ngIf="wallet.isComplete() && wallet.needsBackup" translate>
            Backup needed
          </span>
          <span *ngIf="wallet.isComplete() && !wallet.needsBackup">
            <span *ngIf="!wallet.balanceHidden && !wallet.scanning">
              {{wallet.status && wallet.status.totalBalanceStr ? (wallet.status.totalBalanceStr) : ( wallet.cachedBalance ? wallet.cachedBalance
              + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '')
              : '')}}
            </span>
            <span *ngIf="wallet.scanning" translate>Scanning funds</span>
            <span *ngIf="wallet.balanceHidden && !wallet.scanning">[{{'Balance Hidden' | translate}}]</span>
            <span *ngIf="wallet.credentials.m > 1">{{wallet.credentials.m}}-of-{{wallet.credentials.n}}</span>
            <ion-icon *ngIf="!wallet.balanceHidden && wallet.status && (wallet.status.totalBalanceSat != wallet.status.spendableAmount)"
              name="timer"></ion-icon>
            <span *ngIf="wallet.error" class="error">{{wallet.error}}</span>
          </span>
        </p>
      </button>
    </ion-list>
  </div>

  <div *ngIf="walletsBch && walletsBch[0]">
    <ion-item-divider>
      <div class="title">
        <img src="assets/img/bitcoin-cash-logo.svg" alt="Bitcoin Cash Wallets" width="22" />
        <span translate>Bitcoin Cash Wallets</span>
      </div>
    </ion-item-divider>

    <ion-list>
      <button ion-item detail-none *ngFor="let wallet of walletsBch" class="wallet-button" (click)="selectWallet(wallet)">
        <ion-icon item-start>
          <img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg"
            class="icon-wallet" />
          <img *ngIf="wallet.network != 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet.svg"
            class="icon-wallet" />
        </ion-icon>
        <ion-icon item-end>
          <img class="check" src="assets/img/icon-check-selected.svg" *ngIf="selectedWalletId === wallet.id">
        </ion-icon>
        <h2 class="wallet-name">{{wallet.credentials.walletName}}</h2>
        <p>
          <span *ngIf="!wallet.isComplete()" translate>
            Incomplete
          </span>
          <span *ngIf="wallet.isComplete()">
            <span *ngIf="!wallet.balanceHidden && !wallet.scanning">
              {{wallet.status && wallet.status.totalBalanceStr ? (wallet.status.totalBalanceStr) : ( wallet.cachedBalance ? wallet.cachedBalance
              + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn * 1000 | amTimeAgo) : '')
              : '')}}
            </span>
            <span *ngIf="wallet.scanning" translate>Scanning funds</span>
            <span *ngIf="wallet.balanceHidden && !wallet.scanning">[{{'Balance Hidden' | translate}}]</span>
            <span *ngIf="wallet.credentials.m > 1">{{wallet.credentials.m}}-of-{{wallet.credentials.n}}</span>
            <ion-icon *ngIf="!wallet.balanceHidden && wallet.status && (wallet.status.totalBalanceSat != wallet.status.spendableAmount)"
              name="timer"></ion-icon>
            <span *ngIf="wallet.error" class="error">{{wallet.error}}</span>
          </span>
        </p>
      </button>
    </ion-list>
  </div>
  <ion-item-divider></ion-item-divider>
</div>