From aece70ce4a0aeaa93e0e7d2cf95e629d8e794c0f Mon Sep 17 00:00:00 2001
From: myxmaster <sebi.mueller.83@gmail.com>
Date: Tue, 26 Nov 2024 22:59:02 +0100
Subject: [PATCH] smaller line spacing in channel details

---
 components/FeeBreakdown.tsx | 25 +++++++++++++++++++++++
 components/KeyValue.tsx     | 11 ++++++++--
 views/Channels/Channel.tsx  | 40 +++++++++++++++++++++++++++++++------
 3 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/components/FeeBreakdown.tsx b/components/FeeBreakdown.tsx
index 6fc5d7327..12baac322 100644
--- a/components/FeeBreakdown.tsx
+++ b/components/FeeBreakdown.tsx
@@ -113,6 +113,7 @@ export default class FeeBreakdown extends React.Component<
                                     sensitive
                                 />
                             }
+                            compact
                         />
                         <KeyValue
                             keyValue={localeString(
@@ -122,6 +123,7 @@ export default class FeeBreakdown extends React.Component<
                                 Number(localPolicy.fee_rate_milli_msat) / 10000
                             }%`}
                             sensitive
+                            compact
                         />
                         <KeyValue
                             keyValue={localeString(
@@ -137,6 +139,7 @@ export default class FeeBreakdown extends React.Component<
                                     sensitive
                                 />
                             }
+                            compact
                         />
                         <KeyValue
                             keyValue={localeString(
@@ -146,6 +149,7 @@ export default class FeeBreakdown extends React.Component<
                                 Number(remotePolicy.fee_rate_milli_msat) / 10000
                             }%`}
                             sensitive
+                            compact
                         />
                         {BackendUtils.supportInboundFees() && (
                             <>
@@ -165,6 +169,7 @@ export default class FeeBreakdown extends React.Component<
                                                 sensitive
                                             />
                                         }
+                                        compact
                                     />
                                 )}
                                 {!!localPolicy.inbound_fee_rate_milli_msat && (
@@ -178,6 +183,7 @@ export default class FeeBreakdown extends React.Component<
                                             ) / 10000
                                         }%`}
                                         sensitive
+                                        compact
                                     />
                                 )}
                                 {!!remotePolicy.inbound_fee_base_msat && (
@@ -196,6 +202,7 @@ export default class FeeBreakdown extends React.Component<
                                                 sensitive
                                             />
                                         }
+                                        compact
                                     />
                                 )}
                                 {!!remotePolicy.inbound_fee_rate_milli_msat && (
@@ -209,6 +216,7 @@ export default class FeeBreakdown extends React.Component<
                                             ) / 10000
                                         }%`}
                                         sensitive
+                                        compact
                                     />
                                 )}
                             </>
@@ -264,6 +272,7 @@ export default class FeeBreakdown extends React.Component<
                                     sensitive
                                 />
                             }
+                            compact
                         />
                         <KeyValue
                             keyValue={localeString('views.Channel.remoteMin')}
@@ -274,6 +283,7 @@ export default class FeeBreakdown extends React.Component<
                                     sensitive
                                 />
                             }
+                            compact
                         />
                         <KeyValue
                             keyValue={localeString('views.Channel.localMax')}
@@ -286,6 +296,7 @@ export default class FeeBreakdown extends React.Component<
                                     sensitive
                                 />
                             }
+                            compact
                         />
                         <KeyValue
                             keyValue={localeString('views.Channel.remoteMax')}
@@ -299,6 +310,7 @@ export default class FeeBreakdown extends React.Component<
                                     sensitive
                                 />
                             }
+                            compact
                         />
 
                         <KeyValue
@@ -308,6 +320,7 @@ export default class FeeBreakdown extends React.Component<
                             value={`${
                                 localPolicy.time_lock_delta
                             } ${localeString('general.blocks')}`}
+                            compact
                         />
                         <KeyValue
                             keyValue={localeString(
@@ -316,6 +329,7 @@ export default class FeeBreakdown extends React.Component<
                             value={`${
                                 remotePolicy.time_lock_delta
                             } ${localeString('general.blocks')}`}
+                            compact
                         />
                         <Divider
                             orientation="horizontal"
@@ -333,6 +347,7 @@ export default class FeeBreakdown extends React.Component<
                             value={DateTimeUtils.listFormattedDate(
                                 localPolicy.last_update
                             )}
+                            compact
                         />
                         <KeyValue
                             keyValue={localeString(
@@ -341,6 +356,7 @@ export default class FeeBreakdown extends React.Component<
                             value={DateTimeUtils.listFormattedDate(
                                 remotePolicy.last_update
                             )}
+                            compact
                         />
                         <KeyValue
                             keyValue={localeString('views.Channel.peerStatus')}
@@ -349,6 +365,7 @@ export default class FeeBreakdown extends React.Component<
                                     ? localeString('views.Channel.active')
                                     : localeString('views.Channel.inactive')
                             }
+                            compact
                         />
                         {total_satoshis_received && (
                             <KeyValue
@@ -362,6 +379,7 @@ export default class FeeBreakdown extends React.Component<
                                         toggleable
                                     />
                                 }
+                                compact
                             />
                         )}
 
@@ -377,6 +395,7 @@ export default class FeeBreakdown extends React.Component<
                                         toggleable
                                     />
                                 }
+                                compact
                             />
                         )}
                         <Divider
@@ -396,6 +415,7 @@ export default class FeeBreakdown extends React.Component<
                                     ? localeString('views.Channel.yourNode')
                                     : peerDisplay
                             }
+                            compact
                         />
 
                         {commit_fee && (
@@ -411,6 +431,7 @@ export default class FeeBreakdown extends React.Component<
                                     />
                                 }
                                 sensitive
+                                compact
                             />
                         )}
 
@@ -420,6 +441,7 @@ export default class FeeBreakdown extends React.Component<
                                     'views.Channel.commitWeight'
                                 )}
                                 value={commit_weight}
+                                compact
                             />
                         )}
 
@@ -437,6 +459,7 @@ export default class FeeBreakdown extends React.Component<
                                     ),
                                     localeString('views.Channel.csvDelay.info2')
                                 ]}
+                                compact
                             />
                         )}
 
@@ -454,6 +477,7 @@ export default class FeeBreakdown extends React.Component<
                                         testnet
                                     )
                                 }
+                                compact
                             />
                         )}
                         {channelPoint && (
@@ -470,6 +494,7 @@ export default class FeeBreakdown extends React.Component<
                                         testnet
                                     )
                                 }
+                                compact
                             />
                         )}
                     </React.Fragment>
diff --git a/components/KeyValue.tsx b/components/KeyValue.tsx
index ca1e7e189..3a1ed205a 100644
--- a/components/KeyValue.tsx
+++ b/components/KeyValue.tsx
@@ -34,6 +34,7 @@ interface KeyValueProps {
     disableCopy?: boolean;
     ModalStore?: ModalStore;
     SettingsStore?: SettingsStore;
+    compact?: boolean;
 }
 
 @inject('ModalStore', 'SettingsStore')
@@ -52,7 +53,8 @@ export default class KeyValue extends React.Component<KeyValueProps, {}> {
             mempoolLink,
             disableCopy,
             ModalStore,
-            SettingsStore
+            SettingsStore,
+            compact
         } = this.props;
         const { toggleInfoModal } = ModalStore!;
 
@@ -167,7 +169,12 @@ export default class KeyValue extends React.Component<KeyValueProps, {}> {
         );
 
         return (
-            <View style={{ paddingTop: 10, paddingBottom: 10 }}>
+            <View
+                style={{
+                    paddingTop: compact ? 5 : 10,
+                    paddingBottom: compact ? 5 : 10
+                }}
+            >
                 <KeyValueRow />
             </View>
         );
diff --git a/views/Channels/Channel.tsx b/views/Channels/Channel.tsx
index 23e69afc8..c6d9672aa 100644
--- a/views/Channels/Channel.tsx
+++ b/views/Channels/Channel.tsx
@@ -396,12 +396,14 @@ export default class ChannelView extends React.Component<
                         <KeyValue
                             keyValue={localeString('views.Channel.channelId')}
                             value={channelId}
+                            compact
                         />
                     )}
                     {shortChannelId && (
                         <KeyValue
                             keyValue={localeString('views.Channel.scid')}
                             value={shortChannelId}
+                            compact
                         />
                     )}
                     {!!alias_scids && alias_scids.length > 0 && (
@@ -414,12 +416,14 @@ export default class ChannelView extends React.Component<
                             value={PrivacyUtils.sensitiveValue(
                                 alias_scids.join(', ')
                             )}
+                            compact
                         />
                     )}
                     {zero_conf && (
                         <KeyValue
                             keyValue={localeString('views.Channel.zeroConf')}
                             value={localeString('general.true')}
+                            compact
                         />
                     )}
                     {!(closeHeight || closeType) && (
@@ -431,6 +435,7 @@ export default class ChannelView extends React.Component<
                                     : localeString('general.false')
                             }
                             color={privateChannel ? 'green' : '#808000'}
+                            compact
                         />
                     )}
                     {getCommitmentType && (
@@ -439,6 +444,7 @@ export default class ChannelView extends React.Component<
                                 'views.Channel.commitmentType'
                             )}
                             value={getCommitmentType}
+                            compact
                         />
                     )}
                     {chain_hash && (
@@ -446,6 +452,7 @@ export default class ChannelView extends React.Component<
                             keyValue={localeString('views.Channel.chainHash')}
                             value={chain_hash}
                             sensitive
+                            compact
                         />
                     )}
                     {!!closeHeight && (
@@ -460,6 +467,7 @@ export default class ChannelView extends React.Component<
                                     testnet
                                 )
                             }
+                            compact
                         />
                     )}
                     {closeType && (
@@ -467,6 +475,7 @@ export default class ChannelView extends React.Component<
                             keyValue={localeString('views.Channel.closeType')}
                             value={closeType}
                             sensitive
+                            compact
                         />
                     )}
                     {getOpenInitiator && (
@@ -476,6 +485,7 @@ export default class ChannelView extends React.Component<
                             )}
                             value={getOpenInitiator}
                             sensitive
+                            compact
                         />
                     )}
                     {getCloseInitiator && (
@@ -485,6 +495,7 @@ export default class ChannelView extends React.Component<
                             )}
                             value={getCloseInitiator}
                             sensitive
+                            compact
                         />
                     )}
                     {closing_txid && (
@@ -499,6 +510,7 @@ export default class ChannelView extends React.Component<
                                     testnet
                                 )
                             }
+                            compact
                         />
                     )}
                     {closing_tx_hash && (
@@ -515,6 +527,7 @@ export default class ChannelView extends React.Component<
                                     testnet
                                 )
                             }
+                            compact
                         />
                     )}
                     {(pendingOpen ||
@@ -535,6 +548,7 @@ export default class ChannelView extends React.Component<
                                         testnet
                                     )
                                 }
+                                compact
                             />
                         )}
                     {!!pending_htlcs && pending_htlcs.length > 0 && (
@@ -595,6 +609,7 @@ export default class ChannelView extends React.Component<
                                 />
                             }
                             sensitive
+                            compact
                         />
                     )}
                     {time_locked_balance && (
@@ -610,6 +625,7 @@ export default class ChannelView extends React.Component<
                                 />
                             }
                             sensitive
+                            compact
                         />
                     )}
                     <KeyValue
@@ -626,12 +642,14 @@ export default class ChannelView extends React.Component<
                                 }
                             />
                         }
+                        compact
                     />
                     <KeyValue
                         keyValue={localeString('views.Channel.remoteBalance')}
                         value={
                             <Amount sats={remoteBalance} sensitive toggleable />
                         }
+                        compact
                     />
                     {unsettled_balance !== '0' && (
                         <KeyValue
@@ -645,10 +663,13 @@ export default class ChannelView extends React.Component<
                                     toggleable
                                 />
                             }
+                            compact
                         />
                     )}
                     <KeyValue
-                        keyValue={localeString('views.Channel.Total.outbound')}
+                        keyValue={` ${localeString(
+                            'views.Channel.Total.outbound'
+                        )}`}
                         value={
                             <Amount
                                 sats={sendingCapacity}
@@ -657,9 +678,12 @@ export default class ChannelView extends React.Component<
                             />
                         }
                         indicatorColor={themeColor('outbound')}
+                        compact
                     />
                     <KeyValue
-                        keyValue={localeString('views.Channel.Total.inbound')}
+                        keyValue={` ${localeString(
+                            'views.Channel.Total.inbound'
+                        )}`}
                         value={
                             <Amount
                                 sats={receivingCapacity}
@@ -668,12 +692,13 @@ export default class ChannelView extends React.Component<
                             />
                         }
                         indicatorColor={themeColor('inbound')}
+                        compact
                     />
                     {!!local_chan_reserve_sat && (
                         <KeyValue
-                            keyValue={localeString(
+                            keyValue={` ${localeString(
                                 'views.Channel.localReserve'
-                            )}
+                            )}`}
                             value={
                                 <Amount
                                     sats={local_chan_reserve_sat}
@@ -691,13 +716,14 @@ export default class ChannelView extends React.Component<
                             )}
                             infoModalLink="https://bitcoin.design/guide/how-it-works/liquidity/#what-is-a-channel-reserve"
                             indicatorColor={themeColor('outboundReserve')}
+                            compact
                         />
                     )}
                     {!!remote_chan_reserve_sat && (
                         <KeyValue
-                            keyValue={localeString(
+                            keyValue={` ${localeString(
                                 'views.Channel.remoteReserve'
-                            )}
+                            )}`}
                             value={
                                 <Amount
                                     sats={remote_chan_reserve_sat}
@@ -710,6 +736,7 @@ export default class ChannelView extends React.Component<
                             )}
                             infoModalLink="https://bitcoin.design/guide/how-it-works/liquidity/#what-is-a-channel-reserve"
                             indicatorColor={themeColor('inboundReserve')}
+                            compact
                         />
                     )}
                     {capacity && (
@@ -718,6 +745,7 @@ export default class ChannelView extends React.Component<
                             value={
                                 <Amount sats={capacity} sensitive toggleable />
                             }
+                            compact
                         />
                     )}