feat: add receive via bitcoin address button

src/app/router/Options/Options.tsx

@@ -25,6 +25,7 @@ import Providers from "~/app/context/Providers";
 import RequireAuth from "~/app/router/RequireAuth";
 import { getConnectorRoutes, renderRoutes } from "~/app/router/connectorRoutes";
 import Discover from "~/app/screens/Discover";
+import OnChainReceive from "~/app/screens/OnChainReceive";
 import AlbyWalletCreate from "~/app/screens/connectors/AlbyWallet/create";
 import AlbyWalletLogin from "~/app/screens/connectors/AlbyWallet/login";
 import ChooseConnector from "~/app/screens/connectors/ChooseConnector";
@@ -66,6 +67,7 @@ function Options() {
             <Route path="confirmPayment" element={<ConfirmPayment />} />
             <Route path="keysend" element={<Keysend />} />
             <Route path="receive" element={<Receive />} />
+            <Route path="onChainReceive" element={<OnChainReceive />} />
             <Route path="wallet" element={<DefaultView />} />
             <Route path="transactions">
               <Route

src/app/router/Popup/Popup.tsx

@@ -12,6 +12,7 @@ import Unlock from "@screens/Unlock";
 import { HashRouter, Outlet, Route, Routes } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import Providers from "~/app/context/Providers";
+import OnChainReceive from "~/app/screens/OnChainReceive";
 
 import RequireAuth from "../RequireAuth";
 
@@ -31,6 +32,7 @@ function Popup() {
             <Route index element={<Home />} />
             <Route path="send" element={<Send />} />
             <Route path="receive" element={<Receive />} />
+            <Route path="onChainReceive" element={<OnChainReceive />} />
             <Route path="lnurlPay" element={<LNURLPay />} />
             <Route path="lnurlChannel" element={<LNURLChannel />} />
             <Route path="lnurlWithdraw" element={<LNURLWithdraw />} />

src/app/screens/OnChainReceive/index.tsx

@@ -0,0 +1,66 @@
+import { CaretLeftIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import Header from "@components/Header";
+import { Trans, useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import Button from "~/app/components/Button";
+import Container from "~/app/components/Container";
+import IconButton from "~/app/components/IconButton";
+
+export default function OnChainReceive() {
+  const navigate = useNavigate();
+  const { t } = useTranslation("translation", {
+    keyPrefix: "on_chain",
+  });
+
+  return (
+    <div className=" flex flex-col overflow-y-auto no-scrollbar h-full">
+      <Header
+        title={t("title")}
+        headerLeft={
+          <IconButton
+            onClick={() => {
+              navigate(-1);
+            }}
+            icon={<CaretLeftIcon className="w-4 h-4" />}
+          />
+        }
+      />
+      <div className="mt-8 h-full">
+        <Container justifyBetween maxWidth="sm">
+          <div className="text-center dark:text-neutral-200 h-full flex flex-col justify-center items-center">
+            <div className="mb-8">
+              <p>
+                <Trans
+                  i18nKey={"instructions1"}
+                  t={t}
+                  components={[<strong key="instruction1-strong"></strong>]}
+                />
+              </p>
+            </div>
+
+            <div className="mb-8">
+              <p>
+                <Trans
+                  i18nKey={"instructions2"}
+                  t={t}
+                  components={[<strong key="instruction2-strong"></strong>]}
+                />
+              </p>
+            </div>
+          </div>
+          <div className="mb-4">
+            <Button
+              type="submit"
+              label={t("go")}
+              fullWidth
+              primary
+              onClick={() =>
+                window.open("https://getalby.com/node/receive", "_blank")
+              }
+            />
+          </div>
+        </Container>
+      </div>
+    </div>
+  );
+}

src/app/screens/Receive/index.tsx

@@ -18,6 +18,7 @@ import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import { useAccount } from "~/app/context/AccountContext";
 import { useSettings } from "~/app/context/SettingsContext";
+import { isAlbyAccount } from "~/app/utils";
 import api from "~/common/lib/api";
 import msg from "~/common/lib/msg";
 import { poll } from "~/common/utils/helpers";
@@ -51,6 +52,7 @@ function Receive() {
   const [paid, setPaid] = useState(false);
   const [pollingForPayment, setPollingForPayment] = useState(false);
   const mounted = useRef(false);
+  const isAlbyUser = isAlbyAccount(auth.account?.alias);
 
   useEffect(() => {
     mounted.current = true;
@@ -237,44 +239,70 @@ function Receive() {
       {invoice ? (
         <Container maxWidth="sm">{renderInvoice()}</Container>
       ) : (
-        <form onSubmit={handleSubmit} className="h-full">
-          <fieldset className="h-full" disabled={loading}>
-            <Container justifyBetween maxWidth="sm">
-              <div className="py-4">
+        <div className="pt-4">
+          <form onSubmit={handleSubmit}>
+            <fieldset disabled={loading}>
+              <Container justifyBetween maxWidth="sm">
+                <div className="py-4">
+                  <div className="mb-4">
+                    <DualCurrencyField
+                      id="amount"
+                      min={0}
+                      label={t("amount.label")}
+                      placeholder={t("amount.placeholder")}
+                      fiatValue={fiatAmount}
+                      onChange={handleChange}
+                      autoFocus
+                    />
+                  </div>
+
+                  <div className="mb-4">
+                    <TextField
+                      id="description"
+                      label={t("description.label")}
+                      placeholder={t("description.placeholder")}
+                      onChange={handleChange}
+                    />
+                  </div>
+                </div>
                 <div className="mb-4">
-                  <DualCurrencyField
-                    id="amount"
-                    min={0}
-                    label={t("amount.label")}
-                    placeholder={t("amount.placeholder")}
-                    fiatValue={fiatAmount}
-                    onChange={handleChange}
-                    autoFocus
+                  <Button
+                    type="submit"
+                    label={t("actions.create_invoice")}
+                    fullWidth
+                    primary
+                    loading={loading}
+                    disabled={loading}
                   />
                 </div>
+              </Container>
+            </fieldset>
+          </form>
+          {isAlbyUser && (
+            <div>
+              <Container justifyBetween maxWidth="sm">
+                <div className="relative flex  items-center mb-8">
+                  <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")}
+                  </span>
+                  <div className="flex-grow border-t  border-gray-300 dark:border-gray-700"></div>
+                </div>
 
                 <div className="mb-4">
-                  <TextField
-                    id="description"
-                    label={t("description.label")}
-                    placeholder={t("description.placeholder")}
-                    onChange={handleChange}
+                  <Button
+                    type="button"
+                    label={t("receive_via_bitcoin_address")}
+                    fullWidth
+                    onClick={() => {
+                      navigate("/onChainReceive");
+                    }}
                   />
                 </div>
-              </div>
-              <div className="mb-4">
-                <Button
-                  type="submit"
-                  label={t("actions.create_invoice")}
-                  fullWidth
-                  primary
-                  loading={loading}
-                  disabled={loading}
-                />
-              </div>
-            </Container>
-          </fieldset>
-        </form>
+              </Container>
+            </div>
+          )}
+        </div>
       )}
     </div>
   );

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

@@ -22,6 +22,7 @@ export default function ConnectLnd() {
   const { t } = useTranslation("translation", {
     keyPrefix: "choose_connector.lnd",
   });
+  const { t: tCommon } = useTranslation("common");
   const [formData, setFormData] = useState(initialFormData);
   const [isDragging, setDragging] = useState(false);
   const hiddenFileInput = useRef<HTMLInputElement>(null);
@@ -180,7 +181,7 @@ export default function ConnectLnd() {
             required
           />
         </div>
-        <p className="text-center my-6 dark:text-white">{t("or")}</p>
+        <p className="text-center my-6 dark:text-white">{tCommon("or")}</p>
         <div
           className={`cursor-pointer flex flex-col items-center dark:bg-surface-02dp p-4 py-3 border-dashed border-2 border-gray-300 bg-gray-50 rounded-md text-center transition duration-200 ${
             isDragging ? "border-blue-600 bg-blue-50" : ""

src/i18n/locales/en/translation.json

@@ -110,7 +110,6 @@
         "macaroon": {
           "label": "Macaroon (HEX format)"
         },
-        "or": "OR",
         "drag_and_drop": "Drag and drop your macaroon here or <0>browse</0>",
         "errors": {
           "connection_failed": "Connection failed. Are your LND credentials correct?"
@@ -652,7 +651,14 @@
       "payment": {
         "waiting": "waiting for payment...",
         "status": "Check payment status"
-      }
+      },
+      "receive_via_bitcoin_address": "Receive via bitcoin address"
+    },
+    "on_chain": {
+      "title": "Receive via bitcoin address",
+      "instructions1": "To receive bitcoin via a bitcoin address, login to your <0>Alby Account</0> on getalby.com",
+      "instructions2": "You can find your bitcoin address on the <0>Receive</0> page.",
+      "go": "Go to your Alby account →"
     },
     "discover": {
       "title": "Explore the Lightning ⚡️ Ecosystem",
@@ -818,6 +824,7 @@
     "message": "Message",
     "help": "Help",
     "balance": "Balance",
+    "or": "or",
     "actions": {
       "back": "Back",
       "delete": "Delete",