All: Fiat symbol fix

frontend/runtime.429efd851f692b64.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e,v={},m={};function r(e){var f=m[e];if(void 0!==f)return f.exports;var t=m[e]={id:e,loaded:!1,exports:{}};return v[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=v,e=[],r.O=(f,t,i,o)=>{if(!t){var a=1/0;for(n=0;n<e.length;n++){for(var[t,i,o]=e[n],s=!0,l=0;l<t.length;l++)(!1&o||a>=o)&&Object.keys(r.O).every(b=>r.O[b](t[l]))?t.splice(l--,1):(s=!1,o<a&&(a=o));if(s){e.splice(n--,1);var d=i();void 0!==d&&(f=d)}}return f}o=o||0;for(var n=e.length;n>0&&e[n-1][2]>o;n--)e[n]=e[n-1];e[n]=[t,i,o]},r.d=(e,f)=>{for(var t in f)r.o(f,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:f[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((f,t)=>(r.f[t](e,f),f),[])),r.u=e=>e+"."+{125:"a81c5bf77c905c66",456:"8753b287609a50fa",570:"62ffe646dc232e13",758:"db0aa17832e6073d"}[e]+".js",r.miniCssF=e=>{},r.o=(e,f)=>Object.prototype.hasOwnProperty.call(e,f),(()=>{var e={},f="RTLApp:";r.l=(t,i,o,n)=>{if(e[t])e[t].push(i);else{var a,s;if(void 0!==o)for(var l=document.getElementsByTagName("script"),d=0;d<l.length;d++){var u=l[d];if(u.getAttribute("src")==t||u.getAttribute("data-webpack")==f+o){a=u;break}}a||(s=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",f+o),a.src=r.tu(t)),e[t]=[i];var c=(g,b)=>{a.onerror=a.onload=null,clearTimeout(p);var h=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),h&&h.forEach(y=>y(b)),g)return g(b)},p=setTimeout(c.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=c.bind(null,a.onerror),a.onload=c.bind(null,a.onload),s&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:f=>f},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={666:0};r.f.j=(i,o)=>{var n=r.o(e,i)?e[i]:void 0;if(0!==n)if(n)o.push(n[2]);else if(666!=i){var a=new Promise((u,c)=>n=e[i]=[u,c]);o.push(n[2]=a);var s=r.p+r.u(i),l=new Error;r.l(s,u=>{if(r.o(e,i)&&(0!==(n=e[i])&&(e[i]=void 0),n)){var c=u&&("load"===u.type?"missing":u.type),p=u&&u.target&&u.target.src;l.message="Loading chunk "+i+" failed.\n("+c+": "+p+")",l.name="ChunkLoadError",l.type=c,l.request=p,n[1](l)}},"chunk-"+i,i)}else e[i]=0},r.O.j=i=>0===e[i];var f=(i,o)=>{var l,d,[n,a,s]=o,u=0;if(n.some(p=>0!==e[p])){for(l in a)r.o(a,l)&&(r.m[l]=a[l]);if(s)var c=s(r)}for(i&&i(o);u<n.length;u++)r.o(e,d=n[u])&&e[d]&&e[d][0](),e[d]=0;return r.O(c)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(f.bind(null,0)),t.push=f.bind(null,t.push.bind(t))})()})();

frontend/runtime.d04d08715a7ebe25.js

@@ -1 +0,0 @@
-(()=>{"use strict";var e,v={},m={};function r(e){var o=m[e];if(void 0!==o)return o.exports;var t=m[e]={id:e,loaded:!1,exports:{}};return v[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=v,e=[],r.O=(o,t,i,f)=>{if(!t){var a=1/0;for(n=0;n<e.length;n++){for(var[t,i,f]=e[n],c=!0,l=0;l<t.length;l++)(!1&f||a>=f)&&Object.keys(r.O).every(b=>r.O[b](t[l]))?t.splice(l--,1):(c=!1,f<a&&(a=f));if(c){e.splice(n--,1);var d=i();void 0!==d&&(o=d)}}return o}f=f||0;for(var n=e.length;n>0&&e[n-1][2]>f;n--)e[n]=e[n-1];e[n]=[t,i,f]},r.d=(e,o)=>{for(var t in o)r.o(o,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((o,t)=>(r.f[t](e,o),o),[])),r.u=e=>e+"."+{125:"e4a54e50f74a176f",456:"63bc51caab0d66e7",570:"a3145b37b782ee55",758:"db0aa17832e6073d"}[e]+".js",r.miniCssF=e=>{},r.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),(()=>{var e={},o="RTLApp:";r.l=(t,i,f,n)=>{if(e[t])e[t].push(i);else{var a,c;if(void 0!==f)for(var l=document.getElementsByTagName("script"),d=0;d<l.length;d++){var u=l[d];if(u.getAttribute("src")==t||u.getAttribute("data-webpack")==o+f){a=u;break}}a||(c=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",o+f),a.src=r.tu(t)),e[t]=[i];var s=(g,b)=>{a.onerror=a.onload=null,clearTimeout(p);var h=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),h&&h.forEach(y=>y(b)),g)return g(b)},p=setTimeout(s.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=s.bind(null,a.onerror),a.onload=s.bind(null,a.onload),c&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:o=>o},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={666:0};r.f.j=(i,f)=>{var n=r.o(e,i)?e[i]:void 0;if(0!==n)if(n)f.push(n[2]);else if(666!=i){var a=new Promise((u,s)=>n=e[i]=[u,s]);f.push(n[2]=a);var c=r.p+r.u(i),l=new Error;r.l(c,u=>{if(r.o(e,i)&&(0!==(n=e[i])&&(e[i]=void 0),n)){var s=u&&("load"===u.type?"missing":u.type),p=u&&u.target&&u.target.src;l.message="Loading chunk "+i+" failed.\n("+s+": "+p+")",l.name="ChunkLoadError",l.type=s,l.request=p,n[1](l)}},"chunk-"+i,i)}else e[i]=0},r.O.j=i=>0===e[i];var o=(i,f)=>{var l,d,[n,a,c]=f,u=0;if(n.some(p=>0!==e[p])){for(l in a)r.o(a,l)&&(r.m[l]=a[l]);if(c)var s=c(r)}for(i&&i(f);u<n.length;u++)r.o(e,d=n[u])&&e[d]&&e[d][0](),e[d]=0;return r.O(s)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(o.bind(null,0)),t.push=o.bind(null,t.push.bind(t))})()})();

src/app/cln/transactions/invoices/invoices-table/lightning-invoices-table.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap">
+<div fxLayout="column" fxFlex="110" fxLayoutAlign="start stretch" class="padding-gap">
   <form *ngIf="calledFrom === 'home'" #addInvoiceForm="ngForm" fxLayout="row wrap" fxLayoutAlign="stretch start" fxFlex="100">
     <mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
       <mat-label>Description</mat-label>

src/app/cln/transactions/payments/lightning-payments.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap">
+<div fxLayout="column" fxFlex="110" fxLayoutAlign="space-between stretch" class="padding-gap">
   <form *ngIf="calledFrom === 'home'" #sendPaymentForm="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
     <mat-form-field fxLayout="column" fxFlex="100">
       <mat-label>Payment Request</mat-label>

src/app/eclair/transactions/create-invoice-modal/create-invoice.component.html

@@ -18,7 +18,14 @@
             <mat-label>Amount</mat-label>
             <input matInput type="number" tabindex="3" name="invValue" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
             <span matSuffix>  Sats </span>
-            <mat-hint>{{invoiceValueHint}}</mat-hint>
+            <mat-hint fxLayout="row wrap" fxFlex="100">
+              <span *ngIf="invoiceValueHint !== ''" class="mr-3px">= </span>
+              <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'FA'" fxLayoutAlign="center center" class="mr-3px">
+                <fa-icon *ngIf="convertedCurrency && invoiceValueHint !== ''" [icon]="convertedCurrency.symbol" />
+              </span>
+              <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'SVG'" fxLayoutAlign="center center" class="mr-3px" [innerHTML]="convertedCurrency.symbol"></span>
+              {{invoiceValueHint}}
+            </mat-hint>            
           </mat-form-field>
           <mat-form-field fxLayout="column" fxFlex="30">
             <mat-label>Expiry</mat-label>

src/app/eclair/transactions/create-invoice-modal/create-invoice.component.ts

@@ -16,6 +16,7 @@ import { CommonService } from '../../../shared/services/common.service';
 import { RTLState } from '../../../store/rtl.state';
 import { createInvoice } from '../../store/ecl.actions';
 import { eclNodeInformation, eclNodeSettings } from '../../store/ecl.selector';
+import { ConvertedCurrency } from '../../../shared/models/rtlModels';
 
 @Component({
   selector: 'rtl-ecl-create-invoices',
@@ -25,6 +26,7 @@ import { eclNodeInformation, eclNodeSettings } from '../../store/ecl.selector';
 export class ECLCreateInvoiceComponent implements OnInit, OnDestroy {
 
   public faExclamationTriangle = faExclamationTriangle;
+  public convertedCurrency: ConvertedCurrency = null;
   public selNode: Node | null;
   public description = '';
   public expiry: number | null;
@@ -103,7 +105,8 @@ export class ECLCreateInvoiceComponent implements OnInit, OnDestroy {
         pipe(takeUntil(this.unSubs[3])).
         subscribe({
           next: (data) => {
-            this.invoiceValueHint = '= ' + data.symbol + this.decimalPipe.transform(data.OTHER, CURRENCY_UNIT_FORMATS.OTHER) + ' ' + data.unit;
+            this.convertedCurrency = data;
+            this.invoiceValueHint = this.decimalPipe.transform(this.convertedCurrency.OTHER, CURRENCY_UNIT_FORMATS.OTHER) + ' ' + this.convertedCurrency.unit;
           }, error: (err) => {
             this.invoiceValueHint = 'Conversion Error: ' + err;
           }

src/app/eclair/transactions/invoices/lightning-invoices.component.html

@@ -9,7 +9,14 @@
       <mat-label>Amount</mat-label>
       <input #invcVal="ngModel" matInput type="number" tabindex="3" name="invValue" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
       <span matSuffix>  Sats </span>
-      <mat-hint>{{invoiceValueHint}}</mat-hint>
+      <mat-hint fxLayout="row wrap" fxFlex="100">
+        <span *ngIf="invoiceValueHint !== ''" class="mr-3px">= </span>
+        <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'FA'" fxLayoutAlign="center center" class="mr-3px">
+          <fa-icon *ngIf="convertedCurrency && invoiceValueHint !== ''" [icon]="convertedCurrency.symbol" />
+        </span>
+        <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'SVG'" fxLayoutAlign="center center" class="mr-3px" [innerHTML]="convertedCurrency.symbol"></span>
+        {{invoiceValueHint}}
+      </mat-hint>      
     </mat-form-field>
     <div  fxLayout="row" class="mt-1">
       <button class="mr-1" mat-stroked-button color="primary" tabindex="9" type="reset" (click)="resetData()">Clear Field</button>

src/app/eclair/transactions/invoices/lightning-invoices.component.ts

@@ -8,6 +8,7 @@ import { faHistory } from '@fortawesome/free-solid-svg-icons';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { MAT_SELECT_CONFIG } from '@angular/material/select';
 
 import { CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, APICallStatusEnum, ECLActions, SortOrderEnum, ECL_DEFAULT_PAGE_SETTINGS, ECL_PAGE_DEFS, DEFAULT_INVOICE_EXPIRY } from '../../../shared/services/consts-enums-functions';
 import { Node } from '../../../shared/models/RTLconfig';
@@ -25,7 +26,7 @@ import { createInvoice, invoiceLookup } from '../../store/ecl.actions';
 import { eclNodeInformation, eclNodeSettings, eclPageSettings, invoices } from '../../store/ecl.selector';
 import { ColumnDefinition, PageSettings, TableSetting } from '../../../shared/models/pageSettings';
 import { CamelCaseWithSpacesPipe } from '../../../shared/pipes/app.pipe';
-import { MAT_SELECT_CONFIG } from '@angular/material/select';
+import { ConvertedCurrency } from '../../../shared/models/rtlModels';
 
 @Component({
   selector: 'rtl-ecl-lightning-invoices',
@@ -42,6 +43,7 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
   faHistory = faHistory;
+  public convertedCurrency: ConvertedCurrency = null;
   public nodePageDefs = ECL_PAGE_DEFS;
   public selFilterBy = 'all';
   public colWidth = '20rem';
@@ -242,7 +244,8 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
         pipe(takeUntil(this.unSubs[5])).
         subscribe({
           next: (data) => {
-            this.invoiceValueHint = '= ' + data.symbol + this.decimalPipe.transform(data.OTHER, CURRENCY_UNIT_FORMATS.OTHER) + ' ' + data.unit;
+            this.convertedCurrency = data;
+            this.invoiceValueHint = this.decimalPipe.transform(this.convertedCurrency.OTHER, CURRENCY_UNIT_FORMATS.OTHER) + ' ' + this.convertedCurrency.unit;
           }, error: (err) => {
             this.invoiceValueHint = 'Conversion Error: ' + err;
           }

src/app/eclair/transactions/payments/lightning-payments.component.html

@@ -3,7 +3,14 @@
     <mat-form-field fxLayout="column" fxFlex="100">
       <mat-label>Payment Request</mat-label>
       <textarea #paymentReq="ngModel" matInput name="paymentRequest" tabindex="1" required [perfectScrollbar] [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea>
-      <mat-hint *ngIf="paymentRequest && paymentDecodedHint !== ''">{{paymentDecodedHint}}</mat-hint>
+      <mat-hint *ngIf="paymentRequest && paymentDecodedHintPre !== ''" fxLayout="row wrap" fxFlex="100">
+        {{paymentDecodedHintPre}}
+        <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'FA'" fxLayoutAlign="center center" class="mr-3px">
+          <fa-icon *ngIf="convertedCurrency && invoiceValueHint !== ''" [icon]="convertedCurrency.symbol" />
+        </span>
+        <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'SVG'" fxLayoutAlign="center center" class="mr-3px" [innerHTML]="convertedCurrency.symbol"></span>
+        {{paymentDecodedHintPost}}
+      </mat-hint>        
       <mat-error *ngIf="!paymentRequest">Payment request is required.</mat-error>
     </mat-form-field>
     <div fxLayout="row" class="mt-1">

src/app/eclair/transactions/payments/lightning-payments.component.ts

@@ -7,6 +7,7 @@ import { faHistory } from '@fortawesome/free-solid-svg-icons';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { MAT_SELECT_CONFIG } from '@angular/material/select';
 
 import { GetInfo, PayRequest, PaymentSent, PaymentSentPart, Payments } from '../../../shared/models/eclModels';
 import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, APICallStatusEnum, SortOrderEnum, ECL_DEFAULT_PAGE_SETTINGS, ECL_PAGE_DEFS } from '../../../shared/services/consts-enums-functions';
@@ -26,7 +27,7 @@ import { sendPayment } from '../../store/ecl.actions';
 import { eclNodeInformation, eclNodeSettings, eclPageSettings, payments } from '../../store/ecl.selector';
 import { ColumnDefinition, PageSettings, TableSetting } from '../../../shared/models/pageSettings';
 import { CamelCaseWithSpacesPipe } from '../../../shared/pipes/app.pipe';
-import { MAT_SELECT_CONFIG } from '@angular/material/select';
+import { ConvertedCurrency } from '../../../shared/models/rtlModels';
 
 @Component({
   selector: 'rtl-ecl-lightning-payments',
@@ -43,6 +44,7 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
   @ViewChild('sendPaymentForm', { static: false }) form;
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
+  public convertedCurrency: ConvertedCurrency = null;
   public nodePageDefs = ECL_PAGE_DEFS;
   public selFilterBy = 'all';
   public colWidth = '20rem';
@@ -58,7 +60,8 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
   public displayedColumns: any[] = [];
   public partColumns: string[] = [];
   public paymentRequest = '';
-  public paymentDecodedHint = '';
+  public paymentDecodedHintPre = '';
+  public paymentDecodedHintPost = '';
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -275,7 +278,8 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
 
   onPaymentRequestEntry(event: any) {
     this.paymentRequest = event;
-    this.paymentDecodedHint = '';
+    this.paymentDecodedHintPre = '';
+    this.paymentDecodedHintPost = '';
     if (this.paymentRequest && this.paymentRequest.length > 100) {
       this.dataService.decodePayment(this.paymentRequest, false).
         pipe(take(1)).subscribe((decodedPayment: PayRequest) => {
@@ -286,16 +290,21 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
                 pipe(takeUntil(this.unSubs[4])).
                 subscribe({
                   next: (data) => {
-                    this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats (' + data.symbol + this.decimalPipe.transform((data.OTHER ? data.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' + this.paymentDecoded.description;
+                    this.convertedCurrency = data;
+                    this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats (';
+                    this.paymentDecodedHintPost = this.decimalPipe.transform((this.convertedCurrency.OTHER ? this.convertedCurrency.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' + this.paymentDecoded.description;
                   }, error: (error) => {
-                    this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats | Memo: ' + this.paymentDecoded.description + '. Unable to convert currency.';
+                    this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats | Memo: ' + this.paymentDecoded.description + '. Unable to convert currency.';
+                    this.paymentDecodedHintPost = '';
                   }
                 });
             } else {
-              this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats | Memo: ' + this.paymentDecoded.description;
+              this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats | Memo: ' + this.paymentDecoded.description;
+              this.paymentDecodedHintPost = '';
             }
           } else {
-            this.paymentDecodedHint = 'Zero Amount Invoice | Memo: ' + this.paymentDecoded.description;
+            this.paymentDecodedHintPre = 'Zero Amount Invoice | Memo: ' + this.paymentDecoded.description;
+            this.paymentDecodedHintPost = '';
           }
         });
     }

src/app/eclair/transactions/send-payment-modal/send-payment.component.html

@@ -11,7 +11,14 @@
         <mat-form-field fxLayout="column" fxFlex="100">
           <mat-label>Payment Request</mat-label>
           <textarea #paymentReq="ngModel" autoFocus matInput name="paymentRequest" rows="4" tabindex="1" required [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea>
-          <mat-hint *ngIf="paymentRequest && paymentDecodedHint !== ''">{{paymentDecodedHint}}</mat-hint>
+          <mat-hint *ngIf="paymentRequest && paymentDecodedHintPre !== ''" fxLayout="row wrap" fxFlex="100">
+            {{paymentDecodedHintPre}}
+            <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'FA'" fxLayoutAlign="center center" class="mr-3px">
+              <fa-icon *ngIf="convertedCurrency && invoiceValueHint !== ''" [icon]="convertedCurrency.symbol" />
+            </span>
+            <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'SVG'" fxLayoutAlign="center center" class="mr-3px" [innerHTML]="convertedCurrency.symbol"></span>
+            {{paymentDecodedHintPost}}
+          </mat-hint>
           <mat-error *ngIf="!paymentRequest">Payment request is required.</mat-error>
           <mat-error *ngIf="paymentReq.errors?.decodeError">{{paymentDecodedHint}}</mat-error>
         </mat-form-field>

src/app/eclair/transactions/send-payment-modal/send-payment.component.ts

@@ -20,6 +20,7 @@ import { RTLState } from '../../../store/rtl.state';
 import { sendPayment } from '../../store/ecl.actions';
 import { allChannelsInfo, eclNodeSettings } from '../../store/ecl.selector';
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
+import { ConvertedCurrency } from '../../../shared/models/rtlModels';
 
 @Component({
   selector: 'rtl-ecl-lightning-send-payments',
@@ -30,12 +31,14 @@ export class ECLLightningSendPaymentsComponent implements OnInit, OnDestroy {
 
   @ViewChild('paymentReq', { static: false }) paymentReq: NgModel;
   public faExclamationTriangle = faExclamationTriangle;
+  public convertedCurrency: ConvertedCurrency = null;
   public selNode: Node | null;
   public paymentDecoded: PayRequest = {};
   public zeroAmtInvoice = false;
   public paymentAmount = null;
   public paymentRequest = '';
-  public paymentDecodedHint = '';
+  public paymentDecodedHintPre = '';
+  public paymentDecodedHintPost = '';
   public selActiveChannel: Channel | null = {};
   public activeChannels = {};
   public feeLimit = null;
@@ -79,7 +82,8 @@ export class ECLLightningSendPaymentsComponent implements OnInit, OnDestroy {
     } else {
       this.paymentAmount = null;
       this.paymentError = '';
-      this.paymentDecodedHint = '';
+      this.paymentDecodedHintPre = '';
+      this.paymentDecodedHintPost = '';
       this.paymentReq.control.setErrors(null);
       this.dataService.decodePayment(this.paymentRequest, true).
         pipe(take(1)).subscribe({
@@ -88,7 +92,8 @@ export class ECLLightningSendPaymentsComponent implements OnInit, OnDestroy {
             if (this.paymentDecoded.timestamp && !this.paymentDecoded.amount) {
               this.paymentDecoded.amount = 0;
               this.zeroAmtInvoice = true;
-              this.paymentDecodedHint = 'Zero Amount Invoice | Memo: ' + this.paymentDecoded.description;
+              this.paymentDecodedHintPre = 'Zero Amount Invoice | Memo: ' + this.paymentDecoded.description;
+              this.paymentDecodedHintPost = '';
             } else {
               this.zeroAmtInvoice = false;
               if (this.selNode && this.selNode.settings.fiatConversion && this.paymentDecoded.amount) {
@@ -96,18 +101,23 @@ export class ECLLightningSendPaymentsComponent implements OnInit, OnDestroy {
                   pipe(takeUntil(this.unSubs[2])).
                   subscribe({
                     next: (data) => {
-                      this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats (' + data.symbol + this.decimalPipe.transform((data.OTHER ? data.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' + this.paymentDecoded.description;
+                      this.convertedCurrency = data;
+                      this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats (';
+                      this.paymentDecodedHintPost = this.decimalPipe.transform((this.convertedCurrency.OTHER ? this.convertedCurrency.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' + this.paymentDecoded.description;
                     }, error: (error) => {
-                      this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount / 1000 : 0) + ' Sats | Memo: ' + this.paymentDecoded.description + '. Unable to convert currency.';
+                      this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount / 1000 : 0) + ' Sats | Memo: ' + this.paymentDecoded.description + '. Unable to convert currency.';
+                      this.paymentDecodedHintPost = '';
                     }
                   });
               } else {
-                this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats | Memo: ' + this.paymentDecoded.description;
+                this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats | Memo: ' + this.paymentDecoded.description;
+                this.paymentDecodedHintPost = '';
               }
             }
           }, error: (err) => {
             this.logger.error(err);
-            this.paymentDecodedHint = 'ERROR: ' + ((err.message) ? err.message : ((typeof err === 'string') ? err : JSON.stringify(err)));
+            this.paymentDecodedHintPre = 'ERROR: ' + ((err.message) ? err.message : ((typeof err === 'string') ? err : JSON.stringify(err)));
+            this.paymentDecodedHintPost = '';
             this.paymentReq.control.setErrors({ decodeError: true });
           }
         });
@@ -125,7 +135,8 @@ export class ECLLightningSendPaymentsComponent implements OnInit, OnDestroy {
   onPaymentRequestEntry(event: any) {
     this.paymentRequest = event && typeof event === 'string' ? event.trim() : event;
     this.paymentError = '';
-    this.paymentDecodedHint = '';
+    this.paymentDecodedHintPre = '';
+    this.paymentDecodedHintPost = '';
     this.zeroAmtInvoice = false;
     if (this.paymentRequest && this.paymentRequest.length > 100) {
       this.paymentReq.control.setErrors(null);
@@ -137,26 +148,32 @@ export class ECLLightningSendPaymentsComponent implements OnInit, OnDestroy {
             if (this.paymentDecoded.timestamp && !this.paymentDecoded.amount) {
               this.paymentDecoded.amount = 0;
               this.zeroAmtInvoice = true;
-              this.paymentDecodedHint = 'Zero Amount Invoice | Memo: ' + this.paymentDecoded.description;
+              this.paymentDecodedHintPre = 'Zero Amount Invoice | Memo: ' + this.paymentDecoded.description;
+              this.paymentDecodedHintPost = '';
             } else {
               this.zeroAmtInvoice = false;
               if (this.selNode && this.selNode.settings.fiatConversion && this.paymentDecoded.amount) {
                 this.commonService.convertCurrency(+this.paymentDecoded.amount, CurrencyUnitEnum.SATS, CurrencyUnitEnum.OTHER, (this.selNode.settings.currencyUnits && this.selNode.settings.currencyUnits.length > 2 ? this.selNode.settings.currencyUnits[2] : ''), this.selNode.settings.fiatConversion).
                   pipe(takeUntil(this.unSubs[3])).
                   subscribe({
-                    next: (data) => {
+                    next: (data1) => {
-                      this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats (' + data.symbol + this.decimalPipe.transform((data.OTHER ? data.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' + this.paymentDecoded.description;
+                      this.convertedCurrency = data1;
+                      this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats (';
+                      this.paymentDecodedHintPost = this.decimalPipe.transform((this.convertedCurrency.OTHER ? this.convertedCurrency.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' + this.paymentDecoded.description;
                     }, error: (error) => {
-                      this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats | Memo: ' + this.paymentDecoded.description + '. Unable to convert currency.';
+                      this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats | Memo: ' + this.paymentDecoded.description + '. Unable to convert currency.';
+                      this.paymentDecodedHintPost = '';
                     }
                   });
               } else {
-                this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats | Memo: ' + this.paymentDecoded.description;
+                this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats | Memo: ' + this.paymentDecoded.description;
+                this.paymentDecodedHintPost = '';
               }
             }
           }, error: (err) => {
             this.logger.error(err);
-            this.paymentDecodedHint = 'ERROR: ' + ((err.message) ? err.message : ((typeof err === 'string') ? err : JSON.stringify(err)));
+            this.paymentDecodedHintPre = 'ERROR: ' + ((err.message) ? err.message : ((typeof err === 'string') ? err : JSON.stringify(err)));
+            this.paymentDecodedHintPost = '';
             this.paymentReq.control.setErrors({ decodeError: true });
           }
         });
@@ -176,7 +193,8 @@ export class ECLLightningSendPaymentsComponent implements OnInit, OnDestroy {
     this.selFeeLimitType = FEE_LIMIT_TYPES[0];
     this.paymentReq.control.setErrors(null);
     this.paymentError = '';
-    this.paymentDecodedHint = '';
+    this.paymentDecodedHintPre = '';
+    this.paymentDecodedHintPost = '';
     this.zeroAmtInvoice = false;
   }
 

src/app/lnd/transactions/create-invoice-modal/create-invoice.component.html

@@ -16,7 +16,14 @@
           <mat-label>Amount</mat-label>
           <input matInput type="number" tabindex="2" name="invoiceValue" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
           <span matSuffix>  Sats </span>
-          <mat-hint>{{invoiceValueHint}}</mat-hint>          
+          <mat-hint fxLayout="row wrap" fxFlex="100">
+            <span *ngIf="invoiceValueHint !== ''" class="mr-3px">= </span>
+            <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'FA'" fxLayoutAlign="center center" class="mr-3px">
+              <fa-icon *ngIf="convertedCurrency && invoiceValueHint !== ''" [icon]="convertedCurrency.symbol" />
+            </span>
+            <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'SVG'" fxLayoutAlign="center center" class="mr-3px" [innerHTML]="convertedCurrency.symbol"></span>
+            {{invoiceValueHint}}
+          </mat-hint>
         </mat-form-field>
         <mat-form-field fxLayout="column" fxFlex="24" fxLayoutAlign="start end">
           <mat-label>Expiry</mat-label>

src/app/lnd/transactions/create-invoice-modal/create-invoice.component.ts

@@ -16,6 +16,7 @@ import { CommonService } from '../../../shared/services/common.service';
 import { RTLState } from '../../../store/rtl.state';
 import { saveNewInvoice } from '../../store/lnd.actions';
 import { lndNodeInformation, lndNodeSettings } from '../../store/lnd.selector';
+import { ConvertedCurrency } from '../../../shared/models/rtlModels';
 
 @Component({
   selector: 'rtl-create-invoices',
@@ -26,6 +27,7 @@ export class CreateInvoiceComponent implements OnInit, OnDestroy {
 
   public faExclamationTriangle = faExclamationTriangle;
   public selNode: Node | null;
+  public convertedCurrency: ConvertedCurrency = null;
   public memo = '';
   public expiry: number | null;
   public isAmp = false;
@@ -100,7 +102,8 @@ export class CreateInvoiceComponent implements OnInit, OnDestroy {
         pipe(takeUntil(this.unSubs[3])).
         subscribe({
           next: (data) => {
-            this.invoiceValueHint = '= ' + data.symbol + this.decimalPipe.transform(data.OTHER, CURRENCY_UNIT_FORMATS.OTHER) + ' ' + data.unit;
+            this.convertedCurrency = data;
+            this.invoiceValueHint = this.decimalPipe.transform(this.convertedCurrency.OTHER, CURRENCY_UNIT_FORMATS.OTHER) + ' ' + this.convertedCurrency.unit;
           }, error: (err) => {
             this.invoiceValueHint = 'Conversion Error: ' + err;
           }

src/app/lnd/transactions/invoices/lightning-invoices.component.html

@@ -8,7 +8,14 @@
       <mat-label>Amount</mat-label>
       <input matInput type="number" tabindex="2" name="invValue" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
       <span matSuffix>  Sats </span>
-      <mat-hint>{{invoiceValueHint}}</mat-hint>          
+      <mat-hint fxLayout="row wrap" fxFlex="100">
+        <span *ngIf="invoiceValueHint !== ''" class="mr-3px">= </span>
+        <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'FA'" fxLayoutAlign="center center" class="mr-3px">
+          <fa-icon *ngIf="convertedCurrency && invoiceValueHint !== ''" [icon]="convertedCurrency.symbol" />
+        </span>
+        <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'SVG'" fxLayoutAlign="center center" class="mr-3px" [innerHTML]="convertedCurrency.symbol"></span>
+        {{invoiceValueHint}}
+      </mat-hint>
     </mat-form-field>
     <div fxLayout="row" class="mt-1">
       <button class="mr-1" mat-stroked-button color="primary" tabindex="3" type="reset" (click)="resetData()">Clear Field</button>

src/app/lnd/transactions/invoices/lightning-invoices.component.ts

@@ -8,6 +8,7 @@ import { faHistory, faEye, faEyeSlash, faBurst, faMoneyBill1, faArrowsTurnToDots
 import { MatPaginator, MatPaginatorIntl, PageEvent } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { MAT_SELECT_CONFIG } from '@angular/material/select';
 
 import { CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, APICallStatusEnum, UI_MESSAGES, LNDActions, SortOrderEnum, LND_DEFAULT_PAGE_SETTINGS, LND_PAGE_DEFS, DEFAULT_INVOICE_EXPIRY } from '../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
@@ -25,7 +26,7 @@ import { fetchInvoices, invoiceLookup, saveNewInvoice } from '../../store/lnd.ac
 import { invoices, lndNodeInformation, lndNodeSettings, lndPageSettings } from '../../store/lnd.selector';
 import { ColumnDefinition, PageSettings, TableSetting } from '../../../shared/models/pageSettings';
 import { CamelCaseWithReplacePipe } from '../../../shared/pipes/app.pipe';
-import { MAT_SELECT_CONFIG } from '@angular/material/select';
+import { ConvertedCurrency } from '../../../shared/models/rtlModels';
 
 @Component({
   selector: 'rtl-lightning-invoices',
@@ -48,6 +49,7 @@ export class LightningInvoicesComponent implements OnInit, AfterViewInit, OnDest
   public faArrowsTurnRight = faArrowsTurnRight;
   public faBurst = faBurst;
   public faMoneyBill1 = faMoneyBill1;
+  public convertedCurrency: ConvertedCurrency = null;
   public nodePageDefs = LND_PAGE_DEFS;
   public selFilterBy = 'all';
   public colWidth = '20rem';
@@ -262,7 +264,8 @@ export class LightningInvoicesComponent implements OnInit, AfterViewInit, OnDest
         pipe(takeUntil(this.unSubs[5])).
         subscribe({
           next: (data) => {
-            this.invoiceValueHint = '= ' + data.symbol + this.decimalPipe.transform(data.OTHER, CURRENCY_UNIT_FORMATS.OTHER) + ' ' + data.unit;
+            this.convertedCurrency = data;
+            this.invoiceValueHint = this.decimalPipe.transform(this.convertedCurrency.OTHER, CURRENCY_UNIT_FORMATS.OTHER) + ' ' + this.convertedCurrency.unit;
           }, error: (err) => {
             this.invoiceValueHint = 'Conversion Error: ' + err;
           }

src/app/lnd/transactions/payments/lightning-payments.component.html

@@ -3,7 +3,14 @@
     <mat-form-field fxLayout="column" fxFlex="100">
       <mat-label>Payment Request</mat-label>
       <textarea #paymentReq="ngModel" matInput name="paymentRequest" tabindex="1" required [perfectScrollbar] [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea>
-      <mat-hint *ngIf="paymentRequest && paymentDecodedHint !== ''">{{paymentDecodedHint}}</mat-hint>
+      <mat-hint *ngIf="paymentRequest && paymentDecodedHintPre !== ''" fxLayout="row wrap" fxFlex="100">
+        {{paymentDecodedHintPre}}
+        <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'FA'" fxLayoutAlign="center center" class="mr-3px">
+          <fa-icon *ngIf="convertedCurrency && invoiceValueHint !== ''" [icon]="convertedCurrency.symbol" />
+        </span>
+        <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'SVG'" fxLayoutAlign="center center" class="mr-3px" [innerHTML]="convertedCurrency.symbol"></span>
+        {{paymentDecodedHintPost}}
+      </mat-hint>      
       <mat-error *ngIf="!paymentRequest">Payment request is required.</mat-error>
     </mat-form-field>
     <div fxLayout="row" class="mt-1">

src/app/lnd/transactions/payments/lightning-payments.component.ts

@@ -8,12 +8,13 @@ import { faHistory } from '@fortawesome/free-solid-svg-icons';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { MAT_SELECT_CONFIG } from '@angular/material/select';
+
 import { GetInfo, Payment, PayRequest, PaymentHTLC, Peer, Hop, ListPayments } from '../../../shared/models/lndModels';
 import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, APICallStatusEnum, UI_MESSAGES, LND_DEFAULT_PAGE_SETTINGS, SortOrderEnum, LND_PAGE_DEFS } from '../../../shared/services/consts-enums-functions';
 import { LoggerService } from '../../../shared/services/logger.service';
 import { CommonService } from '../../../shared/services/common.service';
 import { DataService } from '../../../shared/services/data.service';
-
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
 import { Node } from '../../../shared/models/RTLconfig';
 import { LightningSendPaymentsComponent } from '../send-payment-modal/send-payment.component';
@@ -25,7 +26,7 @@ import { sendPayment } from '../../store/lnd.actions';
 import { lndNodeInformation, lndNodeSettings, lndPageSettings, payments, peers } from '../../store/lnd.selector';
 import { ColumnDefinition, PageSettings, TableSetting } from '../../../shared/models/pageSettings';
 import { CamelCaseWithReplacePipe } from '../../../shared/pipes/app.pipe';
-import { MAT_SELECT_CONFIG } from '@angular/material/select';
+import { ConvertedCurrency } from '../../../shared/models/rtlModels';
 
 @Component({
   selector: 'rtl-lightning-payments',
@@ -43,6 +44,7 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
   public faHistory = faHistory;
+  public convertedCurrency: ConvertedCurrency = null;
   public nodePageDefs = LND_PAGE_DEFS;
   public selFilterBy = 'all';
   public colWidth = '20rem';
@@ -59,7 +61,8 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
   public htlcColumns: any[] = [];
   public paymentDecoded: PayRequest = {};
   public paymentRequest = '';
-  public paymentDecodedHint = '';
+  public paymentDecodedHintPre = '';
+  public paymentDecodedHintPost = '';
   private firstOffset = -1;
   private lastOffset = -1;
   public selFilter = '';
@@ -238,7 +241,8 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
 
   onPaymentRequestEntry(event: any) {
     this.paymentRequest = event;
-    this.paymentDecodedHint = '';
+    this.paymentDecodedHintPre = '';
+    this.paymentDecodedHintPost = '';
     if (this.paymentRequest && this.paymentRequest.length > 100) {
       this.dataService.decodePayment(this.paymentRequest, false).
         pipe(take(1)).subscribe((decodedPayment: PayRequest) => {
@@ -252,17 +256,21 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
                 pipe(takeUntil(this.unSubs[6])).
                 subscribe({
                   next: (data) => {
-                    this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis ? this.paymentDecoded.num_satoshis : 0) + ' Sats (' + data.symbol +
+                    this.convertedCurrency = data;
-                    this.decimalPipe.transform((data.OTHER ? data.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' + this.paymentDecoded.description;
+                    this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis ? this.paymentDecoded.num_satoshis : 0) + ' Sats (';
+                    this.paymentDecodedHintPost = this.decimalPipe.transform((this.convertedCurrency.OTHER ? this.convertedCurrency.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' + this.paymentDecoded.description;
                   }, error: (error) => {
-                    this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis ? this.paymentDecoded.num_satoshis : 0) + ' Sats | Memo: ' + this.paymentDecoded.description + '. Unable to convert currency.';
+                    this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis ? this.paymentDecoded.num_satoshis : 0) + ' Sats | Memo: ' + this.paymentDecoded.description + '. Unable to convert currency.';
+                    this.paymentDecodedHintPost = '';
                   }
                 });
             } else {
-              this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis ? this.paymentDecoded.num_satoshis : 0) + ' Sats | Memo: ' + this.paymentDecoded.description;
+              this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis ? this.paymentDecoded.num_satoshis : 0) + ' Sats | Memo: ' + this.paymentDecoded.description;
+              this.paymentDecodedHintPost = '';
             }
           } else {
-            this.paymentDecodedHint = 'Zero Amount Invoice | Memo: ' + this.paymentDecoded.description;
+            this.paymentDecodedHintPre = 'Zero Amount Invoice | Memo: ' + this.paymentDecoded.description;
+            this.paymentDecodedHintPost = '';
           }
         });
     }

src/app/lnd/transactions/send-payment-modal/send-payment.component.html

@@ -11,7 +11,14 @@
         <mat-form-field fxLayout="column" fxFlex="100">
           <mat-label>Payment Request</mat-label>
           <textarea #paymentReq="ngModel" autoFocus matInput name="paymentRequest" rows="4" tabindex="1" required [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea>
-          <mat-hint *ngIf="paymentRequest && paymentDecodedHint !== ''">{{paymentDecodedHint}}</mat-hint>
+          <mat-hint *ngIf="paymentRequest && paymentDecodedHintPre !== ''" fxLayout="row wrap" fxFlex="100">
+            {{paymentDecodedHintPre}}
+            <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'FA'" fxLayoutAlign="center center" class="mr-3px">
+              <fa-icon *ngIf="convertedCurrency && invoiceValueHint !== ''" [icon]="convertedCurrency.symbol" />
+            </span>
+            <span *ngIf="convertedCurrency && convertedCurrency.iconType === 'SVG'" fxLayoutAlign="center center" class="mr-3px" [innerHTML]="convertedCurrency.symbol"></span>
+            {{paymentDecodedHintPost}}
+          </mat-hint>
           <mat-error *ngIf="!paymentRequest">Payment request is required.</mat-error>
           <mat-error *ngIf="paymentReq.errors?.decodeError">{{paymentDecodedHint}}</mat-error>
         </mat-form-field>

src/app/lnd/transactions/send-payment-modal/send-payment.component.ts

@@ -19,6 +19,7 @@ import { RTLState } from '../../../store/rtl.state';
 import { sendPayment } from '../../store/lnd.actions';
 import { channels, lndNodeSettings } from '../../store/lnd.selector';
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
+import { ConvertedCurrency } from '../../../shared/models/rtlModels';
 
 @Component({
   selector: 'rtl-lightning-send-payments',
@@ -29,12 +30,14 @@ export class LightningSendPaymentsComponent implements OnInit, OnDestroy {
 
   @ViewChild('paymentReq', { static: false }) paymentReq: NgModel;
   public faExclamationTriangle = faExclamationTriangle;
+  public convertedCurrency: ConvertedCurrency = null;
   public selNode: Node | null;
   public paymentDecoded: PayRequest = {};
   public zeroAmtInvoice = false;
   public paymentAmount: number | null = null;
   public paymentRequest = '';
-  public paymentDecodedHint = '';
+  public paymentDecodedHintPre = '';
+  public paymentDecodedHintPost = '';
   public showAdvanced = false;
   public activeChannels: Channel[] = [];
   public filteredMinAmtActvChannels: Channel[] = [];
@@ -153,7 +156,8 @@ export class LightningSendPaymentsComponent implements OnInit, OnDestroy {
     this.paymentRequest = event;
     this.paymentAmount = null;
     this.paymentError = '';
-    this.paymentDecodedHint = '';
+    this.paymentDecodedHintPre = '';
+    this.paymentDecodedHintPost = '';
     this.zeroAmtInvoice = false;
     if (this.paymentRequest && this.paymentRequest.length > 100) {
       this.paymentReq.control.setErrors(null);
@@ -180,15 +184,18 @@ export class LightningSendPaymentsComponent implements OnInit, OnDestroy {
                   pipe(takeUntil(this.unSubs[4])).
                   subscribe({
                     next: (data) => {
-                      this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis) +
+                      this.convertedCurrency = data;
-                       ' Sats (' + data.symbol + ' ' + this.decimalPipe.transform((data.OTHER ? data.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' +
+                      this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis) + ' Sats (';
+                      this.paymentDecodedHintPost = this.decimalPipe.transform((data.OTHER ? data.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' +
                        (this.paymentDecoded.description ? this.paymentDecoded.description : 'None');
                     }, error: (error) => {
-                      this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis) + ' Sats | Memo: ' + (this.paymentDecoded.description ? this.paymentDecoded.description : 'None') + '. Unable to convert currency.';
+                      this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis) + ' Sats | Memo: ' + (this.paymentDecoded.description ? this.paymentDecoded.description : 'None') + '. Unable to convert currency.';
+                      this.paymentDecodedHintPost = '';
                     }
                   });
               } else {
-                this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis) + ' Sats | Memo: ' + (this.paymentDecoded.description ? this.paymentDecoded.description : 'None');
+                this.paymentDecodedHintPre = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis) + ' Sats | Memo: ' + (this.paymentDecoded.description ? this.paymentDecoded.description : 'None');
+                this.paymentDecodedHintPost = '';
               }
             } else {
               this.zeroAmtInvoice = true;
@@ -198,11 +205,13 @@ export class LightningSendPaymentsComponent implements OnInit, OnDestroy {
               } else {
                 this.selectedChannelCtrl.disable();
               }
-              this.paymentDecodedHint = 'Memo: ' + (this.paymentDecoded.description ? this.paymentDecoded.description : 'None');
+              this.paymentDecodedHintPre = 'Memo: ' + (this.paymentDecoded.description ? this.paymentDecoded.description : 'None');
+              this.paymentDecodedHintPost = '';
             }
           }, error: (err) => {
             this.logger.error(err);
-            this.paymentDecodedHint = 'ERROR: ' + err.message;
+            this.paymentDecodedHintPre = 'ERROR: ' + err.message;
+            this.paymentDecodedHintPost = '';
             this.paymentReq.control.setErrors({ decodeError: true });
           }
         });
@@ -234,7 +243,8 @@ export class LightningSendPaymentsComponent implements OnInit, OnDestroy {
     this.zeroAmtInvoice = false;
     this.paymentReq.control.setErrors(null);
     this.paymentError = '';
-    this.paymentDecodedHint = '';
+    this.paymentDecodedHintPre = '';
+    this.paymentDecodedHintPost = '';
   }
 
   ngOnDestroy() {

src/app/shared/services/common.service.ts

@@ -93,32 +93,36 @@ export class CommonService implements OnDestroy {
 
   convertCurrency(value: number, from: string, to: string, otherCurrencyUnit: string, fiatConversion: boolean, title?: string): Observable<any> {
     const latest_date = new Date().valueOf();
-    if (fiatConversion && otherCurrencyUnit && (from === CurrencyUnitEnum.OTHER || to === CurrencyUnitEnum.OTHER)) {
+    try {
-      if (this.ratesAPIStatus !== APICallStatusEnum.INITIATED) {
+      if (fiatConversion && otherCurrencyUnit && (from === CurrencyUnitEnum.OTHER || to === CurrencyUnitEnum.OTHER)) {
-        if (this.conversionData.data && this.conversionData.last_fetched && (latest_date < (this.conversionData.last_fetched + 300000))) {
+        if (this.ratesAPIStatus !== APICallStatusEnum.INITIATED) {
+          if (this.conversionData.data && this.conversionData.last_fetched && (latest_date < (this.conversionData.last_fetched + 300000))) {
+            return of(this.convertWithFiat(value, from, otherCurrencyUnit));
+          } else {
+            this.ratesAPIStatus = APICallStatusEnum.INITIATED;
+            return this.dataService.getFiatRates().pipe(takeUntil(this.unSubs[0]),
+              switchMap((data) => {
+                this.ratesAPIStatus = APICallStatusEnum.COMPLETED;
+                this.conversionData.data = (data && typeof data === 'object') ? data : (data && typeof data === 'string') ? JSON.parse(data) : {};
+                this.conversionData.last_fetched = latest_date;
+                return of(this.convertWithFiat(value, from, otherCurrencyUnit));
+              }),
+              catchError((err) => {
+                this.ratesAPIStatus = APICallStatusEnum.ERROR;
+                return throwError(() => 'Currency Conversion Error.');
+              })
+            );
+          }
+        } else if (this.conversionData.data && this.conversionData.last_fetched && (latest_date < (this.conversionData.last_fetched + 300000))) {
           return of(this.convertWithFiat(value, from, otherCurrencyUnit));
         } else {
-          this.ratesAPIStatus = APICallStatusEnum.INITIATED;
+          return of(this.convertWithoutFiat(value, from));
-          return this.dataService.getFiatRates().pipe(takeUntil(this.unSubs[0]),
-            switchMap((data) => {
-              this.ratesAPIStatus = APICallStatusEnum.COMPLETED;
-              this.conversionData.data = (data && typeof data === 'object') ? data : (data && typeof data === 'string') ? JSON.parse(data) : {};
-              this.conversionData.last_fetched = latest_date;
-              return of(this.convertWithFiat(value, from, otherCurrencyUnit));
-            }),
-            catchError((err) => {
-              this.ratesAPIStatus = APICallStatusEnum.ERROR;
-              return throwError(() => this.extractErrorMessage(err, 'Currency Conversion Error.'));
-            })
-          );
         }
-      } else if (this.conversionData.data && this.conversionData.last_fetched && (latest_date < (this.conversionData.last_fetched + 300000))) {
-        return of(this.convertWithFiat(value, from, otherCurrencyUnit));
       } else {
         return of(this.convertWithoutFiat(value, from));
       }
-    } else {
+    } catch (error) {
-      return of(this.convertWithoutFiat(value, from));
+      return throwError(() => 'Currency Conversion Error.');
     }
   }