feat: validate-payment.com instead of copy preimage (#748)

* feat: validate-payment.com instead of copy preimage * chore: add missing strings * fix: e2e test --------- Co-authored-by: Kilian <[email protected]>
BoltzExchange · Nov 27, 2024 · ca8059f · ca8059f
1 parent ebd7714
commit ca8059f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 11 deletions.
diff --git a/e2e/submarineSwap.spec.ts b/e2e/submarineSwap.spec.ts
@@ -51,10 +51,12 @@ test.describe("Submarine swap", () => {
 
         await generateBitcoinBlock();
 
-        await page.getByText("Copy preimage").click();
-        const preimage = await page.evaluate(() => {
-            return navigator.clipboard.readText();
-        });
+        const validationLink = new URL(
+            await page.getByText("Show Proof of Payment").getAttribute("href"),
+        );
+
+        expect(validationLink.searchParams.get("invoice")).toEqual(invoice);
+        const preimage = validationLink.searchParams.get("preimage");
 
         const lookupRes = await lookupInvoiceLnd(invoice);
         expect(lookupRes.state).toEqual("SETTLED");

diff --git a/src/config.ts b/src/config.ts
@@ -24,6 +24,7 @@ const defaults = {
     telegramUrl: "https://t.me/boltzhq",
     email: "[email protected]",
     dnsOverHttps: "https://1.1.1.1/dns-query",
+    preimageValidation: "https://validate-payment.com",
 };
 
 type Asset = {

diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
@@ -221,7 +221,7 @@ const dict = {
         timeout: "Timeout",
         wallet_connect_failed: "Wallet connection failed: {{ error }}",
         ledger_open_app_prompt: "Open Ethereum or RSK app",
-        copy_preimage: "Copy preimage",
+        validate_payment: "Show Proof of Payment",
         no_browser_wallet: "No browser wallet detected",
         sent: "Sent",
         will_receive: "Will receive",
@@ -458,7 +458,7 @@ const dict = {
         wallet_connect_failed:
             "Verbindung zu Wallet fehlgeschlagen: {{ error }}",
         ledger_open_app_prompt: "Ethereum oder RSK app öffnen",
-        copy_preimage: "Preimage Kopieren",
+        validate_payment: "Proof of Payment anzeigen",
         no_browser_wallet: "Kein Browser Wallet gefunden",
         sent: "Gesendet",
         will_receive: "Sie erhalten",
@@ -692,7 +692,7 @@ const dict = {
         timeout: "timeout",
         wallet_connect_failed: "Fallo en la conexión del monedero: {{ error }}",
         ledger_open_app_prompt: "Abrir aplicación Ethereum o RSK",
-        copy_preimage: "Copiar preimagen",
+        validate_payment: "Mostrar justificante de pago",
         no_browser_wallet: "No se detectó monedero en el navegador",
         sent: "Enviado",
         will_receive: "Recibirá",
@@ -899,7 +899,7 @@ const dict = {
         timeout: "超时",
         wallet_connect_failed: "钱包连接失败：{{ error }}",
         ledger_open_app_prompt: "打开以太坊或 RSK 应用",
-        copy_preimage: "复制预图像",
+        validate_payment: "出示付款证明",
         no_browser_wallet: "未检测到浏览器钱包",
         sent: "已发送",
         will_receive: "将收到",
@@ -1131,7 +1131,7 @@ const dict = {
         timeout: "タイムアウト",
         wallet_connect_failed: "ウォレット接続の失敗: {{ error }}",
         ledger_open_app_prompt: "イーサリアムもしくはRSKのアプリを開く",
-        copy_preimage: "コピー前画像",
+        validate_payment: "支払い証明書の提示",
         no_browser_wallet: "ブラウザのウォレットが検出されない",
         sent: "送信済み",
         will_receive: "受信予定",

diff --git a/src/status/TransactionClaimed.tsx b/src/status/TransactionClaimed.tsx
@@ -3,8 +3,8 @@ import { BigNumber } from "bignumber.js";
 import log from "loglevel";
 import { Show, createEffect, createResource, createSignal } from "solid-js";
 
-import CopyButton from "../components/CopyButton";
 import LoadingSpinner from "../components/LoadingSpinner";
+import { config } from "../config";
 import { RBTC } from "../consts/Assets";
 import { SwapType } from "../consts/Enums";
 import { useGlobalContext } from "../context/Global";
@@ -26,6 +26,13 @@ const Broadcasting = () => {
     );
 };
 
+const paymentValidationUrl = (invoice: string, preimage: string): string => {
+    const url = new URL(config.preimageValidation);
+    url.searchParams.append("invoice", invoice);
+    url.searchParams.append("preimage", preimage);
+    return url.toString();
+};
+
 const TransactionClaimed = () => {
     const navigate = useNavigate();
 
@@ -94,7 +101,15 @@ const TransactionClaimed = () => {
                     {t("new_swap")}
                 </span>
                 <Show when={!preimage.loading && preimage() !== undefined}>
-                    <CopyButton label={"copy_preimage"} data={preimage()} />
+                    <a
+                        class="btn btn-explorer"
+                        target="_blank"
+                        href={paymentValidationUrl(
+                            (swap() as SubmarineSwap).invoice,
+                            preimage(),
+                        )}>
+                        {t("validate_payment")}
+                    </a>
                 </Show>
             </Show>
         </div>