feat: onchain swaps (#2514)

* feat: ui for onchain payments

* feat: first working draft with api mocks

* fix: ui updates

* fix: api location update

* fix: translations

* fix: amount validation

* chore: use new swap apis in alby-js-sdk

* fix: add testnet addresses

* fix: pay

* fix: todos

* fix: todos

* fix: ts

* chore: update @getalby/sdk

* fix: update imports

* fix: alby sdk dependency

* fix: address display in send to bitcoin address screen

* chore: only display total fee on swap form

* fix: remove extra space between swap info and confirmation button

* chore: update comments

* chore: add error logs

* fix: add missing target to hyperlink

* chore: add getSwapInfo and createSwap as optional connector methods

* fix: swap confirmation screen spacing issues

* fix: layout & spacing for prompts

* fix: spacing

* fix: minor ui improvements

* fix: add noopener

* fix: add message to error message

* fix: package downgrade

* fix: lint errors

* fix: yarn lock

* fix: packages

* Revert "fix: lint errors"

This reverts commit 7494a47.

* fix: reset formatting for untouched files

* fix: reset formatting for untouched files

* fix: add support email, fixes

* fix: remove info icon from alert component

* fix: disable review button if loading swaps failed

* fix: add better error message if service unavailable

---------

Co-authored-by: Roland Bewick <[email protected]>

package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@bitcoin-design/bitcoin-icons-react": "^0.1.9",
+    "@getalby/sdk": "^2.2.3",
     "@headlessui/react": "^1.7.16",
     "@lightninglabs/lnc-web": "^0.2.4-alpha",
     "@noble/curves": "^1.1.0",
@@ -45,7 +46,6 @@
     "@scure/btc-signer": "^0.5.1",
     "@tailwindcss/forms": "^0.5.4",
     "@vespaiach/axios-fetch-adapter": "^0.3.0",
-    "alby-js-sdk": "^2.1.2",
     "axios": "^0.27.2",
     "bech32": "^2.0.0",
     "bolt11": "^1.4.1",

src/app/components/Alert/index.tsx

@@ -13,10 +13,10 @@ export default function Alert({ type, children }: Props) {
         type == "warn" &&
           "text-orange-700 bg-orange-50 dark:text-orange-200 dark:bg-orange-900",
         type == "info" &&
-          "text-blue-700 bg-blue-50 dark:text-blue-200 dark:bg-blue-900"
+          "text-blue-700 bg-blue-50 dark:text-blue-300 dark:bg-blue-900"
       )}
     >
-      <p>{children}</p>
+      {children}
     </div>
   );
 }

src/app/components/ConfirmOrCancel/index.tsx

@@ -1,5 +1,5 @@
-import { useRef, useEffect } from "react";
 import type { MouseEventHandler } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import Button from "~/app/components/Button";
 import i18n from "~/i18n/i18nConfig";
@@ -29,25 +29,23 @@ export default function ConfirmOrCancel({
   }, [isFocused]);
 
   return (
-    <div className="pt-2 pb-4">
-      <div className="flex flex-row justify-between">
-        <Button
-          onClick={onCancel}
-          label={tCommon("actions.cancel")}
-          halfWidth
-          disabled={loading}
-        />
-        <Button
-          type="submit"
-          ref={buttonRef}
-          onClick={onConfirm}
-          label={label}
-          primary
-          disabled={disabled}
-          loading={loading}
-          halfWidth
-        />
-      </div>
+    <div className="flex flex-row justify-between">
+      <Button
+        onClick={onCancel}
+        label={tCommon("actions.cancel")}
+        halfWidth
+        disabled={loading}
+      />
+      <Button
+        type="submit"
+        ref={buttonRef}
+        onClick={onConfirm}
+        label={label}
+        primary
+        disabled={disabled}
+        loading={loading}
+        halfWidth
+      />
     </div>
   );
 }

src/app/components/Container.tsx

@@ -29,9 +29,9 @@ function Container({
 
   return (
     <div
-      className={`container mx-auto px-4 mb-5 ${getMaxWidthClass(maxWidth)} ${
+      className={`container mx-auto px-4 pb-4 ${getMaxWidthClass(maxWidth)} ${
         justifyBetween
-          ? "h-full flex flex-col justify-between overflow-y-auto no-scrollbar"
+          ? "h-full flex flex-col justify-between no-scrollbar"
           : ""
       }`}
     >

src/app/router/Options/Options.tsx

@@ -34,6 +34,7 @@ import Discover from "~/app/screens/Discover";
 import LNURLRedeem from "~/app/screens/LNURLRedeem";
 import OnChainReceive from "~/app/screens/OnChainReceive";
 import ScanQRCode from "~/app/screens/ScanQRCode";
+import SendToBitcoinAddress from "~/app/screens/SendToBitcoinAddress";
 import ChooseConnector from "~/app/screens/connectors/ChooseConnector";
 import ChooseConnectorPath from "~/app/screens/connectors/ChooseConnectorPath";
 import i18n from "~/i18n/i18nConfig";
@@ -65,6 +66,10 @@ function Options() {
             <Route path="send" element={<Send />} />
             <Route path="confirmPayment" element={<ConfirmPayment />} />
             <Route path="keysend" element={<Keysend />} />
+            <Route
+              path="sendToBitcoinAddress"
+              element={<SendToBitcoinAddress />}
+            />
             <Route path="receive" element={<Receive />} />
             <Route path="onChainReceive" element={<OnChainReceive />} />
             <Route path="wallet" element={<DefaultView />} />

src/app/router/Popup/Popup.tsx

@@ -15,6 +15,7 @@ import { ToastContainer } from "react-toastify";
 import Providers from "~/app/context/Providers";
 import LNURLRedeem from "~/app/screens/LNURLRedeem";
 import OnChainReceive from "~/app/screens/OnChainReceive";
+import SendToBitcoinAddress from "~/app/screens/SendToBitcoinAddress";
 
 import RequireAuth from "../RequireAuth";
 
@@ -43,6 +44,10 @@ function Popup() {
             <Route path="keysend" element={<Keysend />} />
             <Route path="confirmPayment" element={<ConfirmPayment />} />
             <Route path="lnurlAuth" element={<LNURLAuth />} />
+            <Route
+              path="sendToBitcoinAddress"
+              element={<SendToBitcoinAddress />}
+            />
           </Route>
           <Route
             path="unlock"

src/app/screens/ConfirmRequestPermission/index.tsx

@@ -82,7 +82,7 @@ const ConfirmRequestPermission: FC = () => {
               </div>
             </div>
           </div>
-          <div className="mb-4 text-center flex flex-col">
+          <div className="text-center flex flex-col">
             <ConfirmOrCancel
               label={tCommon("actions.confirm")}
               onCancel={reject}

src/app/screens/Enable/index.tsx

@@ -108,7 +108,7 @@ function Enable(props: Props) {
             onCancel={reject}
           />
           <a
-            className="underline text-sm text-gray-400 mx-4 overflow-hidden text-ellipsis whitespace-nowrap"
+            className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
             href="#"
             onClick={block}
           >

src/app/screens/Nostr/Confirm.tsx

@@ -95,15 +95,15 @@ function NostrConfirm() {
               </label>
             </div>
           </div>
-          <div className="mb-4 text-center flex flex-col">
+          <div className="text-center flex flex-col">
             <ConfirmOrCancel
               disabled={loading}
               loading={loading}
               label={tCommon("actions.confirm")}
               onCancel={reject}
             />
             <a
-              className="underline text-sm text-gray-400 mx-4 overflow-hidden text-ellipsis whitespace-nowrap"
+              className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
               href="#"
               onClick={block}
             >

src/app/screens/Nostr/ConfirmGetPublicKey.tsx

@@ -75,7 +75,7 @@ function NostrConfirmGetPublicKey() {
         </div>
 
         <form onSubmit={handleSubmit}>
-          <div className="flex items-center">
+          <div className="flex items-center mb-4">
             <Checkbox
               id="remember_permission"
               name="remember_permission"
@@ -92,15 +92,15 @@ function NostrConfirmGetPublicKey() {
             </label>
           </div>
 
-          <div className="mb-4 text-center flex flex-col">
+          <div className="text-center flex flex-col">
             <ConfirmOrCancel
               disabled={loading}
               loading={loading}
               label={tCommon("actions.confirm")}
               onCancel={reject}
             />
             <a
-              className="underline text-sm text-gray-400 mx-4 overflow-hidden text-ellipsis whitespace-nowrap"
+              className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
               href="#"
               onClick={block}
             >

src/app/screens/Nostr/ConfirmSignMessage.tsx

@@ -102,7 +102,9 @@ function ConfirmSignMessage() {
                   {JSON.stringify(event, null, 2)}
                 </div>
               )}
-              <div className="flex items-center">
+            </div>
+            <div>
+              <div className="flex items-center mb-4">
                 <Checkbox
                   id="remember_permission"
                   name="remember_permission"
@@ -118,12 +120,12 @@ function ConfirmSignMessage() {
                   {tCommon("actions.remember")}
                 </label>
               </div>
+              <ConfirmOrCancel
+                disabled={loading}
+                loading={loading}
+                onCancel={reject}
+              />
             </div>
-            <ConfirmOrCancel
-              disabled={loading}
-              loading={loading}
-              onCancel={reject}
-            />
           </Container>
         </form>
       ) : (

src/app/screens/Receive/index.tsx

@@ -163,7 +163,7 @@ function Receive() {
   function renderInvoice() {
     if (!invoice) return null;
     return (
-      <div className="py-4">
+      <>
         <div className="relative p-8 bg-white rounded-lg shadow-sm ring-1 ring-black ring-opacity-5 flex justify-center items-center overflow-hidden">
           <QRCode value={invoice.paymentRequest.toUpperCase()} level="M" />
           {paid && (
@@ -241,7 +241,7 @@ function Receive() {
             style={{ pointerEvents: "none" }}
           />
         )}
-      </div>
+      </>
     );
   }
 
@@ -265,7 +265,7 @@ function Receive() {
           <form onSubmit={handleSubmit}>
             <fieldset disabled={loadingInvoice}>
               <Container justifyBetween maxWidth="sm">
-                <div className="py-4">
+                <div>
                   <div className="mb-4">
                     <DualCurrencyField
                       id="amount"
@@ -287,16 +287,14 @@ function Receive() {
                     />
                   </div>
                 </div>
-                <div>
-                  <Button
-                    type="submit"
-                    label={t("actions.create_invoice")}
-                    fullWidth
-                    primary
-                    loading={loadingInvoice}
-                    disabled={loadingInvoice}
-                  />
-                </div>
+                <Button
+                  type="submit"
+                  label={t("actions.create_invoice")}
+                  fullWidth
+                  primary
+                  loading={loadingInvoice}
+                  disabled={loadingInvoice}
+                />
               </Container>
             </fieldset>
           </form>

src/app/screens/Send/index.tsx

@@ -10,7 +10,12 @@ import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import QrcodeAdornment from "~/app/components/QrcodeAdornment";
-import { extractLightningTagData } from "~/app/utils";
+import { useAccount } from "~/app/context/AccountContext";
+import {
+  extractLightningTagData,
+  isAlbyOAuthAccount,
+  isBitcoinAddress,
+} from "~/app/utils";
 import lnurlLib from "~/common/lib/lnurl";
 import { isLNURLDetailsError } from "~/common/utils/typeHelpers";
 
@@ -22,6 +27,10 @@ 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"));
@@ -91,6 +100,13 @@ function Send() {
             },
           },
         });
+      } else if (
+        isAlbyOAuthAccount(auth.account?.connectorType) &&
+        isBitcoinAddress(invoice)
+      ) {
+        navigate("/sendToBitcoinAddress", {
+          state: { args: { bitcoinAddress: invoice } },
+        });
       } else {
         lightningPayReq.decode(invoice); // throws if invalid.
         navigate("/confirmPayment", {
@@ -127,7 +143,7 @@ function Send() {
             <TextField
               id="invoice"
               label={t("input.label")}
-              hint={t("input.hint")}
+              hint={hint}
               value={invoice}
               disabled={loading}
               autoFocus