Merge pull request #2565 from getAlby/cpy-lightning-addr-button

feat: copy lightning address button in receive screen
getAlby · Jul 18, 2023 · 72a44a3 · 72a44a3
2 parents 3d1fd82 + 37b6d9b
commit 72a44a3
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 24 deletions.
diff --git a/src/app/screens/Receive/index.test.tsx b/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]" } })
+    ),
   };
 });
 

diff --git a/src/app/screens/Receive/index.tsx b/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>

diff --git a/src/common/lib/api.ts b/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;
 }

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -684,7 +684,8 @@
     "receive": {
       "title": "Receive",
       "actions": {
-        "create_invoice": "Create Invoice"
+        "create_invoice": "Create Invoice",
+        "copy_lightning_address": "Copy Lightning Address"
       },
       "amount": {
         "label": "Amount",