feat(connectors): add raspiblitz

.gitignore

@@ -132,7 +132,8 @@ dist/
 # Editor directories and files
 .idea
 .nova
-.vscode
+.vscode/**/*
+!.vscode/extensions.json
 *.suo
 *.ntvs*
 *.njsproj

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "ecmel.vscode-html-css",
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint"
+  ]
+}

README.md

@@ -21,8 +21,10 @@ The extension can connect to different node implementations and supports custodi
 - [x] [LNURL-withdraw](https://xn--57h.bigsun.xyz/lnurl-withdraw-flow.txt) support
 - [x] WebLN signMessage, verifyMessage support
 - [x] WebLN dynamic makeInvoice support
+- [x] Keysend
 - [ ] [Lsat](https://lsat.tech/) support
 
+
 ### STATUS: 🚀
 
 ## Join the conversation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightning-browser-extension",
-  "version": "1.7.0",
+  "version": "1.9.1",
   "description": "Lightning browser extension",
   "private": true,
   "repository": "https://github.com/bumi/lightning-browser-extension.git",
@@ -36,7 +36,7 @@
     "prepare": "husky install"
   },
   "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx}": [
+    "src/**/*.{js,jsx,ts,tsx,json}": [
       "eslint --fix --max-warnings 0",
       "prettier --write"
     ]
@@ -45,8 +45,8 @@
     "@babel/runtime": "^7.15.4",
     "@bitcoin-design/bitcoin-icons-react": "^0.1.9",
     "@headlessui/react": "^1.5.0",
-    "@runcitadel/sdk": "^0.3.3",
-    "@tailwindcss/forms": "^0.4.0",
+    "@runcitadel/sdk": "^0.3.8",
+    "@tailwindcss/forms": "^0.5.0",
     "assert": "^2.0.0",
     "axios": "^0.26.1",
     "bech32": "^2.0.0",
@@ -57,21 +57,23 @@
     "dexie": "^3.2.1",
     "elliptic": "^6.5.4",
     "html5-qrcode": "^2.2.0",
+    "i18next": "^21.6.12",
+    "i18next-browser-languagedetector": "^6.1.3",
     "invoices": "2.0.3",
     "lodash": "^4.17.21",
     "memoizee": "^0.4.15",
     "postcss-cli": "^9.1.0",
     "pubsub-js": "^1.9.4",
     "query-string": "^7.1.1",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "react-confetti": "^6.0.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
+    "react-i18next": "^11.15.5",
     "react-loading-skeleton": "^3.0.3",
     "react-modal": "^3.14.4",
     "react-palette": "^1.0.2",
     "react-qr-code": "^2.0.3",
     "react-router-dom": "^6.2.2",
-    "sha.js": "^2.4.11",
     "stream": "^0.0.2",
     "uuid": "^8.3.2",
     "webextension-polyfill": "^0.8.0",
@@ -80,13 +82,13 @@
     "zustand": "^3.7.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.17.8",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@commitlint/cli": "^16.2.1",
+    "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.19",
@@ -96,23 +98,23 @@
     "@storybook/cli": "^6.4.19",
     "@storybook/manager-webpack5": "^6.4.19",
     "@storybook/react": "^6.4.19",
-    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "@types/crypto-js": "^4.1.1",
     "@types/elliptic": "^6.4.14",
     "@types/jest": "^27.4.1",
     "@types/memoizee": "^0.4.7",
     "@types/pubsub-js": "^1.8.3",
+    "@types/react-dom": "^17.0.14",
     "@types/react-modal": "^3.13.1",
-    "@types/sha.js": "^2.4.0",
     "@types/uuid": "^8.3.4",
-    "@types/webextension-polyfill": "^0.8.2",
+    "@types/webextension-polyfill": "^0.8.3",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
     "@typescript-eslint/parser": "^5.14.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.4",
     "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.2.4",
     "babel-plugin-import": "^1.13.3",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",
@@ -123,19 +125,19 @@
     "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-react": "^7.29.3",
+    "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
     "filemanager-webpack-plugin": "^6.1.7",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
     "jest-transform-stub": "^2.0.0",
     "jest-webextension-mock": "^3.7.19",
-    "lint-staged": "^12.3.5",
+    "lint-staged": "^12.3.7",
     "mini-css-extract-plugin": "^2.6.0",
-    "postcss": "^8.4.7",
+    "postcss": "^8.4.12",
     "postcss-loader": "^6.2.1",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.0",
     "process": "^0.11.10",
     "react-test-renderer": "^17.0.2",
     "resolve-url-loader": "^5.0.0",
@@ -145,7 +147,7 @@
     "tailwindcss": "^3.0.23",
     "terser-webpack-plugin": "5.3.1",
     "ts-node": "^10.7.0",
-    "typescript": "^4.6.2",
+    "typescript": "^4.6.3",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2",
     "wext-manifest-loader": "^2.3.0",

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

@@ -0,0 +1,60 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+import * as AccountsContext from "../../context/AccountsContext";
+import AccountMenu from ".";
+import type { Accounts } from "../../../types";
+
+const mockAccounts: Accounts = {
+  "1": { id: "1", connector: "lnd", config: "", name: "LND account" },
+  "2": { id: "2", connector: "galoy", config: "", name: "Galoy account" },
+};
+
+jest.spyOn(AccountsContext, "useAccounts").mockReturnValue({
+  accounts: mockAccounts,
+  getAccounts: jest.fn(),
+});
+
+describe("AccountMenu", () => {
+  test("renders the toggle button", async () => {
+    render(
+      <BrowserRouter>
+        <AccountMenu />
+      </BrowserRouter>
+    );
+
+    expect(screen.getByRole("button")).toHaveTextContent("Toggle Dropdown");
+  });
+
+  test("displays accounts and options", async () => {
+    render(
+      <BrowserRouter>
+        <AccountMenu />
+      </BrowserRouter>
+    );
+
+    fireEvent.click(screen.getByText("Toggle Dropdown"));
+
+    await waitFor(() => screen.getByText("Switch account"));
+
+    expect(screen.getByText("LND account")).toBeInTheDocument();
+    expect(screen.getByText("Galoy account")).toBeInTheDocument();
+    expect(screen.getByText("Add a new account")).toBeInTheDocument();
+    expect(screen.getByText("Accounts")).toBeInTheDocument();
+  });
+
+  test("displays accounts without options", async () => {
+    render(
+      <BrowserRouter>
+        <AccountMenu showOptions={false} />
+      </BrowserRouter>
+    );
+
+    fireEvent.click(screen.getByText("Toggle Dropdown"));
+
+    expect(screen.getByText("LND account")).toBeInTheDocument();
+    expect(screen.getByText("Galoy account")).toBeInTheDocument();
+    expect(screen.queryByText("Add a new account")).not.toBeInTheDocument();
+    expect(screen.queryByText("Accounts")).not.toBeInTheDocument();
+  });
+});

src/app/components/AccountMenu/index.tsx

@@ -14,7 +14,11 @@ import { useAccounts } from "../../context/AccountsContext";
 import Badge from "../Badge";
 import Menu from "../Menu";
 
-function AccountMenu() {
+export type Props = {
+  showOptions?: boolean;
+};
+
+function AccountMenu({ showOptions = true }: Props) {
   const auth = useAuth();
   const navigate = useNavigate();
   const { accounts, getAccounts } = useAccounts();
@@ -50,6 +54,7 @@ function AccountMenu() {
     <Menu as="div">
       <Menu.Button className="h-full px-2 rounded-r-md hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors duration-200">
         <CaretDownIcon className="h-4 w-4 dark:text-white" />
+        <span className="sr-only">Toggle Dropdown</span>
       </Menu.Button>
       <Menu.List position="left">
         <Menu.Subheader>Switch account</Menu.Subheader>
@@ -74,23 +79,27 @@ function AccountMenu() {
             </Menu.ItemButton>
           );
         })}
-        <Menu.Divider />
-        <Menu.ItemButton
-          onClick={() => {
-            openOptions("accounts/new");
-          }}
-        >
-          <PlusIcon className="h-5 w-5 mr-2 text-gray-500" />
-          Add a new account
-        </Menu.ItemButton>
-        <Menu.ItemButton
-          onClick={() => {
-            openOptions("accounts");
-          }}
-        >
-          <AddressBookIcon className="h-5 w-5 mr-2 text-gray-500" />
-          Accounts
-        </Menu.ItemButton>
+        {showOptions && (
+          <>
+            <Menu.Divider />
+            <Menu.ItemButton
+              onClick={() => {
+                openOptions("accounts/new");
+              }}
+            >
+              <PlusIcon className="h-5 w-5 mr-2 text-gray-500" />
+              Add a new account
+            </Menu.ItemButton>
+            <Menu.ItemButton
+              onClick={() => {
+                openOptions("accounts");
+              }}
+            >
+              <AddressBookIcon className="h-5 w-5 mr-2 text-gray-500" />
+              Accounts
+            </Menu.ItemButton>
+          </>
+        )}
       </Menu.List>
     </Menu>
   );

src/app/components/AllowanceMenu/index.tsx

@@ -7,7 +7,7 @@ import utils from "../../../common/lib/utils";
 
 import Button from "../Button";
 import Menu from "../Menu";
-import TextField from "../Form/TextField";
+import TextField from "../form/TextField";
 
 type Props = {
   allowance: {
@@ -57,6 +57,7 @@ function AllowanceMenu({ allowance, onEdit, onDelete }: Props) {
         <Menu.List position="right">
           <Menu.ItemButton onClick={openModal}>Edit</Menu.ItemButton>
           <Menu.ItemButton
+            danger
             onClick={async () => {
               if (
                 window.confirm("Are you sure you want to delete this website?")

src/app/components/BudgetControl/index.tsx

@@ -0,0 +1,65 @@
+import { ChangeEventHandler } from "react";
+import { Transition } from "@headlessui/react";
+
+import Checkbox from "../form/Checkbox";
+import TextField from "../form/TextField";
+
+type Props = {
+  remember: boolean;
+  onRememberChange: ChangeEventHandler<HTMLInputElement>;
+  budget: string;
+  onBudgetChange: ChangeEventHandler<HTMLInputElement>;
+};
+
+function BudgetControl({
+  remember,
+  onRememberChange,
+  budget,
+  onBudgetChange,
+}: Props) {
+  return (
+    <div className="mb-8">
+      <div className="flex items-center">
+        <Checkbox
+          id="remember_me"
+          name="remember_me"
+          checked={remember}
+          onChange={onRememberChange}
+        />
+        <label
+          htmlFor="remember_me"
+          className="ml-2 block text-sm text-gray-900 font-medium dark:text-white"
+        >
+          Remember and set a budget
+        </label>
+      </div>
+
+      <Transition
+        show={remember}
+        enter="transition duration-100 ease-out"
+        enterFrom="scale-95 opacity-0"
+        enterTo="scale-100 opacity-100"
+        leave="transition duration-75 ease-out"
+        leaveFrom="scale-100 opacity-100"
+        leaveTo="scale-95 opacity-0"
+      >
+        <p className="mt-4 mb-3 text-gray-500 text-sm">
+          You may set a balance to not be asked for confirmation on payments
+          until it is exhausted.
+        </p>
+        <div>
+          <TextField
+            id="budget"
+            label="Budget"
+            placeholder="sat"
+            value={budget}
+            type="number"
+            onChange={onBudgetChange}
+          />
+        </div>
+      </Transition>
+    </div>
+  );
+}
+
+export default BudgetControl;