anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Improvement - 426 - New Payment Sent screen
This commit is contained in:
Jean-Baptiste Dominguez 2018-08-08 10:51:51 +09:00 • committed by GitHub
commit 699d1dddf2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 91 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

5
i18n/po/template.pot
View file

@ -652,6 +652,7 @@ msgstr ""
#: src/js/controllers/copayers.js:79
#: src/js/controllers/export.js:193
#: src/js/controllers/confirm.js:41
#: www/views/includes/copyToClipboard.html:4
msgid "Copied to clipboard"
msgstr ""
@ -2158,6 +2159,10 @@ msgstr ""
msgid "Payment Sent"
msgstr ""
#: www/views/includes/slideToAcceptSuccess.html:12
msgid "Share this transaction"
msgstr ""
#: www/views/modals/txp-details.html:32
msgid "Payment accepted, but not yet broadcasted"
msgstr ""

14
src/js/controllers/confirm.js
View file

@ -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);
};

11
src/js/directives/slideToAcceptSuccess.js
View file

@ -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();
}
}
};
});

7
src/js/services/clipboardService.js
View file

@ -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;
}
};

38
src/sass/views/includes/slideToAcceptSuccess.scss
View file

@ -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;
}
}

10
www/img/icon-sent-successful.svg Normal file
View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<path id="_ionicons_svg_md-checkmark-circle-outline" class="cls-1" d="M96.969,115.231,85.35,126.85,122.7,164.2l83-83L194.081,69.581,122.7,140.544,96.969,115.231ZM197.4,131a66.116,66.116,0,1,1-48.138-63.91l12.863-12.865A77.206,77.206,0,0,0,131,48a83,83,0,1,0,83,83Z" transform="translate(-48 -48)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 458 B

17
www/img/icon-share-white.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="400px" height="400px" viewBox="56 56 400 400" enable-background="new 56 56 400 400" xml:space="preserve">
<g>
<g>
<path fill="#FFFFFF" d="M350.833,297.017c-17.517,0-32.967,8.346-43.062,21.124l-93.629-47.881
c1.226-4.571,2.106-9.296,2.106-14.267c0-5.412-1.046-10.507-2.506-15.465l93.216-47.661
c10.039,13.358,25.889,22.089,43.888,22.089c30.489,0,55.153-24.664,55.153-55.125c0-30.435-24.664-55.112-55.152-55.112
c-30.42,0-55.111,24.677-55.111,55.111c0,4.985,0.882,9.723,2.12,14.308l-93.615,47.882
c-10.108-12.793-25.587-21.166-43.131-21.166c-30.462,0-55.111,24.691-55.111,55.139c0,30.447,24.65,55.125,55.111,55.125
c18.026,0,33.863-8.758,43.943-22.129l93.174,47.66c-1.46,4.943-2.52,10.081-2.52,15.507c0,30.447,24.691,55.125,55.111,55.125
c30.489,0,55.152-24.678,55.152-55.125C405.985,321.681,381.322,297.017,350.833,297.017z"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
www/views/confirm.html
View file

@ -120,6 +120,7 @@
<slide-to-accept-success
slide-success-show="sendStatus === 'success'"
slide-success-on-confirm="onSuccessConfirm()"
slide-success-on-share="shareTransaction"
slide-success-hide-on-confirm="true">
<span ng-show="wallet.m == 1 && (wallet.canSign() || wallet.isPrivKeyExternal())" translate>Payment Sent</span>
<span ng-show="wallet.m > 1 && (wallet.canSign() || wallet.isPrivKeyExternal())" translate>Proposal Created</span>

7
www/views/includes/slideToAcceptSuccess.html
View file

@ -1,13 +1,16 @@
<div
class="slide-success__background"
ng-class="{'fill-screen': fillScreen, 'slide-success__windows-background': isWindowsPhoneApp}">
ng-class="{'fill-screen': fillScreen}">
</div>
<div ng-disabled="wallet" class="slide-success__content">
<img src="img/onboarding-success.svg" ng-class="{reveal: fillScreen}">
<img src="img/icon-sent-successful.svg" ng-class="{reveal: fillScreen}">
<div class="slide-success__content__header" ng-class="{reveal: fillScreen}">
<ng-transclude>Payment Sent</ng-transclude>
</div>
<div class="slide-success__content__share" ng-if="hasShareFunction" ng-class="{reveal: fillScreen}" ng-click="onShareButtonClick()">
<span><img src="img/icon-share-white.svg"></span><span translate>Share this transaction</span>
</div>
</div>
<div class="slide-success__footer" ng-class="{reveal: fillScreen}">