fix

Author: Pymmdrza

netlify.toml

@@ -1,10 +1,6 @@
 [build]
   command = "npm run build"
   publish = "dist"
-  base = "/"
-
-[build.environment]
-  NODE_VERSION = "20"
 
 [[redirects]]
   from = "/*"
@@ -14,8 +10,8 @@
 [[headers]]
   for = "/*"
   [headers.values]
-    X-Frame-Options = "DENY"
+    X-Frame-Options = "SAMEORIGIN"
     X-XSS-Protection = "1; mode=block"
     X-Content-Type-Options = "nosniff"
+    Content-Security-Policy = "default-src 'self' https: data: 'unsafe-inline' 'unsafe-eval'; connect-src 'self' https://bitcoin.atomicwallet.io https://blockchain.info https://api.github.com;"
     Referrer-Policy = "strict-origin-when-cross-origin"
-    Content-Security-Policy = "default-src 'self' https: wss: data: 'unsafe-inline' 'unsafe-eval'; connect-src 'self' https: wss: https://bitcoin.atomicwallet.io https://blockchain.info https://api.github.com ws://ws.blockchain.info wss://ws.blockchain.info;"

server/index.js

@@ -197,7 +197,7 @@ app.use((req, res, next) => {
   next();
 });
 
-// For any request that doesn't match the above, send the index.html file
+// Handle client-side routing
 app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, '../dist/index.html'));
 });

src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { HashRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';
 import { Home } from './pages/Home';
 import { Address } from './pages/Address';
 import { Transaction } from './pages/Transaction';
@@ -77,7 +77,7 @@ function HeaderSearch() {
 
 function App() {
   return (
-    <Router>
+    <Router basename="/">
       <div className="min-h-screen bg-[#0B1017] text-gray-100 flex flex-col">
         <nav className="sticky top-0 z-50 bg-[#0E141B] shadow-md border-b border-gray-800">
           <div className="max-w-7xl mx-auto px-4">

src/pages/Transaction.tsx

@@ -86,7 +86,7 @@ export const Transaction: React.FC = () => {
   const confirmationStatus = data.confirmations > 0 ? (
     <div className="flex items-center gap-2 text-green-400">
       <CheckCircle2 className="w-5 h-5" />
-      <span>Confirmed</span>
+      <span>Confirmed ({data.confirmations} confirmations)</span>
     </div>
   ) : (
     <div className="flex items-center gap-2 text-yellow-400">

src/types.ts

@@ -249,6 +249,27 @@ export interface BlockchainStatsResponse {
   totalbc: number;
 }
 
+// Blockchain API response types
+export interface BlockchainTransaction {
+  hash: string;
+  block_height: number;
+  time: number;
+  confirmations: number;
+  fee: number;
+  size: number;
+  total: number;
+  inputs: Array<{
+    prev_out: {
+      addr?: string;
+      value: number;
+    };
+  }>;
+  out: Array<{
+    addr?: string;
+    value: number;
+  }>;
+}
+
 // Bitcoin price types
 export interface BitcoinPrice {
   USD: {

src/utils/api.ts

@@ -113,7 +113,7 @@ export const fetchAddressInfo = async (address: string): Promise<AddressResponse
 export const fetchTransactionInfo = async (txid: string): Promise<TransactionResponse> => {
   try {
     const response = await retryRequest(() => 
-      bitcoinApi.get(`/tx/${txid}`)
+      blockchainApi.get(`/rawtx/${txid}?format=json`)
     );
 
     if (!response.data) {
@@ -122,23 +122,26 @@ export const fetchTransactionInfo = async (txid: string): Promise<TransactionRes
 
     const data = response.data;
 
-    return {
-      txid: data.txid,
-      blockHeight: data.blockHeight || 0,
-      blockTime: data.blockTime || Math.floor(Date.now() / 1000),
+    // Process the transaction data
+    const processedData: TransactionResponse = {
+      txid: data.hash,
+      blockHeight: data.block_height || 0,
+      blockTime: data.time || Math.floor(Date.now() / 1000),
       confirmations: data.confirmations || 0,
-      fees: data.fees || '0',
+      fees: data.fee ? (data.fee / 100000000).toString() : '0', // Convert satoshis to BTC
       size: data.size || 0,
-      value: data.value || '0',
-      vin: (data.vin || []).map((input: any) => ({
-        addresses: input.addresses || [],
-        value: input.value || '0'
+      value: data.total ? (data.total / 100000000).toString() : '0', // Convert satoshis to BTC
+      vin: (data.inputs || []).map((input: any) => ({
+        addresses: input.prev_out?.addr ? [input.prev_out.addr] : [],
+        value: input.prev_out?.value ? (input.prev_out.value / 100000000).toString() : '0' // Convert satoshis to BTC
       })),
-      vout: (data.vout || []).map((output: any) => ({
-        addresses: output.addresses || [],
-        value: output.value || '0'
+      vout: (data.out || []).map((output: any) => ({
+        addresses: output.addr ? [output.addr] : [],
+        value: output.value ? (output.value / 100000000).toString() : '0' // Convert satoshis to BTC
       }))
     };
+
+    return processedData;
   } catch (error) {
     console.error('Error fetching transaction info:', error);
     if (axios.isAxiosError(error)) {

vite.config.ts

@@ -59,8 +59,8 @@ export default defineConfig({
   build: {
     outDir: 'dist',
     assetsDir: 'assets',
-    // Set base path for GitHub Pages deployment
-    base: './',
+    // Set base path for production deployment
+    base: '/',
     rollupOptions: {
       output: {
         entryFileNames: 'assets/js/[name].js',