Auto-broadcast visual timer, reset

Author: chill117

src/css/views/send.css

@@ -201,8 +201,8 @@
 	background-image: url('../images/wink-dark.svg');
 }
 .view.send .button.secondary-control.reset {
-	background-image: none;
-	text-transform: lowercase;
+	background-color: #333;
+	background-image: url('../images/reset-dark.svg');
 }
 .view.send .form-row--amount .form-field.has-1-actions {
 	padding-right: 4.6rem;
@@ -277,3 +277,13 @@
 .view.send .form-row + .form-row {
 	margin-top: .8rem;
 }
+.view.send .auto-double-spend-timer {
+	position: absolute;
+	right: .9rem;
+	top: 0;
+	height: 3.2rem;
+	line-height: 3.2rem;
+	font-weight: 700;
+	font-size: 1.2rem;
+	color: rgba(255,255,255,.5);
+}

src/images/reset-dark.svg

@@ -97,8 +97,8 @@ <h2 class="page-title">{{i18n "receive.title"}}</h2>
 		</div>
 		<div class="secondary-controls">
 			<a class="secondary-control button payment disabled"></a>
-			<a class="secondary-control button double-spend disabled"></a>
-			<a class="secondary-control button reset disabled">{{i18n "send.reset"}}</a>
+			<a class="secondary-control button double-spend disabled"><b class="auto-double-spend-timer"></b></a>
+			<a class="secondary-control button reset disabled"></a>
 		</div>
 	</script>
 

src/index.html

@@ -58,7 +58,6 @@ app.lang['en'] = (function() {
 		'send.error-insufficient-fee-confirm-retry': 'TRANSACTION REJECTED:\nInsufficient fee. Do you want to retry with the suggested fee of {{fee}} {{symbol}}?',
 		'send.error-missing-inputs': 'TRANSACTION REJECTED:\nMissing inputs. It is possible that the payment transaction was already confirmed :(',
 		'send.reset-confirm': 'Are you sure you want to reset? (The last double-spend tx will be lost)',
-		'send.reset': 'Reset',
 
 		'services.electrum.failed-request.no-connected-servers': 'Unable to complete request - no connected Electrum servers',
 

src/js/lang/en.js

@@ -146,7 +146,7 @@ app.views.Send = (function() {
 					return app.i18n.t('send.auto-broadcast-double-spend.delay');
 				},
 				type: 'number',
-				default: 3,
+				default: 5,
 				min: 0,
 				step: 1,
 				visible: true,
@@ -247,6 +247,7 @@ app.views.Send = (function() {
 				symbol: this.$('.balance-symbol'),
 			};
 			this.$scoreboard = this.$('.scoreboard');
+			this.$autoDoubleSpendTimer = this.$('.auto-double-spend-timer');
 			this.pullFromCache();
 			this.toggleFlags();
 			this.updateAddress();
@@ -659,15 +660,42 @@ app.views.Send = (function() {
 			var advOptions = this.getAdvancedOptions();
 			var autoBroadcastDoubleSpend = advOptions.autoBroadcastDoubleSpend;
 			if (autoBroadcastDoubleSpend) {
-				var delay = parseInt(advOptions.autoBroadcastDoubleSpendDelay) * 1000;
-				var doubleSpend = _.bind(this.doubleSpend, this, {
-					skipConfirmation: true,
-				});
-				this.autoDoubleSpendTimer = _.delay(doubleSpend, delay);
+				this.startAutoDoubleSpendTimer();
 			}
 		},
-		doubleSpend: function(options) {
+		startAutoDoubleSpendTimer: function() {
+			this.clearedDoubleSpendTimer = false;
+			var delay = this.getAutoDoubleSpendDelay();
+			var endTime = Date.now() + delay;
+			this.autoDoubleSpendTimer = _.delay(_.bind(this.doubleSpend, this, {
+				skipConfirmation: true,
+			}), delay);
+			var updateAutoDoubleSpendTimer = _.bind(function() {
+				if (!this.clearedDoubleSpendTimer) {
+					var timeRemaining = Date.now() - endTime;
+					if (timeRemaining < 500) {
+						this.$autoDoubleSpendTimer.text(Math.abs(Math.round(timeRemaining / 1000)));
+						return _.delay(updateAutoDoubleSpendTimer, 50);
+					}
+				}
+				// Timer done or cleared.
+				this.$autoDoubleSpendTimer.text('');
+				return null;
+			}, this);
+			this.autoDoubleSpendUpdateTimer = updateAutoDoubleSpendTimer();
+		},
+		getAutoDoubleSpendDelay: function() {
+			var advOptions = this.getAdvancedOptions();
+			return parseInt(advOptions.autoBroadcastDoubleSpendDelay) * 1000;
+		},
+		clearAutoDoubleSpendTimer: function() {
+			this.clearedDoubleSpendTimer = true;
+			this.$autoDoubleSpendTimer.text('');
 			clearTimeout(this.autoDoubleSpendTimer);
+			clearTimeout(this.autoDoubleSpendUpdateTimer);
+		},
+		doubleSpend: function(options) {
+			this.clearAutoDoubleSpendTimer();
 			options = _.defaults(options || {}, {
 				skipConfirmation: false,
 			});
@@ -760,6 +788,7 @@ app.views.Send = (function() {
 		},
 		reset: function() {
 			if (confirm(app.i18n.t('send.reset-confirm'))) {
+				this.clearAutoDoubleSpendTimer();
 				this.resetForm();
 			}
 		},