diff --git a/src/app/backend.service.ts b/src/app/backend.service.ts
index 44eb161..da6d496 100644
--- a/src/app/backend.service.ts
+++ b/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.paymentMethod === undefined) return 0;
+ if (this.invoice.cart === 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;
- if (exRate === undefined) return 0;
+ const exRate = this.invoice.paymentMethods.find(method => method.method === this.invoice.paymentMethod)?.exRate;
+ if (exRate === undefined) { return 0; }
return product.quantity * product.price / exRate;
}
diff --git a/src/app/cart/cart.component.css b/src/app/cart/cart.component.css
index d0d0a5b..39e4b99 100644
--- a/src/app/cart/cart.component.css
+++ b/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 {
diff --git a/src/app/cart/cart.component.html b/src/app/cart/cart.component.html
index 6d8f3cb..551ec38 100644
--- a/src/app/cart/cart.component.html
+++ b/src/app/cart/cart.component.html
@@ -1,6 +1,6 @@
-
+
- -
+
-
{{ item.name }} x{{ item.quantity }}
{{ (item.price * item.quantity).toFixed(2) }} {{ this.backend.currencyPrefix() }}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 0cb15d2..df96bde 100644
--- a/src/app/header/header.component.ts
+++ b/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(() => {
@@ -31,7 +31,7 @@ export class HeaderComponent implements OnInit {
margin-left: 16px;
transform: scale(1.1);
`;
-
+
if (this.cancelProgress > 100) {
clearInterval(animation);
this.startCancelling = false;
diff --git a/src/app/payment/payment.component.css b/src/app/payment/payment.component.css
index e75e4df..72779d7 100644
--- a/src/app/payment/payment.component.css
+++ b/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-rows: 1fr 4rem 4rem 4rem 1fr;
+ grid-template-columns: 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;
}
diff --git a/src/app/payment/payment.component.html b/src/app/payment/payment.component.html
index caaf04c..d23141c 100644
--- a/src/app/payment/payment.component.html
+++ b/src/app/payment/payment.component.html
@@ -39,7 +39,7 @@
Send to
- {{ this.backend.invoice?.receiveAddress }}
+ {{ getReceiveAddress() }}
Amount
{{ this.backend.getAmount() }} {{ this.backend.invoice.paymentMethod }} | {{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ this.backend.currencyPrefix() }}
diff --git a/src/app/payment/payment.component.ts b/src/app/payment/payment.component.ts
index dec0c21..0f313b0 100644
--- a/src/app/payment/payment.component.ts
+++ b/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 {
const res = await this.backend.setInvoice(this.paymentSelector);
this.status = this.backend.getStatus();
diff --git a/src/assets/Monero.svg b/src/assets/Monero.svg
index 179cda8..2b638e9 100644
--- a/src/assets/Monero.svg
+++ b/src/assets/Monero.svg
@@ -1,18 +1,95 @@
-
-
-