Merge pull request #547 from BoltzExchange/feat-url-params-3

feat: improve embedding of swapbox

.prettierrc

@@ -4,5 +4,6 @@
     "importOrderSeparation": true,
     "importOrderSortSpecifiers": true,
     "tabWidth": 4,
-    "bracketSameLine": true
+    "bracketSameLine": true,
+    "proseWrap": "always"
 }

docs/README.md

@@ -1,7 +1,7 @@
 ---
 description: >-
-    We encourage our technical users to check the code and run the web app locally
-    from source following the instructions below.
+    We encourage our technical users to check the code and run the web app
+    locally from source following the instructions below.
 cover: .gitbook/assets/boltz-web_app_header.png
 coverY: 0
 ---
@@ -10,13 +10,20 @@ coverY: 0
 
 ## Dependencies
 
-Make sure to have the latest [Node.js LTS and NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) installed. We recommend using [nvm](https://github.com/nvm-sh/nvm#install--update-script) to manage npm installs: `nvm install --lts`
+Make sure to have the latest
+[Node.js LTS and NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+installed. We recommend using
+[nvm](https://github.com/nvm-sh/nvm#install--update-script) to manage npm
+installs: `nvm install --lts`
 
 ### Run
 
-Clone the repository, change to the project folder and run `npm install` to install all dependencies. Then `npm run mainnet && npm run build` and `npx serve dist` to bring it up.
+Clone the repository, change to the project folder and run `npm install` to
+install all dependencies. Then `npm run mainnet && npm run build` and
+`npx serve dist` to bring it up.
 
-Open [http://localhost:3000](http://localhost:3000) in your browser and start swapping!
+Open [http://localhost:3000](http://localhost:3000) in your browser and start
+swapping!
 
 ## With Docker
 

docs/pwa.md

@@ -1,8 +1,8 @@
 ---
 description: >-
-    For improved censorship resistance and privacy, Boltz is not available in app
-    stores, but can be installed as Progressive Web App (PWA) on all Android and
-    iOS devices, as well as desktop computers.
+    For improved censorship resistance and privacy, Boltz is not available in
+    app stores, but can be installed as Progressive Web App (PWA) on all Android
+    and iOS devices, as well as desktop computers.
 ---
 
 # 📲 Install as App
@@ -11,19 +11,24 @@ description: >-
 
 ## Android
 
-1. Open [boltz.exchange](https://boltz.exchange) in a mobile browser like [Chrome](https://www.google.com/chrome/) or [Vanadium](https://github.com/GrapheneOS/Vanadium), open the browser menu and tap "Install app":
+1. Open [boltz.exchange](https://boltz.exchange) in a mobile browser like
+   [Chrome](https://www.google.com/chrome/) or
+   [Vanadium](https://github.com/GrapheneOS/Vanadium), open the browser menu and
+   tap "Install app":
 
 <figure><img src=".gitbook/assets/android-0.jpeg" alt=""><figcaption></figcaption></figure>
 
 2. Confirm with "Install":
 
 <figure><img src=".gitbook/assets/android-1.jpeg" alt=""><figcaption></figcaption></figure>
 
-3. Now you find Boltz as App Icon on your home screen which you can use just like any other app.
+3. Now you find Boltz as App Icon on your home screen which you can use just
+   like any other app.
 
 ## iOS
 
-1. Open [boltz.exchange](https://boltz.exchange) in your Safari mobile browser and tap the share button:
+1. Open [boltz.exchange](https://boltz.exchange) in your Safari mobile browser
+   and tap the share button:
 
 <figure><img src=".gitbook/assets/ios-0.jpeg" alt=""><figcaption></figcaption></figure>
 
@@ -35,13 +40,16 @@ description: >-
 
 <figure><img src=".gitbook/assets/ios-2.jpeg" alt=""><figcaption></figcaption></figure>
 
-4. Now you find Boltz as App Icon on your home screen which you can use just like any other app.
+4. Now you find Boltz as App Icon on your home screen which you can use just
+   like any other app.
 
 ## Desktop
 
-Here an example how to install Boltz as App on a Ubuntu Desktop Computer using [Chromium](https://www.chromium.org/Home/):
+Here an example how to install Boltz as App on a Ubuntu Desktop Computer using
+[Chromium](https://www.chromium.org/Home/):
 
-1. Open [boltz.exchange](https://boltz.exchange) and click the install icon that automatically appears:
+1. Open [boltz.exchange](https://boltz.exchange) and click the install icon that
+   automatically appears:
 
 <figure><img src=".gitbook/assets/desktop-0.png" alt=""><figcaption></figcaption></figure>
 

docs/urlParams.md

@@ -0,0 +1,33 @@
+---
+description: >-
+    To prefill certain inputs of the the site, URL query parameters can be used.
+    Those parameters are documented here.
+---
+
+# URL query parameters
+
+## Embedding
+
+When `embed` is set to `1`, only the swap box will be shown.
+
+## Destination
+
+`destination` prefills either the onchain address or invoice input field. The
+inferred asset takes precedence over `receiveAsset` and in case a lightning
+invoice is set, its amount takes precedence over all other inputs to set the
+amount.
+
+## Assets
+
+`sendAsset` and `receiveAsset` can be used to set the assets. Possible values
+are:
+
+-   `LN`
+-   `BTC`
+-   `L-BTC`
+-   `RBTC`
+
+## Amounts
+
+`sendAmount` or `receiveAmount` set the respective amounts. Value is denominated
+in satoshis and `sendAmount` takes precedence.

e2e/submarineSwap.spec.ts

@@ -28,9 +28,7 @@ test.describe("Submarine swap", () => {
         await expect(inputSendAmount).toHaveValue(sendAmount);
 
         const invoiceInput = page.locator("textarea[data-testid='invoice']");
-        await invoiceInput.fill(
-            JSON.parse(await generateInvoiceLnd(1000000)).payment_request,
-        );
+        await invoiceInput.fill(await generateInvoiceLnd(1000000));
         const buttonCreateSwap = page.locator(
             "button[data-testid='create-swap-button']",
         );

e2e/urlParams.spec.ts

@@ -0,0 +1,102 @@
+import { expect, test } from "@playwright/test";
+import BigNumber from "bignumber.js";
+
+import { Denomination } from "../src/consts/Enums";
+import { formatAmount } from "../src/utils/denomination";
+import {
+    generateInvoiceLnd,
+    getBitcoinAddress,
+    getLiquidAddress,
+} from "./utils";
+
+test.describe("URL params", () => {
+    test("BTC address destination", async ({ page }) => {
+        const address = await getBitcoinAddress();
+
+        await page.goto(`/?destination=${address}`);
+        const receiveAsset = page.locator(".asset-BTC");
+        expect(receiveAsset).toBeDefined();
+
+        const onchainAddress = page.getByTestId("onchainAddress");
+        await expect(onchainAddress).toHaveValue(address);
+    });
+
+    test("L-BTC address destination", async ({ page }) => {
+        const address = await getLiquidAddress();
+
+        await page.goto(`/?destination=${address}`);
+        const receiveAsset = page.locator(".asset-L-BTC");
+        expect(receiveAsset).toBeDefined();
+
+        const onchainAddress = page.getByTestId("onchainAddress");
+        await expect(onchainAddress).toHaveValue(address);
+    });
+
+    test("Lightning invoice destination", async ({ page }) => {
+        const amount = 100_000;
+        const invoice = await generateInvoiceLnd(amount);
+
+        await page.goto(`/?destination=${invoice}`);
+        const receiveAsset = page.locator(".asset-LN");
+        expect(receiveAsset).toBeDefined();
+
+        const invoiceInput = page.getByTestId("invoice");
+        await expect(invoiceInput).toHaveValue(invoice);
+
+        const receiveAmount = page.getByTestId("receiveAmount");
+        await expect(receiveAmount).toHaveValue(
+            formatAmount(BigNumber(amount), Denomination.Sat, "."),
+        );
+    });
+
+    test("should set send amount", async ({ page }) => {
+        const amount = 210_000;
+        await page.goto(`/?sendAmount=${amount}`);
+
+        const sendAmount = page.getByTestId("sendAmount");
+        await expect(sendAmount).toHaveValue(
+            formatAmount(BigNumber(amount), Denomination.Sat, "."),
+        );
+    });
+
+    test("should set receive amount", async ({ page }) => {
+        const amount = 210_000;
+        await page.goto(`/?receiveAmount=${amount}`);
+
+        const receiveAmount = page.getByTestId("receiveAmount");
+        await expect(receiveAmount).toHaveValue(
+            formatAmount(BigNumber(amount), Denomination.Sat, "."),
+        );
+    });
+
+    test("should not set receive amount when send amount is set", async ({
+        page,
+    }) => {
+        const sendAmount = 100_000;
+        const receiveAmount = 210_000;
+        await page.goto(
+            `/?sendAmount=${sendAmount}&receiveAmount=${receiveAmount}`,
+        );
+
+        const sendAmountInput = page.getByTestId("sendAmount");
+        await expect(sendAmountInput).toHaveValue(
+            formatAmount(BigNumber(sendAmount), Denomination.Sat, "."),
+        );
+    });
+
+    test("should not set amount when lightning invoice is set", async ({
+        page,
+    }) => {
+        const invoiceAmount = 200_000;
+        const invoice = await generateInvoiceLnd(invoiceAmount);
+
+        const sendAmount = 100_000;
+
+        await page.goto(`/?sendAmount=${sendAmount}&destination=${invoice}`);
+
+        const receiveAmount = page.getByTestId("receiveAmount");
+        await expect(receiveAmount).toHaveValue(
+            formatAmount(BigNumber(invoiceAmount), Denomination.Sat, "."),
+        );
+    });
+});

e2e/utils.ts

@@ -28,6 +28,10 @@ export const getBitcoinAddress = async (): Promise<string> => {
     return execCommand("bitcoin-cli-sim-client getnewaddress");
 };
 
+export const getLiquidAddress = async (): Promise<string> => {
+    return execCommand("elements-cli-sim-client getnewaddress");
+};
+
 export const bitcoinSendToAddress = async (
     address: string,
     amount: string,
@@ -63,5 +67,7 @@ export const payInvoiceLnd = async (invoice: string): Promise<string> => {
 };
 
 export const generateInvoiceLnd = async (amount: number): Promise<string> => {
-    return execCommand(`lncli-sim 1 addinvoice --amt ${amount}`);
+    return JSON.parse(
+        await execCommand(`lncli-sim 1 addinvoice --amt ${amount}`),
+    ).payment_request;
 };

src/consts/Assets.ts

@@ -4,3 +4,5 @@ export const LBTC = "L-BTC";
 export const RBTC = "RBTC";
 
 export type AssetType = typeof LN | typeof BTC | typeof LBTC | typeof RBTC;
+
+export const assets = [LN, BTC, LBTC, RBTC];