Refactor selling bitcoin

src/js/controllers/buyCoinbase.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('buyCoinbaseController', function($scope, $log, $state, $timeout, $ionicHistory, lodash, coinbaseService, popupService, profileService, ongoingProcess, walletService) {
+angular.module('copayApp.controllers').controller('buyCoinbaseController', function($scope, $log, $state, $timeout, $ionicHistory, $ionicScrollDelegate, lodash, coinbaseService, popupService, profileService, ongoingProcess, walletService) {
 
   var amount;
   var currency;
@@ -13,6 +13,8 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
   };
 
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
+    coinbaseService.setCredentials();
+
     amount = data.stateParams.amount;
     currency = data.stateParams.currency;
 
@@ -140,6 +142,7 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
                   ongoingProcess.set('buyingBitcoin', false);
                   $scope.buySuccess = updatedTx.data;
                   $timeout(function() {
+                    $ionicScrollDelegate.resize();
                     $scope.$apply();
                   });
                 });
@@ -152,7 +155,7 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
   };
 
   $scope.showWalletSelector = function() {
-    $scope.walletSelectorTitle = ($scope.action) == 'buy' ? 'Receive in' : 'Sell From';
+    $scope.walletSelectorTitle = 'Receive in';
     $scope.showWallets = true;
   };
 

src/js/controllers/sellCoinbase.js

@@ -0,0 +1,308 @@
+'use strict';
+
+angular.module('copayApp.controllers').controller('sellCoinbaseController', function($scope, $log, $state, $timeout, $ionicHistory, $ionicScrollDelegate, lodash, coinbaseService, popupService, profileService, ongoingProcess, walletService, appConfigService, configService) {
+
+  var amount;
+  var currency;
+
+  var showErrorAndBack = function(err) {
+    $scope.sendStatus = '';
+    $log.error(err);
+    err = err.errors ? err.errors[0].message : err;
+    popupService.showAlert('Error', err, function() {
+      $ionicHistory.goBack();
+    });
+  };
+
+  var showError = function(err) {
+    $scope.sendStatus = '';
+    $log.error(err);
+    err = err.errors ? err.errors[0].message : err;
+    popupService.showAlert('Error', err);
+  };
+
+  var publishAndSign = function (wallet, txp, onSendStatusChange, cb) {
+    if (!wallet.canSign() && !wallet.isPrivKeyExternal()) {
+      var err = 'No signing proposal: No private key';
+      $log.info(err);
+      return cb(err);
+    }
+
+    walletService.publishAndSign(wallet, txp, function(err, txp) {
+      if (err) return cb(err);
+      return cb(null, txp);
+    }, onSendStatusChange);
+  };
+
+  var checkTransaction = lodash.throttle(function(count, txp) {
+    $log.warn('Check if transaction has been received by Coinbase. Try ' + count + '/5');
+    // TX amount in BTC
+    var satToBtc = 1 / 100000000;
+    var amountBTC = (txp.amount * satToBtc).toFixed(8);
+    coinbaseService.init(function(err, res) {
+      if (err) {
+        $log.error(err);
+        checkTransaction(count, txp);
+        return;
+      }
+      var accessToken = res.accessToken;
+      var accountId = res.accountId; 
+      var sellPrice = null;
+        
+      coinbaseService.sellPrice(accessToken, currency, function(err, sell) {
+        if (err) {
+          $log.debug(err);
+          checkTransaction(count, txp);
+          return;
+        }
+        sellPrice = sell.data;
+
+        coinbaseService.getTransactions(accessToken, accountId, function(err, ctxs) {
+          if (err) {
+            $log.debug(err);
+            checkTransaction(count, txp);
+            return;
+          }
+
+          var coinbaseTransactions = ctxs.data;
+          var txFound = false;
+          var ctx;
+          for(var i = 0; i < coinbaseTransactions.length; i++) {
+            ctx = coinbaseTransactions[i];
+            if (ctx.type == 'send' && ctx.from && ctx.amount.amount == amountBTC ) {
+              $log.warn('Transaction found!', ctx);
+              txFound = true;
+              $log.debug('Saving transaction to process later...');
+              ctx['payment_method'] = $scope.selectedPaymentMethodId.value;
+              ctx['status'] = 'pending'; // Forcing "pending" status to process later
+              ctx['price_sensitivity'] = $scope.selectedPriceSensitivity.data;
+              ctx['sell_price_amount'] = sellPrice ? sellPrice.amount : '';
+              ctx['sell_price_currency'] = sellPrice ? sellPrice.currency : 'USD';
+              ctx['description'] = appConfigService.nameCase + ' Wallet: ' + $scope.wallet.name;
+              coinbaseService.savePendingTransaction(ctx, null, function(err) {
+                ongoingProcess.set('sellingBitcoin', false, statusChangeHandler); 
+                if (err) $log.debug(err);
+              });
+              return;
+            }
+          }
+          if (!txFound) {
+            // Transaction sent, but could not be verified by Coinbase.com
+            $log.warn('Transaction not found in Coinbase.');
+            if (count < 5) {
+              checkTransaction(count + 1, txp);
+            } else {
+              ongoingProcess.set('sellingBitcoin', false, statusChangeHandler); 
+              showError('No transaction found');
+              return;
+            }
+          }
+        });
+      });
+    });
+  }, 8000, {
+    'leading': true
+  });
+
+  var statusChangeHandler = function (processName, showName, isOn) {
+    $log.debug('statusChangeHandler: ', processName, showName, isOn);
+    if ( processName == 'sellingBitcoin' && !isOn) {
+      $scope.sendStatus = 'success';
+      $timeout(function() {
+        $scope.$digest();
+      }, 100);
+    } else if (showName) {
+      $scope.sendStatus = showName;
+    }
+  };
+
+  $scope.$on("$ionicView.beforeEnter", function(event, data) {
+    coinbaseService.setCredentials();
+
+    amount = data.stateParams.amount;
+    currency = data.stateParams.currency;
+
+    if (amount < 1) {
+      showErrorAndBack('Amount must be at least 1.00 ' + currency);
+      return;
+    }
+    
+    $scope.priceSensitivity = coinbaseService.priceSensitivity;
+    $scope.selectedPriceSensitivity = { data: coinbaseService.selectedPriceSensitivity };
+    
+    $scope.network = coinbaseService.getNetwork();
+    $scope.wallets = profileService.getWallets({
+      m: 1, // Only 1-signature wallet
+      onlyComplete: true,
+      network: $scope.network
+    });
+    $scope.wallet = $scope.wallets[0]; // Default first wallet
+
+    ongoingProcess.set('connectingCoinbase', true);
+    coinbaseService.init(function(err, res) {
+      if (err) {
+        ongoingProcess.set('connectingCoinbase', false);
+        showErrorAndBack(err);
+        return;
+      }
+      var accessToken = res.accessToken;
+
+      $scope.paymentMethods = [];
+      $scope.selectedPaymentMethodId = { value : null };
+      coinbaseService.getPaymentMethods(accessToken, function(err, p) {
+        if (err) {
+          ongoingProcess.set('connectingCoinbase', false);
+          showErrorAndBack(err);
+          return;
+        }
+        var hasPrimary;
+        var pm;
+        for(var i = 0; i < p.data.length; i++) {
+          pm = p.data[i];
+          if (pm.allow_sell) {
+            $scope.paymentMethods.push(pm);
+          }
+          if (pm.allow_sell && pm.primary_sell) {
+            hasPrimary = true;
+            $scope.selectedPaymentMethodId.value = pm.id;
+          }
+        }
+        if (lodash.isEmpty($scope.paymentMethods)) {
+          ongoingProcess.set('connectingCoinbase', false);
+          showErrorAndBack('No payment method available to sell');
+          return;
+        }
+        if (!hasPrimary) $scope.selectedPaymentMethodId.value = $scope.paymentMethods[0].id;
+        $scope.sellRequest({ quote: true });
+      });
+    });   
+  });
+
+  $scope.sellRequest = function(opts) {
+    opts = opts || {};
+    ongoingProcess.set('connectingCoinbase', true);
+    coinbaseService.init(function(err, res) {
+      if (err) {
+        ongoingProcess.set('connectingCoinbase', false);
+        showErrorAndBack(err);
+        return;
+      }
+      var accessToken = res.accessToken;
+      var accountId = res.accountId;
+      var dataSrc = {
+        amount: amount,
+        currency: currency,
+        payment_method: $scope.selectedPaymentMethodId.value,
+        commit: opts.commit,
+        quote: opts.quote
+      };
+      coinbaseService.sellRequest(accessToken, accountId, dataSrc, function(err, data) {
+        ongoingProcess.set('connectingCoinbase', false);
+        if (err) {
+          ongoingProcess.set('connectingCoinbase', false);
+          showErrorAndBack(err);
+          return;
+        }
+        $scope.sellRequestInfo = data.data;
+        $timeout(function() {
+          $scope.$apply();
+        }, 100);
+      });
+    });
+  };
+
+  $scope.sellConfirm = function() {
+    var config = configService.getSync();
+    var configWallet = config.wallet;
+    var walletSettings = configWallet.settings;
+
+    var message = 'Selling bitcoin for ' + amount + ' ' + currency;
+    var okText = 'Confirm';
+    var cancelText = 'Cancel';
+    popupService.showConfirm(null, message, okText, cancelText, function(ok) {
+      if (!ok) return;
+      
+      ongoingProcess.set('sellingBitcoin', true, statusChangeHandler);
+      coinbaseService.init(function(err, res) {
+        if (err) {
+          ongoingProcess.set('sellingBitcoin', false, statusChangeHandler);
+          showError(err);
+          return;
+        }
+        var accessToken = res.accessToken;
+        var accountId = res.accountId;
+
+        var dataSrc = {
+          name: 'Received from ' + appConfigService.nameCase
+        };
+        coinbaseService.createAddress(accessToken, accountId, dataSrc, function(err, data) {
+          if (err) {
+            ongoingProcess.set('sellingBitcoin', false, statusChangeHandler);
+            showError(err);
+            return;
+          }
+          var outputs = [];
+          var toAddress = data.data.address;
+          var amountSat = parseInt(($scope.sellRequestInfo.amount.amount * 100000000).toFixed(0));
+          var comment = 'Sell bitcoin (Coinbase)';
+
+          outputs.push({
+            'toAddress': toAddress,
+            'amount': amountSat,
+            'message': comment
+          });
+
+          var txp = {
+            toAddress: toAddress,
+            amount: amountSat,
+            outputs: outputs,
+            message: comment,
+            payProUrl: null,
+            excludeUnconfirmedUtxos: configWallet.spendUnconfirmed ? false : true,
+            feeLevel: walletSettings.feeLevel || 'normal'
+          };
+
+          walletService.createTx($scope.wallet, txp, function(err, ctxp) {
+            if (err) {
+              ongoingProcess.set('sellingBitcoin', false, statusChangeHandler);
+              showError(err);
+              return;
+            }
+            $log.debug('Transaction created.');
+            publishAndSign($scope.wallet, ctxp, function() {}, function(err, txSent) {
+              if (err) {
+                ongoingProcess.set('sellingBitcoin', false, statusChangeHandler);
+                showError(err);
+                return;
+              }
+              $log.debug('Transaction broadcasted. Wait for Coinbase confirmation...');
+              checkTransaction(1, txSent);
+            });
+          });
+        }); 
+      }); 
+    });
+  };
+
+  $scope.showWalletSelector = function() {
+    $scope.walletSelectorTitle = 'Sell From';
+    $scope.showWallets = true;
+  };
+
+  $scope.onWalletSelect = function(wallet) {
+    $scope.wallet = wallet;
+  };
+
+  $scope.goBackHome = function() {
+    $scope.sendStatus = '';
+    $ionicHistory.nextViewOptions({
+      disableAnimate: true,
+      historyRoot: true
+    });
+    $ionicHistory.clearHistory();
+    $state.go('tabs.home').then(function() {
+      $state.transitionTo('tabs.buyandsell.coinbase');
+    });
+  };
+
+});

src/js/services/coinbaseService.js

@@ -368,7 +368,8 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
       amount: data.amount,
       currency: data.currency,
       payment_method: data.payment_method || null,
-      commit: data.commit || false
+      commit: data.commit || false,
+      quote: data.quote || false
     };
     $http(_post('/accounts/' + accountId + '/sells', token, data)).then(function(data) {
       $log.info('Coinbase Sell Request: SUCCESS');

src/sass/views/integrations/coinbase.scss

@@ -1,21 +1,7 @@
-.coinbase-preferences {
+#coinbase {
-  ul {
+  @extend .deflash-blue;
-    font-size: 14px;
+  
-    background: white;
+  .add-bottom-for-cta {
-    li {
+    bottom: 92px;
-      padding: 16px 10px 16px 16px;
-      border-bottom: 1px solid #E9E9EC;
-    }
   }
 }
-
-.coinbase-last-transactions-content {
-  background: #fff;
-  padding: 0.8rem 1rem;
-  cursor: pointer;
-  border-bottom: 1px solid #E4E8EC;
-}
-
-.coinbase-pointer {
-  cursor: pointer;
-}

www/views/buyCoinbase.html

@@ -77,6 +77,7 @@
 
     <div ng-show="buySuccess">
       <div class="p20">
+        <h1 class="text-center">Bought</h1>
         Bitcoin purchase completed. Coinbase has queued the transfer to your selected wallet
       </div>
       <button 

www/views/coinbase.html

@@ -91,7 +91,7 @@
          ng-click="coinbase.openTxModal(tx)">
 
         <span class="item-note">
-          <div ng-show="tx.error">
+          <div class="assertive" ng-show="tx.error || tx.status == 'error'">
             Error
           </div>
           <div ng-show="!tx.error">

www/views/sellCoinbase.html

@@ -0,0 +1,137 @@
+<ion-view id="coinbase" hide-tabs>
+  <ion-nav-bar class="bar-royal">
+    <ion-nav-back-button>
+    </ion-nav-back-button>
+    <ion-nav-title>Sell bitcoin</ion-nav-title>
+  </ion-nav-bar>
+
+  <ion-content class="add-bottom-for-cta">
+    <!-- SELL -->
+    <div class="list">
+      <div class="item item-divider">
+        Sale Info
+      </div>
+      <label class="item item-input item-select">
+        <div class="input-label">
+          Deposit into
+        </div>
+        <select ng-model="selectedPaymentMethodId.value"
+                ng-options="item.id as item.name for item in paymentMethods"
+                ng-change="sellRequest({quote: true})">
+        </select>
+      </label>
+
+      <div ng-if="sellRequestInfo">
+        <div class="item item-divider">
+          At what percentage lower price would you accept to sell?
+        </div>
+        <label class="item item-input item-select" ng-if="priceSensitivity">
+          <div class="input-label">Price Sensitivity</div>
+          <select
+                ng-model="selectedPriceSensitivity.data"
+                ng-options="item as item.name for item in priceSensitivity track by item.value">
+          </select>
+        </label>
+        <div class="item size-12" ng-if="selectedPriceSensitivity">
+          <div class="m10b">
+            Coinbase has not yet implemented an immediate method to sell bitcoin from a wallet. To make this sale, funds
+            will be sent to your Coinbase account, and sold when Coinbase accepts the transaction (usually one
+            hour).
+          </div>
+          <div class="label" ng-if="sellRequestInfo">Estimated sale value: 
+            <strong>
+            {{sellRequestInfo.total.amount | currency : '' : 2}} 
+            {{sellRequestInfo.total.currency}}
+            </strong>
+          </div>
+          <div class="label" ng-if="sellRequestInfo">Still sell if price fall until: 
+            <strong>
+            {{(sellRequestInfo.total.amount - 
+            (selectedPriceSensitivity.data.value / 100) * sellRequestInfo.total.amount) | currency : '' : 2}} 
+            {{sellRequestInfo.total.currency}}
+            </strong>
+          </div>
+        </div>
+
+        <div class="item item-divider">
+          Sell from
+        </div>
+        <div class="item" ng-click="showWalletSelector()">
+          <span>Wallet</span>
+          <span class="item-note">{{wallet ? wallet.name : '...'}}</span>
+        </div>
+        <div class="item">
+          Amount
+          <span class="item-note">
+            {{sellRequestInfo.amount.amount}} {{sellRequestInfo.amount.currency}}
+          </span>
+        </div> 
+
+        <div class="item item-divider">
+          Fees
+        </div>
+        <div class="item" ng-repeat="fee in sellRequestInfo.fees">
+          {{fee.type}}
+          <span class="item-note">
+            {{fee.amount.amount}} {{fee.amount.currency}}
+          </span>
+        </div>
+
+        <div class="item item-divider">
+          Total
+        </div>
+        <div class="item">
+          Subtotal
+          <span class="item-note">
+            {{sellRequestInfo.subtotal.amount}} {{sellRequestInfo.subtotal.currency}}
+          </span>
+        </div>
+        <div class="item">
+          Total
+          <span class="item-note">
+            {{sellRequestInfo.total.amount}} {{sellRequestInfo.total.currency}}
+          </span>
+        </div>
+      </div>
+    </div>
+
+  </ion-content>
+
+  <click-to-accept
+    ng-disabled="!selectedPaymentMethodId.value || !sellRequestInfo || !wallet"
+    ng-click="sellConfirm()"
+    ng-if="!isCordova && sellRequestInfo"
+    click-send-status="sendStatus"
+    has-wallet-chosen="wallet"
+    insufficient-funds="!selectedPaymentMethodId.value"
+    no-matching-wallet="!sellRequestInfo">
+    Confirm sale
+  </click-to-accept>
+  <slide-to-accept
+    ng-disabled="!selectedPaymentMethodId.value || !sellRequestInfo || !wallet"
+    ng-if="isCordova && sellRequestInfo"
+    slide-on-confirm="sellConfirm()"
+    slide-send-status="sendStatus"
+    has-wallet-chosen="wallet"
+    insufficient-funds="!selectedPaymentMethodId.value"
+    no-matching-wallet="!sellRequestInfo">
+    Slide to sell
+  </slide-to-accept>
+  <slide-to-accept-success
+    slide-success-show="sendStatus === 'success'"
+    slide-success-on-confirm="goBackHome()"
+    slide-success-hide-on-confirm="true">
+    <span>Funds sent to Coinbase Account</span>
+    <div class="m10 size-14">
+      The transaction is not yet confirmed, and will show as "Pending" in your Activity. The bitcoin sale will be completed automatically once it is confirmed by Coinbase.
+    </div>
+  </slide-to-accept-success>
+
+  <wallet-selector
+    wallet-selector-title="walletSelectorTitle"
+    wallet-selector-wallets="wallets"
+    wallet-selector-selected-wallet="wallet"
+    wallet-selector-show="showWallets"
+    wallet-selector-on-select="onWalletSelect">
+  </wallet-selector>
+</ion-view>