diff --git a/frontend/src/app/lightning/channel/channel-box/channel-box.component.html b/frontend/src/app/lightning/channel/channel-box/channel-box.component.html
index 8b486eff5..a61273d4d 100644
--- a/frontend/src/app/lightning/channel/channel-box/channel-box.component.html
+++ b/frontend/src/app/lightning/channel/channel-box/channel-box.component.html
@@ -11,44 +11,64 @@
-
-
-
-
- Fee rate |
-
- {{ channel.fee_rate ?? '-' }} ppm ({{ channel.fee_rate / 10000 | number }}%)
- |
-
-
- Base fee |
-
-
- |
-
-
- Min HTLC |
-
-
- |
-
-
- Max HTLC |
-
-
- |
-
-
- Timelock delta |
-
-
- |
-
-
-
-
+
+
+
+
+ Fee rate |
+
+
+ {{ channel.fee_rate !== null ? (channel.fee_rate | amountShortener : 2 : undefined : true) : '-' }} ppm {{ channel.fee_rate !== null ? '(' + (channel.fee_rate / 10000 | amountShortener : 2 : undefined : true) + '%)' : '' }}
+
+
+ {{ channel.fee_rate !== null ? (channel.fee_rate | number) : '-' }} ppm {{ channel.fee_rate !== null ? '(' + (channel.fee_rate / 10000 | number) + '%)' : '' }}
+
+ |
+
+
+ Base fee |
+
+
+
+
+ {{ channel.base_fee_mtokens | amountShortener : 0 }}
+ msats
+
+
+ -
+
+
+
+ {{ channel.base_fee_mtokens === 0 ? 'Zero base fee' : 'Non-zero base fee' }}
+
+
+ |
+
+
+ Min HTLC |
+
+
+ |
+
+
+ Max HTLC |
+
+
+ |
+
+
+ Timelock delta |
+
+
+ |
+
+
+
{{ i }} blocks
diff --git a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss b/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
index bc7b56f62..f157f380a 100644
--- a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
+++ b/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
@@ -21,4 +21,10 @@
.box {
margin-bottom: 20px;
}
+}
+
+.base-fee {
+ @media (max-width: 768px) {
+ padding-right: 0px;
+ }
}
\ No newline at end of file
diff --git a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts
index db3d94284..71ff76f77 100644
--- a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts
+++ b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts
@@ -7,6 +7,7 @@ export class AmountShortenerPipe implements PipeTransform {
transform(num: number, ...args: any[]): unknown {
const digits = args[0] ?? 1;
const unit = args[1] || undefined;
+ const isMoney = args[2] || false;
if (num < 1000) {
return num.toFixed(digits);
@@ -16,7 +17,7 @@ export class AmountShortenerPipe implements PipeTransform {
{ value: 1, symbol: '' },
{ value: 1e3, symbol: 'k' },
{ value: 1e6, symbol: 'M' },
- { value: 1e9, symbol: 'G' },
+ { value: 1e9, symbol: isMoney ? 'B' : 'G' },
{ value: 1e12, symbol: 'T' },
{ value: 1e15, symbol: 'P' },
{ value: 1e18, symbol: 'E' }