Merge branch 'master' into task-account-perms

getAlby · Feb 1, 2023 · 1f1a3ea · 1f1a3ea
2 parents 0b2f564 + 0e0ff20
commit 1f1a3ea
Show file tree

Hide file tree

Showing 57 changed files with 2,336 additions and 896 deletions.
diff --git a/jest.setup.js b/jest.setup.js
@@ -7,6 +7,11 @@ import "@testing-library/jest-dom";
 // https://github.com/mswjs/examples/tree/master/examples/rest-react
 import { server } from "./tests/unit/helpers/server";
 
+import { TextEncoder, TextDecoder } from 'util'
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder
+
+
 // fix "This script should only be loaded in a browser extension." e.g. https://github.com/mozilla/webextension-polyfill/issues/218
 if (!chrome.runtime.id) chrome.runtime.id = "history-delete";
 

diff --git a/package.json b/package.json
@@ -37,22 +37,25 @@
   "dependencies": {
     "@bitcoin-design/bitcoin-icons-react": "^0.1.9",
     "@headlessui/react": "^1.7.7",
+    "lnc-web": "git+https://github.com/bumi/lnc-web.git#remove-window-dependency",
     "@noble/secp256k1": "^1.7.1",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
+    "avvvatars-react": "^0.4.2",
     "axios": "^1.2.2",
     "bech32": "^2.0.0",
     "bolt11": "^1.4.0",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.7",
-    "dexie": "^3.2.2",
+    "dexie": "^3.2.3",
     "elliptic": "^6.5.4",
     "html5-qrcode": "^2.3.4",
     "i18next": "^22.4.9",
     "i18next-browser-languagedetector": "^7.0.1",
-    "lnmessage": "^0.0.14",
+    "lnmessage": "^0.0.18",
     "lodash.merge": "^4.6.2",
     "lodash.pick": "^4.4.0",
+    "lodash.snakecase": "^4.1.1",
     "pubsub-js": "^1.9.4",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
@@ -61,7 +64,7 @@
     "react-loading-skeleton": "^3.1.0",
     "react-modal": "^3.16.1",
     "react-qr-code": "^2.0.11",
-    "react-router-dom": "^6.6.1",
+    "react-router-dom": "^6.7.0",
     "react-toastify": "^9.1.1",
     "stream": "^0.0.2",
     "tailwindcss": "^3.2.4",
@@ -71,20 +74,21 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.1",
-    "@commitlint/config-conventional": "^17.4.0",
+    "@commitlint/config-conventional": "^17.4.2",
     "@jest/types": "^29.3.1",
-    "@playwright/test": "^1.29.1",
-    "@swc/core": "^1.3.24",
+    "@playwright/test": "^1.29.2",
+    "@swc/core": "^1.3.27",
     "@swc/jest": "^0.2.24",
     "@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": "^4.0.0",
-    "@types/chrome": "^0.0.208",
+    "@types/chrome": "^0.0.210",
     "@types/crypto-js": "^4.1.1",
     "@types/elliptic": "^6.4.14",
     "@types/lodash.merge": "^4.6.7",
     "@types/lodash.pick": "^4.4.0",
+    "@types/lodash.snakecase": "^4.1.1",
     "@types/pubsub-js": "^1.8.3",
     "@types/react-dom": "^18.0.10",
     "@types/react-modal": "^3.13.1",
@@ -101,28 +105,28 @@
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "del-cli": "^5.0.0",
-    "eslint": "^8.31.0",
+    "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "fake-indexeddb": "^3.1.8",
+    "fake-indexeddb": "^4.0.1",
     "filemanager-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.3",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "jest-webextension-mock": "^3.8.7",
+    "jest-webextension-mock": "^3.8.8",
     "lint-staged": "^13.1.0",
     "mini-css-extract-plugin": "^2.7.2",
-    "msw": "^0.49.2",
+    "msw": "^1.0.0",
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",
     "postcss-loader": "^7.0.2",
     "pptr-testing-library": "^0.7.0",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.3",
     "process": "^0.11.10",
-    "puppeteer": "^19.4.1",
+    "puppeteer": "^19.5.2",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
     "stream-browserify": "^3.0.0",

diff --git a/src/app/components/AccountMenu/index.tsx b/src/app/components/AccountMenu/index.tsx
@@ -4,7 +4,7 @@ import {
   CheckIcon,
   PlusIcon,
 } from "@bitcoin-design/bitcoin-icons-react/filled";
-import { WalletIcon } from "@bitcoin-design/bitcoin-icons-react/outline";
+import Avvvatars from "avvvatars-react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Skeleton from "react-loading-skeleton";
@@ -73,10 +73,10 @@ function AccountMenu({ showOptions = true }: Props) {
   }
 
   return (
-    <div className="relative pl-2 flex bg-gray-100 rounded-md dark:bg-surface-12dp max-w-full">
-      <p className="flex items-center">
-        <WalletIcon className="-ml-1 w-8 h-8 opacity-50 dark:text-white" />
-      </p>
+    <div className="relative pl-2 w-72 flex bg-gray-100 rounded-md dark:bg-surface-12dp">
+      <div className="flex items-center">
+        <Avvvatars value={authAccount?.name || ""} style={"shape"} />
+      </div>
 
       <div
         className={`flex-auto mx-2 py-1 overflow-hidden ${
@@ -112,7 +112,7 @@ function AccountMenu({ showOptions = true }: Props) {
           <span className="sr-only">{t("screen_reader")}</span>
         </Menu.Button>
 
-        <Menu.List position="left">
+        <Menu.List position="left" fullWidth>
           <Menu.Subheader>{t("title")}</Menu.Subheader>
 
           {Object.keys(accounts).map((accountId) => {
@@ -126,14 +126,16 @@ function AccountMenu({ showOptions = true }: Props) {
                 disabled={loading}
                 title={account.name}
               >
-                <WalletIcon className="w-6 h-6 -ml-0.5 mr-2 shrink-0 opacity-75 text-gray-700 dark:text-neutral-300" />
-                <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+                <div className="shrink-0">
+                  <Avvvatars value={account.name} style={"shape"} />
+                </div>
+                <span className="overflow-hidden text-ellipsis whitespace-nowrap ml-2">
                   {account.name}&nbsp;
                 </span>
                 {accountId === authAccount?.id && (
                   <span
                     data-testid="selected"
-                    className="ml-auto w-3.5 h-3.5 rounded-full bg-orange-bitcoin flex justify-center items-center"
+                    className="ml-auto flex-shrink-0 w-3.5 h-3.5 rounded-full bg-orange-bitcoin flex justify-center items-center"
                   >
                     <CheckIcon className="w-3 h-3 text-white" />
                   </span>

diff --git a/src/app/components/Card/index.tsx b/src/app/components/Card/index.tsx
@@ -14,14 +14,16 @@ export default function Card({
   currency,
 }: Props) {
   return (
-    <div className={`${color} h-36 rounded-lg pt-6 dark:bg-gray-600`}>
+    <div className={`${color} rounded-lg py-6 dark:bg-gray-600`}>
       <p className="font-normal text-black ml-6 dark:text-white">{alias}</p>
       <p className="text-2xl font-bold text-black ml-6 mt-2 dark:text-white">
         {satoshis}
       </p>
-      <p className="font-normal text-white ml-6 mt-1">
-        {fiat} {currency}
-      </p>
+      {fiat && currency && (
+        <p className="font-normal text-white ml-6 mt-1">
+          {fiat} {currency}
+        </p>
+      )}
     </div>
   );
 }
diff --git a/src/app/components/ConnectorForm/index.tsx b/src/app/components/ConnectorForm/index.tsx
@@ -61,16 +61,16 @@ function ConnectorForm({
 
   return (
     <form onSubmit={onSubmit}>
-      <div className="relative lg:flex lg:gap-4 mt-14 bg-white dark:bg-surface-02dp px-10 py-4 lg:py-12">
+      <div className="relative lg:flex lg:gap-4 mt-14 bg-white dark:bg-surface-02dp p-10 shadow rounded-lg">
         <div className="lg:w-1/2">
           {typeof title === "string" ? (
-            <h1 className="mb-2 text-2xl font-bold dark:text-white">{title}</h1>
+            <h1 className="mb-1 text-2xl font-bold dark:text-white">{title}</h1>
           ) : (
             title
           )}
           <div className="lg:hidden mt-4">{media}</div>
           {description && (
-            <div className="text-gray-500 dark:text-neutral-400 whitespace-pre-line">
+            <div className="text-gray-500 dark:text-neutral-400 whitespace-pre-line mb-8">
               {typeof description === "string" ? (
                 <p>{description}</p>
               ) : (

diff --git a/src/app/components/ConnectorPath/index.tsx b/src/app/components/ConnectorPath/index.tsx
@@ -9,7 +9,9 @@ function ConnectorPath({ title, description, content, actions }: Props) {
   return (
     <div className="shadow-lg p-4 lg:p-12 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-6 dark:text-neutral-400">{description}</p>
+      <p className="text-gray-500 mt-6 dark:text-neutral-400 min-h-[48px]">
+        {description}
+      </p>
       <div className="lg:h-56 py-4 flex flex-col justify-center items-center">
         {content}
       </div>

diff --git a/src/app/components/LinkButton/index.tsx b/src/app/components/LinkButton/index.tsx
@@ -9,8 +9,8 @@ type Props = {
 export default function LinkButton({ to, title, logo }: Props) {
   return (
     <Link to={to} className="block">
-      <div className="p-4 bg-white dark:bg-surface-02dp h-64 lg:h-80 text-center shadow-lg overflow-hidden border-b border-gray-300 dark:border-neutral-700 rounded-lg hover:bg-gray-50 dark:hover:bg-neutral-800 transition duration-200">
-        <div className="my-6 lg:my-12">
+      <div className="p-4 bg-white dark:bg-surface-02dp h-64 lg:h-80 text-center shadow overflow-hidden border-b border-gray-300 dark:border-neutral-700 rounded-lg hover:bg-gray-50 dark:hover:bg-neutral-800 transition duration-200">
+        <div className="my-4 lg:my-12">
           <img src={logo} alt="logo" className="inline rounded-3xl w-32" />
         </div>
         <div>

diff --git a/src/app/components/Menu/MenuList.tsx b/src/app/components/Menu/MenuList.tsx
@@ -1,12 +1,14 @@
 import { Menu, Transition } from "@headlessui/react";
 import { Fragment } from "react";
+import { classNames } from "~/app/utils";
 
 type Props = {
   position?: string;
   children: React.ReactNode;
+  fullWidth?: boolean;
 };
 
-function List({ position = "left", children }: Props) {
+function List({ position = "left", fullWidth, children }: Props) {
   return (
     <Transition
       as={Fragment}
@@ -18,11 +20,13 @@ function List({ position = "left", children }: Props) {
       leaveTo="opacity-0 scale-95"
     >
       <Menu.Items
-        className={`${
+        className={classNames(
           position === "left"
             ? "left-0 origin-top-left"
-            : "right-0 origin-top-right"
-        } absolute z-50 mt-2 py-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-surface-12dp dark:border-0`}
+            : "right-0 origin-top-right",
+          fullWidth ? "w-full" : "w-56",
+          "absolute z-50 mt-2 py-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-surface-12dp dark:border-0"
+        )}
       >
         {children}
       </Menu.Items>

diff --git a/src/app/components/PublisherCard/index.tsx b/src/app/components/PublisherCard/index.tsx
@@ -38,7 +38,7 @@ export default function PublisherCard({
     >
       {image && (
         <img
-          className={`m-2 shrink-0 bg-white border-solid border-2 border-white object-cover rounded-lg shadow-2xl ${
+          className={`m-2 shrink-0 object-cover rounded-lg ${
             isSmall ? "w-14 h-14 mr-4" : "w-20 h-20"
           }`}
           src={image || DEFAULT_IMAGE}

diff --git a/src/app/components/UserMenu/index.tsx b/src/app/components/UserMenu/index.tsx
@@ -1,4 +1,5 @@
 import {
+  AddressBookIcon,
   GearIcon,
   GlobeIcon,
   LockIcon,
@@ -80,6 +81,7 @@ export default function UserMenu() {
           <ReceiveIcon className="w-6 h-6 -ml-0.5 mr-2 text-gray-700 dark:text-neutral-300" />
           {tCommon("actions.receive")}
         </Menu.ItemButton>
+        <Menu.Divider />
         <Menu.ItemButton
           onClick={() => {
             openOptions("settings");
@@ -88,7 +90,14 @@ export default function UserMenu() {
           <GearIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
           {tCommon("settings")}
         </Menu.ItemButton>
-        <Menu.Divider />
+        <Menu.ItemButton
+          onClick={() => {
+            openOptions("accounts");
+          }}
+        >
+          <AddressBookIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
+          {tCommon("accounts")}
+        </Menu.ItemButton>
         <Menu.ItemButton
           onClick={() => {
             utils.openUrl("https://feedback.getalby.com");

diff --git a/src/app/router/Options/Options.tsx b/src/app/router/Options/Options.tsx
@@ -1,15 +1,16 @@
 import Container from "@components/Container";
 import Navbar from "@components/Navbar";
 import Accounts from "@screens/Accounts";
+import ShowAccount from "@screens/Accounts/Show";
 import ConfirmPayment from "@screens/ConfirmPayment";
 import Keysend from "@screens/Keysend";
 import LNURLAuth from "@screens/LNURLAuth";
 import LNURLChannel from "@screens/LNURLChannel";
 import LNURLPay from "@screens/LNURLPay";
 import LNURLWithdraw from "@screens/LNURLWithdraw";
 import TestConnection from "@screens/Options/TestConnection";
-import Publisher from "@screens/Publisher";
 import Publishers from "@screens/Publishers";
+import ShowPublisher from "@screens/Publishers/Show";
 import Receive from "@screens/Receive";
 import Send from "@screens/Send";
 import Settings from "@screens/Settings";
@@ -46,7 +47,7 @@ function Options() {
               <Route index element={<Discover />} />
             </Route>
             <Route path="publishers">
-              <Route path=":id" element={<Publisher />} />
+              <Route path=":id" element={<ShowPublisher />} />
               <Route index element={<Publishers />} />
             </Route>
             <Route path="send" element={<Send />} />
@@ -59,6 +60,7 @@ function Options() {
             <Route path="lnurlAuth" element={<LNURLAuth />} />
             <Route path="settings" element={<Settings />} />
             <Route path="accounts">
+              <Route path=":id" element={<ShowAccount />} />
               <Route
                 path="new"
                 element={

diff --git a/src/app/router/connectorRoutes.tsx b/src/app/router/connectorRoutes.tsx
@@ -4,6 +4,7 @@ import ConnectEclair from "@screens/connectors/ConnectEclair";
 import ConnectGaloy, { galoyUrls } from "@screens/connectors/ConnectGaloy";
 import ConnectKollider from "@screens/connectors/ConnectKollider";
 import ConnectLnbits from "@screens/connectors/ConnectLnbits";
+import ConnectLnc from "@screens/connectors/ConnectLnc";
 import ConnectLnd from "@screens/connectors/ConnectLnd";
 import ConnectLndHub from "@screens/connectors/ConnectLndHub";
 import ConnectMyNode from "@screens/connectors/ConnectMyNode";
@@ -42,6 +43,12 @@ function getConnectorRoutes() {
       title: i18n.t("translation:choose_connector.lnd.title"),
       logo: lnd,
     },
+    {
+      path: "lnc",
+      element: <ConnectLnc />,
+      title: i18n.t("translation:choose_connector.lnc.title"),
+      logo: lnd,
+    },
     {
       path: "commando",
       element: <ConnectCommando />,