feat(coinbase): clean up coinbase integration onboarding

src/js/controllers/coinbase.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('coinbaseController', function($scope, $timeout, $ionicModal, $ionicHistory, $log, coinbaseService, lodash, platformInfo, ongoingProcess, popupService, externalLinkService) {
+angular.module('copayApp.controllers').controller('coinbaseController', function($scope, $timeout, $ionicModal, $ionicHistory, $log, coinbaseService, lodash, platformInfo, ongoingProcess, popupService, externalLinkService, gettextCatalog) {
 
   var isNW = platformInfo.isNW;
   var isCordova = platformInfo.isCordova;
@@ -9,7 +9,7 @@ angular.module('copayApp.controllers').controller('coinbaseController', function
     $scope.currency = coinbaseService.getAvailableCurrency();
     coinbaseService.getStoredToken(function(at) {
       $scope.accessToken = at;
-      
+
       // Update Access Token if necessary
       $scope.loading = true;
       coinbaseService.init(function(err, data) {
@@ -79,11 +79,35 @@ angular.module('copayApp.controllers').controller('coinbaseController', function
     }
   }
 
+  this.openSignupWindow = function() {
+    var url = coinbaseService.getSignupUrl();
+    var optIn = true;
+    var title = gettextCatalog.getString('Create Account');
+    var message = gettextCatalog.getString('This will open Coinbase.com, where you can create an account.');
+    var okText = gettextCatalog.getString('Go to Coinbase');
+    var cancelText = gettextCatalog.getString('Back');
+    externalLinkService.open(url, optIn, title, message, okText, cancelText);
+  }
+
+  this.openSupportWindow = function() {
+    var url = coinbaseService.getSupportUrl();
+    var optIn = true;
+    var title = gettextCatalog.getString('Coinbase Support');
+    var message = gettextCatalog.getString('Help and support for the Coinbase service is available on their website.');
+    var okText = gettextCatalog.getString('Open Help Center');
+    var cancelText = gettextCatalog.getString('Go Back');
+    externalLinkService.open(url, optIn, title, message, okText, cancelText);
+  }
+
   this.getAuthenticateUrl = function() {
     $scope.showOauthForm = isCordova || isNW ? false : true;
     return coinbaseService.getOauthCodeUrl();
   };
 
+  this.toggleOauthForm = function() {
+    $scope.showOauthForm = !$scope.showOauthForm;
+  }
+
   this.submitOauthCode = function(code) {
     var self = this;
     ongoingProcess.set('connectingCoinbase', true);
@@ -112,6 +136,7 @@ angular.module('copayApp.controllers').controller('coinbaseController', function
 
   var self = this;
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
+    $scope.showOauthForm = false;
     coinbaseService.setCredentials();
     if (data.stateParams && data.stateParams.code) {
       coinbaseService.getStoredToken(function(at) {

src/js/services/coinbaseService.js

@@ -28,7 +28,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
       name: '10%'
     }
   ];
-  
+
   root.selectedPriceSensitivity = root.priceSensitivity[1];
 
   root.setCredentials = function() {
@@ -117,7 +117,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
     var satToBtc = 1 / 100000000;
     var unitToSatoshi = config.unitToSatoshi;
     var amountUnitStr;
-    
+
     // IF 'USD'
     if (currency) {
       amountUnitStr = $filter('formatFiatAmount')(amount) + ' ' + currency;
@@ -128,10 +128,18 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
       amount = (amountSat * satToBtc).toFixed(8);
       currency = 'BTC';
     }
-    
+
     return [amount, currency, amountUnitStr];
   };
 
+  root.getSignupUrl = function() {
+    return credentials.HOST + '/signup';
+  }
+
+  root.getSupportUrl = function() {
+    return 'https://support.coinbase.com/';
+  }
+
   root.getOauthCodeUrl = function() {
     return credentials.HOST
       + '/oauth/authorize?response_type=code&client_id='
@@ -483,7 +491,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
   };
 
   // Pending transactions
-  
+
   root.savePendingTransaction = function(ctx, opts, cb) {
     _savePendingTransaction(ctx, opts, cb);
   };
@@ -516,7 +524,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
     storageService.getCoinbaseTxs(credentials.NETWORK, function(err, txs) {
       txs = txs ? JSON.parse(txs) : {};
       coinbasePendingTransactions.data = lodash.isEmpty(txs) ? null : txs;
-    
+
       root.init(function(err, data) {
         if (err || lodash.isEmpty(data)) {
           if (err) $log.error(err);
@@ -529,7 +537,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
           if ((dataFromStorage.type == 'sell' && dataFromStorage.status == 'completed') ||
             (dataFromStorage.type == 'buy' && dataFromStorage.status == 'completed') ||
             dataFromStorage.status == 'error' ||
-            (dataFromStorage.type == 'send' && dataFromStorage.status == 'completed')) 
+            (dataFromStorage.type == 'send' && dataFromStorage.status == 'completed'))
             return;
           root.getTransaction(accessToken, accountId, txId, function(err, tx) {
             if (err || lodash.isEmpty(tx) || (tx.data && tx.data.error)) {
@@ -593,7 +601,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
     $log.debug('Updating pending transactions...');
     root.setCredentials();
     var pendingTransactions = { data: {} };
-    root.getPendingTransactions(pendingTransactions); 
+    root.getPendingTransactions(pendingTransactions);
   }, 20000);
 
   var _updateTxs = function(coinbasePendingTransactions) {

src/sass/views/integrations/coinbase.scss

@@ -9,7 +9,7 @@
     stroke: #0067c8;
     fill: #0067c8;
   }
-  
+
   .add-bottom-for-cta {
     bottom: 92px;
   }
@@ -73,7 +73,7 @@
         color: $item-label-color;
         margin-bottom: 8px;
       }
-      
+
       .capitalized {
         text-transform: capitalize;
       }

src/sass/views/integrations/integrations.scss

@@ -0,0 +1,43 @@
+@import "coinbase";
+@import "glidera";
+@import "amazon";
+
+.integration-onboarding {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  &-logo {
+    display: inline-block;
+    img {
+      max-width: 170px;
+    }
+  }
+  &-heading {
+    font-size: 20px;
+    margin: 1rem;
+  }
+  &-description {
+    margin-top: 0;
+    margin-left: 2rem;
+    margin-right: 2rem;
+    margin-bottom: 100px;
+    opacity: .6;
+    max-width: 300px;
+  }
+  &-support-link {
+    cursor: pointer;
+  }
+  &-cta, &-oauthform {
+    position: absolute;
+    bottom: 5vh;
+    width: 100%;
+  }
+  &-oauthform {
+    input {
+      border-bottom: 2px solid $light-gray;
+    }
+  }
+}

src/sass/views/views.scss

@@ -42,7 +42,5 @@
 @import "includes/tx-status";
 @import "includes/itemSelector";
 @import "includes/walletSelector";
-@import "integrations/coinbase";
-@import "integrations/glidera";
-@import "integrations/amazon";
+@import "integrations/integrations";
 @import "custom-amount";