Merge branch 'master' into feat/nostr-nip-19

* master: (38 commits) Update translation files Update translation files Update translation files Update translation files fix(nostr): re-encrypt nostr key on pw change #1925 (#1930) test(e2e): fix alby wallet tests #1848 test(e2e): fix alby wallet tests #1848 Update translation files Translated using Weblate (German) fix: copy chore: add forgot password link fix: copy fix: copy chore: remove Settings link from navbar Translated using Weblate (German) Update all development Yarn dependencies (2022-12-31) Update react-router-dom to version 6.6.1 fix: unit test query casing chore: update lightning and bitcoin casing fix: rename Discover component ...
getAlby · Jan 3, 2023 · 894ca1a · 894ca1a
2 parents c615956 + f01ee92
commit 894ca1a
Show file tree

Hide file tree

Showing 37 changed files with 995 additions and 1,096 deletions.
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
     "react-loading-skeleton": "^3.1.0",
     "react-modal": "^3.16.1",
     "react-qr-code": "^2.0.8",
-    "react-router-dom": "^6.4.4",
+    "react-router-dom": "^6.6.1",
     "react-toastify": "^9.1.1",
     "stream": "^0.0.2",
     "tailwindcss": "^3.2.4",
@@ -73,8 +73,8 @@
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
     "@jest/types": "^29.3.1",
-    "@playwright/test": "^1.28.1",
-    "@swc/core": "^1.3.21",
+    "@playwright/test": "^1.29.1",
+    "@swc/core": "^1.3.24",
     "@swc/jest": "^0.2.24",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -86,7 +86,7 @@
     "@types/lodash.merge": "^4.6.7",
     "@types/lodash.pick": "^4.4.0",
     "@types/pubsub-js": "^1.8.3",
-    "@types/react-dom": "^18.0.9",
+    "@types/react-dom": "^18.0.10",
     "@types/react-modal": "^3.13.1",
     "@types/uuid": "^9.0.0",
     "@types/webextension-polyfill": "^0.9.2",
@@ -101,7 +101,7 @@
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "del-cli": "^5.0.0",
-    "eslint": "^8.29.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.31.11",

diff --git a/src/app/components/Button/index.tsx b/src/app/components/Button/index.tsx
@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
 import type { Ref } from "react";
+import { forwardRef } from "react";
 import Loading from "~/app/components/Loading";
 import { classNames } from "~/app/utils/index";
 
@@ -9,8 +9,10 @@ export type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   label: string;
   icon?: React.ReactNode;
   primary?: boolean;
+  outline?: boolean;
   loading?: boolean;
   disabled?: boolean;
+  flex?: boolean;
   direction?: "row" | "column";
 };
 
@@ -26,7 +28,9 @@ const Button = forwardRef(
       fullWidth = false,
       halfWidth = false,
       primary = false,
+      outline = false,
       loading = false,
+      flex = false,
     }: Props,
     ref: Ref<HTMLButtonElement>
   ) => {
@@ -41,12 +45,15 @@ const Button = forwardRef(
           fullWidth || halfWidth ? "px-0 py-2" : "px-7 py-2",
           primary
             ? "bg-orange-bitcoin text-white border border-transparent"
+            : outline
+            ? "bg-white text-orange-bitcoin border border-orange-bitcoin"
             : `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",
+          flex && "flex-1",
           "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}

diff --git a/src/app/components/ConnectorForm/index.tsx b/src/app/components/ConnectorForm/index.tsx
@@ -34,12 +34,12 @@ function ConnectorForm({
       <div className="relative lg:flex mt-14 bg-white dark:bg-surface-02dp px-10 py-12">
         <div className="lg:w-1/2">
           {typeof title === "string" ? (
-            <h1 className="mb-6 text-2xl font-bold dark:text-white">{title}</h1>
+            <h1 className="mb-2 text-2xl font-bold dark:text-white">{title}</h1>
           ) : (
             title
           )}
           {description && (
-            <div className="mb-6 text-gray-500 dark:text-neutral-400">
+            <div className="text-gray-500 dark:text-neutral-400 whitespace-pre-line">
               {typeof description === "string" ? (
                 <p>{description}</p>
               ) : (

diff --git a/src/app/components/ConnectorPath/index.tsx b/src/app/components/ConnectorPath/index.tsx
@@ -0,0 +1,21 @@
+type Props = {
+  title: string;
+  description: string;
+  content: React.ReactNode;
+  actions: React.ReactNode;
+};
+
+function ConnectorPath({ title, description, content, actions }: Props) {
+  return (
+    <div className="shadow-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>
+      <div className="h-56 flex flex-col justify-center items-center">
+        {content}
+      </div>
+      <div className="flex gap-4">{actions}</div>
+    </div>
+  );
+}
+
+export default ConnectorPath;
diff --git a/src/app/components/LinkButton/index.tsx b/src/app/components/LinkButton/index.tsx
@@ -3,24 +3,20 @@ import { Link } from "react-router-dom";
 type Props = {
   to: string;
   title: string;
-  description?: string;
   logo?: string;
 };
 
-export default function LinkButton({ to, title, description, logo }: 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-96 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="p-4 bg-white dark:bg-surface-02dp 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-12">
           <img src={logo} alt="logo" className="inline rounded-3xl w-32" />
         </div>
         <div>
-          <span className="block dark:text-white text-lg">{title}</span>
-          {description && (
-            <span className="text-sm text-gray-500 dark:text-neutral-300">
-              {description}
-            </span>
-          )}
+          <span className="block dark:text-white text-lg font-medium">
+            {title}
+          </span>
         </div>
       </div>
     </Link>

diff --git a/src/app/components/PasswordForm/index.tsx b/src/app/components/PasswordForm/index.tsx
@@ -7,17 +7,19 @@ import type { KeyPrefix } from "i18next";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-export type Props = {
+export type PasswordFormData = {
+  password: string;
+  passwordConfirmation: string;
+};
+
+export type Props<T extends PasswordFormData = PasswordFormData> = {
   i18nKeyPrefix: KeyPrefix<"translation">;
   children?: React.ReactNode;
-  formData: {
-    password: string;
-    passwordConfirmation: string;
-  };
-  setFormData: (formData: {
-    password: string;
-    passwordConfirmation: string;
-  }) => void;
+  formData: T;
+  setFormData: (formData: T) => void;
+  minLength?: number;
+  confirm?: boolean;
+  autoFocus?: boolean;
 };
 
 type errorMessage =
@@ -31,11 +33,16 @@ const initialErrors: Record<string, errorMessage> = {
   passwordConfirmationErrorMessage: "",
 };
 
-export default function PasswordForm({
+export default function PasswordForm<
+  T extends PasswordFormData = PasswordFormData
+>({
   formData,
   setFormData,
   i18nKeyPrefix,
-}: Props) {
+  minLength,
+  confirm = true,
+  autoFocus = true,
+}: Props<T>) {
   const [errors, setErrors] = useState(initialErrors);
   const [passwordView, setPasswordView] = useState(false);
   const [passwordConfirmationView, setPasswordConfirmationView] =
@@ -71,9 +78,9 @@ export default function PasswordForm({
     let passwordConfirmationErrorMessage: errorMessage = "";
 
     if (!formData.password) passwordErrorMessage = "enter_password";
-    if (!formData.passwordConfirmation) {
+    if (confirm && !formData.passwordConfirmation) {
       passwordConfirmationErrorMessage = "confirm_password";
-    } else if (formData.password !== formData.passwordConfirmation) {
+    } else if (confirm && formData.password !== formData.passwordConfirmation) {
       passwordConfirmationErrorMessage = "mismatched_password";
     }
     setErrors({
@@ -86,13 +93,21 @@ export default function PasswordForm({
     <>
       <div className="w-full mb-6">
         <TextField
-          autoFocus
+          autoFocus={autoFocus}
           id="password"
           label={t("choose_password.label")}
           type={passwordView ? "text" : "password"}
           required
           onChange={handleChange}
           tabIndex={0}
+          minLength={minLength}
+          pattern={minLength ? `.{${minLength},}` : undefined}
+          title={
+            minLength
+              ? `at least ${minLength} characters`
+              : undefined /*TODO: i18n */
+          }
+          onBlur={validate}
           endAdornment={
             <button
               type="button"
@@ -116,38 +131,40 @@ export default function PasswordForm({
           </p>
         )}
       </div>
-      <div className="w-full">
-        <TextField
-          id="passwordConfirmation"
-          label={t("confirm_password.label")}
-          type={passwordConfirmationView ? "text" : "password"}
-          required
-          onChange={handleChange}
-          onBlur={validate}
-          tabIndex={1}
-          endAdornment={
-            <button
-              type="button"
-              className="flex justify-center items-center w-10 h-8"
-              tabIndex={-1}
-              onClick={() =>
-                setPasswordConfirmationView(!passwordConfirmationView)
-              }
-            >
-              {passwordConfirmationView ? (
-                <HiddenIcon className="h-6 w-6" />
-              ) : (
-                <VisibleIcon className="h-6 w-6" />
-              )}
-            </button>
-          }
-        />
-        {errors.passwordConfirmationErrorMessage && (
-          <p className="mt-1 text-red-500">
-            {t(`errors.${errors.passwordConfirmationErrorMessage}`)}
-          </p>
-        )}
-      </div>
+      {confirm && (
+        <div className="w-full">
+          <TextField
+            id="passwordConfirmation"
+            label={t("confirm_password.label")}
+            type={passwordConfirmationView ? "text" : "password"}
+            required
+            onChange={handleChange}
+            onBlur={validate}
+            tabIndex={1}
+            endAdornment={
+              <button
+                type="button"
+                className="flex justify-center items-center w-10 h-8"
+                tabIndex={-1}
+                onClick={() =>
+                  setPasswordConfirmationView(!passwordConfirmationView)
+                }
+              >
+                {passwordConfirmationView ? (
+                  <HiddenIcon className="h-6 w-6" />
+                ) : (
+                  <VisibleIcon className="h-6 w-6" />
+                )}
+              </button>
+            }
+          />
+          {errors.passwordConfirmationErrorMessage && (
+            <p className="mt-1 text-red-500">
+              {t(`errors.${errors.passwordConfirmationErrorMessage}`)}
+            </p>
+          )}
+        </div>
+      )}
     </>
   );
 }
diff --git a/src/app/components/UserMenu/index.tsx b/src/app/components/UserMenu/index.tsx
@@ -1,12 +1,13 @@
 import {
   GearIcon,
+  GlobeIcon,
   LockIcon,
   MenuIcon,
-  SendIcon,
-  TransactionsIcon,
-  ReceiveIcon,
   QuestionIcon,
+  ReceiveIcon,
   RocketIcon,
+  SendIcon,
+  TransactionsIcon,
 } from "@bitcoin-design/bitcoin-icons-react/filled";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -47,6 +48,14 @@ export default function UserMenu() {
         <MenuIcon className="h-6 w-6" />
       </Menu.Button>
       <Menu.List position="right">
+        <Menu.ItemButton
+          onClick={() => {
+            openOptions("discover");
+          }}
+        >
+          <GlobeIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
+          {tCommon("discover")}
+        </Menu.ItemButton>
         <Menu.ItemButton
           onClick={() => {
             openOptions("publishers");