Merge branch 'master' into dev-fix-Invoice-button

getAlby · Feb 29, 2024 · 1977cae · 1977cae
2 parents c935d8f + 8c59f85
commit 1977cae
Show file tree

Hide file tree

Showing 129 changed files with 2,278 additions and 2,970 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lightning-browser-extension",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Lightning browser extension",
   "private": true,
   "repository": "https://github.com/bumi/lightning-browser-extension.git",
@@ -37,28 +37,28 @@
   "dependencies": {
     "@bitcoin-design/bitcoin-icons-react": "^0.1.10",
     "@bitcoinerlab/secp256k1": "^1.0.5",
-    "@getalby/sdk": "^3.2.2",
-    "@headlessui/react": "^1.7.16",
+    "@getalby/sdk": "^3.3.0",
+    "@headlessui/react": "^1.7.18",
     "@lightninglabs/lnc-web": "^0.2.4-alpha",
-    "@noble/curves": "^1.1.0",
+    "@noble/curves": "^1.3.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",
+    "@popicons/react": "^0.0.9",
+    "@scure/bip32": "^1.3.3",
+    "@scure/bip39": "^1.2.2",
+    "@tailwindcss/forms": "^0.5.7",
     "@vespaiach/axios-fetch-adapter": "^0.3.0",
     "axios": "^0.27.2",
     "bech32": "^2.0.0",
     "bitcoinjs-lib": "^6.1.0",
     "bolt11": "^1.4.1",
     "crypto-js": "^4.2.0",
-    "dayjs": "^1.11.9",
+    "dayjs": "^1.11.10",
     "dexie": "^3.2.4",
     "elliptic": "^6.5.4",
     "events": "^3.3.0",
     "html5-qrcode": "^2.3.8",
-    "i18next": "^22.5.1",
-    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next": "^23.8.2",
+    "i18next-browser-languagedetector": "^7.2.0",
     "liquidjs-lib": "^6.0.2-liquid.29",
     "lnmessage": "^0.2.3",
     "lodash.merge": "^4.6.2",
@@ -69,17 +69,17 @@
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.3.1",
+    "react-i18next": "^14.0.1",
     "react-loading-skeleton": "^3.3.1",
     "react-modal": "^3.16.1",
     "react-qr-code": "^2.0.12",
     "react-router-dom": "^6.17.0",
     "slip77": "^0.2.0",
     "stream": "^0.0.2",
-    "tailwindcss": "^3.3.3",
-    "uuid": "^9.0.0",
+    "tailwindcss": "^3.4.1",
+    "uuid": "^9.0.1",
     "webextension-polyfill": "^0.10.0",
-    "zustand": "^3.7.2"
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.8.0",

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/AccountMenu/index.test.tsx b/src/app/components/AccountMenu/index.test.tsx
@@ -67,11 +67,11 @@ describe("AccountMenu", () => {
       await user.click(screen.getByText("Toggle Dropdown"));
     });
 
-    await screen.findByText("Switch account");
+    await screen.findByText("Switch Wallet");
     expect(screen.getByText("Balance")).toBeInTheDocument();
     expect(screen.getByText("LND account")).toBeInTheDocument();
     expect(screen.getByText("Galoy account")).toBeInTheDocument();
-    expect(screen.getByText("Add a new account")).toBeInTheDocument();
-    expect(screen.getByText("Manage accounts")).toBeInTheDocument();
+    expect(screen.getByText("Connect a Wallet")).toBeInTheDocument();
+    expect(screen.getByText("Manage Wallets")).toBeInTheDocument();
   });
 });
diff --git a/src/app/components/AccountMenu/index.tsx b/src/app/components/AccountMenu/index.tsx
@@ -127,8 +127,8 @@ function AccountMenu({ showOptions = true }: Props) {
               openOptions(`accounts/${authAccount?.id}`);
             }}
           >
-            <WalletIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
-            {t("options.account.account_settings")}
+            <WalletIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300 shrink-0" />
+            {t("options.account.wallet_settings")}
           </Menu.ItemButton>
           {(isAlbyLNDHubAccount(
             authAccount?.alias,
@@ -140,7 +140,7 @@ function AccountMenu({ showOptions = true }: Props) {
                 window.open(`https://getalby.com/user`, "_blank");
               }}
             >
-              <GlobeIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
+              <GlobeIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300 shrink-0" />
               {t("options.account.go_to_web_wallet")} →
             </Menu.ItemButton>
           )}

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/ConnectorForm/index.tsx b/src/app/components/ConnectorForm/index.tsx
@@ -32,7 +32,7 @@ function ConnectorForm({
     <div className="flex h-full justify-center items-center">
       {video && (
         <div
-          className="flex-1 relative h-0 mb-6"
+          className="flex-1 relative h-0"
           style={{ paddingBottom: "56.25%" }}
         >
           <video className="absolute t-0 l-0 w-full h-full" controls>
@@ -42,7 +42,7 @@ function ConnectorForm({
       )}
       {image && (
         <>
-          <div className="w-full mb-6">
+          <div className="w-96">
             <img
               src={image}
               alt="Screenshot"
@@ -56,8 +56,8 @@ function ConnectorForm({
 
   return (
     <form onSubmit={onSubmit}>
-      <div className="max-w-xl mx-auto mt-6 relative bg-white dark:bg-surface-02dp p-7 shadow rounded-lg">
-        <div className="flex items-center mb-4">
+      <div className="flex flex-col max-w-xl mx-auto mt-6 relative bg-white dark:bg-surface-02dp p-10 rounded-2xl border border-gray-200 dark:border-neutral-700 gap-4">
+        <div className="flex items-center">
           {logo && <img src={logo} className="w-16 mr-4 rounded-lg" />}
           {/*
               TODO: this can be simplified to always wrap the title in h1, without checking if it
@@ -70,28 +70,27 @@ function ConnectorForm({
             title
           )}
         </div>
-        {media}
         {description && (
-          <div className="text-gray-500 dark:text-white whitespace-pre-line">
+          <div className="text-gray-700 dark:text-white whitespace-pre-line">
             {typeof description === "string" ? (
               <p className="mb-6">{description}</p>
             ) : (
               description
             )}
           </div>
         )}
+        {video || (image && media)}
         <div>{children}</div>
-      </div>
-
-      <div className="my-6 flex justify-center">
-        <Button
-          type="submit"
-          label={submitLabel}
-          loading={submitLoading}
-          disabled={submitDisabled}
-          primary
-          className="w-64"
-        />
+        <div className="mt-4 flex justify-center">
+          <Button
+            type="submit"
+            label={submitLabel}
+            loading={submitLoading}
+            disabled={submitDisabled}
+            primary
+            className="w-64"
+          />
+        </div>
       </div>
     </form>
   );

diff --git a/src/app/components/ConnectorPath/index.tsx b/src/app/components/ConnectorPath/index.tsx
@@ -8,16 +8,18 @@ type Props = {
 
 function ConnectorPath({ title, icon, description, content, actions }: Props) {
   return (
-    <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-row items-center mb-4 space-x-3">
+    <div className="flex flex-col p-10 border border-gray-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">{title}</h1>
+        <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>
+      <div className="flex gap-4 flex-col sm:flex-row mt-auto">{actions}</div>
     </div>
   );
 }

diff --git a/src/app/components/ContentBox/index.tsx b/src/app/components/ContentBox/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 export function ContentBox({ children }: React.PropsWithChildren<object>) {
   return (
-    <div className="mt-6 bg-white rounded-md p-8 border border-gray-200 dark:border-neutral-700 dark:bg-surface-01dp flex flex-col gap-6">
+    <div className="mt-6 bg-white rounded-2xl p-10 border border-gray-200 dark:border-neutral-700 dark:bg-surface-01dp flex flex-col gap-6">
       {children}
     </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/Header/index.tsx b/src/app/components/Header/index.tsx
@@ -8,9 +8,11 @@ function Header({ children, headerLeft, headerRight }: Props) {
   return (
     <div className="bg-white py-[6px] border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700">
       <div className="flex justify-between items-center container max-w-screen-lg px-4 mx-auto">
-        <div className="w-8 h-8">{headerLeft}</div>
-        <h1 className="text-lg font-medium dark:text-white">{children}</h1>
-        <div className="w-8 h-8">{headerRight}</div>
+        <div className="w-8 h-8 mr-3">{headerLeft}</div>
+        <h1 className="text-lg font-medium dark:text-white overflow-hidden">
+          {children}
+        </h1>
+        <div className="w-8 h-8 ml-3">{headerRight}</div>
       </div>
     </div>
   );

diff --git a/src/app/components/IconLinkCard/IconLinkCard.tsx b/src/app/components/IconLinkCard/IconLinkCard.tsx
@@ -15,19 +15,19 @@ export function IconLinkCard({
 }: IconLinkCardProps) {
   return (
     <div
-      className="shadow rounded-md p-4 bg-white dark:bg-surface-01dp hover:bg-gray-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 cursor-pointer flex flex-row items-center gap-3"
+      className="border border-gray-300 dark:border-neutral-800 rounded-xl p-4 bg-white dark:bg-surface-01dp hover:bg-gray-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 cursor-pointer flex flex-row items-center gap-3"
       onClick={onClick}
     >
       <div className="flex-shrink-0 flex justify-center md:px-3">{icon}</div>
-      <div className="flex-grow">
+      <div className="flex-grow space-y-0.5">
         <div className="font-medium leading-5 text-sm md:text-base">
           {title}
         </div>
         <div className="text-gray-600 dark:text-neutral-400 text-xs leading-4 md:text-sm">
           {description}
         </div>
       </div>
-      <div className="flex-shrink-0 flex justify-end ">
+      <div className="flex-shrink-0 flex justify-end text-gray-400 dark:text-neutral-500 ">
         <CaretRightIcon className="w-8" />
       </div>
     </div>

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

diff --git a/src/app/components/LocaleSwitcher/LocaleSwitcher.tsx b/src/app/components/LocaleSwitcher/LocaleSwitcher.tsx
@@ -1,12 +1,14 @@
 import type { FallbackLng } from "i18next";
-import { useState, useEffect } from "react";
 import type { ChangeEvent } from "react";
+import { useEffect, useState } from "react";
 import { useSettings } from "~/app/context/SettingsContext";
 import i18n, { supportedLocales } from "~/i18n/i18nConfig";
 
-import Select from "../form/Select";
+type Props = {
+  className: string;
+};
 
-export default function LocaleSwitcher() {
+export default function LocaleSwitcher({ className }: Props) {
   const { settings, updateSetting } = useSettings();
   const fallbackLng = i18n.options.fallbackLng?.[0 as keyof FallbackLng];
   const [dropdownLang, setDropdownLang] = useState(
@@ -30,12 +32,17 @@ export default function LocaleSwitcher() {
   };
 
   return (
-    <Select name="locale" value={dropdownLang} onChange={languageHandler}>
+    <select
+      name="locale"
+      value={dropdownLang}
+      onChange={languageHandler}
+      className={className}
+    >
       {supportedLocales.map((locale) => (
         <option key={locale.locale} value={locale.locale}>
           {locale.label}
         </option>
       ))}
-    </Select>
+    </select>
   );
 }
diff --git a/src/app/components/Menu/MenuItemButton.tsx b/src/app/components/Menu/MenuItemButton.tsx
@@ -3,15 +3,13 @@ import { classNames } from "~/app/utils/index";
 
 type Props = {
   children: React.ReactNode;
-  danger?: boolean;
   disabled?: boolean;
   onClick: () => void;
   title?: string;
 };
 
 function MenuItemButton({
   children,
-  danger = false,
   disabled = false,
   onClick,
   title = "",
@@ -21,10 +19,9 @@ function MenuItemButton({
       {({ active }) => (
         <button
           className={classNames(
-            active ? "bg-gray-100 dark:bg-white/10" : "",
-            danger ? "text-red-700" : "text-gray-700",
+            active ? "bg-gray-50 dark:bg-surface-02dp" : "",
             disabled ? "cursor-not-allowed" : "cursor-pointer",
-            "flex items-center block w-full text-left px-4 py-3 text-sm dark:text-white"
+            "flex items-center w-full p-4 text-sm text-gray-800 dark:text-neutral-200 whitespace-nowrap"
           )}
           disabled={disabled}
           onClick={onClick}

diff --git a/src/app/components/Menu/MenuList.tsx b/src/app/components/Menu/MenuList.tsx
@@ -25,7 +25,7 @@ function List({ position = "left", fullWidth, children }: Props) {
             ? "left-0 origin-top-left"
             : "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"
+          "absolute z-50 mt-2 overflow-hidden rounded-xl shadow-lg bg-white focus:outline-none dark:bg-surface-01dp border border-gray-200 dark:border-neutral-700"
         )}
       >
         {children}

diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
@@ -32,7 +32,7 @@ export default function Modal({
         position == "center" && "items-center",
         position == "top" && "items-start pt-20"
       )}
-      className="rounded-lg shadow-xl bg-white dark:bg-surface-01dp w-full max-w-md overflow-x-hidden relative p-5 cursor-auto mx-5"
+      className="rounded-lg shadow-xl bg-white dark:bg-surface-01dp w-full max-w-md overflow-x-hidden relative p-5 cursor-auto mx-5 no-scrollbar"
       style={{ content: { maxHeight: "80vh" } }}
     >
       {title && (

diff --git a/src/app/components/Navbar/Navbar.tsx b/src/app/components/Navbar/Navbar.tsx
@@ -7,9 +7,9 @@ type Props = {
 
 export default function Navbar({ children }: Props) {
   return (
-    <div className="py-[6px] bg-white border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700">
+    <div className="py-[6px] bg-white border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700 whitespace-nowrap">
       <div className="max-w-screen-lg px-4 flex justify-between items-center mx-auto w-full">
-        <div className="flex">
+        <div className="flex items-center">
           <UserMenu />
           {children && (
             <nav className="ml-8 space-x-8 hidden md:flex">{children}</nav>