From 7dfd76438d9f0c210ab98e509921ac0dabde0945 Mon Sep 17 00:00:00 2001 From: Skylar Ittner Date: Sun, 1 May 2022 01:02:37 -0600 Subject: [PATCH] Add some UX design to crypto UI --- www/assets/js/crypto.js | 164 ++++++++++++++++------------ www/assets/js/home.js | 2 +- www/pages/crypto.html | 200 ++++++----------------------------- www/pages/crypto_wallet.html | 144 +++++++++++++++++++++++++ www/routes.js | 13 +-- 5 files changed, 275 insertions(+), 248 deletions(-) create mode 100644 www/pages/crypto_wallet.html diff --git a/www/assets/js/crypto.js b/www/assets/js/crypto.js index f9d08d9..6ded548 100644 --- a/www/assets/js/crypto.js +++ b/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.setText("Sending payment..."); + progressdialog.close(); - apirequest(SETTINGS.apis.broadcasttransaction, { - transactiondata: txdata, - 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 - return; - } else { - app.dialog.close(); - app.dialog.alert(resp.msg, "Error"); - } - }, function (errorData) { - app.dialog.close(); - try { - var error = $.parseJSON(errorData.responseText); - if (error && typeof error.msg != 'undefined') { - 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: " + xhr.status + ": " + xhr.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); - } - }); + 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.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(); + app.dialog.alert(resp.msg, "Error"); + } + }, function (errorData) { + app.dialog.close(); + try { + var error = $.parseJSON(errorData.responseText); + if (error && typeof error.msg != 'undefined') { + 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); - $("#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)); }); \ No newline at end of file diff --git a/www/assets/js/home.js b/www/assets/js/home.js index 9a6bfd8..ea34733 100644 --- a/www/assets/js/home.js +++ b/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."); diff --git a/www/pages/crypto.html b/www/pages/crypto.html index c431ddf..469db7f 100644 --- a/www/pages/crypto.html +++ b/www/pages/crypto.html @@ -13,188 +13,48 @@ Back -
Wallet
+
Crypto Wallet
-
-
-
Check Wallet Balance
-
- 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. -
-
-
  Scan Wallet
-
-
-
-
    -
  • -
    -
    - - -
    -
    -
    • -
-
-
  Check Manually
-
-
-
- -
-
-
Send Crypto
-
- Spend your Helena Express paper wallet. -
-
-
-
    -
  • Step 1
    • -
  • -
    - Scan or type your wallet address. This tells the network where to take the money from. -
    -
    • -
  • -
    -
    - - -
    -
    -
    • -
  • -
      Scan Your Wallet Address -
    -
    • - - -
  • Step 2
    • -
  • -
    - Scan or type your private key. The private key unlocks your wallet and authorizes the transfer. -
    -
    • -
  • -
    -
    - - -
    -
    -
    • -
  • -
      Scan Your Private Key -
    -
    • - - -
  • Step 3
    • -
  • -
    - 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. -
    -
    • -
  • -
    -
    - - -
    -
    -
    • -
  • -
      Scan Recipient's Wallet -
    -
    • - -
  • Step 4
    • -
  • -
    - Enter the amount to send. -
    -
    • -
  • -
    -
    -
    - - -
    -
    -
    • - - - -
  • Step 5
    • -
  • -
    -
    TapClick the button to send the transaction.
    -
    -
    • -
  • -
    -   Send Transaction -
    -
    • -
-
-
+
+
+
  Scan Wallet
-
- - \ No newline at end of file diff --git a/www/pages/crypto_wallet.html b/www/pages/crypto_wallet.html new file mode 100644 index 0000000..639b343 --- /dev/null +++ b/www/pages/crypto_wallet.html @@ -0,0 +1,144 @@ + + +
+ +
+
+
+
+ + + Back + +
+
Crypto Wallet
+
+
+ + +
+ +
+ +

This {{currencyname}} wallet contains

+

{{balance}} {{currencyunit}}

+

currently worth

+

{{fiatvalue}}

+
+ +
+
+
+ +
+
+
+ +
{{walletaddress}}
+ +
+ {{attribution}} +
+
+ + +
\ No newline at end of file diff --git a/www/routes.js b/www/routes.js index 43f6a2d..6335333 100644 --- a/www/routes.js +++ b/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', - 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',