refactor(sidebar): update LND sidebar componenets to support c-lightning

src/components/designer/Sidebar.tsx

@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react';
 import { IChart } from '@mrblenny/react-flow-chart';
-import { LightningNode, LndNode } from 'shared/types';
+import { LightningNode } from 'shared/types';
 import { Network } from 'types';
 import BitcoindDetails from './bitcoind/BitcoindDetails';
 import DefaultSidebar from './default/DefaultSidebar';
-import LightningNodeDetails from './lightning/LightningNodeDetails';
 import LinkDetails from './link/LinkDetails';
 import LndDetails from './lnd/LndDetails';
 
@@ -22,10 +21,8 @@ const Sidebar: React.FC<Props> = ({ network, chart }) => {
       const node = bitcoin.find(n => n.name === id) || lightning.find(n => n.name === id);
       if (node && node.implementation === 'bitcoind') {
         return <BitcoindDetails node={node} />;
-      } else if (node && node.implementation === 'LND') {
+      } else if (node && node.type === 'lightning') {
-        return <LndDetails node={node as LndNode} />;
+        return <LndDetails node={node as LightningNode} />;
-      } else if (node && node.implementation === 'c-lightning') {
-        return <LightningNodeDetails node={node as LightningNode} />;
       }
     } else if (type === 'link' && id) {
       const link = chart.links[id];

src/components/designer/lnd/ActionsTab.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { LndNode, Status } from 'shared/types';
+import { LightningNode, Status } from 'shared/types';
 import { OpenTerminalButton } from 'components/terminal';
 import { Deposit, OpenChannelButtons, RemoveNode } from './actions';
 
@@ -11,7 +11,7 @@ const Styled = {
 };
 
 interface Props {
-  node: LndNode;
+  node: LightningNode;
 }
 
 const ActionsTab: React.FC<Props> = ({ node }) => {

src/components/designer/lnd/ConnectTab.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useState } from 'react';
 import styled from '@emotion/styled';
 import { Icon, Radio } from 'antd';
 import { usePrefixedTranslation } from 'hooks';
-import { LndNode, Status } from 'shared/types';
+import { LightningNode, LndNode, Status } from 'shared/types';
 import { useStoreActions, useStoreState } from 'store';
 import { ellipseInner } from 'utils/strings';
 import CopyIcon from 'components/common/CopyIcon';
@@ -30,7 +30,7 @@ const Styled = {
 };
 
 interface Props {
-  node: LndNode;
+  node: LightningNode;
 }
 
 const ConnectTab: React.FC<Props> = ({ node }) => {
@@ -47,6 +47,12 @@ const ConnectTab: React.FC<Props> = ({ node }) => {
     return <>{l('notStarted')}</>;
   }
 
+  if (node.implementation !== 'LND') {
+    return <div>{`${node.implementation} coming soon..`}</div>;
+  }
+
+  const lndNode = node as LndNode;
+
   const grpcHost = `127.0.0.1:${node.ports.grpc}`;
   const restHost = `https://127.0.0.1:${node.ports.rest}`;
   const hosts: DetailValues = [
@@ -75,10 +81,10 @@ const ConnectTab: React.FC<Props> = ({ node }) => {
   });
 
   const authCmps: Record<string, ReactNode> = {
-    paths: <FilePaths node={node} />,
+    paths: <FilePaths node={lndNode} />,
-    hex: <EncodedStrings node={node} encoding="hex" />,
+    hex: <EncodedStrings node={lndNode} encoding="hex" />,
-    base64: <EncodedStrings node={node} encoding="base64" />,
+    base64: <EncodedStrings node={lndNode} encoding="base64" />,
-    lndc: <LndConnect node={node} />,
+    lndc: <LndConnect node={lndNode} />,
   };
 
   return (

src/components/designer/lnd/InfoTab.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Alert, Tooltip } from 'antd';
 import { usePrefixedTranslation } from 'hooks';
-import { LndNode, Status } from 'shared/types';
+import { LightningNode, Status } from 'shared/types';
 import { useStoreState } from 'store';
 import { ellipseInner } from 'utils/strings';
 import { format } from 'utils/units';
@@ -10,7 +10,7 @@ import CopyIcon from 'components/common/CopyIcon';
 import DetailsList, { DetailValues } from 'components/common/DetailsList';
 
 interface Props {
-  node: LndNode;
+  node: LightningNode;
 }
 
 const InfoTab: React.FC<Props> = ({ node }) => {

src/components/designer/lnd/LndDetails.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useState } from 'react';
 import { useAsync } from 'react-async-hook';
 import { Alert, Icon } from 'antd';
 import { usePrefixedTranslation } from 'hooks';
-import { LndNode, Status } from 'shared/types';
+import { LightningNode, Status } from 'shared/types';
 import { useStoreActions, useStoreState } from 'store';
 import { abbreviate } from 'utils/numbers';
 import { Loader } from 'components/common';
@@ -12,7 +12,7 @@ import ConnectTab from './ConnectTab';
 import InfoTab from './InfoTab';
 
 interface Props {
-  node: LndNode;
+  node: LightningNode;
 }
 
 const LndDetails: React.FC<Props> = ({ node }) => {
@@ -20,7 +20,7 @@ const LndDetails: React.FC<Props> = ({ node }) => {
   const [activeTab, setActiveTab] = useState('info');
   const { getInfo, getWalletBalance, getChannels } = useStoreActions(s => s.lnd);
   const getInfoAsync = useAsync(
-    async (node: LndNode) => {
+    async (node: LightningNode) => {
       if (node.status !== Status.Started) return;
       await getInfo(node);
       await getWalletBalance(node);

src/components/designer/lnd/actions/Deposit.tsx

@@ -2,13 +2,13 @@ import React, { useState } from 'react';
 import { useAsyncCallback } from 'react-async-hook';
 import { Button, Form, Input, InputNumber } from 'antd';
 import { usePrefixedTranslation } from 'hooks';
-import { LndNode } from 'shared/types';
+import { LightningNode } from 'shared/types';
 import { useStoreActions } from 'store';
 import { format } from 'utils/units';
 
 const InputGroup = Input.Group;
 
-const LndDeposit: React.FC<{ node: LndNode }> = ({ node }) => {
+const LndDeposit: React.FC<{ node: LightningNode }> = ({ node }) => {
   const { l } = usePrefixedTranslation('cmps.designer.lnd.actions.Deposit');
   const [amount, setAmount] = useState(1000000);
   const { notify } = useStoreActions(s => s.app);

src/components/designer/lnd/actions/OpenChannelButtons.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { Button, Form, Icon } from 'antd';
 import { usePrefixedTranslation } from 'hooks';
-import { LndNode } from 'shared/types';
+import { LightningNode } from 'shared/types';
 import { useStoreActions } from 'store';
 
 const Styled = {
@@ -12,7 +12,7 @@ const Styled = {
 };
 
 interface Props {
-  node: LndNode;
+  node: LightningNode;
 }
 
 const OpenChannelButtons: React.FC<Props> = ({ node }) => {

src/components/designer/lnd/actions/RemoveNode.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
 import { Button, Form, Modal } from 'antd';
 import { usePrefixedTranslation } from 'hooks';
-import { LndNode } from 'shared/types';
+import { LightningNode } from 'shared/types';
 import { useStoreActions } from 'store';
 
 interface Props {
-  node: LndNode;
+  node: LightningNode;
 }
 
 const RemoveNode: React.FC<Props> = ({ node }) => {

src/components/terminal/OpenTerminalButton.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { useAsyncCallback } from 'react-async-hook';
 import { Button, Form } from 'antd';
 import { usePrefixedTranslation } from 'hooks';
-import { BitcoinNode, LndNode } from 'shared/types';
+import { BitcoinNode, LightningNode } from 'shared/types';
 import { useStoreActions } from 'store';
 import { getContainerName } from 'utils/network';
 import { TERMINAL } from 'components/routing';
 
 interface Props {
-  node: LndNode | BitcoinNode;
+  node: LightningNode | BitcoinNode;
 }
 
 const OpenTerminalButton: React.FC<Props> = ({ node }) => {