Add channel reserve to lightning channels screen

src/i18n/en/translations.ts

@@ -245,11 +245,14 @@ export default {
             title: "Lightning Channels",
             outbound: "Outbound",
             inbound: "Inbound",
+            reserve: "Reserve",
             have_channels: "You have",
             have_channels_one: "lightning channel.",
             have_channels_many: "lightning channels.",
             inbound_outbound_tip:
                 "Outbound is the amount of money you can spend on lightning. Inbound is the amount you can receive without incurring a lightning service fee.",
+            reserve_tip:
+                "About 1% of your channel balance is reserved on lightning for fees.",
             no_channels:
                 "It looks like you don't have any channels yet. To get started, receive some sats over lightning, or swap some on-chain funds into a channel. Get your hands dirty!"
         },

src/routes/settings/Channels.tsx

@@ -17,7 +17,11 @@ import {
 import { useI18n } from "~/i18n/context";
 import { useMegaStore } from "~/state/megaStore";
 
-function BalanceBar(props: { inbound: number; outbound: number }) {
+function BalanceBar(props: {
+    inbound: number;
+    reserve: number;
+    outbound: number;
+}) {
     const i18n = useI18n();
     return (
         <VStack smallgap>
@@ -25,6 +29,7 @@ function BalanceBar(props: { inbound: number; outbound: number }) {
                 <SmallHeader>
                     {i18n.t("settings.channels.outbound")}
                 </SmallHeader>
+                <SmallHeader>{i18n.t("settings.channels.reserve")}</SmallHeader>
                 <SmallHeader>{i18n.t("settings.channels.inbound")}</SmallHeader>
             </div>
             <div class="flex w-full gap-1">
@@ -36,6 +41,14 @@ function BalanceBar(props: { inbound: number; outbound: number }) {
                 >
                     <AmountSmall amountSats={props.outbound} />
                 </div>
+                <div
+                    class="min-w-fit bg-m-grey-400 p-2"
+                    style={{
+                        "flex-grow": props.reserve
+                    }}
+                >
+                    <AmountSmall amountSats={props.reserve} />
+                </div>
                 <div
                     class="min-w-fit rounded-r-xl bg-m-blue p-2"
                     style={{
@@ -57,18 +70,20 @@ export function LiquidityMonitor() {
         try {
             const channels = await state.mutiny_wallet?.list_channels();
             let inbound = 0n;
+            let reserve = 0n;
 
             for (const channel of channels) {
                 inbound =
                     inbound +
                     BigInt(channel.size) -
                     BigInt(channel.balance + channel.reserve);
+                reserve = reserve + BigInt(channel.reserve);
             }
 
-            return { inbound, channelCount: channels?.length };
+            return { inbound, reserve, channelCount: channels?.length };
         } catch (e) {
             console.error(e);
-            return { inbound: 0, channelCount: 0 };
+            return { inbound: 0, reserve: 0, channelCount: 0 };
         }
     });
 
@@ -85,11 +100,15 @@ export function LiquidityMonitor() {
                     </NiceP>{" "}
                     <BalanceBar
                         inbound={Number(channelInfo()?.inbound) || 0}
+                        reserve={Number(channelInfo()?.reserve) || 0}
                         outbound={Number(state.balance?.lightning) || 0}
                     />
                     <TinyText>
                         {i18n.t("settings.channels.inbound_outbound_tip")}
                     </TinyText>
+                    <TinyText>
+                        {i18n.t("settings.channels.reserve_tip")}
+                    </TinyText>
                 </Card>
             </Match>
             <Match when={true}>