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,41 @@
+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, useStoreState } 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 { channelsInfo } = useStoreState(s => s.lightning);
+
+  const showModal = async () => {
+    await showBalanceChannels();
+    await resetChannelsInfo(network);
+  };
+
+  return (
+    channelsInfo.length > 0 && (
+      <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",