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

buy flow rename and fixes

Browse source
This commit is contained in:
Gabriel Bazán 2016-12-02 17:18:48 -03:00
commit a76dfb110d
10 changed files with 75 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -241,6 +241,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
});
$scope.showWalletSelector = function() {
$scope.walletSelectorTitle = !$scope.isGlidera && !$scope.buyGlidera ? 'Send From' : 'Receive in';
if (!$scope.useSendMax && ($scope.insufficientFunds || $scope.noMatchingWallet)) return;
$scope.showWallets = true;
};

3
src/js/directives/clickToAccept.js
View file

@ -8,10 +8,11 @@ angular.module('copayApp.directives')
transclude: true,
scope: {
sendStatus: '=clickSendStatus',
wallet: '=hasWalletChosen'
},
link: function(scope, element, attrs) {
scope.$watch('sendStatus', function() {
if(scope.sendStatus !== 'success') {
if (scope.sendStatus !== 'success') {
scope.displaySendStatus = scope.sendStatus;
}
});

54
src/js/directives/slideToAccept.js
View file

@ -8,7 +8,8 @@ angular.module('copayApp.directives')
transclude: true,
scope: {
sendStatus: '=slideSendStatus',
onConfirm: '&slideOnConfirm'
onConfirm: '&slideOnConfirm',
wallet: '=hasWalletChosen'
},
link: function(scope, element, attrs) {
@ -33,9 +34,9 @@ angular.module('copayApp.directives')
scope.displaySendStatus = '';
scope.$watch('sendStatus', function() {
if(!scope.sendStatus) {
if (!scope.sendStatus) {
reset();
} else if(scope.sendStatus === 'success') {
} else if (scope.sendStatus === 'success') {
scope.displaySendStatus = '';
$timeout(function() {
reset();
@ -51,19 +52,20 @@ angular.module('copayApp.directives')
var startTime = currentEaseStartTime;
var initialPct = fromPct;
var distance = pct - fromPct;
function ease() {
if(startTime !== currentEaseStartTime) {
if (startTime !== currentEaseStartTime) {
return;
}
$window.requestAnimationFrame(function() {
var now = Date.now();
var elapsed = now - startTime;
var normalizedElapsedTime = elapsed/duration;
var normalizedElapsedTime = elapsed / duration;
var newVal = easeFx(normalizedElapsedTime);
var newPct = newVal*distance + initialPct;
var newPct = newVal * distance + initialPct;
animateFx(newPct);
scope.$digest();
if(elapsed < duration) {
if (elapsed < duration) {
ease();
} else {
deferred.resolve();
@ -93,31 +95,33 @@ angular.module('copayApp.directives')
function setNewSliderStyle(pct) {
var knobWidthPct = getKnobWidthPercentage();
var translatePct = pct - knobWidthPct;
if(isSliding) {
translatePct += 0.35*pct;
if (isSliding) {
translatePct += 0.35 * pct;
}
scope.sliderStyle = getTransformStyle(translatePct);
curSliderPct = pct;
}
function setNewBitcoinStyle(pct) {
var translatePct = -2.25*pct;
var translatePct = -2.25 * pct;
scope.bitcoinStyle = getTransformStyle(translatePct);
curBitcoinPct = pct;
}
function setNewTextStyle(pct) {
var translatePct = -0.1*pct;
var translatePct = -0.1 * pct;
scope.textStyle = getTransformStyle(translatePct);
curTextPct = pct;
}
function getTransformStyle(translatePct) {
return {'transform': 'translateX(' + translatePct + '%)'};
return {
'transform': 'translateX(' + translatePct + '%)'
};
}
function getKnobWidthPercentage() {
var knobWidthPct = (KNOB_WIDTH/elm.clientWidth)*100;
function getKnobWidthPercentage() {
var knobWidthPct = (KNOB_WIDTH / elm.clientWidth) * 100;
return knobWidthPct;
}
@ -175,8 +179,8 @@ angular.module('copayApp.directives')
function getTouchXPosition($event) {
var x;
if($event.touches || $event.changedTouches) {
if($event.touches.length) {
if ($event.touches || $event.changedTouches) {
if ($event.touches.length) {
x = $event.touches[0].clientX;
} else {
x = $event.changedTouches[0].clientX;
@ -190,18 +194,18 @@ angular.module('copayApp.directives')
function getSlidPercentage($event) {
var x = getTouchXPosition($event);
var width = elm.clientWidth;
var pct = (x/width)*100;
if(x >= width) {
var pct = (x / width) * 100;
if (x >= width) {
pct = 100;
}
return pct;
}
scope.onTouchstart = function($event) {
if(scope.isSlidFully) {
if (scope.isSlidFully) {
return;
}
if(!isSliding) {
if (!isSliding) {
var pct = getSlidPercentage($event);
if (pct > MAX_SLIDE_START_PERCENTAGE) {
jiggleSlider();
@ -209,7 +213,7 @@ angular.module('copayApp.directives')
} else {
isSliding = true;
var knobWidthPct = getKnobWidthPercentage();
if(pct < knobWidthPct) {
if (pct < knobWidthPct) {
pct = knobWidthPct;
}
pct += PERCENTAGE_BUMP;
@ -219,12 +223,12 @@ angular.module('copayApp.directives')
};
scope.onTouchmove = function($event) {
if(!isSliding || scope.isSlidFully) {
if (!isSliding || scope.isSlidFully) {
return;
}
var pct = getSlidPercentage($event);
var knobWidthPct = getKnobWidthPercentage();
if(pct < knobWidthPct) {
if (pct < knobWidthPct) {
pct = knobWidthPct;
}
pct += PERCENTAGE_BUMP;
@ -233,11 +237,11 @@ angular.module('copayApp.directives')
};
scope.onTouchend = function($event) {
if(scope.isSlidFully) {
if (scope.isSlidFully) {
return;
}
var pct = getSlidPercentage($event);
if(isSliding && pct > FULLY_SLID_PERCENTAGE) {
if (isSliding && pct > FULLY_SLID_PERCENTAGE) {
pct = 100;
setSliderPosition(pct);
alertSlidFully();

1
src/js/directives/walletSelector.js
View file

@ -7,6 +7,7 @@ angular.module('copayApp.directives')
templateUrl: 'views/includes/walletSelector.html',
transclude: true,
scope: {
title: '=walletSelectorTitle',
show: '=walletSelectorShow',
wallets: '=walletSelectorWallets',
selectedWallet: '=walletSelectorSelectedWallet',

3
src/sass/views/amount.scss
View file

@ -85,8 +85,9 @@
color: $dark-gray;
font-weight: bold;
.limits {
margin-top: 20px;
margin-top: 10px;
color: $light-gray;
font-size: 12px;
}
}
}

26
src/sass/views/includes/txp-details.scss
View file

@ -47,22 +47,6 @@
color: #9B9B9B;
}
}
.glidera-explanation {
padding: 0 1rem;
margin: 1rem 0;
white-space: normal;
}
.glidera-description {
text-align: center;
font-size: 15px;
color: $mid-gray;
margin: 1rem 0;
a {
font-weight: bold;
cursor: pointer;
cursor: hand;
}
}
}
.item {
border-color: $item-border-color;
@ -261,7 +245,6 @@
color: rgba(58, 58, 58, .6);
margin-bottom: 1.5rem;
}
.glidera-success {
margin-top: 15px;
span {
@ -269,4 +252,13 @@
display: block;
}
}
.glidera-explanation {
padding: 0 1rem;
white-space: normal;
}
.glidera-description {
text-align: center;
font-size: 12px;
color: $mid-gray;
}
}

48
www/views/confirm.html
View file

@ -12,26 +12,14 @@
<div class="item head">
<div class="sending-label">
<img src="img/icon-tx-sent-outline.svg">
<span translate ng-if="!useSendMax">Sending</span>
<span translate ng-if="!useSendMax && !isGlidera">Sending</span>
<span translate ng-if="useSendMax">Sending maximum amount</span>
<span ng-if="isGlidera && glideraBuy">Buying</span>
</div>
<div class="amount-label">
<div class="amount">{{displayAmount || '...'}} <span class="unit">{{displayUnit}}</span></div>
<div class="alternative">{{alternativeAmountStr || '...'}}</div>
</div>
<div ng-show="isGlidera">
<div class="glidera-explanation">
<div class="glidera-description" ng-show="buyPrice.qty">
Buy {{buyPrice.subtotal|currency:'':2}} {{buyPrice.currency}} in Bitcoin at {{buyPrice.price}} {{buyPrice.currency}}/BTC
</div>
<div class="glidera-description">
Fiat will be immediately withdrawn from your bank account
</div>
<div class="glidera-description">
Each bitcoin wallet can generate billions of addresses from your 12-word backup. A new address is automatically generated and shown each time your recive a payment
</div>
</div>
</div>
</div>
<div class="info">
<div class="item single-line" ng-if="paypro">
@ -40,7 +28,8 @@
<span class="item-note" ng-if="paymentExpired.value" ng-style="{'color': 'red'}" translate>Expired</span>
</div>
<div class="item">
<span class="label" translate>To</span>
<span class="label" ng-if="!isGlidera" translate>To</span>
<span class="label" ng-if="isGlidera && glideraBuy">From</span>
<span class="payment-proposal-to">
<img ng-if="!cardId && !isGiftCard && !isGlidera" src="img/icon-bitcoin-small.svg">
<img ng-if="cardId" src="img/icon-card.svg" width="34">
@ -65,7 +54,8 @@
</span>
</div>
<a class="item item-icon-right" ng-hide="!useSendMax && (insufficientFunds || noMatchingWallet)" ng-click="showWalletSelector()">
<span class="label" translate>From</span>
<span class="label" ng-if="!isGlidera" translate>From</span>
<span class="label" ng-if="isGlidera && glideraBuy" translate>To</span>
<div class="wallet">
<i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
@ -87,6 +77,20 @@
{{fee || '...'}}
</span>
</div>
<div class="item" ng-show="isGlidera">
<span class="label">Information</span>
<div class="glidera-explanation">
<div class="glidera-description" ng-show="buyPrice.qty">
Buy {{buyPrice.subtotal|currency:'':2}} {{buyPrice.currency}} in Bitcoin at {{buyPrice.price}} {{buyPrice.currency}}/BTC
</div>
<div class="glidera-description">
Fiat will be immediately withdrawn from your bank account.
</div>
<div class="glidera-description">
The bitcoins will be purchased and deposited to "{{wallet.name || '...' }}" wallet in 2-4 business days.
</div>
</div>
</div>
<div class="text-center" ng-show="noMatchingWallet">
<span class="badge badge-energized" translate>No wallets available</span>
</div>
@ -97,15 +101,18 @@
</div>
</ion-content>
<click-to-accept
ng-click="approve(statusChangeHandler)"
ng-click="wallet ? approve(statusChangeHandler) : null"
ng-if="!isCordova && wallets[0] && !insufficientFunds && !noMatchingWallet"
click-send-status="sendStatus">
click-send-status="sendStatus"
has-wallet-chosen="wallet">
Click to pay
</click-to-accept>
<slide-to-accept
ng-disabled="!wallet"
ng-if="isCordova && wallets[0] && !insufficientFunds && !noMatchingWallet"
slide-on-confirm="onConfirm()"
slide-send-status="sendStatus">
slide-on-confirm="wallet ? onConfirm() : null"
slide-send-status="sendStatus"
has-wallet-chosen="wallet">
Slide to pay
</slide-to-accept>
<slide-to-accept-success
@ -121,6 +128,7 @@
</slide-to-accept-success>
<wallet-selector
wallet-selector-title="walletSelectorTitle"
wallet-selector-wallets="wallets"
wallet-selector-selected-wallet="wallet"
wallet-selector-show="showWallets"

2
www/views/includes/clickToAccept.html
View file

@ -1,4 +1,4 @@
<button class="click-to-accept__button button button-standard button-primary" ng-class="{disable: sendStatus}">
<button ng-disabled="!wallet" class="click-to-accept__button button button-standard button-primary" ng-class="{disable: sendStatus}">
<span ng-if="!sendStatus">
<ng-transclude></ng-transclude>
</span>

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

@ -3,7 +3,7 @@
ng-class="{'fill-screen': fillScreen}">
</div>
<div class="slide-success__content">
<div ng-disabled="wallet" class="slide-success__content">
<img src="img/onboarding-success.svg" ng-class="{reveal: fillScreen}">
<div class="slide-success__content__header" ng-class="{reveal: fillScreen}">
<ng-transclude>Payment Sent</ng-transclude>

2
www/views/includes/walletSelector.html
View file

@ -1,6 +1,6 @@
<action-sheet action-sheet-show="show" class="wallet-selector">
<img class="back-arrow" src="img/icon-back-arrow.svg" ng-click="hide()">
<div class="header">Send from</div>
<div class="header">{{title}}</div>
<a
ng-repeat="w in wallets track by $index"
class="item item-icon-left item-big-icon-left item-icon-right wallet"