feat: add balance channels modal

The modal has slicers to manually balance LN channels.
It also has a button to evenly balance the channels.

src/components/common/BalanceChannelsButton.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SwapOutlined } from '@ant-design/icons';
+import styled from '@emotion/styled';
+import { Button, Tooltip } from 'antd';
+import { usePrefixedTranslation } from 'hooks';
+import { useStoreActions } from 'store';
+import { Network } from 'types';
+
+const Styled = {
+  Button: styled(Button)`
+    margin-left: 8px;
+  `,
+};
+
+interface Props {
+  network: Network;
+}
+
+const BalanceChannelsButton: React.FC<Props> = ({ network }) => {
+  const { l } = usePrefixedTranslation('cmps.common.BalanceChannelsButton');
+  const { showBalanceChannels } = useStoreActions(s => s.modals);
+  const { resetChannelsInfo } = useStoreActions(s => s.lightning);
+  const showModal = async () => {
+    await showBalanceChannels();
+    await resetChannelsInfo(network);
+  };
+
+  return (
+    <Tooltip title={l('btn')}>
+      <Styled.Button onClick={showModal}>
+        <SwapOutlined />
+      </Styled.Button>
+    </Tooltip>
+  );
+};
+
+export default BalanceChannelsButton;

src/components/common/BalanceChannelsModal.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { PercentageOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Button, Col, Modal, Row, Slider } from 'antd';
+import { usePrefixedTranslation } from 'hooks';
+import { useStoreActions, useStoreState } from 'store';
+import { ChannelInfo, Network } from 'types';
+import { format } from 'utils/units';
+import styled from '@emotion/styled';
+
+interface Props {
+  network: Network;
+}
+
+const Styled = {
+  Button: styled(Button)`
+    width: 100%;
+  `,
+};
+
+const BalanceChannelsModal: React.FC<Props> = ({ network }) => {
+  const { l } = usePrefixedTranslation('cmps.common.BalanceChannelsModal');
+  const { channelsInfo } = useStoreState(s => s.lightning);
+  const { visible } = useStoreState(s => s.modals.balanceChannels);
+  const { hideBalanceChannels } = useStoreActions(s => s.modals);
+  const {
+    resetChannelsInfo,
+    manualBalanceChannelsInfo,
+    autoBalanceChannelsInfo,
+    updateBalanceOfChannels,
+  } = useStoreActions(s => s.lightning);
+
+  return (
+    <Modal
+      title="Balance Channels"
+      open={visible}
+      okText={l('update')}
+      cancelText={l('close')}
+      onOk={() => updateBalanceOfChannels(network)}
+      onCancel={() => hideBalanceChannels()}
+    >
+      {/* sliders */}
+      {(channelsInfo || []).map((channel: ChannelInfo, index: number) => {
+        const { to, from, id, remoteBalance, localBalance, nextLocalBalance } = channel;
+        const total = Number(remoteBalance) + Number(localBalance);
+        return (
+          <div key={id}>
+            <Row>
+              <Col span={12}>
+                {from}
+                <br />
+                {format(nextLocalBalance)}
+              </Col>
+              <Col span={12} style={{ textAlign: 'right' }}>
+                {to}
+                <br />
+                {format(total - nextLocalBalance)}
+              </Col>
+            </Row>
+            <Slider
+              value={nextLocalBalance}
+              onChange={value => manualBalanceChannelsInfo({ value, index })}
+              min={0}
+              max={total}
+            />
+          </div>
+        );
+      })}
+      {/* end sliders */}
+      <br />
+      <Row gutter={10}>
+        <Col span={12}>
+          <Styled.Button onClick={() => resetChannelsInfo(network)}>
+            <ReloadOutlined /> <span>{l('reset')}</span>
+          </Styled.Button>
+        </Col>
+        <Col span={12}>
+          <Styled.Button onClick={() => autoBalanceChannelsInfo()}>
+            <PercentageOutlined /> <span>{l('autoBalance')}</span>
+          </Styled.Button>
+        </Col>
+      </Row>
+    </Modal>
+  );
+};
+
+export default BalanceChannelsModal;

src/components/designer/AutoMineButton.tsx

@@ -1,9 +1,9 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FieldTimeOutlined } from '@ant-design/icons';
 import styled from '@emotion/styled';
-import { Button, Dropdown, Tooltip, MenuProps } from 'antd';
+import { Button, Dropdown, MenuProps, Tooltip } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import { usePrefixedTranslation } from 'hooks';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useStoreActions, useStoreState } from 'store';
 import { AutoMineMode, Network } from 'types';
 

src/components/designer/NetworkDesigner.tsx

@@ -9,6 +9,7 @@ import { useStoreActions, useStoreState } from 'store';
 import { Network } from 'types';
 import { Loader } from 'components/common';
 import AdvancedOptionsModal from 'components/common/AdvancedOptionsModal';
+import BalanceChannelsModal from 'components/common/BalanceChannelsModal';
 import SendOnChainModal from './bitcoind/actions/SendOnChainModal';
 import { CanvasOuterDark, Link, NodeInner, Port, Ports } from './custom';
 import {
@@ -60,6 +61,7 @@ const NetworkDesigner: React.FC<Props> = ({ network, updateStateDelay = 3000 })
     changeBackend,
     sendOnChain,
     advancedOptions,
+    balanceChannels,
     changeTapBackend,
   } = useStoreState(s => s.modals);
 
@@ -104,6 +106,7 @@ const NetworkDesigner: React.FC<Props> = ({ network, updateStateDelay = 3000 })
       {changeBackend.visible && <ChangeBackendModal network={network} />}
       {sendOnChain.visible && <SendOnChainModal network={network} />}
       {advancedOptions.visible && <AdvancedOptionsModal network={network} />}
+      {balanceChannels.visible && <BalanceChannelsModal network={network} />}
       {mintAsset.visible && <MintAssetModal network={network} />}
       {newAddress.visible && <NewAddressModal network={network} />}
       {changeTapBackend.visible && <ChangeTapBackendModal network={network} />}

src/components/network/NetworkActions.tsx

@@ -1,3 +1,4 @@
+import React, { ReactNode, useCallback } from 'react';
 import {
   CloseOutlined,
   ExportOutlined,
@@ -11,15 +12,15 @@ import {
 import styled from '@emotion/styled';
 import { Button, Divider, Dropdown, MenuProps, Tag } from 'antd';
 import { ButtonType } from 'antd/lib/button';
-import AutoMineButton from 'components/designer/AutoMineButton';
-import { useMiningAsync } from 'hooks/useMiningAsync';
-import SyncButton from 'components/designer/SyncButton';
 import { usePrefixedTranslation } from 'hooks';
-import React, { ReactNode, useCallback } from 'react';
+import { useMiningAsync } from 'hooks/useMiningAsync';
 import { Status } from 'shared/types';
 import { useStoreState } from 'store';
 import { Network } from 'types';
 import { getNetworkBackendId } from 'utils/network';
+import BalanceChannelsButton from 'components/common/BalanceChannelsButton';
+import AutoMineButton from 'components/designer/AutoMineButton';
+import SyncButton from 'components/designer/SyncButton';
 
 const Styled = {
   Button: styled(Button)`
@@ -129,6 +130,7 @@ const NetworkActions: React.FC<Props> = ({
             {l('mineBtn')}
           </Button>
           <AutoMineButton network={network} />
+          <BalanceChannelsButton network={network} />
           <SyncButton network={network} />
           <Divider type="vertical" />
         </>

src/i18n/locales/en-US.json

@@ -21,6 +21,12 @@
   "cmps.common.AdvancedOptionsModal.cancelBtn": "Cancel",
   "cmps.common.AdvancedOptionsModal.success": "Updated advanced options for {{name}}",
   "cmps.common.AdvancedOptionsModal.error": "Failed to update options",
+  "cmps.common.BalanceChannelsButton.btn": "Balance Channels",
+  "cmps.common.BalanceChannelsModal.title": "Balance Channels",
+  "cmps.common.BalanceChannelsModal.autoBalance": "Auto Balance",
+  "cmps.common.BalanceChannelsModal.update": "Update Channels",
+  "cmps.common.BalanceChannelsModal.reset": "Reset",
+  "cmps.common.BalanceChannelsModal.close": "Close",
   "cmps.common.CopyIcon.message": "Copied {{label}} to clipboard",
   "cmps.common.NavMenu.createNetwork": "Create Network",
   "cmps.common.NavMenu.manageNodes": "Manage Images",

src/store/models/lightning.ts

@@ -2,11 +2,13 @@ import { Action, action, Thunk, thunk, ThunkOn, thunkOn } from 'easy-peasy';
 import { throttle } from 'lodash';
 import { LightningNode, Status } from 'shared/types';
 import * as PLN from 'lib/lightning/types';
-import { Network, StoreInjections } from 'types';
+import { ChannelInfo, Network, PreInvoice, StoreInjections } from 'types';
 import { delay } from 'utils/async';
 import { BLOCKS_TIL_CONFIRMED } from 'utils/constants';
+import { getInvoicePayload } from 'utils/network';
 import { fromSatsNumeric } from 'utils/units';
 import { RootModel } from './';
+import { LightningNodeChannel } from 'lib/lightning/types';
 
 export interface LightningNodeMapping {
   [key: string]: LightningNodeModel;
@@ -45,6 +47,7 @@ export interface PayInvoicePayload {
 
 export interface LightningModel {
   nodes: LightningNodeMapping;
+  channelsInfo: ChannelInfo[];
   removeNode: Action<LightningModel, string>;
   clearNodes: Action<LightningModel, void>;
   setInfo: Action<LightningModel, { node: LightningNode; info: PLN.LightningNodeInfo }>;
@@ -88,11 +91,23 @@ export interface LightningModel {
   addListeners: Thunk<LightningModel, Network, StoreInjections, RootModel>;
   removeListeners: Thunk<LightningModel, Network, StoreInjections, RootModel>;
   addChannelListeners: Thunk<LightningModel, Network, StoreInjections, RootModel>;
+  setChannelsInfo: Action<LightningModel, ChannelInfo[]>;
+  resetChannelsInfo: Thunk<LightningModel, Network, StoreInjections, RootModel>;
+  manualBalanceChannelsInfo: Action<LightningModel, { value: number; index: number }>;
+  autoBalanceChannelsInfo: Action<LightningModel>;
+  updateBalanceOfChannels: Thunk<LightningModel, Network, StoreInjections, RootModel>;
+  balanceChannels: Thunk<
+    LightningModel,
+    { id: number; toPay: PreInvoice[] },
+    StoreInjections,
+    RootModel
+  >;
 }
 
 const lightningModel: LightningModel = {
   // state properties
   nodes: {},
+  channelsInfo: [],
   // reducer actions (mutations allowed thx to immer)
   removeNode: action((state, name) => {
     if (state.nodes[name]) {
@@ -129,6 +144,7 @@ const lightningModel: LightningModel = {
     const api = injections.lightningFactory.getService(node);
     const channels = await api.getChannels(node);
     actions.setChannels({ node, channels });
+    return channels;
   }),
   getAllInfo: thunk(async (actions, node) => {
     await actions.getInfo(node);
@@ -334,6 +350,125 @@ const lightningModel: LightningModel = {
       }
     },
   ),
+  setChannelsInfo: action((state, payload) => {
+    state.channelsInfo = payload;
+  }),
+  resetChannelsInfo: thunk(async (actions, network, { getStoreState }) => {
+    const channels = [] as LightningNodeChannel[];
+    const { getChannels } = actions;
+    const { links } = getStoreState().designer.activeChart;
+
+    const id2Node = {} as Record<string, LightningNode>;
+    const channelsInfo = [] as ChannelInfo[];
+
+    await Promise.all(
+      network.nodes.lightning.map(async node => {
+        const nodeChannels = await getChannels(node);
+        channels.push(...nodeChannels);
+        id2Node[node.name] = node;
+      }),
+    );
+
+    for (const channel of channels) {
+      const { uniqueId: id, localBalance, remoteBalance } = channel;
+      if (!links[id]) continue;
+      const from = links[id].from.nodeId;
+      const to = links[id].to.nodeId;
+      if (!to) continue;
+      const nextLocalBalance = Number(localBalance);
+      channelsInfo.push({
+        id,
+        to,
+        from,
+        localBalance,
+        remoteBalance,
+        nextLocalBalance,
+      });
+    }
+
+    actions.setChannelsInfo(channelsInfo);
+  }),
+  manualBalanceChannelsInfo: action((state, { value, index }) => {
+    const { channelsInfo: info } = state;
+    if (info && info[index]) {
+      info[index].nextLocalBalance = value;
+      state.channelsInfo = info;
+    }
+  }),
+  autoBalanceChannelsInfo: action(state => {
+    const { channelsInfo } = state;
+    if (!channelsInfo) {
+      return;
+    }
+    for (let index = 0; index < channelsInfo.length; index += 1) {
+      const { localBalance, remoteBalance } = channelsInfo[index];
+      const halfAmount = Math.floor((Number(localBalance) + Number(remoteBalance)) / 2);
+      channelsInfo[index].nextLocalBalance = halfAmount;
+    }
+    state.channelsInfo = channelsInfo;
+  }),
+  updateBalanceOfChannels: thunk(
+    async (actions, network, { getStoreActions, getState }) => {
+      const { notify } = getStoreActions().app;
+      const { hideBalanceChannels } = getStoreActions().modals;
+      const { channelsInfo } = getState();
+
+      if (!channelsInfo) return;
+
+      const toPay: PreInvoice[] = channelsInfo
+        .filter(c => Number(c.localBalance) !== c.nextLocalBalance)
+        .map(c => ({ channelId: c.id, nextLocalBalance: c.nextLocalBalance }));
+
+      await actions.balanceChannels({ id: network.id, toPay });
+      await hideBalanceChannels();
+      notify({ message: 'Channels balanced!' });
+    },
+  ),
+  balanceChannels: thunk(async (actions, { id, toPay }, { getStoreState }) => {
+    const { networks } = getStoreState().network;
+    const network = networks.find(n => n.id === id);
+    if (!network) throw new Error('networkByIdErr');
+    const { createInvoice, payInvoice, getChannels } = actions;
+    const lnNodes = network.nodes.lightning;
+    const channels = [] as LightningNodeChannel[];
+    const id2Node = {} as Record<string, LightningNode>;
+    const id2channel = {} as Record<string, LightningNodeChannel>;
+
+    await Promise.all(
+      lnNodes.map(async node => {
+        id2Node[node.name] = node;
+        const nodeChannels = await getChannels(node);
+        channels.push(...nodeChannels);
+      }),
+    );
+
+    channels.forEach(channel => (id2channel[channel.uniqueId] = channel));
+    const minimumSatsDifference = 50;
+    const links = getStoreState().designer.activeChart.links;
+
+    await Promise.all(
+      toPay.map(async ({ channelId, nextLocalBalance }) => {
+        const channel = id2channel[channelId];
+        const { to, from } = links[channelId];
+        if (!to.nodeId) return;
+        const fromNode = id2Node[from.nodeId];
+        const toNode = id2Node[to.nodeId];
+        const payload = getInvoicePayload(channel, fromNode, toNode, nextLocalBalance);
+
+        if (payload.amount < minimumSatsDifference) return;
+
+        const invoice = await createInvoice({
+          node: payload.target,
+          amount: payload.amount,
+        });
+
+        await payInvoice({
+          invoice,
+          node: payload.source,
+        });
+      }),
+    );
+  }),
 };
 
 export default lightningModel;