feat: validate-payment.com instead of copy preimage

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");

src/config.ts

@@ -24,6 +24,7 @@ const defaults = {
     telegramUrl: "https://t.me/boltzhq",
     email: "hi@bol.tz",
     dnsOverHttps: "https://1.1.1.1/dns-query",
+    preimageValidation: "https://validate-payment.com",
 };
 
 type Asset = {

src/i18n/i18n.ts

@@ -219,7 +219,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",
     },
     de: {
@@ -452,7 +452,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",
     },
     es: {
@@ -683,7 +683,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",
     },
     zh: {
@@ -887,7 +887,7 @@ const dict = {
         timeout: "超时",
         wallet_connect_failed: "钱包连接失败：{{ error }}",
         ledger_open_app_prompt: "打开以太坊或 RSK 应用",
-        copy_preimage: "复制预图像",
+        validate_payment: "出示付款证明",
         no_browser_wallet: "未检测到浏览器钱包",
     },
     ja: {
@@ -1115,7 +1115,7 @@ const dict = {
         timeout: "タイムアウト",
         wallet_connect_failed: "ウォレット接続の失敗: {{ error }}",
         ledger_open_app_prompt: "イーサリアムもしくはRSKのアプリを開く",
-        copy_preimage: "コピー前画像",
+        validate_payment: "支払い証明書の提示",
         no_browser_wallet: "ブラウザのウォレットが検出されない",
     },
 };

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>