fix: add spend htlc and support new transaction payload

Author: anyxem

examples/demo/index.html

@@ -73,6 +73,7 @@ <h1 class="text-3xl font-bold text-center text-blue-600 mb-6">Mintlayer Wallet D
                 <button onclick="toggleSection('requestSecretHash')" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 transition">Request Secret Hash</button>
                 <button onclick="toggleSection('createHtlc')" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 transition">Create Htlc</button>
                 <button onclick="toggleSection('refundHtlc')" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 transition">Refund Htlc</button>
+                <button onclick="toggleSection('spendHtlc')" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 transition">Spend Htlc</button>
                 <button onclick="toggleSection('extractHtlcSecret')" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 transition">Extract Htlc secret</button>
             </div>
 
@@ -369,9 +370,18 @@ <h3 class="text-lg font-semibold text-gray-700 mb-4">Refund HTLC</h3>
                 </div>
             </div>
 
+            <!-- Spend HTLC Section -->
+            <div id="spendHtlc" class="bg-white p-6 rounded-lg shadow-md hidden">
+                <h3 class="text-lg font-semibold text-gray-700 mb-4">Spend HTLC</h3>
+                <div class="space-y-4">
+                    <input type="text" id="spend_htlc_transaction_id" placeholder="Transaction ID with HTLC" class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none" />
+                    <button onclick="spendHTLC()" class="bg-green-500 text-white py-2 px-4 rounded-md shadow hover:bg-green-600 transition w-full">Spend HTLC</button>
+                </div>
+            </div>
+
             <!-- Extract HTLC Secret Section -->
             <div id="extractHtlcSecret" class="bg-white p-6 rounded-lg shadow-md hidden">
-                <h3 class="text-lg font-semibold text-gray-700 mb-4">Refund HTLC</h3>
+                <h3 class="text-lg font-semibold text-gray-700 mb-4">Extract Secret from HTLC</h3>
                 <div class="space-y-4">
                     <input type="text" id="extract_htlc_transaction_id" placeholder="Transaction ID with HTLC spend" class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                     <input type="text" id="extract_htlc_transaction_hex" placeholder="Transaction HEX" class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none" />
@@ -401,7 +411,7 @@ <h3 class="text-xl font-semibold text-gray-700 mb-4">Output</h3>
       'lockTokenSupply', 'changeTokenAuthority', 'changeTokenMetadata', 'createOrder',
       'fillOrder', 'concludeOrder', 'bridgeRequest', 'broadcastTx', 'freezeToken',
       'unfreezeToken', 'burn', 'dataDeposit', 'createDelegation', 'delegationStake',
-      'delegationWithdraw', 'signChallenge', 'createHtlc', 'refundHtlc', 'requestSecretHash', 'extractHtlcSecret'
+      'delegationWithdraw', 'signChallenge', 'createHtlc', 'refundHtlc', 'spendHtlc', 'requestSecretHash', 'extractHtlcSecret'
     ];
     sections.forEach(id => {
       const el = document.getElementById(id);
@@ -1015,6 +1025,20 @@ <h3 class="text-xl font-semibold text-gray-700 mb-4">Output</h3>
     }
   }
 
+  async function spendHTLC () {
+    const transaction_id = document.getElementById('spend_htlc_transaction_id').value;
+
+    try {
+      const result = await window.mintlayer.spendHtlc({
+        transaction_id,
+      });
+
+      displayOutput(`Signature: ${JSON.stringify(result, null, 2)}`);
+    } catch (error) {
+      displayOutput(`Error: ${error.message}`);
+    }
+  }
+
   async function extractHTLCSecret () {
     const transaction_id = document.getElementById('extract_htlc_transaction_id').value;
     const transaction_hex = document.getElementById('extract_htlc_transaction_hex').value;

packages/sdk/src/mintlayer-connect-sdk.ts

@@ -3069,6 +3069,38 @@ class Client {
     return this.signTransaction(tx);
   }
 
+  async spendHtlc(params: any): Promise<any> {
+    this.ensureInitialized();
+
+    const { transaction_id, utxo } = params;
+
+    let useHtlcUtxo: any[] = [];
+
+    if (transaction_id) {
+      const response = await fetch(`${this.getApiServer()}/transaction/${transaction_id}`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch transaction');
+      }
+      const transaction: TransactionJSONRepresentation = await response.json();
+      // @ts-ignore
+      const { created } = this.previewUtxoChange({ JSONRepresentation: { ...transaction } } as Transaction);
+      // @ts-ignore
+      useHtlcUtxo = created.filter(({utxo}) => utxo.type === 'Htlc') || null;
+    }
+
+    const tx = await this.buildTransaction({
+      type: 'Transfer',
+      params: {
+        to: useHtlcUtxo[0].utxo.htlc.spend_key,
+        amount: useHtlcUtxo[0].utxo.value.amount.decimal,
+      },
+      opts: {
+        forceSpendUtxo: useHtlcUtxo,
+      }
+    });
+    return this.signTransaction(tx);
+  }
+
   async extractHtlcSecret(arg: any): Promise<any> {
     const {
       transaction_id,
@@ -3295,14 +3327,16 @@ class Client {
     return this.request({ method: 'getXPub' });
   }
 
-  async broadcastTx(tx: string): Promise<any> {
+  async broadcastTx(tx: string | { hex: string, json: TransactionJSONRepresentation }): Promise<any> {
     this.ensureInitialized();
     const response = await fetch(`${this.getApiServer()}/transaction`, {
       method: 'POST',
-      headers: {
+      headers: typeof tx === 'string' ? {
         'Content-Type': 'text/plain',
+      } : {
+        'Content-Type': 'application/json',
       },
-      body: tx,
+      body: typeof tx === 'string' ? tx : JSON.stringify({ transaction: tx.hex, json: tx.json }),
     });
 
     if (!response.ok) {