Merge branch 'master' into depfu/batch_dev/yarn/2023-07-15

package.json

@@ -40,12 +40,12 @@
     "@lightninglabs/lnc-web": "^0.2.4-alpha",
     "@noble/curves": "^1.1.0",
     "@noble/secp256k1": "^2.0.0",
-    "@scure/bip32": "^1.3.0",
-    "@scure/bip39": "^1.2.0",
+    "@scure/bip32": "^1.3.1",
+    "@scure/bip39": "^1.2.1",
     "@scure/btc-signer": "^0.5.1",
     "@tailwindcss/forms": "^0.5.3",
     "@vespaiach/axios-fetch-adapter": "^0.3.0",
-    "alby-js-sdk": "^2.0.0",
+    "alby-js-sdk": "^2.1.0",
     "axios": "^0.27.2",
     "bech32": "^2.0.0",
     "bolt11": "^1.4.1",
@@ -71,7 +71,7 @@
     "react-router-dom": "^6.13.0",
     "react-toastify": "^9.1.3",
     "stream": "^0.0.2",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.3.3",
     "uuid": "^9.0.0",
     "webextension-polyfill": "^0.10.0",
     "zustand": "^3.7.2"

src/app/components/form/DualCurrencyField/rangeLabel.tsx

@@ -1,18 +1,27 @@
 import { useTranslation } from "react-i18next";
+import { useSettings } from "~/app/context/SettingsContext";
 
 type RangeLabelProps = {
   min?: number | string | undefined;
   max?: number | string | undefined;
 };
 export function RangeLabel({ min, max }: RangeLabelProps) {
   const { t } = useTranslation("common");
+  const { getFormattedNumber } = useSettings();
 
   if (min && max) {
-    return <>{t("range.between", { min, max })}</>;
+    return (
+      <>
+        {t("range.between", {
+          min: getFormattedNumber(min),
+          max: getFormattedNumber(max),
+        })}
+      </>
+    );
   } else if (min) {
-    return <>{t("range.greaterOrEqual", { min })}</>;
+    return <>{t("range.greaterOrEqual", { min: getFormattedNumber(min) })}</>;
   } else if (max) {
-    return <>{t("range.lessThanOrEqual", { max })}</>;
+    return <>{t("range.lessThanOrEqual", { max: getFormattedNumber(max) })}</>;
   } else {
     return null;
   }

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

@@ -188,7 +188,7 @@ function AccountDetail() {
       />
       <div className="border-b border-gray-200 dark:border-neutral-500">
         <div className="flex-col justify-center p-4 flex items-center bg-white dark:bg-surface-02dp">
-          <Avatar name={account.id} size={96} />
+          <Avatar name={account.id} size={96} url={auth.account?.avatarUrl} />
           <div className="flex flex-col overflow-hidden w-full text-center">
             <h2
               title={account.name}

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

@@ -14,6 +14,7 @@ import Button from "~/app/components/Button";
 import { ContentBox } from "~/app/components/ContentBox";
 import InputCopyButton from "~/app/components/InputCopyButton";
 import TextField from "~/app/components/form/TextField";
+import { useAccount } from "~/app/context/AccountContext";
 import api, { GetAccountRes } from "~/common/lib/api";
 import { default as nostr, default as nostrlib } from "~/common/lib/nostr";
 
@@ -22,6 +23,7 @@ function NostrSettings() {
   const { t } = useTranslation("translation", {
     keyPrefix: "accounts.account_view",
   });
+  const auth = useAccount();
   const navigate = useNavigate();
   const [hasMnemonic, setHasMnemonic] = useState(false);
   const [currentPrivateKey, setCurrentPrivateKey] = useState("");
@@ -147,7 +149,11 @@ function NostrSettings() {
                 {t("nostr.settings.title")}
               </h1>
               <div className="flex gap-4 my-4 items-center">
-                <Avatar name={account.id} size={32} />
+                <Avatar
+                  name={account.id}
+                  size={32}
+                  url={auth.account?.avatarUrl}
+                />
                 <p className="text-gray-500 dark:text-neutral-500">
                   {account.name}
                 </p>

src/app/screens/Accounts/index.tsx

@@ -43,7 +43,11 @@ function AccountsScreen() {
                 >
                   <td className="px-6 py-4 whitespace-nowrap">
                     <div className="flex items-center">
-                      <Avatar name={account.id} size={48} />
+                      <Avatar
+                        name={account.id}
+                        size={48}
+                        url={account.avatarUrl}
+                      />
 
                       <div className="ml-4">
                         <h3 className="font-bold text-gray-900 dark:text-white break-all whitespace-normal max-w-xs md:max-w-lg xl:max-w-2xl">

src/app/screens/Receive/index.test.tsx

@@ -14,6 +14,9 @@ jest.mock("~/common/lib/api", () => {
     getSettings: jest.fn(() => Promise.resolve(mockSettings)),
     getCurrencyRate: jest.fn(() => Promise.resolve({ rate: 11 })),
     makeInvoice: jest.fn(),
+    getAccountInfo: jest.fn(() =>
+      Promise.resolve({ info: { lightning_address: "[email protected]" } })
+    ),
   };
 });
 

src/app/screens/Receive/index.tsx

@@ -41,14 +41,19 @@ function Receive() {
     description: "",
     expiration: "",
   });
-  const [loading, setLoading] = useState(false);
+  const [loadingInvoice, setLoadingInvoice] = useState(false);
+  const [loadingLightningAddress, setLoadingLightningAddress] = useState(false);
   const [invoice, setInvoice] = useState<{
     paymentRequest: string;
     rHash: string;
   } | null>();
-  const [copyLabel, setCopyLabel] = useState(
+  const [copyInvoiceLabel, setCopyInvoiceLabel] = useState(
     tCommon("actions.copy_invoice") as string
   );
+  const [copyLightningAddressLabel, setCopyLightningAddressLabel] = useState(
+    t("actions.copy_lightning_address") as string
+  );
+  const [lightningAddress, setLightningAddress] = useState("");
   const [paid, setPaid] = useState(false);
   const [pollingForPayment, setPollingForPayment] = useState(false);
   const mounted = useRef(false);
@@ -119,7 +124,7 @@ function Receive() {
 
   async function createInvoice() {
     try {
-      setLoading(true);
+      setLoadingInvoice(true);
       const response = await api.makeInvoice({
         amount: formData.amount,
         memo: formData.description,
@@ -131,7 +136,7 @@ function Receive() {
         toast.error(e.message);
       }
     } finally {
-      setLoading(false);
+      setLoadingInvoice(false);
     }
   }
 
@@ -140,6 +145,18 @@ function Receive() {
     createInvoice();
   }
 
+  async function getLightningAddress() {
+    setLoadingLightningAddress(true);
+    const response = await api.getAccountInfo();
+    const lightningAddress = response.info.lightning_address;
+    if (lightningAddress) setLightningAddress(lightningAddress);
+    setLoadingLightningAddress(false);
+  }
+
+  useEffect(() => {
+    getLightningAddress();
+  }, []);
+
   function renderInvoice() {
     if (!invoice) return null;
     return (
@@ -178,9 +195,9 @@ function Receive() {
                 onClick={async () => {
                   try {
                     navigator.clipboard.writeText(invoice.paymentRequest);
-                    setCopyLabel(tCommon("copied"));
+                    setCopyInvoiceLabel(tCommon("copied"));
                     setTimeout(() => {
-                      setCopyLabel(tCommon("actions.copy_invoice"));
+                      setCopyInvoiceLabel(tCommon("actions.copy_invoice"));
                     }, 1000);
                   } catch (e) {
                     if (e instanceof Error) {
@@ -189,7 +206,7 @@ function Receive() {
                   }
                 }}
                 icon={<CopyIcon className="w-6 h-6 mr-2" />}
-                label={copyLabel}
+                label={copyInvoiceLabel}
               />
             </div>
 
@@ -243,7 +260,7 @@ function Receive() {
       ) : (
         <div className="pt-4">
           <form onSubmit={handleSubmit}>
-            <fieldset disabled={loading}>
+            <fieldset disabled={loadingInvoice}>
               <Container justifyBetween maxWidth="sm">
                 <div className="py-4">
                   <div className="mb-4">
@@ -267,22 +284,22 @@ function Receive() {
                     />
                   </div>
                 </div>
-                <div className="mb-4">
+                <div>
                   <Button
                     type="submit"
                     label={t("actions.create_invoice")}
                     fullWidth
                     primary
-                    loading={loading}
-                    disabled={loading}
+                    loading={loadingInvoice}
+                    disabled={loadingInvoice}
                   />
                 </div>
               </Container>
             </fieldset>
           </form>
           <div>
             <Container justifyBetween maxWidth="sm">
-              <div className="relative flex  items-center mb-8">
+              <div className="relative flex  items-center mb-4">
                 <div className="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
                 <span className="flex-shrink mx-4  text-gray-500 dark:text-gray-400 fw-bold">
                   {tCommon("or")}
@@ -300,16 +317,47 @@ function Receive() {
                 />
               </div>
               {isAlbyUser && (
-                <div className="mb-4">
-                  <Button
-                    type="button"
-                    label={t("receive_via_bitcoin_address")}
-                    fullWidth
-                    onClick={() => {
-                      navigate("/onChainReceive");
-                    }}
-                  />
-                </div>
+                <>
+                  <div className="mb-4">
+                    <Button
+                      type="button"
+                      label={copyLightningAddressLabel}
+                      disabled={loadingLightningAddress}
+                      fullWidth
+                      onClick={async () => {
+                        try {
+                          if (!lightningAddress) {
+                            throw new Error(
+                              "User does not have a lightning address"
+                            );
+                          }
+                          navigator.clipboard.writeText(lightningAddress);
+                          setCopyLightningAddressLabel(tCommon("copied"));
+                          setTimeout(() => {
+                            setCopyLightningAddressLabel(
+                              t("actions.copy_lightning_address")
+                            );
+                          }, 1000);
+                        } catch (e) {
+                          if (e instanceof Error) {
+                            toast.error(e.message);
+                          }
+                        }
+                      }}
+                      icon={<CopyIcon className="w-6 h-6 mr-2" />}
+                    />
+                  </div>
+                  <div className="mb-4">
+                    <Button
+                      type="button"
+                      label={t("receive_via_bitcoin_address")}
+                      fullWidth
+                      onClick={() => {
+                        navigate("/onChainReceive");
+                      }}
+                    />
+                  </div>
+                </>
               )}
             </Container>
           </div>

src/app/screens/connectors/ConnectAlby/index.tsx

@@ -1,3 +1,4 @@
+import { GetAccountInformationResponse } from "alby-js-sdk/dist/types";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -7,7 +8,6 @@ import { getAlbyAccountName } from "~/app/utils";
 import api from "~/common/lib/api";
 import msg from "~/common/lib/msg";
 import { WebLNNode } from "~/extension/background-script/connectors/connector.interface";
-import { AlbyAccountInformation } from "~/types";
 
 export default function ConnectAlby() {
   const [loading, setLoading] = useState(false);
@@ -33,7 +33,7 @@ export default function ConnectAlby() {
         }
 
         const accountInfo = validation.info.data as WebLNNode &
-          AlbyAccountInformation;
+          GetAccountInformationResponse;
 
         const account = {
           ...initialAccount,

src/app/utils/index.ts

@@ -1,6 +1,7 @@
+import { GetAccountInformationResponse } from "alby-js-sdk/dist/types";
 import { useSettings } from "~/app/context/SettingsContext";
 import api from "~/common/lib/api";
-import { AlbyAccountInformation, BrowserType, Theme } from "~/types";
+import { BrowserType, Theme } from "~/types";
 
 export function classNames(...classes: (string | boolean)[]) {
   return classes.filter(Boolean).join(" ");
@@ -57,7 +58,7 @@ export function isAlbyOAuthAccount(connectorType = "") {
   return connectorType === "alby";
 }
 
-export function getAlbyAccountName(info: AlbyAccountInformation) {
+export function getAlbyAccountName(info: GetAccountInformationResponse) {
   // legacy accounts may not have either an email address or lightning address
   return info.email || info.lightning_address || "getalby.com";
 }

src/common/lib/api.ts

@@ -36,7 +36,7 @@ export interface AccountInfoRes {
   connectorType: ConnectorType;
   balance: { balance: string | number; currency: ACCOUNT_CURRENCIES };
   currentAccountId: string;
-  info: { alias: string; pubkey?: string };
+  info: { alias: string; pubkey?: string; lightning_address?: string };
   name: string;
   avatarUrl?: string;
 }

src/extension/background-script/actions/ln/sendPayment.ts

@@ -38,9 +38,8 @@ export default async function sendPayment(
 
     if (typeof e === "string") {
       errorMessage = e;
-    } else if ((e as { message: string }).message) {
-      // TODO: change to e as Error once alby-js-sdk is updated
-      errorMessage = (e as { message: string }).message;
+    } else if ((e as Error).message) {
+      errorMessage = (e as Error).message;
     } else {
       errorMessage = "Something went wrong";
     }