A few more animations

Fix currency prefix issue

src/app/backend.service.ts

@@ -128,7 +128,9 @@ export class BackendService {
     return new Promise(async (resolve, reject) => {
       if (selector === undefined || selector === 'undefined' || selector === '') {
         reject();
+        return;
       }
+
       this.http.get(this.SERVER_URL + '/invoice/' + selector, {
         observe: 'body',
         responseType: 'json'
@@ -142,6 +144,24 @@ export class BackendService {
     });
   }
 
+  cancelInvoice(): Promise<void> {
+    return new Promise(async (resolve, reject) => {
+      if (this.invoice.selector === '') {
+        reject('Cannot delete invoice with empty selector.');
+        return;
+      }
+
+      this.http.delete(this.SERVER_URL + '/invoice/' + this.invoice.selector, {
+        observe: 'body',
+        responseType: 'json'
+      }).toPromise().then((invoice) => {
+        resolve();
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+
   setPaymentMethod(method: CryptoUnits): Promise<void> {
     return new Promise(async (resolve, reject) => {
       if (this.invoice === null) { reject('Invoice is not set!'); return; }

src/app/header/header.component.css

@@ -30,4 +30,5 @@
     float: right;
     cursor: pointer;
     grid-column: 2;
+    transition: .2s ease;
 }

src/app/header/header.component.html

@@ -1,4 +1,4 @@
 <div class="header">
     <img src="assets/logo.svg">
-    <a *ngIf="this.backend.isInvoicePending()">Cancel payment</a>
+    <a *ngIf="this.backend.isInvoicePending()" (click)="cancel()" [style]="cancelProgressStyle">{{ startCancelling ? 'Are you sure?' : 'Cancel payment'}}</a>
 </div>

src/app/header/header.component.ts

@@ -8,9 +8,36 @@ import { BackendService } from '../backend.service';
 })
 export class HeaderComponent implements OnInit {
 
+  startCancelling = false;
+  cancelProgress = 0;
+  cancelProgressStyle = "";  // This is the style of the cancel button
+
   constructor(public backend: BackendService) { }
 
   ngOnInit(): void {
   }
 
+  cancel() {
+    if (!this.startCancelling) {
+      this.startCancelling = true;
+      const animation = setInterval(() => {
+        this.cancelProgress += 0.3;
+        this.cancelProgressStyle = `
+        background-image: linear-gradient(90deg, rgba(255,120,120,0.3) ${this.cancelProgress.toFixed(1)}%, rgba(255,255,255,0) ${this.cancelProgress.toFixed(1)}%);
+        transform: scale(1.1);
+        `;
+        
+        if (this.cancelProgress > 100) {
+          clearInterval(animation);
+          this.startCancelling = false;
+          this.cancelProgress = 0;
+          this.cancelProgressStyle = '';
+        }
+      }, 15);
+      return;
+    }
+
+    this.backend.cancelInvoice();
+  }
+
 }

src/app/pay/pay.component.css

@@ -19,6 +19,10 @@
     /* box-shadow: 1px 1px 112px 23px rgba(0,0,0,0.75); */
 }
 
+#header, #payment {
+    transition: .3s ease;
+}
+
 .smaller {
     min-width: 200px;
     width: 40vw !important;
@@ -34,6 +38,10 @@
     width: 100%;
 }
 
+
+/*
+    BACKGROUND ANIMATION
+*/
 .cube {
     position: absolute;
     top: 80vh;

src/app/pay/pay.component.html

@@ -7,6 +7,6 @@
     <div class="cube"></div>
 </div>
 <div class="content" [ngClass]="{smaller: this.backend.isInvoiceRequested()}">
-    <app-header></app-header>
+    <app-header id="header"></app-header>
-    <app-payment></app-payment>
+    <app-payment id="payment"></app-payment>
 </div>

src/app/payment/payment.component.css

@@ -74,6 +74,7 @@
 }
 .alert p {
     margin: 0;
+    line-height: 1.8;
 }
 
 @keyframes coinRoll {
@@ -152,7 +153,8 @@
     line-height: 0;
 }
 #list li:hover {
-    box-shadow: 0px 0px 61px 3px rgba(0,0,0,0.3) inset;
+    box-shadow: 0px 0px 61px 3px rgba(0,0,0,0.2) inset;
+    padding-left: 6%;
 }
 #list li img {
     height: 42px;

src/app/payment/payment.component.html

@@ -1,9 +1,12 @@
-<div class="payment request" *ngIf="this.backend.isInvoiceRequested()">
+<!--
+    Select payment method
+-->
+<div class="payment request" xyz="stagger-2 fade-100% down-1" *ngIf="this.backend.isInvoiceRequested()">
     <h3 id="title">Choose your<br>payment method</h3>
-    <p id="price">{{ this.backend.invoice.totalPrice!.toFixed(2) }} €</p>
+    <p id="price">{{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ currencyPrefix() }}</p>
 
     <ul id="list">
-        <li *ngFor="let coin of this.backend.invoice!!.paymentMethods" (click)="chooseMethod(coin.method)">
+        <li class="xyz-in" *ngFor="let coin of this.backend.invoice!!.paymentMethods" (click)="chooseMethod(coin.method)">
             <img [src]="this.backend.getIcon(coin.method)">
             <div>
                 <h4>{{ this.backend.findCryptoBySymbol(coin.method) }}</h4>
@@ -12,8 +15,14 @@
         </li>
     </ul>
 </div>
-<div class="payment main" *ngIf="!this.backend.isInvoiceRequested() && ready" [ngClass]="{invalid: status === 'Expired' || status === 'Paid too little'}">
+
-    <div class="qrWrapper">
+<!--
+    Main view
+-->
+<div class="payment main" xyz="stagger-2 fade-100% down-1 ease-ease" *ngIf="!this.backend.isInvoiceRequested() && ready"
+    [ngClass]="{invalid: status === 'Expired' || status === 'Paid too little' || status === 'Cancelled by user'}">
+
+    <div class="qrWrapper xyz-in">
         <div class="qr">
             <img src="assets/Bitcoin.svg">
             <qrcode
@@ -28,16 +37,16 @@
 
     <div class="data">
         <!-- Payment data -->
-        <span id="target">Send to
+        <span id="target" class="xyz-in">Send to
             <h3>{{ this.backend.invoice?.receiveAddress }}</h3>
         </span>
-        <span id="amount">Amount
+        <span id="amount" class="xyz-in">Amount
-            <h3>{{ this.backend.getAmount() }} BTC <span class="price"> | {{ this.backend.invoice.totalPrice!.toFixed(2) }} €</span></h3>
+            <h3>{{ this.backend.getAmount() }} BTC <span class="price"> | {{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ currencyPrefix() }}</span></h3>
         </span>
-        <span id="status">Status
+        <span id="status" class="xyz-in">Status
             <h3>
                 {{ status }}
-                <div class="loader">
+                <div class="loader" *ngIf="this.status === 'Unconfirmed'">
                     <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        width="32px" height="32px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                     <path fill="#f7a12f" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
@@ -57,6 +66,9 @@
     </div>
 </div>
 
+<!--
+    Alerts
+-->
 <div class="alert xyz-in" xyz="fade-100% duration-3 down-1" *ngIf="status === 'Expired'">
     <p><b>This invoice expired</b>
     <br>You cannot pay this invoice anymore. Please try to request a new invoice. </p>
@@ -69,3 +81,7 @@
     <p><b>Looks like you paid not the requested amount of money.</b>
     <br><u><b>You cannot pay twice!</b></u> Since sending back funds is complicated we would like you to contact support@example.org</p>
 </div>
+<div class="alert xyz-in" xyz="fade-100% duration-3 down-1" *ngIf="status === 'Cancelled by user'">
+    <p><b>Cancelled</b>
+    <br>This invoice has been cancelled by the user and cannot be paid anymore.</p>
+</div>

src/app/payment/payment.component.ts

@@ -1,3 +1,4 @@
+import { getCurrencySymbol } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
@@ -39,6 +40,10 @@ export class PaymentComponent implements OnInit {
     this.backend.setPaymentMethod(coin);
   }
 
+  currencyPrefix(): string {
+    return getCurrencySymbol(this.backend.invoice.currency, 'narrow');
+  }
+
   async get(): Promise<void> {
     await this.backend.setInvoice(this.paymentSelector);
     this.backend.getConfirmation().catch();