Select wallets

src/components/LightningConnectWallet.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <b-form-select v-model="selectedWallet" class="mb-3">
+      <b-form-select-option
+        :value="{walletName: 'Select your wallet', walletType: null}"
+        disabled
+      >Select your wallet</b-form-select-option>
+      <b-form-select-option :value="{walletName: 'Zap Desktop', walletType: 'grpc'}">Zap Desktop</b-form-select-option>
+      <b-form-select-option :value="{walletName: 'Zap Mobile', walletType: 'rest'}">Zap Mobile</b-form-select-option>
+      <b-form-select-option :value="{walletName: 'Zeus', walletType: 'rest'}">Zeus</b-form-select-option>
+      <b-form-select-option-group label="Other">
+        <b-form-select-option
+          :value="{walletName: 'any other wallet that uses lndconnect REST', walletType: 'rest'}"
+        >lndconnect REST</b-form-select-option>
+        <b-form-select-option
+          :value="{walletName: 'any other wallet that uses lndconnect gRPC', walletType: 'grpc'}"
+        >lndconnect gRPC</b-form-select-option>
+      </b-form-select-option-group>
+    </b-form-select>
+    <div class="d-flex align-items-center" v-if="lndConnectUrl">
+      <!-- Pubkey QR Code -->
+      <qr-code :value="lndConnectUrl" :size="200" level="M" class="qr-image" :showLogo="false"></qr-code>
+      <div class="w-100 align-self-center ml-3 ml-sm-4">
+        <p>Connect to {{ selectedWallet.walletName }} using the following url or scan the QR code</p>
+        <input-copy class="mb-2" size="sm" :value="lndConnectUrl"></input-copy>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+import QrCode from "@/components/Utility/QrCode";
+import InputCopy from "@/components/Utility/InputCopy";
+
+export default {
+  data() {
+    return {
+      selectedWallet: { walletName: "Select your wallet", walletType: null }
+    };
+  },
+  computed: {
+    ...mapState({
+      lndConnectUrl: state => state.lightning.lndConnectUrl
+    })
+  },
+  methods: {},
+  watch: {
+    selectedWallet: async function(wallet) {
+      console.log(wallet.walletType);
+      await this.$store.dispatch(
+        "lightning/getLndConnectUrl",
+        wallet.walletType
+      );
+      console.log(this.lndConnectUrl);
+    }
+  },
+  components: {
+    QrCode,
+    InputCopy
+  }
+};
+</script>
+
+<style lang="scss">
+.logo {
+  height: 20vh;
+  max-height: 200px;
+  width: auto;
+}
+</style>

src/components/Utility/QrCode.vue

@@ -2,18 +2,14 @@
   <div class="qr-container">
     <!-- Popup umbrel logo in the middle of QR code -->
     <transition name="qr-logo-popup" appear>
-      <img
+      <img v-show="showLogo" src="@/assets/umbrel-qr-icon.svg" class="qr-logo" />
-        v-show="showLogo"
-        src="@/assets/umbrel-qr-icon.svg"
-        class="qr-logo"
-      />
     </transition>
 
     <!-- QR Code element -->
     <qrcode-vue
       :value="value"
       :size="size"
-      level="H"
+      :level="level"
       renderAs="svg"
       class="d-flex justify-content-center qr-image"
     ></qrcode-vue>
@@ -29,6 +25,10 @@ export default {
       type: Number,
       default: 200
     },
+    level: {
+      type: String,
+      default: "H"
+    },
     value: String,
     showLogo: {
       type: Boolean,

src/store/modules/lightning.js

@@ -31,6 +31,7 @@ const state = () => ({
   },
   alias: "",
   pubkey: "",
+  lndConnectUrl: "",
   uris: [],
   numPendingChannels: 0,
   numActiveChannels: -1,
@@ -137,6 +138,10 @@ const mutations = {
 
   setUris(state, uris) {
     state.uris = uris;
+  },
+
+  setLndConnectUrl(state, url) {
+    state.lndConnectUrl = url;
   }
 };
 
@@ -427,6 +432,15 @@ const actions = {
     commit("setChannelFocus", channel);
   },
 
+  async getLndConnectUrl({ commit }, type) {
+    const url = await API.get(
+      `${process.env.VUE_APP_MANAGER_API_URL}/v1/system/lndconnect-url?type=${type}`
+    );
+    if (url) {
+      commit("setLndConnectUrl", url);
+    }
+  },
+
   async unlockWallet({ commit, state }, plainTextPassword) {
     if (state.operational && !state.unlocked) {
       const result = await API.post(

src/views/Lightning.vue

@@ -59,12 +59,41 @@
                 />
               </svg>
             </template>
-            <b-dropdown-item href="#" @click.prevent="showNodeInfo">Connect</b-dropdown-item>
+            <b-dropdown-item href="#" v-b-modal.connect-info-modal>Connect</b-dropdown-item>
+            <b-dropdown-item href="#" v-b-modal.node-info-modal>Peer Address</b-dropdown-item>
             <b-dropdown-item href="/logs/?filter=umbrel+lnd" target="_blank">View logs</b-dropdown-item>
             <!-- <b-dropdown-divider /> -->
             <!-- <b-dropdown-item variant="danger" href="#" disabled>Stop LND</b-dropdown-item> -->
           </b-dropdown>
-          <b-modal id="node-info-modal" ref="node-info-modal" size="lg" centered hide-footer>
+          <b-modal id="connect-info-modal" size="lg" centered hide-footer>
+            <template v-slot:modal-header="{ close }">
+              <div class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100">
+                <h3 class="text-lowercase">connect wallet</h3>
+                <!-- Emulate built in modal header close button action -->
+                <a href="#" class="align-self-center" v-on:click.stop.prevent="close">
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 18 18"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M13.6003 4.44197C13.3562 4.19789 12.9605 4.19789 12.7164 4.44197L9.02116 8.1372L5.32596 4.442C5.08188 4.19792 4.68615 4.19792 4.44207 4.442C4.198 4.68607 4.198 5.0818 4.44207 5.32588L8.13728 9.02109L4.44185 12.7165C4.19777 12.9606 4.19777 13.3563 4.44185 13.6004C4.68592 13.8445 5.08165 13.8445 5.32573 13.6004L9.02116 9.90497L12.7166 13.6004C12.9607 13.8445 13.3564 13.8445 13.6005 13.6004C13.8446 13.3563 13.8446 12.9606 13.6005 12.7165L9.90505 9.02109L13.6003 5.32585C13.8444 5.08178 13.8444 4.68605 13.6003 4.44197Z"
+                      fill="#6c757d"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </template>
+            <div class="px-2 px-sm-3 pb-2 pb-sm-3">
+              <lightning-connect-wallet></lightning-connect-wallet>
+            </div>
+          </b-modal>
+
+          <b-modal id="node-info-modal" size="lg" centered hide-footer>
             <template v-slot:modal-header="{ close }">
               <div class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100">
                 <h3 class="text-lowercase">peer address</h3>
@@ -246,6 +275,7 @@ import API from "@/helpers/api";
 
 import CardWidget from "@/components/CardWidget";
 import Stat from "@/components/Utility/Stat";
+import LightningConnectWallet from "@/components/LightningConnectWallet";
 import LightningWallet from "@/components/LightningWallet";
 import QrCode from "@/components/Utility/QrCode";
 import InputCopy from "@/components/Utility/InputCopy";
@@ -270,6 +300,7 @@ export default {
       alias: state => state.lightning.alias,
       pubkey: state => state.lightning.pubkey,
       uris: state => state.lightning.uris,
+      lndConnectUrl: state => state.lightning.lndConnectUrl,
       channels: state => state.lightning.channels,
       unit: state => state.system.unit
     })
@@ -278,6 +309,10 @@ export default {
     showNodeInfo() {
       this.$refs["node-info-modal"].show();
     },
+    showConnectionInfo() {
+      this.$store.dispatch("lightning/getLndConnectUrl", "rest");
+      this.$refs["connect-info-modal"].show();
+    },
     async downloadChannelBackup() {
       await API.download(
         `${process.env.VUE_APP_MIDDLEWARE_API_URL}/v1/lnd/util/download-channel-backup`,
@@ -327,6 +362,7 @@ export default {
     }
   },
   components: {
+    LightningConnectWallet,
     LightningWallet,
     CardWidget,
     Stat,