feat(taro): allow updating the LND backend of Taro nodes

src/components/common/form/LightningNodeSelect.spec.tsx

@@ -23,6 +23,7 @@ describe('LightningNodeSelect', () => {
             name="from"
             label="Source"
             initialValue={initialValue}
+            implementation="LND"
             nodes={nodes}
           />
         </Form>
@@ -56,7 +57,7 @@ describe('LightningNodeSelect', () => {
       alice: {
         walletBalance: defaultStateBalances({ confirmed: '100' }),
       },
-      bob: {
+      dave: {
         walletBalance: defaultStateBalances({ confirmed: '200' }),
       },
     };
@@ -71,7 +72,7 @@ describe('LightningNodeSelect', () => {
     // click on bob option
     // Select renders two lists of the options to the dom. click on the
     // second one if it exists, otherwise click the only one
-    fireEvent.click(getAllByText('bob')[1]);
+    fireEvent.click(getAllByText('dave')[1]);
     // confirm the balance updates
     expect(await findByText('Balance: 200 sats')).toBeInTheDocument();
   });

src/components/common/form/LightningNodeSelect.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { Form, Select } from 'antd';
 import { SelectProps, SelectValue } from 'antd/lib/select';
 import { usePrefixedTranslation } from 'hooks';
-import { Status } from 'shared/types';
+import { LightningNode, Status } from 'shared/types';
 import { LightningNodeBalances } from 'lib/lightning/types';
 import { LightningNodeModel } from 'store/models/lightning';
 import { Network } from 'types';
@@ -13,6 +13,7 @@ export interface Props extends SelectProps<SelectValue> {
   name: string;
   label?: string;
   nodeStatus?: Status;
+  implementation?: LightningNode['implementation'];
   initialValue?: string;
   nodes?: {
     [key: string]: LightningNodeModel;
@@ -24,6 +25,7 @@ const LightningNodeSelect: React.FC<Props> = ({
   name,
   label,
   nodeStatus,
+  implementation,
   initialValue,
   nodes,
   onChange,
@@ -51,7 +53,9 @@ const LightningNodeSelect: React.FC<Props> = ({
   if (nodeStatus !== undefined) {
     lnNodes = lnNodes.filter(n => n.status === nodeStatus);
   }
-
+  if (implementation) {
+    lnNodes = lnNodes.filter(n => n.implementation === implementation);
+  }
   return (
     <Form.Item
       name={name}

src/components/common/form/TaroDataSelect.spec.tsx

@@ -10,7 +10,7 @@ import {
 } from 'utils/tests';
 import TaroDataSelect from './TaroDataSelect';
 
-describe('TaroNodeSelect', () => {
+describe('TaroDataSelect', () => {
   const renderComponent = (selectBalances = true) => {
     const network = getNetwork(1, 'test network', Status.Started, 2);
     const initialState = {

src/components/common/form/TaroNodeSelect.spec.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { Form } from 'antd';
+import { Status } from 'shared/types';
+import { getNetwork } from 'utils/tests';
+import TaroNodeSelect from './TaroNodeSelect';
+
+describe('TaroNodeSelect', () => {
+  const renderComponent = () => {
+    const network = getNetwork(1, 'test network', Status.Stopped, 3);
+    const TestForm = () => {
+      const [form] = Form.useForm();
+      return (
+        <Form form={form}>
+          <TaroNodeSelect
+            network={network}
+            name="from"
+            label="Taro Nodes"
+            nodeStatus={Status.Stopped}
+          />
+        </Form>
+      );
+    };
+    const result = render(<TestForm />);
+    return {
+      ...result,
+      network,
+    };
+  };
+
+  it('should display the label and input', () => {
+    const { getByText, getByLabelText } = renderComponent();
+    expect(getByText('Taro Nodes')).toBeInTheDocument();
+    expect(getByLabelText('Taro Nodes')).toBeInTheDocument();
+  });
+
+  it('should display the nodes', async () => {
+    const { getAllByText, getByLabelText } = renderComponent();
+    fireEvent.mouseDown(getByLabelText('Taro Nodes'));
+    expect(getAllByText('alice-taro')[0]).toBeInTheDocument();
+    expect(getAllByText('bob-taro')[0]).toBeInTheDocument();
+    expect(getAllByText('carol-taro')[0]).toBeInTheDocument();
+    fireEvent.click(getAllByText('carol-taro')[0]);
+  });
+});

src/components/common/form/TaroNodeSelect.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Form, Select } from 'antd';
+import { SelectProps, SelectValue } from 'antd/lib/select';
+import { usePrefixedTranslation } from 'hooks';
+import { Status } from 'shared/types';
+import { Network } from 'types';
+
+export interface Props extends SelectProps<SelectValue> {
+  network: Network;
+  name: string;
+  label?: string;
+  nodeStatus?: Status;
+  initialValue?: string;
+}
+
+const TaroNodeSelect: React.FC<Props> = ({
+  network,
+  name,
+  label,
+  nodeStatus,
+  onChange,
+  ...rest
+}) => {
+  const { l } = usePrefixedTranslation('cmps.common.form.TaroNodeSelect');
+
+  const handleChange = (value: SelectValue, option: any) => {
+    if (onChange) onChange(value, option);
+  };
+
+  let taroNodes = network.nodes.taro;
+  if (nodeStatus !== undefined) {
+    taroNodes = taroNodes.filter(n => n.status === nodeStatus);
+  }
+
+  return (
+    <Form.Item
+      name={name}
+      label={label}
+      rules={[{ required: true, message: l('cmps.forms.required') }]}
+    >
+      <Select {...rest} onChange={handleChange}>
+        {taroNodes.map(node => (
+          <Select.Option key={node.name} value={node.name}>
+            {node.name}
+          </Select.Option>
+        ))}
+      </Select>
+    </Form.Item>
+  );
+};
+
+export default TaroNodeSelect;

src/components/designer/LinkContextMenu.spec.tsx

@@ -1,10 +1,18 @@
 import React from 'react';
 import { ILink } from '@mrblenny/react-flow-chart';
 import { fireEvent } from '@testing-library/dom';
+import { waitFor } from '@testing-library/react';
+import { Status } from 'shared/types';
 import { initChartFromNetwork } from 'utils/chart';
+import * as files from 'utils/files';
 import { getNetwork, renderWithProviders } from 'utils/tests';
 import LinkContextMenu from './LinkContextMenu';
 
+jest.mock('utils/files', () => ({
+  exists: jest.fn(),
+}));
+const filesMock = files as jest.Mocked<typeof files>;
+
 describe('LinkContextMenu', () => {
   const createChannelLink = (): ILink => ({
     id: 'alice-carol',
@@ -28,14 +36,30 @@ describe('LinkContextMenu', () => {
       type: 'backend',
     },
   });
+  const createTaroBackendLink = (): ILink => ({
+    id: 'alice-taro-alice',
+    from: { nodeId: 'alice-taro', portId: 'lndbackend' },
+    to: { nodeId: 'alice', portId: 'lndbackend' },
+    properties: {
+      type: 'lndbackend',
+    },
+  });
   const renderComponent = (link: ILink, activeId?: number) => {
-    const network = getNetwork(1, 'test network');
+    const network = getNetwork(1, 'test network', Status.Started, 2);
     const chart = initChartFromNetwork(network);
     chart.links[link.id] = link;
     const initialState = {
       network: {
         networks: [network],
       },
+      taro: {
+        nodes: {
+          'alice-taro': {
+            assets: [],
+            balances: [],
+          },
+        },
+      },
       designer: {
         activeId: activeId || network.id,
         allCharts: {
@@ -51,7 +75,7 @@ describe('LinkContextMenu', () => {
     const result = renderWithProviders(cmp, { initialState });
     // always open the context menu for all tests
     fireEvent.contextMenu(result.getByText('test-child'));
-    return result;
+    return { ...result, network };
   };
 
   it('should not render menu with no network', () => {
@@ -81,4 +105,46 @@ describe('LinkContextMenu', () => {
     const { queryByText } = renderComponent(link);
     expect(queryByText('Close Channel')).not.toBeInTheDocument();
   });
+  describe('Change Taro Backend Option', () => {
+    it('should display the correct options for a taro backend connection when network is stopped', async () => {
+      filesMock.exists.mockResolvedValue(Promise.resolve(false));
+      const { getByText, store, network } = renderComponent(createTaroBackendLink());
+      store.getActions().network.setStatus({ id: network.id, status: Status.Stopped });
+      await waitFor(() => {
+        expect(store.getState().network.networkById(network.id).status).toBe(
+          Status.Stopped,
+        );
+      });
+      fireEvent.click(getByText('Change Taro Backend'));
+      await waitFor(() => {
+        expect(store.getState().modals.changeTaroBackend.visible).toBe(true);
+      });
+    });
+    it('should display the correct options for a taro backend connection', async () => {
+      filesMock.exists.mockResolvedValue(Promise.resolve(false));
+      const { getByText } = renderComponent(createTaroBackendLink());
+      fireEvent.click(getByText('Change Taro Backend'));
+      await waitFor(() => {
+        expect(
+          getByText('The network must be stopped to change alice-taro bankend'),
+        ).toBeInTheDocument();
+      });
+    });
+    it('should display an error when option is clicked', async () => {
+      filesMock.exists.mockResolvedValue(Promise.resolve(true));
+      const { getByText, store, network } = renderComponent(createTaroBackendLink());
+      expect(store.getState().modals.changeTaroBackend.visible).toBe(false);
+      await waitFor(() => {
+        store.getActions().network.setStatus({ id: network.id, status: Status.Started });
+      });
+      fireEvent.click(getByText('Change Taro Backend'));
+      await waitFor(() => {
+        expect(
+          getByText(
+            'Can only change Taro Backend before the network is started. admin.macaroon is present',
+          ),
+        ).toBeInTheDocument();
+      });
+    });
+  });
 });

src/components/designer/LinkContextMenu.tsx

@@ -4,6 +4,7 @@ import { Dropdown, MenuProps } from 'antd';
 import { useStoreState } from 'store';
 import { LinkProperties } from 'utils/chart';
 import ChangeBackendButton from './link/ChangeBackendButton';
+import ChangeTaroBackendButton from './link/ChangeTaroBackendButton';
 import CloseChannelButton from './link/CloseChannelButton';
 
 interface Props {
@@ -37,6 +38,14 @@ const LinkContextMenu: React.FC<Props> = ({ link, children }) => {
         backendName={link.to.nodeId as string}
       />
     );
+  } else if (type === 'lndbackend') {
+    menuItem = (
+      <ChangeTaroBackendButton
+        type="menu"
+        taroName={link.from.nodeId}
+        lndName={link.to.nodeId as string}
+      />
+    );
   }
 
   // don't add a context menu if there is no menu item

src/components/designer/NetworkDesigner.spec.tsx

@@ -147,6 +147,15 @@ describe('NetworkDesigner Component', () => {
     expect(await findByText('BOLT 11 Invoice')).toBeInTheDocument();
     fireEvent.click(getByText('Cancel'));
   });
+  it('should display the ChangeTaroBackend modal', async () => {
+    const { findAllByText, findByText, getAllByText, store } = renderComponent();
+    expect(await findByText('backend1')).toBeInTheDocument();
+    act(() => {
+      store.getActions().modals.showChangeTaroBackend({});
+    });
+    expect(await findAllByText('Change Taro Node Backend')).toHaveLength(1);
+    fireEvent.click(getAllByText('Cancel')[0]);
+  });
 
   it('should display the ChangeBackend modal', async () => {
     const { getByText, findByText, store } = renderComponent();

src/components/designer/NetworkDesigner.tsx

@@ -18,7 +18,12 @@ import {
   PayInvoiceModal,
 } from './lightning/actions';
 import Sidebar from './Sidebar';
-import { MintAssetModal, NewAddressModal, SendAssetModal } from './taro/actions';
+import {
+  ChangeTaroBackendModal,
+  MintAssetModal,
+  NewAddressModal,
+  SendAssetModal,
+} from './taro/actions';
 
 const Styled = {
   Designer: styled.div`
@@ -55,6 +60,7 @@ const NetworkDesigner: React.FC<Props> = ({ network, updateStateDelay = 3000 })
     changeBackend,
     sendOnChain,
     advancedOptions,
+    changeTaroBackend,
   } = useStoreState(s => s.modals);
 
   const { save } = useStoreActions(s => s.network);
@@ -100,6 +106,7 @@ const NetworkDesigner: React.FC<Props> = ({ network, updateStateDelay = 3000 })
       {advancedOptions.visible && <AdvancedOptionsModal network={network} />}
       {mintAsset.visible && <MintAssetModal network={network} />}
       {newAddress.visible && <NewAddressModal network={network} />}
+      {changeTaroBackend.visible && <ChangeTaroBackendModal network={network} />}
       {sendAsset.visible && <SendAssetModal network={network} />}
     </Styled.Designer>
   );

src/components/designer/Sidebar.tsx

@@ -29,7 +29,7 @@ const Sidebar: React.FC<Props> = ({ network, chart }) => {
       }
     } else if (type === 'link' && id) {
       const link = chart.links[id];
-      return <LinkDetails link={link} network={network} />;
+      return link && <LinkDetails link={link} network={network} />;
     }
 
     return <DefaultSidebar />;

src/components/designer/lightning/actions/ChangeBackendModal.spec.tsx

@@ -137,6 +137,8 @@ describe('ChangeBackendModal', () => {
     expect(getByText('Cancel')).toBeInTheDocument();
     changeSelect('Lightning Node', 'erin');
     expect(getByText(warning)).toBeInTheDocument();
+    changeSelect('Lightning Node', 'alice');
+    expect(queryByText(warning)).not.toBeInTheDocument();
   });
 
   it('should not display the compatibility warning', async () => {

src/components/designer/lightning/actions/ChangeBackendModal.tsx

@@ -67,6 +67,8 @@ const ChangeBackendModal: React.FC<Props> = ({ network }) => {
         const requiredVersion = compatibility[ln.version];
         if (!isVersionCompatible(backend.version, requiredVersion)) {
           setCompatWarning(l('compatWarning', { ln, backend, requiredVersion }));
+        } else {
+          setCompatWarning(undefined);
         }
       }
     }