Merge branch 'master' into getAlby#2663

package.json

@@ -135,6 +135,7 @@
     "puppeteer": "^21.0.3",
     "stream-browserify": "^3.0.0",
     "swc-loader": "^0.2.3",
+    "tailwindcss-3d": "^1.0.0",
     "terser-webpack-plugin": "^5.3.9",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.2.2",

scripts/check-changed-translations.js

@@ -18,7 +18,7 @@ function compareObjects(obj1, obj2, parentPath = "") {
           obj2[key],
           parentPath ? `${parentPath}.${key}` : key
         );
-      } else if (obj1[key] !== obj2[key]) {
+      } else if (obj1[key] !== obj2[key] && obj2[key] !== undefined) {
         const title = `Translation source ${parentPath}.${key} has changed`;
         const message = `Consider running \`node scripts/remove-outdated-translations.js ${parentPath}.${key}\` to reset existing translations.`;
         console.log(

src/app/components/Avatar/index.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useRef } from "react";
 import { generateSvgGAvatar } from "~/app/components/Avatar/generator";
+import { classNames } from "~/app/utils";
 
 type Props = {
   name: string;
   size: number;
   url?: string;
+  className?: string;
 };
 
 const Avatar = (props: Props) => {
@@ -20,6 +22,7 @@ const Avatar = (props: Props) => {
 const AvatarImage = (props: Props) => {
   return (
     <div
+      className={classNames("translate-z-0 bg-white", props.className ?? "")}
       style={{
         width: `${props.size}px`,
         height: `${props.size}px`,
@@ -48,11 +51,10 @@ const AvatarSVG = (props: Omit<Props, "url">) => {
 
   return (
     <svg
-      className="rounded-full overflow-hidden"
-      style={{
-        transform:
-          "translateZ(0)" /* Forced GPU render to avoid ugly borders when switching accounts */,
-      }}
+      className={classNames(
+        "rounded-full overflow-hidden translate-z-0",
+        props.className ?? ""
+      )}
       ref={svgRef}
       width={props.size}
       height={props.size}

src/app/components/BalanceBox/index.tsx

@@ -29,9 +29,9 @@ function BalanceBox({ className }: Props) {
       </div>
 
       {accountLoading ? (
-        <SkeletonLoader containerClassName="mt-2" className="w-16" />
+        <SkeletonLoader containerClassName="mt-1" className="w-16" />
       ) : (
-        <div className="text-gray-500 mt-2">
+        <div className="text-gray-500 mt-1">
           {balancesDecorated.fiatBalance && (
             <>~{balancesDecorated.fiatBalance}</>
           )}

src/app/components/Header/index.tsx

@@ -6,7 +6,7 @@ type Props = {
 
 function Header({ children, headerLeft, headerRight }: Props) {
   return (
-    <div className="bg-white py-2 border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700">
+    <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>

src/app/components/IconButton/index.tsx

@@ -6,7 +6,7 @@ type Props = {
 function IconButton({ onClick, icon }: Props) {
   return (
     <button
-      className="flex justify-center items-center w-8 h-8 dark:text-white rounded-md border border-gray-300 dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-08dp transition-colors duration-200"
+      className="flex justify-center items-center w-8 h-8 dark:text-white rounded-md border border-gray-200 dark:border-neutral-700 hover:bg-gray-50 dark:hover:bg-surface-08dp transition-colors duration-200"
       onClick={onClick}
     >
       {icon}

src/app/components/IconLinkCard/IconLinkCard.tsx

@@ -0,0 +1,35 @@
+import { CaretRightIcon } from "@bitcoin-design/bitcoin-icons-react/outline";
+
+export type IconLinkCardProps = {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+};
+
+export function IconLinkCard({
+  icon,
+  title,
+  description,
+  onClick,
+}: 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"
+      onClick={onClick}
+    >
+      <div className="flex-shrink-0 flex justify-center md:px-3">{icon}</div>
+      <div className="flex-grow">
+        <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 ">
+        <CaretRightIcon className="w-8" />
+      </div>
+    </div>
+  );
+}

src/app/components/Navbar/Navbar.tsx

@@ -7,7 +7,7 @@ type Props = {
 
 export default function Navbar({ children }: Props) {
   return (
-    <div className="py-2 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">
       <div className="max-w-screen-lg px-4 flex justify-between items-center mx-auto w-full">
         <div className="flex">
           <UserMenu />

src/app/components/QRCode/index.tsx

@@ -0,0 +1,25 @@
+import ReactQRCode from "react-qr-code";
+import { classNames, useTheme } from "~/app/utils";
+
+export type Props = {
+  value: string;
+  size?: number;
+  className?: string;
+};
+
+export default function QRCode({ value, size, className }: Props) {
+  const theme = useTheme();
+  const fgColor = theme === "dark" ? "#FFFFFF" : "#000000";
+  const bgColor = theme === "dark" ? "#000000" : "#FFFFFF";
+
+  return (
+    <ReactQRCode
+      value={value}
+      size={size}
+      className={classNames("rounded-md", className ?? "")}
+      fgColor={fgColor}
+      bgColor={bgColor}
+      level="M"
+    />
+  );
+}

src/app/components/SkeletonLoader/index.tsx

@@ -2,17 +2,25 @@ import Skeleton from "react-loading-skeleton";
 import { classNames } from "~/app/utils";
 
 export type Props = {
+  circle?: boolean;
   className?: string;
   containerClassName?: string;
+  opaque?: boolean;
 };
 
-function SkeletonLoader({ className, containerClassName }: Props) {
+function SkeletonLoader({
+  className,
+  containerClassName,
+  circle,
+  opaque = true,
+}: Props) {
   return (
     <Skeleton
-      className={classNames(className ?? "", "opacity-20")}
-      containerClassName={containerClassName}
       baseColor="#AAA"
       highlightColor="#FFF"
+      className={classNames(opaque ? "opacity-20" : "", className ?? "")}
+      containerClassName={containerClassName}
+      circle={circle}
     />
   );
 }

src/app/hooks/useLightningAddress.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { useAccount } from "~/app/context/AccountContext";
+import api from "~/common/lib/api";
+
+export const useLightningAddress = () => {
+  const { account } = useAccount();
+  const [lightningAddress, setLightningAddress] = useState("");
+  const [loadingLightningAddress, setLoadingLightningAddress] = useState(false);
+
+  useEffect(() => {
+    // TODO: replace with connector-supported functionality
+    if (account?.connectorType !== "alby") {
+      setLightningAddress("");
+      setLoadingLightningAddress(false);
+      return;
+    }
+    (async () => {
+      setLoadingLightningAddress(true);
+      const response = await api.getAccountInfo();
+      const lightningAddress = response.info.lightning_address;
+      if (lightningAddress) setLightningAddress(lightningAddress);
+      setLoadingLightningAddress(false);
+    })();
+  }, [account?.connectorType]);
+
+  return {
+    loadingLightningAddress,
+    lightningAddress,
+  };
+};

src/app/icons/RedeemIcon.tsx

@@ -0,0 +1,19 @@
+import { SVGProps } from "react";
+
+const RedeemIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="27"
+    height="27"
+    viewBox="0 0 27 27"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M4.6909 6.29089H5.26233H4.6909ZM6.83947 4.14232V4.71375V4.14232ZM6.83947 25.8566V25.2852V25.8566ZM4.6909 23.708H4.11947H4.6909ZM21.8795 23.708H22.4509H21.8795ZM19.7309 25.8566V26.428V25.8566ZM21.8795 6.29089H21.308H21.8795ZM19.7309 4.14232V3.57089V4.14232ZM12.7068 19.5709C12.7068 19.8865 12.9627 20.1423 13.2783 20.1423C13.5939 20.1423 13.8497 19.8865 13.8497 19.5709H12.7068ZM13.8497 9.8566C13.8497 9.54101 13.5939 9.28518 13.2783 9.28518C12.9627 9.28518 12.7068 9.54101 12.7068 9.8566H13.8497ZM17.499 17.2935C17.7247 17.073 17.7289 16.7112 17.5084 16.4854C17.2878 16.2597 16.926 16.2555 16.7003 16.476L17.499 17.2935ZM13.2781 20.6183L12.8788 21.027C13.1008 21.2439 13.4554 21.2439 13.6774 21.027L13.2781 20.6183ZM9.85592 16.476C9.63017 16.2555 9.26839 16.2597 9.04785 16.4854C8.8273 16.7112 8.83152 17.073 9.05726 17.2935L9.85592 16.476ZM25.8566 2.86232H25.2852H25.8566ZM25.8566 6.56518H26.428H25.8566ZM0.71373 6.56518H0.142301H0.71373ZM0.71373 2.86232H1.28516H0.71373ZM2.8623 0.713745V1.28517V0.713745ZM23.708 0.713746V0.142317V0.713746ZM2.8623 8.71375L2.8623 9.28518H2.8623V8.71375ZM23.708 8.71375V8.14232V8.71375ZM21.308 6.29089V23.708H22.4509V6.29089H21.308ZM19.7309 25.2852L6.83947 25.2852V26.428L19.7309 26.428V25.2852ZM5.26232 23.708L5.26233 6.29089H4.11947L4.11947 23.708H5.26232ZM6.83947 4.71375L19.7309 4.71375V3.57089L6.83947 3.57089V4.71375ZM5.26233 6.29089C5.26233 5.41986 5.96844 4.71375 6.83947 4.71375V3.57089C5.33725 3.57089 4.11947 4.78867 4.11947 6.29089H5.26233ZM6.83947 25.2852C5.96843 25.2852 5.26232 24.5791 5.26232 23.708H4.11947C4.11947 25.2102 5.33725 26.428 6.83947 26.428V25.2852ZM21.308 23.708C21.308 24.5791 20.6019 25.2852 19.7309 25.2852V26.428C21.2331 26.428 22.4509 25.2102 22.4509 23.708H21.308ZM22.4509 6.29089C22.4509 4.78868 21.2331 3.57089 19.7309 3.57089V4.71375C20.6019 4.71375 21.308 5.41986 21.308 6.29089H22.4509ZM13.8497 19.5709V9.8566H12.7068V19.5709H13.8497ZM16.7003 16.476L12.8788 20.2095L13.6774 21.027L17.499 17.2935L16.7003 16.476ZM13.6774 20.2095L9.85592 16.476L9.05726 17.2935L12.8788 21.027L13.6774 20.2095ZM25.2852 2.86232V6.56518H26.428V2.86232H25.2852ZM1.28516 6.56518L1.28516 2.86232H0.142302L0.142301 6.56518H1.28516ZM2.8623 1.28517L23.708 1.28517V0.142317L2.8623 0.142317V1.28517ZM4.6909 8.14232H2.8623V9.28518H4.6909V8.14232ZM23.708 8.14232H21.8795V9.28518H23.708V8.14232ZM1.28516 2.86232C1.28516 1.99128 1.99127 1.28517 2.8623 1.28517V0.142317C1.36009 0.142316 0.142302 1.3601 0.142302 2.86232H1.28516ZM0.142301 6.56518C0.142301 8.06739 1.36009 9.28517 2.8623 9.28518L2.8623 8.14232C1.99127 8.14232 1.28516 7.43621 1.28516 6.56518H0.142301ZM25.2852 6.56518C25.2852 7.43621 24.5791 8.14232 23.708 8.14232V9.28518C25.2102 9.28518 26.428 8.06739 26.428 6.56518H25.2852ZM26.428 2.86232C26.428 1.3601 25.2102 0.142317 23.708 0.142317V1.28517C24.579 1.28517 25.2852 1.99129 25.2852 2.86232H26.428Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default RedeemIcon;

src/app/router/Options/Options.tsx

@@ -34,6 +34,7 @@ import NostrSetup from "~/app/screens/Accounts/NostrSetup/NostrSetup";
 import Discover from "~/app/screens/Discover";
 import LNURLRedeem from "~/app/screens/LNURLRedeem";
 import OnChainReceive from "~/app/screens/OnChainReceive";
+import ReceiveInvoice from "~/app/screens/ReceiveInvoice";
 import ScanQRCode from "~/app/screens/ScanQRCode";
 import SendToBitcoinAddress from "~/app/screens/SendToBitcoinAddress";
 import ChooseConnector from "~/app/screens/connectors/ChooseConnector";
@@ -72,6 +73,7 @@ function Options() {
               element={<SendToBitcoinAddress />}
             />
             <Route path="receive" element={<Receive />} />
+            <Route path="receive/invoice" element={<ReceiveInvoice />} />
             <Route path="onChainReceive" element={<OnChainReceive />} />
             <Route path="wallet" element={<DefaultView />} />
             <Route path="transactions">

src/app/router/Popup/Popup.tsx

@@ -10,13 +10,13 @@ import Receive from "@screens/Receive";
 import Send from "@screens/Send";
 import Unlock from "@screens/Unlock";
 import { HashRouter, Outlet, Route, Routes } from "react-router-dom";
+import Toaster from "~/app/components/Toast/Toaster";
 import Providers from "~/app/context/Providers";
 import LNURLRedeem from "~/app/screens/LNURLRedeem";
 import OnChainReceive from "~/app/screens/OnChainReceive";
+import ReceiveInvoice from "~/app/screens/ReceiveInvoice";
 import ScanQRCode from "~/app/screens/ScanQRCode";
 import SendToBitcoinAddress from "~/app/screens/SendToBitcoinAddress";
-
-import Toaster from "~/app/components/Toast/Toaster";
 import RequireAuth from "../RequireAuth";
 
 function Popup() {
@@ -37,6 +37,7 @@ function Popup() {
             <Route path="scanQRCode" element={<ScanQRCode />} />
             <Route path="receive" element={<Receive />} />
             <Route path="onChainReceive" element={<OnChainReceive />} />
+            <Route path="receive/invoice" element={<ReceiveInvoice />} />
             <Route path="lnurlPay" element={<LNURLPay />} />
             <Route path="lnurlChannel" element={<LNURLChannel />} />
             <Route path="lnurlWithdraw" element={<LNURLWithdraw />} />

src/app/screens/Accounts/Detail/index.tsx

@@ -9,14 +9,14 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import type { FormEvent } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import QRCode from "react-qr-code";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import Alert from "~/app/components/Alert";
 import Badge from "~/app/components/Badge";
 import Hyperlink from "~/app/components/Hyperlink";
 import InputCopyButton from "~/app/components/InputCopyButton";
 import MenuDivider from "~/app/components/Menu/MenuDivider";
 import Modal from "~/app/components/Modal";
+import QRCode from "~/app/components/QRCode";
 import toast from "~/app/components/Toast";
 import Select from "~/app/components/form/Select";
 import Toggle from "~/app/components/form/Toggle";
@@ -286,7 +286,6 @@ function AccountDetail() {
                           <p>{t("export.scan_qr")}</p>
                           <QRCode
                             value={`lndhub://${lndHubData.login}:${lndHubData.password}@${lndHubData.url}/`}
-                            level="M"
                             size={256}
                           />
                           <div className="w-full">

src/app/screens/ConfirmPayment/index.tsx

@@ -198,7 +198,7 @@ function ConfirmPayment() {
                   })
             }
           />
-          <div className="my-4">
+          <div className="mt-4">
             <Button
               onClick={close}
               label={tCommon("actions.close")}

src/app/screens/Home/DefaultView/index.test.tsx

@@ -1,18 +1,32 @@
-import { AccountsProvider } from "../../../context/AccountsContext";
-import DefaultView from "./index";
 import { render, screen } from "@testing-library/react";
 import { I18nextProvider } from "react-i18next";
 import { MemoryRouter } from "react-router-dom";
 import { settingsFixture as mockSettings } from "~/../tests/fixtures/settings";
 import i18n from "~/../tests/unit/helpers/i18n";
 import { BatteryFixture } from "~/fixtures/battery";
+import { AccountsProvider } from "../../../context/AccountsContext";
+import DefaultView from "./index";
 
 jest.mock("~/common/lib/api", () => ({
   getPayments: () => {
     return {
       payments: [],
     };
   },
+  getAccountInfo: () => {
+    return {
+      connectorType: "alby",
+      balance: { balance: 0, currency: "BTC" },
+      currentAccountId: "1234",
+      info: {
+        alias: "🐝 getalby.com",
+        pubkey: undefined,
+        lightning_address: "[email protected]",
+      },
+      name: "hello",
+      avatarUrl: undefined,
+    };
+  },
   getBlocklist: () => {
     return {};
   },

src/app/screens/Home/DefaultView/index.tsx

@@ -13,9 +13,11 @@ import { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import BalanceBox from "~/app/components/BalanceBox";
+import SkeletonLoader from "~/app/components/SkeletonLoader";
 import toast from "~/app/components/Toast";
 import { useAccount } from "~/app/context/AccountContext";
 import { useInvoices } from "~/app/hooks/useInvoices";
+import { useLightningAddress } from "~/app/hooks/useLightningAddress";
 import { useTransactions } from "~/app/hooks/useTransactions";
 import { PublisherLnData } from "~/app/screens/Home/PublisherLnData";
 import api from "~/common/lib/api";
@@ -35,7 +37,7 @@ const DefaultView: FC<Props> = (props) => {
   const { t } = useTranslation("translation", { keyPrefix: "home" });
   const { t: tCommon } = useTranslation("common");
   const { t: tComponents } = useTranslation("components");
-
+  const { loadingLightningAddress, lightningAddress } = useLightningAddress();
   const navigate = useNavigate();
 
   const { account, balancesDecorated, accountLoading } = useAccount();
@@ -115,9 +117,30 @@ const DefaultView: FC<Props> = (props) => {
         <PublisherLnData lnData={props.lnDataFromCurrentTab[0]} />
       )}
       <div className="p-4">
-        <div className="flex space-x-4 mb-4">
-          <BalanceBox />
-        </div>
+        <BalanceBox />
+        {(loadingLightningAddress || lightningAddress) && (
+          <div className="flex justify-center">
+            <a
+              className="cursor-pointer flex flex-row items-center mb-6 px-3 py-1 bg-white dark:bg-surface-01dp border border-gray-200 dark:border-neutral-700 text-gray-800 dark:text-white rounded-full text-xs font-medium hover:border-primary hover:bg-yellow-50 dark:hover:border-primary dark:hover:dark:bg-surface-16dp transition-all duration-250 select-none"
+              onClick={() => {
+                navigator.clipboard.writeText(lightningAddress);
+                toast.success(tCommon("actions.copied_to_clipboard"));
+              }}
+            >
+              {loadingLightningAddress && (
+                <>
+                  ⚡️&nbsp;
+                  <SkeletonLoader className="w-32" />
+                </>
+              )}
+              {!loadingLightningAddress && (
+                <>
+                  <span>⚡️ {lightningAddress}</span>
+                </>
+              )}
+            </a>
+          </div>
+        )}
         <div className="flex mb-6 lg:mb-12 space-x-4">
           <Button
             fullWidth