feat: add btc tx address to vault

src/app/components/vault/components/vault.detaills/components/vault.details.transaction-stack/vault.details.transaction-stack.tsx

@@ -1,4 +1,7 @@
-import { Divider, VStack } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+
+import { Divider, HStack, Text, VStack } from '@chakra-ui/react';
+import { truncateAddress } from 'dlc-btc-lib/utilities';
 
 import { VaultTransactionRow } from './components/vault.details.transaction-stack.transaction-row';
 
@@ -7,17 +10,60 @@
   vaultWithdrawDepositTX?: string;
 }
 
+async function checkAddresses(txHash: string): Promise<string> {
+  const url = `https://devnet.dlc.link/electrs/tx/${txHash}`;
+
+  try {
+    const response = await fetch(url);
+    const data = await response.json();
+
+    const addresses = data.vin.map((input: any) => input.prevout.scriptpubkey_address);
+    const uniqueAddresses = new Set(addresses);
+
+    if (uniqueAddresses.size === 1) {
+      return Array.from(uniqueAddresses)[0] as string;
+    } else {
+      // if the addresses are not the same ind the Vault Bitcoin Address, by recreating the Vault Address by ``dlc-btc-lib``
+      return 'Addresses are not the same';
+    }
+  } catch (error) {
+    console.error('Error fetching transaction data:', error);
+    return 'Error fetching transaction data';
+  }
+}
+
 export function VaultTransactionStack({
   vaultFundingTX,
   vaultWithdrawDepositTX,
 }: VaultTransactionStackProps): React.JSX.Element | false {
+  const [btcAddress, setBtcAddress] = useState<string>('');
+
+  useEffect(() => {
+    if (vaultFundingTX) {
+      checkAddresses(vaultFundingTX)
+        .then(address => setBtcAddress(address))
+        .catch(err => {
+          console.error('Error in checking addresses:', err);
+          setBtcAddress('Error fetching address');
+        });
+    }
+  }, [vaultFundingTX]);
+
   if (!vaultFundingTX && !vaultWithdrawDepositTX) return false;
 
   return (
     <VStack w={'100%'} justifyContent={'space-between'}>
       <Divider w={'100%'} borderColor={'grey.01'} borderStyle={'dashed'} />
       <VaultTransactionRow label={'Funding TX'} value={vaultFundingTX} />
       <VaultTransactionRow label={'Withdraw/Deposit TX'} value={vaultWithdrawDepositTX} />
+      <HStack w={'100%'} justifyContent={'space-between'}>
+        <Text color={'white.01'} fontSize={'xs'}>
+          BTC address
+        </Text>
+        <Text color={'white.01'} fontSize={'xs'}>
+          {btcAddress ? truncateAddress(btcAddress) : 'Loading...'}
+        </Text>
+      </HStack>
     </VStack>
   );
 }