Merge pull request #220 from Bitcoin-com/wallet/task/426

Improvement - 426 - New Payment Sent screen

src/js/controllers/confirm.js

@@ -1,11 +1,12 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('confirmController', function($rootScope, $scope, $interval, $filter, $timeout, $ionicScrollDelegate, gettextCatalog, walletService, platformInfo, lodash, configService, $stateParams, $window, $state, $log, profileService, bitcore, bitcoreCash, txFormatService, ongoingProcess, $ionicModal, popupService, $ionicHistory, $ionicConfig, payproService, feeService, bwcError, txConfirmNotification, externalLinkService, firebaseEventsService, soundService) {
+angular.module('copayApp.controllers').controller('confirmController', function($rootScope, $scope, $interval, $filter, $timeout, $ionicScrollDelegate, ionicToast, gettextCatalog, walletService, platformInfo, lodash, configService, $stateParams, $window, $state, $log, profileService, bitcore, bitcoreCash, txFormatService, ongoingProcess, $ionicModal, popupService, $ionicHistory, $ionicConfig, payproService, feeService, bwcError, txConfirmNotification, externalLinkService, firebaseEventsService, soundService, clipboardService) {
 
   var countDown = null;
   var FEE_TOO_HIGH_LIMIT_PER = 15;
 
   var tx = {};
+  var lastTxId = "";
 
   // Config Related values
   var config = configService.getSync();
@@ -31,6 +32,16 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     }, 10);
   }
 
+  $scope.shareTransaction = function() {
+    var explorerTxUrl = 'https://explorer.bitcoin.com/'+tx.coin+'/tx/'+lastTxId;
+    if (platformInfo.isCordova) {
+      var text = 'Take a look at this Bitcoin transaction here: '+explorerTxUrl;
+      window.plugins.socialsharing.share(text, null, null, null);
+    } else {
+      ionicToast.show(gettextCatalog.getString('Copied to clipboard'), 'bottom', false, 3000);
+      clipboardService.copyToClipboard(explorerTxUrl);
+    }
+  };
 
   $scope.showWalletSelector = function() {
     $scope.walletSelector = true;
@@ -612,6 +623,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
             txConfirmNotification.subscribe(wallet, {
               txid: txp.txid
             });
+            lastTxId = txp.txid;
           }
         }, onSendStatusChange);
       };

src/js/directives/slideToAcceptSuccess.js

@@ -9,12 +9,12 @@ angular.module('copayApp.directives')
       scope: {
         isShown: '=slideSuccessShow',
         onConfirm: '&slideSuccessOnConfirm',
-        hideOnConfirm: '=slideSuccessHideOnConfirm'
+        hideOnConfirm: '=slideSuccessHideOnConfirm',
+        onShare: '=slideSuccessOnShare',
       },
       link: function(scope, element, attrs) {
-
-        scope.isWindowsPhoneApp = platformInfo.isCordova && platformInfo.isWP;
-
+        scope.isCordova = platformInfo.isCordova;
+        scope.hasShareFunction = typeof scope.onShare === 'function';
         var elm = element[0];
         elm.style.display = 'none';
         scope.$watch('isShown', function() {
@@ -32,6 +32,9 @@ angular.module('copayApp.directives')
             elm.style.display = 'none';
           }
         };
+        scope.onShareButtonClick = function() {
+          scope.onShare();
+        }
       }
     };
   });

src/js/services/clipboardService.js

@@ -11,10 +11,15 @@ angular.module('copayApp.services').factory('clipboardService', function ($http,
       cordova.plugins.clipboard.copy(data);
     } else if (platformInfo.isNW) {
       nodeWebkitService.writeToClipboard(data);
+    } else if (navigator && navigator.clipboard) {
+      $log.debug("Use navigator clipboard.")
+      navigator.clipboard.writeText(data).catch(err => {
+        $log.debug("Clipboard writing is not supported in your browser..");
+      });
     } else if (clipboard.supported) {
       clipboard.copyText(data);
     } else {
-      // No supported
+      // Not supported
       return;
     }
   };

src/sass/views/includes/slideToAcceptSuccess.scss

@@ -12,12 +12,6 @@ slide-to-accept-success {
 
   .slide-success {
     $duration: 400ms;
-    &__windows-background {
-      background: $v-success-bg-color;
-      height: 100%;
-      width: 100%;
-      position: fixed;
-    }
     &__background {
       $start-radius: 5;
       $scale-factor: 20;
@@ -40,9 +34,11 @@ slide-to-accept-success {
     &__content {
       position: relative;
       z-index: 1;
-      margin-top: -20vh;
+      margin-top: -10vh;
 
       > img {
+        width: 45vw;
+        max-width: 166px;
         margin-bottom: 1.8rem;
         -webkit-transform: translateY(5rem);
         transform: translateY(5rem);
@@ -59,7 +55,7 @@ slide-to-accept-success {
 
       &__header {
         color: #FFFFFF;
-        font-size: 26px;
+        font-size: 29px;
         -webkit-transform: translateY(5rem);
         transform: translateY(5rem);
         opacity: 0;
@@ -72,6 +68,26 @@ slide-to-accept-success {
           opacity: 1;
         }
       }
+      &__share {
+        transition: transform $duration ease, opacity $duration ease;
+        transition-delay: 600ms;
+        opacity: 0;
+        margin-top: 15vh;
+        span {
+          color: #FFF;
+          font-size: 22px;
+          height: 28px;
+        }
+        img {
+          height: 28px;
+          width: auto;
+          vertical-align: bottom;
+          margin-right: 4px;
+        }
+        &.reveal {
+          opacity: 0.79;
+        }
+      }
     }
 
     &__footer {
@@ -98,11 +114,11 @@ slide-to-accept-success {
       &__btn {
         display: block;
         color: #FFFFFF;
-        font-size: 18px;
+        font-size: 22px;
         font-weight: 600;
         letter-spacing: 2.86px;
-        padding: 1rem 0 1.1rem;
-        border-top: 1px solid rgba(255, 255, 255, .45);
+        padding: 2rem 0 2.1rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.25);
         cursor: pointer;
       }
     }