Skip to content

Commit

Permalink
Loading
Loading status checks…
Update index.html
Browse files Browse the repository at this point in the history
@sorukumar
sorukumar authored Nov 15, 2024
1 parent 7beda08 commit a3bffdf
Showing 1 changed file with 59 additions and 199 deletions.
258 changes: 59 additions & 199 deletions BitcoinWitnessDataDecoder/index.html
View file
Original file line number Diff line number Diff line change
@@ -5,172 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bitcoin Witness Data Decoder</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<script>
// Utility functions
}

const cleaned = witnessData.replace(/\s/g, '');
let decoded = null;

// Try each decoder
for (const [name, decoder] of Object.entries(decoders)) {
const result = decoder(cleaned);
if (result) {
decoded = result;
break;
}
}

if (!decoded) {
resultDiv.innerHTML = '<div class="text-red-500">Unable to determine witness type</div>';
return;
}

// Enhanced display with metadata
let html = `
<div class="bg-gray-100 p-4 rounded-lg">
<h2 class="text-xl font-bold mb-2">Detected Type: ${decoded.type}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="space-y-2">
<h3 class="font-bold text-lg">Main Details</h3>
`;

// Render details based on type
if (Array.isArray(decoded.details.stackItems)) {
// Special handling for P2WSH stack items
html += `<div class="space-y-2">`;
decoded.details.stackItems.forEach((item, index) => {
html += `
<div class="bg-white p-2 rounded">
<strong>Stack Item ${index + 1} (${item.type}):</strong>
<div class="break-all text-sm">${item.value}</div>
<div class="text-sm text-gray-600">Size: ${item.size}</div>
</div>
`;
});
html += `</div>`;
} else {
// Standard rendering for other types
for (const [key, value] of Object.entries(decoded.details)) {
html += `
<div>
<strong class="text-gray-700">${key}:</strong>
<div class="break-all bg-white p-2 rounded mt-1 text-sm">${value}</div>
</div>
`;
}
}

html += `
</div>
<div class="space-y-2">
<h3 class="font-bold text-lg">Technical Metadata</h3>
`;

for (const [key, value] of Object.entries(decoded.metadata)) {
html += `
<div>
<strong class="text-gray-700">${key}:</strong>
<div class="break-all bg-white p-2 rounded mt-1 text-sm">
${typeof value === 'object' ? JSON.stringify(value, null, 2) : value}
</div>
</div>
`;
}

html += `
</div>
</div>
</div>
`;

resultDiv.innerHTML = html;
}

function loadExample(type) {
const examples = {
p2wpkh: {
data: "304402203a0f5f0e1f2bdbcd04db3061d18f3af70e07f4f467cbc1b8116f267025f5360b0220472b88f391186fbaa2d735d0630f241650f2874c47ac794e0be95b72fd1d57b901210279be667ef9dcbbac55a06295ce870b07029bfcdb2dce28d959f2815b16f81798",
description: "Standard P2WPKH witness with a DER-encoded signature (71 bytes) and a compressed public key (33 bytes)",
txReference: {
note: "To find similar transactions:",
steps: [
"Visit mempool.space",
"Look for transactions with 1 input and witness size ~108 bytes",
"Check for native SegWit addresses (bc1q...)"
],
explorerUrl: "https://mempool.space"
}
},
p2wsh: {
data: "304402200af4e47c9b9629dbecc21f73af989bdaa911f7e6f6c2e9394588a3aa68f81e9902204f3fcf6ade7e5abb1295b6774c8e0abd94ae62217367096bc02ee5e435b67da201210279be667ef9dcbbac55a06295ce870b07029bfcdb2dce28d959f2815b16f81798",
description: "2-of-2 multisig P2WSH witness with two signatures and a redeem script",
txReference: {
note: "To find similar transactions:",
steps: [
"Visit mempool.space",
"Look for transactions with witness size >200 bytes",
"Check for P2WSH addresses (bc1q...)"
],
explorerUrl: "https://mempool.space"
}
},
ordinal: {
data: "2029fbc3eb63a4a01d9af4bed0ff38ba8fa2c7b357744c4d9a5a4a3e87d5f84c9bac0063036f726401010f746578742f706c61696e0048656c6c6f",
description: "Ordinal inscription with 'text/plain' content type containing 'Hello'",
txReference: {
note: "To find real ordinal inscriptions:",
steps: [
"Visit ordinals.com/inscriptions",
"Look for recent text inscriptions",
"Check witness data in the inscription transaction"
],
explorerUrl: "https://ordinals.com"
}
},
taproot: {
data: "4140b32d0b2c9ed336e2c8f1c6f53bd1e0c6b91d34c0b4f8dcd8bbc9a1cea8a15c25d5383717a3c49d4788d787d973815e9d6e04d18f7b655886ecd049f9d8a578",
description: "Taproot key path spend with Schnorr signature",
txReference: {
note: "To find Taproot transactions:",
steps: [
"Visit mempool.space",
"Look for transactions with Taproot inputs (bc1p...)",
"Check for 64-byte Schnorr signatures in witness"
],
explorerUrl: "https://mempool.space"
}
}
};

const selected = examples[type];
document.getElementById('witnessInput').value = selected.data;
document.getElementById('exampleDescription').innerHTML = `
<div class="space-y-2">
<p>${selected.description}</p>
<div class="bg-gray-50 p-3 rounded">
<p class="font-semibold">${selected.txReference.note}</p>
<ol class="list-decimal pl-5 mt-1">
${selected.txReference.steps.map(step => `<li>${step}</li>`).join('')}
</ol>
<a href="${selected.txReference.explorerUrl}"
target="_blank"
class="text-blue-500 hover:text-blue-700 mt-2 inline-block">
🔍 Explore Similar Transactions
</a>
</div>
</div>
`;
}

</script>
<script src="script.js" defer></script>
</head>
<body class="bg-gray-50 min-h-screen p-8">
<div class="max-w-6xl mx-auto">
<h1 class="text-3xl font-bold mb-8 text-center">Bitcoin Witness Data Decoder</h1>

<div class="bg-white p-6 rounded-lg shadow-md">
<!-- Examples Section -->
<div class="mb-6">
<h2 class="text-xl font-bold mb-4">Quick Start with Examples</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4">
@@ -190,6 +32,7 @@ <h2 class="text-xl font-bold mb-4">Quick Start with Examples</h2>
<div id="exampleDescription" class="text-sm text-gray-600 italic mb-4"></div>
</div>

<!-- Input Section -->
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="witnessInput">
Witness Data (hex):
@@ -201,88 +44,105 @@ <h2 class="text-xl font-bold mb-4">Quick Start with Examples</h2>
></textarea>
</div>

<!-- Decode Button -->
<button
onclick="decodeWitnessData()"
class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors"
>
Decode
</button>

<!-- Results Section -->
<div id="result" class="mt-6"></div>
</div>

<!-- Information Panels -->
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Supported Types Panel -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4">Supported Witness Types</h2>
<div class="space-y-4">
<div>
<h3 class="font-bold text-lg text-blue-600">P2WPKH (Pay-to-Witness-Public-Key-Hash)</h3>
<h3 class="font-bold text-lg text-blue-600">P2WPKH</h3>
<ul class="list-disc pl-5 space-y-1 text-sm">
<li>DER signature validation (71-73 bytes)</li>
<li>Public key format detection (compressed/uncompressed)</li>
<li>SIGHASH type identification (ALL, NONE, SINGLE)</li>
<li>Signature component analysis (r and s values)</li>
<li>Public key format detection</li>
<li>SIGHASH type identification</li>
<li>Signature component analysis</li>
</ul>
</div>

<div>
<h3 class="font-bold text-lg text-green-600">P2WSH (Pay-to-Witness-Script-Hash)</h3>
<h3 class="font-bold text-lg text-green-600">P2WSH</h3>
<ul class="list-disc pl-5 space-y-1 text-sm">
<li>Stack item analysis and validation</li>
<li>Script pattern detection (multisig, time locks)</li>
<li>Witness stack element breakdown</li>
<li>Stack item analysis</li>
<li>Script pattern detection</li>
<li>Witness stack breakdown</li>
<li>Script complexity assessment</li>
</ul>
</div>

<div>
<h3 class="font-bold text-lg text-yellow-600">Ordinal Inscriptions</h3>
<ul class="list-disc pl-5 space-y-1 text-sm">
<li>Content type detection and validation</li>
<li>Metadata extraction and analysis</li>
<li>Size and efficiency metrics</li>
<li>Protocol compliance checking</li>
<li>Content type detection</li>
<li>Metadata extraction</li>
<li>Size metrics</li>
<li>Protocol compliance</li>
</ul>
</div>

<div>
<h3 class="font-bold text-lg text-purple-600">Taproot</h3>
<ul class="list-disc pl-5 space-y-1 text-sm">
<li>Schnorr signature validation</li>
<li>Key path vs Script path detection</li>
<li>Key/Script path detection</li>
<li>Control block analysis</li>
<li>Leaf version and script analysis</li>
<li>Leaf version checking</li>
</ul>
</div>
</div>
</div>

<!-- Data Conversion & Legend -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4">Understanding Witness Data</h2>
<div class="space-y-4 text-sm">
<p>Witness data is a crucial part of Bitcoin's SegWit upgrade, enabling:</p>
<ul class="list-disc pl-5 space-y-2">
<li>
<strong>Transaction Malleability Fix:</strong>
Separating signature data from transaction ID calculation
</li>
<li>
<strong>Advanced Script Types:</strong>
Supporting complex spending conditions and smart contracts
</li>
<li>
<strong>Block Space Efficiency:</strong>
Witness data receives a discount in block weight calculations
</li>
<li>
<strong>New Features:</strong>
Enabling innovations like Taproot and Ordinals
</li>
</ul>
<p class="mt-4">
This decoder helps you understand the structure and content of different witness types,
making it easier to debug transactions and learn about Bitcoin's script system.
</p>
<h2 class="text-xl font-bold mb-4">Data Conversion & Legend</h2>
<!-- Hex to ASCII Converter -->
<div class="mb-6">
<h3 class="font-bold text-lg mb-2">Hex Converter</h3>
<div class="space-y-2">
<input type="text" id="hexInput"
class="w-full p-2 border rounded"
placeholder="Enter hex value..."
onchange="convertHex()">
<input type="text" id="asciiOutput"
class="w-full p-2 border rounded bg-gray-100"
readonly
placeholder="ASCII result">
</div>
</div>

<!-- Color Legend -->
<div class="space-y-2">
<h3 class="font-bold text-lg mb-2">Witness Data Structure</h3>
<div class="grid grid-cols-1 gap-2">
<div class="flex items-center">
<div class="w-6 h-6 bg-yellow-200 rounded mr-2"></div>
<span>Signatures (DER/Schnorr)</span>
</div>
<div class="flex items-center">
<div class="w-6 h-6 bg-blue-200 rounded mr-2"></div>
<span>Protocol Markers</span>
</div>
<div class="flex items-center">
<div class="w-6 h-6 bg-green-200 rounded mr-2"></div>
<span>Public Keys & Metadata</span>
</div>
<div class="flex items-center">
<div class="w-6 h-6 bg-purple-200 rounded mr-2"></div>
<span>Content & Data</span>
</div>
</div>
</div>
</div>
</div>

0 comments on commit a3bffdf

Please sign in to comment.