Merge branch 'master' into depfu/update/yarn/react-i18next-13.3.1

getAlby · Feb 1, 2024 · e342575 · e342575
2 parents 7ffdc3d + f027a1d
commit e342575
Show file tree

Hide file tree

Showing 184 changed files with 6,079 additions and 6,637 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -3,75 +3,75 @@ description: Create a report to help us improve (use this to report bugs only).
 title: "[BUG] <title>"
 labels: [🐞 bug]
 body:
-- type: checkboxes
-  attributes:
-    label: Is there an existing issue for this?
-    description: Please search to see if an issue already exists for the bug you encountered.
-    options:
-    - label: I have searched the existing issues
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the bug you encountered.
+      options:
+        - label: I have searched the existing issues
+          required: true
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. Include images if relevant.
+      placeholder: A bug happened!
+    validations:
       required: true
-- type: textarea
-  attributes:
-    label: Describe the bug
-    description: A clear and concise description of what the bug is. Include images if relevant.
-    placeholder: A bug happened!
-  validations:
-    required: true
-- type: textarea
-  attributes:
-    label: Screenshots [optional]
-    description: |
-      Add screenshots to help explain your problem. You can also add a video here.
+  - type: textarea
+    attributes:
+      label: Screenshots [optional]
+      description: |
+        Add screenshots to help explain your problem. You can also add a video here.
 
-      Tip: You can attach images or video files by clicking this area to highlight it and then dragging files in.
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Steps To Reproduce
-    description: Steps to reproduce the bug.
-    placeholder: |
-      1. Visit '...'
-      2. Click on '...'
-      3. Scroll to '...'
-      4. See error
-  validations:
-    required: true
-- type: textarea
-  attributes:
-    label: Expected behavior
-    description: A clear and concise description of what you expected to happen
-  validations:
-    required: true
-- type: textarea
-  attributes:
-    label: Alby information
-    placeholder: |
-      - Alby Version: [e.g. 1.5.0]
-      - Alby installed through: [e.g. installed through the browser stores, installed manually]
-      - Wallet connected with Alby: [e.g. LND, BlueWallet LNDhub]
-  validations:
-    required: true
-- type: textarea
-  attributes:
-    label: Device information
-    placeholder: |
-      - OS: [e.g. Windows]
-      - Browser: [e.g. chrome, safari, firefox]
-      - Browser Version: [e.g. 22]
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Additional context
-    description: |
-      Links? References? Anything that will give us more context about the issue you are encountering!
-  validations:
-    required: false
-- type: dropdown
-  id: assign
-  attributes:
-    label: Are you working on this?
-    options:
-      - "Yes"
-      - "No"
+        Tip: You can attach images or video files by clicking this area to highlight it and then dragging files in.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Steps To Reproduce
+      description: Steps to reproduce the bug.
+      placeholder: |
+        1. Visit '...'
+        2. Click on '...'
+        3. Scroll to '...'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Alby information
+      placeholder: |
+        - Alby Version: [e.g. 1.5.0]
+        - Alby installed through: [e.g. installed through the browser stores, installed manually]
+        - Wallet connected with Alby: [e.g. LND, LNDhub, etc]
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Device information
+      placeholder: |
+        - OS: [e.g. Windows]
+        - Browser: [e.g. chrome, safari, firefox]
+        - Browser Version: [e.g. 22]
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: |
+        Links? References? Anything that will give us more context about the issue you are encountering!
+    validations:
+      required: false
+  - type: dropdown
+    id: assign
+    attributes:
+      label: Are you working on this?
+      options:
+        - "Yes"
+        - "No"
diff --git a/doc/SETUP.md b/doc/SETUP.md
@@ -42,6 +42,10 @@
 
 To connect to a remote development LND node you can use a [test account](https://github.com/bumi/lightning-browser-extension/wiki/Test-setup)
 
+## Install and debug extension for Firefox Android
+
+[Refer to SETUP_ANDROID.md for info regarding how to setup and debug Alby on firefox android](./SETUP_ANDROID.md)
+
 ### Multiple Extensions
 
 It is not recommended to have multiple versions of the extension (development + official) running in the same browser. You will have instances of the extension with the same icon which is confusing, and also leads to a poor webln experience as both extensions will launch a popup. There may also be unexpected bugs due to conflict with the two extensions running at the same time.

diff --git a/doc/SETUP_ANDROID.md b/doc/SETUP_ANDROID.md
@@ -0,0 +1,22 @@
+# Install and debug extension for Firefox Android
+
+a. **Prerequisite**
+
+1. Install or update [web-ext](https://github.com/mozilla/web-ext) to version 4.1.0 or later.
+2. Install the [Android Platform Tools](https://developer.android.com/tools/releases/platform-tools) (you can use Android studio's [sdk manager](https://developer.android.com/studio/intro/update.html#sdk-manager) or [sdk manager](https://developer.android.com/tools/sdkmanager) command line tools to install android platform tools)
+3. Make sure you have adb installed and in your PATH.
+
+b. **Setup Android Device**
+
+1.  Install [Firefox for Android Nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) on Android
+2.  Enable [Android USB debugging](https://developer.android.com/studio/debug/dev-options) on the device.
+3.  Attach your device to the development computer using a USB cable. When prompted, allow USB debugging for the connection.
+4.  In the settings view for Firefox for Android Nightly, enable "Remote debugging via USB."
+5.  Run `$ adb devices` in the command shell to get the device ID
+
+c. **Install and run extension**
+
+1. Remove native messaging permission from extensions manifest (web-ext currently doesn't ignore unsupported permissions. temporarily we need to do this unless we find proper solution)
+2. Run extension's local development environment via `$ ALBY_API_URL="https://api.getalby.com" yarn run dev:firefox`
+3. Go to extension's dist directory: `dist/development/firefox`
+4. In the unzipped dist directory of the extension run `$ web-ext run -t firefox-android --adb-device <your_device_id> --firefox-apk org.mozilla.fenix`
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lightning-browser-extension",
-  "version": "3.3.0",
+  "version": "3.6.0",
   "description": "Lightning browser extension",
   "private": true,
   "repository": "https://github.com/bumi/lightning-browser-extension.git",
@@ -37,11 +37,12 @@
   "dependencies": {
     "@bitcoin-design/bitcoin-icons-react": "^0.1.10",
     "@bitcoinerlab/secp256k1": "^1.0.5",
-    "@getalby/sdk": "^2.2.3",
+    "@getalby/sdk": "^3.2.2",
     "@headlessui/react": "^1.7.16",
     "@lightninglabs/lnc-web": "^0.2.4-alpha",
     "@noble/curves": "^1.1.0",
     "@noble/secp256k1": "^2.0.0",
+    "@popicons/react": "^0.0.8",
     "@scure/bip32": "^1.3.1",
     "@scure/bip39": "^1.2.1",
     "@tailwindcss/forms": "^0.5.4",
@@ -85,7 +86,7 @@
     "@commitlint/config-conventional": "^17.8.0",
     "@jest/types": "^29.6.3",
     "@playwright/test": "^1.39.0",
-    "@swc/core": "^1.3.92",
+    "@swc/core": "^1.3.95",
     "@swc/jest": "^0.2.29",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
@@ -104,6 +105,7 @@
     "@types/webextension-polyfill": "^0.10.5",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
+    "@webbtc/webln-types": "^3.0.0",
     "autoprefixer": "^10.4.16",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",
@@ -112,7 +114,7 @@
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "del-cli": "^5.1.0",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-react": "^7.33.2",
@@ -133,7 +135,7 @@
     "pptr-testing-library": "^0.7.0",
     "prettier": "^3.0.1",
     "process": "^0.11.10",
-    "puppeteer": "^21.3.6",
+    "puppeteer": "^21.4.1",
     "stream-browserify": "^3.0.0",
     "swc-loader": "^0.2.3",
     "tailwindcss-3d": "^1.0.2",

diff --git a/src/app/components/AccountDetailLayout/index.tsx b/src/app/components/AccountDetailLayout/index.tsx
@@ -49,7 +49,9 @@ function AccountDetailLayout() {
               {account.name}
             </h2>
             <span>/</span>
-            <span>{t("title1")}</span>
+            <span className="text-ellipsis whitespace-nowrap overflow-hidden">
+              {t("title1")}
+            </span>
           </div>
         )}
       </Header>

diff --git a/src/app/components/Avatar/index.tsx b/src/app/components/Avatar/index.tsx
@@ -22,7 +22,7 @@ const Avatar = (props: Props) => {
 const AvatarImage = (props: Props) => {
   return (
     <div
-      className={classNames("translate-z-0", props.className ?? "")}
+      className={classNames("translate-z-0 shrink-0", props.className ?? "")}
       style={{
         width: `${props.size}px`,
         height: `${props.size}px`,
@@ -52,7 +52,7 @@ const AvatarSVG = (props: Omit<Props, "url">) => {
   return (
     <svg
       className={classNames(
-        "rounded-full overflow-hidden translate-z-0",
+        "rounded-full overflow-hidden translate-z-0 shrink-0",
         props.className ?? ""
       )}
       ref={svgRef}

diff --git a/src/app/components/ConnectorPath/index.tsx b/src/app/components/ConnectorPath/index.tsx
@@ -3,16 +3,20 @@ type Props = {
   description: string;
   content: React.ReactNode;
   actions: React.ReactNode;
+  icon: React.ReactNode;
 };
 
-function ConnectorPath({ title, description, content, actions }: Props) {
+function ConnectorPath({ title, icon, description, content, actions }: Props) {
   return (
-    <div className="shadow-lg p-10 rounded-xl bg-white dark:bg-surface-02dp text-center">
-      <h1 className="text-2xl font-bold dark:text-white">{title}</h1>
-      <p className="text-gray-500 mt-4 dark:text-neutral-400 min-h-[48px]">
-        {description}
-      </p>
-      <div className="lg:h-56 py-4 flex flex-col justify-center items-center">
+    <div className="flex flex-col p-10 border border-neutral-200 dark:border-neutral-700 rounded-2xl bg-white dark:bg-surface-02dp">
+      <div className="flex flex-col sm:flex-row items-center mb-4 space-x-3">
+        {icon}
+        <h1 className="text-xl font-bold dark:text-white text-center">
+          {title}
+        </h1>
+      </div>
+      <p className="text-gray-800 dark:text-neutral-200 mb-6">{description}</p>
+      <div className="flex flex-col space-y-4 text-sm mb-8 dark:text-white">
         {content}
       </div>
       <div className="flex gap-4 flex-col sm:flex-row">{actions}</div>

diff --git a/src/app/components/ContentMessage/index.tsx b/src/app/components/ContentMessage/index.tsx
@@ -1,5 +1,5 @@
 type Props = {
-  heading: string;
+  heading: string | React.ReactNode;
   content: string;
 };
 

diff --git a/src/app/components/Enable/AlbyEnable.tsx b/src/app/components/Enable/AlbyEnable.tsx
@@ -4,6 +4,7 @@ import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import Alert from "~/app/components/Alert";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
 import { USER_REJECTED_ERROR } from "~/common/constants";
@@ -15,6 +16,7 @@ type Props = {
 };
 function AlbyEnableComponent(props: Props) {
   const [loading, setLoading] = useState(false);
+  const hasHttp = props.origin.domain.startsWith("http://");
   const { t } = useTranslation("translation", {
     keyPrefix: "alby_enable",
   });
@@ -62,6 +64,14 @@ function AlbyEnableComponent(props: Props) {
             isSmall={false}
           />
 
+          <div className="pt-3">
+            {hasHttp && (
+              <Alert type="warn">
+                {tCommon("enable.insecure_domain_warn")}
+              </Alert>
+            )}
+          </div>
+
           <div className="dark:text-white pt-6">
             <p className="mb-2">{tCommon("enable.allow")}</p>
 

diff --git a/src/app/components/Enable/LiquidEnable.tsx b/src/app/components/Enable/LiquidEnable.tsx
@@ -4,6 +4,7 @@ import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import Alert from "~/app/components/Alert";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
 import { USER_REJECTED_ERROR } from "~/common/constants";
@@ -15,6 +16,7 @@ type Props = {
 };
 function LiquidEnableComponent(props: Props) {
   const [loading, setLoading] = useState(false);
+  const hasHttp = props.origin.domain.startsWith("http://");
   const { t } = useTranslation("translation", {
     keyPrefix: "liquid_enable",
   });
@@ -62,6 +64,14 @@ function LiquidEnableComponent(props: Props) {
             isSmall={false}
           />
 
+          <div className="pt-3">
+            {hasHttp && (
+              <Alert type="warn">
+                {tCommon("enable.insecure_domain_warn")}
+              </Alert>
+            )}
+          </div>
+
           <div className="dark:text-white pt-6">
             <p className="mb-2">{tCommon("enable.allow")}</p>
 

diff --git a/src/app/components/Enable/NostrEnable.tsx b/src/app/components/Enable/NostrEnable.tsx
@@ -4,6 +4,7 @@ import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import Alert from "~/app/components/Alert";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import toast from "~/app/components/Toast";
 import { USER_REJECTED_ERROR } from "~/common/constants";
@@ -15,6 +16,7 @@ type Props = {
 };
 function NostrEnableComponent(props: Props) {
   const [loading, setLoading] = useState(false);
+  const hasHttp = props.origin.domain.startsWith("http://");
   const { t } = useTranslation("translation", {
     keyPrefix: "nostr_enable",
   });
@@ -62,6 +64,14 @@ function NostrEnableComponent(props: Props) {
             isSmall={false}
           />
 
+          <div className="pt-3">
+            {hasHttp && (
+              <Alert type="warn">
+                {tCommon("enable.insecure_domain_warn")}
+              </Alert>
+            )}
+          </div>
+
           <div className="dark:text-white pt-6">
             <p className="mb-2">{tCommon("enable.allow")}</p>