bitbtn
Version:
An UI Button for interacting with Bitcoin SV wallets (written in pure JS - no dependencies)
222 lines (189 loc) • 8.31 kB
HTML
<head>
<title>BTN Manual Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
#console-area {
margin: auto;
margin-top: 2em;
width: 80%;
height: 15em;
overflow-y: scroll;
overflow-x: inherit;
background: rgb(66, 66, 66);
color: white;
}
#console-area .error {
color: rgb(255, 98, 98);
}
#console-area .warn {
color: rgb(255, 164, 28);
}
#console-area a {
color: inherit;
}
</style>
<h1>Regular BitBtn</h1>
<div id="button-area">
</div>
<h1>BIP21 BitBtn</h1>
<div id="button-area21">
</div>
<h1>Open Other Links</h1>
<div id="other-button-area">
</div>
<div id="console-area"></div>
<h3>How to test Payment:</h3>
<ul>
<li>Open this page in the most popular browsers for your device type.</li>
<li>Make sure you have a wallet that supports BIP21 deep links!</li>
<li>- Did your OS ask you to open your wallet?</li>
<li>- Did the circle in the button become green?</li>
<li>- Did any errors apear in the console (the black box)?</li>
<li>- Take a screenshot of what happened.</li>
</ul>
<h3>How to test opening an app without having a wallet:</h3>
<ul>
<li>This is most useful on smartphones.</li>
<li>Open this page in the most popular browsers for your device type.</li>
<li>Make sure you have the facebook application installed!</li>
<li>Test if Facebook App opens the normal way, by clicking here: <a href="fb://page/">Open Facebook App</a></li>
<li>If this worked, click the "Facebook App" button</li>
<li>- Did Facebook Open?</li>
<li>- Did the circle in the button become green?</li>
<li>- Were there any errors in the console (the black box)?</li>
<li>- Take a screenshot of what happened?</li>
</ul>
<h3>How to test not having a wallet, without uninstalling your wallet:</h3>
<ul>
<li>Open this page in the most popular browsers for your device type.</li>
<li>Click on the "This button will always Fail" button!</li>
<li>- Did the Modal Window pop up?</li>
<li>- Did the Modal Window wook normal?</li>
<li>- (If you are on desktop) Did the QR code appear?</li>
<li>- (If you are NOT on desktop) Did the QR code NOT appear?</li>
<li>- Did the list of possible wallets to download appear?</li>
<li>- Did the circle in the button become red?</li>
<li>- Were there any errors in the console (the black box)?</li>
<li>- Take a screenshot of what happened?</li>
</ul>
<script src="../../src/bitbtn.js"></script>
<script>
</script>
<script>
(function () {
var defaultLog = console.log;
var defaultErr = console.error;
var defaultWarn = console.warn;
var consoleArea = document.getElementById("console-area");
consoleArea.appendLine = function (args, lineClass) {
var line = document.createElement("div");
line.classList.add(lineClass);
for (var i = 0; i < args.length; i++) {
line.append(args[i] + " ");
}
consoleArea.appendChild(line);
};
console.log = function () {
defaultLog.apply(this, arguments);
consoleArea.appendLine(arguments, "log");
};
console.error = function () {
defaultErr.apply(this, arguments);
consoleArea.appendLine(arguments, "error");
};
console.warn = function () {
defaultWarn.apply(this, arguments);
consoleArea.appendLine(arguments, "warn");
};
window.onerror = function (errorMsg, url, lineNumber) {
var line = document.createElement("div");
line.classList.add("error");
line.innerHTML = "[ERROR] '" + errorMsg + "' in <a href='" + url + "'>"
+ url.substring(url.lastIndexOf("/")) + "</a> : line " + lineNumber
consoleArea.appendChild(line);
};
function addLoggingToBtn(btn) {
var oldClick = btn.onclick;
btn.onclick = function (e) {
console.log("[EVENT] BitBtn Clicked!");
oldClick(e);
};
}
window.addEventListener('beforeunload', () => console.log('[Event] beforeunload'), false);
window.addEventListener('pagehide', () => console.log('[Event] pagehide'), false);
window.addEventListener('blur', () => console.log('[Event] blur'), false);
(function () {
btn_out = bitbtn.create(document.getElementById("button-area"),
{
label: "Pay with OutputURI",
address: "1CiesvEUNg9sVm8ekhMrGyATvEnH5YU9wh",
amount: 1.247,
currency: "USD",
onError: function (error) { console.error(error); },
});
btn_out2 = bitbtn.create(document.getElementById("button-area"),
{
label: "Pay with Many Outputs",
outputs: [
{
address: "1CiesvEUNg9sVm8ekhMrGyATvEnH5YU9wh",
amount: 1,
currency: "USD",
},
{
script: bitbtn.scripter.p2pkh("1CiesvEUNg9sVm8ekhMrGyATvEnH5YU9wh"),
amount: 0.247,
currency: "USD"
},
{
script: bitbtn.scripter.op_return(
bitbtn.scripter.str2hex([
"19HxigV4QyBv3tHpQVcUEQyq1pzZVdoAut",
"BitBtn is Awesome!"
])),
amount: 0
},
],
onError: function (error) { console.error(error); },
});
btn_bip21 = bitbtn.create(document.getElementById("button-area21"),
{
label: "Pay with BIP21",
address: "1CiesvEUNg9sVm8ekhMrGyATvEnH5YU9wh",
amount: 1.247,
currency: "USD",
bip21:true,
onError: function (error) { console.error(error); },
});
btn_fb = bitbtn.create(document.getElementById("other-button-area"),
{
label: "Facebook App",
address: "1CiesvEUNg9sVm8ekhMrGyATvEnH5YU9wh",
amount: 0.0000001,
currency: "USD",
onError: function (error) { console.error(error); },
});
btn_fb.setURI("fb://page/");
btn_fb.setAmount("");
btn_no = bitbtn.create(document.getElementById("other-button-area"),
{
label: "This button will always Fail",
address: "1CiesvEUNg9sVm8ekhMrGyATvEnH5YU9wh",
amount: 0.0000001,
currency: "USD",
onError: function (error) { console.error(error); },
});
btn_no.setURI("nosuchapplicationuri:");
btn_no.setAmount("");
}());
var bitBtns = document.getElementsByClassName("bitbtn");
for (var b in bitBtns) {
addLoggingToBtn(bitBtns[b]);
}
}());
</script>
</body>
</html>