Merge branch 'master' into dark-mode-welcome-onboard

README.md

@@ -30,7 +30,7 @@ The extension can connect to different node implementations and supports custodi
 
 We have a channel on the [bitcoin.design](https://bitcoin.design/) Slack community [#lightning-browser-extension](https://bitcoindesign.slack.com/archives/C02591ADXM2) and a [Telegram group](https://t.me/getAlby) Come and join us!
 
-We also do a weekly call on Monday at 14:00 UTC - ([15:00 CEST/CAT - 09:00 EDT](https://www.worldtimebuddy.com/?qm=1&lid=100,12,5&h=100&date=2021-11-4&sln=14-15&hf=1)) on [Google Meet](https://meet.google.com/aea-xvbm-fhy)
+We also do a weekly call on Monday at 14:00 UTC - ([15:00 CET/CAT - 10:00 EDT](https://www.worldtimebuddy.com/?qm=1&lid=100,12,5&h=100&date=2021-11-4&sln=14-15&hf=1)) on [Google Meet](https://meet.google.com/aea-xvbm-fhy)
 
 ## Try out the most recent version
 Download Nightly releases

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightning-browser-extension",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Lightning browser extension",
   "private": true,
   "repository": "https://github.com/bumi/lightning-browser-extension.git",
@@ -47,7 +47,7 @@
     "@heroicons/react": "^1.0.5",
     "@tailwindcss/forms": "^0.3.4",
     "assert": "^2.0.0",
-    "axios": "^0.23.0",
+    "axios": "^0.24.0",
     "bech32": "^2.0.0",
     "browser-polyfill": "^3.20.2",
     "crypto-browserify": "^3.12.0",
@@ -56,9 +56,9 @@
     "dexie": "^3.0.3",
     "elliptic": "^6.5.4",
     "html5-qrcode": "^2.1.1",
-    "invoices": "^2.0.0",
+    "invoices": "^2.0.1",
     "memoizee": "^0.4.15",
-    "postcss-cli": "^9.0.1",
+    "postcss-cli": "^9.0.2",
     "pubsub-js": "^1.9.3",
     "query-string": "^7.0.0",
     "react": "^17.0.2",
@@ -75,7 +75,7 @@
     "webextension-polyfill": "^0.8.0",
     "webpack-dev-server": "^4.4.0",
     "webpack-sources": "^3.2.1",
-    "zustand": "^3.5.12"
+    "zustand": "^3.6.4"
   },
   "devDependencies": {
     "@babel/core": "^7.15.4",

src/app/components/AllowanceMenu/index.tsx

@@ -100,7 +100,7 @@ function AllowanceMenu({ allowance, onEdit, onDelete }: Props) {
             <CurrencyInput
               id="budget"
               name="budget"
-              placeholder="sats"
+              placeholder="sat"
               value={budget}
               onChange={(event) => {
                 setBudget(parseInt(event.target.value));

src/app/components/PaymentSummary.tsx

@@ -13,8 +13,8 @@ function PaymentSummary({ amount, amountAlt, description }: Props) {
         <dt className="uppercase font-semibold text-gray-500 text-xs">
           Amount
         </dt>
-        <dd className="mb-0 text-lg">{amount} Sats</dd>
-        {amountAlt && <dd className="text-gray-500">{amountAlt} Sats</dd>}
+        <dd className="mb-0">{amount} sat</dd>
+        {amountAlt && <dd className="text-gray-500">{amountAlt} sat</dd>}
         <dt className="mt-4 uppercase font-semibold text-gray-500 text-xs">
           Description
         </dt>

src/app/components/QrcodeScanner/index.tsx

@@ -93,7 +93,15 @@ function QrcodeScanner({
   async function handleStopScanning(isMounted = true) {
     try {
       if (html5QrCodeRef.current) {
-        await html5QrCodeRef.current.stop();
+        const scannerState = html5QrCodeRef.current.getState();
+        if (
+          [
+            Html5QrcodeScannerState.PAUSED,
+            Html5QrcodeScannerState.SCANNING,
+          ].includes(scannerState)
+        ) {
+          await html5QrCodeRef.current.stop();
+        }
         html5QrCodeRef.current.clear();
         if (isMounted) setScanning(false);
       }

src/app/components/TransactionsTable/index.tsx

@@ -66,7 +66,7 @@ export default function TransactionsTable({ transactions }: Props) {
                       <div>
                         <p className="text-sm font-medium dark:text-white">
                           {tx.type === "sent" || "sending" ? "-" : "+"}
-                          {tx.totalAmount} sats
+                          {tx.totalAmount} sat
                         </p>
                         <p className="text-xs text-gray-400">{tx.date}</p>
                       </div>

src/app/router/Options/Options.jsx

@@ -45,7 +45,7 @@ function Options() {
         title={accountInfo.alias}
         subtitle={
           typeof accountInfo.balance === "number"
-            ? `${accountInfo.balance} Sats`
+            ? `${accountInfo.balance} sat`
             : ""
         }
         onAccountSwitch={loadAccountInfo}

src/app/router/Popup/Popup.jsx

@@ -82,7 +82,7 @@ const Default = () => {
         title={accountInfo.alias}
         subtitle={
           typeof accountInfo.balance === "number"
-            ? `${accountInfo.balance} Sats`
+            ? `${accountInfo.balance} sat`
             : ""
         }
         onAccountSwitch={() => {

src/app/screens/ConfirmPayment/index.jsx

@@ -115,7 +115,7 @@ class ConfirmPayment extends React.Component {
                 <CurrencyInput
                   id="budget"
                   name="budget"
-                  placeholder="sats"
+                  placeholder="sat"
                   value={this.state.budget}
                   onChange={(event) => {
                     this.setBudget(event.target.value);

src/app/screens/Home/index.jsx

@@ -32,27 +32,6 @@ class Home extends React.Component {
     };
   }
 
-  loadLightningDataFromCurrentWebsite() {
-    // Enhancement data is loaded asynchronously (for example because we need to fetch additional data).
-    // Sadly we can not get return values from async code through executeScript()
-    // To work around this we write the enhancement data into a variable in the content script and access that variable here.
-    // Due to the async execution the variable could potentially not yet be loaded
-    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
-      const [currentTab] = tabs;
-      browser.tabs
-        .executeScript(currentTab.id, {
-          code: "window.LBE_LIGHTNING_DATA;",
-        })
-        .then((data) => {
-          // data is an array, see: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript#return_value
-          // we execute it only in the current Tab. Thus the array has only one entry
-          if (data[0]) {
-            this.setState({ lnData: data[0] });
-          }
-        });
-    });
-  }
-
   loadAllowance = () => {
     browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
       const [currentTab] = tabs;
@@ -74,14 +53,25 @@ class Home extends React.Component {
     });
   }
 
-  initialize() {
+  handleLightningDataMessage = (response) => {
+    if (response.type === "lightningData") {
+      this.setState({ lnData: response.args });
+    }
+  };
+
+  componentDidMount() {
     this.loadPayments();
     this.loadAllowance();
+
+    // Enhancement data is loaded asynchronously (for example because we need to fetch additional data).
+    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+      browser.tabs.sendMessage(tabs[0].id, { type: "extractLightningData" });
+    });
+    browser.runtime.onMessage.addListener(this.handleLightningDataMessage);
   }
 
-  componentDidMount() {
-    this.initialize();
-    this.loadLightningDataFromCurrentWebsite();
+  componentWillUnmount() {
+    browser.runtime.onMessage.removeListener(this.handleLightningDataMessage);
   }
 
   renderAllowanceView() {
@@ -282,7 +272,7 @@ class Home extends React.Component {
                   this.setState({ loadingSendSats: false });
                 }
               }}
-              label="⚡️ Send Sats ⚡️"
+              label="⚡️ Send Satoshis ⚡️"
               primary
               loading={loadingSendSats}
             />

src/app/screens/LNURLPay.tsx

@@ -130,7 +130,7 @@ function LNURLPay(props: Props) {
 
   function renderAmount() {
     if (details.minSendable === details.maxSendable) {
-      return <p>{`${details.minSendable / 1000} Satoshi`}</p>;
+      return <p>{`${details.minSendable / 1000} sat`}</p>;
     } else {
       return (
         <div className="mt-1 flex flex-col">

src/app/screens/Onboard/ConnectLnbits/index.tsx

@@ -126,7 +126,7 @@ export default function ConnectLnbits() {
           <div className="lg:flex h-full justify-center items-center">
             <img
               src="assets/icons/satsymbol.svg"
-              alt="Sats"
+              alt="sat"
               className="max-w-xs"
             />
           </div>

src/app/screens/Onboard/ConnectLnd/index.tsx

@@ -202,7 +202,7 @@ export default function ConnectLnd() {
         <div className="lg:flex h-full justify-center items-center">
           <img
             src="assets/icons/satsymbol.svg"
-            alt="Sats"
+            alt="sat"
             className="max-w-xs"
           />
         </div>

src/app/screens/Onboard/ConnectLndHub/index.tsx

@@ -138,7 +138,7 @@ export default function ConnectLndHub() {
           <div className="lg:flex h-full justify-center items-center">
             <img
               src="assets/icons/satsymbol.svg"
-              alt="Sats"
+              alt="sat"
               className="max-w-xs"
             />
           </div>

src/app/screens/Onboard/Intro/index.jsx

@@ -46,7 +46,7 @@ export default function Intro() {
           <div className="max-w-xs">
             <img
               src="assets/icons/satsymbol.svg"
-              alt="Sats"
+              alt="sat"
               className="max-w-xs"
             />
           </div>

src/app/screens/Onboard/NewWallet/index.tsx

@@ -154,7 +154,7 @@ export default function NewWallet() {
           <div className="lg:flex h-full justify-center items-center">
             <img
               src="assets/icons/satsymbol.svg"
-              alt="Sats"
+              alt="sat"
               className="max-w-xs"
             />
           </div>

src/app/screens/Onboard/SetPassword/index.jsx

@@ -133,7 +133,7 @@ export default function SetPassword() {
           <div className="lg:flex h-full justify-center items-center">
             <img
               src="assets/icons/satsymbol.svg"
-              alt="Sats"
+              alt="sat"
               className="max-w-xs"
             />
           </div>

src/app/screens/Onboard/TestConnection/index.jsx

@@ -64,7 +64,7 @@ export default function TestConnection() {
           .then((response) => {
             if (response.data.ok) {
               loadAccountInfo();
-              alert(`We've sent you ${faucetAmount} Satoshi`);
+              alert(`We've sent you ${faucetAmount} sat`);
               setFaucetLoading(false);
               setShowFaucet(false);
             }
@@ -125,7 +125,7 @@ export default function TestConnection() {
         </div>
         <div className="p-5 border-t border-b border-gray-200">
           <p className="mb-2">
-            To get started we send {faucetAmount} Satoshi to your wallet.
+            To get started we send {faucetAmount} sat to your wallet.
             <br />
             Please provide your email. We will notify you of updates (don't
             worry, we also hate spam)
@@ -144,7 +144,7 @@ export default function TestConnection() {
           {faucetLoading ? (
             <Loading />
           ) : (
-            <Button onClick={claimSats} label="Get Sats" primary />
+            <Button onClick={claimSats} label="Get Satoshis" primary />
           )}
         </div>
       </Modal>
@@ -186,7 +186,7 @@ export default function TestConnection() {
                           setShowFaucet(true);
                         }}
                       >
-                        To get started we can send you some Sats...
+                        To get started we can send you some Satoshis...
                       </a>
                       {renderFaucet()}
                     </div>
@@ -199,7 +199,7 @@ export default function TestConnection() {
                     alias={accountInfo.alias}
                     satoshis={
                       typeof accountInfo.balance === "number"
-                        ? `${accountInfo.balance} Sats`
+                        ? `${accountInfo.balance} sat`
                         : ""
                     }
                   />

src/app/screens/Options/TestConnection/index.jsx

@@ -67,7 +67,7 @@ export default function TestConnection() {
                     alias={accountInfo.alias}
                     satoshis={
                       typeof accountInfo.balance === "number"
-                        ? `${accountInfo.balance} Sats`
+                        ? `${accountInfo.balance} sat`
                         : ""
                     }
                   />

src/common/lib/utils.ts

@@ -106,7 +106,7 @@ const utils = {
           url: `${browser.runtime.getURL("prompt.html")}?${urlParams}`,
           type: "popup",
           width: 400,
-          height: 580,
+          height: 600,
         })
         .then((window) => {
           let tabId: number | undefined;

src/extension/background-script/actions/allowances/enable.js

@@ -1,6 +1,6 @@
-import state from "../../state";
 import db from "../../db";
 import utils from "../../../../common/lib/utils";
+import setIcon from "../setup/setIcon";
 
 const enable = async (message, sender) => {
   const host = message.origin.host || message.args.host;
@@ -10,13 +10,17 @@ const enable = async (message, sender) => {
     .first();
 
   if (allowance && allowance.enabled) {
+    setIcon({ args: { icon: "active" } }, sender); // highlight the icon when enabled
     return {
       data: { enabled: true },
     };
   } else {
     try {
       const response = await utils.openPrompt(message);
-      // if the response should be saved/rememberd we update the allowance for the domain
+      if (response.data.enabled) {
+        setIcon({ args: { icon: "active" } }, sender); // highlight the icon when enabled
+      }
+      // if the response should be saved/remembered we update the allowance for the domain
       // as this returns a promise we must wait until it resolves
       if (response.data.enabled && response.data.remember) {
         if (allowance) {

src/extension/background-script/actions/setup/setIcon.js

@@ -1,3 +1,5 @@
+import browser from "webextension-polyfill";
+
 const setIcon = async (message, sender) => {
   // TODO: refactor names / rename files?
   const names = {

src/extension/background-script/events/notifications.js

@@ -9,7 +9,7 @@ const paymentSuccessNotification = (message, data) => {
   const { total_amt } = route;
 
   return utils.notify({
-    title: `Paid ${total_amt} Satoshi to ${recipient}`,
+    title: `Paid ${total_amt} sat to ${recipient}`,
     message: `pre image: ${paymentResponse.data.preimage}`,
   });
 };

src/extension/background-script/index.js

@@ -14,13 +14,12 @@ setInterval(() => {
 }, 5000);
 */
 
-const extractLightningDataFromPage = async (tabId, changeInfo, tabInfo) => {
-  if (changeInfo.status !== "complete" || !tabInfo.url?.startsWith("http")) {
-    return;
+const extractLightningData = (tabId, changeInfo, tab) => {
+  if (changeInfo.status === "complete" && tab.url?.startsWith("http")) {
+    browser.tabs.sendMessage(tabId, {
+      type: "extractLightningData",
+    });
   }
-  browser.tabs.executeScript(tabId, {
-    code: "if ((document.location.protocol === 'https:' || document.location.protocol === 'http:') && window.LBE_EXTRACT_LIGHTNING_DATA) { LBE_EXTRACT_LIGHTNING_DATA(); };",
-  });
 };
 
 const updateIcon = async (tabId, changeInfo, tabInfo) => {
@@ -110,9 +109,10 @@ async function init() {
   browser.runtime.onMessage.addListener(routeCalls);
 
   // TODO: make optional
-  browser.tabs.onUpdated.addListener(extractLightningDataFromPage); // extract LN data from websites
-
   browser.tabs.onUpdated.addListener(updateIcon); // update Icon when there is an allowance
+
+  // Notify the content script that the tab has been updated.
+  browser.tabs.onUpdated.addListener(extractLightningData);
 }
 
 // The onInstalled event is fired directly after the code is loaded.