feat: balance channels modal

Adds modal that allows users to manually balance channels using a
slicers, or to evenly balance the channels automatically via button.

src/components/common/BalanceChannelsButton.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SwapOutlined } from '@ant-design/icons';
+import styled from '@emotion/styled';
+import { Button } 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, resetBalanceChannels } = useStoreActions(s => s.modals);
+
+  return (
+    <Styled.Button
+      onClick={() => resetBalanceChannels(network).then(showBalanceChannels)}
+    >
+      <SwapOutlined /> {l('btn')}
+    </Styled.Button>
+  );
+};
+
+export default BalanceChannelsButton;

src/components/common/BalanceChannelsModal.tsx

@@ -0,0 +1,87 @@
+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';
+
+interface Props {
+  network: Network;
+}
+
+const BalanceChannelsModal: React.FC<Props> = ({ network }) => {
+  const { l } = usePrefixedTranslation('cmps.common.BalanceChannelsModal');
+  const { visible, channelsInfo } = useStoreState(s => s.modals.balanceChannels);
+  const {
+    resetBalanceChannels,
+    hideBalanceChannels,
+    autoBalanceChannels,
+    manualBalanceChannels,
+    updateBalanceOfChannels,
+  } = useStoreActions(s => s.modals);
+
+  const CustomModalFooter = (
+    <Row gutter={10} justify="end">
+      <Col>
+        <Button onClick={() => hideBalanceChannels()}>{l('close')}</Button>
+      </Col>
+      <Col>
+        <Button onClick={() => updateBalanceOfChannels(network)}>{l('update')}</Button>
+      </Col>
+    </Row>
+  );
+
+  return (
+    <Modal
+      title="Balance Channels"
+      open={visible}
+      footer={CustomModalFooter}
+      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 => manualBalanceChannels({ value, index })}
+              min={0}
+              max={total}
+            />
+          </div>
+        );
+      })}
+      {/* end sliders */}
+      <br />
+      <Row gutter={10}>
+        <Col span={12}>
+          <Button onClick={() => resetBalanceChannels(network)}>
+            <ReloadOutlined /> <span>{l('reset')}</span>
+          </Button>
+        </Col>
+        <Col span={12}>
+          <Button onClick={() => autoBalanceChannels()}>
+            <PercentageOutlined /> <span>{l('autoBalance')}</span>
+          </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/designer/SyncButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { useAsyncCallback } from 'react-async-hook';
 import { ReloadOutlined } from '@ant-design/icons';
 import styled from '@emotion/styled';
@@ -17,9 +17,10 @@ const Styled = {
 
 interface Props {
   network: Network;
+  children?: ReactNode;
 }
 
-const SyncButton: React.FC<Props> = ({ network }) => {
+const SyncButton: React.FC<Props> = ({ children, network }) => {
   const { l } = usePrefixedTranslation('cmps.designer.SyncButton');
   const { notify } = useStoreActions(s => s.app);
   const { syncChart } = useStoreActions(s => s.designer);
@@ -42,7 +43,9 @@ const SyncButton: React.FC<Props> = ({ network }) => {
         icon={<ReloadOutlined />}
         onClick={syncChartAsync.execute}
         loading={syncChartAsync.loading}
-      />
+      >
+        {children}
+      </Styled.Button>
     </Tooltip>
   );
 };

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

@@ -129,6 +129,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);

src/store/models/modals.ts

@@ -1,5 +1,7 @@
 import { Action, action, Thunk, thunk } from 'easy-peasy';
-import { StoreInjections } from 'types';
+import { LightningNode } from 'shared/types';
+import { LightningNodeChannel } from 'lib/lightning/types';
+import { ChannelInfo, Network, PreInvoice, StoreInjections } from 'types';
 import { RootModel } from './';
 
 interface OpenChannelModel {
@@ -35,6 +37,11 @@ interface AdvancedOptionsModel {
   defaultCommand?: string;
 }
 
+interface BalanceChannelsModel {
+  visible: boolean;
+  channelsInfo?: ChannelInfo[];
+}
+
 interface ImageUpdatesModel {
   visible: boolean;
 }
@@ -80,6 +87,7 @@ export interface ModalsModel {
   createInvoice: CreateInvoiceModel;
   payInvoice: PayInvoiceModel;
   advancedOptions: AdvancedOptionsModel;
+  balanceChannels: BalanceChannelsModel;
   imageUpdates: ImageUpdatesModel;
   sendOnChain: SendOnChainModel;
   assetInfo: AssetInfoModel;
@@ -102,6 +110,15 @@ export interface ModalsModel {
   setAdvancedOptions: Action<ModalsModel, AdvancedOptionsModel>;
   showAdvancedOptions: Thunk<ModalsModel, Partial<AdvancedOptionsModel>, StoreInjections>;
   hideAdvancedOptions: Thunk<ModalsModel, void, StoreInjections, RootModel>;
+
+  setBalanceChannels: Action<ModalsModel, BalanceChannelsModel>;
+  showBalanceChannels: Thunk<ModalsModel, void, StoreInjections>;
+  hideBalanceChannels: Thunk<ModalsModel, void, StoreInjections, RootModel>;
+  resetBalanceChannels: Thunk<ModalsModel, Network, StoreInjections, RootModel>;
+  manualBalanceChannels: Action<ModalsModel, { value: number; index: number }>;
+  autoBalanceChannels: Action<ModalsModel>;
+  updateBalanceOfChannels: Thunk<ModalsModel, Network, StoreInjections, RootModel>;
+
   setImageUpdates: Action<ModalsModel, ImageUpdatesModel>;
   showImageUpdates: Thunk<ModalsModel, void, StoreInjections>;
   hideImageUpdates: Thunk<ModalsModel, void, StoreInjections, RootModel>;
@@ -138,6 +155,7 @@ const modalsModel: ModalsModel = {
   createInvoice: { visible: false },
   payInvoice: { visible: false },
   advancedOptions: { visible: false },
+  balanceChannels: { visible: false },
   imageUpdates: { visible: false },
   sendOnChain: { visible: false },
   assetInfo: { visible: false },
@@ -235,6 +253,102 @@ const modalsModel: ModalsModel = {
       defaultCommand: undefined,
     });
   }),
+  setBalanceChannels: action((state, payload) => {
+    state.balanceChannels = {
+      ...state.balanceChannels,
+      ...payload,
+    };
+  }),
+  showBalanceChannels: thunk(actions => {
+    actions.setBalanceChannels({ visible: true });
+  }),
+  hideBalanceChannels: thunk(actions => {
+    actions.setBalanceChannels({ visible: false });
+  }),
+  resetBalanceChannels: thunk(
+    async (actions, network, { getStoreActions, getStoreState }) => {
+      const channels = [] as LightningNodeChannel[];
+      const { getChannels } = getStoreActions().lightning;
+      const { links } = getStoreState().designer.activeChart;
+
+      const id2Node = {} as Record<string, LightningNode>;
+      const promisesToAwait = [] as Promise<unknown>[];
+      const channelsInfo = [] as ChannelInfo[];
+
+      for (const node of network.nodes.lightning) {
+        promisesToAwait.push(
+          getChannels(node).then((nodeChannels: LightningNodeChannel[]) => {
+            channels.push(...nodeChannels);
+            id2Node[node.name] = node;
+          }),
+        );
+      }
+      await Promise.all(promisesToAwait);
+
+      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 as string;
+        const nextLocalBalance = Number(localBalance);
+        channelsInfo.push({
+          id,
+          to,
+          from,
+          localBalance,
+          remoteBalance,
+          nextLocalBalance,
+        });
+      }
+
+      actions.setBalanceChannels({ channelsInfo } as BalanceChannelsModel);
+    },
+  ),
+  manualBalanceChannels: action((state, { value, index }) => {
+    const { channelsInfo: info } = state.balanceChannels;
+    if (info && info[index]) {
+      info[index].nextLocalBalance = value;
+      state.balanceChannels.channelsInfo = info;
+    }
+  }),
+  autoBalanceChannels: action(state => {
+    const { channelsInfo } = state.balanceChannels;
+    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.balanceChannels = {
+      ...state.balanceChannels,
+      ...channelsInfo,
+    };
+  }),
+  updateBalanceOfChannels: thunk(
+    (actions, network, { getStoreActions, getStoreState }) => {
+      const { notify } = getStoreActions().app;
+      const { balanceChannels } = getStoreActions().network;
+      const { channelsInfo } = getStoreState().modals.balanceChannels;
+
+      if (!channelsInfo) {
+        return;
+      }
+
+      const toPay = [] as PreInvoice[];
+      for (const { id, localBalance, nextLocalBalance } of channelsInfo) {
+        if (Number(localBalance) !== nextLocalBalance) {
+          toPay.push({ channelId: id, nextLocalBalance });
+        }
+      }
+
+      balanceChannels({ id: network.id, toPay })
+        .then(() => notify({ message: 'Channels balanced!' }))
+        .then(() => actions.hideBalanceChannels());
+    },
+  ),
+
   setImageUpdates: action((state, payload) => {
     state.imageUpdates = {
       ...state.imageUpdates,