WebLn Implementaion to Quick-pay

dist/manifest.json

@@ -17,6 +17,9 @@
     "default_title": "RTL Quickpay",
     "default_popup": "./index.html"
   },  
+  "web_accessible_resources": [
+    "webln-bundle.js"
+  ],
   "content_scripts": [
     {
       "matches": ["http://*/*", "https://*/*"],

src/actions/webln_action.js

@@ -0,0 +1,72 @@
+import lightningPayReq from "bolt11";
+import utils from "~/common/lib/utils";
+
+export const getInfo = async (message, sender) => {
+    const connector = await state.getState().getConnector();
+    const info = await connector.getInfo();
+
+    return {
+      data: {
+        node: {
+          alias: info.data.alias,
+          pubkey: info.data.pubkey,
+          color: info.data.color,
+        },
+      },
+    };
+};
+
+export const makeInvoiceWithPrompt = async (message) => {
+    const amount = message.args.amount || message.args.defaultAmount;
+    const memo = message.args.memo || message.args.defaultMemo;
+    const amountEditable = !message.args.amount;
+    const memoEditable = !message.args.memo || message.args.memo === "";
+    // If amount is not defined yet, let the user generate an invoice with an amount field.
+    try {
+        const response = await utils.openPrompt({
+            origin: message.origin,
+            action: "makeInvoice",
+            args: {
+                amountEditable,
+                memoEditable,
+                invoiceAttributes: {
+                    amount,
+                    memo,
+                    minimumAmount: message.args.minimumAmount,
+                    maximumAmount: message.args.maximumAmount,
+                },
+            },
+        });
+        return response;
+    }
+    catch (e) {
+        return { error: e instanceof Error ? e.message : e };
+    }
+};
+
+async function payWithPrompt(message) {
+    try {
+        const response = await utils.openPrompt(Object.assign(Object.assign({}, message), { action: "confirmPayment" }));
+        return response;
+    }
+    catch (e) {
+        console.error("Payment cancelled", e);
+        if (e instanceof Error) {
+            return { error: e.message };
+        }
+    }
+}
+
+export const signMessageOrPrompt = async (message) => {
+    const messageToSign = message.args.message;
+    if (typeof messageToSign !== "string") {
+        return {
+            error: "Message missing.",
+        };
+    }
+    return signWithPrompt(message);
+};
+
+export {
+    payWithPrompt,
+}

src/connectors/cln.js

@@ -0,0 +1,132 @@
+const GetInfoResponse = require('./connectors.interface.js');
+import utils from "../shared/utils";
+
+class Cln{
+    init() {
+        return Promise.resolve();
+      }
+
+    unload() {
+        return Promise.resolve();
+    }
+
+    getInfo() {
+        return this.request("GET", "/v1/getinfo", undefined, {}).then((data) => {
+            return {
+                data: {
+                    alias: data.alias,
+                    pubkey: data.identity_pubkey,
+                    color: data.color,
+                },
+            };
+        });
+    }
+
+    sendPayment(args) {
+        return this.request("POST", "/v1/channels/transactions", {
+            payment_request: args.paymentRequest,
+        }, {}).then((data) => {
+            if (data.payment_error) {
+                throw new Error(data.payment_error);
+            }
+            return {
+                data: {
+                    preimage: utils.base64ToHex(data.payment_preimage),
+                    paymentHash: utils.base64ToHex(data.payment_hash),
+                    route: data.payment_route,
+                },
+            };
+        });
+    }
+
+    makeInvoice(args) {
+        return this.request("POST", "/v1/invoices", {
+            memo: args.memo,
+            value: args.amount,
+        }).then((data) => {
+            return {
+                data: {
+                    paymentRequest: data.payment_request,
+                    rHash: utils.base64ToHex(data.r_hash),
+                },
+            };
+        });
+    }
+
+    getAddress() {
+        return this.request("POST", "/v2/wallet/address/next", undefined, {});
+    }
+
+    async getInvoices() {
+        const data = await this.request("GET", "/v1/invoices", { reversed: true });
+        const invoices = data.invoices
+            .map((invoice, index) => {
+            const custom_records = invoice.htlcs[0] && invoice.htlcs[0].custom_records;
+            return {
+                custom_records,
+                id: `${invoice.payment_request}-${index}`,
+                memo: invoice.memo,
+                preimage: invoice.r_preimage,
+                settled: invoice.settled,
+                settleDate: parseInt(invoice.settle_date) * 1000,
+                totalAmount: invoice.value,
+                type: "received",
+            };
+        })
+            .reverse();
+        return {
+            data: {
+                invoices,
+            },
+        };
+    }
+
+    async request(method, path, args, defaultValues) {
+        const url = new URL(this.config.url);
+        url.pathname = `${url.pathname.replace(/\/$/, "")}${path}`;
+        let body = null;
+        const headers = new Headers();
+        headers.append("Accept", "application/json");
+        if (method === "POST") {
+            body = JSON.stringify(args);
+            headers.append("Content-Type", "application/json");
+        }
+        else if (args !== undefined) {
+            url.search = new URLSearchParams(args).toString();
+        }
+        if (this.config.macaroon) {
+            headers.append("Grpc-Metadata-macaroon", this.config.macaroon);
+        }
+        const res = await fetch(url.toString(), {
+            method,
+            headers,
+            body,
+        });
+        if (!res.ok) {
+            let errBody;
+            try {
+                errBody = await res.json();
+                // map it over for now.
+                if (errBody.message && !errBody.error) {
+                    errBody.error = errBody.message;
+                    delete errBody.message;
+                }
+                if (!errBody.error) {
+                    throw new Error("Something went wrong");
+                }
+            }
+            catch (err) {
+                throw new Error(res.statusText);
+            }
+            console.error(errBody);
+            throw new Error(errBody.error);
+        }
+        let data = await res.json();
+        if (defaultValues) {
+            data = Object.assign(Object.assign({}, defaultValues), data);
+        }
+        return data;
+    }
+}
+
+export default Cln;

src/connectors/connectors.interface.js

@@ -0,0 +1,9 @@
+export const WebLNNode = {
+    alias: string,
+    pubkey: string,
+    color: string,
+  }
+
+export const GetInfoResponse = {
+    data: WebLNNode,
+};

src/manifest.json

@@ -17,6 +17,9 @@
     "default_title": "RTL Quickpay",
     "default_popup": "./index.html"
   },  
+  "web_accessible_resources": [
+    "webln-bundle.js"
+  ],
   "content_scripts": [
     {
       "matches": ["http://*/*", "https://*/*"],

src/pages/error.js

@@ -22,31 +22,30 @@ Error.prototype.initEvents = function () {
 
   function onPageLoad() {
     if (self.errorData) {
-      if(self.errorData.error) {
-        if (typeof self.errorData.error != 'string') {
+      if (self.errorData.error) {
+        if (typeof self.errorData.error != "string") {
           self.errorData.error = JSON.stringify(self.errorData.error, null, 2);
         }
-        $('#errorMsg').text(self.errorData.error);
+        $("#errorMsg").text(self.errorData.error);
       }
-      if(self.errorData.message) {
-        $('#errorTitle').text(self.errorData.message);
+      if (self.errorData.message) {
+        $("#errorTitle").text(self.errorData.message);
       }
     }
   }
 
-  pageContainer.keyup(function(event) {
+  pageContainer.keyup(function (event) {
     event.preventDefault();
-    if(event.code == 'Enter') {
-      $('#backBtn').click();
+    if (event.code == "Enter") {
+      $("#backBtn").click();
     }
   });
 
-  $('#backBtn').click(function () {
+  $("#backBtn").click(function () {
     loadModule({ load: self.loadedFrom, loadedFrom: CONSTANTS.MODULES.ERROR });
   });
-
 };
 
 Error.prototype.render = function () {
   pageContainer.html(errorHtml);
-};
+};

src/pages/payment.js

@@ -15,6 +15,10 @@ let Payment = function (params) {
   this.loadedFrom = params.loadedFrom;
 };
 
+const WebLNProvider = require('../webln/webln.js');
+
+var weblnprovider = new WebLNProvider();
+
 Payment.prototype.initEvents = function () {
   "use strict";
   var self = this;
@@ -47,7 +51,7 @@ Payment.prototype.initEvents = function () {
   }
 
   $('#sendPaymentBtn').click(function () {
-    $('#sendPaymentBtn').html(CONSTANTS.SPINNER_BTN);
+    $('#sendPaymentBtn').html(CONSTANTS.SPINNER_BTN); 
     let reqData = {};
     let invoiceVal = $('#invoice').val();
     let invoiceAmount = $('#invoiceAmount').val();
@@ -215,8 +219,11 @@ Payment.prototype.initEvents = function () {
           $('#sendPaymentBtn').removeAttr('disabled');
         }
       }).catch(err => {
+        $("#paymentDetails").html(`<div class="alert alert-danger" role="alert">
+    <strong><h6 id="errorTitle">Invalid ID</h6></strong>
+    <span id="errorMsg">Please Enter Correct Invoice ID.</span>
+  </div>`);
         $('#paymentDetails').html(createPaymentDetailsHTML('ERROR', selectNodeImplementation, err.responseJSON));
-        $('#paymentDetails').addClass('invalid-border');
         $('#sendPaymentBtn').attr('disabled', true);
       });
     }

src/scripts/background.js

@@ -1,6 +1,8 @@
 var payReqForContext = '';
 var browser = require('webextension-polyfill');
+var injectScript = require('./injectScript.js')
 
+// this is to open a dialog box with address, with the action of a left click
 browser.runtime.onMessage.addListener((msg, sender) => {
   if (msg.data && msg.source === 'CLICK' && msg.application === 'RTL') {
     browser.windows.create({
@@ -36,4 +38,73 @@ browser.contextMenus.onClicked.addListener(
   }
 );
 
+const weblnCalls = ["getInfo"];
+
+// calls that can be executed when webln is not enabled for the current content page
+const disabledCalls = ["enable"];
+
+let isEnabled = false; // store if webln is enabled for this content page
+let callActive = false; // store if a webln is currently active. Used to prevent multiple calls in parallel
+
+async function init() {
+
+  injectScript(); // injects the webln object
+
+  // message listener to listen to inpage webln calls
+  // those calls get passed on to the background script
+  // (the inpage script can not do that directly, but only the inpage script can make webln available to the page)
+  window.addEventListener("message", (ev) => {
+    // Only accept messages from the current window
+    if (ev.source !== window) {
+      return;
+    }
+    if (ev.data && ev.data.application === "RTL" && !ev.data.response) {
+      // if a call is active we ignore the request
+      if (callActive) {
+        console.error("WebLN call already executing");
+        return;
+      }
+      // limit the calls that can be made from webln
+      // only listed calls can be executed
+      // if not enabled only enable can be called.
+      const availableCalls = isEnabled ? weblnCalls : disabledCalls;
+      if (!availableCalls.includes(ev.data.action)) {
+        console.error("Function not available. Is the provider enabled?");
+        return;
+      }
+
+      const messageWithOrigin = {
+        action: `webln/${ev.data.action}`, // every webln call must be scoped under `webln/` we do this to indicate that those actions are callable from the websites
+        args: ev.data.args,
+        application: "RTL",
+        public: true, // indicate that this is a public call from the content script
+        prompt: true,
+        origin: getOriginData(),
+      };
+      const replyFunction = (response) => {
+        callActive = false; // reset call is active
+        // if it is the enable call we store if webln is enabled for this content script
+        if (ev.data.action === "enable") {
+          isEnabled = response.data?.enabled;
+        }
+        window.postMessage(
+          {
+            application: "RTL",
+            response: true,
+            data: response,
+          },
+          "*" // TODO use origin
+        );
+      };
+      callActive = true;
+      return browser.runtime
+        .sendMessage(messageWithOrigin)
+        .then(replyFunction)
+        .catch(replyFunction);
+    }
+  });
+}
+
+init();
+
 createContextMenu();