feat: Submarine Swap preimage copy button

e2e/submarineSwap.spec.ts

@@ -49,6 +49,7 @@ test.describe("Submarine swap", () => {
 
         await generateBitcoinBlock();
         // TODO: verify amounts
+        // TODO: preimage copy button
     });
 
     test("Create with LNURL", async ({ page }) => {

src/i18n/i18n.ts

@@ -219,6 +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",
     },
     de: {
         language: "Deutsch",

src/status/TransactionClaimed.tsx

@@ -1,13 +1,16 @@
 import { useNavigate } from "@solidjs/router";
 import { BigNumber } from "bignumber.js";
-import { Show, createEffect, createSignal } from "solid-js";
+import { Show, createEffect, createResource, createSignal } from "solid-js";
 
+import CopyButton from "../components/CopyButton";
 import LoadingSpinner from "../components/LoadingSpinner";
 import { RBTC } from "../consts/Assets";
 import { SwapType } from "../consts/Enums";
 import { useGlobalContext } from "../context/Global";
 import { usePayContext } from "../context/Pay";
+import { getSubmarinePreimage } from "../utils/boltzClient";
 import { formatAmount } from "../utils/denomination";
+import { SubmarineSwap } from "../utils/swapCreator";
 
 const Broadcasting = () => {
     const { t } = useGlobalContext();
@@ -23,12 +26,28 @@ const Broadcasting = () => {
 const TransactionClaimed = () => {
     const navigate = useNavigate();
     const { swap } = usePayContext();
-    const { t, denomination, separator } = useGlobalContext();
+    const { t, denomination, separator, setSwapStorage } = useGlobalContext();
 
     const [claimBroadcast, setClaimBroadcast] = createSignal<
         boolean | undefined
     >(undefined);
 
+    const [preimage] = createResource(async () => {
+        const submarine = swap() as SubmarineSwap;
+        if (submarine.type !== SwapType.Submarine) {
+            return undefined;
+        }
+
+        if (submarine.preimage !== undefined) {
+            return submarine.preimage;
+        }
+
+        const res = await getSubmarinePreimage(submarine.id);
+        submarine.preimage = res.preimage;
+        await setSwapStorage(submarine);
+        return res.preimage;
+    });
+
     createEffect(() => {
         const s = swap();
         if (s === undefined || s === null) {
@@ -62,6 +81,9 @@ const TransactionClaimed = () => {
                 <span class="btn" onClick={() => navigate("/swap")}>
                     {t("new_swap")}
                 </span>
+                <Show when={!preimage.loading && preimage() !== undefined}>
+                    <CopyButton label={"copy_preimage"} data={preimage()} />
+                </Show>
             </Show>
         </div>
     );

src/utils/boltzClient.ts

@@ -443,6 +443,9 @@ export const getChainSwapNewQuote = (id: string) =>
 export const acceptChainSwapNewQuote = (id: string, amount: number) =>
     fetcher<object>(`/v2/swap/chain/${id}/quote`, { amount });
 
+export const getSubmarinePreimage = (id: string) =>
+    fetcher<{ preimage: string }>(`/v2/swap/submarine/${id}/preimage`);
+
 export {
     Pairs,
     Contracts,

src/utils/swapCreator.ts

@@ -42,6 +42,7 @@ export type SwapBase = {
 export type SubmarineSwap = SwapBase &
     SubmarineCreatedResponse & {
         invoice: string;
+        preimage?: string;
         refundPrivateKey?: string;
     };