j"19HxigV4QyBv3tHpQVcUEQyq1pzZVdoAutMu <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ColdWallet.Site - BSV Browser Based Cold Wallet</title>
<!-- bsv cdn unpkg -->
<script src="https://cdn.jsdelivr.net/npm/bsv@1.5.0/bsv.min.js"></script>
<!-- mnemonic cdn bsv -->
<script src="https://cdn.jsdelivr.net/npm/bsv@1.5.0/bsv-mnemonic.min.js"></script>
<!-- ecies -->
<script src="https://cdn.jsdelivr.net/npm/bsv@1.5.0/bsv-ecies.min.js"></script>
<!-- bsv message -->
<script src="https://cdn.jsdelivr.net/npm/bsv@1.5.0/bsv-message.min.js"></script>
<!-- qrious cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
color: #333;
line-height: 1.6;
padding: 20px;
}
.container {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 20px;
margin: 20px auto;
max-width: 800px;
word-wrap: break-word;
}
h1,
h2 {
color: #333;
}
button {
background-color: #008cba;
border: none;
border-radius: 5px;
color: white;
padding: 10px 20px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #005f73;
}
input[type="text"],
input[type="password"] {
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
width: 95%;
}
label {
display: block;
margin: 20px 0 5px;
}
#header {
text-align: center;
border-bottom: 5px solid #008cba;
padding-bottom: 20px;
margin-bottom: 20px;
}
#header h1 {
margin-bottom: 10px;
}
@media (max-width: 600px) {
.container {
margin: 10px auto;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container" id="header">
<h1>ColdWallet.Site</h1>
<p>Browser Based Cold Wallet</p>
</div>
<div class="container" id="importMnemonic">
<h2>Import Mnemonic</h2>
<p>Enter your mnemonic to import your wallet.</p>
<textarea name="" id="mnemonicImport" cols="30" rows="10"></textarea>
<button id="importMnemonicBtn">Import</button>
</div>
<div class="container" id="currentMnemonic">
<h2>Current Mnemonic</h2>
<p>This is your current mnemonic.</p>
<div id="currentMnemonicList"></div>
</div>
<div class="container" id="derivationPathSelection">
<h2>Derivation Path</h2>
<p>Select the derivation path for your addresses:</p>
<select id="derivationPath"></select>
<button id="generateAddressesBtn">Generate Addresses</button>
</div>
<div class="container" id="currentAddresses">
<h2>Current Paths & Addresses</h2>
<p>These are your current addresses.</p>
<div id="currentAddressesList"></div>
</div>
<div class="container" id="qrcodes"></div>
<div class="container" id="exportMnemonic">
<h2>Export Mnemonic</h2>
<p>Export your mnemonic.</p>
<button id="exportMnemonicBtn">Export</button>
</div>
<script>
const Buffer = bsv.deps.Buffer;
const Mnemonic = bsv.Mnemonic;
let mnemonic = new Mnemonic();
if (localStorage.mnemonic) {
mnemonic = Mnemonic.fromString(localStorage.mnemonic);
document.getElementById("currentMnemonicList").innerHTML =
mnemonic.toString();
}
const hdPrivateKey = bsv.HDPrivateKey.fromSeed(mnemonic.toSeed());
const hdPublicKey = bsv.HDPublicKey.fromHDPrivateKey(hdPrivateKey);
const addresses = [];
const qrcodes = [];
const derivationPaths = [
"m/44'/0'/0'/0/0",
"m/44'/0'/0'/0/1",
"m/44'/0'/0'/0/2",
"m/44'/0'/0'/0/3",
"m/44'/0'/0'/0/4",
"m/44'/0'/0'/0/5",
"m/44'/0'/0'/0/6",
"m/44'/0'/0'/0/7",
"m/44'/0'/0'/0/8",
"m/44'/0'/0'/0/9",
];
// Utility function to create a QR Code element
function createQRCodeElement(address) {
const qr = new QRious({
value: address,
size: 150,
});
const canvas = document.createElement("canvas");
canvas.getContext("2d").drawImage(qr.canvas, 0, 0);
return canvas;
}
// Render the QR codes and addresses to the UI
function renderAddressesAndQRCodes(addresses) {
const currentAddressesList = document.getElementById(
"currentAddressesList"
);
currentAddressesList.innerHTML = ""; // Clear the list
addresses.forEach((addressObj) => {
const div = document.createElement("div");
div.className = "address-item";
div.innerHTML = `
<div class="address-info">
<strong>Path:</strong> ${addressObj.path}<br>
<strong>Address:</strong> ${addressObj.address}
</div>
`;
const qrCodeCanvas = createQRCodeElement(addressObj.address);
qrCodeCanvas.className = "qrcode";
div.appendChild(qrCodeCanvas);
currentAddressesList.appendChild(div);
});
}
// Generate addresses for the selected derivation paths
function generateAddresses(hdPrivateKey, derivationPaths) {
const addresses = derivationPaths.map((path) => {
// Use hdPrivateKey for hardened paths
const childKey = hdPrivateKey.deriveChild(path).hdPublicKey; // Note the change here
const address = childKey.publicKey.toAddress().toString();
return { path, address };
});
return addresses;
}
// Event listener for the "Generate Addresses" button
document
.getElementById("generateAddressesBtn")
.addEventListener("click", () => {
const selectedDerivationPathIndex =
document.getElementById("derivationPath").selectedIndex;
const selectedDerivationPaths = derivationPaths.slice(
0,
selectedDerivationPathIndex + 1
);
// Pass hdPrivateKey instead of hdPublicKey
const generatedAddresses = generateAddresses(
hdPrivateKey,
selectedDerivationPaths
);
renderAddressesAndQRCodes(generatedAddresses);
});
// Populate the derivation path select element
function populateDerivationPathSelect(derivationPaths) {
const derivationPathSelect = document.getElementById("derivationPath");
derivationPaths.forEach((path, index) => {
const option = document.createElement("option");
option.value = index; // Index as value to know how many to generate
option.textContent = path;
derivationPathSelect.appendChild(option);
});
}
// Initialize the select with derivation paths
populateDerivationPathSelect(derivationPaths);
// Event listener for the "Import Mnemonic" button
document
.getElementById("importMnemonicBtn")
.addEventListener("click", () => {
const mnemonicImport =
document.getElementById("mnemonicImport").value;
mnemonic = Mnemonic.fromString(mnemonicImport);
localStorage.mnemonic = mnemonicImport;
document.getElementById("currentMnemonicList").innerHTML =
mnemonic.toString();
});
// Event listener for the "Export Mnemonic" button
document
.getElementById("exportMnemonicBtn")
.addEventListener("click", () => {
const mnemonicExport = document.getElementById(
"currentMnemonicList"
).innerHTML;
navigator.clipboard.writeText(mnemonicExport);
alert("Mnemonic copied to clipboard!");
});
</script>
</body>
</html> text/htmlutf-8|"1PuQa7K62MiKCtssSLKy1kh56WWU7MtUR5SETapp
utxo-cloudtypewebsiteauthor"1GNj36sniQFZEHdxjyhXf5jfy8LpHqzeJL
https://whatsonchain.com/tx/8e973fe1a8ccca48eda437bbf125f019b68c77496e4e3f8ba6a14cbdd31b5e6d