Update/connection string

app/src/helpers/index.ts

@@ -59,3 +59,7 @@ export function parseDate(date: number): string {
 export function shortTransactionId(id: string): string {
   return `${id.substring(0, 4)}...${id.substring(id.length - 4, id.length)}`;
 }
+
+export function formatPubkey(pk: string) {
+  return `${pk.substring(0, 6)}...${pk.substring(pk.length - 6)}`;
+}

app/src/lnd/Channels.svelte

@@ -11,7 +11,7 @@
   } from "../store";
   import Peers from "./Peers.svelte";
   import AddChannel from "./AddChannel.svelte";
-  import { formatSatsNumbers } from "../helpers";
+  import { formatSatsNumbers, formatPubkey } from "../helpers";
   import ChannelRows from "./ChannelRows.svelte";
   import { parseClnGetInfo, parseClnListPeerRes } from "../helpers/cln";
   import { getLndPendingAndActiveChannels } from "../helpers/lnd";
@@ -122,10 +122,6 @@
     }
   }
 
-  function formatPubkey(pk: string) {
-    return `${pk.substring(0, 6)}...${pk.substring(pk.length - 6)}`;
-  }
-
   let copied = false;
   function copyPubkey() {
     navigator.clipboard.writeText(lndData.identity_pubkey);

app/src/lnd/Lnd.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { Tabs, Tab, TabContent } from "carbon-components-svelte";
   import Channels from "./Channels.svelte";
   import Invoices from "./Invoices.svelte";
@@ -10,6 +10,11 @@
     selectedNode,
     hsmd,
   } from "../store";
+  import { onMount } from "svelte";
+  import * as LND from "../api/lnd";
+  import * as CLN from "../api/cln";
+  import { parseClnGetInfo } from "../helpers/cln";
+  import { formatPubkey } from "../helpers";
 
   export let tag = "";
   export let type = "";
@@ -29,18 +34,36 @@
     }
   }
 
-  $: console.log($selectedNode);
+  let lndData: LND.LndInfo;
 
   $: peering_url = $selectedNode?.host
     ? `${$selectedNode?.host}:${$selectedNode.peer_port}`
     : `${$selectedNode.name}.sphinx:${$selectedNode.peer_port}`;
 
   let copied = false;
   function copyAddress() {
-    navigator.clipboard.writeText(peering_url);
+    navigator.clipboard.writeText(`${lndData?.identity_pubkey}@${peering_url}`);
     copied = true;
     setTimeout(() => (copied = false), 150);
   }
+
+  async function getLndInfo() {
+    const lndRes = await LND.get_info(tag);
+    lndData = lndRes;
+  }
+
+  async function getClnInfo() {
+    const clnRes = await CLN.get_info(tag);
+    lndData = await parseClnGetInfo(clnRes);
+  }
+
+  onMount(() => {
+    if (type === "Cln") {
+      getClnInfo();
+    } else {
+      getLndInfo();
+    }
+  });
 </script>
 
 {#if $hsmd}
@@ -50,11 +73,14 @@
 {:else}
   <div class="lnd-tabs-wrap">
     <div class="node-url">
-      <span>Peering Address:</span>
+      <span>Peering Connection String:</span>
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <span
         on:click={copyAddress}
-        style={`transform:scale(${copied ? 1.1 : 1});`}>{peering_url}</span
+        style={`transform:scale(${copied ? 1.1 : 1});`}
+        >{`${formatPubkey(
+          lndData?.identity_pubkey || ""
+        )}@${peering_url}`}</span
       >
     </div>
     <Tabs bind:selected>

app/src/lnd/Peers.svelte

@@ -16,8 +16,7 @@
   } from "../store";
   import { parseClnListPeerRes } from "../helpers/cln";
 
-  $: pubkey = "";
-  $: host = "";
+  $: connection_string = "";
   $: $finishedOnboarding, addDefaultPeer();
 
   export let back = () => {};
@@ -28,34 +27,44 @@
   $: peers = $peersStore && $peersStore[tag];
 
   let show_notification = false;
+  let error_notification = false;
 
   async function addPeer() {
+    const connection_array = connection_string && connection_string.split("@");
+    if (connection_array.length !== 2) {
+      error_notification = true;
+      return;
+    }
+    const pubkey = connection_array[0];
+    const host = connection_array[1];
+
     if (type === "Cln") {
       const peer = await CLN.add_peer(tag, pubkey, host);
       if (peer) {
+        connection_string = "";
         show_notification = true;
-        pubkey = "";
-        host = "";
         const peersData = await CLN.list_peers(tag);
         const parsedRes = await parseClnListPeerRes(peersData);
         peersStore.update((peer) => {
           return { ...peer, [tag]: parsedRes.peers };
         });
         createdPeerForOnboarding.update(() => true);
+      } else {
+        error_notification = true;
       }
     } else {
       if (await add_peer(tag, pubkey, host)) {
+        connection_string = "";
         show_notification = true;
-        pubkey = "";
-        host = "";
-
         setTimeout(async () => {
           const peersData = await list_peers(tag);
           peersStore.update((ps) => {
             return { ...ps, [tag]: peersData.peers };
           });
           createdPeerForOnboarding.update(() => true);
         }, 1000);
+      } else {
+        error_notification = true;
       }
     }
   }
@@ -66,15 +75,14 @@
       $finishedOnboarding.hasBalance &&
       !$finishedOnboarding.hasPeers
     ) {
-      pubkey =
-        "023d70f2f76d283c6c4e58109ee3a2816eb9d8feb40b23d62469060a2b2867b77f";
-      host = "54.159.193.149:9735";
+      connection_string =
+        "023d70f2f76d283c6c4e58109ee3a2816eb9d8feb40b23d62469060a2b2867b77f@54.159.193.149:9735";
     }
   }
 
   $: peersLength = peers && peers.length ? peers.length : "No";
   $: peersLabel = peers && peers.length <= 1 ? "peer" : "peers";
-  $: addDisabled = !pubkey || !host;
+  $: addDisabled = !connection_string;
 </script>
 
 <section class="peer-wrap">
@@ -111,18 +119,25 @@
       }}
     />
   {/if}
-  <section class="new-peer-form">
-    <div class="spacer" />
-    <TextInput
-      labelText={"Pubkey"}
-      placeholder={"New node pubkey"}
-      bind:value={pubkey}
+  {#if error_notification}
+    <InlineNotification
+      lowContrast
+      kind="error"
+      title="Error:"
+      subtitle="Error connecting to peer."
+      timeout={3000}
+      on:close={(e) => {
+        e.preventDefault();
+        error_notification = false;
+      }}
     />
+  {/if}
+  <section class="new-peer-form">
     <div class="spacer" />
     <TextInput
-      labelText={"Address"}
-      placeholder={"New node address"}
-      bind:value={host}
+      labelText={"Connection String"}
+      placeholder={"pubkey@host"}
+      bind:value={connection_string}
     />
     <div class="spacer" />
     <center