Merge branch 'getAlby:master' into lawallet-extension

package.json

@@ -38,12 +38,12 @@
     "@bitcoin-design/bitcoin-icons-react": "^0.1.10",
     "@bitcoinerlab/secp256k1": "^1.0.5",
     "@getalby/sdk": "^3.2.2",
-    "@headlessui/react": "^1.7.16",
+    "@headlessui/react": "^1.7.18",
     "@lightninglabs/lnc-web": "^0.2.4-alpha",
     "@noble/curves": "^1.1.0",
     "@noble/secp256k1": "^2.0.0",
     "@popicons/react": "^0.0.8",
-    "@scure/bip32": "^1.3.1",
+    "@scure/bip32": "^1.3.3",
     "@scure/bip39": "^1.2.1",
     "@tailwindcss/forms": "^0.5.4",
     "@vespaiach/axios-fetch-adapter": "^0.3.0",

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>

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}

src/app/components/ConnectorPath/index.tsx

@@ -19,7 +19,7 @@ function ConnectorPath({ title, icon, description, content, actions }: Props) {
       <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>
   );
 }

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>
   );

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>
   );
 }

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"
           )}
           disabled={disabled}
           onClick={onClick}

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}

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>

src/app/components/Navbar/NavbarLink.tsx

@@ -5,19 +5,21 @@ type Props = {
   children: React.ReactNode;
   end?: boolean;
   href: string;
+  target?: string;
 };
 
-function NavbarLink({ children, end = false, href }: Props) {
+function NavbarLink({ children, end = false, href, target }: Props) {
   return (
     <NavLink
       end={end}
       to={href}
+      target={target}
       className={({ isActive }) =>
         classNames(
-          "block font-semibold hover:text-gray-600 dark:hover:text-gray-300 transition px-1 text-md",
+          "flex items-center font-semibold hover:text-gray-600 dark:hover:text-neutral-400 transition px-1 text-md",
           isActive
-            ? " text-gray-900 dark:text-gray-100"
-            : " text-gray-400 dark:text-gray-400"
+            ? " text-gray-800 dark:text-neutral-200"
+            : " text-gray-400 dark:text-gray-600"
         )
       }
     >

src/app/components/PaymentSummary/index.tsx

@@ -42,7 +42,9 @@ const Dt = ({ children }: { children: React.ReactNode }) => (
 );
 
 const Dd = ({ children }: { children: React.ReactNode }) => (
-  <dd className="text-lg text-gray-600 dark:text-neutral-400">{children}</dd>
+  <dd className="text-lg text-gray-600 dark:text-neutral-400 break-words">
+    {children}
+  </dd>
 );
 
 export default PaymentSummary;