Feat/coinbase integration (bitpay#4012)

* Oauth2 and first view

* Connect with Coinbase using mobile

* Buy and Sell through Coinbase

* Fix buy

* Receive and send bitcoin to Coinbase account

* Receive bitcoin from Coinbase to Copay

* Complete user and account information. Connection errors

* Improves error handler

* Removes console.log

* Coinbase background color. Send to Coinbase form validation

* Fix send from different wallet

* Send and receive using Coinbase

* Pagination activity

* Fix Buy and Sell

* One option in the sidebar to Buy and Sell

* Native balance on Coinbase homepage

* Rename receive and send

* Auto-close window after authenticate

* Reorder

* Get payment methods

* Fix when token expired

* Fix token expired

* Integration: sell and send to Coinbase

* Store pending transaction before sell

* Sell flow completed

* Removing files

* Fix sell

* Fix sell

* Fix sell

* Sell completed

* Buy bitcoin through coinbase

* Buy auto

* Currency set to USD

* Select payment methods. Limits

* Removes payment methods from preferences

* Fix signs. Tx ordered by updated. Minor fixes

* Removes console.log

* Improving ux-language things

* Fix selectedpaymentmethod if not verified

* Set error if tx not found

* Price sensitivity. Minor fixes

* Adds coinbase api key to gitignore

* Coinbase production ready

* Fix sell in usd

* Bug fixes

* New Sensitivity step

* Refresh token with a simple click

* Refresh token

* Refactor

* Fix auto reconnect if token expired

Signed-off-by: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>

* Fix calls if token expired

.gitignore

@@ -3,6 +3,10 @@ i18n/po/*.mo
 i18n/crowdin_api_key.txt
 src/js/translations.js
 
+# Coinbase API ClientID/Secret
+coinbase.json
+src/js/coinbase.js
+
 # version
 src/js/version.js
 

Gruntfile.js

@@ -7,6 +7,9 @@ module.exports = function(grunt) {
       version: {
         command: 'node ./util/version.js'
       },
+      coinbase: {
+        command: 'node ./util/coinbase.js'
+      },
       clear: {
         command: 'rm -Rf bower_components node_modules'
       },
@@ -75,6 +78,7 @@ module.exports = function(grunt) {
           'src/js/controllers/*.js',
           'src/js/translations.js',
           'src/js/version.js',
+          'src/js/coinbase.js',
           'src/js/init.js',
           'src/js/trezor-url.js',
           'bower_components/trezor-connect/login.js'
@@ -209,7 +213,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-node-webkit-builder');
   grunt.loadNpmTasks('grunt-contrib-compress');
 
-  grunt.registerTask('default', ['nggettext_compile', 'exec:version', 'browserify', 'concat', 'copy:icons']);
+  grunt.registerTask('default', ['nggettext_compile', 'exec:version', 'exec:coinbase', 'browserify', 'concat', 'copy:icons']);
   grunt.registerTask('prod', ['default', 'uglify']);
   grunt.registerTask('translate', ['nggettext_extract']);
   grunt.registerTask('test', ['karma:unit']);

public/views/buyAndSell.html

@@ -0,0 +1,20 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Buy & Sell Bitcoin'; closeToHome = true; noColor = true">
+</div>
+
+<div class="content">
+<ul class="no-bullet manage text-center">	
+  <li class="white m20t" ng-show="index.glideraEnabled">
+		<a ng-click="$root.go('glidera')">
+      <img src="img/glidera-logo.png" width="150">
+		</a>
+	</li>
+  <li class="white m20t" ng-show="index.coinbaseEnabled">
+		<a ng-click="$root.go('coinbase')">
+      <img src="img/coinbase-logo.png" width="150">
+		</a>
+	</li>
+</ul>
+</div>

public/views/buyCoinbase.html

@@ -0,0 +1,183 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Buy'; goBackToState = 'coinbase'; noColor = true">
+</div>
+
+
+<div class="content coinbase" ng-controller="buyCoinbaseController as buy">
+
+  <div class="onGoingProcess" ng-show="buy.loading">
+    <div class="onGoingProcess-content" ng-style="{'background-color': '#2b71b1'}">
+    <div class="spinner">
+      <div class="rect1"></div>
+      <div class="rect2"></div>
+      <div class="rect3"></div>
+      <div class="rect4"></div>
+      <div class="rect5"></div>
+    </div>
+    <span>{{buy.loading}}</span>
+    </div>
+  </div>
+
+  <div class="row m20t" ng-show="buy.error || index.coinbaseError" ng-click="buy.error = null">
+    <div class="columns">
+      <div class="box-notification">
+        <ul class="no-bullet m0 size-12 text-warning">
+          <li ng-repeat="err in (buy.error.errors || index.coinbaseError.errors)" ng-bind-html="err.message"></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="row m20t"
+    ng-show="index.coinbaseAccount && !buy.buyInfo && !buy.receiveInfo">
+    <div class="columns"> 
+
+      <form name="buyCoinbaseForm" 
+          ng-submit="buy.buyRequest(index.coinbaseToken, index.coinbaseAccount)" novalidate>
+
+        <div ng-if="index.coinbaseToken" ng-init="buy.getPaymentMethods(index.coinbaseToken)">
+          <label>Payment method</label>
+          <select 
+            ng-model="selectedPaymentMethod.id" 
+            ng-options="item.id as item.name for item in buy.paymentMethods">
+          </select>
+        </div>
+
+        <label>Amount 
+          <span 
+            ng-if="index.coinbaseToken"
+            ng-init="buy.getPrice(index.coinbaseToken)"
+            ng-show="buy.buyPrice" 
+            class="size-11 text-light right">
+            1 BTC <i class="icon-arrow-right"></i> {{buy.buyPrice.amount}} {{buy.buyPrice.currency}}
+          </span>
+        </label>
+
+        <div class="input">
+          <input ng-show="!showAlternative" type="number" id="amount" 
+          name="amount" ng-attr-placeholder="{{'Amount in ' + (showAlternative ? 'USD' : 'BTC')}}"
+          ng-minlength="0.00000001" ng-maxlength="10000000000" 
+          ng-model="amount" autocomplete="off" ng-disabled="buy.loading">
+
+          <input ng-show="showAlternative" type="number" id="fiat" 
+          name="fiat" ng-attr-placeholder="{{'Amount in ' + (showAlternative ? 'USD' : 'BTC')}}" 
+          ng-model="fiat" autocomplete="off" ng-disabled="buy.loading">
+
+          <a ng-show="!showAlternative" class="postfix button" 
+            ng-click="showAlternative = true; amount = null">BTC</a>
+          <a ng-show="showAlternative" class="postfix button black" 
+            ng-click="showAlternative = false; fiat = null">USD</a>
+        </div>
+
+        <div class="text-center text-gray size-12 m10b">
+          <span ng-show="!(amount || fiat)">
+            Enter the amount to get the exchange rate
+          </span>
+          <span ng-show="!buy.buyPrice && (amount || fiat)">
+            Not available
+          </span>
+          <span ng-show="buy.buyPrice && amount && !fiat">
+            ~ {{buy.buyPrice.amount * amount | currency : 'USD ' : 2}}
+          </span>
+        </div>
+
+        <div class="text-center">
+          <i class="db fi-arrow-down size-24 m10v"></i>
+        </div>
+
+        <div 
+          ng-if="index.coinbaseToken"
+          ng-init="buy.init(index.coinbaseTestnet)"
+          ng-click="openWalletsModal(buy.otherWallets)">
+          <label>Copay Wallet</label>
+          <div class="input">
+            <input type="text" id="address" name="address" ng-disabled="buy.selectedWalletId"
+            ng-attr-placeholder="{{'Choose a wallet to receive bitcoin'}}" ng-model="buy.selectedWalletName" required>
+            <a class="postfix size-12 m0 text-gray">
+              <i class="icon-wallet size-18"></i>
+            </a>
+          </div>
+        </div>
+
+        <div class="input m20t">
+          <input class="button black expand round" 
+          ng-disabled="buy.loading || (!amount && !fiat) || !selectedPaymentMethod"
+          ng-style="{'background-color': '#2b71b1'}"
+          type="submit" value="{{'Continue'}}">
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <div class="m20t row" ng-show="buy.receiveInfo && !buy.sellInfo && !buy.success">
+    <div class="columns">
+      <h1>Funds sent to Copay Wallet</h1>
+      <p class="size-12 text-gray">
+        Buy confirmed. Funds will be send soon to your selected Copay Wallet
+      </p>
+      <button class="m20t outline black round expand"
+              ng-style="{'background-color': '#2b71b1'}"
+              ng-click="$root.go('coinbase')">OK</button>
+    </div>
+  </div>
+
+  <div ng-show="buy.buyInfo && !buy.receiveInfo && !buy.success">
+    <h4 class="title">Confirm transaction</h4>
+
+    <ul class="no-bullet m10t size-12 white">
+      <li class="line-b line-t p15">
+        <span class="m10 text-normal text-bold">Amount</span>
+        <span class="right text-gray">{{buy.buyInfo.amount.amount}} {{buy.buyInfo.amount.currency}}</span>
+      </li>
+      <li class="line-b oh p15">
+        <span class="m10 text-normal text-bold">Fees</span>
+        <span class="right text-gray">
+          <div ng-repeat="fee in buy.buyInfo.fees">
+            <b>{{fee.type}}</b> {{fee.amount.amount}} {{fee.amount.currency}}
+          </div>
+        </span>
+      </li>
+      <li class="line-b p15">
+        <span class="m10 text-normal text-bold">Subtotal</span>
+        <span class="right text-gray">{{buy.buyInfo.subtotal.amount}} {{buy.buyInfo.subtotal.currency}}</span>
+      </li>
+      <li class="line-b p15">
+        <span class="m10 text-normal text-bold">Total</span>
+        <span class="right text-gray">{{buy.buyInfo.total.amount}} {{buy.buyInfo.total.currency}}</span>
+      </li> 
+      <li class="line-b p15">
+        <span class="m10 text-normal text-bold">Payout at</span>
+        <span class="right text-gray">{{buy.buyInfo.payout_at | amCalendar}}</span>
+      </li> 
+      <li class="line-b p15">
+        <span class="m10 text-normal text-bold">Deposit into Copay Wallet</span>
+        <span class="right text-gray">{{buy.selectedWalletName}}</span>
+      </li>
+    </ul>
+    <div class="row">
+      <div class="columns">
+        <button class="button black round expand" 
+                ng-style="{'background-color': '#2b71b1'}"
+                ng-click="buy.confirmBuy(index.coinbaseToken, index.coinbaseAccount, buy.buyInfo)"
+                ng-disabled="buy.loading">
+          Buy
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="m20t row text-center" ng-show="buy.success">
+    <div class="columns">
+      <h1>Purchase initiated</h1>
+      <p class="text-gray">
+        Bitcoin purchase completed. Coinbase has queued the transfer to your selected Copay wallet.
+      </p>
+
+      <button class="outline dark-gray round expand"
+              ng-click="$root.go('coinbase')">OK</button>
+    </div>
+  </div>
+
+</div>
+<div class="extra-margin-bottom"></div>