dark mode fixed

pull/1149/head
ShahanaFarooqui 1 year 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">
<meta i18n-content="" name="msapplication-TileColor" content="#da532c">
<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>
<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>

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>
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet>
</div>

@ -1,164 +1,164 @@
<div *ngIf="lookupResult" fxLayout="column" class="mt-1">
<mat-divider></mat-divider>
<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">
<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>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="20" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Short Channel ID</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.short_channel_id}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Active</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.active ? 'True' : 'False'}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Last Update</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.last_update }}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Amount (mSats)</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.amount_msat}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Base Fee (mSats)</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.base_fee_millisatoshi | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Channel Flags</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.channel_flags | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Delay</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.delay | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Destination</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.destination}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Fee/Millionth</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.fee_per_millionth | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Max Htlc (mSat)</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.htlc_maximum_msat}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Min Htlc (mSat)</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.htlc_minimum_msat}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Message Flags</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.message_flags | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Public</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.public ? 'Yes' : 'No'}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Satoshis</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.satoshis | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Source</h4>
<span class="foreground-secondary-text">{{lookupResult[0]?.source}}</span>
</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>
<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>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="20" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Short Channel ID</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.short_channel_id}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Active</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.active ? 'True' : 'False'}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<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>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Amount (mSats)</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.amount_msat}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Base Fee (mSats)</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.base_fee_millisatoshi | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Channel Flags</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.channel_flags | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Delay</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.delay | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Destination</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.destination}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Fee/Millionth</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.fee_per_millionth | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Max Htlc (mSat)</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.htlc_maximum_msat}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Min Htlc (mSat)</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.htlc_minimum_msat}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Message Flags</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.message_flags | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Public</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.public ? 'Yes' : 'No'}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Satoshis</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.satoshis | number}}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 class="font-bold-500">Source</h4>
<span class="foreground-secondary-text">{{lookupResult[1]?.source}}</span>
</div>

@ -9,8 +9,9 @@
</mat-radio-button>
</mat-radio-group>
</div>
<mat-form-field 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-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end" [ngClass]="{'mt-1': true, 'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
<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-form-field>
<div fxLayout="row" fxFlex="100" class="mt-1">

@ -1,5 +1,5 @@
<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 fxFlex="30">
<h4 fxLayoutAlign="start" class="font-bold-500">Alias</h4>
@ -10,7 +10,7 @@
<span class="foreground-secondary-text w-100">{{lookupResult?.nodeid}}</span>
</div>
</div>
<mat-divider class="my-1" [inset]="true"></mat-divider>
<mat-divider class="my-1"></mat-divider>
<div fxLayout="row">
<div fxFlex="30">
<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>
</div>
</div>
<mat-divider class="my-1" [inset]="true"></mat-divider>
<mat-divider class="my-1"></mat-divider>
<div fxLayout="column">
<h4 fxFlex="100" fxLayoutAlign="start" class="font-bold-500 mb-1">Addresses</h4>
<div fxLayout="row" fxFlex="100" class="table-container" [perfectScrollbar]>

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

@ -4,12 +4,14 @@
<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>
</div>
<mat-form-field fxFlex="69" fxLayoutAlign="start end">
<input #destPubkey="ngModel" matInput placeholder="Destination Pubkey" name="destinationPubkey" tabindex="1" required [(ngModel)]="destinationPubkey">
<mat-form-field fxLayout="column" fxFlex="69" fxLayoutAlign="start end">
<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-form-field>
<mat-form-field fxFlex="29" fxLayoutAlign="start end">
<input matInput placeholder="Amount (Sats)" name="amount" tabindex="2" type="number" required [step]="1000" [min]="0" [(ngModel)]="amount">
<mat-form-field fxLayout="column" fxFlex="29" fxLayoutAlign="start end">
<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-form-field>
<div fxLayout="row" class="mt-1">
@ -29,7 +31,7 @@
<ng-container matColumnDef="id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
<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>
</div>
</td>
@ -37,7 +39,7 @@
<ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<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>
</div>
</td>

@ -12,18 +12,18 @@
<span>Ads should be supplemented with additional research of the node, before buying liquidity.</span>
</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 fxFlex="30">
<span class="page-title">
Liquidity Ask
<mat-icon matTooltipPosition="above" matTooltipClass="pre-wrap" class="info-icon info-icon-primary" [matTooltip]="askTooltipMsg">info_outline</mat-icon>
</span>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="30">
<span class="page-text">Liquidity Ask</span>
<mat-icon matTooltipPosition="above" matTooltipClass="pre-wrap" class="info-icon info-icon-primary" [matTooltip]="askTooltipMsg">info_outline</mat-icon>
</div>
<mat-form-field fxFlex="34">
<input autoFocus matInput placeholder="Channel Amount (Sats)" name="channelAmount" tabindex="1" type="number" step="10000" required [(ngModel)]="channelAmount" (keyup)="onCalculateOpeningFee()">
<mat-form-field fxLayout="column" fxFlex="34">
<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-form-field>
<mat-form-field 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-form-field fxLayout="column" fxFlex="34">
<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-form-field>
</div>
@ -37,12 +37,14 @@
<mat-icon [matTooltip]="nodesTooltipMsg" matTooltipPosition="above" matTooltipClass="pre-wrap" class="info-icon info-icon-primary">info_outline</mat-icon>
</span>
</div>
<mat-form-field 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-form-field fxLayout="column" fxFlex="34">
<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-form-field>
<mat-form-field fxFlex="34">
<input matInput placeholder="Channel Count" name="channel_count" [(ngModel)]="channel_count" (keyup)="onFilter()" type="number" step="1" min="0" tabindex="6">
<mat-form-field fxLayout="column" fxFlex="34">
<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>
</div>
</form> -->
@ -52,13 +54,15 @@
<span class="page-title">Liquidity Providing Peers</span>
</div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -68,7 +72,7 @@
<ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<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">
{{lqNode?.alias}}
<mat-chip-list class="ml-half" aria-label="Address Types">
@ -83,7 +87,7 @@
<ng-container matColumnDef="nodeid">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
<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>
</div>
</td>

@ -88,7 +88,7 @@ export class CLNLiquidityAdsListComponent implements OnInit, OnDestroy {
}
this.displayedColumns.push('actions');
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);
});
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">
<ng-container *ngTemplateOutlet="nodeDetailsExpansionBlock"></ng-container>
<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">
<input #ramount="ngModel" autoFocus matInput placeholder="Requested Amount" type="number" tabindex="1" required name="ramount" [step]="10000" [min]="0" [(ngModel)]="requestedAmount" (keyup)="calculateFee()">
<mat-form-field fxLayout="column" fxFlex="30" fxLayoutAlign="start end">
<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>
<mat-error *ngIf="ramount.errors?.required">Requested amount is required.</mat-error>
</mat-form-field>
<mat-form-field 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-form-field fxLayout="column" fxFlex="30" fxLayoutAlign="start end">
<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>
<mat-error *ngIf="feeRt.errors?.required">Fee rate is required.</mat-error>
</mat-form-field>
<mat-form-field 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-form-field fxLayout="column" fxFlex="30" fxLayoutAlign="start end">
<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>
<span matSuffix> Sats </span>
<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="row" fxLayoutAlign="space-between end" fxLayoutAlign.gt-sm="start end">
<mat-form-field fxFlex="48" fxFlex.gt-md="25" fxLayoutAlign="start end" class="mr-2">
<mat-select placeholder="Address Type" name="address_type" tabindex="1" [(ngModel)]="selectedAddressType">
<div fxLayout="column">
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutAlign.gt-sm="start center">
<mat-form-field fxLayout="column" fxFlex="48" fxFlex.gt-md="25" fxLayoutAlign="start end" class="mr-2">
<mat-label>Address Type</mat-label>
<mat-select name="address_type" tabindex="1" [(ngModel)]="selectedAddressType">
<mat-option *ngFor="let addressType of addressTypes" [value]="addressType">
{{addressType.addressTp}}
</mat-option>
</mat-select>
</mat-form-field>
<div class="mt-2">
<button mat-flat-button color="primary" tabindex="2" class="top-minus-15px" (click)="onGenerateAddress()">Generate Address</button>
<div>
<button mat-flat-button color="primary" tabindex="2" (click)="onGenerateAddress()">Generate Address</button>
</div>
</div>
</div>

@ -8,17 +8,19 @@
</mat-card-header>
<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()">
<mat-form-field fxFlex="55">
<input #address="ngModel" matInput autoFocus placeholder="Bitcoin Address" tabindex="1" name="address" required [(ngModel)]="transaction.address">
<mat-form-field fxLayout="column" fxFlex="55">
<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-form-field>
<mat-form-field 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-form-field fxLayout="column" fxFlex="30">
<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>
<span matSuffix>{{selAmountUnit}} </span>
<mat-error *ngIf="!transaction.satoshis">{{amountError}}</mat-error>
</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-option *ngFor="let amountUnit of amountUnits" [value]="amountUnit">{{amountUnit}}</mat-option>
</mat-select>
@ -26,22 +28,25 @@
<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 fxFlex="48" fxLayoutAlign="space-between end">
<mat-form-field fxLayoutAlign="start center" [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'">
<mat-select tabindex="4" placeholder="Fee Rate" [disabled]="flgMinConf" [(value)]="selFeeRate" (selectionChange)="customFeeRate=null">
<mat-form-field fxLayout="column" fxLayoutAlign="start center" [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'">
<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">
{{feeRateType.feeRateType}}
</mat-option>
</mat-select>
</mat-form-field>
<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-form-field>
</div>
<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-form-field fxFlex="98">
<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-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 fxLayout="column" fxFlex="93">
<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-form-field>
</div>
@ -55,13 +60,14 @@
</mat-expansion-panel-header>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
<mat-form-field fxFlex="35" fxLayoutAlign="start end">
<mat-select tabindex="8" placeholder="Coin Selection" multiple [(value)]="selUTXOs" (selectionChange)="onUTXOSelectionChange($event)">
<mat-form-field fxLayout="column" fxFlex="35" fxLayoutAlign="start end">
<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-option *ngFor="let utxo of utxos" [value]="utxo">{{utxo.value | number}} Sats</mat-option>
</mat-select>
</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()">
Use selected UTXOs balance
</mat-slide-toggle>
@ -93,8 +99,9 @@
<form fxLayout="column" fxLayoutAlign="space-between" class="my-1 pr-1" [formGroup]="passwordFormGroup">
<ng-template matStepLabel>{{passwordFormLabel}}</ng-template>
<div fxLayout="row">
<mat-form-field fxFlex="100">
<input autoFocus matInput placeholder="Password" type="password" tabindex="1" formControlName="password" required>
<mat-form-field fxLayout="column" fxFlex="100">
<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-form-field>
</div>
@ -107,28 +114,32 @@
<form fxLayout="column" class="my-1 pr-1" [formGroup]="sendFundFormGroup">
<ng-template matStepLabel disabled="true">{{sendFundFormLabel}}</ng-template>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<mat-form-field fxFlex="100">
<input matInput formControlName="transactionAddress" placeholder="Bitcoin Address" tabindex="4" name="address" required>
<mat-form-field fxLayout="column" fxFlex="100">
<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-form-field>
<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">
<mat-form-field 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-form-field fxLayout="column" fxLayoutAlign="start center" [fxFlex]="sendFundFormGroup.controls.selFeeRate.value === 'customperkb' && !sendFundFormGroup.controls.flgMinConf.value ? '48' : '100'">
<mat-label>Fee Rate</mat-label>
<mat-select tabindex="4" formControlName="selFeeRate">
<mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
{{feeRateType.feeRateType}}
</mat-option>
</mat-select>
</mat-form-field>
<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-form-field>
</div>
<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-form-field fxFlex="98">
<input matInput formControlName="minConfValue" placeholder="Min Confirmation Blocks" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="sendFundFormGroup.controls.flgMinConf.value">
<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 fxLayout="column" fxFlex="93">
<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-form-field>
</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>
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet>
</div>

@ -2,13 +2,15 @@
<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.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -34,7 +36,7 @@
<ng-container matColumnDef="txid">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Transaction ID</th>
<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>
</td>
@ -42,7 +44,7 @@
<ng-container matColumnDef="address">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Address</th>
<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>
</td>
@ -50,7 +52,7 @@
<ng-container matColumnDef="scriptpubkey">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Script Pubkey</th>
<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>
</td>

@ -77,7 +77,7 @@ export class CLNOnChainUtxosComponent implements OnInit, AfterViewInit, OnDestro
this.displayedColumns.unshift('status');
this.displayedColumns.push('actions');
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.store.select(utxos).pipe(takeUntil(this.unSubs[1])).

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

@ -19,21 +19,21 @@
<span class="foreground-secondary-text">{{channel.alias}}</span>
</div>
</div>
<mat-divider class="my-1" [inset]="true"></mat-divider>
<mat-divider class="my-1"></mat-divider>
<div fxLayout="row">
<div fxFlex="100">
<h4 fxLayoutAlign="start" class="font-bold-500">Channel ID</h4>
<span class="foreground-secondary-text">{{channel.channel_id}}</span>
</div>
</div>
<mat-divider class="my-1" [inset]="true"></mat-divider>
<mat-divider class="my-1"></mat-divider>
<div fxLayout="row">
<div fxFlex="100">
<h4 fxLayoutAlign="start" class="font-bold-500">Peer Public Key</h4>
<span class="foreground-secondary-text">{{channel.id}}</span>
</div>
</div>
<mat-divider class="my-1" [inset]="true"></mat-divider>
<mat-divider class="my-1"></mat-divider>
<div fxLayout="row">
<div fxFlex="25">
<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>
</div>
</div>
<mat-divider class="my-1" [inset]="true"></mat-divider>
<mat-divider class="my-1"></mat-divider>
<div fxLayout="row">
<div fxFlex="25">
<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>
</div>
</div>
<mat-divider class="my-1" [inset]="true"></mat-divider>
<mat-divider class="my-1"></mat-divider>
<div *ngIf="showAdvanced">
<div fxLayout="row">
<div fxFlex="100">
@ -79,7 +79,7 @@
<span class="foreground-secondary-text">{{channel.funding_txid}}</span>
</div>
</div>
<mat-divider class="my-1" [inset]="true"></mat-divider>
<mat-divider class="my-1"></mat-divider>
</div>
<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()">

@ -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 fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -25,7 +27,7 @@
<ng-container matColumnDef="short_channel_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Short Channel ID</th>
<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>
</div>
</td>
@ -33,7 +35,7 @@
<ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<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>
</div>
</td>
@ -41,7 +43,7 @@
<ng-container matColumnDef="id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
<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>
</div>
</td>
@ -49,7 +51,7 @@
<ng-container matColumnDef="channel_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<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>
</div>
</td>
@ -57,7 +59,7 @@
<ng-container matColumnDef="funding_txid">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Funding Transaction ID</th>
<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>
</div>
</td>

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

@ -91,7 +91,7 @@ export class CLNChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
this.displayedColumns.unshift('private');
this.displayedColumns.push('actions');
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.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 fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -25,7 +27,7 @@
<ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<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>
</div>
</td>
@ -33,7 +35,7 @@
<ng-container matColumnDef="id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
<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>
</div>
</td>
@ -41,7 +43,7 @@
<ng-container matColumnDef="channel_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<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>
</div>
</td>
@ -49,7 +51,7 @@
<ng-container matColumnDef="funding_txid">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Funding Transaction ID</th>
<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>
</div>
</td>
@ -60,7 +62,7 @@
</ng-container>
<ng-container matColumnDef="state">
<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 matColumnDef="our_channel_reserve_satoshis">
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before">Local Reserve (Sats)</th>

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

@ -93,7 +93,7 @@ export class CLNChannelPendingTableComponent implements OnInit, AfterViewInit, O
this.displayedColumns.unshift('private');
this.displayedColumns.push('actions');
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.store.select(channels).pipe(takeUntil(this.unSubs[2])).

@ -2,7 +2,7 @@
<div fxLayout="row">
<button mat-flat-button color="primary" type="submit" tabindex="1" (click)="onOpenChannel()">Open Channel</button>
</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>
<ng-template mat-tab-label>

@ -10,7 +10,8 @@
<form #form="ngForm" fxLayout="column" (submit)="onOpenChannel()" (reset)="resetData()">
<div fxLayout="column">
<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-option *ngFor="let peer of filteredPeers | async" [value]="peer">{{peer.alias ? peer.alias : peer.id ? peer.id : ''}}</mat-option>
</mat-autocomplete>
@ -21,8 +22,9 @@
<ng-container *ngTemplateOutlet="peerDetailsExpansionBlock"></ng-container>
<div fxLayout="column">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
<mat-form-field 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-form-field fxLayout="column" fxFlex="70" fxLayoutAlign="start end">
<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>
<span matSuffix> Sats </span>
<mat-error *ngIf="amount.errors?.required || !fundingAmount">Amount is required.</mat-error>
@ -40,35 +42,39 @@
</mat-expansion-panel-header>
<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 fxFlex="54" fxLayoutAlign="space-between end">
<mat-form-field fxLayoutAlign="start center" [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'">
<mat-select tabindex="4" placeholder="Fee Rate" [disabled]="flgMinConf" [(value)]="selFeeRate" (selectionChange)="customFeeRate=null">
<div fxFlex="54" fxLayout="row" fxLayoutAlign="space-between center">
<mat-form-field fxLayout="column" fxLayoutAlign="start center" [fxFlex]="selFeeRate === 'customperkb' && !flgMinConf ? '48' : '100'">
<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">
{{feeRateType.feeRateType}}
</mat-option>
</mat-select>
</mat-form-field>
<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-form-field *ngIf="selFeeRate === 'customperkb' && !flgMinConf" fxLayout="column" fxFlex="48" fxLayoutAlign="end center">
<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-form-field>
</div>
<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-form-field fxFlex="98">
<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-error *ngIf="flgMinConf && !minConfValue">Min Confirmation Blocks is required.</mat-error>
<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 fxLayout="column" fxFlex="93">
<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 Blocks is required.</mat-error>
</mat-form-field>
</div>
</div>
<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-select tabindex="6" placeholder="Coin Selection" multiple [(value)]="selUTXOs" (selectionChange)="onUTXOSelectionChange($event)">
<mat-form-field fxLayout="column" fxFlex="54" fxLayoutAlign="start end">
<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-option *ngFor="let utxo of utxos" [value]="utxo">{{utxo.value | number}} Sats</mat-option>
</mat-select>
</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()">
Use selected UTXOs balance
</mat-slide-toggle>

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

@ -12,8 +12,9 @@
<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">
<ng-template matStepLabel>{{peerFormLabel}}</ng-template>
<mat-form-field fxFlex="100">
<input autoFocus matInput placeholder="Lightning Address (pubkey OR pubkey@ip:port)" formControlName="peerAddress" tabindex="1" required>
<mat-form-field fxLayout="column" fxFlex="100">
<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-form-field>
<div *ngIf="peerConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
@ -30,36 +31,40 @@
<ng-template matStepLabel disabled="true">{{channelFormLabel}}</ng-template>
<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">
<mat-form-field fxFlex="60" fxLayoutAlign="start end">
<input matInput autoFocus formControlName="fundingAmount" placeholder="Amount" type="number" tabindex="1" required [step]="1000">
<mat-form-field fxLayout="column" fxFlex="60" fxLayoutAlign="start end">
<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>
<span matSuffix> Sats </span>
<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?.max">Amount must be less than or equal to {{totalBalance}}.</mat-error>
</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>
</div>
</div>
<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">
<mat-form-field 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-form-field fxLayout="column" fxLayoutAlign="start center" [fxFlex]="channelFormGroup.controls.selFeeRate.value === 'customperkb' && !channelFormGroup.controls.flgMinConf.value ? '48' : '100'">
<mat-label>Fee Rate</mat-label>
<mat-select tabindex="4" formControlName="selFeeRate">
<mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
{{feeRateType.feeRateType}}
</mat-option>
</mat-select>
</mat-form-field>
<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-form-field>
</div>
<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-form-field fxFlex="98">
<input matInput formControlName="minConfValue" placeholder="Min Confirmation Blocks" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="channelFormGroup.controls.flgMinConf.value">
<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 fxLayout="column" fxFlex="93">
<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-form-field>
</div>

@ -9,19 +9,21 @@
<span class="page-title">Connected Peers</span>
</div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
<div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
<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">
<th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Connected"></th>
<td *matCellDef="let peer" mat-cell>
@ -32,7 +34,7 @@
<ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<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>
</div>
</td>
@ -40,7 +42,7 @@
<ng-container matColumnDef="id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>
<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>
</div>
</td>
@ -48,7 +50,7 @@
<ng-container matColumnDef="netaddr">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Network Address</th>
<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>
</div>
</td>

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

@ -86,7 +86,7 @@ export class CLNPeersComponent implements OnInit, AfterViewInit, OnDestroy {
this.displayedColumns.unshift('connected');
this.displayedColumns.push('actions');
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.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>
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<router-outlet></router-outlet>
</mat-card-content>
</mat-card>

@ -1,7 +1,7 @@
<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x-large">
<rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)"></rtl-horizontal-scroller>
<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>
<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>

@ -62,7 +62,7 @@ export class CLNTransactionsReportComponent implements OnInit, OnDestroy {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
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.store.select(payments).pipe(takeUntil(this.unSubs[1]),

@ -8,13 +8,15 @@
<div fxFlex="100">
<div fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -37,7 +39,7 @@
<ng-container matColumnDef="in_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th>
<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>
</td>
@ -49,7 +51,7 @@
<ng-container matColumnDef="out_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th>
<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>
</td>

@ -77,7 +77,7 @@ export class CLNFailedTransactionsComponent implements OnInit, AfterViewInit, On
}
this.displayedColumns.push('actions');
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.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 fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -31,7 +33,7 @@
<ng-container matColumnDef="in_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th>
<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>
</div>
</td>
@ -43,7 +45,7 @@
<ng-container matColumnDef="out_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th>
<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>
</div>
</td>
@ -51,7 +53,7 @@
<ng-container matColumnDef="payment_hash">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th>
<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>
</div>
</td>

@ -77,7 +77,7 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
}
this.displayedColumns.push('actions');
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.store.pipe(take(1)).subscribe((state) => {

@ -8,13 +8,15 @@
<div fxFlex="100">
<div fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -33,7 +35,7 @@
<ng-container matColumnDef="in_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>In Channel</th>
<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>
</td>
@ -45,7 +47,7 @@
<ng-container matColumnDef="out_channel_alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Out Channel</th>
<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>
</td>

@ -78,7 +78,7 @@ export class CLNLocalFailedTransactionsComponent implements OnInit, AfterViewIni
}
this.displayedColumns.push('actions');
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.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 fxFlex="70">Incoming</div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<!-- <mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterByIn" (selectionChange)="selFilterIn=''; applyIncomingFilter()" name="filterByIn">
<!-- <mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput [(ngModel)]="selFilterIn" (input)="applyIncomingFilter()" (keyup)="applyIncomingFilter()" name="filterin" placeholder="Filter">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput [(ngModel)]="selFilterIn" (input)="applyIncomingFilter()" (keyup)="applyIncomingFilter()" name="filterin">
</mat-form-field> -->
</div>
</div>
@ -21,7 +23,7 @@
<ng-container matColumnDef="channel_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<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>
</div>
</td>
@ -29,7 +31,7 @@
<ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Peer Alias</th>
<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>
</div>
</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 fxFlex="70">Outgoing</div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<!-- <mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" [(ngModel)]="selFilterByOut" (selectionChange)="selFilterOut=''; applyOutgoingFilter()" name="filterByOut">
<!-- <mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput [(ngModel)]="selFilterOut" (input)="applyOutgoingFilter()" (keyup)="applyOutgoingFilter()" name="filterout" placeholder="Filter">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput [(ngModel)]="selFilterOut" (input)="applyOutgoingFilter()" (keyup)="applyOutgoingFilter()" name="filterout">
</mat-form-field> -->
</div>
</div>
@ -81,7 +85,7 @@
<ng-container matColumnDef="channel_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<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>
</div>
</td>
@ -89,7 +93,7 @@
<ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Peer Alias</th>
<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>
</div>
</td>

@ -79,7 +79,7 @@ export class CLNRoutingPeersComponent implements OnInit, OnChanges, AfterViewIni
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
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.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">
<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>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap-x-large">
<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>
</nav>
<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">
<router-outlet></router-outlet>
</div>

@ -1,7 +1,8 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
<form #form="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch">
<mat-form-field fxLayout="row" 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-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end">
<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-form-field>
<div fxLayout="row" class="my-1">
@ -10,7 +11,7 @@
</div>
<mat-divider class="my-2"></mat-divider>
<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">
<button mat-stroked-button color="primary" tabindex="4" rtlClipboard type="button" [payload]="signature" (copied)="onCopyField($event)">Copy Signature</button>
</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">
<form #form="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
<mat-form-field 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-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end">
<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-form-field>
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
<input #sign="ngModel" matInput placeholder="Signature provided" name="signature" tabindex="2" required [(ngModel)]="signature" (keyup)="onChange()">
<mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end">
<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-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>
@ -14,7 +16,7 @@
<button mat-flat-button color="primary" tabindex="4" type="submit" (click)="onVerify()">Verify</button>
</div>
<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">
<p *ngIf="verifyRes.verified">Pubkey Used</p>
</div>

@ -8,20 +8,23 @@
</mat-card-header>
<mat-card-content class="padding-gap-x-large">
<form #addInvoiceForm="ngForm" fxLayout="row wrap" fxLayoutAlign="start space-between" fxFlex="100">
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
<input matInput autoFocus placeholder="Description" tabindex="2" name="description" [(ngModel)]="description">
<mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end">
<mat-label>Description</mat-label>
<input matInput autoFocus tabindex="2" name="description" [(ngModel)]="description">
</mat-form-field>
<div fxLayout="row" fxLayoutAlign="space-between start" fxFlex="100">
<mat-form-field fxFlex="40">
<input matInput placeholder="Amount" type="number" tabindex="3" name="invoiceValue" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
<mat-form-field fxLayout="column" fxFlex="40">
<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>
<mat-hint>{{invoiceValueHint}}</mat-hint>
</mat-form-field>
<mat-form-field 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-form-field fxLayout="column" fxFlex="30">
<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>
</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-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">{{timeUnit | titlecase}}</mat-option>
</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>
<span *ngIf="!invoice?.bolt11 && !invoice?.bolt12" class="font-size-120">QR Code Not Applicable</span>
</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 fxFlex="100" class="alert alert-warn">
<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">
<form *ngIf="calledFrom === 'home'" #addInvoiceForm="ngForm" fxLayout="row wrap" fxLayoutAlign="stretch start" fxFlex="100">
<mat-form-field fxFlex="100" fxLayoutAlign="space-between stretch">
<input matInput placeholder="Description" tabindex="2" name="description" [(ngModel)]="description">
<mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
<mat-label>Description</mat-label>
<input matInput tabindex="2" name="description" [(ngModel)]="description">
</mat-form-field>
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
<input matInput placeholder="Amount" name="invoiceValue" type="number" tabindex="3" [step]="100" [min]="1" [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()">
<mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end">
<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>
<mat-hint>{{invoiceValueHint}}</mat-hint>
</mat-form-field>
@ -24,13 +26,15 @@
<span class="page-title">Invoices History</span>
</div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -62,7 +66,7 @@
<ng-container matColumnDef="description">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Description</th>
<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>
</div>
</td>
@ -70,7 +74,7 @@
<ng-container matColumnDef="label">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Label</th>
<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>
</div>
</td>
@ -78,7 +82,7 @@
<ng-container matColumnDef="payment_hash">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th>
<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>
</div>
</td>
@ -86,7 +90,7 @@
<ng-container matColumnDef="bolt11">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
<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>
</div>
</td>

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

@ -97,7 +97,7 @@ export class CLNLightningInvoicesTableComponent implements OnInit, AfterViewInit
this.displayedColumns.unshift('status');
this.displayedColumns.push('actions');
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.store.select(listInvoices).pipe(takeUntil(this.unSubs[3])).

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

@ -7,13 +7,15 @@
<span class="page-title">Offer Bookmarks</span>
</div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -27,7 +29,7 @@
<ng-container matColumnDef="title">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Title</th>
<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>
</div>
</td>
@ -35,7 +37,7 @@
<ng-container matColumnDef="description">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Description</th>
<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>
</div>
</td>
@ -47,7 +49,7 @@
<ng-container matColumnDef="bolt12">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
<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>
</div>
</td>

@ -75,7 +75,7 @@ export class CLNOfferBookmarksTableComponent implements OnInit, AfterViewInit, O
}
this.displayedColumns.push('actions');
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.store.select(offerBookmarks).pipe(takeUntil(this.unSubs[1])).

@ -9,13 +9,15 @@
<span class="page-title">Offers History</span>
</div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -32,7 +34,7 @@
<ng-container matColumnDef="offer_id">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Offer ID</th>
<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">
{{offer.offer_id}}
</span>
@ -52,7 +54,7 @@
<ng-container matColumnDef="bolt12">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
<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">
{{offer.bolt12}}
</span>

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

@ -99,7 +99,7 @@ export class CLNOffersTableComponent implements OnInit, AfterViewInit, OnDestroy
this.displayedColumns.unshift('active');
this.displayedColumns.push('actions');
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.store.select(offers).pipe(takeUntil(this.unSubs[3])).

@ -1,7 +1,8 @@
<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">
<mat-form-field fxFlex="100">
<textarea #paymentReq="ngModel" matInput placeholder="Payment Request" name="paymentRequest" tabindex="1" required [perfectScrollbar] [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea>
<mat-form-field fxLayout="column" fxFlex="100">
<mat-label>Payment Request</mat-label>
<textarea #paymentReq="ngModel" matInput name="paymentRequest" tabindex="1" required [perfectScrollbar] [ngModel]="paymentRequest" (ngModelChange)="onPaymentRequestEntry($event)" (matTextareaAutosize)="true"></textarea>
<mat-hint *ngIf="paymentRequest && paymentDecodedHint !== ''">{{paymentDecodedHint}}</mat-hint>
<mat-error *ngIf="!paymentRequest">Payment request is required.</mat-error>
</mat-form-field>
@ -20,13 +21,15 @@
<span class="page-title">Payments History</span>
</div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -54,7 +57,7 @@
<ng-container matColumnDef="payment_hash">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Payment Hash</th>
<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>
</td>
@ -62,7 +65,7 @@
<ng-container matColumnDef="bolt11">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Invoice</th>
<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>
</td>
@ -70,7 +73,7 @@
<ng-container matColumnDef="label">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Label</th>
<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>
</td>
@ -78,7 +81,7 @@
<ng-container matColumnDef="destination">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Destination</th>
<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>
</td>
@ -86,7 +89,7 @@
<ng-container matColumnDef="memo">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Memo</th>
<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>
</td>
@ -155,7 +158,7 @@
</ng-container>
<ng-container matColumnDef="group_payment_hash">
<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>
<span *ngIf="payment.is_expanded">
@ -167,11 +170,11 @@
</ng-container>
<ng-container matColumnDef="group_bolt11">
<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>
<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>
</span>
@ -179,11 +182,11 @@
</ng-container>
<ng-container matColumnDef="group_label">
<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>
<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>
</span>
@ -191,11 +194,11 @@
</ng-container>
<ng-container matColumnDef="group_destination">
<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>
<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>
</span>
@ -203,11 +206,11 @@
</ng-container>
<ng-container matColumnDef="group_memo">
<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>
<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>
</span>

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

@ -105,7 +105,7 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
this.mppColumns = [];
this.displayedColumns.map((col) => this.mppColumns.push('group_' + col));
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.mppColumns);
});

@ -27,37 +27,43 @@
</div>
</div>
<ng-template #invoiceBlock>
<mat-form-field 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-form-field fxLayout="column" fxFlex="100">
<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-error *ngIf="!paymentRequest">Payment request is required.</mat-error>
<mat-error *ngIf="paymentReq.errors?.decodeError">{{paymentDecodedHint}}</mat-error>
</mat-form-field>
<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-error *ngIf="!paymentAmount">Payment amount is required.</mat-error>
</mat-form-field>
</ng-template>
<ng-template #keysendBlock>
<mat-form-field fxFlex="100">
<input autoFocus matInput placeholder="Pubkey" name="pubkey" tabindex="4" required [(ngModel)]="pubkey">
<mat-form-field fxLayout="column" fxFlex="100">
<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-form-field>
<mat-form-field fxFlex="100">
<input #keysendAmt="ngModel" matInput placeholder="Amount (Sats)" name="keysendAmount" tabindex="5" required [(ngModel)]="keysendAmount">
<mat-form-field fxLayout="column" fxFlex="100">
<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-form-field>
</ng-template>
<ng-template #offerBlock>
<mat-form-field 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-form-field fxLayout="column" fxFlex="100">
<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-error *ngIf="!offerRequest">Offer request is required.</mat-error>
<mat-error *ngIf="offerReq.errors?.decodeError">{{offerDecodedHint}}</mat-error>
</mat-form-field>
<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-error *ngIf="!offerAmount">Offer amount is required.</mat-error>
</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>
</div>
<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>
</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>
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet>
</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>
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
<router-outlet></router-outlet>
</div>

@ -3,18 +3,13 @@
<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">
<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-button checked class="mr-4" [value]="0">Node</mat-radio-button>
</mat-radio-group>
</div>
<mat-form-field 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> -->
<input #key matInput name="lookupKey" tabindex="2" required [formControl]="lookupKeyCtrl" [placeholder]="lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'">
<mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end" [ngClass]="{'mt-1': true, 'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
<mat-label>{{lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'}}</mat-label>
<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?.invalid">Invalid {{lookupFields[selectedFieldId]?.placeholder}}.</mat-error>
</mat-form-field>

@ -4,11 +4,11 @@
<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>
</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">
<mat-error *ngIf="!nodeId">Destination Node ID is required.</mat-error>
</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-error *ngIf="!amount">Amount is required.</mat-error>
</mat-form-field>
@ -40,7 +40,7 @@
<ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell> Alias</th>
<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>
</td>
@ -48,7 +48,7 @@
<ng-container matColumnDef="nodeId">
<th *matHeaderCellDef mat-header-cell> ID</th>
<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>
</td>

@ -8,22 +8,22 @@
</mat-card-header>
<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()">
<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">
<mat-error *ngIf="!transaction.address">Bitcoin address is required.</mat-error>
</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">
<span matSuffix>{{selAmountUnit}} </span>
<mat-error *ngIf="!transaction.amount">{{amountError}}</mat-error>
</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-option *ngFor="let amountUnit of amountUnits" [value]="amountUnit">{{amountUnit}}</mat-option>
</mat-select>
</mat-form-field>
<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">
<mat-error *ngIf="!transaction.blocks">Target Confirmation Blocks is required.</mat-error>
</mat-form-field>

@ -5,13 +5,15 @@
<span class="page-title">Transaction History</span>
</div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -27,7 +29,7 @@
<ng-container matColumnDef="address">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Address</th>
<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>
</div>
</td>
@ -35,7 +37,7 @@
<ng-container matColumnDef="blockHash">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Blockhash</th>
<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>
</div>
</td>
@ -43,7 +45,7 @@
<ng-container matColumnDef="txid">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Transaction ID</th>
<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>
</div>
</td>

@ -72,7 +72,7 @@ export class ECLOnChainTransactionHistoryComponent implements OnInit, OnDestroy
}
this.displayedColumns.push('actions');
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.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>
</nav>
<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">
<router-outlet></router-outlet>
</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 fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -33,7 +35,7 @@
<ng-container matColumnDef="channelId">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<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>
</div>
</td>
@ -41,7 +43,7 @@
<ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<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>
</div>
</td>
@ -49,7 +51,7 @@
<ng-container matColumnDef="nodeId">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
<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>
</div>
</td>

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

@ -80,7 +80,7 @@ export class ECLChannelInactiveTableComponent implements OnInit, AfterViewInit,
this.displayedColumns.unshift('announceChannel');
this.displayedColumns.push('actions');
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.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 fxFlex="70"></div>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49">
<mat-select placeholder="Filter By" tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<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-select>
</mat-form-field>
<mat-form-field fxFlex="49">
<input matInput name="filter" placeholder="Filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
@ -29,7 +31,7 @@
<ng-container matColumnDef="channelId">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
<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>
</div>
</td>
@ -37,7 +39,7 @@
<ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
<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>
</div>
</td>
@ -45,7 +47,7 @@
<ng-container matColumnDef="nodeId">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node ID</th>
<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>
</div>
</td>

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

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

Loading…
Cancel
Save