Merge branch 'master' into feature/lnc-web

# By Lisa Oppermann (15) and others
# Via GitHub (35) and escapedcat (1)
* master: (75 commits)
  fix: remove runcitadel sdk dependency (#1681)
  chore(deps): update puppeteer to v19
  revert(deps): puppeteer and fake-indexdb
  Update fake-indexeddb to version 4.0.0
  Update @types/chrome to version 0.0.200
  Update puppeteer to version 19.2.0
  fix: publisher link on AllowanceView
  Translated using Weblate (Italian)
  Update all development Yarn dependencies (2022-10-29)
  chore: remove showcases
  chore: remove topup app
  fix: align reject/close function params
  fix: navigate on send
  Update dayjs to version 1.11.6
  fix: disable input fields on Create Invoice #1659 (#1668)
  Update react-i18next to version 12.0.0
  Push buttons to bottom in Send and Receive Screens (#1672)
  refactor(lnurl): getDetails - avoid typecasting (#1545)
  style: prettier
  Translated using Weblate (Italian)
  ...

Author: bumi

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,77 @@
+name: 🐞 Bug report
+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
+      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.
+
+      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"

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,44 @@
+name: ✨ Feature request
+description: Request a feature you'd like to see in lightning!
+title: "[Feature] <title>"
+labels: [idea]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        We're always looking for suggestions on how we could improve lightning!
+  - type: textarea
+    attributes:
+      label: Feature description
+      description: | 
+       Is your feature request related to a problem? A clear and concise description of what the feature is.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Describe the solution
+      description: A clear and concise description of what you want to happen.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Describe alternatives
+      description: | 
+       A clear and concise description of any alternative solutions or features you have considered.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: | 
+       Add any other additional context or screenshots about the feature request here.
+    validations:
+      required: false
+  - type: dropdown
+    id: assign
+    attributes:
+      label: Are you working on this? 
+      options:
+        - "Yes"
+        - "No"
+    

README.md

@@ -398,7 +398,7 @@ Also we focus on supporting multiple different node backends (non-custodial and
 
 #### What is WebLN?
 
-WebLN is a library and set of specifications for lightning apps and client providers to facilitate communication between apps and users' lightning nodes in a secure way. It provides a programmatic, permissioned interface for letting applications ask users to send payments, generate invoices to receive payments, and much more. [This documentation](https://webln.dev/#/) covers how to use WebLN in your Lightning-driven applications.
+WebLN is a library and set of specifications for lightning apps and client providers to facilitate communication between apps and users' lightning nodes in a secure way. It provides a programmatic, permissioned interface for letting applications ask users to send payments, generate invoices to receive payments, and much more. [This documentation](https://webln.guide/) covers how to use WebLN in your Lightning-driven applications.
 
 #### Is there a bounty program and can I contribute?
 

package.json

@@ -50,35 +50,34 @@
     "browser-polyfill": "^3.20.2",
     "crypto-browserify": "^3.12.0",
     "crypto-js": "^4.1.1",
-    "dayjs": "^1.11.5",
+    "dayjs": "^1.11.6",
     "dexie": "^3.2.2",
     "elliptic": "^6.5.4",
-    "html5-qrcode": "^2.2.1",
+    "html5-qrcode": "^2.2.3",
     "i18next": "^21.10.0",
     "i18next-browser-languagedetector": "^6.1.8",
     "lodash": "^4.17.21",
     "pubsub-js": "^1.9.4",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^11.18.6",
+    "react-i18next": "^12.0.0",
     "react-loading-skeleton": "^3.1.0",
-    "react-modal": "^3.15.1",
-    "react-palette": "^1.0.2",
+    "react-modal": "^3.16.1",
     "react-qr-code": "^2.0.8",
     "react-router-dom": "^6.4.2",
     "react-toastify": "^9.0.8",
     "stream": "^0.0.2",
-    "tailwindcss": "^3.1.8",
+    "tailwindcss": "^3.2.1",
     "uuid": "^9.0.0",
     "webextension-polyfill": "^0.10.0",
     "zustand": "^3.7.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@jest/types": "^29.1.2",
-    "@playwright/test": "^1.26.0",
+    "@jest/types": "^29.2.1",
+    "@playwright/test": "^1.27.1",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",
@@ -92,8 +91,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
-    "@types/chrome": "^0.0.197",
+    "@trivago/prettier-plugin-sort-imports": "^3.4.0",
+    "@types/chrome": "^0.0.200",
     "@types/crypto-js": "^4.1.1",
     "@types/elliptic": "^6.4.14",
     "@types/pubsub-js": "^1.8.3",
@@ -117,7 +116,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.31.9",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fake-indexeddb": "^3.1.8",
+    "fake-indexeddb": "^3.0.0",
     "filemanager-webpack-plugin": "^7.0.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
@@ -127,13 +126,13 @@
     "lint-staged": "^13.0.3",
     "mini-css-extract-plugin": "^2.6.1",
     "msw": "^0.47.4",
-    "postcss": "^8.4.17",
+    "postcss": "^8.4.18",
     "postcss-cli": "^10.0.0",
     "postcss-loader": "^7.0.1",
     "pptr-testing-library": "^0.7.0",
     "prettier": "^2.7.1",
     "process": "^0.11.10",
-    "puppeteer": "^18.2.1",
+    "puppeteer": "^19.0.0",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.55.0",
     "sass-loader": "^13.1.0",

src/app/components/AllowanceMenu/index.test.tsx

@@ -7,7 +7,7 @@ import * as SettingsContext from "~/app/context/SettingsContext";
 import type { Props } from "./index";
 import AllowanceMenu from "./index";
 
-const mockGetFiatValue = jest.fn(() => "$1,22");
+const mockGetFiatValue = jest.fn(() => Promise.resolve("$1,22"));
 
 jest.spyOn(SettingsContext, "useSettings").mockReturnValue({
   settings: mockSettings,

src/app/components/AllowanceMenu/index.tsx

@@ -38,8 +38,12 @@ function AllowanceMenu({ allowance, onEdit, onDelete }: Props) {
 
   useEffect(() => {
     if (budget !== "" && showFiat) {
-      const res = getFiatValue(budget);
-      setFiatAmount(res);
+      const getFiat = async () => {
+        const res = await getFiatValue(budget);
+        setFiatAmount(res);
+      };
+
+      getFiat();
     }
   }, [budget, showFiat, getFiatValue]);
 
@@ -134,7 +138,7 @@ function AllowanceMenu({ allowance, onEdit, onDelete }: Props) {
                 label={t("new_budget.label")}
                 min={0}
                 autoFocus
-                placeholder={tCommon("sats")}
+                placeholder={tCommon("sats", { count: 0 })}
                 value={budget}
                 hint={t("hint")}
                 fiatValue={fiatAmount}

src/app/components/BudgetControl/index.tsx

@@ -57,11 +57,12 @@ function BudgetControl({
 
         <div>
           <DualCurrencyField
+            autoFocus
             fiatValue={fiatAmount}
             id="budget"
             min={0}
             label={t("budget.label")}
-            placeholder={tCommon("sats")}
+            placeholder={tCommon("sats", { count: 0 })}
             value={budget}
             onChange={onBudgetChange}
           />

src/app/components/Button/index.tsx

@@ -1,7 +1,8 @@
+import { forwardRef } from "react";
+import type { Ref } from "react";
+import Loading from "~/app/components/Loading";
 import { classNames } from "~/app/utils/index";
 
-import Loading from "../Loading";
-
 export type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   fullWidth?: boolean;
   halfWidth?: boolean;
@@ -13,44 +14,55 @@ export type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   direction?: "row" | "column";
 };
 
-export default function Button({
-  type = "button",
-  label,
-  onClick,
-  disabled,
-  direction = "row",
-  icon,
-  fullWidth = false,
-  halfWidth = false,
-  primary = false,
-  loading = false,
-}: Props) {
-  return (
-    <button
-      type={type}
-      className={classNames(
-        direction === "row" ? "flex-row" : "flex-col",
-        fullWidth && "w-full",
-        halfWidth && "w-1/2 first:mr-2 last:ml-2",
-        fullWidth || halfWidth ? "px-0 py-2" : "px-7 py-2",
-        primary
-          ? "bg-orange-bitcoin text-white border border-transparent"
-          : `bg-white text-gray-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800`,
-        primary && !disabled && "hover:bg-orange-bitcoin-700",
-        !primary && !disabled && "hover:bg-gray-50 dark:hover:bg-surface-16dp",
-        disabled ? "cursor-default opacity-60" : "cursor-pointer",
-        "inline-flex justify-center items-center font-medium rounded-md shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-orange-bitcoin transition duration-150"
-      )}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      {loading && (
-        <div className={direction === "row" ? "mr-2" : ""}>
-          <Loading color={primary ? "white" : "black"} />
-        </div>
-      )}
-      {icon}
-      {label}
-    </button>
-  );
-}
+const Button = forwardRef(
+  (
+    {
+      type = "button",
+      label,
+      onClick,
+      disabled,
+      direction = "row",
+      icon,
+      fullWidth = false,
+      halfWidth = false,
+      primary = false,
+      loading = false,
+    }: Props,
+    ref: Ref<HTMLButtonElement>
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={classNames(
+          direction === "row" ? "flex-row" : "flex-col",
+          fullWidth && "w-full",
+          halfWidth && "w-1/2 first:mr-2 last:ml-2",
+          fullWidth || halfWidth ? "px-0 py-2" : "px-7 py-2",
+          primary
+            ? "bg-orange-bitcoin text-white border border-transparent"
+            : `bg-white text-gray-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800`,
+          primary && !disabled && "hover:bg-orange-bitcoin-700",
+          !primary &&
+            !disabled &&
+            "hover:bg-gray-50 dark:hover:bg-surface-16dp",
+          disabled ? "cursor-default opacity-60" : "cursor-pointer",
+          "inline-flex justify-center items-center font-medium rounded-md shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-orange-bitcoin transition duration-150"
+        )}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {loading && (
+          <div className={direction === "row" ? "mr-2" : ""}>
+            <Loading color={primary ? "white" : "black"} />
+          </div>
+        )}
+        {icon}
+        {label}
+      </button>
+    );
+  }
+);
+Button.displayName = "Button";
+
+export default Button;