dark mode fixed

pull/1149/head
ShahanaFarooqui 2 years ago
parent 795a643f39
commit 006775a0ce

@ -10,9 +10,9 @@
<link i18n-rel="" rel="mask-icon" href="assets/images/favicon-light/safari-pinned-tab.svg" color="#5bbad5"> <link i18n-rel="" rel="mask-icon" href="assets/images/favicon-light/safari-pinned-tab.svg" color="#5bbad5">
<meta i18n-content="" name="msapplication-TileColor" content="#da532c"> <meta i18n-content="" name="msapplication-TileColor" content="#da532c">
<meta i18n-content="" name="theme-color" content="#ffffff"> <meta i18n-content="" name="theme-color" content="#ffffff">
<style>@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:100%}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}</style><link rel="stylesheet" href="styles.ff863e15460e0a6d.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.ff863e15460e0a6d.css"></noscript></head> <style>@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:100%}@media only screen and (max-width: 56.25em){html{font-size:90%}}@media only screen and (max-width: 37.5em){html{font-size:80%}}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}</style><link rel="stylesheet" href="styles.a28505c079b82298.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.a28505c079b82298.css"></noscript></head>
<body> <body>
<rtl-app></rtl-app> <rtl-app></rtl-app>
<script src="runtime.bda77cf9c0626fdd.js" type="module"></script><script src="polyfills.cba326bc97aa51ea.js" type="module"></script><script src="main.10acc9285453a51d.js" type="module"></script> <script src="runtime.167ee5fb3e9fa5be.js" type="module"></script><script src="polyfills.cba326bc97aa51ea.js" type="module"></script><script src="main.6387290859593c51.js" type="module"></script>
</body></html> </body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,2 @@
(()=>{"use strict";var e,v={},b={};function r(e){var n=b[e];if(void 0!==n)return n.exports;var t=b[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=(n,t,o,u)=>{if(!t){var a=1/0;for(i=0;i<e.length;i++){for(var[t,o,u]=e[i],c=!0,f=0;f<t.length;f++)(!1&u||a>=u)&&Object.keys(r.O).every(_=>r.O[_](t[f]))?t.splice(f--,1):(c=!1,u<a&&(a=u));if(c){e.splice(i--,1);var d=o();void 0!==d&&(n=d)}}return n}u=u||0;for(var i=e.length;i>0&&e[i-1][2]>u;i--)e[i]=e[i-1];e[i]=[t,o,u]},r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((n,t)=>(r.f[t](e,n),n),[])),r.u=e=>e+"."+{"default-src_app_shared_components_currency-unit-converter_currency-unit-converter_component_t-449cdf":"609456c1c9126c10",src_app_lnd_lnd_module_ts:"63d752f226eab192",src_app_cln_cln_module_ts:"263691ebb00dac56",src_app_eclair_ecl_module_ts:"5fda4433f560906f"}[e]+".js",r.miniCssF=e=>{},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={},n="RTLApp:";r.l=(t,o,u,i)=>{if(e[t])e[t].push(o);else{var a,c;if(void 0!==u)for(var f=document.getElementsByTagName("script"),d=0;d<f.length;d++){var l=f[d];if(l.getAttribute("src")==t||l.getAttribute("data-webpack")==n+u){a=l;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",n+u),a.src=r.tu(t)),e[t]=[o];var s=(m,_)=>{a.onerror=a.onload=null,clearTimeout(p);var g=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),g&&g.forEach(h=>h(_)),m)return m(_)},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:n=>n},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={runtime:0};r.f.j=(o,u)=>{var i=r.o(e,o)?e[o]:void 0;if(0!==i)if(i)u.push(i[2]);else if("runtime"!=o){var a=new Promise((l,s)=>i=e[o]=[l,s]);u.push(i[2]=a);var c=r.p+r.u(o),f=new Error;r.l(c,l=>{if(r.o(e,o)&&(0!==(i=e[o])&&(e[o]=void 0),i)){var s=l&&("load"===l.type?"missing":l.type),p=l&&l.target&&l.target.src;f.message="Loading chunk "+o+" failed.\n("+s+": "+p+")",f.name="ChunkLoadError",f.type=s,f.request=p,i[1](f)}},"chunk-"+o,o)}else e[o]=0},r.O.j=o=>0===e[o];var n=(o,u)=>{var f,d,[i,a,c]=u,l=0;if(i.some(p=>0!==e[p])){for(f in a)r.o(a,f)&&(r.m[f]=a[f]);if(c)var s=c(r)}for(o&&o(u);l<i.length;l++)d=i[l],r.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return r.O(s)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})()})();
//# sourceMappingURL=runtime.167ee5fb3e9fa5be.js.map

File diff suppressed because one or more lines are too long

@ -1,2 +0,0 @@
(()=>{"use strict";var e,b={},v={};function r(e){var n=v[e];if(void 0!==n)return n.exports;var t=v[e]={id:e,loaded:!1,exports:{}};return b[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=b,e=[],r.O=(n,t,o,d)=>{if(!t){var a=1/0;for(i=0;i<e.length;i++){for(var[t,o,d]=e[i],f=!0,u=0;u<t.length;u++)(!1&d||a>=d)&&Object.keys(r.O).every(_=>r.O[_](t[u]))?t.splice(u--,1):(f=!1,d<a&&(a=d));if(f){e.splice(i--,1);var c=o();void 0!==c&&(n=c)}}return n}d=d||0;for(var i=e.length;i>0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[t,o,d]},r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((n,t)=>(r.f[t](e,n),n),[])),r.u=e=>e+"."+{"default-src_app_shared_components_currency-unit-converter_currency-unit-converter_component_t-449cdf":"cba423081ba3a63d",src_app_lnd_lnd_module_ts:"0fea6d7c18422440",src_app_cln_cln_module_ts:"1205951fa883fbe5",src_app_eclair_ecl_module_ts:"d668f841ad8b7b21"}[e]+".js",r.miniCssF=e=>{},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={},n="RTLApp:";r.l=(t,o,d,i)=>{if(e[t])e[t].push(o);else{var a,f;if(void 0!==d)for(var u=document.getElementsByTagName("script"),c=0;c<u.length;c++){var l=u[c];if(l.getAttribute("src")==t||l.getAttribute("data-webpack")==n+d){a=l;break}}a||(f=!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",n+d),a.src=r.tu(t)),e[t]=[o];var s=(m,_)=>{a.onerror=a.onload=null,clearTimeout(p);var g=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),g&&g.forEach(h=>h(_)),m)return m(_)},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),f&&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:n=>n},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={runtime:0};r.f.j=(o,d)=>{var i=r.o(e,o)?e[o]:void 0;if(0!==i)if(i)d.push(i[2]);else if("runtime"!=o){var a=new Promise((l,s)=>i=e[o]=[l,s]);d.push(i[2]=a);var f=r.p+r.u(o),u=new Error;r.l(f,l=>{if(r.o(e,o)&&(0!==(i=e[o])&&(e[o]=void 0),i)){var s=l&&("load"===l.type?"missing":l.type),p=l&&l.target&&l.target.src;u.message="Loading chunk "+o+" failed.\n("+s+": "+p+")",u.name="ChunkLoadError",u.type=s,u.request=p,i[1](u)}},"chunk-"+o,o)}else e[o]=0},r.O.j=o=>0===e[o];var n=(o,d)=>{var u,c,[i,a,f]=d,l=0;if(i.some(p=>0!==e[p])){for(u in a)r.o(a,u)&&(r.m[u]=a[u]);if(f)var s=f(r)}for(o&&o(d);l<i.length;l++)c=i[l],r.o(e,c)&&e[c]&&e[c][0](),e[c]=0;return r.O(s)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})()})();
//# sourceMappingURL=runtime.bda77cf9c0626fdd.js.map

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -9,7 +9,6 @@
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -1,164 +1,164 @@
<div *ngIf="lookupResult" fxLayout="column" class="mt-1"> <div *ngIf="lookupResult" fxLayout="column" class="mt-1">
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row"> <div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row">
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start start" class="mt-1 bordered-box padding-gap-large"> <div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch" class="mt-1 bordered-box padding-gap-large">
<div fxLayout="column"> <div fxLayout="column">
<h3 *ngIf="!node1_match" class="page-title font-bold-500">Node 1</h3> <h3 *ngIf="!node1_match" class="page-title font-bold-500">Node 1</h3>
<h3 *ngIf="node1_match" class="page-title font-bold-500">Node 1 (Your Node)</h3> <h3 *ngIf="node1_match" class="page-title font-bold-500">Node 1 (Your Node)</h3>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="20" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Short Channel ID</h4> <h4 class="font-bold-500">Short Channel ID</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.short_channel_id}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.short_channel_id}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Active</h4> <h4 class="font-bold-500">Active</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.active ? 'True' : 'False'}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.active ? 'True' : 'False'}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Last Update</h4> <h4 class="font-bold-500">Last Update</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.last_update }}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.last_update }}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Amount (mSats)</h4> <h4 class="font-bold-500">Amount (mSats)</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.amount_msat}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.amount_msat}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Base Fee (mSats)</h4> <h4 class="font-bold-500">Base Fee (mSats)</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.base_fee_millisatoshi | number}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.base_fee_millisatoshi | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Channel Flags</h4> <h4 class="font-bold-500">Channel Flags</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.channel_flags | number}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.channel_flags | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Delay</h4> <h4 class="font-bold-500">Delay</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.delay | number}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.delay | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Destination</h4> <h4 class="font-bold-500">Destination</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.destination}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.destination}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Fee/Millionth</h4> <h4 class="font-bold-500">Fee/Millionth</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.fee_per_millionth | number}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.fee_per_millionth | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Max Htlc (mSat)</h4> <h4 class="font-bold-500">Max Htlc (mSat)</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.htlc_maximum_msat}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.htlc_maximum_msat}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Min Htlc (mSat)</h4> <h4 class="font-bold-500">Min Htlc (mSat)</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.htlc_minimum_msat}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.htlc_minimum_msat}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Message Flags</h4> <h4 class="font-bold-500">Message Flags</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.message_flags | number}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.message_flags | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Public</h4> <h4 class="font-bold-500">Public</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.public ? 'Yes' : 'No'}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.public ? 'Yes' : 'No'}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Satoshis</h4> <h4 class="font-bold-500">Satoshis</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.satoshis | number}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.satoshis | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Source</h4> <h4 class="font-bold-500">Source</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.source}}</span> <span class="foreground-secondary-text">{{lookupResult[0]?.source}}</span>
</div> </div>
</div> </div>
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start start" class="mt-1 bordered-box padding-gap-large"> <div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch" class="mt-1 bordered-box padding-gap-large">
<div> <div>
<h3 *ngIf="!node2_match" class="page-title font-bold-500">Node 2</h3> <h3 *ngIf="!node2_match" class="page-title font-bold-500">Node 2</h3>
<h3 *ngIf="node2_match" class="page-title font-bold-500">Node 2 (Your Node)</h3> <h3 *ngIf="node2_match" class="page-title font-bold-500">Node 2 (Your Node)</h3>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="20" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Short Channel ID</h4> <h4 class="font-bold-500">Short Channel ID</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.short_channel_id}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.short_channel_id}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Active</h4> <h4 class="font-bold-500">Active</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.active ? 'True' : 'False'}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.active ? 'True' : 'False'}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Last Update</h4> <h4 class="font-bold-500">Last Update</h4>
<span class="foreground-secondary-text">{{(lookupResult[1]?.last_update * 1000) | date:'dd/MMM/y HH:mm'}}</span> <span class="foreground-secondary-text">{{(lookupResult[1]?.last_update * 1000) | date:'dd/MMM/y HH:mm'}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Amount (mSats)</h4> <h4 class="font-bold-500">Amount (mSats)</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.amount_msat}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.amount_msat}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Base Fee (mSats)</h4> <h4 class="font-bold-500">Base Fee (mSats)</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.base_fee_millisatoshi | number}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.base_fee_millisatoshi | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Channel Flags</h4> <h4 class="font-bold-500">Channel Flags</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.channel_flags | number}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.channel_flags | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Delay</h4> <h4 class="font-bold-500">Delay</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.delay | number}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.delay | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Destination</h4> <h4 class="font-bold-500">Destination</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.destination}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.destination}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Fee/Millionth</h4> <h4 class="font-bold-500">Fee/Millionth</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.fee_per_millionth | number}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.fee_per_millionth | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Max Htlc (mSat)</h4> <h4 class="font-bold-500">Max Htlc (mSat)</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.htlc_maximum_msat}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.htlc_maximum_msat}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Min Htlc (mSat)</h4> <h4 class="font-bold-500">Min Htlc (mSat)</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.htlc_minimum_msat}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.htlc_minimum_msat}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Message Flags</h4> <h4 class="font-bold-500">Message Flags</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.message_flags | number}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.message_flags | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Public</h4> <h4 class="font-bold-500">Public</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.public ? 'Yes' : 'No'}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.public ? 'Yes' : 'No'}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Satoshis</h4> <h4 class="font-bold-500">Satoshis</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.satoshis | number}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.satoshis | number}}</span>
</div> </div>
<mat-divider [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1"> <div fxLayout="column">
<h4 class="font-bold-500">Source</h4> <h4 class="font-bold-500">Source</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.source}}</span> <span class="foreground-secondary-text">{{lookupResult[1]?.source}}</span>
</div> </div>

@ -9,8 +9,9 @@
</mat-radio-button> </mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div> </div>
<mat-form-field fxFlex="100" fxLayoutAlign="start end" [ngClass]="{'mt-1': true, 'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}"> <mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end" [ngClass]="{'mt-1': true, 'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
<input #key matInput name="lookupKey" tabindex="2" required [placeholder]="lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'" [(ngModel)]="lookupKey" (change)="clearLookupValue()"> <mat-label>{{lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'}}</mat-label>
<input #key matInput name="lookupKey" tabindex="2" required [(ngModel)]="lookupKey" (change)="clearLookupValue()">
<mat-error *ngIf="!lookupKey">{{lookupFields[selectedFieldId]?.placeholder}} is required.</mat-error> <mat-error *ngIf="!lookupKey">{{lookupFields[selectedFieldId]?.placeholder}} is required.</mat-error>
</mat-form-field> </mat-form-field>
<div fxLayout="row" fxFlex="100" class="mt-1"> <div fxLayout="row" fxFlex="100" class="mt-1">

@ -1,5 +1,5 @@
<div *ngIf="lookupResult" fxLayout="column" class="mt-1"> <div *ngIf="lookupResult" fxLayout="column" class="mt-1">
<mat-divider class="mb-1" [inset]="true"></mat-divider> <mat-divider class="mb-1"></mat-divider>
<div fxLayout="row"> <div fxLayout="row">
<div fxFlex="30"> <div fxFlex="30">
<h4 fxLayoutAlign="start" class="font-bold-500">Alias</h4> <h4 fxLayoutAlign="start" class="font-bold-500">Alias</h4>
@ -10,7 +10,7 @@
<span class="foreground-secondary-text w-100">{{lookupResult?.nodeid}}</span> <span class="foreground-secondary-text w-100">{{lookupResult?.nodeid}}</span>
</div> </div>
</div> </div>
<mat-divider class="my-1" [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="row"> <div fxLayout="row">
<div fxFlex="30"> <div fxFlex="30">
<h4 fxLayoutAlign="start" class="font-bold-500">Last Update</h4> <h4 fxLayoutAlign="start" class="font-bold-500">Last Update</h4>
@ -21,7 +21,7 @@
<span *ngFor="let featureDescription of featureDescriptions" class="foreground-secondary-text">{{featureDescription}}</span> <span *ngFor="let featureDescription of featureDescriptions" class="foreground-secondary-text">{{featureDescription}}</span>
</div> </div>
</div> </div>
<mat-divider class="my-1" [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="column"> <div fxLayout="column">
<h4 fxFlex="100" fxLayoutAlign="start" class="font-bold-500 mb-1">Addresses</h4> <h4 fxFlex="100" fxLayoutAlign="start" class="font-bold-500 mb-1">Addresses</h4>
<div fxLayout="row" fxFlex="100" class="table-container" [perfectScrollbar]> <div fxLayout="row" fxFlex="100" class="table-container" [perfectScrollbar]>

@ -1,7 +1,7 @@
div.bordered-box.table-actions-select.btn-action { div.bordered-box.table-actions-select.btn-action {
min-width: 13rem; min-width: 13rem;
width: 13rem; width: 13rem;
min-height: 3.6rem; min-height: 2.3rem;
} }
button.mat-stroked-button.btn-action-copy { button.mat-stroked-button.btn-action-copy {

@ -4,12 +4,14 @@
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon> <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
<span>The actual routing fee on a payment can be different from the fee shown on query routes.</span> <span>The actual routing fee on a payment can be different from the fee shown on query routes.</span>
</div> </div>
<mat-form-field fxFlex="69" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="69" fxLayoutAlign="start end">
<input #destPubkey="ngModel" matInput placeholder="Destination Pubkey" name="destinationPubkey" tabindex="1" required [(ngModel)]="destinationPubkey"> <mat-label>Destination Pubkey</mat-label>
<input #destPubkey="ngModel" matInput name="destinationPubkey" tabindex="1" required [(ngModel)]="destinationPubkey">
<mat-error *ngIf="!destinationPubkey">Destination pubkey is required.</mat-error> <mat-error *ngIf="!destinationPubkey">Destination pubkey is required.</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="29" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="29" fxLayoutAlign="start end">
<input matInput placeholder="Amount (Sats)" name="amount" tabindex="2" type="number" required [step]="1000" [min]="0" [(ngModel)]="amount"> <mat-label>Amount (Sats)</mat-label>
<input matInput name="amount" tabindex="2" type="number" required [step]="1000" [min]="0" [(ngModel)]="amount">
<mat-error *ngIf="!amount">Amount is required.</mat-error> <mat-error *ngIf="!amount">Amount is required.</mat-error>
</mat-form-field> </mat-form-field>
<div fxLayout="row" class="mt-1"> <div fxLayout="row" class="mt-1">
@ -29,7 +31,7 @@
<ng-container matColumnDef="id"> <ng-container matColumnDef="id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
<td *matCellDef="let hop" mat-cell> <td *matCellDef="let hop" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{hop?.id}}</span> <span class="ellipsis-child">{{hop?.id}}</span>
</div> </div>
</td> </td>
@ -37,7 +39,7 @@
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<td *matCellDef="let hop" mat-cell> <td *matCellDef="let hop" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{hop?.alias}}</span> <span class="ellipsis-child">{{hop?.alias}}</span>
</div> </div>
</td> </td>

@ -12,18 +12,18 @@
<span>Ads should be supplemented with additional research of the node, before buying liquidity.</span> <span>Ads should be supplemented with additional research of the node, before buying liquidity.</span>
</div> </div>
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container mt-1"> <div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container mt-1">
<div fxFlex="30"> <div fxLayout="row" fxLayoutAlign="start center" fxFlex="30">
<span class="page-title"> <span class="page-text">Liquidity Ask</span>
Liquidity Ask <mat-icon matTooltipPosition="above" matTooltipClass="pre-wrap" class="info-icon info-icon-primary" [matTooltip]="askTooltipMsg">info_outline</mat-icon>
<mat-icon matTooltipPosition="above" matTooltipClass="pre-wrap" class="info-icon info-icon-primary" [matTooltip]="askTooltipMsg">info_outline</mat-icon>
</span>
</div> </div>
<mat-form-field fxFlex="34"> <mat-form-field fxLayout="column" fxFlex="34">
<input autoFocus matInput placeholder="Channel Amount (Sats)" name="channelAmount" tabindex="1" type="number" step="10000" required [(ngModel)]="channelAmount" (keyup)="onCalculateOpeningFee()"> <mat-label>Channel Amount (Sats)</mat-label>
<input autoFocus matInput name="channelAmount" tabindex="1" type="number" step="10000" required [(ngModel)]="channelAmount" (keyup)="onCalculateOpeningFee()">
<mat-error *ngIf="!channelAmount">Channel amount is required.</mat-error> <mat-error *ngIf="!channelAmount">Channel amount is required.</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="34"> <mat-form-field fxLayout="column" fxFlex="34">
<input matInput placeholder="Channel Opening Fee Rate (Sats/vByte)" name="channel_opening_feeRate" type="number" step="10" tabindex="2" required [(ngModel)]="channel_opening_feeRate" (keyup)="onCalculateOpeningFee()"> <mat-label>Channel Opening Fee Rate (Sats/vByte)</mat-label>
<input matInput name="channel_opening_feeRate" type="number" step="10" tabindex="2" required [(ngModel)]="channel_opening_feeRate" (keyup)="onCalculateOpeningFee()">
<mat-error *ngIf="!channel_opening_feeRate">Channel opening fee rate is required.</mat-error> <mat-error *ngIf="!channel_opening_feeRate">Channel opening fee rate is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -37,12 +37,14 @@
<mat-icon [matTooltip]="nodesTooltipMsg" matTooltipPosition="above" matTooltipClass="pre-wrap" class="info-icon info-icon-primary">info_outline</mat-icon> <mat-icon [matTooltip]="nodesTooltipMsg" matTooltipPosition="above" matTooltipClass="pre-wrap" class="info-icon info-icon-primary">info_outline</mat-icon>
</span> </span>
</div> </div>
<mat-form-field fxFlex="34"> <mat-form-field fxLayout="column" fxFlex="34">
<input matInput placeholder="Node Capacity (Sats)" name="node_capacity" [(ngModel)]="node_capacity" (keyup)="onFilter()" tabindex="5" type="number" min="0" step="1000"> <mat-label>Node Capacity (Sats)</mat-label>
<input matInput name="node_capacity" [(ngModel)]="node_capacity" (keyup)="onFilter()" tabindex="5" type="number" min="0" step="1000">
<mat-error *ngIf="!node_capacity">Node capacity is required.</mat-error> <mat-error *ngIf="!node_capacity">Node capacity is required.</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="34"> <mat-form-field fxLayout="column" fxFlex="34">
<input matInput placeholder="Channel Count" name="channel_count" [(ngModel)]="channel_count" (keyup)="onFilter()" type="number" step="1" min="0" tabindex="6"> <mat-label>Channel Count</mat-label>
<input matInput name="channel_count" [(ngModel)]="channel_count" (keyup)="onFilter()" type="number" step="1" min="0" tabindex="6">
</mat-form-field> </mat-form-field>
</div> </div>
</form> --> </form> -->
@ -52,13 +54,15 @@
<span class="page-title">Liquidity Providing Peers</span> <span class="page-title">Liquidity Providing Peers</span>
</div> </div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -68,7 +72,7 @@
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<td *matCellDef="let lqNode" mat-cell> <td *matCellDef="let lqNode" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span fxLayout="row" fxLayoutAlign="start center" class="ellipsis-child"> <span fxLayout="row" fxLayoutAlign="start center" class="ellipsis-child">
{{lqNode?.alias}} {{lqNode?.alias}}
<mat-chip-list class="ml-half" aria-label="Address Types"> <mat-chip-list class="ml-half" aria-label="Address Types">
@ -83,7 +87,7 @@
<ng-container matColumnDef="nodeid"> <ng-container matColumnDef="nodeid">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
<td *matCellDef="let lqNode" mat-cell> <td *matCellDef="let lqNode" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{lqNode?.nodeid}}</span> <span class="ellipsis-child">{{lqNode?.nodeid}}</span>
</div> </div>
</td> </td>

@ -88,7 +88,7 @@ export class CLNLiquidityAdsListComponent implements OnInit, OnDestroy {
} }
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
combineLatest([this.store.select(nodeInfoAndNodeSettingsAndBalance), this.dataService.listNetworkNodes('?liquidity_ads=yes')]).pipe(takeUntil(this.unSubs[1])). combineLatest([this.store.select(nodeInfoAndNodeSettingsAndBalance), this.dataService.listNetworkNodes('?liquidity_ads=yes')]).pipe(takeUntil(this.unSubs[1])).

@ -10,18 +10,21 @@
<form #form="ngForm" fxLayout="column"> <form #form="ngForm" fxLayout="column">
<ng-container *ngTemplateOutlet="nodeDetailsExpansionBlock"></ng-container> <ng-container *ngTemplateOutlet="nodeDetailsExpansionBlock"></ng-container>
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap"> <div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap">
<mat-form-field fxFlex="30" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="30" fxLayoutAlign="start end">
<input #ramount="ngModel" autoFocus matInput placeholder="Requested Amount" type="number" tabindex="1" required name="ramount" [step]="10000" [min]="0" [(ngModel)]="requestedAmount" (keyup)="calculateFee()"> <mat-label>Requested Amount</mat-label>
<input #ramount="ngModel" autoFocus matInput type="number" tabindex="1" required name="ramount" [step]="10000" [min]="0" [(ngModel)]="requestedAmount" (keyup)="calculateFee()">
<span matSuffix> Sats </span> <span matSuffix> Sats </span>
<mat-error *ngIf="ramount.errors?.required">Requested amount is required.</mat-error> <mat-error *ngIf="ramount.errors?.required">Requested amount is required.</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="30" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="30" fxLayoutAlign="start end">
<input #feeRt="ngModel" matInput placeholder="Fee Rate" type="number" tabindex="2" required name="feerate" [step]="10" [min]="0" [(ngModel)]="feeRate" (keyup)="calculateFee()"> <mat-label>Fee Rate</mat-label>
<input #feeRt="ngModel" matInput type="number" tabindex="2" required name="feerate" [step]="10" [min]="0" [(ngModel)]="feeRate" (keyup)="calculateFee()">
<span matSuffix> Sats/vByte </span> <span matSuffix> Sats/vByte </span>
<mat-error *ngIf="feeRt.errors?.required">Fee rate is required.</mat-error> <mat-error *ngIf="feeRt.errors?.required">Fee rate is required.</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="30" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="30" fxLayoutAlign="start end">
<input #lamount="ngModel" matInput placeholder="Local Amount" type="number" tabindex="3" required name="lamount" [step]="10000" [min]="20000" [max]="totalBalance" [(ngModel)]="localAmount"> <mat-label>Local Amount</mat-label>
<input #lamount="ngModel" matInput type="number" tabindex="3" required name="lamount" [step]="10000" [min]="20000" [max]="totalBalance" [(ngModel)]="localAmount">
<mat-hint>Remaining Bal: {{totalBalance - ((localAmount) ? localAmount : 0) | number}}</mat-hint> <mat-hint>Remaining Bal: {{totalBalance - ((localAmount) ? localAmount : 0) | number}}</mat-hint>
<span matSuffix> Sats </span> <span matSuffix> Sats </span>
<mat-error *ngIf="lamount.errors?.required">Local amount is required.</mat-error> <mat-error *ngIf="lamount.errors?.required">Local amount is required.</mat-error>

@ -1,14 +1,15 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column">
<div fxLayout="row" fxLayoutAlign="space-between end" fxLayoutAlign.gt-sm="start end"> <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutAlign.gt-sm="start center">
<mat-form-field fxFlex="48" fxFlex.gt-md="25" fxLayoutAlign="start end" class="mr-2"> <mat-form-field fxLayout="column" fxFlex="48" fxFlex.gt-md="25" fxLayoutAlign="start end" class="mr-2">
<mat-select placeholder="Address Type" name="address_type" tabindex="1" [(ngModel)]="selectedAddressType"> <mat-label>Address Type</mat-label>
<mat-select name="address_type" tabindex="1" [(ngModel)]="selectedAddressType">
<mat-option *ngFor="let addressType of addressTypes" [value]="addressType"> <mat-option *ngFor="let addressType of addressTypes" [value]="addressType">
{{addressType.addressTp}} {{addressType.addressTp}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div class="mt-2"> <div>
<button mat-flat-button color="primary" tabindex="2" class="top-minus-15px" (click)="onGenerateAddress()">Generate Address</button> <button mat-flat-button color="primary" tabindex="2" (click)="onGenerateAddress()">Generate Address</button>
</div> </div>
</div> </div>
</div> </div>

@ -8,17 +8,19 @@
</mat-card-header> </mat-card-header>
<mat-card-content class="padding-gap-x-large"> <mat-card-content class="padding-gap-x-large">
<form *ngIf="!sweepAll; else sweepAllBlock;" #form="ngForm" fxLayout="row wrap"fxLayoutAlign="space-between start" fxFlex="100" class="overflow-x-hidden" (submit)="onSendFunds()" (reset)="resetData()"> <form *ngIf="!sweepAll; else sweepAllBlock;" #form="ngForm" fxLayout="row wrap"fxLayoutAlign="space-between start" fxFlex="100" class="overflow-x-hidden" (submit)="onSendFunds()" (reset)="resetData()">
<mat-form-field fxFlex="55"> <mat-form-field fxLayout="column" fxFlex="55">
<input #address="ngModel" matInput autoFocus placeholder="Bitcoin Address" tabindex="1" name="address" required [(ngModel)]="transaction.address"> <mat-label>Bitcoin Address</mat-label>
<input #address="ngModel" matInput autoFocus tabindex="1" name="address" required [(ngModel)]="transaction.address">
<mat-error *ngIf="!transaction.address">Bitcoin address is required.</mat-error> <mat-error *ngIf="!transaction.address">Bitcoin address is required.</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="30"> <mat-form-field fxLayout="column" fxFlex="30">
<input #amount="ngModel" matInput placeholder="Amount" name="amount" tabindex="2" required [type]="flgUseAllBalance ? 'text' : 'number'" [step]="100" [min]="0" [disabled]="flgUseAllBalance" [(ngModel)]="transaction.satoshis"> <mat-label>Amount</mat-label>
<input #amount="ngModel" matInput name="amount" tabindex="2" required [type]="flgUseAllBalance ? 'text' : 'number'" [step]="100" [min]="0" [disabled]="flgUseAllBalance" [(ngModel)]="transaction.satoshis">
<mat-hint *ngIf="flgUseAllBalance">Amount replaced by UTXO balance</mat-hint> <mat-hint *ngIf="flgUseAllBalance">Amount replaced by UTXO balance</mat-hint>
<span matSuffix>{{selAmountUnit}} </span> <span matSuffix>{{selAmountUnit}} </span>
<mat-error *ngIf="!transaction.satoshis">{{amountError}}</mat-error> <mat-error *ngIf="!transaction.satoshis">{{amountError}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="10" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="10" fxLayoutAlign="start end">
<mat-select tabindex="3" required name="amountUnit" [value]="selAmountUnit" [disabled]="flgUseAllBalance" (selectionChange)="onAmountUnitChange($event)"> <mat-select tabindex="3" required name="amountUnit" [value]="selAmountUnit" [disabled]="flgUseAllBalance" (selectionChange)="onAmountUnitChange($event)">
<mat-option *ngFor="let amountUnit of amountUnits" [value]="amountUnit">{{amountUnit}}</mat-option> <mat-option *ngFor="let amountUnit of amountUnits" [value]="amountUnit">{{amountUnit}}</mat-option>
</mat-select> </mat-select>
@ -26,22 +28,25 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap"> <div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap">
<div fxFlex="48" fxLayoutAlign="space-between end"> <div fxFlex="48" fxLayoutAlign="space-between end">
<mat-form-field fxLayoutAlign="start center" [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'"> <mat-form-field fxLayout="column" fxLayoutAlign="start center" [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'">
<mat-select tabindex="4" placeholder="Fee Rate" [disabled]="flgMinConf" [(value)]="selFeeRate" (selectionChange)="customFeeRate=null"> <mat-label>Fee Rate</mat-label>
<mat-select tabindex="4" [disabled]="flgMinConf" [(value)]="selFeeRate" (selectionChange)="customFeeRate=null">
<mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId"> <mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
{{feeRateType.feeRateType}} {{feeRateType.feeRateType}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="selFeeRate === 'customperkb' && !flgMinConf" fxFlex="48" fxLayoutAlign="end center"> <mat-form-field *ngIf="selFeeRate === 'customperkb' && !flgMinConf" fxFlex="48" fxLayoutAlign="end center">
<input #custFeeRate="ngModel" matInput placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0" [required]="selFeeRate === 'customperkb' && !flgMinConf" [(ngModel)]="customFeeRate"> <mat-label>Fee Rate (Sats/vByte)</mat-label>
<input #custFeeRate="ngModel" matInput type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0" [required]="selFeeRate === 'customperkb' && !flgMinConf" [(ngModel)]="customFeeRate">
<mat-error *ngIf="selFeeRate === 'customperkb' && !flgMinConf && !customFeeRate">Fee Rate is required.</mat-error> <mat-error *ngIf="selFeeRate === 'customperkb' && !flgMinConf && !customFeeRate">Fee Rate is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxFlex="48" fxLayout="row" fxLayoutAlign="start center"> <div fxFlex="48" fxLayout="row" fxLayoutAlign="start center">
<mat-checkbox fxFlex="2" tabindex="5" color="primary" name="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null"></mat-checkbox> <mat-checkbox fxFlex="7" tabindex="5" color="primary" name="flgMinConf" fxLayoutAlign="stretch start" class="mb-2" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null"></mat-checkbox>
<mat-form-field fxFlex="98"> <mat-form-field fxLayout="column" fxFlex="93">
<input #blocks="ngModel" matInput placeholder="Min Confirmation Blocks" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="flgMinConf" [disabled]="!flgMinConf" [(ngModel)]="minConfValue"> <mat-label>Min Confirmation Blocks</mat-label>
<input #blocks="ngModel" matInput type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="flgMinConf" [disabled]="!flgMinConf" [(ngModel)]="minConfValue">
<mat-error *ngIf="flgMinConf && !minConfValue">Min Confirmation Blocks is required.</mat-error> <mat-error *ngIf="flgMinConf && !minConfValue">Min Confirmation Blocks is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -55,13 +60,14 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center"> <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
<mat-form-field fxFlex="35" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="35" fxLayoutAlign="start end">
<mat-select tabindex="8" placeholder="Coin Selection" multiple [(value)]="selUTXOs" (selectionChange)="onUTXOSelectionChange($event)"> <mat-label>Coin Selection</mat-label>
<mat-select tabindex="8" multiple [(value)]="selUTXOs" (selectionChange)="onUTXOSelectionChange($event)">
<mat-select-trigger>{{totalSelectedUTXOAmount | number}} Sats ({{selUTXOs.length > 1 ? selUTXOs.length + ' UTXOs' : '1 UTXO'}})</mat-select-trigger> <mat-select-trigger>{{totalSelectedUTXOAmount | number}} Sats ({{selUTXOs.length > 1 ? selUTXOs.length + ' UTXOs' : '1 UTXO'}})</mat-select-trigger>
<mat-option *ngFor="let utxo of utxos" [value]="utxo">{{utxo.value | number}} Sats</mat-option> <mat-option *ngFor="let utxo of utxos" [value]="utxo">{{utxo.value | number}} Sats</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div fxFlex="60" fxLayout="row" fxLayoutAlign="start center"> <div fxFlex="60" fxLayout="row" fxLayoutAlign="start center" class="mb-2">
<mat-slide-toggle tabindex="9" color="primary" name="flgUseAllBalance" [disabled]="selUTXOs.length < 1" [(ngModel)]="flgUseAllBalance" (change)="onUTXOAllBalanceChange()"> <mat-slide-toggle tabindex="9" color="primary" name="flgUseAllBalance" [disabled]="selUTXOs.length < 1" [(ngModel)]="flgUseAllBalance" (change)="onUTXOAllBalanceChange()">
Use selected UTXOs balance Use selected UTXOs balance
</mat-slide-toggle> </mat-slide-toggle>
@ -93,8 +99,9 @@
<form fxLayout="column" fxLayoutAlign="space-between" class="my-1 pr-1" [formGroup]="passwordFormGroup"> <form fxLayout="column" fxLayoutAlign="space-between" class="my-1 pr-1" [formGroup]="passwordFormGroup">
<ng-template matStepLabel>{{passwordFormLabel}}</ng-template> <ng-template matStepLabel>{{passwordFormLabel}}</ng-template>
<div fxLayout="row"> <div fxLayout="row">
<mat-form-field fxFlex="100"> <mat-form-field fxLayout="column" fxFlex="100">
<input autoFocus matInput placeholder="Password" type="password" tabindex="1" formControlName="password" required> <mat-label>Password</mat-label>
<input autoFocus matInput type="password" tabindex="1" formControlName="password" required>
<mat-error *ngIf="passwordFormGroup.controls.password.errors?.required">Password is required.</mat-error> <mat-error *ngIf="passwordFormGroup.controls.password.errors?.required">Password is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -107,28 +114,32 @@
<form fxLayout="column" class="my-1 pr-1" [formGroup]="sendFundFormGroup"> <form fxLayout="column" class="my-1 pr-1" [formGroup]="sendFundFormGroup">
<ng-template matStepLabel disabled="true">{{sendFundFormLabel}}</ng-template> <ng-template matStepLabel disabled="true">{{sendFundFormLabel}}</ng-template>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<mat-form-field fxFlex="100"> <mat-form-field fxLayout="column" fxFlex="100">
<input matInput formControlName="transactionAddress" placeholder="Bitcoin Address" tabindex="4" name="address" required> <mat-label>Bitcoin Address</mat-label>
<input matInput formControlName="transactionAddress" tabindex="4" name="address" required>
<mat-error *ngIf="sendFundFormGroup.controls.transactionAddress.errors?.required">Bitcoin address is required.</mat-error> <mat-error *ngIf="sendFundFormGroup.controls.transactionAddress.errors?.required">Bitcoin address is required.</mat-error>
</mat-form-field> </mat-form-field>
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign.gt-sm="space-between center"> <div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign.gt-sm="space-between center">
<div fxFlex="48" fxLayoutAlign="space-between end"> <div fxFlex="48" fxLayoutAlign="space-between end">
<mat-form-field fxLayoutAlign="start center" [fxFlex]="sendFundFormGroup.controls.selFeeRate.value === 'customperkb' && !sendFundFormGroup.controls.flgMinConf.value ? '48' : '100'"> <mat-form-field fxLayout="column" fxLayoutAlign="start center" [fxFlex]="sendFundFormGroup.controls.selFeeRate.value === 'customperkb' && !sendFundFormGroup.controls.flgMinConf.value ? '48' : '100'">
<mat-select tabindex="4" placeholder="Fee Rate" formControlName="selFeeRate"> <mat-label>Fee Rate</mat-label>
<mat-select tabindex="4" formControlName="selFeeRate">
<mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId"> <mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
{{feeRateType.feeRateType}} {{feeRateType.feeRateType}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="sendFundFormGroup.controls.selFeeRate.value === 'customperkb' && !sendFundFormGroup.controls.flgMinConf.value" fxFlex="48" fxLayoutAlign="end center"> <mat-form-field *ngIf="sendFundFormGroup.controls.selFeeRate.value === 'customperkb' && !sendFundFormGroup.controls.flgMinConf.value" fxFlex="48" fxLayoutAlign="end center">
<input matInput formControlName="customFeeRate" placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0"> <mat-label>Fee Rate (Sats/vByte)</mat-label>
<input matInput formControlName="customFeeRate" type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0">
<mat-error *ngIf="sendFundFormGroup.controls.selFeeRate.value === 'customperkb' && !sendFundFormGroup.controls.flgMinConf.value && !sendFundFormGroup.controls.customFeeRate.value">Fee Rate is required.</mat-error> <mat-error *ngIf="sendFundFormGroup.controls.selFeeRate.value === 'customperkb' && !sendFundFormGroup.controls.flgMinConf.value && !sendFundFormGroup.controls.customFeeRate.value">Fee Rate is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxFlex="48" fxLayout="row" fxLayoutAlign="start center"> <div fxFlex="48" fxLayout="row" fxLayoutAlign="start center">
<mat-checkbox fxFlex="2" tabindex="5" color="primary" formControlName="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}"></mat-checkbox> <mat-checkbox fxFlex="7" tabindex="5" color="primary" formControlName="flgMinConf" fxLayoutAlign="stretch start" class="mb-2" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}"></mat-checkbox>
<mat-form-field fxFlex="98"> <mat-form-field fxLayout="column" fxFlex="93">
<input matInput formControlName="minConfValue" placeholder="Min Confirmation Blocks" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="sendFundFormGroup.controls.flgMinConf.value"> <mat-label>Min Confirmation Blocks</mat-label>
<input matInput formControlName="minConfValue" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="sendFundFormGroup.controls.flgMinConf.value">
<mat-error *ngIf="sendFundFormGroup.controls.flgMinConf.value && !sendFundFormGroup.controls.minConfValue.value">Min Confirmation Blocks is required.</mat-error> <mat-error *ngIf="sendFundFormGroup.controls.flgMinConf.value && !sendFundFormGroup.controls.minConfValue.value">Min Confirmation Blocks is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>

@ -20,7 +20,6 @@
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link?.link" [routerLink]="[link?.link, selectedTable?.name]" (click)="activeLink = link?.link">{{link?.name}}</div> <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link?.link" [routerLink]="[link?.link, selectedTable?.name]" (click)="activeLink = link?.link">{{link?.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -2,13 +2,15 @@
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start stretch" class="page-sub-title-container"> <div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start stretch" class="page-sub-title-container">
<div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center"></div> <div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -34,7 +36,7 @@
<ng-container matColumnDef="txid"> <ng-container matColumnDef="txid">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Transaction ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Transaction ID</th>
<td *matCellDef="let utxo" mat-cell> <td *matCellDef="let utxo" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{utxo.txid}}</span> <span class="ellipsis-child">{{utxo.txid}}</span>
</span> </span>
</td> </td>
@ -42,7 +44,7 @@
<ng-container matColumnDef="address"> <ng-container matColumnDef="address">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Address</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Address</th>
<td *matCellDef="let utxo" mat-cell> <td *matCellDef="let utxo" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{utxo.address}}</span> <span class="ellipsis-child">{{utxo.address}}</span>
</span> </span>
</td> </td>
@ -50,7 +52,7 @@
<ng-container matColumnDef="scriptpubkey"> <ng-container matColumnDef="scriptpubkey">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Script Pubkey</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Script Pubkey</th>
<td *matCellDef="let utxo" mat-cell> <td *matCellDef="let utxo" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{utxo.scriptpubkey}}</span> <span class="ellipsis-child">{{utxo.scriptpubkey}}</span>
</span> </span>
</td> </td>

@ -77,7 +77,7 @@ export class CLNOnChainUtxosComponent implements OnInit, AfterViewInit, OnDestro
this.displayedColumns.unshift('status'); this.displayedColumns.unshift('status');
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(utxos).pipe(takeUntil(this.unSubs[1])). this.store.select(utxos).pipe(takeUntil(this.unSubs[1])).

@ -25,13 +25,15 @@
</span> </span>
</div> </div>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center"> <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input #outputIdx="ngModel" autoFocus matInput placeholder="Output Index" type="number" tabindex="1" required name="outputIdx" [step]="1" [min]="0" [(ngModel)]="outputIndex"> <mat-label>Output Index</mat-label>
<input #outputIdx="ngModel" autoFocus matInput type="number" tabindex="1" required name="outputIdx" [step]="1" [min]="0" [(ngModel)]="outputIndex">
<mat-error *ngIf="outputIdx.errors?.required">Output Index required.</mat-error> <mat-error *ngIf="outputIdx.errors?.required">Output Index required.</mat-error>
<mat-error *ngIf="outputIdx.errors?.pendingChannelOutputIndex">Invalid index value.</mat-error> <mat-error *ngIf="outputIdx.errors?.pendingChannelOutputIndex">Invalid index value.</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input #fee="ngModel" matInput placeholder="Fees (Sats/vByte)" <mat-label>Fees (Sats/vByte)</mat-label>
<input #fee="ngModel" matInput
type="number" name="fees" required tabindex="4" [step]="1" [min]="0" [(ngModel)]="fees"> type="number" name="fees" required tabindex="4" [step]="1" [min]="0" [(ngModel)]="fees">
<mat-error *ngIf="!fees">Fees is required.</mat-error> <mat-error *ngIf="!fees">Fees is required.</mat-error>
</mat-form-field> </mat-form-field>

@ -19,21 +19,21 @@
<span class="foreground-secondary-text">{{channel.alias}}</span> <span class="foreground-secondary-text">{{channel.alias}}</span>
</div> </div>
</div> </div>
<mat-divider class="my-1" [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="row"> <div fxLayout="row">
<div fxFlex="100"> <div fxFlex="100">
<h4 fxLayoutAlign="start" class="font-bold-500">Channel ID</h4> <h4 fxLayoutAlign="start" class="font-bold-500">Channel ID</h4>
<span class="foreground-secondary-text">{{channel.channel_id}}</span> <span class="foreground-secondary-text">{{channel.channel_id}}</span>
</div> </div>
</div> </div>
<mat-divider class="my-1" [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="row"> <div fxLayout="row">
<div fxFlex="100"> <div fxFlex="100">
<h4 fxLayoutAlign="start" class="font-bold-500">Peer Public Key</h4> <h4 fxLayoutAlign="start" class="font-bold-500">Peer Public Key</h4>
<span class="foreground-secondary-text">{{channel.id}}</span> <span class="foreground-secondary-text">{{channel.id}}</span>
</div> </div>
</div> </div>
<mat-divider class="my-1" [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="row"> <div fxLayout="row">
<div fxFlex="25"> <div fxFlex="25">
<h4 fxLayoutAlign="start" class="font-bold-500">mSatoshi to Us</h4> <h4 fxLayoutAlign="start" class="font-bold-500">mSatoshi to Us</h4>
@ -52,7 +52,7 @@
<span class="overflow-wrap foreground-secondary-text">{{channel.state}}</span> <span class="overflow-wrap foreground-secondary-text">{{channel.state}}</span>
</div> </div>
</div> </div>
<mat-divider class="my-1" [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div fxLayout="row"> <div fxLayout="row">
<div fxFlex="25"> <div fxFlex="25">
<h4 fxLayoutAlign="start" class="font-bold-500">Our Reserve (Sats)</h4> <h4 fxLayoutAlign="start" class="font-bold-500">Our Reserve (Sats)</h4>
@ -71,7 +71,7 @@
<span class="overflow-wrap foreground-secondary-text">{{channel.private ? 'Yes' : 'No'}}</span> <span class="overflow-wrap foreground-secondary-text">{{channel.private ? 'Yes' : 'No'}}</span>
</div> </div>
</div> </div>
<mat-divider class="my-1" [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
<div *ngIf="showAdvanced"> <div *ngIf="showAdvanced">
<div fxLayout="row"> <div fxLayout="row">
<div fxFlex="100"> <div fxFlex="100">
@ -79,7 +79,7 @@
<span class="foreground-secondary-text">{{channel.funding_txid}}</span> <span class="foreground-secondary-text">{{channel.funding_txid}}</span>
</div> </div>
</div> </div>
<mat-divider class="my-1" [inset]="true"></mat-divider> <mat-divider class="my-1"></mat-divider>
</div> </div>
<div fxLayout="row" fxLayoutAlign="end center" fxFlex="100" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}"> <div fxLayout="row" fxLayoutAlign="end center" fxFlex="100" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}">
<button mat-button color="primary" type="reset" tabindex="1" class="mr-1" (click)="onShowAdvanced()"> <button mat-button color="primary" type="reset" tabindex="1" class="mr-1" (click)="onShowAdvanced()">

@ -2,13 +2,15 @@
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -25,7 +27,7 @@
<ng-container matColumnDef="short_channel_id"> <ng-container matColumnDef="short_channel_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Short Channel ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Short Channel ID</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '4rem' : colWidth}">
<span class="ellipsis-child">{{channel?.short_channel_id}}</span> <span class="ellipsis-child">{{channel?.short_channel_id}}</span>
</div> </div>
</td> </td>
@ -33,7 +35,7 @@
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '4rem' : colWidth}">
<span class="ellipsis-child">{{channel?.alias}}</span> <span class="ellipsis-child">{{channel?.alias}}</span>
</div> </div>
</td> </td>
@ -41,7 +43,7 @@
<ng-container matColumnDef="id"> <ng-container matColumnDef="id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '4rem' : colWidth}">
<span class="ellipsis-child">{{channel?.id}}</span> <span class="ellipsis-child">{{channel?.id}}</span>
</div> </div>
</td> </td>
@ -49,7 +51,7 @@
<ng-container matColumnDef="channel_id"> <ng-container matColumnDef="channel_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '4rem' : colWidth}">
<span class="ellipsis-child">{{channel?.channel_id}}</span> <span class="ellipsis-child">{{channel?.channel_id}}</span>
</div> </div>
</td> </td>
@ -57,7 +59,7 @@
<ng-container matColumnDef="funding_txid"> <ng-container matColumnDef="funding_txid">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Funding Transaction ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Funding Transaction ID</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '4rem' : colWidth}">
<span class="ellipsis-child">{{channel?.funding_txid}}</span> <span class="ellipsis-child">{{channel?.funding_txid}}</span>
</div> </div>
</td> </td>

@ -1,6 +1,7 @@
.mat-column-private { .mat-column-private {
max-width: 1.2rem; max-width: 2.1rem;
width:1.2rem; width:2.1rem;
text-overflow: unset;
} }
.mat-column-balancedness { .mat-column-balancedness {

@ -91,7 +91,7 @@ export class CLNChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
this.displayedColumns.unshift('private'); this.displayedColumns.unshift('private');
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(channels).pipe(takeUntil(this.unSubs[2])). this.store.select(channels).pipe(takeUntil(this.unSubs[2])).

@ -2,13 +2,15 @@
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -25,7 +27,7 @@
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{channel?.alias}}</span> <span class="ellipsis-child">{{channel?.alias}}</span>
</div> </div>
</td> </td>
@ -33,7 +35,7 @@
<ng-container matColumnDef="id"> <ng-container matColumnDef="id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{channel?.id}}</span> <span class="ellipsis-child">{{channel?.id}}</span>
</div> </div>
</td> </td>
@ -41,7 +43,7 @@
<ng-container matColumnDef="channel_id"> <ng-container matColumnDef="channel_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{channel?.channel_id}}</span> <span class="ellipsis-child">{{channel?.channel_id}}</span>
</div> </div>
</td> </td>
@ -49,7 +51,7 @@
<ng-container matColumnDef="funding_txid"> <ng-container matColumnDef="funding_txid">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Funding Transaction ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Funding Transaction ID</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{channel?.funding_txid}}</span> <span class="ellipsis-child">{{channel?.funding_txid}}</span>
</div> </div>
</td> </td>
@ -60,7 +62,7 @@
</ng-container> </ng-container>
<ng-container matColumnDef="state"> <ng-container matColumnDef="state">
<th *matHeaderCellDef mat-header-cell mat-sort-header>State</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>State</th>
<td *matCellDef="let channel" mat-cell [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">{{CLNChannelPendingState[channel?.state]}}</td> <td *matCellDef="let channel" mat-cell [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">{{CLNChannelPendingState[channel?.state]}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="our_channel_reserve_satoshis"> <ng-container matColumnDef="our_channel_reserve_satoshis">
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Local Reserve (Sats)</th> <th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Local Reserve (Sats)</th>

@ -1,4 +1,5 @@
.mat-column-private { .mat-column-private {
max-width: 1.2rem; max-width: 2.1rem;
width:1.2rem; width:2.1rem;
text-overflow: unset;
} }

@ -93,7 +93,7 @@ export class CLNChannelPendingTableComponent implements OnInit, AfterViewInit, O
this.displayedColumns.unshift('private'); this.displayedColumns.unshift('private');
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(channels).pipe(takeUntil(this.unSubs[2])). this.store.select(channels).pipe(takeUntil(this.unSubs[2])).

@ -2,7 +2,7 @@
<div fxLayout="row"> <div fxLayout="row">
<button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button> <button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button>
</div> </div>
<div fxLayout="column" fxFlex="100" class="my-2 bordered-box"> <div fxLayout="column" fxFlex="100" class="bordered-box">
<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)"> <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>

@ -10,7 +10,8 @@
<form #form="ngForm" fxLayout="column" (submit)="onOpenChannel()" (reset)="resetData()"> <form #form="ngForm" fxLayout="column" (submit)="onOpenChannel()" (reset)="resetData()">
<div fxLayout="column"> <div fxLayout="column">
<mat-form-field *ngIf="!peer && peers && peers.length > 0" fxFlex="100"> <mat-form-field *ngIf="!peer && peers && peers.length > 0" fxFlex="100">
<input type="text" placeholder="Peer Alias" aria-label="Peers" matInput tabindex="1" required [formControl]="selectedPeer" [matAutocomplete]="auto" (change)="onSelectedPeerChanged()"> <mat-label>Peer Alias</mat-label>
<input type="text" aria-label="Peers" matInput tabindex="1" required [formControl]="selectedPeer" [matAutocomplete]="auto" (change)="onSelectedPeerChanged()">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onSelectedPeerChanged()"> <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onSelectedPeerChanged()">
<mat-option *ngFor="let peer of filteredPeers | async" [value]="peer">{{peer.alias ? peer.alias : peer.id ? peer.id : ''}}</mat-option> <mat-option *ngFor="let peer of filteredPeers | async" [value]="peer">{{peer.alias ? peer.alias : peer.id ? peer.id : ''}}</mat-option>
</mat-autocomplete> </mat-autocomplete>
@ -21,8 +22,9 @@
<ng-container *ngTemplateOutlet="peerDetailsExpansionBlock"></ng-container> <ng-container *ngTemplateOutlet="peerDetailsExpansionBlock"></ng-container>
<div fxLayout="column"> <div fxLayout="column">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center"> <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
<mat-form-field fxFlex="70" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="70" fxLayoutAlign="start end">
<input #amount="ngModel" matInput placeholder="Amount" type="number" tabindex="1" required name="amount" [step]="1000" [min]="1" [max]="totalBalance" [disabled]="flgUseAllBalance" [(ngModel)]="fundingAmount"> <mat-label>Amount</mat-label>
<input #amount="ngModel" matInput type="number" tabindex="1" required name="amount" [step]="1000" [min]="1" [max]="totalBalance" [disabled]="flgUseAllBalance" [(ngModel)]="fundingAmount">
<mat-hint>Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0) | number}}{{flgUseAllBalance ? '. Amount replaced by UTXO balance' : ''}}</mat-hint> <mat-hint>Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0) | number}}{{flgUseAllBalance ? '. Amount replaced by UTXO balance' : ''}}</mat-hint>
<span matSuffix> Sats </span> <span matSuffix> Sats </span>
<mat-error *ngIf="amount.errors?.required || !fundingAmount">Amount is required.</mat-error> <mat-error *ngIf="amount.errors?.required || !fundingAmount">Amount is required.</mat-error>
@ -40,35 +42,39 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap"> <div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap">
<div fxFlex="54" fxLayoutAlign="space-between end"> <div fxFlex="54" fxLayout="row" fxLayoutAlign="space-between center">
<mat-form-field fxLayoutAlign="start center" [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'"> <mat-form-field fxLayout="column" fxLayoutAlign="start center" [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'">
<mat-select tabindex="4" placeholder="Fee Rate" [disabled]="flgMinConf" [(value)]="selFeeRate" (selectionChange)="customFeeRate=null"> <mat-label>Fee Rate</mat-label>
<mat-select tabindex="4" [disabled]="flgMinConf" [(value)]="selFeeRate" (selectionChange)="customFeeRate=null">
<mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId"> <mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
{{feeRateType.feeRateType}} {{feeRateType.feeRateType}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="selFeeRate === 'customperkb' && !flgMinConf" fxFlex="48" fxLayoutAlign="end center"> <mat-form-field *ngIf="selFeeRate === 'customperkb' && !flgMinConf" fxLayout="column" fxFlex="48" fxLayoutAlign="end center">
<input #custFeeRate="ngModel" matInput placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0" [required]="selFeeRate === 'customperkb' && !flgMinConf" [(ngModel)]="customFeeRate"> <mat-label>Fee Rate (Sats/vByte)</mat-label>
<input #custFeeRate="ngModel" matInput type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0" [required]="selFeeRate === 'customperkb' && !flgMinConf" [(ngModel)]="customFeeRate">
<mat-error *ngIf="selFeeRate === 'customperkb' && !flgMinConf && !customFeeRate">Fee Rate is required.</mat-error> <mat-error *ngIf="selFeeRate === 'customperkb' && !flgMinConf && !customFeeRate">Fee Rate is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxFlex="42" fxLayout="row" fxLayoutAlign="start center"> <div fxFlex="42" fxLayout="row" fxLayoutAlign="start center">
<mat-checkbox fxFlex="2" tabindex="5" color="primary" name="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null"></mat-checkbox> <mat-checkbox fxFlex="7" tabindex="5" color="primary" name="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null"></mat-checkbox>
<mat-form-field fxFlex="98"> <mat-form-field fxLayout="column" fxFlex="93">
<input #blocks="ngModel" matInput placeholder="Min Confirmation Blocks" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="flgMinConf" [disabled]="!flgMinConf" [(ngModel)]="minConfValue"> <mat-label>Min Confirmation Blocks</mat-label>
<mat-error *ngIf="flgMinConf && !minConfValue">Min Confirmation Blocks is required.</mat-error> <input #blocks="ngModel" matInput type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="flgMinConf" [disabled]="!flgMinConf" [(ngModel)]="minConfValue">
<mat-error *ngIf="flgMinConf && !minConfValue">Min Blocks is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<div *ngIf="isCompatibleVersion" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap"> <div *ngIf="isCompatibleVersion" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap">
<mat-form-field fxFlex="54" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="54" fxLayoutAlign="start end">
<mat-select tabindex="6" placeholder="Coin Selection" multiple [(value)]="selUTXOs" (selectionChange)="onUTXOSelectionChange($event)"> <mat-label>Coin Selection</mat-label>
<mat-select tabindex="6" multiple [(value)]="selUTXOs" (selectionChange)="onUTXOSelectionChange($event)">
<mat-select-trigger>{{totalSelectedUTXOAmount | number}} Sats ({{selUTXOs.length > 1 ? selUTXOs.length + ' UTXOs' : '1 UTXO'}})</mat-select-trigger> <mat-select-trigger>{{totalSelectedUTXOAmount | number}} Sats ({{selUTXOs.length > 1 ? selUTXOs.length + ' UTXOs' : '1 UTXO'}})</mat-select-trigger>
<mat-option *ngFor="let utxo of utxos" [value]="utxo">{{utxo.value | number}} Sats</mat-option> <mat-option *ngFor="let utxo of utxos" [value]="utxo">{{utxo.value | number}} Sats</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div fxFlex="42" fxLayout="row" fxLayoutAlign="start center"> <div fxFlex="41" fxLayout="row" fxLayoutAlign="start center">
<mat-slide-toggle tabindex="7" color="primary" name="flgUseAllBalance" [disabled]="selUTXOs.length < 1" [(ngModel)]="flgUseAllBalance" (change)="onUTXOAllBalanceChange()"> <mat-slide-toggle tabindex="7" color="primary" name="flgUseAllBalance" [disabled]="selUTXOs.length < 1" [(ngModel)]="flgUseAllBalance" (change)="onUTXOAllBalanceChange()">
Use selected UTXOs balance Use selected UTXOs balance
</mat-slide-toggle> </mat-slide-toggle>

@ -1,3 +1,5 @@
@import "../../../../shared/theme/styles/constants.scss";
.open-inputs-box { .open-inputs-box {
padding: 1.2rem 2.4rem 0.8rem 2.4rem !important; padding: 1.2rem 2.4rem 0.8rem 2.4rem !important;
} }

@ -12,8 +12,9 @@
<mat-step [stepControl]="peerFormGroup" [editable]="flgEditable"> <mat-step [stepControl]="peerFormGroup" [editable]="flgEditable">
<form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1" [formGroup]="peerFormGroup"> <form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1" [formGroup]="peerFormGroup">
<ng-template matStepLabel>{{peerFormLabel}}</ng-template> <ng-template matStepLabel>{{peerFormLabel}}</ng-template>
<mat-form-field fxFlex="100"> <mat-form-field fxLayout="column" fxFlex="100">
<input autoFocus matInput placeholder="Lightning Address (pubkey OR pubkey@ip:port)" formControlName="peerAddress" tabindex="1" required> <mat-label>Lightning Address (pubkey OR pubkey@ip:port)</mat-label>
<input autoFocus matInput formControlName="peerAddress" tabindex="1" required>
<mat-error *ngIf="peerFormGroup.controls.peerAddress.errors?.required">Address is required.</mat-error> <mat-error *ngIf="peerFormGroup.controls.peerAddress.errors?.required">Address is required.</mat-error>
</mat-form-field> </mat-form-field>
<div *ngIf="peerConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1"> <div *ngIf="peerConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
@ -30,36 +31,40 @@
<ng-template matStepLabel disabled="true">{{channelFormLabel}}</ng-template> <ng-template matStepLabel disabled="true">{{channelFormLabel}}</ng-template>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign.gt-sm="space-between center"> <div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign.gt-sm="space-between center">
<mat-form-field fxFlex="60" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="60" fxLayoutAlign="start end">
<input matInput autoFocus formControlName="fundingAmount" placeholder="Amount" type="number" tabindex="1" required [step]="1000"> <mat-label>Amount</mat-label>
<input matInput autoFocus formControlName="fundingAmount" type="number" tabindex="1" required [step]="1000">
<mat-hint>Remaining Bal: {{totalBalance - ((channelFormGroup.controls.fundingAmount.value) ? channelFormGroup.controls.fundingAmount.value : 0)}}</mat-hint> <mat-hint>Remaining Bal: {{totalBalance - ((channelFormGroup.controls.fundingAmount.value) ? channelFormGroup.controls.fundingAmount.value : 0)}}</mat-hint>
<span matSuffix> Sats </span> <span matSuffix> Sats </span>
<mat-error *ngIf="channelFormGroup.controls.fundingAmount.errors?.required">Amount is required.</mat-error> <mat-error *ngIf="channelFormGroup.controls.fundingAmount.errors?.required">Amount is required.</mat-error>
<mat-error *ngIf="channelFormGroup.controls.fundingAmount.errors?.min">Amount must be a positive number.</mat-error> <mat-error *ngIf="channelFormGroup.controls.fundingAmount.errors?.min">Amount must be a positive number.</mat-error>
<mat-error *ngIf="channelFormGroup.controls.fundingAmount.errors?.max">Amount must be less than or equal to {{totalBalance}}.</mat-error> <mat-error *ngIf="channelFormGroup.controls.fundingAmount.errors?.max">Amount must be less than or equal to {{totalBalance}}.</mat-error>
</mat-form-field> </mat-form-field>
<div fxFlex="35" fxLayoutAlign="start center"> <div fxFlex="35" fxLayoutAlign="start center" class="mb-2">
<mat-slide-toggle tabindex="2" color="primary" formControlName="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle> <mat-slide-toggle tabindex="2" color="primary" formControlName="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle>
</div> </div>
</div> </div>
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign.gt-sm="space-between center"> <div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign.gt-sm="space-between center">
<div fxFlex="60" fxLayoutAlign="space-between end"> <div fxFlex="60" fxLayoutAlign="space-between end">
<mat-form-field fxLayoutAlign="start center" [fxFlex]="channelFormGroup.controls.selFeeRate.value === 'customperkb' && !channelFormGroup.controls.flgMinConf.value ? '48' : '100'"> <mat-form-field fxLayout="column" fxLayoutAlign="start center" [fxFlex]="channelFormGroup.controls.selFeeRate.value === 'customperkb' && !channelFormGroup.controls.flgMinConf.value ? '48' : '100'">
<mat-select tabindex="4" placeholder="Fee Rate" formControlName="selFeeRate"> <mat-label>Fee Rate</mat-label>
<mat-select tabindex="4" formControlName="selFeeRate">
<mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId"> <mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
{{feeRateType.feeRateType}} {{feeRateType.feeRateType}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="channelFormGroup.controls.selFeeRate.value === 'customperkb' && !channelFormGroup.controls.flgMinConf.value" fxFlex="48" fxLayoutAlign="end center"> <mat-form-field *ngIf="channelFormGroup.controls.selFeeRate.value === 'customperkb' && !channelFormGroup.controls.flgMinConf.value" fxFlex="48" fxLayoutAlign="end center">
<input matInput formControlName="customFeeRate" placeholder="Fee Rate (Sats/vByte)" type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0"> <mat-label>Fee Rate (Sats/vByte)</mat-label>
<input matInput formControlName="customFeeRate" type="number" name="custFeeRate" tabindex="4" [step]="0.1" [min]="0">
<mat-error *ngIf="channelFormGroup.controls.selFeeRate.value === 'customperkb' && !channelFormGroup.controls.flgMinConf.value && !channelFormGroup.controls.customFeeRate.value">Fee Rate is required.</mat-error> <mat-error *ngIf="channelFormGroup.controls.selFeeRate.value === 'customperkb' && !channelFormGroup.controls.flgMinConf.value && !channelFormGroup.controls.customFeeRate.value">Fee Rate is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxFlex="35" fxLayout="row" fxLayoutAlign="start center"> <div fxFlex="35" fxLayout="row" fxLayoutAlign="start center">
<mat-checkbox fxFlex="2" tabindex="5" color="primary" formControlName="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}"></mat-checkbox> <mat-checkbox fxFlex="7" tabindex="5" color="primary" formControlName="flgMinConf" fxLayoutAlign="stretch start" class="mb-2" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}"></mat-checkbox>
<mat-form-field fxFlex="98"> <mat-form-field fxLayout="column" fxFlex="93">
<input matInput formControlName="minConfValue" placeholder="Min Confirmation Blocks" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="channelFormGroup.controls.flgMinConf.value"> <mat-label>Min Confirmation Blocks</mat-label>
<input matInput formControlName="minConfValue" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="channelFormGroup.controls.flgMinConf.value">
<mat-error *ngIf="channelFormGroup.controls.flgMinConf.value && !channelFormGroup.controls.minConfValue.value">Min Confirmation Blocks is required.</mat-error> <mat-error *ngIf="channelFormGroup.controls.flgMinConf.value && !channelFormGroup.controls.minConfValue.value">Min Confirmation Blocks is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>

@ -9,19 +9,21 @@
<span class="page-title">Connected Peers</span> <span class="page-title">Connected Peers</span>
</div> </div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]> <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar> <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table #table mat-table matSort [dataSource]="peers" [ngClass]="{'error-border': errorMessage !== ''}"> <table #table mat-table matSort class="overflow-x-hidden overflow-y-hidden" [dataSource]="peers" [ngClass]="{'error-border': errorMessage !== ''}">
<ng-container matColumnDef="connected"> <ng-container matColumnDef="connected">
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Connected"></th> <th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Connected"></th>
<td *matCellDef="let peer" mat-cell> <td *matCellDef="let peer" mat-cell>
@ -32,7 +34,7 @@
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<td *matCellDef="let peer" mat-cell> <td *matCellDef="let peer" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{peer?.alias}}</span> <span class="ellipsis-child">{{peer?.alias}}</span>
</div> </div>
</td> </td>
@ -40,7 +42,7 @@
<ng-container matColumnDef="id"> <ng-container matColumnDef="id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
<td *matCellDef="let peer" mat-cell> <td *matCellDef="let peer" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{peer?.id}}</span> <span class="ellipsis-child">{{peer?.id}}</span>
</div> </div>
</td> </td>
@ -48,7 +50,7 @@
<ng-container matColumnDef="netaddr"> <ng-container matColumnDef="netaddr">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Network Address</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Network Address</th>
<td *matCellDef="let peer" mat-cell> <td *matCellDef="let peer" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span *ngFor="let addr of peer?.netaddr; last as isLast" class="ellipsis-child">{{addr}}<span *ngIf="!isLast">,<br></span></span> <span *ngFor="let addr of peer?.netaddr; last as isLast" class="ellipsis-child">{{addr}}<span *ngIf="!isLast">,<br></span></span>
</div> </div>
</td> </td>

@ -1,4 +1,5 @@
.mat-column-connected { .mat-column-connected {
max-width: 1.2rem; max-width: 2.1rem;
width:1.2rem; width:2.1rem;
text-overflow: unset;
} }

@ -86,7 +86,7 @@ export class CLNPeersComponent implements OnInit, AfterViewInit, OnDestroy {
this.displayedColumns.unshift('connected'); this.displayedColumns.unshift('connected');
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(peers).pipe(takeUntil(this.unSubs[2])). this.store.select(peers).pipe(takeUntil(this.unSubs[2])).

@ -9,7 +9,6 @@
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

@ -1,7 +1,7 @@
<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x-large"> <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x-large">
<rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)"></rtl-horizontal-scroller> <rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)"></rtl-horizontal-scroller>
<div fxLayout="column" fxLayoutAlign="center center" class="padding-gap-x"> <div fxLayout="column" fxLayoutAlign="center center" class="padding-gap-x">
<mat-radio-group class="my-1" color="primary" name="selReportBy" fxFlex="100" fxLayoutAlign="start start" [(ngModel)]="selReportBy" (change)="onSelReportByChange()"> <mat-radio-group class="my-1" color="primary" name="selReportBy" fxFlex="100" fxLayoutAlign="start center" [(ngModel)]="selReportBy" (change)="onSelReportByChange()">
<span class="mr-2">Report By: </span> <span class="mr-2">Report By: </span>
<mat-radio-button class="mr-2" tabindex="1" value="{{reportBy.FEES}}">Fees</mat-radio-button> <mat-radio-button class="mr-2" tabindex="1" value="{{reportBy.FEES}}">Fees</mat-radio-button>
<mat-radio-button tabindex="2" value="{{reportBy.EVENTS}}">Events</mat-radio-button> <mat-radio-button tabindex="2" value="{{reportBy.EVENTS}}">Events</mat-radio-button>

@ -62,7 +62,7 @@ export class CLNTransactionsReportComponent implements OnInit, OnDestroy {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection)); this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
} }
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(payments).pipe(takeUntil(this.unSubs[1]), this.store.select(payments).pipe(takeUntil(this.unSubs[1]),

@ -8,13 +8,15 @@
<div fxFlex="100"> <div fxFlex="100">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -37,7 +39,7 @@
<ng-container matColumnDef="in_channel_alias"> <ng-container matColumnDef="in_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th>
<td *matCellDef="let fhEvent" mat-cell> <td *matCellDef="let fhEvent" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span> <span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span>
</span> </span>
</td> </td>
@ -49,7 +51,7 @@
<ng-container matColumnDef="out_channel_alias"> <ng-container matColumnDef="out_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th>
<td *matCellDef="let fhEvent" mat-cell> <td *matCellDef="let fhEvent" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span> <span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span>
</span> </span>
</td> </td>

@ -77,7 +77,7 @@ export class CLNFailedTransactionsComponent implements OnInit, AfterViewInit, On
} }
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(failedForwardingHistory).pipe(takeUntil(this.unSubs[1])). this.store.select(failedForwardingHistory).pipe(takeUntil(this.unSubs[1])).

@ -3,13 +3,15 @@
<div *ngIf="errorMessage === ''" fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container"> <div *ngIf="errorMessage === ''" fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -31,7 +33,7 @@
<ng-container matColumnDef="in_channel_alias"> <ng-container matColumnDef="in_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th>
<td *matCellDef="let fhEvent" mat-cell> <td *matCellDef="let fhEvent" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span> <span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span>
</div> </div>
</td> </td>
@ -43,7 +45,7 @@
<ng-container matColumnDef="out_channel_alias"> <ng-container matColumnDef="out_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th>
<td *matCellDef="let fhEvent" mat-cell> <td *matCellDef="let fhEvent" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span> <span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span>
</div> </div>
</td> </td>
@ -51,7 +53,7 @@
<ng-container matColumnDef="payment_hash"> <ng-container matColumnDef="payment_hash">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th>
<td *matCellDef="let fhEvent" mat-cell> <td *matCellDef="let fhEvent" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.payment_hash}}</span> <span class="ellipsis-child">{{fhEvent?.payment_hash}}</span>
</div> </div>
</td> </td>

@ -77,7 +77,7 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
} }
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.pipe(take(1)).subscribe((state) => { this.store.pipe(take(1)).subscribe((state) => {

@ -8,13 +8,15 @@
<div fxFlex="100"> <div fxFlex="100">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -33,7 +35,7 @@
<ng-container matColumnDef="in_channel_alias"> <ng-container matColumnDef="in_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th>
<td *matCellDef="let fhEvent" mat-cell> <td *matCellDef="let fhEvent" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span> <span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span>
</span> </span>
</td> </td>
@ -45,7 +47,7 @@
<ng-container matColumnDef="out_channel_alias"> <ng-container matColumnDef="out_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th>
<td *matCellDef="let fhEvent" mat-cell> <td *matCellDef="let fhEvent" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span> <span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span>
</span> </span>
</td> </td>

@ -78,7 +78,7 @@ export class CLNLocalFailedTransactionsComponent implements OnInit, AfterViewIni
} }
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(localFailedForwardingHistory).pipe(takeUntil(this.unSubs[1])). this.store.select(localFailedForwardingHistory).pipe(takeUntil(this.unSubs[1])).

@ -5,13 +5,15 @@
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container w-100" [ngClass]="{'mt-2': screenSize === screenSizeEnum.XS, 'mt-1': screenSize === screenSizeEnum.SM}"> <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container w-100" [ngClass]="{'mt-2': screenSize === screenSizeEnum.XS, 'mt-1': screenSize === screenSizeEnum.SM}">
<div fxFlex="70">Incoming</div> <div fxFlex="70">Incoming</div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<!-- <mat-form-field fxFlex="49"> <!-- <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterByIn" (selectionChange)="selFilterIn=''; applyIncomingFilter()" name="filterByIn"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" [(ngModel)]="selFilterByIn" (selectionChange)="selFilterIn=''; applyIncomingFilter()" name="filterByIn">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput [(ngModel)]="selFilterIn" (input)="applyIncomingFilter()" (keyup)="applyIncomingFilter()" name="filterin" placeholder="Filter"> <mat-label>Filter</mat-label>
<input matInput [(ngModel)]="selFilterIn" (input)="applyIncomingFilter()" (keyup)="applyIncomingFilter()" name="filterin">
</mat-form-field> --> </mat-form-field> -->
</div> </div>
</div> </div>
@ -21,7 +23,7 @@
<ng-container matColumnDef="channel_id"> <ng-container matColumnDef="channel_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<td *matCellDef="let rPeer" mat-cell> <td *matCellDef="let rPeer" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{rPeer.channel_id}}</span> <span class="ellipsis-child">{{rPeer.channel_id}}</span>
</div> </div>
</td> </td>
@ -29,7 +31,7 @@
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Peer Alias</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Peer Alias</th>
<td *matCellDef="let rPeer" mat-cell> <td *matCellDef="let rPeer" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{rPeer.alias}}</span> <span class="ellipsis-child">{{rPeer.alias}}</span>
</div> </div>
</td> </td>
@ -65,13 +67,15 @@
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container w-100" [ngClass]="{'mt-2': screenSize !== screenSizeEnum.LG}"> <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container w-100" [ngClass]="{'mt-2': screenSize !== screenSizeEnum.LG}">
<div fxFlex="70">Outgoing</div> <div fxFlex="70">Outgoing</div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<!-- <mat-form-field fxFlex="49"> <!-- <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterByOut" (selectionChange)="selFilterOut=''; applyOutgoingFilter()" name="filterByOut"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" [(ngModel)]="selFilterByOut" (selectionChange)="selFilterOut=''; applyOutgoingFilter()" name="filterByOut">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput [(ngModel)]="selFilterOut" (input)="applyOutgoingFilter()" (keyup)="applyOutgoingFilter()" name="filterout" placeholder="Filter"> <mat-label>Filter</mat-label>
<input matInput [(ngModel)]="selFilterOut" (input)="applyOutgoingFilter()" (keyup)="applyOutgoingFilter()" name="filterout">
</mat-form-field> --> </mat-form-field> -->
</div> </div>
</div> </div>
@ -81,7 +85,7 @@
<ng-container matColumnDef="channel_id"> <ng-container matColumnDef="channel_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<td *matCellDef="let rPeer" mat-cell> <td *matCellDef="let rPeer" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{rPeer.channel_id}}</span> <span class="ellipsis-child">{{rPeer.channel_id}}</span>
</div> </div>
</td> </td>
@ -89,7 +93,7 @@
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Peer Alias</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Peer Alias</th>
<td *matCellDef="let rPeer" mat-cell> <td *matCellDef="let rPeer" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{rPeer.alias}}</span> <span class="ellipsis-child">{{rPeer.alias}}</span>
</div> </div>
</td> </td>

@ -79,7 +79,7 @@ export class CLNRoutingPeersComponent implements OnInit, OnChanges, AfterViewIni
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection)); this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
} }
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / (this.displayedColumns.length * 2)) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / (this.displayedColumns.length * 2)) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[1])). this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[1])).

@ -10,8 +10,7 @@
<nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" fxFlex="100" [tabPanel]="tabPanel"> <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" fxFlex="100" [tabPanel]="tabPanel">
<div *ngFor="let link of links" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
</div> </div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap-x-large"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap-x-large">
<router-outlet></router-outlet> <router-outlet></router-outlet>

@ -9,7 +9,6 @@
<div *ngFor="let link of links" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper mb-2"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper mb-2">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -1,7 +1,8 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
<form #form="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch"> <form #form="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch">
<mat-form-field fxLayout="row" fxFlex="100" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end">
<textarea autoFocus matInput rows="1" placeholder="Message to sign" required tabindex="1" name="message" [(ngModel)]="message" (keyup)="onMessageChange()"></textarea> <mat-label>Message to sign</mat-label>
<textarea autoFocus matInput rows="1" required tabindex="1" name="message" [(ngModel)]="message" (keyup)="onMessageChange()"></textarea>
<mat-error *ngIf="!message">Message is required.</mat-error> <mat-error *ngIf="!message">Message is required.</mat-error>
</mat-form-field> </mat-form-field>
<div fxLayout="row" class="my-1"> <div fxLayout="row" class="my-1">
@ -10,7 +11,7 @@
</div> </div>
<mat-divider class="my-2"></mat-divider> <mat-divider class="my-2"></mat-divider>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center"><p>Generated Signature</p></div> <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center"><p>Generated Signature</p></div>
<div fxLayout="row" fxLayoutAlign="start center" class="bordered-box read-only padding-gap-large">{{signature}}</div> <div fxLayout="row" fxLayoutAlign="start center" class="signature-box bordered-box read-only">{{signature}}</div>
<div fxLayout="row" class="mt-2"> <div fxLayout="row" class="mt-2">
<button mat-stroked-button color="primary" tabindex="4" rtlClipboard type="button" [payload]="signature" (copied)="onCopyField($event)">Copy Signature</button> <button mat-stroked-button color="primary" tabindex="4" rtlClipboard type="button" [payload]="signature" (copied)="onCopyField($event)">Copy Signature</button>
</div> </div>

@ -0,0 +1,5 @@
@import "../../../shared/theme/styles/constants.scss";
.signature-box {
padding: $gap*2;
}

@ -1,11 +1,13 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
<form #form="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap"> <form #form="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
<mat-form-field fxFlex="100" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end">
<textarea autoFocus matInput rows="1" placeholder="Message to verify" required tabindex="1" name="message" [(ngModel)]="message" (keyup)="onChange()"></textarea> <mat-label>Message to verify</mat-label>
<textarea autoFocus matInput rows="1" required tabindex="1" name="message" [(ngModel)]="message" (keyup)="onChange()"></textarea>
<mat-error *ngIf="!message">Message is required.</mat-error> <mat-error *ngIf="!message">Message is required.</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="100" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end">
<input #sign="ngModel" matInput placeholder="Signature provided" name="signature" tabindex="2" required [(ngModel)]="signature" (keyup)="onChange()"> <mat-label>Signature provided</mat-label>
<input #sign="ngModel" matInput name="signature" tabindex="2" required [(ngModel)]="signature" (keyup)="onChange()">
<mat-error *ngIf="!signature">Signature is required.</mat-error> <mat-error *ngIf="!signature">Signature is required.</mat-error>
</mat-form-field> </mat-form-field>
<p *ngIf="showVerifyStatus && !verifyRes.verified" fxFlex="100" class="color-warn" fxLayoutAlign="start center"><mat-icon class="mr-1 icon-small">close</mat-icon>Verification failed, please double check message and signature</p> <p *ngIf="showVerifyStatus && !verifyRes.verified" fxFlex="100" class="color-warn" fxLayoutAlign="start center"><mat-icon class="mr-1 icon-small">close</mat-icon>Verification failed, please double check message and signature</p>
@ -14,7 +16,7 @@
<button mat-flat-button color="primary" tabindex="4" type="submit" (click)="onVerify()">Verify</button> <button mat-flat-button color="primary" tabindex="4" type="submit" (click)="onVerify()">Verify</button>
</div> </div>
<div *ngIf="showVerifyStatus && verifyRes.verified" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap"> <div *ngIf="showVerifyStatus && verifyRes.verified" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
<mat-divider class="my-2" [inset]="true"></mat-divider> <mat-divider class="my-2"></mat-divider>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center"> <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
<p *ngIf="verifyRes.verified">Pubkey Used</p> <p *ngIf="verifyRes.verified">Pubkey Used</p>
</div> </div>

@ -8,20 +8,23 @@
</mat-card-header> </mat-card-header>
<mat-card-content class="padding-gap-x-large"> <mat-card-content class="padding-gap-x-large">
<form #addInvoiceForm="ngForm" fxLayout="row wrap" fxLayoutAlign="start space-between" fxFlex="100"> <form #addInvoiceForm="ngForm" fxLayout="row wrap" fxLayoutAlign="start space-between" fxFlex="100">
<mat-form-field fxFlex="100" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end">
<input matInput autoFocus placeholder="Description" tabindex="2" name="description" [(ngModel)]="description"> <mat-label>Description</mat-label>
<input matInput autoFocus tabindex="2" name="description" [(ngModel)]="description">
</mat-form-field> </mat-form-field>
<div fxLayout="row" fxLayoutAlign="space-between start" fxFlex="100"> <div fxLayout="row" fxLayoutAlign="space-between start" fxFlex="100">
<mat-form-field fxFlex="40"> <mat-form-field fxLayout="column" fxFlex="40">
<input matInput placeholder="Amount" type="number" tabindex="3" name="invoiceValue" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()"> <mat-label>Amount</mat-label>
<input matInput type="number" tabindex="3" name="invoiceValue" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
<span matSuffix> Sats </span> <span matSuffix> Sats </span>
<mat-hint>{{invoiceValueHint}}</mat-hint> <mat-hint>{{invoiceValueHint}}</mat-hint>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="30"> <mat-form-field fxLayout="column" fxFlex="30">
<input matInput name="expiry" placeholder="Expiry" type="number" tabindex="4" [step]="selTimeUnit === timeUnitEnum.SECS ? 300 : selTimeUnit === timeUnitEnum.MINS ? 10 : selTimeUnit === timeUnitEnum.HOURS ? 2 : 1" [min]="1" [(ngModel)]="expiry"> <mat-label>Expiry</mat-label>
<input matInput name="expiry" type="number" tabindex="4" [step]="selTimeUnit === timeUnitEnum.SECS ? 300 : selTimeUnit === timeUnitEnum.MINS ? 10 : selTimeUnit === timeUnitEnum.HOURS ? 2 : 1" [min]="1" [(ngModel)]="expiry">
<span matSuffix>{{selTimeUnit | titlecase}} </span> <span matSuffix>{{selTimeUnit | titlecase}} </span>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="26"> <mat-form-field fxLayout="column" fxFlex="26">
<mat-select tabindex="5" name="timeUnit" [value]="selTimeUnit" (selectionChange)="onTimeUnitChange($event)"> <mat-select tabindex="5" name="timeUnit" [value]="selTimeUnit" (selectionChange)="onTimeUnitChange($event)">
<mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">{{timeUnit | titlecase}}</mat-option> <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">{{timeUnit | titlecase}}</mat-option>
</mat-select> </mat-select>

@ -22,7 +22,7 @@
<qr-code *ngIf="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== ''))" [value]="invoice?.bolt11 || invoice?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code> <qr-code *ngIf="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== ''))" [value]="invoice?.bolt11 || invoice?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
<span *ngIf="!invoice?.bolt11 && !invoice?.bolt12" class="font-size-120">QR Code Not Applicable</span> <span *ngIf="!invoice?.bolt11 && !invoice?.bolt12" class="font-size-120">QR Code Not Applicable</span>
</div> </div>
<mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" class="my-1" [inset]="true"></mat-divider> <mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" class="my-1"></mat-divider>
<div *ngIf="invoice?.warning_capacity" fxLayout="row"> <div *ngIf="invoice?.warning_capacity" fxLayout="row">
<div fxFlex="100" class="alert alert-warn"> <div fxFlex="100" class="alert alert-warn">
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon> <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>

@ -1,10 +1,12 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap">
<form *ngIf="calledFrom === 'home'" #addInvoiceForm="ngForm" fxLayout="row wrap" fxLayoutAlign="stretch start" fxFlex="100"> <form *ngIf="calledFrom === 'home'" #addInvoiceForm="ngForm" fxLayout="row wrap" fxLayoutAlign="stretch start" fxFlex="100">
<mat-form-field fxFlex="100" fxLayoutAlign="space-between stretch"> <mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
<input matInput placeholder="Description" tabindex="2" name="description" [(ngModel)]="description"> <mat-label>Description</mat-label>
<input matInput tabindex="2" name="description" [(ngModel)]="description">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="100" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end">
<input matInput placeholder="Amount" name="invoiceValue" type="number" tabindex="3" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()"> <mat-label>Amount</mat-label>
<input matInput name="invoiceValue" type="number" tabindex="3" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
<span matSuffix> Sats </span> <span matSuffix> Sats </span>
<mat-hint>{{invoiceValueHint}}</mat-hint> <mat-hint>{{invoiceValueHint}}</mat-hint>
</mat-form-field> </mat-form-field>
@ -24,13 +26,15 @@
<span class="page-title">Invoices History</span> <span class="page-title">Invoices History</span>
</div> </div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -62,7 +66,7 @@
<ng-container matColumnDef="description"> <ng-container matColumnDef="description">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Description</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Description</th>
<td *matCellDef="let invoice" mat-cell> <td *matCellDef="let invoice" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{invoice?.description}}</span> <span class="ellipsis-child">{{invoice?.description}}</span>
</div> </div>
</td> </td>
@ -70,7 +74,7 @@
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Label</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Label</th>
<td *matCellDef="let invoice" mat-cell> <td *matCellDef="let invoice" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{invoice?.label}}</span> <span class="ellipsis-child">{{invoice?.label}}</span>
</div> </div>
</td> </td>
@ -78,7 +82,7 @@
<ng-container matColumnDef="payment_hash"> <ng-container matColumnDef="payment_hash">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th>
<td *matCellDef="let invoice" mat-cell> <td *matCellDef="let invoice" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{invoice?.payment_hash}}</span> <span class="ellipsis-child">{{invoice?.payment_hash}}</span>
</div> </div>
</td> </td>
@ -86,7 +90,7 @@
<ng-container matColumnDef="bolt11"> <ng-container matColumnDef="bolt11">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
<td *matCellDef="let invoice" mat-cell> <td *matCellDef="let invoice" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{invoice?.bolt11}}</span> <span class="ellipsis-child">{{invoice?.bolt11}}</span>
</div> </div>
</td> </td>

@ -1,4 +1,5 @@
.mat-column-status { .mat-column-status {
max-width: 1.2rem; max-width: 2.1rem;
width:1.2rem; width:2.1rem;
text-overflow: unset;
} }

@ -97,7 +97,7 @@ export class CLNLightningInvoicesTableComponent implements OnInit, AfterViewInit
this.displayedColumns.unshift('status'); this.displayedColumns.unshift('status');
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(listInvoices).pipe(takeUntil(this.unSubs[3])). this.store.select(listInvoices).pipe(takeUntil(this.unSubs[3])).

@ -8,17 +8,20 @@
</mat-card-header> </mat-card-header>
<mat-card-content class="padding-gap-x-large"> <mat-card-content class="padding-gap-x-large">
<form #addOfferForm="ngForm" fxLayout="row wrap" fxLayoutAlign="start space-between" fxFlex="100"> <form #addOfferForm="ngForm" fxLayout="row wrap" fxLayoutAlign="start space-between" fxFlex="100">
<mat-form-field fxFlex="100" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end">
<input matInput autoFocus placeholder="Description" tabindex="1" name="description" [(ngModel)]="description"> <mat-label>Description</mat-label>
<input matInput autoFocus tabindex="1" name="description" [(ngModel)]="description">
</mat-form-field> </mat-form-field>
<div fxLayout="row" fxLayoutAlign="space-between start" fxFlex="100"> <div fxLayout="row" fxLayoutAlign="space-between start" fxFlex="100">
<mat-form-field fxFlex="40"> <mat-form-field fxLayout="column" fxFlex="40">
<input matInput placeholder="Amount" type="number" tabindex="2" name="offerValue" [step]="100" [min]="1" [(ngModel)]="offerValue" (keyup)="onOfferValueChange()"> <mat-label>Amount</mat-label>
<input matInput type="number" tabindex="2" name="offerValue" [step]="100" [min]="1" [(ngModel)]="offerValue" (keyup)="onOfferValueChange()">
<span matSuffix> Sats </span> <span matSuffix> Sats </span>
<mat-hint>{{offerValueHint}}</mat-hint> <mat-hint>{{offerValueHint}}</mat-hint>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="58" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="58" fxLayoutAlign="start end">
<input matInput placeholder="Vendor" tabindex="3" name="vendor" [(ngModel)]="vendor"> <mat-label>Vendor</mat-label>
<input matInput tabindex="3" name="vendor" [(ngModel)]="vendor">
</mat-form-field> </mat-form-field>
</div> </div>
<div *ngIf="offerError !== ''" fxFlex="100" class="alert alert-danger mt-1"> <div *ngIf="offerError !== ''" fxFlex="100" class="alert alert-danger mt-1">

@ -7,13 +7,15 @@
<span class="page-title">Offer Bookmarks</span> <span class="page-title">Offer Bookmarks</span>
</div> </div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -27,7 +29,7 @@
<ng-container matColumnDef="title"> <ng-container matColumnDef="title">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Title</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Title</th>
<td *matCellDef="let offersbookmark" mat-cell> <td *matCellDef="let offersbookmark" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{offersbookmark.title}}</span> <span class="ellipsis-child">{{offersbookmark.title}}</span>
</div> </div>
</td> </td>
@ -35,7 +37,7 @@
<ng-container matColumnDef="description"> <ng-container matColumnDef="description">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Description</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Description</th>
<td *matCellDef="let offersbookmark" mat-cell> <td *matCellDef="let offersbookmark" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{offersbookmark.description}}</span> <span class="ellipsis-child">{{offersbookmark.description}}</span>
</div> </div>
</td> </td>
@ -47,7 +49,7 @@
<ng-container matColumnDef="bolt12"> <ng-container matColumnDef="bolt12">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
<td *matCellDef="let offersbookmark" mat-cell> <td *matCellDef="let offersbookmark" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{offersbookmark.bolt12}}</span> <span class="ellipsis-child">{{offersbookmark.bolt12}}</span>
</div> </div>
</td> </td>

@ -75,7 +75,7 @@ export class CLNOfferBookmarksTableComponent implements OnInit, AfterViewInit, O
} }
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(offerBookmarks).pipe(takeUntil(this.unSubs[1])). this.store.select(offerBookmarks).pipe(takeUntil(this.unSubs[1])).

@ -9,13 +9,15 @@
<span class="page-title">Offers History</span> <span class="page-title">Offers History</span>
</div> </div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -32,7 +34,7 @@
<ng-container matColumnDef="offer_id"> <ng-container matColumnDef="offer_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Offer ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Offer ID</th>
<td *matCellDef="let offer" mat-cell> <td *matCellDef="let offer" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child"> <span class="ellipsis-child">
{{offer.offer_id}} {{offer.offer_id}}
</span> </span>
@ -52,7 +54,7 @@
<ng-container matColumnDef="bolt12"> <ng-container matColumnDef="bolt12">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
<td *matCellDef="let offer" mat-cell> <td *matCellDef="let offer" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child"> <span class="ellipsis-child">
{{offer.bolt12}} {{offer.bolt12}}
</span> </span>

@ -1,4 +1,5 @@
.mat-column-active { .mat-column-active {
max-width: 1.2rem; max-width: 2.1rem;
width:1.2rem; width:2.1rem;
text-overflow: unset;
} }

@ -99,7 +99,7 @@ export class CLNOffersTableComponent implements OnInit, AfterViewInit, OnDestroy
this.displayedColumns.unshift('active'); this.displayedColumns.unshift('active');
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(offers).pipe(takeUntil(this.unSubs[3])). this.store.select(offers).pipe(takeUntil(this.unSubs[3])).

@ -1,7 +1,8 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap">
<form *ngIf="calledFrom === 'home'" #sendPaymentForm="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap"> <form *ngIf="calledFrom === 'home'" #sendPaymentForm="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
<mat-form-field fxFlex="100"> <mat-form-field fxLayout="column" fxFlex="100">
<textarea #paymentReq="ngModel" matInput placeholder="Payment Request" name="paymentRequest" tabindex="1" required [perfectScrollbar] [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea> <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 && paymentDecodedHint !== ''">{{paymentDecodedHint}}</mat-hint>
<mat-error *ngIf="!paymentRequest">Payment request is required.</mat-error> <mat-error *ngIf="!paymentRequest">Payment request is required.</mat-error>
</mat-form-field> </mat-form-field>
@ -20,13 +21,15 @@
<span class="page-title">Payments History</span> <span class="page-title">Payments History</span>
</div> </div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -54,7 +57,7 @@
<ng-container matColumnDef="payment_hash"> <ng-container matColumnDef="payment_hash">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th>
<td *matCellDef="let payment" mat-cell> <td *matCellDef="let payment" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{payment?.payment_hash}}</span> <span class="ellipsis-child">{{payment?.payment_hash}}</span>
</span> </span>
</td> </td>
@ -62,7 +65,7 @@
<ng-container matColumnDef="bolt11"> <ng-container matColumnDef="bolt11">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
<td *matCellDef="let payment" mat-cell> <td *matCellDef="let payment" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{payment?.bolt11}}</span> <span class="ellipsis-child">{{payment?.bolt11}}</span>
</span> </span>
</td> </td>
@ -70,7 +73,7 @@
<ng-container matColumnDef="label"> <ng-container matColumnDef="label">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Label</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Label</th>
<td *matCellDef="let payment" mat-cell> <td *matCellDef="let payment" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{payment?.label}}</span> <span class="ellipsis-child">{{payment?.label}}</span>
</span> </span>
</td> </td>
@ -78,7 +81,7 @@
<ng-container matColumnDef="destination"> <ng-container matColumnDef="destination">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Destination</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Destination</th>
<td *matCellDef="let payment" mat-cell> <td *matCellDef="let payment" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{payment?.destination}}</span> <span class="ellipsis-child">{{payment?.destination}}</span>
</span> </span>
</td> </td>
@ -86,7 +89,7 @@
<ng-container matColumnDef="memo"> <ng-container matColumnDef="memo">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Memo</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Memo</th>
<td *matCellDef="let payment" mat-cell> <td *matCellDef="let payment" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{payment?.memo}}</span> <span class="ellipsis-child">{{payment?.memo}}</span>
</span> </span>
</td> </td>
@ -155,7 +158,7 @@
</ng-container> </ng-container>
<ng-container matColumnDef="group_payment_hash"> <ng-container matColumnDef="group_payment_hash">
<td *matCellDef="let payment" mat-cell> <td *matCellDef="let payment" mat-cell>
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{payment?.payment_hash}}</span> <span class="ellipsis-child">{{payment?.payment_hash}}</span>
</span> </span>
<span *ngIf="payment.is_expanded"> <span *ngIf="payment.is_expanded">
@ -167,11 +170,11 @@
</ng-container> </ng-container>
<ng-container matColumnDef="group_bolt11"> <ng-container matColumnDef="group_bolt11">
<td *matCellDef="let payment" mat-cell> <td *matCellDef="let payment" mat-cell>
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{payment?.bolt11}}</span> <span class="ellipsis-child">{{payment?.bolt11}}</span>
</span> </span>
<span *ngIf="payment.is_expanded"> <span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child"></span> <span class="ellipsis-child"></span>
</span> </span>
</span> </span>
@ -179,11 +182,11 @@
</ng-container> </ng-container>
<ng-container matColumnDef="group_label"> <ng-container matColumnDef="group_label">
<td *matCellDef="let payment" mat-cell> <td *matCellDef="let payment" mat-cell>
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{payment?.label}}</span> <span class="ellipsis-child">{{payment?.label}}</span>
</span> </span>
<span *ngIf="payment.is_expanded"> <span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child"></span> <span class="ellipsis-child"></span>
</span> </span>
</span> </span>
@ -191,11 +194,11 @@
</ng-container> </ng-container>
<ng-container matColumnDef="group_destination"> <ng-container matColumnDef="group_destination">
<td *matCellDef="let payment" mat-cell> <td *matCellDef="let payment" mat-cell>
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{payment?.destination}}</span> <span class="ellipsis-child">{{payment?.destination}}</span>
</span> </span>
<span *ngIf="payment.is_expanded"> <span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child"></span> <span class="ellipsis-child"></span>
</span> </span>
</span> </span>
@ -203,11 +206,11 @@
</ng-container> </ng-container>
<ng-container matColumnDef="group_memo"> <ng-container matColumnDef="group_memo">
<td *matCellDef="let payment" mat-cell> <td *matCellDef="let payment" mat-cell>
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{payment?.memo}}</span> <span class="ellipsis-child">{{payment?.memo}}</span>
</span> </span>
<span *ngIf="payment.is_expanded"> <span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child"></span> <span class="ellipsis-child"></span>
</span> </span>
</span> </span>

@ -1,6 +1,7 @@
.mat-column-status, .mat-column-group_status { .mat-column-status, .mat-column-group_status {
max-width: 1.2rem; max-width: 2.1rem;
width:1.2rem; width:2.1rem;
text-overflow: unset;
} }
.mat-column-group_actions { .mat-column-group_actions {

@ -105,7 +105,7 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
this.mppColumns = []; this.mppColumns = [];
this.displayedColumns.map((col) => this.mppColumns.push('group_' + col)); this.displayedColumns.map((col) => this.mppColumns.push('group_' + col));
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
this.logger.info(this.mppColumns); this.logger.info(this.mppColumns);
}); });

@ -27,37 +27,43 @@
</div> </div>
</div> </div>
<ng-template #invoiceBlock> <ng-template #invoiceBlock>
<mat-form-field fxFlex="100"> <mat-form-field fxLayout="column" fxFlex="100">
<textarea #paymentReq="ngModel" autoFocus matInput placeholder="Payment Request" rows="4" name="paymentRequest" tabindex="4" required [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea> <mat-label>Payment Request</mat-label>
<textarea #paymentReq="ngModel" autoFocus matInput rows="4" name="paymentRequest" tabindex="4" required [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea>
<mat-hint *ngIf="paymentRequest && paymentDecodedHint !== ''">{{paymentDecodedHint}}</mat-hint> <mat-hint *ngIf="paymentRequest && paymentDecodedHint !== ''">{{paymentDecodedHint}}</mat-hint>
<mat-error *ngIf="!paymentRequest">Payment request is required.</mat-error> <mat-error *ngIf="!paymentRequest">Payment request is required.</mat-error>
<mat-error *ngIf="paymentReq.errors?.decodeError">{{paymentDecodedHint}}</mat-error> <mat-error *ngIf="paymentReq.errors?.decodeError">{{paymentDecodedHint}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="zeroAmtInvoice" fxFlex="100"> <mat-form-field *ngIf="zeroAmtInvoice" fxFlex="100">
<input #paymentAmt="ngModel" matInput placeholder="Amount (Sats)" name="amount" tabindex="5" required [(ngModel)]="paymentAmount" (change)="onAmountChange($event)"> <mat-label>Amount (Sats)</mat-label>
<input #paymentAmt="ngModel" matInput name="amount" tabindex="5" required [(ngModel)]="paymentAmount" (change)="onAmountChange($event)">
<mat-hint>It is a zero amount invoice, enter amount to be paid.</mat-hint> <mat-hint>It is a zero amount invoice, enter amount to be paid.</mat-hint>
<mat-error *ngIf="!paymentAmount">Payment amount is required.</mat-error> <mat-error *ngIf="!paymentAmount">Payment amount is required.</mat-error>
</mat-form-field> </mat-form-field>
</ng-template> </ng-template>
<ng-template #keysendBlock> <ng-template #keysendBlock>
<mat-form-field fxFlex="100"> <mat-form-field fxLayout="column" fxFlex="100">
<input autoFocus matInput placeholder="Pubkey" name="pubkey" tabindex="4" required [(ngModel)]="pubkey"> <mat-label>Pubkey</mat-label>
<input autoFocus matInput name="pubkey" tabindex="4" required [(ngModel)]="pubkey">
<mat-error *ngIf="!pubkey">Pubkey is required.</mat-error> <mat-error *ngIf="!pubkey">Pubkey is required.</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="100"> <mat-form-field fxLayout="column" fxFlex="100">
<input #keysendAmt="ngModel" matInput placeholder="Amount (Sats)" name="keysendAmount" tabindex="5" required [(ngModel)]="keysendAmount"> <mat-label>Amount (Sats)</mat-label>
<input #keysendAmt="ngModel" matInput name="keysendAmount" tabindex="5" required [(ngModel)]="keysendAmount">
<mat-error *ngIf="!keysendAmount">Keysend amount is required.</mat-error> <mat-error *ngIf="!keysendAmount">Keysend amount is required.</mat-error>
</mat-form-field> </mat-form-field>
</ng-template> </ng-template>
<ng-template #offerBlock> <ng-template #offerBlock>
<mat-form-field fxFlex="100"> <mat-form-field fxLayout="column" fxFlex="100">
<textarea #offerReq="ngModel" autoFocus matInput placeholder="Offer Request" rows="4" name="offerRequest" tabindex="4" required [ngModel]="offerRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea> <mat-label>Offer Request</mat-label>
<textarea #offerReq="ngModel" autoFocus matInput rows="4" name="offerRequest" tabindex="4" required [ngModel]="offerRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea>
<mat-hint *ngIf="offerRequest && offerDecodedHint !== ''">{{offerDecodedHint}}</mat-hint> <mat-hint *ngIf="offerRequest && offerDecodedHint !== ''">{{offerDecodedHint}}</mat-hint>
<mat-error *ngIf="!offerRequest">Offer request is required.</mat-error> <mat-error *ngIf="!offerRequest">Offer request is required.</mat-error>
<mat-error *ngIf="offerReq.errors?.decodeError">{{offerDecodedHint}}</mat-error> <mat-error *ngIf="offerReq.errors?.decodeError">{{offerDecodedHint}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="zeroAmtOffer" fxFlex="100"> <mat-form-field *ngIf="zeroAmtOffer" fxFlex="100">
<input #offerAmt="ngModel" matInput placeholder="Amount (Sats)" name="amountoffer" tabindex="5" required [(ngModel)]="offerAmount" (change)="onAmountChange($event)"> <mat-label>Amount (Sats)</mat-label>
<input #offerAmt="ngModel" matInput name="amountoffer" tabindex="5" required [(ngModel)]="offerAmount" (change)="onAmountChange($event)">
<mat-hint>It is a zero amount offer, enter amount to be paid.</mat-hint> <mat-hint>It is a zero amount offer, enter amount to be paid.</mat-hint>
<mat-error *ngIf="!offerAmount">Offer amount is required.</mat-error> <mat-error *ngIf="!offerAmount">Offer amount is required.</mat-error>
</mat-form-field> </mat-form-field>
@ -66,6 +72,7 @@
<mat-icon matTooltip="Save offer in database for future payments" matTooltipPosition="below" fxFlex="none" class="info-icon">info_outline</mat-icon> <mat-icon matTooltip="Save offer in database for future payments" matTooltipPosition="below" fxFlex="none" class="info-icon">info_outline</mat-icon>
</div> </div>
<mat-form-field *ngIf="flgSaveToDB || offerTitle !== ''" fxFlex="100" class="mt-1"> <mat-form-field *ngIf="flgSaveToDB || offerTitle !== ''" fxFlex="100" class="mt-1">
<input matInput placeholder="Title to Save" tabindex="7" [(ngModel)]="offerTitle"> <mat-label>Title to Save</mat-label>
<input matInput tabindex="7" [(ngModel)]="offerTitle">
</mat-form-field> </mat-form-field>
</ng-template> </ng-template>

@ -20,7 +20,6 @@
<div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -9,7 +9,6 @@
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -3,18 +3,13 @@
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch"> <mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
<form #form="ngForm" fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start space-between" class="w-100"> <form #form="ngForm" fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start space-between" class="w-100">
<div fxFlex="100" fxLayoutAlign="start end"> <div fxFlex="100" fxLayoutAlign="start end">
<!-- <mat-radio-group color="primary" [(ngModel)]="selectedFieldId" (change)="onSelectChange($event)" tabindex="1" name="lookupField">
<mat-radio-button *ngFor="let lookupField of lookupFields" [value]="lookupField.id" [checked]="selectedFieldId === lookupField.id" class="mr-4">
{{lookupField.name}}
</mat-radio-button>
</mat-radio-group> -->
<mat-radio-group color="primary" tabindex="1" name="lookupField"> <mat-radio-group color="primary" tabindex="1" name="lookupField">
<mat-radio-button checked class="mr-4" [value]="0">Node</mat-radio-button> <mat-radio-button checked class="mr-4" [value]="0">Node</mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div> </div>
<mat-form-field fxFlex="100" fxLayoutAlign="start end" [ngClass]="{'mt-1': true, 'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}"> <mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end" [ngClass]="{'mt-1': true, 'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
<!-- <input matInput name="lookupKey" [placeholder]="lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'" (change)="clearLookupValue()" [(ngModel)]="lookupKey" tabindex="2" required #key> --> <mat-label>{{lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'}}</mat-label>
<input #key matInput name="lookupKey" tabindex="2" required [formControl]="lookupKeyCtrl" [placeholder]="lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'"> <input #key matInput name="lookupKey" tabindex="2" required [formControl]="lookupKeyCtrl">
<mat-error *ngIf="lookupKeyCtrl.errors?.required">{{lookupFields[selectedFieldId]?.placeholder}} is required.</mat-error> <mat-error *ngIf="lookupKeyCtrl.errors?.required">{{lookupFields[selectedFieldId]?.placeholder}} is required.</mat-error>
<mat-error *ngIf="lookupKeyCtrl.errors?.invalid">Invalid {{lookupFields[selectedFieldId]?.placeholder}}.</mat-error> <mat-error *ngIf="lookupKeyCtrl.errors?.invalid">Invalid {{lookupFields[selectedFieldId]?.placeholder}}.</mat-error>
</mat-form-field> </mat-form-field>

@ -4,11 +4,11 @@
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon> <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
<span>The actual routing fee on a payment can be different from the fee shown on query routes.</span> <span>The actual routing fee on a payment can be different from the fee shown on query routes.</span>
</div> </div>
<mat-form-field fxFlex="69" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="69" fxLayoutAlign="start end">
<input #destPubkey="ngModel" matInput placeholder="Destination Node ID" name="nodeId" tabindex="1" required [(ngModel)]="nodeId"> <input #destPubkey="ngModel" matInput placeholder="Destination Node ID" name="nodeId" tabindex="1" required [(ngModel)]="nodeId">
<mat-error *ngIf="!nodeId">Destination Node ID is required.</mat-error> <mat-error *ngIf="!nodeId">Destination Node ID is required.</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="29" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="29" fxLayoutAlign="start end">
<input matInput placeholder="Amount (Sats)" name="amount" tabindex="2" type="number" required [step]="1000" [min]="0" [(ngModel)]="amount"> <input matInput placeholder="Amount (Sats)" name="amount" tabindex="2" type="number" required [step]="1000" [min]="0" [(ngModel)]="amount">
<mat-error *ngIf="!amount">Amount is required.</mat-error> <mat-error *ngIf="!amount">Amount is required.</mat-error>
</mat-form-field> </mat-form-field>
@ -40,7 +40,7 @@
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell> Alias</th> <th *matHeaderCellDef mat-header-cell> Alias</th>
<td *matCellDef="let hop" mat-cell> <td *matCellDef="let hop" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '6rem' : '30rem'}">
<span class="ellipsis-child">{{hop?.alias}}</span> <span class="ellipsis-child">{{hop?.alias}}</span>
</span> </span>
</td> </td>
@ -48,7 +48,7 @@
<ng-container matColumnDef="nodeId"> <ng-container matColumnDef="nodeId">
<th *matHeaderCellDef mat-header-cell> ID</th> <th *matHeaderCellDef mat-header-cell> ID</th>
<td *matCellDef="let hop" mat-cell> <td *matCellDef="let hop" mat-cell>
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}"> <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '6rem' : '30rem'}">
<span class="ellipsis-child">{{hop?.nodeId}}</span> <span class="ellipsis-child">{{hop?.nodeId}}</span>
</span> </span>
</td> </td>

@ -8,22 +8,22 @@
</mat-card-header> </mat-card-header>
<mat-card-content class="padding-gap-x-large"> <mat-card-content class="padding-gap-x-large">
<form #form="ngForm" fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between start" class="overflow-x-hidden" (submit)="onSendFunds()" (reset)="resetData()"> <form #form="ngForm" fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between start" class="overflow-x-hidden" (submit)="onSendFunds()" (reset)="resetData()">
<mat-form-field fxFlex="55"> <mat-form-field fxLayout="column" fxFlex="55">
<input #addrs="ngModel" matInput autoFocus placeholder="Bitcoin Address" tabindex="1" name="addr" required [(ngModel)]="transaction.address"> <input #addrs="ngModel" matInput autoFocus placeholder="Bitcoin Address" tabindex="1" name="addr" required [(ngModel)]="transaction.address">
<mat-error *ngIf="!transaction.address">Bitcoin address is required.</mat-error> <mat-error *ngIf="!transaction.address">Bitcoin address is required.</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="30"> <mat-form-field fxLayout="column" fxFlex="30">
<input #amnt="ngModel" matInput placeholder="Amount" name="amt" type="number" tabindex="2" required [step]="100" [min]="0" [(ngModel)]="transaction.amount"> <input #amnt="ngModel" matInput placeholder="Amount" name="amt" type="number" tabindex="2" required [step]="100" [min]="0" [(ngModel)]="transaction.amount">
<span matSuffix>{{selAmountUnit}} </span> <span matSuffix>{{selAmountUnit}} </span>
<mat-error *ngIf="!transaction.amount">{{amountError}}</mat-error> <mat-error *ngIf="!transaction.amount">{{amountError}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="10" fxLayoutAlign="start end"> <mat-form-field fxLayout="column" fxFlex="10" fxLayoutAlign="start end">
<mat-select tabindex="3" required name="amountUnit" [value]="selAmountUnit" (selectionChange)="onAmountUnitChange($event)"> <mat-select tabindex="3" required name="amountUnit" [value]="selAmountUnit" (selectionChange)="onAmountUnitChange($event)">
<mat-option *ngFor="let amountUnit of amountUnits" [value]="amountUnit">{{amountUnit}}</mat-option> <mat-option *ngFor="let amountUnit of amountUnits" [value]="amountUnit">{{amountUnit}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div fxFlex="60" fxLayoutAlign="space-between stretch" fxLayout="row wrap"> <div fxFlex="60" fxLayoutAlign="space-between stretch" fxLayout="row wrap">
<mat-form-field fxFlex="48" fxLayout="row" fxLayoutAlign="start center"> <mat-form-field fxLayout="column" fxFlex="48" fxLayout="row" fxLayoutAlign="start center">
<input #blocks="ngModel" matInput placeholder="Target Confirmation Blocks" type="number" name="blocks" tabindex="8" required="true" [step]="1" [min]="0" [(ngModel)]="transaction.blocks"> <input #blocks="ngModel" matInput placeholder="Target Confirmation Blocks" type="number" name="blocks" tabindex="8" required="true" [step]="1" [min]="0" [(ngModel)]="transaction.blocks">
<mat-error *ngIf="!transaction.blocks">Target Confirmation Blocks is required.</mat-error> <mat-error *ngIf="!transaction.blocks">Target Confirmation Blocks is required.</mat-error>
</mat-form-field> </mat-form-field>

@ -5,13 +5,15 @@
<span class="page-title">Transaction History</span> <span class="page-title">Transaction History</span>
</div> </div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -27,7 +29,7 @@
<ng-container matColumnDef="address"> <ng-container matColumnDef="address">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Address</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Address</th>
<td *matCellDef="let transaction" mat-cell> <td *matCellDef="let transaction" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{transaction?.address}}</span> <span class="ellipsis-child">{{transaction?.address}}</span>
</div> </div>
</td> </td>
@ -35,7 +37,7 @@
<ng-container matColumnDef="blockHash"> <ng-container matColumnDef="blockHash">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Blockhash</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Blockhash</th>
<td *matCellDef="let transaction" mat-cell> <td *matCellDef="let transaction" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{transaction?.blockHash}}</span> <span class="ellipsis-child">{{transaction?.blockHash}}</span>
</div> </div>
</td> </td>
@ -43,7 +45,7 @@
<ng-container matColumnDef="txid"> <ng-container matColumnDef="txid">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Transaction ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Transaction ID</th>
<td *matCellDef="let transaction" mat-cell> <td *matCellDef="let transaction" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{transaction?.txid}}</span> <span class="ellipsis-child">{{transaction?.txid}}</span>
</div> </div>
</td> </td>

@ -72,7 +72,7 @@ export class ECLOnChainTransactionHistoryComponent implements OnInit, OnDestroy
} }
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(transactions).pipe(takeUntil(this.unSubs[1])). this.store.select(transactions).pipe(takeUntil(this.unSubs[1])).

@ -20,7 +20,6 @@
<div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div> <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large mt-2"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large mt-2">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

@ -2,13 +2,15 @@
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -33,7 +35,7 @@
<ng-container matColumnDef="channelId"> <ng-container matColumnDef="channelId">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{channel?.channelId}}</span> <span class="ellipsis-child">{{channel?.channelId}}</span>
</div> </div>
</td> </td>
@ -41,7 +43,7 @@
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{channel.alias}}</span> <span class="ellipsis-child">{{channel.alias}}</span>
</div> </div>
</td> </td>
@ -49,7 +51,7 @@
<ng-container matColumnDef="nodeId"> <ng-container matColumnDef="nodeId">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{channel?.nodeId}}</span> <span class="ellipsis-child">{{channel?.nodeId}}</span>
</div> </div>
</td> </td>

@ -1,6 +1,7 @@
.mat-column-announceChannel { .mat-column-announceChannel {
max-width: 1.2rem; max-width: 2.1rem;
width:1.2rem; width:2.1rem;
text-overflow: unset;
} }
.mat-column-balancedness { .mat-column-balancedness {

@ -80,7 +80,7 @@ export class ECLChannelInactiveTableComponent implements OnInit, AfterViewInit,
this.displayedColumns.unshift('announceChannel'); this.displayedColumns.unshift('announceChannel');
this.displayedColumns.push('actions'); this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE; this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem'; this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);
}); });
this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[1])). this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[1])).

@ -2,13 +2,15 @@
<div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch"> <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()"> <mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option> <mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="49"> <mat-form-field fxLayout="column" fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()"> <mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -29,7 +31,7 @@
<ng-container matColumnDef="channelId"> <ng-container matColumnDef="channelId">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{channel?.channelId}}</span> <span class="ellipsis-child">{{channel?.channelId}}</span>
</div> </div>
</td> </td>
@ -37,7 +39,7 @@
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{channel?.alias}}</span> <span class="ellipsis-child">{{channel?.alias}}</span>
</div> </div>
</td> </td>
@ -45,7 +47,7 @@
<ng-container matColumnDef="nodeId"> <ng-container matColumnDef="nodeId">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th> <th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
<td *matCellDef="let channel" mat-cell> <td *matCellDef="let channel" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> <div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{channel?.nodeId}}</span> <span class="ellipsis-child">{{channel?.nodeId}}</span>
</div> </div>
</td> </td>

@ -1,6 +1,7 @@
.mat-column-announceChannel { .mat-column-announceChannel {
max-width: 1.2rem; max-width: 2.1rem;
width:1.2rem; width:2.1rem;
text-overflow: unset;
} }
.mat-column-balancedness { .mat-column-balancedness {

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save