feat: broadcast deposit tx

leather-io · Dec 4, 2024 · d2b2611 · d2b2611
1 parent 12b6059
commit d2b2611
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git a/src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-item.tsx b/src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-item.tsx
@@ -1,4 +1,5 @@
 import { SwapSelectors } from '@tests/selectors/swap.selectors';
+import { sanitize } from 'dompurify';
 
 import { type SwapAsset, isFtAsset, useGetFungibleTokenMetadataQuery } from '@leather.io/query';
 import {
@@ -30,7 +31,7 @@ export function SwapAssetItem({ asset, onClick }: SwapAssetItemProps) {
         img={
           isString(asset.icon) ? (
             <Avatar.Root>
-              <Avatar.Image alt={fallback} src={asset.icon} />
+              <Avatar.Image alt={fallback} src={sanitize(asset.icon)} />
               <Avatar.Fallback delayMs={defaultFallbackDelay}>{fallback}</Avatar.Fallback>
             </Avatar.Root>
           ) : (

diff --git a/src/app/pages/swap/components/swap-assets-pair/swap-asset-item.layout.tsx b/src/app/pages/swap/components/swap-assets-pair/swap-asset-item.layout.tsx
@@ -1,6 +1,7 @@
 import type React from 'react';
 
 import { SwapSelectors } from '@tests/selectors/swap.selectors';
+import { sanitize } from 'dompurify';
 import { HStack, styled } from 'leather-styles/jsx';
 
 import { Flag } from '@leather.io/ui';
@@ -17,7 +18,13 @@ export function SwapAssetItemLayout({ caption, icon, symbol, value }: SwapAssetI
     <Flag
       img={
         isString(icon) ? (
-          <styled.img src={icon} borderRadius="50%" width="48px" height="48px" alt="Swap asset" />
+          <styled.img
+            src={sanitize(icon)}
+            borderRadius="50%"
+            width="48px"
+            height="48px"
+            alt="Swap asset"
+          />
         ) : (
           icon
         )

diff --git a/src/app/pages/test-deposit-sbtc/test-deposit-sbtc.tsx b/src/app/pages/test-deposit-sbtc/test-deposit-sbtc.tsx
@@ -15,6 +15,16 @@ import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/s
 
 const client = new SbtcApiClientTestnet();
 
+const sBtcApiUrl = 'https://beta.sbtc-mempool.tech/api/proxy';
+// Temporary function to broadcast the transaction, not sure about correct api?
+// It does return a txid, but the notify function returns an error
+async function broadcastTx(tx: btc.Transaction): Promise<string> {
+  return await fetch(`${sBtcApiUrl}/tx`, {
+    method: 'POST',
+    body: tx.hex,
+  }).then(res => res.text());
+}
+
 // Demo component to create the swap deposit transaction
 export function TestDepositSbtc() {
   const stacksAccount = useCurrentStacksAccount();
@@ -37,7 +47,7 @@ export function TestDepositSbtc() {
         reclaimLockTime: 6_000,
       });
 
-      const { inputs } = determineUtxosForSpend({
+      const { inputs, outputs } = determineUtxosForSpend({
         feeRate: feeRates?.halfHourFee.toNumber() ?? 0,
         recipients: [
           {
@@ -47,7 +57,8 @@ export function TestDepositSbtc() {
         ],
         utxos,
       });
-
+      console.log('inputs', inputs);
+      console.log('outputs', outputs);
       const p2wpkh = btc.p2wpkh(signer.publicKey, networkMode);
 
       for (const input of inputs) {
@@ -63,11 +74,23 @@ export function TestDepositSbtc() {
         });
       }
 
+      outputs.forEach(output => {
+        // Add change output
+        if (!output.address) {
+          deposit.transaction.addOutputAddress(signer.address, BigInt(output.value), networkMode);
+          return;
+        }
+      });
+
       signer.sign(deposit.transaction);
       deposit.transaction.finalize();
 
       console.log('deposit tx', deposit.transaction);
       console.log('tx hex', deposit.transaction.hex);
+
+      const txid = await broadcastTx(deposit.transaction);
+      console.log('broadcasted tx', txid);
+      await client.notifySbtc(deposit);
     } catch (error) {
       console.error(error);
     }