Add payment method icons to storefront navbar and cart.

Show BTC/XMR icons beside exchange rates and pay buttons.

backend/src/consts/paymentMethodIconUrl.ts

@@ -0,0 +1,6 @@
+import { PaymentMethod } from '../modules/payment/types/PaymentMethod';
+
+export const paymentMethodIconUrl: Record<PaymentMethod, string> = {
+    [PaymentMethod.Xmr]: '/shop/assets/img/xmr.png',
+    [PaymentMethod.Btc]: '/shop/assets/img/btc.png'
+};

backend/src/modules/storefrontCart/controllers/StorefrontCartController.ts

@@ -4,6 +4,7 @@ import { Throttle } from '@nestjs/throttler';
 import type { Request, Response } from 'express';
 import { throttleProfiles } from '../../../config/throttleProfiles';
 import type { Config } from '../../../types/Config';
+import { paymentMethodIconUrl } from '../../../consts/paymentMethodIconUrl';
 import { paymentMethodLabel } from '../../../consts/paymentMethodLabel';
 import { StorefrontExceptionFilter } from '../../storefrontCore/filters/StorefrontExceptionFilter';
 import { StorefrontCartCookieService } from '../../storefrontCore/services/StorefrontCartCookieService';
@@ -70,7 +71,8 @@ export class StorefrontCartController {
 
         const paymentMethods = enabledPaymentMethods.map(paymentMethod => ({
             paymentMethod,
-            paymentMethodLabel: paymentMethodLabel[paymentMethod]
+            paymentMethodLabel: paymentMethodLabel[paymentMethod],
+            iconUrl: paymentMethodIconUrl[paymentMethod]
         }));
 
         return res.render('cart-summary', {

backend/src/modules/storefrontCheckout/services/StorefrontCheckoutViewService.spec.ts

@@ -56,7 +56,7 @@ describe('StorefrontCheckoutViewService', () => {
     let toStorefrontInvoiceViewSpy: jest.SpiedFunction<typeof toStorefrontInvoiceViewModule.toStorefrontInvoiceView>;
 
     const checkoutInvoiceView = {
-        cryptoCurrency: 'XMR',
+        paymentLabel: 'XMR',
         amountFiat: 9
     } as unknown as StorefrontInvoiceView;
 

backend/src/modules/storefrontCore/public/css/storefront.css

@@ -355,9 +355,31 @@ a:hover {
     gap: var(--sf-space-1);
 }
 
+.sf-rates {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-3);
+    align-items: center;
+}
+
 .sf-rate {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sf-space-1);
     font-size: 0.95rem;
     color: var(--sf-text-muted);
+    white-space: nowrap;
+}
+
+.sf-crypto-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    object-fit: contain;
+    flex-shrink: 0;
+}
+
+.sf-btn--pay {
+    gap: var(--sf-space-2);
 }
 
 .sf-category-nav {

backend/src/modules/storefrontCore/services/StorefrontShopViewService.spec.ts

@@ -145,8 +145,8 @@ describe('StorefrontShopViewService', () => {
             feedback: { type: 'success', text: 'Added to cart' },
             shopFiatCurrency: 'USD',
             cryptoRates: [
-                { cryptoCurrency: 'XMR', fiatPerCrypto: 200 },
+                { paymentLabel: 'XMR', fiatPerCrypto: 200, iconUrl: '/shop/assets/img/xmr.png' },
-                { cryptoCurrency: 'BTC', fiatPerCrypto: 80_000 }
+                { paymentLabel: 'BTC', fiatPerCrypto: 80_000, iconUrl: '/shop/assets/img/btc.png' }
             ],
             logoUrl: '/uploads/logo.png',
             faviconUrl: '/uploads/favicon.ico',

backend/src/modules/storefrontCore/services/StorefrontShopViewService.ts

@@ -8,6 +8,7 @@ import { formatShortOrderId } from '../../../utils/order/formatShortOrderId';
 import { toAbsoluteUrl } from '../../../utils/toAbsoluteUrl';
 import { ShopSettingsService } from '../../shopSettings/services/ShopSettingsService';
 import { ExchangeRateService } from '../../exchangeRate/services/ExchangeRateService';
+import { paymentMethodIconUrl } from '../../../consts/paymentMethodIconUrl';
 import { paymentMethodLabel } from '../../../consts/paymentMethodLabel';
 import { PaymentMethod } from '../../payment/types/PaymentMethod';
 import type { AuthorizedOrderNavItem } from '../types/AuthorizedOrderNavItem';
@@ -145,8 +146,9 @@ export class StorefrontShopViewService {
 
             return [
                 {
-                    cryptoCurrency: paymentMethodLabel[paymentMethod],
+                    paymentLabel: paymentMethodLabel[paymentMethod],
-                    fiatPerCrypto
+                    fiatPerCrypto,
+                    iconUrl: paymentMethodIconUrl[paymentMethod]
                 }
             ];
         });

backend/src/modules/storefrontCore/types/StorefrontCryptoRate.ts

@@ -1,4 +1,5 @@
 export type StorefrontCryptoRate = {
-    cryptoCurrency: string;
+    paymentLabel: string;
     fiatPerCrypto: number;
+    iconUrl: string;
 };

backend/src/modules/storefrontCore/types/StorefrontInvoiceView.ts

@@ -3,7 +3,7 @@ import type { InvoiceStatusLabel } from '../../../utils/invoice/types/InvoiceSta
 import type { InvoiceStatusVariant } from '../../../utils/invoice/types/InvoiceStatusVariant';
 
 export type StorefrontInvoiceView = {
-    cryptoCurrency: string;
+    paymentLabel: string;
     expectedTotalCrypto: string;
     receivedTotalCrypto: string | null;
     paymentAddress: string;

backend/src/modules/storefrontCore/views/checkout.hbs

@@ -23,14 +23,14 @@
                 <p class='sf-payment-status sf-payment-status--confirmed'>Payment received</p>
                 <p class='sf-payment-detail'>
                     Received:
-                    <strong>{{checkout.checkoutInvoice.receivedTotalCrypto}} {{checkout.checkoutInvoice.cryptoCurrency}}</strong>
+                    <strong>{{checkout.checkoutInvoice.receivedTotalCrypto}} {{checkout.checkoutInvoice.paymentLabel}}</strong>
                 </p>
                 <p class='sf-payment-detail'>
                     Your order is being prepared. This page will redirect automatically once it is ready.
                 </p>
                 {{> refresh-link href=checkout.refreshHref showAutoRefreshNote=true}}
             {{else}}
-                <h2 class='sf-section-title'>Pay with {{checkout.checkoutInvoice.cryptoCurrency}}</h2>
+                <h2 class='sf-section-title'>Pay with {{checkout.checkoutInvoice.paymentLabel}}</h2>
                 {{#with checkout.checkoutInvoice}}
                     {{> invoice-payment refreshHref=../checkout.refreshHref showAutoRefreshNote=true}}
                 {{/with}}

backend/src/modules/storefrontCore/views/partials/cart-totals-panel.hbs

@@ -80,9 +80,16 @@
                             type='submit'
                             name='paymentMethod'
                             value='{{paymentMethod}}'
-                            class='sf-btn sf-btn--primary'
+                            class='sf-btn sf-btn--primary sf-btn--pay'
                         >
                             Pay with {{paymentMethodLabel}}
+                            {{> storefront-image
+                                class='sf-crypto-icon'
+                                src=iconUrl
+                                alt=''
+                                width='20'
+                                height='20'
+                            }}
                         </button>
                     {{/each}}
                 </div>

backend/src/modules/storefrontCore/views/partials/invoice-payment.hbs

@@ -3,27 +3,27 @@
 {{/if}}
 
 {{#if showProminentAmount}}
-    <p class='sf-payment-amount'>{{expectedTotalCrypto}} {{cryptoCurrency}}</p>
+    <p class='sf-payment-amount'>{{expectedTotalCrypto}} {{paymentLabel}}</p>
 {{/if}}
 
 {{#if showReceivedTotal}}
     <p class='sf-payment-detail'>
         Received:
-        <strong>{{receivedTotalCrypto}} {{cryptoCurrency}}</strong>
+        <strong>{{receivedTotalCrypto}} {{paymentLabel}}</strong>
     </p>
 {{/if}}
 
 {{#if showExpectedTotal}}
     <p class='sf-payment-detail'>
         Expected total:
-        <strong>{{expectedTotalCrypto}} {{cryptoCurrency}}</strong>
+        <strong>{{expectedTotalCrypto}} {{paymentLabel}}</strong>
     </p>
 {{/if}}
 
 {{#if showInstruction}}
     <p class='sf-payment-detail'>
         {{instructionPrefix}}
-        <strong>{{instructionAmountCrypto}} {{cryptoCurrency}}</strong>
+        <strong>{{instructionAmountCrypto}} {{paymentLabel}}</strong>
         {{instructionSuffix}}
         {{#if showExpiry}}
             Payment expires in
@@ -34,7 +34,7 @@
 
 {{#if showQr}}
     <div class='sf-qr-wrap'>
-        <img src='{{qrCodeUrl}}' width='220' height='220' alt='{{cryptoCurrency}} payment QR code' />
+        <img src='{{qrCodeUrl}}' width='220' height='220' alt='{{paymentLabel}} payment QR code' />
     </div>
 {{/if}}
 
@@ -48,7 +48,7 @@
     <ul class='sf-list-reset sf-tx-list'>
         {{#each payments}}
             <li class='sf-tx-item'>
-                <div><strong>{{amountCrypto}} {{../cryptoCurrency}}</strong></div>
+                <div><strong>{{amountCrypto}} {{../paymentLabel}}</strong></div>
                 <div class='sf-mono sf-text-subtle'>{{txHash}}</div>
                 <div class='sf-tx-status sf-tx-status--{{confirmationStatusVariant}}'>{{confirmationStatus}}</div>
             </li>

backend/src/modules/storefrontCore/views/partials/shop-nav.hbs

@@ -32,7 +32,16 @@
         {{#if cryptoRates.length}}
             <div class='sf-rates'>
                 {{#each cryptoRates}}
-                    <div class='sf-rate'>1 {{cryptoCurrency}} = {{fiatPerCrypto}} {{../shopFiatCurrency}}</div>
+                    <span class='sf-rate'>
+                        {{> storefront-image
+                            class='sf-crypto-icon'
+                            src=iconUrl
+                            alt=paymentLabel
+                            width='20'
+                            height='20'
+                        }}
+                        <span>{{fiatPerCrypto}} {{../shopFiatCurrency}}</span>
+                    </span>
                 {{/each}}
             </div>
         {{/if}}

backend/src/modules/storefrontOrder/services/StorefrontOrderViewService.spec.ts

@@ -198,7 +198,7 @@ describe('StorefrontOrderViewService', () => {
         expect(view.totals.shippingCostFiat).toBe(5);
         expect(view.totals.grandTotalFiat).toBe(15);
         expect(view.shippingInvoice).toMatchObject({
-            cryptoCurrency: 'XMR',
+            paymentLabel: 'XMR',
             paymentAddress: '4shipping'
         });
     });

backend/src/utils/invoice/toStorefrontInvoiceView.spec.ts

@@ -109,7 +109,7 @@ describe('toStorefrontInvoiceView', () => {
             const view = await toStorefrontInvoiceView(invoice);
 
             expect(view).toMatchObject({
-                cryptoCurrency: 'XMR',
+                paymentLabel: 'XMR',
                 expectedTotalCrypto: '1.00000000',
                 receivedTotalCrypto: null,
                 paymentAddress,
@@ -154,7 +154,7 @@ describe('toStorefrontInvoiceView', () => {
             const view = await toStorefrontInvoiceView(invoice);
 
             expect(view).toMatchObject({
-                cryptoCurrency: 'BTC',
+                paymentLabel: 'BTC',
                 expectedTotalCrypto: '1.00000000',
                 paymentAddress: 'bc1qstorefronttest'
             });

backend/src/utils/invoice/toStorefrontInvoiceView.ts

@@ -114,7 +114,7 @@ const buildStorefrontInvoiceView = async ({
     const statusVariant = resolveInvoiceStatusVariant(invoiceState);
 
     return {
-        cryptoCurrency: paymentLabel,
+        paymentLabel,
         expectedTotalCrypto,
         receivedTotalCrypto,
         paymentAddress: invoice.paymentAddress,