Some new animations in cart

Long addresses will be capped (copy will come in next commit)

src/app/backend.service.ts

@@ -269,9 +269,13 @@ export class BackendService {
    * @returns The price to pay by cryptocurrency;
    */
   getAmount(): string | undefined {
-    return this.invoice?.paymentMethods.find(item => {
+    const amount = this.invoice?.paymentMethods.find(item => {
       return item.method === this.invoice.paymentMethod;
-    })?.amount.toFixed(8);
+    })?.amount.toString();
+
+    if (amount === undefined) { return '0.00'; }
+
+    return amount;
   }
 
   /**
@@ -279,12 +283,12 @@ export class BackendService {
    * @param prodcut Index of product in cart
    */
   calculateCryptoPrice(productNr: number): number {
-    if (this.invoice.cart === undefined) return 0;
+    if (this.invoice.cart === undefined) { return 0; }
-    if (this.invoice.paymentMethod === undefined) return 0;    
+    if (this.invoice.paymentMethod === undefined) { return 0; }
 
     const product = this.invoice.cart[productNr];
-    const exRate = this.invoice.paymentMethods.find(method => { return method.method === this.invoice.paymentMethod })?.exRate;
+    const exRate = this.invoice.paymentMethods.find(method => method.method === this.invoice.paymentMethod)?.exRate;
-    if (exRate === undefined) return 0;
+    if (exRate === undefined) { return 0; }
 
     return product.quantity * product.price / exRate;
   }

src/app/cart/cart.component.css

@@ -17,24 +17,39 @@
     height: 359px;
 }
 
-.cart ul li {
+.item {
     display: grid;
     padding: 1rem;
     grid-template-columns: 64px 1fr auto;
     grid-column-gap: 1rem;
     border-radius: 12px;
+    transition: .2s !important;
 }
 
-.cart ul li:nth-child(even) {
+.item:hover {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+.item:hover img {
+    transform: rotate(5deg);
+}
+
+.item:nth-child(even) {
     background-color: #292929;
 }
 
+.item:nth-child(even):hover img {
+    transform: rotate(-5deg);
+}
+
 .image {
     height: 64px;
     width: 64px;
     padding: 0;
     margin: 0;
     border-radius: 8px;
+    transition: .25s ease-out;
 }
 
 .name {

src/app/cart/cart.component.html

@@ -1,6 +1,6 @@
-<div class="cart" xyz="stagger-0.5 fade-100% down-1 ease-ease" >
+<div class="cart" xyz="stagger-0.5 fade-100% down-1 ease-ease">
     <ul>
-        <li *ngFor="let item of this.backend.invoice.cart;let indexOfelement=index;" [ngClass]="{'xyz-in': this.state.showCart.value, 'xyz-out': !this.state.showCart.value}">
+        <li *ngFor="let item of this.backend.invoice.cart;let indexOfelement=index;" class="item" [ngClass]="{'xyz-in': this.state.showCart.value, 'xyz-out': !this.state.showCart.value}">
             <img [src]="item.image" class="image">
             <h5 class="name">{{ item.name }}<span class="quantity" *ngIf="item.quantity !== 1"> x{{ item.quantity }}</span></h5>
             <span class="price"><b>{{ (item.price * item.quantity).toFixed(2) }} {{ this.backend.currencyPrefix() }}</b><br>

src/app/header/header.component.ts

@@ -21,7 +21,7 @@ export class HeaderComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  cancel() {
+  cancel(): void {
     if (!this.startCancelling) {
       this.startCancelling = true;
       const animation = setInterval(() => {

src/app/payment/payment.component.css

@@ -6,6 +6,7 @@
     background-color: #1c1c1c;
     border-radius: 8px;
     transform: translateY(-8px);
+    overflow: hidden;
 }
 
 /* Apply effect when invoice expired */
@@ -91,15 +92,20 @@
 /* Data */
 .main .data {
     display: grid;
-    grid-template-columns: 1fr 50px;
+    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 4rem 4rem 4rem 1fr;
+    grid-template-rows: 1fr auto auto auto 1fr;
+    row-gap: 10px;
+    width: 500px;
 }
-.main #target {
+
+#target {
     grid-row: 2;
 }
+
 #amount {
     grid-row: 3;
 }
+
 #status {
     grid-row: 4;
 }

src/app/payment/payment.component.html

@@ -39,7 +39,7 @@
     <div class="data">
         <!-- Payment data -->
         <span id="target" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">Send to
-            <h3>{{ this.backend.invoice?.receiveAddress }}</h3>
+            <h3>{{ getReceiveAddress() }}</h3>
         </span>
         <span id="amount" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">Amount
             <h3>{{ this.backend.getAmount() }} {{ this.backend.invoice.paymentMethod }} <span class="price"> | {{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ this.backend.currencyPrefix() }}</span></h3>

src/app/payment/payment.component.ts

@@ -85,6 +85,19 @@ export class PaymentComponent implements OnInit {
     this.backend.setPaymentMethod(coin);
   }
 
+  getReceiveAddress(): string {
+    const address = this.backend.invoice.receiveAddress;
+    if (address === undefined) {
+      return '';
+    }
+
+    if (address.length > 35) {
+      return address.slice(0, -(address.length - 35)) + '...';
+    }
+
+    return address;
+  }
+
   async get(): Promise<void> {
     const res = await this.backend.setInvoice(this.paymentSelector);
     this.status = this.backend.getStatus();

src/assets/Monero.svg

@@ -1,18 +1,95 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg
-<svg version="1.1" id="monero" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
-	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+   xmlns:cc="http://creativecommons.org/ns#"
-<style type="text/css">
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="260"
+   height="260"
+   viewBox="0 0 68.791665 68.791669"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)"
+   sodipodi:docname="Monero.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="75.330028"
+     inkscape:cy="121.91215"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1024"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#ffffff;stroke-width:1"
+       id="path855"
+       sodipodi:type="arc"
+       sodipodi:cx="34.428963"
+       sodipodi:cy="34.35778"
+       sodipodi:rx="34.188118"
+       sodipodi:ry="34.21748"
+       sodipodi:start="0"
+       sodipodi:end="6.2720152"
+       sodipodi:open="true"
+       sodipodi:arc-type="arc"
+       d="M 68.617081,34.35778 A 34.188118,34.21748 0 0 1 34.524434,68.575127 34.188118,34.21748 0 0 1 0.24137794,34.548886 34.188118,34.21748 0 0 1 34.142552,0.1415015 34.188118,34.21748 0 0 1 68.614948,33.975575" />
+    <g
+       id="g839"
+       transform="matrix(0.26458333,0,0,0.26458333,7.9242938,7.9375003)">
+	<path
+   class="st0"
+   d="m 197.5,100 c 0,53.8 -43.7,97.5 -97.5,97.5 C 46.2,197.5 2.5,153.8 2.5,100 2.5,46.1 46.1,2.5 100,2.5 c 53.8,0 97.5,43.6 97.5,97.5 z"
+   id="path835" />
+
+	<path
+   id="_149931032_1_"
+   class="st1"
+   d="M 100,2.5 C 46.2,2.5 2.4,46.2 2.5,100 c 0,10.8 1.7,21.1 4.9,30.8 h 29.2 v -82 l 63.4,63.4 63.4,-63.4 v 82 h 29.2 c 3.2,-9.7 4.9,-20 5,-30.8 C 197.6,46.2 153.8,2.5 100,2.5 Z" />
+
+	<path
+   id="_149931160_1_"
+   class="st2"
+   d="M 85.4,126.7 57.8,99 v 51.6 H 47.2 36.6 16.6 c 17.1,28.1 48,46.9 83.3,46.9 35.3,0 66.2,-18.8 83.3,-46.9 h -20 -18.9 -2.2 V 99 l -27.7,27.7 -14.4,14.6 z" />
+
+</g>
+  </g>
+  <style
+     type="text/css"
+     id="style833">
 	.st0{fill:none;}
 	.st1{fill:#F16822;}
 	.st2{fill:#4D4D4D;}
 </style>
-<g>
-	<path class="st0" d="M197.5,100c0,53.8-43.7,97.5-97.5,97.5c-53.8,0-97.5-43.7-97.5-97.5C2.5,46.1,46.1,2.5,100,2.5
-		C153.8,2.5,197.5,46.1,197.5,100z"/>
-	<path id="_149931032_1_" class="st1" d="M100,2.5C46.2,2.5,2.4,46.2,2.5,100c0,10.8,1.7,21.1,4.9,30.8h29.2v-82l63.4,63.4
-		l63.4-63.4v82h29.2c3.2-9.7,4.9-20,5-30.8C197.6,46.2,153.8,2.5,100,2.5L100,2.5z"/>
-	<path id="_149931160_1_" class="st2" d="M85.4,126.7L57.8,99v51.6H47.2H36.6l-20,0c17.1,28.1,48,46.9,83.3,46.9
-		c35.3,0,66.2-18.8,83.3-46.9l-20,0h-18.9h-2.2V99l-27.7,27.7L100,141.3L85.4,126.7L85.4,126.7z"/>
-</g>
 </svg>