Merge pull request #3 from k-nuth/feat/examples

Add Examples
k-nuth · Dec 5, 2023 · bc6d685 · bc6d685
2 parents f947c0d + a58ecfd
commit bc6d685
Show file tree

Hide file tree

Showing 8 changed files with 374 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Knuth JS-WASM
 
-> WebAssembly interface for Bitcoin Cash full node as a Javascript/TypeScript library
+> WebAssembly interface for Bitcoin Cash full node
 
 [![NPM Version](https://img.shields.io/npm/v/@knuth/js-wasm?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/@knuth/js-wasm)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHYcAAB2HAY%2Fl8WUAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAADB0lEQVR4XtWagXETMRREUwIlUAIlUAodQAl0AJ1AB9BB6AA6gA6MduKbkX%2BevKecNk525jHO3l%2Fp686xlJC70%2Bl0C942vjV%2Bn9FreVQbBc0wWujfRpW8Z78JaIb53hhJ1ygTA80w9PQ36duBMjHQHPCuoQZfutSjeqU1PAJN4E3j2pN7aVKv6pnWcgGawNfGa5N6prVcgGZBn8yvVXZXQbOgPXokXaPMNZwoc41D%2FaHZ8b7hpBrKjnCizIjD%2FaHZ8aPR6%2BeZXqqh7Agnyow43B%2BaZz40qnQ36a6rlsYgnChDLOkPzTN1z%2B9PafU0N3OAcaIMsaQ%2FNBufG1X9JyrtDMr0Y4xwokxlWX%2BPjAYdemhPrWeDvYcPJ8r0LO3v4oszNfivQQuTp2u9qJGKE2V6lvZ38UVj9q3t3oqEE2U2lvfXF4t6qPjTqDUV1fRyhw8nymws768vfOr2NtqOqFY4UUZE%2BusL6VDRX7%2FGzOHDiTIi0t9WMPsUKzNPx4kysf62gmuHir3sPXw4USbWny485ZOc2PsJ7VTro%2F3pwp5DxV7qHq2xa41TrY%2F2J7PfJkaHir3UwwdtU061PtqfTP0CUaYm2v3LxCtoDI2lMWk8p1of7Y8K0jhRJgaaYZwoE0P%2FpFUndZqtP6T4BE2zC5qtP6T4BE2zC5qtPyRN8OvhZUQae3ZBtT7anyb49PA6Ivp5wKnWR%2FvbJkncZXr6wokysf62CXRCWjmJxhqd2JwoE%2BuvTqS37JGJlB39GLzhRJmN5f31gz8XTpSJgWYYJ8rEQDOME2VioBnGiTIx0AzjRJkYaIZxokwMNMM4USYGmmGcKBMDzTBOlImBZhgnysRAM4wTZWKgGcaJMjHQDONEmRhohnGiTAw0wzhRJgaaYZwoEwPNME6UiYFmGCfKxEAzjBNlYqAZxokyMdAMoL%2FO%2BNi4bzjpT1e%2BNFb8V7gFzUXMLHqk%2BM1A8wArFj1S5GagOUly0SMtuxloTnJrUU%2B7QXOSW4t62g2ak9xa1NNu0Jzk1qKednK6%2Bw9roIB8keT%2F3QAAAABJRU5ErkJggg%3D%3D)](LICENSE.md)

diff --git a/examples/address-converter/index.html b/examples/address-converter/index.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+  <title>Knuth Address Converter</title>
+	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
+
+	<style>
+
+        body {
+            /* font-family: 'Roboto', sans-serif; */
+			font-family: 'Source Code Pro', monospace;
+            text-align: center;
+            margin-top: 50px;
+            background-color: black;
+            /* color: #0f0; */
+			color: #009900;
+        }
+		h1 {
+			color: #800080; /* Color púrpura neón */
+		}
+		#inputBox {
+			margin-bottom: 20px;
+			padding: 12px;
+			font-size: 18px;
+			width: 40%;
+			background-color: black;
+			color: #009900;
+			border: 2px solid #009900;
+			border-radius: 10px;
+			font-family: 'Source Code Pro', monospace;
+			transition: border-color 0.3s, color 0.3s;
+			outline: none; /* Eliminar el resaltado al enfocar */
+		}
+		#inputBox:hover {
+			border-color: #0f0;
+			color: #0f0;
+		}
+		#inputBox:focus {
+			border-color: #0f0;
+			color: #0f0;
+		}
+		#convertButton {
+			padding: 10px 20px;
+			font-size: 16px;
+			cursor: pointer;
+			background-color: black;
+			color: #009900;
+			border: 2px solid #009900;
+			border-radius: 10px;
+			transition: border-color 0.3s;
+			transition: color 0.3s;
+			font-family: 'Source Code Pro', monospace;
+		}
+		#convertButton:hover {
+			border-color: #0f0;
+			color: #0f0
+		}
+        .label {
+            margin-top: 20px;
+            font-size: 18px;
+            font-family: 'Source Code Pro', monospace;
+        }
+		.message {
+			margin-top: 20px;
+			font-size: 16px;
+			color: red;
+			background-color: black;
+			border: 2px solid red;
+			border-radius: 10px;
+			padding: 10px;
+			display: none;
+			font-family: 'Source Code Pro', monospace;
+		}
+    </style>
+</head>
+<body>
+	<h1>Knuth Address Converter</h1>
+
+    <div id="loadingMessage">Loading Knuth<span id="loadingDots"></span></div>
+
+    <input type="text" id="inputBox" placeholder="Enter Bitcoin Cash Address">
+    <button id="convertButton">Convert</button>
+
+	<div id="errorMessage" style="display: none;" class="message"></div>
+    <div class="label" id="cashAddressLabel" style="display: none;">Cash Address: <span id="cashAddress"></span></div>
+    <div class="label" id="legacyAddressLabel" style="display: none;">Legacy Address: <span id="legacyAddress"></span></div>
+    <div class="label" id="cashTokensLabel" style="display: none;">Cash Tokens: <span id="cashTokens"></span></div>
+
+	<script type="text/javascript" src="kth.js"></script>
+	<script type="text/javascript">
+
+		function delay(ms) {
+			return new Promise(resolve => setTimeout(resolve, ms));
+		}
+
+		const { loadLib, Kth, PaymentAddress } = __KTH_MODULE__;
+		window.Kth = Kth;
+		window.PaymentAddress = PaymentAddress;
+
+		function animateLoadingDots() {
+			let dots = document.getElementById('loadingDots');
+			let count = 0;
+			setInterval(() => {
+				dots.textContent = '.'.repeat(count % 4);
+				count++;
+			}, 500);
+		}
+		animateLoadingDots();
+
+
+		loadLib('kth.wasm', 'kth.js').then(delay(2000)).then(async function() {
+			console.log('Kth loaded');
+			console.log(Kth.getLibconfig());
+
+			document.getElementById('inputBox').disabled = false;
+			document.getElementById('convertButton').disabled = false;
+
+			document.getElementById('loadingMessage').style.display = 'none';
+		});
+
+		document.getElementById('inputBox').addEventListener('input', function() {
+			document.getElementById('errorMessage').style.display = 'none';
+			document.getElementById('cashAddressLabel').style.display = 'none';
+			document.getElementById('legacyAddressLabel').style.display = 'none';
+			document.getElementById('cashTokensLabel').style.display = 'none';
+		});
+
+		document.getElementById('convertButton').addEventListener('click', function() {
+			var inputAddress = document.getElementById('inputBox').value;
+
+			if ( ! inputAddress) {
+				document.getElementById('errorMessage').textContent = 'Please enter a Bitcoin Cash address';
+				document.getElementById('errorMessage').style.display = 'block';
+				return;
+			}
+
+			const addr = PaymentAddress.fromString(inputAddress);
+			if  ( ! addr) {
+				document.getElementById('errorMessage').textContent = 'Invalid address';
+				document.getElementById('errorMessage').style.display = 'block';
+				return;
+			}
+
+			document.getElementById('cashAddress').textContent = addr?.encodedCashAddr();
+			document.getElementById('legacyAddress').textContent = addr?.encodedLegacy();
+			document.getElementById('cashTokens').textContent = addr?.encodedCashTokens();
+
+			document.getElementById('cashAddressLabel').style.display = 'block';
+			document.getElementById('legacyAddressLabel').style.display = 'block';
+			document.getElementById('cashTokensLabel').style.display = 'block';
+
+		});
+
+	</script>
+</body>
+</html>
diff --git a/examples/address-converter/kth.js b/examples/address-converter/kth.js
diff --git a/examples/address-converter/kth.wasm b/examples/address-converter/kth.wasm
diff --git a/examples/address-generator/index.html b/examples/address-generator/index.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+  	<title>Bitcoin Address Generator (Knuth)</title>
+
+	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+  	<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
+
+	<style>
+
+        body {
+            /* font-family: 'Roboto', sans-serif; */
+			font-family: 'Source Code Pro', monospace;
+            text-align: center;
+            margin-top: 50px;
+            background-color: black;
+            /* color: #0f0; */
+			color: #009900;
+        }
+		h1 {
+			color: #800080; /* Color púrpura neón */
+		}
+
+
+		.styled-input {
+			margin-bottom: 20px;
+			padding: 12px;
+			font-size: 18px;
+			width: 40%;
+			background-color: black;
+			color: #009900;
+			border: 2px solid #009900;
+			border-radius: 10px;
+			font-family: 'Source Code Pro', monospace;
+			transition: border-color 0.3s, color 0.3s;
+			outline: none; /* Eliminar el resaltado al enfocar */
+		}
+
+		.styled-input:hover {
+			border-color: #0f0;
+			color: #0f0;
+		}
+
+		.styled-input:focus {
+			border-color: #0f0;
+			color: #0f0;
+		}
+
+		#mnemonic {
+			width: 60%;
+		}
+
+		#derivationPath {
+			width: 15%;
+		}
+
+		#numAddresses {
+			width: 5%;
+		}
+
+		#networkType {
+			width: 10%;
+		}
+
+		#addressList {
+			list-style-type: none;
+			padding: 0;
+		}
+
+		#generateButton {
+			padding: 10px 20px;
+			font-size: 16px;
+			cursor: pointer;
+			background-color: black;
+			color: #009900;
+			border: 2px solid #009900;
+			border-radius: 10px;
+			transition: border-color 0.3s;
+			transition: color 0.3s;
+			font-family: 'Source Code Pro', monospace;
+		}
+		#generateButton:hover {
+			border-color: #0f0;
+			color: #0f0
+		}
+        .label {
+            margin-top: 20px;
+            font-size: 18px;
+            font-family: 'Source Code Pro', monospace;
+        }
+		.message {
+			margin-top: 20px;
+			font-size: 16px;
+			color: red;
+			background-color: black;
+			border: 2px solid red;
+			border-radius: 10px;
+			padding: 10px;
+			display: none;
+			font-family: 'Source Code Pro', monospace;
+		}
+    </style>
+</head>
+<body>
+	<h1>Bitcoin Address Generator (Knuth)</h1>
+
+    <div id="loadingMessage">Loading Knuth<span id="loadingDots"></span></div>
+
+
+    <div>
+        <label for="mnemonic">Mnemonic (12/24 words):</label>
+        <input type="text" class="styled-input" id="mnemonic" placeholder="Enter 12/24-word mnemonic" value="car slab tail dirt wife custom front shield diet pear skull vapor gorilla token yard">
+    </div>
+
+    <div>
+        <label for="derivationPath">Derivation Path:</label>
+        <input type="text" class="styled-input" id="derivationPath" value="m/44'/145'/0'/0">
+    </div>
+
+    <div>
+        <label for="numAddresses">Number of Addresses:</label>
+        <input type="number" class="styled-input" id="numAddresses" min="1" value="20">
+    </div>
+
+	<button id="generateButton">Generate</button>
+
+	<div id="errorMessage" style="display: none;" class="message"></div>
+
+	<div id="results"></div>
+
+	<script type="text/javascript" src="kth.js"></script>
+	<script type="text/javascript">
+
+		function delay(ms) {
+			return new Promise(resolve => setTimeout(resolve, ms));
+		}
+
+		const { loadLib, Kth, PaymentAddress, Wallet } = __KTH_MODULE__;
+		window.Kth = Kth;
+		window.PaymentAddress = PaymentAddress;
+		window.Wallet = Wallet;
+
+		function animateLoadingDots() {
+			let dots = document.getElementById('loadingDots');
+			let count = 0;
+			setInterval(() => {
+				dots.textContent = '.'.repeat(count % 4);
+				count++;
+			}, 500);
+		}
+		animateLoadingDots();
+
+		loadLib('kth.wasm', 'kth.js').then(delay(2000)).then(async function() {
+			console.log('Kth loaded');
+			console.log(Kth.getLibconfig());
+			document.getElementById('generateButton').disabled = false;
+			document.getElementById('loadingMessage').style.display = 'none';
+		});
+
+		document.getElementById('generateButton').addEventListener('click', async function() {
+			document.getElementById('results').innerHTML = '';
+
+			const mnemonicStr = document.getElementById('mnemonic').value;
+			const derivationPath = document.getElementById('derivationPath').value;
+			const numAddresses = parseInt(document.getElementById('numAddresses').value);
+			const networkType = 'mainnet';
+
+			const mnemonics = mnemonicStr.split(' ');
+			const wallet = new Wallet(mnemonics, derivationPath, networkType.toUpperCase());
+			const rootKey = wallet.rootKey;
+			const extPrivateKey = wallet.extendedPrivateKey;
+			const extPublicKey = wallet.extendedPublicKey;
+
+			let resultsHtml = `
+				<p><strong>BIP32 Root Key:</strong> ${rootKey}</p>
+				<p><strong>Extended Private Key:</strong> ${extPrivateKey}</p>
+				<p><strong>Extended Public Key:</strong> ${extPublicKey}</p>
+				<p id="loadingAddresses">Generating addresses<span id="loadingDots"></span></p>
+			`;
+
+			document.getElementById('results').innerHTML = resultsHtml;
+    		animateLoadingDots();
+
+			const addresses = await wallet.getAddresses(numAddresses);
+
+			resultsHtml += `
+				<ul id="addressList">
+			`;
+			for (let i = 0; i < addresses.length; i++) {
+					resultsHtml += `<li>${addresses[i].encodedCashAddr()}</li>`;
+			}
+			resultsHtml += `</ul>`;
+
+    		document.getElementById('results').innerHTML = resultsHtml;
+		});
+
+	</script>
+</body>
+</html>
diff --git a/examples/address-generator/kth.js b/examples/address-generator/kth.js
diff --git a/examples/address-generator/kth.wasm b/examples/address-generator/kth.wasm
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@knuth/js-wasm",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "publishConfig": {
         "access": "public"
     },