Add some UX design to crypto UI
This commit is contained in:
parent
c68aa1eacf
commit
7dfd76438d
@ -82,7 +82,7 @@ function createSignedTransaction(bitcoreLib, privateKeyString, sourceAddress, de
|
||||
}
|
||||
|
||||
try {
|
||||
return transaction.serialize();
|
||||
return {serialized: transaction.serialize(), fee: fee, sendamount: outputSatoshis, totalspent: outputTotal};
|
||||
} catch (ex) {
|
||||
throw new Error("Couldn't create the transaction. It's likely you typed something wrong. Check that you have enough funds.");
|
||||
}
|
||||
@ -137,11 +137,11 @@ function getUTXOData(walletaddress, successCallback, errorCallback) {
|
||||
sendErrorReport("Crypto", "Couldn't get UTXO data", error.msg);
|
||||
} else {
|
||||
errorCallback("There's a server or network problem. Check your Internet connection or try again later. Your funds are safe.");
|
||||
sendErrorReport("Crypto", "Couldn't get UTXO data", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
|
||||
sendErrorReport("Crypto", "Couldn't get UTXO data", "Server/network problem: " + errorData.status + ": " + errorData.statusText);
|
||||
}
|
||||
} catch (ex) {
|
||||
errorCallback("There's a server or network problem. Check your Internet connection or try again later. Your funds are safe.");
|
||||
sendErrorReport("Crypto", "Couldn't get UTXO data", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
|
||||
sendErrorReport("Crypto", "Couldn't get UTXO data", "Server/network problem: " + errorData.status + ": " + errorData.statusText);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -190,17 +190,24 @@ function sendCoins(privatekey, fromaddress, toaddress, amount) {
|
||||
return;
|
||||
}
|
||||
|
||||
progressdialog.setProgress(80);
|
||||
progressdialog.setText("Sending payment...");
|
||||
progressdialog.close();
|
||||
|
||||
app.dialog.confirm("Sending " + (txdata.sendamount / 100000000) + " " + success.currency
|
||||
+ " with a fee of " + (txdata.fee / 100000000) + " " + success.currency
|
||||
+ " for a total spend of " + (txdata.totalspent / 100000000) + " " + success.currency + ".",
|
||||
"Confirm Transaction",
|
||||
function (ok) {
|
||||
progressdialog = app.dialog.progress("Sending payment...", 80);
|
||||
|
||||
apirequest(SETTINGS.apis.broadcasttransaction, {
|
||||
transactiondata: txdata,
|
||||
transactiondata: txdata.serialized,
|
||||
currency: success.currency
|
||||
}, function (resp) {
|
||||
if (resp.status == "OK") {
|
||||
app.dialog.close();
|
||||
app.dialog.alert("Sent " + amount + " " + success.currency + " to " + toaddress.substring(0, 5) + "..." + toaddress.substring(toaddress.length - 5, 999), "Success!");
|
||||
$('#walletPrivateKey').val(""); // clear private key input box
|
||||
app.popup.close();
|
||||
return;
|
||||
} else {
|
||||
app.dialog.close();
|
||||
@ -215,13 +222,14 @@ function sendCoins(privatekey, fromaddress, toaddress, amount) {
|
||||
sendErrorReport("Crypto", "Couldn't broadcast transaction", error.msg);
|
||||
} else {
|
||||
app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later. Your funds are safe.", "Error");
|
||||
sendErrorReport("Crypto", "Couldn't broadcast transaction", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
|
||||
sendErrorReport("Crypto", "Couldn't broadcast transaction", "Server/network problem: " + errorData.status + ": " + errorData.statusText);
|
||||
}
|
||||
} catch (ex) {
|
||||
app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later. Your funds are safe.", "Error");
|
||||
sendErrorReport("Crypto", "Couldn't broadcast transaction", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
|
||||
sendErrorReport("Crypto", "Couldn't broadcast transaction", "Server/network problem: " + errorData.status + ": " + errorData.statusText);
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
app.dialog.close();
|
||||
app.dialog.alert(resp.msg, "Error");
|
||||
@ -235,11 +243,11 @@ function sendCoins(privatekey, fromaddress, toaddress, amount) {
|
||||
sendErrorReport("Crypto", "Couldn't get transaction fees", error.msg);
|
||||
} else {
|
||||
app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later. Your funds are safe.", "Error");
|
||||
sendErrorReport("Crypto", "Couldn't get transaction fees", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
|
||||
sendErrorReport("Crypto", "Couldn't get transaction fees", "Server/network problem: " + errorData.status + ": " + errorData.statusText);
|
||||
}
|
||||
} catch (ex) {
|
||||
app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later. Your funds are safe.", "Error");
|
||||
sendErrorReport("Crypto", "Couldn't get transaction fees", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
|
||||
sendErrorReport("Crypto", "Couldn't get transaction fees", "Server/network problem: " + errorData.status + ": " + errorData.statusText);
|
||||
}
|
||||
});
|
||||
}, function (error) {
|
||||
@ -249,7 +257,7 @@ function sendCoins(privatekey, fromaddress, toaddress, amount) {
|
||||
}
|
||||
|
||||
function walletGUISendCoins() {
|
||||
if (!walletPubKeyRegex.test($('#walletFromAddress').val())) {
|
||||
if (!walletPubKeyRegex.test($('#walletAddress').text())) {
|
||||
app.dialog.alert("Your wallet address doesn't look right. Check it and try again.", "Error");
|
||||
return;
|
||||
}
|
||||
@ -271,12 +279,14 @@ function walletGUISendCoins() {
|
||||
app.dialog.alert("The recipient's wallet address doesn't look right. Check it and try again.", "Error");
|
||||
return;
|
||||
}
|
||||
sendCoins($('#walletPrivateKey').val(), $('#walletFromAddress').val(), $('#walletToAddress').val(), parseFloat($('#transactionAmount').val()));
|
||||
sendCoins($('#walletPrivateKey').val(), $('#walletAddress').text(), $('#walletToAddress').val(), parseFloat($('#transactionAmount').val()));
|
||||
}
|
||||
|
||||
function displayWalletBalance(address) {
|
||||
function openWalletBalancePage( {to, resolve, reject}) {
|
||||
var address = to.params.walletaddress;
|
||||
if (!walletPubKeyRegex.test(address)) {
|
||||
app.dialog.alert("That doesn't look like a valid wallet address.", "Error");
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -286,16 +296,29 @@ function displayWalletBalance(address) {
|
||||
}, function (resp) {
|
||||
app.dialog.close();
|
||||
if (resp.status == "OK") {
|
||||
$("#walletBalancePopup #walletBalanceAmount").text(resp.balance + " " + resp.currency);
|
||||
$("#walletBalancePopup #walletFiatAmount").text(resp.usdvalue);
|
||||
$("#walletBalancePopup #walletCurrency").text(resp.label);
|
||||
$("#walletBalancePopup #walletBalanceAttribution").text(resp.attribution);
|
||||
$("#walletBalancePopup #walletBalanceLogo").attr("src", "./assets/images/crypto/" + resp.currency + ".svg");
|
||||
app.popup.open("#walletBalancePopup");
|
||||
var context = {
|
||||
balance: resp.balance,
|
||||
currencyunit: resp.currency,
|
||||
fiatvalue: resp.usdvalue,
|
||||
currencyname: resp.label,
|
||||
attribution: resp.attribution,
|
||||
logo: "./assets/images/crypto/" + resp.currency + ".svg",
|
||||
walletaddress: to.params.walletaddress
|
||||
};
|
||||
resolve({
|
||||
content: compiledPages.crypto_wallet(context)
|
||||
});
|
||||
$("#walletBalanceAmount").text(resp.balance + " " + resp.currency);
|
||||
$("#walletFiatAmount").text(resp.usdvalue);
|
||||
$("#walletCurrency").text(resp.label);
|
||||
$("#walletBalanceAttribution").text(resp.attribution);
|
||||
$("#walletBalanceLogo").attr("src", "./assets/images/crypto/" + resp.currency + ".svg");
|
||||
} else {
|
||||
reject();
|
||||
app.dialog.alert(resp.msg, "Error");
|
||||
}
|
||||
}, function (error) {
|
||||
reject();
|
||||
app.dialog.close();
|
||||
try {
|
||||
var error = $.parseJSON(error.responseText);
|
||||
@ -304,14 +327,13 @@ function displayWalletBalance(address) {
|
||||
sendErrorReport("Crypto", "Couldn't get wallet balance", error.msg);
|
||||
} else {
|
||||
app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later. Your funds are safe.", "Error");
|
||||
sendErrorReport("Crypto", "Couldn't get wallet balance", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
|
||||
sendErrorReport("Crypto", "Couldn't get wallet balance", "Server/network problem: " + error.status + ": " + error.statusText);
|
||||
}
|
||||
} catch (ex) {
|
||||
app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later. Your funds are safe.", "Error");
|
||||
sendErrorReport("Crypto", "Couldn't get wallet balance", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
|
||||
sendErrorReport("Crypto", "Couldn't get wallet balance", "Server/network problem: " + error.status + ": " + error.statusText);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@ -334,6 +356,27 @@ function setupFiatConversion(walletAddress) {
|
||||
$("#cryptoAmountSendFiatLabel").text("$");
|
||||
$("#transactionAmountFiat").data("exchange-rate", resp.exchangerates.usd);
|
||||
$("#transactionAmountFiat").data("cryptocurrency", resp.currency);
|
||||
|
||||
$("#transactionAmount").off("input change paste keyup");
|
||||
$("#transactionAmountFiat").off("input change paste keyup");
|
||||
|
||||
$("#transactionAmount").on("input change paste keyup", function () {
|
||||
if ($("#cryptoFiatInputItem").css("display") == "none") {
|
||||
return;
|
||||
}
|
||||
var amount = parseFloat($("#transactionAmount").val());
|
||||
var exchangerate = parseFloat($("#transactionAmountFiat").data("exchange-rate"));
|
||||
$("#transactionAmountFiat").val((amount * exchangerate).toFixed(2));
|
||||
//$("#transactionAmount").val(amount.toFixed(8));
|
||||
});
|
||||
$("#transactionAmountFiat").on("input change paste keyup", function () {
|
||||
if ($("#cryptoFiatInputItem").css("display") == "none") {
|
||||
return;
|
||||
}
|
||||
var fiatamount = parseFloat($("#transactionAmountFiat").val());
|
||||
var exchangerate = parseFloat($("#transactionAmountFiat").data("exchange-rate"));
|
||||
$("#transactionAmount").val((fiatamount / exchangerate).toFixed(8));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -346,29 +389,14 @@ function unsetupFiatConversion() {
|
||||
$("#cryptoAmountSendCurrencyLabel").text("");
|
||||
$("#transactionAmountFiat").removeData("exchange-rate");
|
||||
$("#transactionAmountFiat").removeData("cryptocurrency");
|
||||
$("#transactionAmount").off("input change paste keyup");
|
||||
$("#transactionAmountFiat").off("input change paste keyup");
|
||||
}
|
||||
|
||||
$("#app").on("input change paste keyup", "#transactionAmountFiat", function () {
|
||||
var fiatamount = parseFloat($("#transactionAmountFiat").val());
|
||||
var exchangerate = parseFloat($("#transactionAmountFiat").data("exchange-rate"));
|
||||
$("#transactionAmount").val((fiatamount / exchangerate).toFixed(8));
|
||||
//$("#transactionAmountFiat").val(fiatamount.toFixed(2));
|
||||
});
|
||||
|
||||
$("#app").on("paste blur", "#walletFromAddress", function () {
|
||||
if (walletPubKeyRegex.test($("#walletFromAddress").val())) {
|
||||
setupFiatConversion($("#walletFromAddress").val());
|
||||
$("#app").on("click", "#sendCryptoOpenPopupBtn", function () {
|
||||
if (walletPubKeyRegex.test($("#walletAddress").text())) {
|
||||
setupFiatConversion($("#walletAddress").text());
|
||||
} else {
|
||||
unsetupFiatConversion();
|
||||
}
|
||||
});
|
||||
|
||||
$("#app").on("input change paste keyup", "#transactionAmount", function () {
|
||||
if ($("#cryptoFiatInputItem").css("display") == "none") {
|
||||
return;
|
||||
}
|
||||
var amount = parseFloat($("#transactionAmount").val());
|
||||
var exchangerate = parseFloat($("#transactionAmountFiat").data("exchange-rate"));
|
||||
$("#transactionAmountFiat").val((amount * exchangerate).toFixed(2));
|
||||
//$("#transactionAmount").val(amount.toFixed(8));
|
||||
});
|
||||
@ -43,7 +43,7 @@ function openGenericBarcodeScanner() {
|
||||
sendPickupCode(code);
|
||||
break;
|
||||
case "cryptowallet":
|
||||
router.navigate("/crypto/balance/" + code);
|
||||
router.navigate("/crypto/" + code);
|
||||
break;
|
||||
case "sendcrypto":
|
||||
app.dialog.alert("Not implemented.");
|
||||
|
||||
@ -13,25 +13,32 @@
|
||||
<span class="if-not-md">Back</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title">Wallet</div>
|
||||
<div class="title">Crypto Wallet</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 medium-50 xlarge-50 margin-horizontal">
|
||||
<div class="card">
|
||||
<div class="card-header">Check Wallet Balance</div>
|
||||
<div class="card-content card-content-padding">
|
||||
Check the current balance of your physical crypto wallet. Just press the button and point your camera at the Wallet Address code, or type in the address manually.
|
||||
<div class="col-100 medium-50 large-30">
|
||||
<div class="block text-align-center">
|
||||
<div class="button hapticbtn button-fill" onclick="scanWalletQrCode(function (code) {
|
||||
router.navigate('/crypto/' + code);
|
||||
});"><i class="fa-solid fa-qrcode"></i> Scan Wallet</div>
|
||||
</div>
|
||||
<div class="card-content card-content-padding">
|
||||
<div class="button hapticbtn button-fill" onclick="scanWalletQrCode(displayWalletBalance)"><i class="fa-solid fa-qrcode"></i> Scan Wallet</div>
|
||||
</div>
|
||||
<div class="card-content card-content-padding">
|
||||
<div class="list margin-bottom-half">
|
||||
<ul>
|
||||
</div>
|
||||
<div class="block text-align-center">
|
||||
<a href="#" onclick="$('#wallet-address-manual-entry').removeClass('display-none');">Can't scan? <span class="taptext">Tap</span><span class="clicktext">Click</span> here.</a>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 medium-50 large-30">
|
||||
<div class="block">
|
||||
<div class="list margin-bottom-half display-none" id="wallet-address-manual-entry">
|
||||
<ul class="padding">
|
||||
<li class="item-content">
|
||||
Type your wallet's public address below, then press the open wallet button.
|
||||
</li>
|
||||
<li class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-input-wrap">
|
||||
@ -40,161 +47,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="button button-outline hapticbtn" onclick="displayWalletBalance($('#walletPubKeyManualEntry').val())"><i class="fa-solid fa-magnifying-glass-dollar"></i> Check Manually</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-100 medium-50 xlarge-50 margin-horizontal">
|
||||
<div class="card">
|
||||
<div class="card-header">Send Crypto</div>
|
||||
<div class="card-content card-content-padding">
|
||||
Spend your Helena Express paper wallet.
|
||||
</div>
|
||||
<div class="card-content card-content-padding">
|
||||
<div class="list margin-bottom-half">
|
||||
<ul>
|
||||
<li class="item-divider">Step 1</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
Scan or type your wallet address. This tells the network where to take the money from.
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="walletFromAddress" placeholder="1X68a3n1..." />
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="button hapticbtn button-fill" onclick="scanWalletQrCode(function (d) {
|
||||
$('#walletFromAddress').val(d);
|
||||
setupFiatConversion(d);
|
||||
});"><i class="fa-solid fa-inbox-out"></i> Scan Your Wallet Address
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="item-divider">Step 2</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
Scan or type your private key. The private key unlocks your wallet and authorizes the transfer.
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="walletPrivateKey" placeholder="6JJRxyW..." />
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="button hapticbtn button-fill" onclick="scanPrivateKeyQrCode(function (d) {
|
||||
$('#walletPrivateKey').val(d);
|
||||
});"><i class="fa-solid fa-key"></i> Scan Your Private Key
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="item-divider">Step 3</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
Scan or paste the recipient's wallet address.
|
||||
The money will be sent here. Important: the recipient must be expecting the
|
||||
same cryptocurrency your wallet uses. Otherwise the money will
|
||||
be lost forever.
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="walletToAddress" placeholder="1X68a3n1..." />
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="button hapticbtn button-fill" onclick="scanWalletQrCode(function (d) {
|
||||
$('#walletToAddress').val(d);
|
||||
});"><i class="fa-solid fa-inbox-in"></i> Scan Recipient's Wallet
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="item-divider">Step 4</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
Enter the amount to send.
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label" id="cryptoAmountSendCurrencyLabel"></div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="number" id="transactionAmount" step="0.00000001" min="0.00000001" max="999999.99999999"/>
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content item-input" id="cryptoFiatInputItem" style="display: none;">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label" id="cryptoAmountSendFiatLabel"></div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="number" id="transactionAmountFiat" step="0.01" min="0.01" max="9999.99"/>
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!--
|
||||
TODO: add conversion tool here
|
||||
<li class="item-content">
|
||||
<div class="button hapticbtn button-fill" onclick="scanWalletQrCode(function (d) {
|
||||
$('#walletToAddress').val(d);
|
||||
});"><i class="fa-solid fa-inbox-in"></i> Scan Recipient's Wallet
|
||||
</div>
|
||||
</li> -->
|
||||
|
||||
<li class="item-divider">Step 5</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
<div><span class="taptext">Tap</span><span class="clicktext">Click</span> the button to send the transaction.</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="button hapticbtn button-fill" onclick="walletGUISendCoins()">
|
||||
<i class="fa-solid fa-paper-plane"></i> Send Transaction
|
||||
</div>
|
||||
<div class="button button-outline hapticbtn" onclick="router.navigate('/crypto/' + $('#walletPubKeyManualEntry').val())">Open Wallet</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup" id="walletBalancePopup">
|
||||
<div class="block text-align-center">
|
||||
<h3>Wallet Balance</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-content-padding text-align-center">
|
||||
<img id="walletBalanceLogo" style="max-height: 25vh; max-width: 25vw; height: 5em;" src="" />
|
||||
<p>This <span id="walletCurrency">...</span> wallet contains</p>
|
||||
<h2><span id="walletBalanceAmount">...</span></h2>
|
||||
<p>currently worth</p>
|
||||
<h2><span id="walletFiatAmount">...</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content-padding">
|
||||
<div class="button popup-close hapticbtn">Okay</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content-padding text-color-gray text-align-center" id="walletBalanceAttribution">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
144
www/pages/crypto_wallet.html
Normal file
144
www/pages/crypto_wallet.html
Normal file
@ -0,0 +1,144 @@
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
|
||||
<div class="page" data-name="crypto_wallet">
|
||||
|
||||
<div class="navbar">
|
||||
<div class="navbar-bg"></div>
|
||||
<div class="navbar-inner">
|
||||
<div class="left">
|
||||
<a class="link hapticbtn" href="/home">
|
||||
<i class="icon icon-back"></i>
|
||||
<span class="if-not-md">Back</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title">Crypto Wallet</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="page-content">
|
||||
|
||||
<div class="card-content-padding text-align-center">
|
||||
<img id="walletBalanceLogo" style="max-height: 25vh; max-width: 25vw; height: 5em;" src="{{logo}}" />
|
||||
<p>This <span id="walletCurrency">{{currencyname}}</span> wallet contains</p>
|
||||
<h2><span id="walletBalanceAmount">{{balance}} {{currencyunit}}</span></h2>
|
||||
<p>currently worth</p>
|
||||
<h2><span id="walletFiatAmount">{{fiatvalue}}</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 medium-50 large-30">
|
||||
<div class="block">
|
||||
<div class="button hapticbtn button-fill popup-open" data-popup="#sendCryptoPopup" id="sendCryptoOpenPopupBtn"><i class="fa-solid fa-paper-plane"></i> Send Crypto</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content-padding text-color-gray text-align-center" id="walletAddress">{{walletaddress}}</div>
|
||||
|
||||
<div class="card-content-padding text-color-gray text-align-center" id="walletBalanceAttribution">
|
||||
{{attribution}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup" id="sendCryptoPopup">
|
||||
<div class="card">
|
||||
<div class="card-header">Send Crypto</div>
|
||||
<div class="card-content card-content-padding">
|
||||
<div class="list margin-bottom-half">
|
||||
<ul>
|
||||
<li class="item-divider">Step 1</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
Scan your private key. The private key unlocks your wallet and authorizes the transfer.
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="walletPrivateKey" placeholder="6JJRxyW..." />
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="button hapticbtn button-fill" onclick="scanPrivateKeyQrCode(function (d) {
|
||||
$('#walletPrivateKey').val(d);
|
||||
});"><i class="fa-solid fa-key"></i> Scan Private Key
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="item-divider">Step 2</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
Scan or paste the recipient's wallet address.
|
||||
The money will be sent here. Important: the recipient must be expecting the
|
||||
same cryptocurrency your wallet uses. Otherwise the money will
|
||||
be lost forever.
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="walletToAddress" placeholder="1X68a3n1..." />
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="button hapticbtn button-fill" onclick="scanWalletQrCode(function (d) {
|
||||
$('#walletToAddress').val(d);
|
||||
});"><i class="fa-solid fa-inbox-in"></i> Scan Recipient's Wallet
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="item-divider">Step 3</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
Enter the amount to send.
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label" id="cryptoAmountSendCurrencyLabel"></div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="number" id="transactionAmount" step="0.00000001" min="0.00000001" max="999999.99999999"/>
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content item-input" id="cryptoFiatInputItem" style="display: none;">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label" id="cryptoAmountSendFiatLabel"></div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="number" id="transactionAmountFiat" step="0.01" min="0.01" max="9999.99"/>
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="item-divider">Step 4</li>
|
||||
<li class="item-content">
|
||||
<div class="item-inner">
|
||||
<div><span class="taptext">Tap</span><span class="clicktext">Click</span> the button to send the transaction.</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="button hapticbtn button-fill" onclick="walletGUISendCoins()">
|
||||
<i class="fa-solid fa-paper-plane"></i> Send Transaction
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<div class="button hapticbtn popup-close" onclick="$('#walletPrivateKey').val('');" >
|
||||
<i class="fa-solid fa-xmark"></i> Cancel
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -18,6 +18,7 @@ var pagesToCompile = [
|
||||
"shoppingcart_fragment",
|
||||
"rateresult",
|
||||
"crypto",
|
||||
"crypto_wallet",
|
||||
"account",
|
||||
"trackresult",
|
||||
"settings",
|
||||
@ -55,15 +56,9 @@ var routes = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/crypto/balance/:walletaddress',
|
||||
content: compiledPages.crypto(),
|
||||
name: 'crypto',
|
||||
on: {
|
||||
pageAfterIn: function (e, page) {
|
||||
console.log(page);
|
||||
displayWalletBalance(page.route.params.walletaddress);
|
||||
}
|
||||
}
|
||||
path: '/crypto/:walletaddress',
|
||||
async: openWalletBalancePage,
|
||||
name: 'crypto_wallet'
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user