feat: swap fallbacks (#2877)

* feat: swap fallbacks

* fix: update links

src/app/screens/Send/index.tsx

@@ -10,12 +10,7 @@ import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import QrcodeAdornment from "~/app/components/QrcodeAdornment";
 import toast from "~/app/components/Toast";
-import { useAccount } from "~/app/context/AccountContext";
-import {
-  extractLightningTagData,
-  isAlbyOAuthAccount,
-  isBitcoinAddress,
-} from "~/app/utils";
+import { extractLightningTagData, isBitcoinAddress } from "~/app/utils";
 import lnurlLib from "~/common/lib/lnurl";
 import { isLNURLDetailsError } from "~/common/utils/typeHelpers";
 
@@ -27,10 +22,6 @@ function Send() {
   const [invoice, setInvoice] = useState(location.state?.decodedQR || "");
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
-  const auth = useAccount();
-  const hint = !isAlbyOAuthAccount(auth.account?.connectorType)
-    ? t("input.hint")
-    : t("input.hint_with_bitcoin_address");
 
   function isPubKey(str: string) {
     return str.length == 66 && (str.startsWith("02") || str.startsWith("03"));
@@ -100,10 +91,7 @@ function Send() {
             },
           },
         });
-      } else if (
-        isAlbyOAuthAccount(auth.account?.connectorType) &&
-        isBitcoinAddress(invoice)
-      ) {
+      } else if (isBitcoinAddress(invoice)) {
         navigate("/sendToBitcoinAddress", {
           state: { args: { bitcoinAddress: invoice } },
         });
@@ -144,7 +132,7 @@ function Send() {
             <TextField
               id="invoice"
               label={t("input.label")}
-              hint={hint}
+              hint={t("input.hint_with_bitcoin_address")}
               value={invoice}
               disabled={loading}
               autoFocus

src/app/screens/SendToBitcoinAddress/index.tsx

@@ -91,7 +91,7 @@ function SendToBitcoinAddress() {
         }
       } catch (e) {
         console.error(e);
-        if (e instanceof Error) toast.error(t("service_unavailable"));
+        setStep("unavailable");
       } finally {
         setFeesLoading(false);
       }
@@ -358,7 +358,6 @@ function SendToBitcoinAddress() {
             </Container>
           </form>
         )}
-
         {step == "success" && (
           <Container justifyBetween maxWidth="sm">
             <ResultCard
@@ -392,13 +391,82 @@ function SendToBitcoinAddress() {
             </div>
           </Container>
         )}
+        {step == "unavailable" && (
+          <Container justifyBetween maxWidth="sm">
+            <Alert type="info">
+              Built-in swaps are currently unavailable. You can use one of the
+              following swap providers in the meantime:
+            </Alert>
+            <ExchangeLink
+              href="https://boltz.exchange/"
+              imageSrc="/assets/icons/swap/boltz.png"
+              title="Boltz Exchange"
+              description="Privacy first, non-Custodial bitcoin exchange"
+            />
+            <ExchangeLink
+              href="https://swap.deezy.io/"
+              imageSrc="/assets/icons/swap/deezy.svg"
+              title="Deezy"
+              description="Swap instantly between lightning and on-chain bitcoin"
+            />
+            <ExchangeLink
+              href="https://fixedfloat.com/BTCLN/BTC/?ref=qnnjvywb"
+              imageSrc="/assets/icons/swap/fixedfloat.png"
+              title="FixedFloat"
+              description="Instant cryptocurrency exchange"
+            />
+            <ExchangeLink
+              href="https://sideshift.ai/ln/btc"
+              imageSrc="/assets/icons/swap/sideshift.svg"
+              title="sideshift.ai"
+              description="No sign-up crypto exchange"
+            />
+          </Container>
+        )}
       </div>
     </div>
   );
 }
 
 export default SendToBitcoinAddress;
 
+// Define the types for the component props
+interface ExchangeLinkProps {
+  href: string;
+  imageSrc: string;
+  title: string;
+  description: string;
+}
+
+const ExchangeLink: React.FC<ExchangeLinkProps> = ({
+  href,
+  imageSrc,
+  title,
+  description,
+}) => {
+  return (
+    <a key={href} href={href} target="_blank" rel="noreferrer" className="mt-4">
+      <div className="bg-white dark:bg-surface-01dp shadow flex p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-neutral-800 cursor-pointer w-full">
+        <div className="flex space-x-3 items-center ">
+          <img
+            src={imageSrc}
+            alt="image"
+            className="h-14 w-14 rounded-lg object-cover"
+          />
+          <div>
+            <h2 className="font-medium font-serif text-base dark:text-white">
+              {title}
+            </h2>
+            <p className="font-serif text-sm font-normal text-gray-500 dark:text-neutral-400 line-clamp-3">
+              {description}
+            </p>
+          </div>
+        </div>
+      </div>
+    </a>
+  );
+};
+
 type BitcoinAddressProps = {
   address: string;
 };