Merge pull request #51 from near-examples/reconstruct_bitcoin_signed_tx_after_refresh

fix: Reconstruct Bitcoin signed transaction after the page refresh

Author: denbite

src/components/Bitcoin.jsx

@@ -27,14 +27,19 @@ export function BitcoinView({ props: { setStatus } }) {
   const derivationPath = useDebounce(derivation, 500);
 
   const getSignedTx = async () => {
-    const signedTx = await wallet.getTransactionResult(transactions[0]);
-    console.log("signedTx", signedTx);
-    setSignedTransaction(signedTx);
+    const signature = await wallet.getTransactionResult(transactions[0]);
+
+    const signedTransaction = await BTC.reconstructSignedTransactionFromSessionStorage(signature);
+
+    setSignedTransaction(signedTransaction);
+    removeUrlParams();
   };
 
   useEffect(() => {
-    if (transactions.length) getSignedTx();
-  }, [transactions]);
+    if (transactions.length === 0) return;
+    
+    getSignedTx();
+  }, []);
 
   useEffect(() => {
     setSenderAddress("Waiting for you to stop typing...");
@@ -72,6 +77,17 @@ export function BitcoinView({ props: { setStatus } }) {
       wallet,
     });
 
+    sessionStorage.setItem(
+      "btc_transaction",
+      JSON.stringify({
+        from: senderAddress,
+        to: receiver,
+        amount,
+        utxos,
+        publicKey: senderPK
+      })
+    );
+
     setStatus(
       "🕒 Asking MPC to sign the transaction, this might take a while..."
     );
@@ -84,7 +100,6 @@ export function BitcoinView({ props: { setStatus } }) {
         path: derivationPath,
         wallet,
       });
-      console.log('signedTransaction', signedTransaction);
       setStatus("✅ Signed payload ready to be relayed to the Bitcoin network");
       setSignedTransaction(signedTransaction);
       setStep("relay");
@@ -128,6 +143,12 @@ export function BitcoinView({ props: { setStatus } }) {
     setLoading(false);
   };
 
+  function removeUrlParams() {
+    const url = new URL(window.location.href);
+    url.searchParams.delete("transactionHashes");
+    window.history.replaceState({}, document.title, url);
+  }
+
   return (
     <>
       <div className="row my-3">

src/services/bitcoin.js

@@ -117,10 +117,79 @@ export class Bitcoin {
     return psbt;  // Return the generated signature
   }
 
+  reconstructSignedTransaction = async ({
+    psbt,
+    utxos,
+    publicKey,
+    signature,
+  }) => {
+    const keyPair = {
+      publicKey: Buffer.from(publicKey, "hex"),
+      sign: async (transactionHash) => {
+        const utxo = utxos[0]; // The UTXO being spent
+        const value = utxo.value; // The value in satoshis of the UTXO being spent
+
+        if (isNaN(value)) {
+          throw new Error(
+            `Invalid value for UTXO at index ${transactionHash}: ${utxo.value}`
+          );
+        }
+
+        const { big_r, s } = signature;
+
+        // Reconstruct the signature
+        const rHex = big_r.affine_point.slice(2); // Remove the "03" prefix
+        let sHex = s.scalar;
+
+        // Pad s if necessary
+        if (sHex.length < 64) {
+          sHex = sHex.padStart(64, "0");
+        }
+
+        const rBuf = Buffer.from(rHex, "hex");
+        const sBuf = Buffer.from(sHex, "hex");
+
+        // Combine r and s
+        return Buffer.concat([rBuf, sBuf]);
+      },
+    };
+
+    // Sign each input manually
+    await Promise.all(
+      utxos.map(async (_, index) => {
+        try {
+          await psbt.signInputAsync(index, keyPair);
+          console.log(`Input ${index} signed successfully`);
+        } catch (e) {
+          console.warn(`Error signing input ${index}:`, e);
+        }
+      })
+    );
+
+    psbt.finalizeAllInputs(); // Finalize the PSBT
+
+    return psbt; // Return the generated signature
+  };
+
+  reconstructSignedTransactionFromSessionStorage = async (signature) => {
+    const { from, to, amount, utxos, publicKey } = JSON.parse(
+      sessionStorage.getItem("btc_transaction")
+    );
+
+    const psbt = await constructPsbt(from, utxos, to, amount, this.networkId);
+
+    return this.reconstructSignedTransaction({
+      psbt,
+      utxos,
+      signature,
+      publicKey,
+    });
+  };
+
   broadcastTX = async (signedTransaction) => {
     // broadcast tx
     const bitcoinRpc = `https://blockstream.info/${this.networkId === 'testnet' ? 'testnet' : ''}/api`;
-    const res = await fetch(`https://corsproxy.io/?${bitcoinRpc}/tx`, {
+    const res = await fetch(`${bitcoinRpc}/tx`, {
       method: 'POST',
       body: signedTransaction.extractTransaction().toHex(),
     });