feat: add initial webln support

Author: denengineer

app/sources/public/content.js

@@ -5,6 +5,44 @@
 
   window[`walletIntegrated_${chrome.runtime.id}`] = true;
 
+  const weblnContainer = document.createElement('script');
+  weblnContainer.textContent = `
+    window.webln = { isEnabled: true };
+    window.webln.enable = async () => true;
+    const createWeblnPromise = (method, options) => new Promise(resolve => {
+      window.addEventListener('message', function(e) {
+        if (e.data.from === 'bitlum' && e.data.method === method) {
+          resolve(e.data.response);
+        }
+      }, true);
+      window.postMessage({ from: 'webln', method, options }, "*");
+    });
+    window.webln.makeInvoice = (options) => createWeblnPromise('makeInvoice', options);
+    window.webln.sendPayment = (options) => createWeblnPromise('sendPayment', options);
+  `;
+  (document.head || document.documentElement).appendChild(weblnContainer);
+  weblnContainer.remove();
+
+  window.addEventListener(
+    'message',
+    async e => {
+      if (e.data.from === 'webln') {
+        chrome.runtime.sendMessage(
+          {
+            type: 'weblnRequest',
+            method: e.data.method,
+            options: e.data.options,
+            origin: window.location.hostname,
+          },
+          response => {
+            window.postMessage({ from: 'bitlum', method: e.data.method, response }, '*');
+          },
+        );
+      }
+    },
+    true,
+  );
+
   const vendorHandlers = {
     default: {
       handleWuid(wuid, amount) {

app/sources/src/background.js

@@ -127,12 +127,23 @@ const openConfirmationWindow = payment => {
   );
 };
 
+const openReceiveWindow = payment => {
+  window.open(
+    `chrome-extension://${
+      window.chrome.runtime.id
+    }/index.html#/payments/receive/confirm?receive=${payment}&nopopup=true`,
+    '_blank',
+    'width=450,height=700,titlebar=0,menubar=0,location=0',
+  );
+};
+
 (async () => {
   await stores.init();
   const { accounts, payments, ui, info, wallets } = stores;
 
   const latestPaymentRequests = {};
   const latestClipboardChange = {};
+  const withdrawalRequest = {};
 
   setUninstallUrl(accounts.get.data);
 
@@ -142,7 +153,7 @@ const openConfirmationWindow = payment => {
     });
   }
 
-  window.chrome.runtime.onMessage.addListener(async req => {
+  window.chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
     if (req.type === 'clipboardEvent') {
       if (req.action === 'copy') {
         localStorage.setItem(
@@ -159,16 +170,77 @@ const openConfirmationWindow = payment => {
     }
 
     if (req.type === 'authenticated') {
-      await accounts.authenticate.run();
-      LiveChat.boot({
-        user_id: accounts.get.data && accounts.get.data.auid,
+      accounts.authenticate.run().then(r => {
+        LiveChat.boot({
+          user_id: accounts.get.data && accounts.get.data.auid,
+        });
+        setUninstallUrl(accounts.get.data);
       });
-      setUninstallUrl(accounts.get.data);
     }
 
     if (req.type === 'signedOut') {
       accounts.authenticate.cleanup('all');
     }
+
+    if (req.type === 'weblnRequest') {
+      GA({
+        type: 'event',
+        category: 'extension',
+        action: 'weblnRequest',
+        label: req.method,
+      });
+      if (req.method === 'makeInvoice') {
+        const amount = req.options
+          ? (req.options.amount || req.options.defaultAmount) / 10 ** 8
+          : undefined;
+        // Return invoice with maximum amount by default
+        // instead of open withdraw confirmation window
+        // payments.receive
+        //   .run(
+        //     'lightning',
+        //     req.options ? (req.options.amount || req.options.defaultAmount) / 10 ** 8 : 0,
+        //     'BTC',
+        //   )
+        //   .then(response => {
+        //     if (response.data) {
+        //       sendResponse({ paymentRequest: response.data.wuid });
+        //     } else {
+        //       sendResponse({ response });
+        //     }
+        //   });
+        openReceiveWindow(
+          JSON.stringify({
+            amount,
+            type: 'lightning',
+            asset: 'BTC',
+            origin: req.origin,
+          }),
+        );
+        withdrawalRequest[`${req.origin}_${amount}`] = response => {
+          if (response.data) {
+            sendResponse({ paymentRequest: response.data.wuid });
+          } else {
+            sendResponse({ response });
+          }
+        };
+        return true;
+      }
+      if (req.method === 'sendPayment') {
+        openConfirmationWindow(
+          JSON.stringify({ wuid: req.options, asset: 'BTC', origin: req.origin }),
+        );
+      }
+    }
+
+    if (req.type === 'wuidGenerated') {
+      withdrawalRequest[`${req.initialRequest.origin}_${req.initialRequest.amount}`](req);
+      GA({
+        type: 'event',
+        category: 'extension',
+        action: 'weblnInvoicePassed',
+        label: req.initialRequest.origin,
+      });
+    }
   });
   const paymentsFetcher = setInterval(async () => {
     if (accounts.authenticate.data) {
@@ -267,6 +339,11 @@ const openConfirmationWindow = payment => {
   //   }
   //   latestClipboardChange.value = wuid;
   // }, 400);
+
+  if (process.env.NODE_ENV === 'development') {
+    // Any configurations are optional
+    window.stores = stores;
+  }
 })();
 
 window.chrome.runtime.onInstalled.addListener(details => {

app/sources/src/components/ReceivePayment/styles.js

@@ -30,9 +30,9 @@ import completedIcon from 'assets/icons/check-circle.svg';
 
 export * from 'components/common';
 
-export const CopyButton = styled(({ data, className }) => (
-  <CopyButtonRaw className={className} copyData={data}>
-    <CopyIcon />
+export const CopyButton = styled(({ data, className, inline, copiedText, copyText }) => (
+  <CopyButtonRaw className={className} copyData={data} copiedText={copiedText} copyText={copyText}>
+    {!inline ? <CopyIcon /> : null}
   </CopyButtonRaw>
 ))`
   font: var(--fonts__text);
@@ -45,7 +45,7 @@ export const CopyButton = styled(({ data, className }) => (
     width: 1.8em;
   }
   margin-top: -0.2em;
-  margin-left: 0.6em;
+  margin-left: ${({ inline }) => (inline ? '0' : '0.6em')};
 `;
 
 export const AssetSelector = styled.div`
@@ -181,6 +181,28 @@ export const SendResult = styled.div`
   }
 `;
 
+export const ReceiveResult = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  background: var(--colors__bg_bright);
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  white-space: pre;
+  z-index: 10;
+  & > ${P} {
+    font: var(--fonts__header_bold);
+    color: var(--colors__bg_dark);
+  }
+  & ${CopyButton} {
+    font-size: 1.2em;
+    padding-top: 0.5em;
+  }
+`;
+
 export const SendResultIcon = styled.div`
   background-image: url(${completedIcon});
   height: 8em;
@@ -194,6 +216,32 @@ export const SendResultIcon = styled.div`
   margin-bottom: 2em;
 `;
 
+export const ReceiveResultIcon = styled.div`
+  background-image: url(${completedIcon});
+  height: 8em;
+  width: 8em;
+  background-color: var(--colors__bg_dark);
+  background-repeat: no-repeat;
+  border-radius: 50%;
+  background-size: 60%;
+  background-position: center;
+  margin-top: 6em;
+  margin-bottom: 2em;
+`;
+
+export const SendResultDesc = styled.p`
+  color: var(--colors__bg_dark);
+  font-size: 0.8em;
+  max-width: 90%;
+  word-break: break-word;
+  margin-top: 1em;
+`;
+export const SendResultCta = styled.a`
+  color: var(--colors__bg_accent);
+  font-size: 0.8em;
+  margin-top: 1em;
+`;
+
 export const Root = withLoader(styled(Form)`
   position: relative;
   background-color: var(--colors__bg_bright);