Allow entry in wallet send via fiat (#1891)

* Allow entry in wallet send via fiat

closes #1890
https://i.imgur.com/RUrSqD7.gif

* fix min amount in wallet send

* Add divisibility when setting amount from fiat

BTCPayServer/Controllers/WalletsController.cs

@@ -471,6 +471,8 @@ namespace BTCPayServer.Controllers
 
             model.FeeSatoshiPerByte = model.RecommendedSatoshiPerByte.LastOrDefault()?.FeeRate;
             model.SupportRBF = network.SupportRBF;
+
+            model.CryptoDivisibility = network.Divisibility;
             using (CancellationTokenSource cts = new CancellationTokenSource())
             {
                 try
@@ -480,7 +482,7 @@ namespace BTCPayServer.Controllers
                     if (result.BidAsk != null)
                     {
                         model.Rate = result.BidAsk.Center;
-                        model.Divisibility = _currencyTable.GetNumberFormatInfo(currencyPair.Right, true).CurrencyDecimalDigits;
+                        model.FiatDivisibility = _currencyTable.GetNumberFormatInfo(currencyPair.Right, true).CurrencyDecimalDigits;
                         model.Fiat = currencyPair.Right;
                     }
                     else

BTCPayServer/Models/WalletViewModels/WalletSendModel.cs

@@ -47,7 +47,8 @@ namespace BTCPayServer.Models.WalletViewModels
         [Display(Name = "Don't create UTXO change")]
         public bool NoChange { get; set; }
         public decimal? Rate { get; set; }
-        public int Divisibility { get; set; }
+        public int FiatDivisibility { get; set; }
+        public int CryptoDivisibility { get; set; }
         public string Fiat { get; set; }
         public string RateError { get; set; }
         public bool SupportRBF { get; set; }

BTCPayServer/Views/Wallets/WalletSend.cshtml

@@ -21,7 +21,8 @@
     <div class="@(!Model.InputSelection && Model.Outputs.Count==1? "col-lg-7 transaction-output-form": "col-lg-8")">
         <form method="post" asp-action="WalletSend" asp-route-walletId="@this.Context.GetRouteValue("walletId")">
             <input type="hidden" asp-for="InputSelection" />
-            <input type="hidden" asp-for="Divisibility" />
+            <input type="hidden" asp-for="FiatDivisibility" />
+            <input type="hidden" asp-for="CryptoDivisibility" />
             <input type="hidden" asp-for="NBXSeedAvailable" />
             <input type="hidden" asp-for="Fiat" />
             <input type="hidden" asp-for="Rate" />
@@ -63,9 +64,11 @@
                 <div class="form-group">
                     <label asp-for="Outputs[0].Amount"></label>
                     <div class="input-group">
-                        <input asp-for="Outputs[0].Amount" type="number" step="any" asp-format="{0}" class="form-control output-amount" />
+                        <input asp-for="Outputs[0].Amount" type="number" step="any" min="0" asp-format="{0}" class="form-control output-amount" />
-                        <div class="input-group-append">
+                        <div class="input-group-append fiat-value" style="display:none;">
-                            <span class="input-group-text fiat-value" style="display:none;"></span>
+                            <span class="input-group-text" >=</span>
+                            <input type="number" class="input-group-text fiat-value-edit-input" min="0" step="any" style="max-width:100px" />
+                            <span class="input-group-text" >@Model.Fiat</span>
                         </div>
                     </div>
                     <span asp-validation-for="Outputs[0].Amount" class="text-danger"></span>

BTCPayServer/wwwroot/js/wallet/WalletSend.js

@@ -4,26 +4,54 @@
         element = $(this);
     }
     var rateStr = $("#Rate").val();
-    var divisibilityStr = $("#Divisibility").val();
+    var divisibilityStr = $("#FiatDivisibility").val();
-    var fiat = $("#Fiat").val();
     var rate = parseFloat(rateStr);
     var divisibility = parseInt(divisibilityStr);
     if (!isNaN(rate) && !isNaN(divisibility)) {
-        var fiatValue = $(element).parents(".input-group").first().find(".fiat-value");
+        var fiatValue = $(element).parents(".input-group").first().find(".fiat-value")
+        var fiatValueInput = fiatValue.find(".fiat-value-edit-input");
         var amountValue = parseFloat($(element).val());
         if (!isNaN(amountValue)) {
             fiatValue.show();
-            fiatValue.text("= " + (rate * amountValue).toFixed(divisibility) + " " + fiat);
+            fiatValueInput.val((rate * amountValue).toFixed(divisibility));
         } else {
-            fiatValue.text("");
+            fiatValue.hide();
+            fiatValueInput.val("")
         }
     }
 }
 
+function updateCryptoValue(element) {
+
+    if (!element) {
+        element = $(this);
+    }
+
+    var divisibilityStr = $("#CryptoDivisibility").val();
+    var divisibility = parseInt(divisibilityStr);
+    var rateStr = $("#Rate").val();
+    var rate = parseFloat(rateStr);
+    if (!isNaN(rate)) {
+        var cryptoValueInput =  $(element).parents(".input-group").first().find(".output-amount");
+        var amountValue = parseFloat($(element).val());
+        if (!isNaN(amountValue)) {
+            cryptoValueInput.val(( amountValue/rate).toFixed(divisibility));
+        } else {
+            cryptoValueInput.val("")
+        }
+    }
+}
+
+
+
 function updateFiatValueWithCurrentElement() {
     updateFiatValue($(this))
 }
 
+function updateCryptoValueWithCurrentElement(){
+    updateCryptoValue($(this))
+}
+
 function selectCorrectFeeOption(){
     var val =  $("#FeeSatoshiPerByte").val();
     $(".feerate-options").children(".crypto-fee-link").removeClass("active");
@@ -32,6 +60,7 @@ function selectCorrectFeeOption(){
 
 $(function () {
     $(".output-amount").on("input", updateFiatValueWithCurrentElement).each(updateFiatValueWithCurrentElement);
+    $(".fiat-value-edit-input").on("input", updateCryptoValueWithCurrentElement);
 
     $(".crypto-fee-link").on("click", function (elem) {
         $(this).parent().children().removeClass("active");