Merge pull request #420 from stakwork/reconnect-channel

Reconnect channel Button

app/src/api/lnd.ts

@@ -45,6 +45,7 @@ export interface LndPeer {
   inbound: number;
   ping_time: number;
   sync_type: number;
+  connected?: boolean;
 }
 
 async function lndCmd(cmd: Cmd, tag: string, content?: any) {

app/src/helpers/cln.ts

@@ -7,6 +7,8 @@ import {
 import long from "long";
 import type { LndChannel, LndPeer } from "../api/lnd";
 import type { LightningPeer } from "../nodes";
+import { list_peers } from "../api/cln";
+import { peers } from "../store";
 
 enum ClnChannelState {
   CHANNELD_AWAITING_LOCKIN = "CHANNELD_AWAITING_LOCKIN",
@@ -46,7 +48,7 @@ export function parseClnListPeerChannelsRes(res: {
 }
 
 export function parseClnListPeerRes(res: {
-  peers: { id: Buffer; netaddr; channels }[];
+  peers: { id: Buffer; connected: boolean; netaddr; channels }[];
 }): LndPeer[] {
   if (typeof res !== "object") {
     return [];
@@ -74,6 +76,7 @@ export function parseClnListPeerRes(res: {
       inbound: 0,
       ping_time: 0,
       sync_type: 0,
+      connected: peer.connected,
     };
   });
   return peers;
@@ -247,3 +250,23 @@ export function convertLightningPeersToObject(lightningPeers: LightningPeer[]) {
   }
   return peersObj;
 }
+
+export function convertPeersToConnectObj(peers: LndPeer[]) {
+  const connectPeerObj = {};
+  if (!Array.isArray(peers)) {
+    return connectPeerObj;
+  }
+  for (let i = 0; i < peers.length; i++) {
+    const peer = peers[i];
+    connectPeerObj[peer.pub_key] = peer.connected;
+  }
+  return connectPeerObj;
+}
+
+export async function fetchAndUpdateClnPeerStore(tag: string) {
+  const peersData = await list_peers(tag);
+  const thepeers = await parseClnListPeerRes(peersData);
+  peers.update((peer) => {
+    return { ...peer, [tag]: thepeers };
+  });
+}

app/src/lnd/ChannelRows.svelte

@@ -1,23 +1,37 @@
 <script lang="ts">
-  import { TextInput, Button, InlineLoading } from "carbon-components-svelte";
+  import {
+    TextInput,
+    Button,
+    InlineLoading,
+    Modal,
+    InlineNotification,
+  } from "carbon-components-svelte";
   import ReceiveLineWrap from "../components/ReceiveLineWrap.svelte";
   import ReceiveLine from "../components/ReceiveLine.svelte";
   import DotWrap from "../components/DotWrap.svelte";
   import Dot from "../components/Dot.svelte";
-  import { channels, lightningPeers } from "../store";
+  import { channels, lightningPeers, peers } from "../store";
   import { formatSatsNumbers } from "../helpers";
   import { getTransactionStatus, getBlockTip } from "../helpers/bitcoin";
   import Exit from "carbon-icons-svelte/lib/Exit.svelte";
   import { onDestroy, onMount } from "svelte";
-  import { convertLightningPeersToObject } from "../helpers/cln";
+  import {
+    convertLightningPeersToObject,
+    convertPeersToConnectObj,
+    fetchAndUpdateClnPeerStore,
+  } from "../helpers/cln";
+  import { add_peer } from "../api/cln";
 
   export let tag = "";
+  export let type = "";
   export let onclose = (id: string, dest: string) => {};
 
   let channel_arr = $channels[tag];
 
   $: peersObj = convertLightningPeersToObject($lightningPeers);
 
+  $: peersConnectObj = convertPeersToConnectObj($peers[tag]);
+
   function copyText(txt: string) {
     navigator.clipboard.writeText(txt);
   }
@@ -45,6 +59,14 @@
 
   let selectedChannelParter = "";
   let forceCloseDestination = "";
+  let open_reconnect_peer = false;
+  let isSubmitting = false;
+  let reconnectPubkey = "";
+  let reconnectHost = "";
+  let error_notification = false;
+  let message = "";
+  let notification_error = false;
+  let show_notification = false;
 
   function clickRow(chan) {
     if (!chan.active) return;
@@ -98,6 +120,48 @@
     // }
   }
 
+  function openReconnectPeerModal(e, pubkey) {
+    e.stopPropagation();
+    if (type !== "Cln") {
+      return;
+    }
+    reconnectPubkey = pubkey;
+    open_reconnect_peer = true;
+  }
+
+  async function handlePeerReconnect() {
+    isSubmitting = true;
+    try {
+      // reconnet to peer by sending pubkey
+      const res = await add_peer(tag, reconnectPubkey, reconnectHost);
+      // check response
+      if (typeof res === "string") {
+        message = res;
+        error_notification = true;
+        return;
+      }
+      if (res.id && res.address) {
+        // update peers again
+        await fetchAndUpdateClnPeerStore(tag);
+        reconnectHost = "";
+        reconnectPubkey = "";
+        open_reconnect_peer = false;
+        show_notification = true;
+        message = "Peer Reconnected Successfully";
+      }
+    } catch (error) {
+      console.log("Error going well", error);
+    } finally {
+      isSubmitting = false;
+    }
+  }
+
+  function handleOnCloseReconnectPeer() {
+    reconnectPubkey = "";
+    open_reconnect_peer = false;
+    reconnectHost = "";
+  }
+
   let chanInterval;
 
   onMount(() => {
@@ -111,6 +175,18 @@
 </script>
 
 <div class="lnd-table-wrap">
+  {#if show_notification}
+    <InlineNotification
+      kind={notification_error ? "error" : "success"}
+      title={notification_error ? "Error:" : "Success:"}
+      subtitle={message}
+      timeout={8000}
+      on:close={(e) => {
+        e.preventDefault();
+        show_notification = false;
+      }}
+    />
+  {/if}
   <section class="table-head">
     <div class="th" />
     <div class="th">CAN SEND</div>
@@ -160,9 +236,30 @@
             </div>
           {/if}
           <div class="td">
-            <span class="pubkey"
-              >{peersObj[chan.remote_pubkey] || chan.remote_pubkey}</span
-            >
+            {#if type === "Cln"}
+              {#if peersConnectObj[chan.remote_pubkey]}
+                <span class="pubkey">
+                  {peersObj[chan.remote_pubkey] || chan.remote_pubkey}
+                </span>
+              {:else}
+                <span>
+                  <Button
+                    skeleton={false}
+                    on:click={(e) =>
+                      openReconnectPeerModal(e, chan.remote_pubkey)}
+                    size="small"
+                    kind={"tertiary"}
+                    >Reconnet{peersObj[chan.remote_pubkey]
+                      ? ` to ${peersObj[chan.remote_pubkey]}`
+                      : ""}</Button
+                  >
+                </span>
+              {/if}
+            {:else}
+              <span class="pubkey">
+                {peersObj[chan.remote_pubkey] || chan.remote_pubkey}
+              </span>
+            {/if}
           </div>
         </div>
         {#if selectedChannelParter === chan.remote_pubkey}
@@ -200,6 +297,45 @@
       </section>
     {/each}
   </section>
+  <Modal
+    bind:open={open_reconnect_peer}
+    modalHeading={"Reconnect Peer"}
+    primaryButtonDisabled={!reconnectPubkey || !reconnectHost || isSubmitting}
+    primaryButtonText={isSubmitting ? "Loading..." : "Reconnect Peer"}
+    secondaryButtonText="Cancel"
+    on:click:button--secondary={() => (open_reconnect_peer = false)}
+    on:open
+    on:close={handleOnCloseReconnectPeer}
+    on:submit={handlePeerReconnect}
+  >
+    {#if error_notification}
+      <InlineNotification
+        kind="error"
+        title="Error:"
+        subtitle={message}
+        timeout={8000}
+        on:close={(e) => {
+          e.preventDefault();
+          error_notification = false;
+        }}
+      />
+    {/if}
+    <div class="input_container">
+      <TextInput
+        labelText="Pubkey"
+        placeholder="Enter Pubkey"
+        bind:value={reconnectPubkey}
+        readonly={true}
+      />
+    </div>
+    <div class="input_container">
+      <TextInput
+        labelText="Pubkey"
+        placeholder="Enter Peer Pubkey..."
+        bind:value={reconnectHost}
+      />
+    </div>
+  </Modal>
 </div>
 
 <style>

app/src/lnd/Channels.svelte

@@ -242,7 +242,7 @@
     />
     <div />
   {:else if $channels?.hasOwnProperty(tag) && $channels[tag]?.length}
-    <ChannelRows {tag} onclose={onCloseChannel} />
+    <ChannelRows {tag} onclose={onCloseChannel} {type} />
   {:else}
     <section class="no-data-wrap">
       <h3>