Add some UX design to crypto UI

www/assets/js/crypto.js

@@ -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,38 +190,46 @@ function sendCoins(privatekey, fromaddress, toaddress, amount) {
                     return;
                 }
 
-                progressdialog.setProgress(80);
+                progressdialog.close();
-                progressdialog.setText("Sending payment...");
 
-                apirequest(SETTINGS.apis.broadcasttransaction, {
+                app.dialog.confirm("Sending " + (txdata.sendamount / 100000000) + " " + success.currency
-                    transactiondata: txdata,
+                        + " with a fee of " + (txdata.fee / 100000000) + " " + success.currency
-                    currency: success.currency
+                        + " for a total spend of " + (txdata.totalspent / 100000000) + " " + success.currency + ".",
-                }, function (resp) {
+                        "Confirm Transaction",
-                    if (resp.status == "OK") {
+                        function (ok) {
-                        app.dialog.close();
+                            progressdialog = app.dialog.progress("Sending payment...", 80);
-                        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
+                            apirequest(SETTINGS.apis.broadcasttransaction, {
-                        return;
+                                transactiondata: txdata.serialized,
-                    } else {
+                                currency: success.currency
-                        app.dialog.close();
+                            }, function (resp) {
-                        app.dialog.alert(resp.msg, "Error");
+                                if (resp.status == "OK") {
-                    }
+                                    app.dialog.close();
-                }, function (errorData) {
+                                    app.dialog.alert("Sent " + amount + " " + success.currency + " to " + toaddress.substring(0, 5) + "..." + toaddress.substring(toaddress.length - 5, 999), "Success!");
-                    app.dialog.close();
+                                    $('#walletPrivateKey').val(""); // clear private key input box
-                    try {
+                                    app.popup.close();
-                        var error = $.parseJSON(errorData.responseText);
+                                    return;
-                        if (error && typeof error.msg != 'undefined') {
+                                } else {
-                            app.dialog.alert(error.msg, "Error");
+                                    app.dialog.close();
-                            sendErrorReport("Crypto", "Couldn't broadcast transaction", error.msg);
+                                    app.dialog.alert(resp.msg, "Error");
-                        } else {
+                                }
-                            app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later. Your funds are safe.", "Error");
+                            }, function (errorData) {
-                            sendErrorReport("Crypto", "Couldn't broadcast transaction", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
+                                app.dialog.close();
-                        }
+                                try {
-                    } catch (ex) {
+                                    var error = $.parseJSON(errorData.responseText);
-                        app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later. Your funds are safe.", "Error");
+                                    if (error && typeof error.msg != 'undefined') {
-                        sendErrorReport("Crypto", "Couldn't broadcast transaction", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
+                                        app.dialog.alert(error.msg, "Error");
-                    }
+                                        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: " + 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: " + 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);
+            var context = {
-            $("#walletBalancePopup #walletFiatAmount").text(resp.usdvalue);
+                balance: resp.balance,
-            $("#walletBalancePopup #walletCurrency").text(resp.label);
+                currencyunit: resp.currency,
-            $("#walletBalancePopup #walletBalanceAttribution").text(resp.attribution);
+                fiatvalue: resp.usdvalue,
-            $("#walletBalancePopup #walletBalanceLogo").attr("src", "./assets/images/crypto/" + resp.currency + ".svg");
+                currencyname: resp.label,
-            app.popup.open("#walletBalancePopup");
+                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 () {
+$("#app").on("click", "#sendCryptoOpenPopupBtn", function () {
-    var fiatamount = parseFloat($("#transactionAmountFiat").val());
+    if (walletPubKeyRegex.test($("#walletAddress").text())) {
-    var exchangerate = parseFloat($("#transactionAmountFiat").data("exchange-rate"));
+        setupFiatConversion($("#walletAddress").text());
-    $("#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());
     } 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));
 });

www/assets/js/home.js

@@ -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.");

www/pages/crypto.html

@@ -13,188 +13,48 @@
                     <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="col-100 medium-50 large-30">
-                <div class="card">
+                <div class="block text-align-center">
-                    <div class="card-header">Check Wallet Balance</div>
+                    <div class="button hapticbtn button-fill" onclick="scanWalletQrCode(function (code) {
-                    <div class="card-content card-content-padding">
+                                router.navigate('/crypto/' + code);
-                        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.
+                            });"><i class="fa-solid fa-qrcode"></i> &nbsp; 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> &nbsp; Scan Wallet</div>
-                    </div>
-                    <div class="card-content card-content-padding">
-                        <div class="list margin-bottom-half">
-                            <ul>
-                                <li class="item-content item-input">
-                                    <div class="item-inner">
-                                        <div class="item-input-wrap">
-                                            <input type="text" id="walletPubKeyManualEntry" placeholder="1X68a3n1..." />
-                                            <span class="input-clear-button"></span>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="button button-outline hapticbtn" onclick="displayWalletBalance($('#walletPubKeyManualEntry').val())"><i class="fa-solid fa-magnifying-glass-dollar"></i> &nbsp; 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> &nbsp; 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> &nbsp; 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> &nbsp; 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> &nbsp; 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> &nbsp; Send Transaction
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
-    </div>
-
-    <div class="popup" id="walletBalancePopup">
         <div class="block text-align-center">
-            <h3>Wallet Balance</h3>
+            <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">
+                                        <input type="text" id="walletPubKeyManualEntry" placeholder="1X68a3n1..." />
+                                        <span class="input-clear-button"></span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="item-content">
+                                <div class="button button-outline hapticbtn" onclick="router.navigate('/crypto/' + $('#walletPubKeyManualEntry').val())">Open Wallet</div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
         </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>

www/pages/crypto_wallet.html

@@ -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> &nbsp; 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> &nbsp; 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> &nbsp; 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> &nbsp; Send Transaction
+                            </div>
+                        </li>
+                        <li class="item-content">
+                            <div class="button hapticbtn popup-close" onclick="$('#walletPrivateKey').val('');" >
+                                <i class="fa-solid fa-xmark"></i> &nbsp; Cancel
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

www/routes.js

@@ -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',
+        path: '/crypto/:walletaddress',
-        content: compiledPages.crypto(),
+        async: openWalletBalancePage,
-        name: 'crypto',
+        name: 'crypto_wallet'
-        on: {
-            pageAfterIn: function (e, page) {
-                console.log(page);
-                displayWalletBalance(page.route.params.walletaddress);
-            }
-        }
     },
     {
         path: '/home',