copay-crown/src/pages/integrations/shapeshift/shapeshift.html

A Secure Crown Wallet

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

<ion-content no-bounce>
  <div class="container" *ngIf="!shifts.data">
    <div class="center-header">
      <img src="assets/img/shapeshift/logo-shapeshift.svg" width="200" alt="Shapeshift">
      <div padding>
        <h4>The Safest, Fastest Asset Exchange on Earth</h4>
        <p>Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.</p>
      </div>
      <button ion-button outline no-low-fee (click)="goTo('Shift')">Start</button>
      <button ion-button clear small color="light" (click)="openExternalLink('https://shapeshift.io')">Visit Shapeshift.io &rarr;</button>
    </div>
  </div>

  <div class="container" *ngIf="shifts.data">
    <div class="main-header">
      <img src="assets/img/shapeshift/logo-shapeshift.svg" width="180" (click)="update()">
      <button ion-button clear icon-right no-low-fee (click)="goTo('Shift')">
        Shift
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </div>

    <ion-list>
      <ion-item-divider>Transactions</ion-item-divider>
      <button ion-item *ngFor="let item of shifts.data | keys" (click)="openShiftModal(item.value)">
        <ion-label>
          <div class="ellipsis">{{item.value.title || item.value.address}}</div>
          <div class="status">
            <span class="assertive" *ngIf="item.value.status == 'failed'">Failed</span>
            <span class="balanced" *ngIf="item.value.status == 'complete'">Completed</span>
            <span class="royal" *ngIf="item.value.status == 'received'">Pending</span>
            <span class="calm" *ngIf="item.value.status == 'no_deposits'">Pending</span>
          </div>
        </ion-label>
        <div item-content text-end>
          <div class="text-bold">{{ item.value.amount }}</div>
          <div class="date calm">{{item.value.date | amTimeAgo}}</div>
        </div>
      </button>
    </ion-list>
  </div>
</ion-content>

<ion-footer>
  <div *ngIf="shifts.data" class="shift-problems">
    <span>Having problems with a ShapeShift?</span>
    <a (click)="openExternalLink('https://shapeshift.zendesk.com/hc/en-us/requests/new')">
      Contact the ShapeShift support team.
    </a>
  </div>
</ion-footer>