Add Alby

src/components/ConnectWallet/Wallets/Alby.vue

@@ -0,0 +1,50 @@
+<template>
+  <connection-details name="Alby" requires="lnd">
+    <step-list>
+      <step>
+        Add the Alby extension to your browser and open the app. Because you are connecting over Tor, you will also need to install the Alby companion application.
+      </step>
+      <step>
+        Click on <span class="font-weight-bold">"Get Started"</span>.
+      </step>
+      <step>
+        Enter and confirm your password, then click
+        <span class="font-weight-bold">"Next"</span>.
+      </step>
+      <step>
+        Select Umbrel from the connector options.
+      </step>
+      <step>
+        Copy this value into the
+        <span class="font-weight-bold">"lndconnect REST URL"</span>.
+        <input-copy
+          :value="urls.lnd.restTor"
+          auto-width
+        ></input-copy>
+      </step>
+      <step>Click <span class="font-weight-bold">"Continue"</span>.</step>
+      <step>
+        Congratulations! You have successfully connected Alby to your Umbrel.
+      </step>
+    </step-list>
+  </connection-details>
+</template>
+
+<script>
+import ConnectionDetails from "@/components/ConnectWallet/ConnectionDetails";
+import StepList from "@/components/ConnectWallet/StepList";
+import Step from "@/components/ConnectWallet/Step";
+import InputCopy from "@/components/Utility/InputCopy";
+
+export default {
+  props: {
+    urls: Object,
+  },
+  components: {
+    ConnectionDetails,
+    StepList,
+    Step,
+    InputCopy,
+  },
+};
+</script>

src/router/index.js

@@ -20,6 +20,7 @@ import ConnectWallet from "../views/ConnectWallet.vue";
 import Logout from "../views/Logout.vue";
 
 // Wallet components for wallet connector
+import Alby from "../components/ConnectWallet/Wallets/Alby.vue";
 import BitBoxApp from "../components/ConnectWallet/Wallets/BitBoxApp.vue";
 import BitcoinCoreP2P from "../components/ConnectWallet/Wallets/BitcoinCoreP2P.vue";
 import BitcoinCoreRPC from "../components/ConnectWallet/Wallets/BitcoinCoreRPC.vue";
@@ -36,7 +37,6 @@ import SamouraiWallet from "../components/ConnectWallet/Wallets/SamouraiWallet.v
 import Sparrow from "../components/ConnectWallet/Wallets/Sparrow.vue";
 import SpecterDesktop from "../components/ConnectWallet/Wallets/SpecterDesktop.vue";
 import Wasabi from "../components/ConnectWallet/Wallets/Wasabi.vue";
-
 import ZapAndroid from "../components/ConnectWallet/Wallets/ZapAndroid.vue";
 import ZapDesktop from "../components/ConnectWallet/Wallets/ZapDesktop.vue";
 import ZapiOS from "../components/ConnectWallet/Wallets/ZapiOS.vue";
@@ -165,6 +165,13 @@ const routes = [
             name: "connect",
             component: ConnectWallet,
             children: [
+	      {
+		path: "alby",
+		component: Alby,
+		meta: {
+		wallet: "alby"
+		}
+	      },
               {
                 path: "bitboxapp",
                 component: BitBoxApp,
@@ -364,7 +371,7 @@ const router = new VueRouter({
       // For anchors
     } else if (to.hash) {
 
-      // 500ms timeout allows the page to load or else 
+      // 500ms timeout allows the page to load or else
       // smooth scrolling would not scroll to the correct position
       setTimeout(() => {
         const element = document.getElementById(to.hash.replace(/#/, ''))

src/views/ConnectWallet.vue

@@ -49,6 +49,7 @@ export default {
     return {
       options: [
         { value: null, text: "Select your wallet", disabled: true },
+        { value: "alby", text: "Alby" },
         { value: "bitboxapp", text: "BitBoxApp" },
         { value: "blockstream-green", text: "Blockstream Green (Android)" },
         { value: "bluewallet", text: "BlueWallet" },