From 1738456596c367d1c6b2bcbac5eaf5c549b33463 Mon Sep 17 00:00:00 2001
From: Evan Kaloudis <zeusln@tutanota.com>
Date: Fri, 15 Nov 2024 20:43:25 -0500
Subject: [PATCH 1/3] Channels: reserve updates

---
 components/BalanceSlider.tsx        | 10 ++++-
 components/Channels/ChannelItem.tsx | 61 ++++++++++++++++++-----------
 components/HopPicker.tsx            | 18 ++++++---
 components/LSPS1OrderResponse.tsx   |  4 +-
 models/Channel.ts                   | 42 ++++++++++++++++----
 stores/ChannelsStore.ts             |  4 +-
 views/Channels/Channel.tsx          | 61 ++++++++++++++++++++++-------
 views/Channels/ChannelsPane.tsx     | 14 +++++--
 8 files changed, 153 insertions(+), 61 deletions(-)

diff --git a/components/BalanceSlider.tsx b/components/BalanceSlider.tsx
index e7ffba726..55db625c5 100644
--- a/components/BalanceSlider.tsx
+++ b/components/BalanceSlider.tsx
@@ -5,6 +5,8 @@ import { ChannelItem } from '../components/Channels/ChannelItem';
 interface BalanceSliderProps {
     localBalance: string | number;
     remoteBalance: string | number;
+    sendingCapacity: string | number;
+    receivingCapacity: string | number;
     localReserveBalance?: string | number;
     remoteReserveBalance?: string | number;
     list?: boolean;
@@ -18,14 +20,18 @@ export default class BalanceSlider extends React.Component<
         const {
             localBalance,
             remoteBalance,
+            sendingCapacity,
+            receivingCapacity,
             localReserveBalance,
             remoteReserveBalance
         } = this.props;
         return (
             <View style={styles.slider}>
                 <ChannelItem
-                    inbound={remoteBalance}
-                    outbound={localBalance}
+                    localBalance={localBalance}
+                    remoteBalance={remoteBalance}
+                    sendingCapacity={sendingCapacity}
+                    receivingCapacity={receivingCapacity}
                     inboundReserve={localReserveBalance}
                     outboundReserve={remoteReserveBalance}
                     noBorder
diff --git a/components/Channels/ChannelItem.tsx b/components/Channels/ChannelItem.tsx
index 419d603d3..6c8f3554e 100644
--- a/components/Channels/ChannelItem.tsx
+++ b/components/Channels/ChannelItem.tsx
@@ -20,8 +20,10 @@ import { localeString } from './../../utils/LocaleUtils';
 export function ChannelItem({
     title,
     secondTitle,
-    inbound,
-    outbound,
+    localBalance,
+    remoteBalance,
+    sendingCapacity,
+    receivingCapacity,
     inboundReserve = 0,
     outboundReserve = 0,
     largestTotal,
@@ -31,12 +33,15 @@ export function ChannelItem({
     noBorder,
     hideLabels,
     selected,
-    highlightLabels
+    highlightLabels,
+    isBelowReserve
 }: {
     title?: string;
     secondTitle?: string;
-    inbound: string | number;
-    outbound: string | number;
+    localBalance: string | number;
+    remoteBalance: string | number;
+    sendingCapacity?: string | number;
+    receivingCapacity?: string | number;
     inboundReserve?: string | number;
     outboundReserve?: string | number;
     largestTotal?: number;
@@ -47,6 +52,7 @@ export function ChannelItem({
     hideLabels?: boolean;
     selected?: boolean;
     highlightLabels?: boolean;
+    isBelowReserve?: boolean;
 }) {
     const { settings } = Stores.settingsStore;
     const { privacy } = settings;
@@ -58,7 +64,7 @@ export function ChannelItem({
         status === Status.Opening;
 
     const percentOfLargest = largestTotal
-        ? (Number(inbound) + Number(outbound)) / largestTotal
+        ? (Number(localBalance) + Number(remoteBalance)) / largestTotal
         : 1.0;
     return (
         <View
@@ -129,25 +135,33 @@ export function ChannelItem({
                 ) : null}
                 {status && <Tag status={status} />}
             </Row>
-            {inbound && outbound && !(inbound == 0 && outbound == 0) && (
-                <Row style={{ marginTop: 15, marginBottom: 15 }}>
-                    <BalanceBar
-                        outbound={lurkerMode ? 50 : Number(outbound)}
-                        inbound={lurkerMode ? 50 : Number(inbound)}
-                        outboundReserve={
-                            lurkerMode ? 0 : Number(outboundReserve)
-                        }
-                        inboundReserve={lurkerMode ? 0 : Number(inboundReserve)}
-                        offline={isOffline}
-                        percentOfLargest={percentOfLargest}
-                        showProportionally={lurkerMode ? false : true}
-                    />
-                </Row>
-            )}
+            {localBalance &&
+                remoteBalance &&
+                !(localBalance == 0 && remoteBalance == 0) && (
+                    <Row style={{ marginTop: 15, marginBottom: 15 }}>
+                        <BalanceBar
+                            outbound={lurkerMode ? 50 : Number(localBalance)}
+                            inbound={lurkerMode ? 50 : Number(remoteBalance)}
+                            outboundReserve={
+                                lurkerMode ? 0 : Number(outboundReserve)
+                            }
+                            inboundReserve={
+                                lurkerMode ? 0 : Number(inboundReserve)
+                            }
+                            offline={isOffline}
+                            percentOfLargest={percentOfLargest}
+                            showProportionally={lurkerMode ? false : true}
+                        />
+                    </Row>
+                )}
             {!hideLabels && (
                 <Row justify="space-between">
                     <Amount
-                        sats={outbound}
+                        sats={
+                            isBelowReserve
+                                ? localBalance
+                                : sendingCapacity || localBalance
+                        }
                         sensitive
                         accessible
                         accessibilityLabel={localeString(
@@ -156,9 +170,10 @@ export function ChannelItem({
                         colorOverride={
                             highlightLabels ? themeColor('outbound') : undefined
                         }
+                        color={isBelowReserve ? 'warning' : undefined}
                     />
                     <Amount
-                        sats={inbound}
+                        sats={receivingCapacity || remoteBalance}
                         sensitive
                         accessible
                         accessibilityLabel={localeString(
diff --git a/components/HopPicker.tsx b/components/HopPicker.tsx
index fee5f61d8..3a6e2ff20 100644
--- a/components/HopPicker.tsx
+++ b/components/HopPicker.tsx
@@ -144,10 +144,13 @@ export default class ChannelPicker extends React.Component<
                 <TouchableHighlight onPress={() => this.toggleItem(item)}>
                     <ChannelItem
                         title={item.displayName}
-                        inbound={item.remoteBalance}
-                        outbound={item.localBalance}
-                        inboundReserve={item.remoteReserveBalance}
+                        localBalance={item.localBalance}
+                        remoteBalance={item.remoteBalance}
+                        sendingCapacity={item.sendingCapacity}
+                        receivingCapacity={item.receivingCapacity}
                         outboundReserve={item.localReserveBalance}
+                        inboundReserve={item.remoteReserveBalance}
+                        isBelowReserve={item.isBelowReserve}
                         largestTotal={largestChannelSats}
                         selected={selected}
                     />
@@ -159,10 +162,13 @@ export default class ChannelPicker extends React.Component<
             <TouchableHighlight onPress={() => this.toggleItem(item)}>
                 <ChannelItem
                     title={item.displayName}
-                    inbound={item.remoteBalance}
-                    outbound={item.localBalance}
-                    inboundReserve={item.remoteReserveBalance}
+                    localBalance={item.localBalance}
+                    remoteBalance={item.remoteBalance}
+                    sendingCapacity={item.sendingCapacity}
+                    receivingCapacity={item.receivingCapacity}
                     outboundReserve={item.localReserveBalance}
+                    inboundReserve={item.remoteReserveBalance}
+                    isBelowReserve={item.isBelowReserve}
                     selected={selected}
                 />
             </TouchableHighlight>
diff --git a/components/LSPS1OrderResponse.tsx b/components/LSPS1OrderResponse.tsx
index 46a8b0830..4b9b7ccfc 100644
--- a/components/LSPS1OrderResponse.tsx
+++ b/components/LSPS1OrderResponse.tsx
@@ -48,8 +48,8 @@ export default class LSPS1OrderResponse extends React.Component<
                 <ScrollView>
                     <View style={{ paddingHorizontal: 20 }}>
                         <ChannelItem
-                            outbound={orderResponse?.client_balance_sat}
-                            inbound={orderResponse?.lsp_balance_sat}
+                            localBalance={orderResponse?.client_balance_sat}
+                            remoteBalance={orderResponse?.lsp_balance_sat}
                             title={localeString('views.LSPS1.yourBalance')}
                             secondTitle={localeString(
                                 'views.LSPS1.receiveLimit'
diff --git a/models/Channel.ts b/models/Channel.ts
index dacf5a4f3..389bdbd13 100644
--- a/models/Channel.ts
+++ b/models/Channel.ts
@@ -95,21 +95,30 @@ export default class Channel extends BaseModel {
 
     @computed
     public get localBalance(): string {
-        const totalLocalBalance = this.to_us
+        return this.to_us
             ? (Number(this.to_us) / 1000).toString()
             : this.to_us_msat
             ? (Number(this.to_us_msat) / 1000).toString()
             : this.msatoshi_to_us
             ? (Number(this.msatoshi_to_us) / 1000).toString()
             : this.local_balance || '0';
-        return (
-            Number(totalLocalBalance) - Number(this.localReserveBalance)
-        ).toString();
+    }
+
+    @computed
+    public get sendingCapacity(): string {
+        const localBalance = new BigNumber(this.localBalance).minus(
+            this.localReserveBalance
+        );
+        if (localBalance.gt(0)) {
+            return localBalance.toString();
+        } else {
+            return '0';
+        }
     }
 
     @computed
     public get remoteBalance(): string {
-        const totalRemoteBalance = this.total
+        return this.total
             ? ((Number(this.total) - Number(this.to_us)) / 1000).toString()
             : this.total_msat
             ? (
@@ -122,9 +131,18 @@ export default class Channel extends BaseModel {
                   1000
               ).toString()
             : this.remote_balance || '0';
-        return (
-            Number(totalRemoteBalance) - Number(this.remoteReserveBalance)
-        ).toString();
+    }
+
+    @computed
+    public get receivingCapacity(): string {
+        const remoteBalance = new BigNumber(this.remoteBalance).minus(
+            this.remoteReserveBalance
+        );
+        if (remoteBalance.gt(0)) {
+            return remoteBalance.toString();
+        } else {
+            return '0';
+        }
     }
 
     @computed
@@ -148,6 +166,14 @@ export default class Channel extends BaseModel {
         ).toString();
     }
 
+    @computed
+    public get isBelowReserve(): boolean {
+        return (
+            new BigNumber(this.localBalance).lt(this.localReserveBalance) &&
+            new BigNumber(this.localBalance).gt(0)
+        );
+    }
+
     /** Channel id
      * @returns {string | undefined} id of the channel or undefined if channel is pending
      */
diff --git a/stores/ChannelsStore.ts b/stores/ChannelsStore.ts
index 50bc6070f..3af77ba5b 100644
--- a/stores/ChannelsStore.ts
+++ b/stores/ChannelsStore.ts
@@ -405,10 +405,10 @@ export default class ChannelsStore {
                 );
                 channels.forEach((channel: Channel) => {
                     const channelRemoteBalance = new BigNumber(
-                        channel.remoteBalance
+                        channel.receivingCapacity
                     );
                     const channelLocalBalance = new BigNumber(
-                        channel.localBalance
+                        channel.sendingCapacity
                     );
                     const channelTotal =
                         channelRemoteBalance.plus(channelLocalBalance);
diff --git a/views/Channels/Channel.tsx b/views/Channels/Channel.tsx
index b067dae67..f1c81d27f 100644
--- a/views/Channels/Channel.tsx
+++ b/views/Channels/Channel.tsx
@@ -231,8 +231,11 @@ export default class ChannelView extends React.Component<
             commit_weight,
             localBalance,
             remoteBalance,
+            sendingCapacity,
+            receivingCapacity,
             localReserveBalance,
             remoteReserveBalance,
+            isBelowReserve,
             commit_fee,
             csv_delay,
             total_satoshis_received,
@@ -358,6 +361,8 @@ export default class ChannelView extends React.Component<
                         {remotePubkey && this.renderContactLink(remotePubkey)}
                     </View>
                     <BalanceSlider
+                        sendingCapacity={lurkerMode ? 50 : sendingCapacity}
+                        receivingCapacity={lurkerMode ? 50 : receivingCapacity}
                         localBalance={lurkerMode ? 50 : localBalance}
                         remoteBalance={lurkerMode ? 50 : remoteBalance}
                         localReserveBalance={
@@ -542,6 +547,18 @@ export default class ChannelView extends React.Component<
                             />
                         </ListItem>
                     )}
+                    {!!alias_scids && alias_scids.length > 0 && (
+                        <KeyValue
+                            keyValue={
+                                alias_scids.length > 1
+                                    ? localeString('views.Channel.aliasScids')
+                                    : localeString('views.Channel.aliasScid')
+                            }
+                            value={PrivacyUtils.sensitiveValue(
+                                alias_scids.join(', ')
+                            )}
+                        />
+                    )}
                     <KeyValue
                         keyValue={localeString('views.Channel.channelBalance')}
                     />
@@ -575,17 +592,42 @@ export default class ChannelView extends React.Component<
                             sensitive
                         />
                     )}
+                    <KeyValue
+                        keyValue={localeString('views.Channel.localBalance')}
+                        value={
+                            <Amount
+                                sats={localBalance}
+                                sensitive
+                                toggleable
+                                color={isBelowReserve ? 'warning' : undefined}
+                            />
+                        }
+                    />
+                    <KeyValue
+                        keyValue={localeString('views.Channel.remoteBalance')}
+                        value={
+                            <Amount sats={remoteBalance} sensitive toggleable />
+                        }
+                    />
                     <KeyValue
                         keyValue={localeString('views.Channel.Total.outbound')}
                         value={
-                            <Amount sats={localBalance} sensitive toggleable />
+                            <Amount
+                                sats={sendingCapacity}
+                                sensitive
+                                toggleable
+                            />
                         }
                         indicatorColor={themeColor('outbound')}
                     />
                     <KeyValue
                         keyValue={localeString('views.Channel.Total.inbound')}
                         value={
-                            <Amount sats={remoteBalance} sensitive toggleable />
+                            <Amount
+                                sats={receivingCapacity}
+                                sensitive
+                                toggleable
+                            />
                         }
                         indicatorColor={themeColor('inbound')}
                     />
@@ -603,18 +645,6 @@ export default class ChannelView extends React.Component<
                             }
                         />
                     )}
-                    {!!alias_scids && alias_scids.length > 0 && (
-                        <KeyValue
-                            keyValue={
-                                alias_scids.length > 1
-                                    ? localeString('views.Channel.aliasScids')
-                                    : localeString('views.Channel.aliasScid')
-                            }
-                            value={PrivacyUtils.sensitiveValue(
-                                alias_scids.join(', ')
-                            )}
-                        />
-                    )}
                     {!!local_chan_reserve_sat && (
                         <KeyValue
                             keyValue={localeString(
@@ -625,6 +655,9 @@ export default class ChannelView extends React.Component<
                                     sats={local_chan_reserve_sat}
                                     sensitive
                                     toggleable
+                                    color={
+                                        isBelowReserve ? 'warning' : undefined
+                                    }
                                 />
                             }
                             infoText={localeString(
diff --git a/views/Channels/ChannelsPane.tsx b/views/Channels/ChannelsPane.tsx
index 863e8611d..7734530fd 100644
--- a/views/Channels/ChannelsPane.tsx
+++ b/views/Channels/ChannelsPane.tsx
@@ -119,9 +119,12 @@ export default class ChannelsPane extends React.PureComponent<ChannelsProps> {
                         title={item.displayName}
                         status={getStatus()}
                         pendingHTLCs={item?.pending_htlcs?.length > 0}
-                        inbound={item.remoteBalance}
-                        outbound={item.localBalance}
+                        localBalance={item.localBalance}
+                        remoteBalance={item.remoteBalance}
+                        receivingCapacity={item.receivingCapacity}
+                        sendingCapacity={item.sendingCapacity}
                         largestTotal={largestChannelSats}
+                        isBelowReserve={item.isBelowReserve}
                     />
                 </TouchableHighlight>
             );
@@ -137,8 +140,10 @@ export default class ChannelsPane extends React.PureComponent<ChannelsProps> {
             >
                 <ChannelItem
                     title={item.displayName}
-                    inbound={item.remoteBalance}
-                    outbound={item.localBalance}
+                    localBalance={item.localBalance}
+                    remoteBalance={item.remoteBalance}
+                    receivingCapacity={item.receivingCapacity}
+                    sendingCapacity={item.sendingCapacity}
                     status={getStatus()}
                     pendingHTLCs={item?.pending_htlcs?.length > 0}
                     pendingTimelock={
@@ -146,6 +151,7 @@ export default class ChannelsPane extends React.PureComponent<ChannelsProps> {
                             ? forceCloseTimeLabel(item.blocks_til_maturity)
                             : undefined
                     }
+                    isBelowReserve={item.isBelowReserve}
                 />
             </TouchableHighlight>
         );

From 5a11f7cec4039fda7bfbe8f98462c3143503eb59 Mon Sep 17 00:00:00 2001
From: Evan Kaloudis <zeusln@tutanota.com>
Date: Fri, 15 Nov 2024 21:01:13 -0500
Subject: [PATCH 2/3] Channel: change Unsettled balance position

---
 views/Channels/Channel.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/views/Channels/Channel.tsx b/views/Channels/Channel.tsx
index f1c81d27f..eee84652a 100644
--- a/views/Channels/Channel.tsx
+++ b/views/Channels/Channel.tsx
@@ -609,6 +609,20 @@ export default class ChannelView extends React.Component<
                             <Amount sats={remoteBalance} sensitive toggleable />
                         }
                     />
+                    {unsettled_balance !== '0' && (
+                        <KeyValue
+                            keyValue={localeString(
+                                'views.Channel.unsettledBalance'
+                            )}
+                            value={
+                                <Amount
+                                    sats={unsettled_balance}
+                                    sensitive
+                                    toggleable
+                                />
+                            }
+                        />
+                    )}
                     <KeyValue
                         keyValue={localeString('views.Channel.Total.outbound')}
                         value={
@@ -631,20 +645,6 @@ export default class ChannelView extends React.Component<
                         }
                         indicatorColor={themeColor('inbound')}
                     />
-                    {unsettled_balance && (
-                        <KeyValue
-                            keyValue={localeString(
-                                'views.Channel.unsettledBalance'
-                            )}
-                            value={
-                                <Amount
-                                    sats={unsettled_balance}
-                                    sensitive
-                                    toggleable
-                                />
-                            }
-                        />
-                    )}
                     {!!local_chan_reserve_sat && (
                         <KeyValue
                             keyValue={localeString(

From f044adf0ed2644ca590c85df557cde7891da4f2b Mon Sep 17 00:00:00 2001
From: Evan Kaloudis <zeusln@tutanota.com>
Date: Fri, 15 Nov 2024 22:14:01 -0500
Subject: [PATCH 3/3] Themes: add warningReserve color

---
 components/Amount.tsx               | 16 ++++++++++++++--
 components/Channels/ChannelItem.tsx |  2 +-
 components/text/Body.tsx            |  1 +
 utils/ThemeUtils.ts                 |  3 +++
 views/Channels/Channel.tsx          | 10 ++++++++--
 5 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/components/Amount.tsx b/components/Amount.tsx
index e184bd76d..fe528953c 100644
--- a/components/Amount.tsx
+++ b/components/Amount.tsx
@@ -32,7 +32,13 @@ interface AmountDisplayProps {
     space?: boolean;
     jumboText?: boolean;
     defaultTextSize?: boolean;
-    color?: 'text' | 'success' | 'warning' | 'highlight' | 'secondaryText';
+    color?:
+        | 'text'
+        | 'success'
+        | 'warning'
+        | 'warningReserve'
+        | 'highlight'
+        | 'secondaryText';
     colorOverride?: string;
     pending?: boolean;
     fee?: boolean;
@@ -267,7 +273,13 @@ interface AmountProps {
     credit?: boolean;
     debit?: boolean;
     // If credit or debit doesn't cover the use case
-    color?: 'text' | 'success' | 'warning' | 'highlight' | 'secondaryText';
+    color?:
+        | 'text'
+        | 'success'
+        | 'warning'
+        | 'warningReserve'
+        | 'highlight'
+        | 'secondaryText';
     colorOverride?: string;
     toggleable?: boolean;
     pending?: boolean;
diff --git a/components/Channels/ChannelItem.tsx b/components/Channels/ChannelItem.tsx
index 6c8f3554e..adfd2176c 100644
--- a/components/Channels/ChannelItem.tsx
+++ b/components/Channels/ChannelItem.tsx
@@ -170,7 +170,7 @@ export function ChannelItem({
                         colorOverride={
                             highlightLabels ? themeColor('outbound') : undefined
                         }
-                        color={isBelowReserve ? 'warning' : undefined}
+                        color={isBelowReserve ? 'warningReserve' : undefined}
                     />
                     <Amount
                         sats={receivingCapacity || remoteBalance}
diff --git a/components/text/Body.tsx b/components/text/Body.tsx
index a49bb6cad..6d927e1f6 100644
--- a/components/text/Body.tsx
+++ b/components/text/Body.tsx
@@ -29,6 +29,7 @@ export function Body({
         | 'text'
         | 'success'
         | 'warning'
+        | 'warningReserve'
         | 'highlight'
         | 'secondaryText'
         | 'outbound'
diff --git a/utils/ThemeUtils.ts b/utils/ThemeUtils.ts
index 507c090ac..2a8b1120c 100644
--- a/utils/ThemeUtils.ts
+++ b/utils/ThemeUtils.ts
@@ -13,6 +13,7 @@ const Kyriaki: { [key: string]: any } = {
     inbound: '#FFF0CA',
     success: '#46BE43',
     warning: '#E14C4C',
+    warningReserve: '#EA8181',
     bitcoin: '#FFB040',
     delete: '#992600',
     bolt: '#FFF',
@@ -43,6 +44,7 @@ const Light: { [key: string]: any } = {
     inbound: '#FFF0CA',
     success: '#46BE43',
     warning: '#E14C4C',
+    warningReserve: '#EA8181',
     bitcoin: '#FFB040',
     delete: '#cc3300',
     qrFrame: '#FFD93F',
@@ -68,6 +70,7 @@ const Dark: { [key: string]: any } = {
     inboundReserve: '#636569',
     success: '#46BE43',
     warning: '#E14C4C',
+    warningReserve: '#EA8181',
     bitcoin: '#FFB040',
     delete: '#992600',
     qrFrame: '#FFD93F',
diff --git a/views/Channels/Channel.tsx b/views/Channels/Channel.tsx
index eee84652a..252d34c6c 100644
--- a/views/Channels/Channel.tsx
+++ b/views/Channels/Channel.tsx
@@ -599,7 +599,11 @@ export default class ChannelView extends React.Component<
                                 sats={localBalance}
                                 sensitive
                                 toggleable
-                                color={isBelowReserve ? 'warning' : undefined}
+                                color={
+                                    isBelowReserve
+                                        ? 'warningReserve'
+                                        : undefined
+                                }
                             />
                         }
                     />
@@ -656,7 +660,9 @@ export default class ChannelView extends React.Component<
                                     sensitive
                                     toggleable
                                     color={
-                                        isBelowReserve ? 'warning' : undefined
+                                        isBelowReserve
+                                            ? 'warningReserve'
+                                            : undefined
                                     }
                                 />
                             }