copay/www/views/coinbase.html

<ion-view id="coinbase">
  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button>
    </ion-nav-back-button>
    <ion-nav-title>Coinbase</ion-nav-title>
  </ion-nav-bar>

  <ion-content>

    <div class="box-notification error" ng-show="error">
      <ul class="no-bullet m0 size-12">
        <li ng-repeat="err in error.errors" ng-bind-html="err.message"></li>
      </ul>
    </div>

    <div ng-if="!accessToken && !error" ng-init="showOauthForm = false">
      <div class="text-center m20v">
        <img src="img/coinbase-logo.png" width="200">
      </div>
      <div class="text-center small-10 small-centered columns" ng-show="!showOauthForm">

        <p class="m20t text-gray size-12">Connect your Coinbase account to get started</p>

        <button class="button button-standard button-primary"
          ng-click="coinbase.openAuthenticateWindow()">
          Connect to Coinbase
        </button>
        <div class="m20t">
          <a href ng-click="showOauthForm = true" class="text-gray size-12">
            Do you already have the Oauth Code?
          </a>
        </div>
      </div>
      <div ng-show="showOauthForm">
        <div class="text-left box-notification" ng-show="coinbase.error">
          <ul class="no-bullet m0 text-warning size-12">
            <li ng-repeat="err in coinbase.error.errors" ng-bind-html="err.message"></li>
          </ul>
        </div>
        <form name="oauthCodeForm" ng-submit="coinbase.submitOauthCode(code)" novalidate>
          <div class="list settings-input-group">
            <label class="item item-input item-stacked-label">
              <span class="input-label">OAuth Code</span>
              <input type="text"
                     ng-model="code"
                     ng-attr-placeholder="{{'Paste the authorization code here'}}" required>
            </label>
          </div>
          <input
            class="button button-standard button-primary"
            type="submit" value="Connect Coinbase Account" ng-disabled="oauthCodeForm.$invalid">
        </form>
      </div>
    </div>

  <div ng-if="accessToken && !error">

    <div class="m20t text-center" ng-click="updateTransactions()">
      <img src="img/coinbase-logo.png" width="200">
    </div>

    <div class="m10t size-12 text-center text-gray">
      <span ng-show="!buyPrice || !sellPrice"> ... | ... </span>
      <span ng-show="buyPrice && sellPrice">
        {{buyPrice.amount}} {{buyPrice.currency}}
         | 
        {{sellPrice.amount}} {{sellPrice.currency}}
      </span>
    </div>

    <div class="list card">
      <a class="item item-icon-right"
         href ui-sref="tabs.buyandsell.coinbase.amount({nextStep: 'tabs.buyandsell.coinbase.buy', currency: currency})">
        <img src="img/buy-bitcoin.svg" alt="buy bitcoin" width="35" class="item-img-buy">
        Buy Bitcoin
        <i class="icon bp-arrow-right"></i>
      </a>
      <a class="item item-icon-right"
         href ui-sref="tabs.buyandsell.coinbase.amount({nextStep: 'tabs.buyandsell.coinbase.sell', currency: currency})">
        <img src="img/sell-bitcoin.svg" alt="sell bitcoin" width="35" class="item-img-sell">
        Sell Bitcoin
        <i class="icon bp-arrow-right"></i>
      </a>
    </div>

    <div class="list card">
      <div class="item item-heading" ng-click="updateTransactions()">
        Activity
      </div> 
      <a class="item"
         ng-if="pendingTransactions.data && !error"
         ng-repeat="(id, tx) in pendingTransactions.data | orderObjectBy:'updated_at':true track by $index"
         ng-click="coinbase.openTxModal(tx)">

        <span class="item-note">
          <div class="assertive" ng-show="tx.error || tx.status == 'error'">
            Error
          </div>
          <div ng-show="!tx.error">
            <div ng-show="tx.status == 'completed'">
              <time ng-if="tx.created_at">{{tx.created_at | amTimeAgo}}</time>
            </div>
            <div ng-show="tx.status == 'pending'">
              <span ng-if="tx.status == 'pending'">Pending</span>
            </div>
          </div>
        </span>

        <img class="left m10r" src="img/bought-pending.svg" alt="bought" width="24" ng-show="(tx.type == 'buy' || (tx.to && tx.type == 'send')) && tx.status != 'completed'">
        <img class="left m10r" src="img/bought.svg" alt="bought" width="30" ng-show="(tx.type == 'buy' || (tx.to && tx.type == 'send')) && tx.status == 'completed'">
        <img class="left m10r" src="img/sold-pending.svg" alt="sold" width="24" ng-show="tx.from && tx.type == 'send'">
        <img class="left m10r" src="img/sold.svg" alt="sold" width="30" ng-show="!tx.from && tx.type == 'sell' && tx.status == 'completed'">

        <h2>
          <span ng-show="tx.type == 'sell' && tx.status == 'completed'">Sold</span>
          <span ng-show="tx.type == 'send' && tx.to && tx.status == 'completed'">Bought</span>
        </h2>
        <p>
          <span ng-if="tx.type == 'sell' || (tx.type == 'send' && tx.from)">-</span>{{tx.amount.amount.replace('-','')}}
          {{tx.amount.currency}}
        </p>
      </a>
    </div>
    <div class="m10t text-center" ng-if="loading">
      <ion-spinner class="spinner-dark" icon="lines"></ion-spinner>
    </div>

  </div>
  </ion-content>
</ion-view>