From 33d18a327841b048538095f5e89441e4e31eab57 Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Fri, 13 Jul 2018 15:58:59 -0500
Subject: [PATCH 01/12] Displaying payment method name during checkout

Ref: https://github.com/btcpayserver/btcpayserver/issues/152
---
 .../Controllers/InvoiceController.UI.cs       |   17 +-
 .../Models/InvoicingModels/PaymentModel.cs    |   10 +-
 .../Views/Invoice/Checkout-Body.cshtml        |   17 +-
 BTCPayServer/Views/Invoice/Checkout.cshtml    |    9 +-
 BTCPayServer/bundleconfig.json                |    2 +
 .../wwwroot/checkout/css/normalizer.css       |    3 +-
 .../wwwroot/checkout/css/vex-extrastyles.css  |   32 +
 .../wwwroot/checkout/css/vex-theme-btcpay.css |  204 +++
 BTCPayServer/wwwroot/checkout/js/vexdialog.js |   11 +
 .../vex/css/vex-theme-bottom-right-corner.css |  183 ++
 .../vendor/vex/css/vex-theme-default.css      |  162 ++
 .../vendor/vex/css/vex-theme-flat-attack.css  |  176 ++
 .../wwwroot/vendor/vex/css/vex-theme-os.css   |  165 ++
 .../vendor/vex/css/vex-theme-plain.css        |  107 ++
 .../wwwroot/vendor/vex/css/vex-theme-top.css  |  178 ++
 .../vendor/vex/css/vex-theme-wireframe.css    |  110 ++
 BTCPayServer/wwwroot/vendor/vex/css/vex.css   |  117 ++
 .../wwwroot/vendor/vex/js/vex.combined.js     | 1629 +++++++++++++++++
 .../wwwroot/vendor/vex/js/vex.combined.min.js |    2 +
 BTCPayServer/wwwroot/vendor/vex/js/vex.js     |  754 ++++++++
 BTCPayServer/wwwroot/vendor/vex/js/vex.min.js |    2 +
 21 files changed, 3877 insertions(+), 13 deletions(-)
 create mode 100644 BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
 create mode 100644 BTCPayServer/wwwroot/checkout/css/vex-theme-btcpay.css
 create mode 100644 BTCPayServer/wwwroot/checkout/js/vexdialog.js
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/css/vex-theme-bottom-right-corner.css
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/css/vex-theme-default.css
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/css/vex-theme-flat-attack.css
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/css/vex-theme-os.css
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/css/vex-theme-plain.css
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/css/vex-theme-top.css
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/css/vex-theme-wireframe.css
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/css/vex.css
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/js/vex.combined.js
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/js/vex.combined.min.js
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/js/vex.js
 create mode 100644 BTCPayServer/wwwroot/vendor/vex/js/vex.min.js

diff --git a/BTCPayServer/Controllers/InvoiceController.UI.cs b/BTCPayServer/Controllers/InvoiceController.UI.cs
index 93a4d73e5..86a94377e 100644
--- a/BTCPayServer/Controllers/InvoiceController.UI.cs
+++ b/BTCPayServer/Controllers/InvoiceController.UI.cs
@@ -248,6 +248,8 @@ namespace BTCPayServer.Controllers
             {
                 CryptoCode = network.CryptoCode,
                 PaymentMethodId = paymentMethodId.ToString(),
+                PaymentMethodName = GetPaymentMethodName(paymentMethodId.ToString()),
+                CryptoImage = "/" + GetImage(paymentMethodId, network),
                 IsLightning = paymentMethodId.PaymentType == PaymentTypes.LightningLike,
                 ServerUrl = HttpContext.Request.GetAbsoluteRoot(),
                 OrderId = invoice.OrderId,
@@ -279,7 +281,6 @@ namespace BTCPayServer.Controllers
                 TxCount = accounting.TxRequired,
                 BtcPaid = accounting.Paid.ToString(),
                 Status = invoice.Status,
-                CryptoImage = "/" + GetImage(paymentMethodId, network),
                 NetworkFee = paymentMethodDetails.GetTxFee(),
                 IsMultiCurrency = invoice.GetPayments().Select(p => p.GetPaymentMethodId()).Concat(new[] { paymentMethod.GetId() }).Distinct().Count() > 1,
                 AllowCoinConversion = storeBlob.AllowCoinConversion,
@@ -288,6 +289,7 @@ namespace BTCPayServer.Controllers
                                           .Select(kv => new PaymentModel.AvailableCrypto()
                                           {
                                               PaymentMethodId = kv.GetId().ToString(),
+                                              PaymentMethodName = GetPaymentMethodName(kv.GetId().ToString()),
                                               CryptoImage = "/" + GetImage(kv.GetId(), kv.Network),
                                               Link = Url.Action(nameof(Checkout), new { invoiceId = invoiceId, paymentMethodId = kv.GetId().ToString() })
                                           }).Where(c => c.CryptoImage != "/")
@@ -299,6 +301,19 @@ namespace BTCPayServer.Controllers
             return model;
         }
 
+        private static readonly Dictionary<string,string> CURRENCY_NAMES = new Dictionary<string, string>
+            {
+                {"BTC", "Bitcoin (BTC)" },
+                {"BTC_LightningLike", "Bitcoin (BTC) Lightning" },
+                {"LTC", "Litecoin (LTC)" },
+                {"LTC_LightningLike", "Litecoin (LTC) Lightning" },
+                {"DOGE", "Dogecoin (DOGE)" },
+            };
+        private string GetPaymentMethodName(string key)
+        {
+            return CURRENCY_NAMES[key];
+        }
+
         private string GetImage(PaymentMethodId paymentMethodId, BTCPayNetwork network)
         {
             return (paymentMethodId.PaymentType == PaymentTypes.BTCLike ? Url.Content(network.CryptoImagePath) : Url.Content(network.LightningImagePath));
diff --git a/BTCPayServer/Models/InvoicingModels/PaymentModel.cs b/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
index da28a8975..4350726d2 100644
--- a/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
+++ b/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
@@ -12,6 +12,7 @@ namespace BTCPayServer.Models.InvoicingModels
             public string PaymentMethodId { get; set; }
             public string CryptoImage { get; set; }
             public string Link { get; set; }
+            public string PaymentMethodName { get; set; }
         }
         public string HtmlTitle { get; set; }
         public string CustomCSSLink { get; set; }
@@ -45,12 +46,13 @@ namespace BTCPayServer.Models.InvoicingModels
         public string StoreEmail { get; set; }
 
         public string OrderId { get; set; }
-        public string CryptoImage { get; set; }
         public decimal NetworkFee { get; set; }
         public bool IsMultiCurrency { get; set; }
-        public int MaxTimeMinutes { get; internal set; }
-        public string PaymentType { get; internal set; }
-        public string PaymentMethodId { get; internal set; }
+        public int MaxTimeMinutes { get; set; }
+        public string PaymentType { get; set; }
+        public string PaymentMethodId { get; set; }
+        public string PaymentMethodName { get; set; }
+        public string CryptoImage { get; set; }
 
         public bool AllowCoinConversion { get; set; }
         public string PeerInfo { get; set; }
diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
index aa596e9fc..e24cb4675 100644
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -42,13 +42,22 @@
                 </div>
             </div>
             <div class="single-item-order__right">
-                <div class="payment__currencies">
+                <div class="payment__currencies" style="font-size: 14px; cursor:pointer;" onclick="bringupDialog()">
+                    <img style='height:32px;' v-bind:src="srvModel.cryptoImage" />
+                    <span style="color: #000000; border-bottom: 1px dotted gray;">{{srvModel.paymentMethodName}}</span>
+                </div>
+                <div id="vexPopupDialog">
+                    <ul class="vexmenu">
                     @foreach (var crypto in Model.AvailableCryptos)
                     {
-                        <a href="@crypto.Link" onclick="return changeCurrency('@crypto.PaymentMethodId');">
-                            <img style="height:32px; margin-left:5px;" alt="@crypto.PaymentMethodId" src="@crypto.CryptoImage" />
-                        </a>
+                        <li class="vexmenuitem">
+                            <a href="@crypto.Link" onclick="return closeVexChangeCurrency('@crypto.PaymentMethodId');">
+                                <img style="height:24px;" alt="@crypto.PaymentMethodId" src="@crypto.CryptoImage" />
+                                @crypto.PaymentMethodName
+                            </a>
+                        </li>
                     }
+                    </ul>
                 </div>
                 <div class="payment__spinner">
                     <partial name="Checkout-Spinner" />
diff --git a/BTCPayServer/Views/Invoice/Checkout.cshtml b/BTCPayServer/Views/Invoice/Checkout.cshtml
index 26268045f..1ef0a6909 100644
--- a/BTCPayServer/Views/Invoice/Checkout.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout.cshtml
@@ -20,12 +20,15 @@
     </script>
 
     <bundle name="wwwroot/bundles/checkout-bundle.min.js" />
+    <script>vex.defaultOptions.className = 'vex-theme-btcpay'</script>
 
-
-    @if(Model.CustomCSSLink != null)
+    @if (Model.CustomCSSLink != null)
     {
         <link href="@Model.CustomCSSLink" rel="stylesheet" />
     }
+
+    <style type="text/css">
+    </style>
 </head>
 <body style="background: #E4E4E4">
     <noscript>
@@ -82,7 +85,7 @@
 
                                 $('select').prettyDropdown({
                                     classic: false,
-                                    height: 30,
+                                    height: 32,
                                     reverse: true,
                                     hoverIntent: 5000
                                 });
diff --git a/BTCPayServer/bundleconfig.json b/BTCPayServer/bundleconfig.json
index 4e89d7ace..487c2611d 100644
--- a/BTCPayServer/bundleconfig.json
+++ b/BTCPayServer/bundleconfig.json
@@ -33,6 +33,7 @@
         "outputFileName": "wwwroot/bundles/checkout-bundle.min.css",
         "inputFiles": [
             "wwwroot/vendor/font-awesome/css/font-awesome.css",
+            "wwwroot/vendor/vex/css/vex.css",
             "wwwroot/checkout/**/*.css",
             "wwwroot/vendor/jquery-prettydropdowns/prettydropdowns.css"
         ]
@@ -47,6 +48,7 @@
             "wwwroot/vendor/i18next/i18next.js",
             "wwwroot/vendor/i18next/vue-i18next.js",
             "wwwroot/vendor/jquery-prettydropdowns/jquery.prettydropdowns.js",
+            "wwwroot/vendor/vex/js/vex.combined.min.js",
             "wwwroot/checkout/**/*.js"
         ]
     }
diff --git a/BTCPayServer/wwwroot/checkout/css/normalizer.css b/BTCPayServer/wwwroot/checkout/css/normalizer.css
index e8a539b3e..9d69cae46 100644
--- a/BTCPayServer/wwwroot/checkout/css/normalizer.css
+++ b/BTCPayServer/wwwroot/checkout/css/normalizer.css
@@ -8289,7 +8289,7 @@ strong {
     .modal.page {
         overflow-y: hidden;
         position: relative;
-        z-index: 105111;
+        z-index: 10;
     }
 
 .content {
@@ -8420,6 +8420,7 @@ strong {
     color: #565D6E;
     letter-spacing: .45px;
     background: #fff;
+    height: 40px;
 }
 
 .single-item-order {
diff --git a/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
new file mode 100644
index 000000000..a2a7bd9d2
--- /dev/null
+++ b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
@@ -0,0 +1,32 @@
+.vexmenu {
+    margin: 0;
+    list-style: none;
+    padding: 0;
+}
+
+.vexmenuitem {
+    display: block;
+    float: none;
+    line-height: inherit;
+    position: relative;
+    list-style: none;
+    cursor: pointer;
+    padding: 5px;
+    border-bottom: 1px solid #eee;
+}
+
+    .vexmenuitem a {
+        display: block;
+    }
+
+    .vexmenuitem:hover {
+        background-color: #eee;
+    }
+
+    .vexmenuitem:last-child {
+        border-bottom: none;
+    }
+
+#vexPopupDialog {
+    display: none;
+}
diff --git a/BTCPayServer/wwwroot/checkout/css/vex-theme-btcpay.css b/BTCPayServer/wwwroot/checkout/css/vex-theme-btcpay.css
new file mode 100644
index 000000000..ea45e5cd9
--- /dev/null
+++ b/BTCPayServer/wwwroot/checkout/css/vex-theme-btcpay.css
@@ -0,0 +1,204 @@
+@-webkit-keyframes vex-flyin {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(-40px);
+        transform: translateY(-40px);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+}
+
+@keyframes vex-flyin {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(-40px);
+        transform: translateY(-40px);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+}
+
+@-webkit-keyframes vex-flyout {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: translateY(-40px);
+        transform: translateY(-40px);
+    }
+}
+
+@keyframes vex-flyout {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: translateY(-40px);
+        transform: translateY(-40px);
+    }
+}
+
+@-webkit-keyframes vex-pulse {
+    0% {
+        box-shadow: inset 0 0 0 300px transparent;
+    }
+
+    70% {
+        box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
+    }
+
+    100% {
+        box-shadow: inset 0 0 0 300px transparent;
+    }
+}
+
+@keyframes vex-pulse {
+    0% {
+        box-shadow: inset 0 0 0 300px transparent;
+    }
+
+    70% {
+        box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25);
+    }
+
+    100% {
+        box-shadow: inset 0 0 0 300px transparent;
+    }
+}
+
+.vex.vex-theme-btcpay {
+    padding-top: 160px;
+    padding-bottom: 160px;
+}
+
+    .vex.vex-theme-btcpay.vex-closing .vex-content {
+        -webkit-animation: vex-flyout .5s forwards;
+        animation: vex-flyout .5s forwards;
+    }
+
+    .vex.vex-theme-btcpay .vex-content {
+        -webkit-animation: vex-flyin .5s;
+        animation: vex-flyin .5s;
+    }
+
+    .vex.vex-theme-btcpay .vex-content {
+        border-radius: 5px;
+        background: #ffffff;
+        color: #444;
+        padding: 5px;
+        position: relative;
+        margin: 0 auto;
+        max-width: 100%;
+        width: 300px;
+        font-size: 14px;
+    }
+
+        .vex.vex-theme-btcpay .vex-content h1, .vex.vex-theme-btcpay .vex-content h2, .vex.vex-theme-btcpay .vex-content h3, .vex.vex-theme-btcpay .vex-content h4, .vex.vex-theme-btcpay .vex-content h5, .vex.vex-theme-btcpay .vex-content h6, .vex.vex-theme-btcpay .vex-content p, .vex.vex-theme-btcpay .vex-content ul, .vex.vex-theme-btcpay .vex-content li {
+            color: inherit;
+        }
+
+    .vex.vex-theme-btcpay .vex-close {
+        display: none;
+    }
+
+    .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-message {
+        margin-bottom: .5em;
+    }
+
+    .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input {
+        margin-bottom: 1em;
+    }
+
+        .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input select, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="week"] {
+            border-radius: 3px;
+            background: #fff;
+            width: 100%;
+            padding: .25em .67em;
+            border: 0;
+            font-family: inherit;
+            font-weight: inherit;
+            font-size: inherit;
+            min-height: 2.5em;
+            margin: 0 0 .25em;
+        }
+
+            .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+                box-shadow: inset 0 0 0 2px #8dbdf1;
+                outline: none;
+            }
+
+    .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-buttons {
+        *zoom: 1;
+    }
+
+        .vex.vex-theme-btcpay .vex-dialog-form .vex-dialog-buttons:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+
+    .vex.vex-theme-btcpay .vex-dialog-button {
+        border-radius: 3px;
+        border: 0;
+        float: right;
+        margin: 0 0 0 .5em;
+        font-family: inherit;
+        text-transform: uppercase;
+        letter-spacing: .1em;
+        font-size: .8em;
+        line-height: 1em;
+        padding: .75em 2em;
+    }
+
+        .vex.vex-theme-btcpay .vex-dialog-button.vex-last {
+            margin-left: 0;
+        }
+
+        .vex.vex-theme-btcpay .vex-dialog-button:focus {
+            -webkit-animation: vex-pulse 1.1s infinite;
+            animation: vex-pulse 1.1s infinite;
+            outline: none;
+        }
+
+@media (max-width: 568px) {
+    .vex.vex-theme-btcpay .vex-dialog-button:focus {
+        -webkit-animation: none;
+        animation: none;
+    }
+}
+
+.vex.vex-theme-btcpay .vex-dialog-button.vex-dialog-button-primary {
+    background: #3288e6;
+    color: #fff;
+}
+
+.vex.vex-theme-btcpay .vex-dialog-button.vex-dialog-button-secondary {
+    background: #e0e0e0;
+    color: #777;
+}
+
+.vex-loading-spinner.vex-theme-btcpay {
+    box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
+    border-radius: 100%;
+    background: #f0f0f0;
+    border: .2em solid transparent;
+    border-top-color: #bbb;
+    top: -1.1em;
+    bottom: auto;
+}
diff --git a/BTCPayServer/wwwroot/checkout/js/vexdialog.js b/BTCPayServer/wwwroot/checkout/js/vexdialog.js
new file mode 100644
index 000000000..ef4c98b10
--- /dev/null
+++ b/BTCPayServer/wwwroot/checkout/js/vexdialog.js
@@ -0,0 +1,11 @@
+function bringupDialog() {
+    var content = $("#vexPopupDialog").html();
+    vex.open({
+        unsafeContent: content
+    });
+}
+
+function closeVexChangeCurrency(currencyId) {
+    vex.closeAll();
+    return changeCurrency(currencyId);
+}
diff --git a/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-bottom-right-corner.css b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-bottom-right-corner.css
new file mode 100644
index 000000000..b5563fddb
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-bottom-right-corner.css
@@ -0,0 +1,183 @@
+@-webkit-keyframes vex-slideup {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 0; }
+  1% {
+    -webkit-transform: translateY(800px);
+    transform: translateY(800px);
+    opacity: 0; }
+  2% {
+    -webkit-transform: translateY(800px);
+    transform: translateY(800px);
+    opacity: 1; }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1; } }
+
+@keyframes vex-slideup {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 0; }
+  1% {
+    -webkit-transform: translateY(800px);
+    transform: translateY(800px);
+    opacity: 0; }
+  2% {
+    -webkit-transform: translateY(800px);
+    transform: translateY(800px);
+    opacity: 1; }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1; } }
+
+@-webkit-keyframes vex-slidedown {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0); }
+  100% {
+    -webkit-transform: translateY(800px);
+    transform: translateY(800px); } }
+
+@keyframes vex-slidedown {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0); }
+  100% {
+    -webkit-transform: translateY(800px);
+    transform: translateY(800px); } }
+
+@-webkit-keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+@keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+.vex.vex-theme-bottom-right-corner {
+  top: auto;
+  bottom: 0;
+  right: 0;
+  overflow: visible; }
+  .vex.vex-theme-bottom-right-corner .vex-overlay {
+    display: none; }
+  .vex.vex-theme-bottom-right-corner.vex-closing .vex-content {
+    -webkit-animation: vex-slidedown .5s forwards;
+    animation: vex-slidedown .5s forwards; }
+  .vex.vex-theme-bottom-right-corner .vex-content {
+    -webkit-animation: vex-slideup .5s;
+    animation: vex-slideup .5s; }
+  .vex.vex-theme-bottom-right-corner .vex-content {
+    border-radius: 5px 0 0 0;
+    font-family: "Helvetica Neue", sans-serif;
+    background: #f0f0f0;
+    color: #444;
+    padding: 1em;
+    max-width: 100%;
+    width: 450px;
+    font-size: 1.1em;
+    line-height: 1.5em;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    left: auto; }
+    .vex.vex-theme-bottom-right-corner .vex-content h1, .vex.vex-theme-bottom-right-corner .vex-content h2, .vex.vex-theme-bottom-right-corner .vex-content h3, .vex.vex-theme-bottom-right-corner .vex-content h4, .vex.vex-theme-bottom-right-corner .vex-content h5, .vex.vex-theme-bottom-right-corner .vex-content h6, .vex.vex-theme-bottom-right-corner .vex-content p, .vex.vex-theme-bottom-right-corner .vex-content ul, .vex.vex-theme-bottom-right-corner .vex-content li {
+      color: inherit; }
+  .vex.vex-theme-bottom-right-corner .vex-close {
+    border-radius: 5px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer; }
+    .vex.vex-theme-bottom-right-corner .vex-close:before {
+      border-radius: 3px;
+      position: absolute;
+      content: "\00D7";
+      font-size: 26px;
+      font-weight: normal;
+      line-height: 31px;
+      height: 30px;
+      width: 30px;
+      text-align: center;
+      top: 3px;
+      right: 3px;
+      color: #bbb;
+      background: transparent; }
+    .vex.vex-theme-bottom-right-corner .vex-close:hover:before, .vex.vex-theme-bottom-right-corner .vex-close:active:before {
+      color: #777;
+      background: #e0e0e0; }
+  .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-message {
+    margin-bottom: .5em; }
+  .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input {
+    margin-bottom: 1em; }
+    .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input select, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="week"] {
+      border-radius: 3px;
+      background: #fff;
+      width: 100%;
+      padding: .25em .67em;
+      border: 0;
+      font-family: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+      min-height: 2.5em;
+      margin: 0 0 .25em; }
+      .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+        box-shadow: inset 0 0 0 2px #8dbdf1;
+        outline: none; }
+  .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-buttons {
+    *zoom: 1; }
+    .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-buttons:after {
+      content: "";
+      display: table;
+      clear: both; }
+  .vex.vex-theme-bottom-right-corner .vex-dialog-button {
+    border-radius: 3px;
+    border: 0;
+    float: right;
+    margin: 0 0 0 .5em;
+    font-family: inherit;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    font-size: .8em;
+    line-height: 1em;
+    padding: .75em 2em; }
+    .vex.vex-theme-bottom-right-corner .vex-dialog-button.vex-last {
+      margin-left: 0; }
+    .vex.vex-theme-bottom-right-corner .vex-dialog-button:focus {
+      -webkit-animation: vex-pulse 1.1s infinite;
+      animation: vex-pulse 1.1s infinite;
+      outline: none; }
+      @media (max-width: 568px) {
+        .vex.vex-theme-bottom-right-corner .vex-dialog-button:focus {
+          -webkit-animation: none;
+          animation: none; } }
+    .vex.vex-theme-bottom-right-corner .vex-dialog-button.vex-dialog-button-primary {
+      background: #3288e6;
+      color: #fff; }
+    .vex.vex-theme-bottom-right-corner .vex-dialog-button.vex-dialog-button-secondary {
+      background: #e0e0e0;
+      color: #777; }
+
+.vex-loading-spinner.vex-theme-bottom-right-corner {
+  box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
+  border-radius: 100%;
+  background: #f0f0f0;
+  border: .2em solid transparent;
+  border-top-color: #bbb;
+  top: -1.1em;
+  bottom: auto; }
+
+body.vex-open {
+  overflow: initial; }
diff --git a/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-default.css b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-default.css
new file mode 100644
index 000000000..c1b4bddeb
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-default.css
@@ -0,0 +1,162 @@
+@-webkit-keyframes vex-flyin {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    transform: translateY(-40px); }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0); } }
+
+@keyframes vex-flyin {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    transform: translateY(-40px); }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0); } }
+
+@-webkit-keyframes vex-flyout {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0); }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    transform: translateY(-40px); } }
+
+@keyframes vex-flyout {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0); }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    transform: translateY(-40px); } }
+
+@-webkit-keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+@keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+.vex.vex-theme-default {
+  padding-top: 160px;
+  padding-bottom: 160px; }
+  .vex.vex-theme-default.vex-closing .vex-content {
+    -webkit-animation: vex-flyout .5s forwards;
+    animation: vex-flyout .5s forwards; }
+  .vex.vex-theme-default .vex-content {
+    -webkit-animation: vex-flyin .5s;
+    animation: vex-flyin .5s; }
+  .vex.vex-theme-default .vex-content {
+    border-radius: 5px;
+    font-family: "Helvetica Neue", sans-serif;
+    background: #f0f0f0;
+    color: #444;
+    padding: 1em;
+    position: relative;
+    margin: 0 auto;
+    max-width: 100%;
+    width: 450px;
+    font-size: 1.1em;
+    line-height: 1.5em; }
+    .vex.vex-theme-default .vex-content h1, .vex.vex-theme-default .vex-content h2, .vex.vex-theme-default .vex-content h3, .vex.vex-theme-default .vex-content h4, .vex.vex-theme-default .vex-content h5, .vex.vex-theme-default .vex-content h6, .vex.vex-theme-default .vex-content p, .vex.vex-theme-default .vex-content ul, .vex.vex-theme-default .vex-content li {
+      color: inherit; }
+  .vex.vex-theme-default .vex-close {
+    border-radius: 5px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer; }
+    .vex.vex-theme-default .vex-close:before {
+      border-radius: 3px;
+      position: absolute;
+      content: "\00D7";
+      font-size: 26px;
+      font-weight: normal;
+      line-height: 31px;
+      height: 30px;
+      width: 30px;
+      text-align: center;
+      top: 3px;
+      right: 3px;
+      color: #bbb;
+      background: transparent; }
+    .vex.vex-theme-default .vex-close:hover:before, .vex.vex-theme-default .vex-close:active:before {
+      color: #777;
+      background: #e0e0e0; }
+  .vex.vex-theme-default .vex-dialog-form .vex-dialog-message {
+    margin-bottom: .5em; }
+  .vex.vex-theme-default .vex-dialog-form .vex-dialog-input {
+    margin-bottom: 1em; }
+    .vex.vex-theme-default .vex-dialog-form .vex-dialog-input select, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"] {
+      border-radius: 3px;
+      background: #fff;
+      width: 100%;
+      padding: .25em .67em;
+      border: 0;
+      font-family: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+      min-height: 2.5em;
+      margin: 0 0 .25em; }
+      .vex.vex-theme-default .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+        box-shadow: inset 0 0 0 2px #8dbdf1;
+        outline: none; }
+  .vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons {
+    *zoom: 1; }
+    .vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons:after {
+      content: "";
+      display: table;
+      clear: both; }
+  .vex.vex-theme-default .vex-dialog-button {
+    border-radius: 3px;
+    border: 0;
+    float: right;
+    margin: 0 0 0 .5em;
+    font-family: inherit;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    font-size: .8em;
+    line-height: 1em;
+    padding: .75em 2em; }
+    .vex.vex-theme-default .vex-dialog-button.vex-last {
+      margin-left: 0; }
+    .vex.vex-theme-default .vex-dialog-button:focus {
+      -webkit-animation: vex-pulse 1.1s infinite;
+      animation: vex-pulse 1.1s infinite;
+      outline: none; }
+      @media (max-width: 568px) {
+        .vex.vex-theme-default .vex-dialog-button:focus {
+          -webkit-animation: none;
+          animation: none; } }
+    .vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary {
+      background: #3288e6;
+      color: #fff; }
+    .vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary {
+      background: #e0e0e0;
+      color: #777; }
+
+.vex-loading-spinner.vex-theme-default {
+  box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
+  border-radius: 100%;
+  background: #f0f0f0;
+  border: .2em solid transparent;
+  border-top-color: #bbb;
+  top: -1.1em;
+  bottom: auto; }
diff --git a/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-flat-attack.css b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-flat-attack.css
new file mode 100644
index 000000000..ca776ddaa
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-flat-attack.css
@@ -0,0 +1,176 @@
+@-webkit-keyframes vex-flipin-horizontal {
+  0% {
+    opacity: 0;
+    -webkit-transform: rotateY(-90deg);
+    transform: rotateY(-90deg); }
+  100% {
+    opacity: 1;
+    -webkit-transform: rotateY(0deg);
+    transform: rotateY(0deg); } }
+
+@keyframes vex-flipin-horizontal {
+  0% {
+    opacity: 0;
+    -webkit-transform: rotateY(-90deg);
+    transform: rotateY(-90deg); }
+  100% {
+    opacity: 1;
+    -webkit-transform: rotateY(0deg);
+    transform: rotateY(0deg); } }
+
+@-webkit-keyframes vex-flipout-horizontal {
+  0% {
+    opacity: 1;
+    -webkit-transform: rotateY(0deg);
+    transform: rotateY(0deg); }
+  100% {
+    opacity: 0;
+    -webkit-transform: rotateY(90deg);
+    transform: rotateY(90deg); } }
+
+@keyframes vex-flipout-horizontal {
+  0% {
+    opacity: 1;
+    -webkit-transform: rotateY(0deg);
+    transform: rotateY(0deg); }
+  100% {
+    opacity: 0;
+    -webkit-transform: rotateY(90deg);
+    transform: rotateY(90deg); } }
+
+.vex.vex-theme-flat-attack {
+  -webkit-perspective: 1300px;
+  perspective: 1300px;
+  -webkit-perspective-origin: 50% 150px;
+  perspective-origin: 50% 150px;
+  padding-top: 100px;
+  padding-bottom: 100px;
+  font-size: 1.5em; }
+  .vex.vex-theme-flat-attack.vex-closing .vex-content {
+    -webkit-animation: vex-flipout-horizontal .5s forwards;
+    animation: vex-flipout-horizontal .5s forwards; }
+  .vex.vex-theme-flat-attack .vex-content {
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-animation: vex-flipin-horizontal .5s;
+    animation: vex-flipin-horizontal .5s; }
+  .vex.vex-theme-flat-attack .vex-content {
+    font-family: "Helvetica Neue", sans-serif;
+    font-weight: 200;
+    background: #fff;
+    color: #444;
+    padding: 2em 2em 3em 2em;
+    line-height: 1.5em;
+    position: relative;
+    margin: 0 auto;
+    max-width: 100%;
+    width: 600px; }
+    .vex.vex-theme-flat-attack .vex-content h1, .vex.vex-theme-flat-attack .vex-content h2, .vex.vex-theme-flat-attack .vex-content h3, .vex.vex-theme-flat-attack .vex-content h4, .vex.vex-theme-flat-attack .vex-content h5, .vex.vex-theme-flat-attack .vex-content h6, .vex.vex-theme-flat-attack .vex-content p, .vex.vex-theme-flat-attack .vex-content ul, .vex.vex-theme-flat-attack .vex-content li {
+      color: inherit; }
+  .vex.vex-theme-flat-attack .vex-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer; }
+    .vex.vex-theme-flat-attack .vex-close:before {
+      font-family: "Helvetica Neue", sans-serif;
+      font-weight: 100;
+      line-height: 1px;
+      padding-top: .5em;
+      display: block;
+      font-size: 2em;
+      text-indent: 1px;
+      overflow: hidden;
+      height: 1.25em;
+      width: 1.25em;
+      text-align: center;
+      top: 0;
+      right: 0;
+      color: #fff;
+      background: #666; }
+  .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-message {
+    margin-bottom: .5em; }
+  .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input {
+    margin-bottom: .5em; }
+    .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="week"] {
+      border-radius: 3px;
+      background: #f0f0f0;
+      width: 100%;
+      padding: .25em .67em;
+      border: 0;
+      font-family: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+      min-height: 2.5em;
+      margin: 0 0 .25em; }
+      .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+        box-shadow: inset 0 0 0 2px #666;
+        outline: none; }
+  .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons {
+    *zoom: 1;
+    padding-top: 1em;
+    margin-bottom: -3em;
+    margin-left: -2em;
+    margin-right: -2em; }
+    .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons:after {
+      content: "";
+      display: table;
+      clear: both; }
+  .vex.vex-theme-flat-attack .vex-dialog-button {
+    border-radius: 0;
+    border: 0;
+    margin: 0;
+    float: right;
+    padding: .5em 1em;
+    font-size: 1.13em;
+    text-transform: uppercase;
+    font-weight: 200;
+    letter-spacing: .1em;
+    line-height: 1em;
+    font-family: inherit; }
+    .vex.vex-theme-flat-attack .vex-dialog-button.vex-last {
+      margin-left: 0; }
+    .vex.vex-theme-flat-attack .vex-dialog-button:focus {
+      outline: none; }
+    .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-primary {
+      background: #666;
+      color: #fff; }
+      .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-primary:focus {
+        box-shadow: inset 0 3px rgba(0, 0, 0, 0.2); }
+    .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary {
+      background: #fff;
+      color: #ccc; }
+      .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:focus {
+        box-shadow: inset 0 3px #aaa;
+        background: #eee;
+        color: #777; }
+      .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:hover, .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:active {
+        color: #777; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-close:before {
+    background: #ff7ea7; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+    box-shadow: inset 0 0 0 2px #ff7ea7; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
+    background: #ff7ea7; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-close:before {
+    background: #ce4a55; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+    box-shadow: inset 0 0 0 2px #ce4a55; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
+    background: #ce4a55; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-close:before {
+    background: #34b989; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+    box-shadow: inset 0 0 0 2px #34b989; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
+    background: #34b989; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-close:before {
+    background: #477FA5; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+    box-shadow: inset 0 0 0 2px #477FA5; }
+  .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary {
+    background: #477FA5; }
+
+.vex-loading-spinner.vex-theme-flat-attack {
+  height: 4em;
+  width: 4em; }
diff --git a/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-os.css b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-os.css
new file mode 100644
index 000000000..3e1d2100a
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-os.css
@@ -0,0 +1,165 @@
+@-webkit-keyframes vex-flyin {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    transform: translateY(-40px); }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0); } }
+
+@keyframes vex-flyin {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    transform: translateY(-40px); }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0); } }
+
+@-webkit-keyframes vex-flyout {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0); }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    transform: translateY(-40px); } }
+
+@keyframes vex-flyout {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0); }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    transform: translateY(-40px); } }
+
+@-webkit-keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+@keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+.vex.vex-theme-os {
+  padding-top: 160px;
+  padding-bottom: 160px; }
+  .vex.vex-theme-os.vex-closing .vex-content {
+    -webkit-animation: vex-flyout .5s forwards;
+    animation: vex-flyout .5s forwards; }
+  .vex.vex-theme-os .vex-content {
+    -webkit-animation: vex-flyin .5s;
+    animation: vex-flyin .5s; }
+  .vex.vex-theme-os .vex-content {
+    border-radius: 5px;
+    box-shadow: inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, 0.08);
+    font-family: "Helvetica Neue", sans-serif;
+    border-top: 20px solid #bbb;
+    background: #f0f0f0;
+    color: #444;
+    padding: 1em;
+    position: relative;
+    margin: 0 auto;
+    max-width: 100%;
+    width: 450px;
+    font-size: 1.1em;
+    line-height: 1.5em; }
+    .vex.vex-theme-os .vex-content h1, .vex.vex-theme-os .vex-content h2, .vex.vex-theme-os .vex-content h3, .vex.vex-theme-os .vex-content h4, .vex.vex-theme-os .vex-content h5, .vex.vex-theme-os .vex-content h6, .vex.vex-theme-os .vex-content p, .vex.vex-theme-os .vex-content ul, .vex.vex-theme-os .vex-content li {
+      color: inherit; }
+  .vex.vex-theme-os .vex-close {
+    border-radius: 0 5px 0 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer; }
+    .vex.vex-theme-os .vex-close:before {
+      border-radius: 3px;
+      position: absolute;
+      content: "\00D7";
+      font-size: 26px;
+      font-weight: normal;
+      line-height: 31px;
+      height: 30px;
+      width: 30px;
+      text-align: center;
+      top: 3px;
+      right: 3px;
+      color: #bbb;
+      background: transparent; }
+    .vex.vex-theme-os .vex-close:hover:before, .vex.vex-theme-os .vex-close:active:before {
+      color: #777;
+      background: #e0e0e0; }
+  .vex.vex-theme-os .vex-dialog-form .vex-dialog-message {
+    margin-bottom: .5em; }
+  .vex.vex-theme-os .vex-dialog-form .vex-dialog-input {
+    margin-bottom: 1em; }
+    .vex.vex-theme-os .vex-dialog-form .vex-dialog-input select, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="week"] {
+      border-radius: 3px;
+      background: #fff;
+      width: 100%;
+      padding: .25em .67em;
+      border: 0;
+      font-family: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+      min-height: 2.5em;
+      margin: 0 0 .25em; }
+      .vex.vex-theme-os .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+        box-shadow: inset 0 0 0 1px #3288e6;
+        outline: none; }
+  .vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons {
+    *zoom: 1; }
+    .vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons:after {
+      content: "";
+      display: table;
+      clear: both; }
+  .vex.vex-theme-os .vex-dialog-button {
+    border-radius: 3px;
+    border: 0;
+    float: right;
+    margin: 0 0 0 .5em;
+    font-family: inherit;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    font-size: .8em;
+    line-height: 1em;
+    padding: .75em 2em; }
+    .vex.vex-theme-os .vex-dialog-button.vex-last {
+      margin-left: 0; }
+    .vex.vex-theme-os .vex-dialog-button:focus {
+      -webkit-animation: vex-pulse 1.1s infinite;
+      animation: vex-pulse 1.1s infinite;
+      outline: none; }
+      @media (max-width: 568px) {
+        .vex.vex-theme-os .vex-dialog-button:focus {
+          -webkit-animation: none;
+          animation: none; } }
+    .vex.vex-theme-os .vex-dialog-button.vex-dialog-button-primary {
+      background: #3288e6;
+      color: #fff; }
+    .vex.vex-theme-os .vex-dialog-button.vex-dialog-button-secondary {
+      background: #e0e0e0;
+      color: #777; }
+
+.vex-loading-spinner.vex-theme-os {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0.5em rgba(0, 0, 0, 0.2);
+  border-radius: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  width: 0;
+  height: 0;
+  border: 1.2em solid #bbb;
+  border-top-color: #f0f0f0;
+  border-bottom-color: #f0f0f0; }
diff --git a/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-plain.css b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-plain.css
new file mode 100644
index 000000000..cf06329d0
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-plain.css
@@ -0,0 +1,107 @@
+@-webkit-keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+@keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+.vex.vex-theme-plain {
+  padding-top: 160px;
+  padding-bottom: 160px; }
+  .vex.vex-theme-plain .vex-content {
+    font-family: "Helvetica Neue", sans-serif;
+    background: #fff;
+    color: #444;
+    padding: 1em;
+    position: relative;
+    margin: 0 auto;
+    max-width: 100%;
+    width: 450px;
+    font-size: 1.1em;
+    line-height: 1.5em; }
+    .vex.vex-theme-plain .vex-content h1, .vex.vex-theme-plain .vex-content h2, .vex.vex-theme-plain .vex-content h3, .vex.vex-theme-plain .vex-content h4, .vex.vex-theme-plain .vex-content h5, .vex.vex-theme-plain .vex-content h6, .vex.vex-theme-plain .vex-content p, .vex.vex-theme-plain .vex-content ul, .vex.vex-theme-plain .vex-content li {
+      color: inherit; }
+  .vex.vex-theme-plain .vex-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer; }
+    .vex.vex-theme-plain .vex-close:before {
+      position: absolute;
+      content: "\00D7";
+      font-size: 26px;
+      font-weight: normal;
+      line-height: 31px;
+      height: 30px;
+      width: 30px;
+      text-align: center;
+      top: 3px;
+      right: 3px;
+      color: #bbb;
+      background: transparent; }
+    .vex.vex-theme-plain .vex-close:hover:before, .vex.vex-theme-plain .vex-close:active:before {
+      color: #777;
+      background: #e0e0e0; }
+  .vex.vex-theme-plain .vex-dialog-form .vex-dialog-message {
+    margin-bottom: .5em; }
+  .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input {
+    margin-bottom: 1em; }
+    .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input select, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="week"] {
+      background: #f0f0f0;
+      width: 100%;
+      padding: .25em .67em;
+      border: 0;
+      font-family: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+      min-height: 2.5em;
+      margin: 0 0 .25em; }
+      .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
+        outline: none; }
+  .vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons {
+    *zoom: 1; }
+    .vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons:after {
+      content: "";
+      display: table;
+      clear: both; }
+  .vex.vex-theme-plain .vex-dialog-button {
+    border-radius: 0;
+    border: 0;
+    float: right;
+    margin: 0 0 0 .5em;
+    font-family: inherit;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    font-size: .8em;
+    line-height: 1em;
+    padding: .75em 2em; }
+    .vex.vex-theme-plain .vex-dialog-button.vex-last {
+      margin-left: 0; }
+    .vex.vex-theme-plain .vex-dialog-button:focus {
+      -webkit-animation: vex-pulse 1.1s infinite;
+      animation: vex-pulse 1.1s infinite;
+      outline: none; }
+      @media (max-width: 568px) {
+        .vex.vex-theme-plain .vex-dialog-button:focus {
+          -webkit-animation: none;
+          animation: none; } }
+    .vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-primary {
+      background: #3288e6;
+      color: #fff; }
+    .vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-secondary {
+      background: #e0e0e0;
+      color: #777; }
+
+.vex-loading-spinner.vex-theme-plain {
+  height: 2.5em;
+  width: 2.5em; }
diff --git a/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-top.css b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-top.css
new file mode 100644
index 000000000..68f15ecf2
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-top.css
@@ -0,0 +1,178 @@
+@-webkit-keyframes vex-dropin {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 0; }
+  1% {
+    -webkit-transform: translateY(-800px);
+    transform: translateY(-800px);
+    opacity: 0; }
+  2% {
+    -webkit-transform: translateY(-800px);
+    transform: translateY(-800px);
+    opacity: 1; }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1; } }
+
+@keyframes vex-dropin {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 0; }
+  1% {
+    -webkit-transform: translateY(-800px);
+    transform: translateY(-800px);
+    opacity: 0; }
+  2% {
+    -webkit-transform: translateY(-800px);
+    transform: translateY(-800px);
+    opacity: 1; }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1; } }
+
+@-webkit-keyframes vex-dropout {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0); }
+  100% {
+    -webkit-transform: translateY(-800px);
+    transform: translateY(-800px); } }
+
+@keyframes vex-dropout {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0); }
+  100% {
+    -webkit-transform: translateY(-800px);
+    transform: translateY(-800px); } }
+
+@-webkit-keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+@keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+.vex.vex-theme-top.vex-closing .vex-content {
+  -webkit-animation: vex-dropout .5s forwards;
+  animation: vex-dropout .5s forwards; }
+
+.vex.vex-theme-top .vex-content {
+  -webkit-animation: vex-dropin .5s;
+  animation: vex-dropin .5s; }
+
+.vex.vex-theme-top .vex-content {
+  border-radius: 0 0 5px 5px;
+  font-family: "Helvetica Neue", sans-serif;
+  background: #f0f0f0;
+  color: #444;
+  padding: 1em;
+  position: relative;
+  margin: 0 auto;
+  max-width: 100%;
+  width: 450px;
+  font-size: 1.1em;
+  line-height: 1.5em; }
+  .vex.vex-theme-top .vex-content h1, .vex.vex-theme-top .vex-content h2, .vex.vex-theme-top .vex-content h3, .vex.vex-theme-top .vex-content h4, .vex.vex-theme-top .vex-content h5, .vex.vex-theme-top .vex-content h6, .vex.vex-theme-top .vex-content p, .vex.vex-theme-top .vex-content ul, .vex.vex-theme-top .vex-content li {
+    color: inherit; }
+
+.vex.vex-theme-top .vex-close {
+  border-radius: 5px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer; }
+  .vex.vex-theme-top .vex-close:before {
+    border-radius: 3px;
+    position: absolute;
+    content: "\00D7";
+    font-size: 26px;
+    font-weight: normal;
+    line-height: 31px;
+    height: 30px;
+    width: 30px;
+    text-align: center;
+    top: 3px;
+    right: 3px;
+    color: #bbb;
+    background: transparent; }
+  .vex.vex-theme-top .vex-close:hover:before, .vex.vex-theme-top .vex-close:active:before {
+    color: #777;
+    background: #e0e0e0; }
+
+.vex.vex-theme-top .vex-dialog-form .vex-dialog-message {
+  margin-bottom: .5em; }
+
+.vex.vex-theme-top .vex-dialog-form .vex-dialog-input {
+  margin-bottom: 1em; }
+  .vex.vex-theme-top .vex-dialog-form .vex-dialog-input select, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="week"] {
+    border-radius: 3px;
+    background: #fff;
+    width: 100%;
+    padding: .25em .67em;
+    border: 0;
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    min-height: 2.5em;
+    margin: 0 0 .25em; }
+    .vex.vex-theme-top .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+      box-shadow: inset 0 0 0 2px #8dbdf1;
+      outline: none; }
+
+.vex.vex-theme-top .vex-dialog-form .vex-dialog-buttons {
+  *zoom: 1; }
+  .vex.vex-theme-top .vex-dialog-form .vex-dialog-buttons:after {
+    content: "";
+    display: table;
+    clear: both; }
+
+.vex.vex-theme-top .vex-dialog-button {
+  border-radius: 3px;
+  border: 0;
+  float: right;
+  margin: 0 0 0 .5em;
+  font-family: inherit;
+  text-transform: uppercase;
+  letter-spacing: .1em;
+  font-size: .8em;
+  line-height: 1em;
+  padding: .75em 2em; }
+  .vex.vex-theme-top .vex-dialog-button.vex-last {
+    margin-left: 0; }
+  .vex.vex-theme-top .vex-dialog-button:focus {
+    -webkit-animation: vex-pulse 1.1s infinite;
+    animation: vex-pulse 1.1s infinite;
+    outline: none; }
+    @media (max-width: 568px) {
+      .vex.vex-theme-top .vex-dialog-button:focus {
+        -webkit-animation: none;
+        animation: none; } }
+  .vex.vex-theme-top .vex-dialog-button.vex-dialog-button-primary {
+    background: #3288e6;
+    color: #fff; }
+  .vex.vex-theme-top .vex-dialog-button.vex-dialog-button-secondary {
+    background: #e0e0e0;
+    color: #777; }
+
+.vex-loading-spinner.vex-theme-top {
+  box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
+  border-radius: 100%;
+  background: #f0f0f0;
+  border: .2em solid transparent;
+  border-top-color: #bbb;
+  top: -1.1em;
+  bottom: auto; }
diff --git a/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-wireframe.css b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-wireframe.css
new file mode 100644
index 000000000..4f1d42647
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/css/vex-theme-wireframe.css
@@ -0,0 +1,110 @@
+@-webkit-keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+@keyframes vex-pulse {
+  0% {
+    box-shadow: inset 0 0 0 300px transparent; }
+  70% {
+    box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); }
+  100% {
+    box-shadow: inset 0 0 0 300px transparent; } }
+
+.vex.vex-theme-wireframe {
+  padding-top: 160px;
+  padding-bottom: 160px; }
+  .vex.vex-theme-wireframe .vex-overlay {
+    background: rgba(255, 255, 255, 0.4); }
+  .vex.vex-theme-wireframe .vex-content {
+    font-family: "Helvetica Neue", sans-serif;
+    background: #fff;
+    color: #000;
+    border: 2px solid #000;
+    padding: 2em;
+    position: relative;
+    margin: 0 auto;
+    max-width: 100%;
+    width: 400px;
+    font-size: 1.1em;
+    line-height: 1.5em; }
+    .vex.vex-theme-wireframe .vex-content h1, .vex.vex-theme-wireframe .vex-content h2, .vex.vex-theme-wireframe .vex-content h3, .vex.vex-theme-wireframe .vex-content h4, .vex.vex-theme-wireframe .vex-content h5, .vex.vex-theme-wireframe .vex-content h6, .vex.vex-theme-wireframe .vex-content p, .vex.vex-theme-wireframe .vex-content ul, .vex.vex-theme-wireframe .vex-content li {
+      color: inherit; }
+  .vex.vex-theme-wireframe .vex-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer; }
+    .vex.vex-theme-wireframe .vex-close:before {
+      position: absolute;
+      content: "\00D7";
+      font-size: 40px;
+      font-weight: normal;
+      line-height: 80px;
+      height: 80px;
+      width: 80px;
+      text-align: center;
+      top: 3px;
+      right: 3px;
+      color: #000; }
+    .vex.vex-theme-wireframe .vex-close:hover:before, .vex.vex-theme-wireframe .vex-close:active:before {
+      color: #000; }
+  .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-message {
+    margin-bottom: .5em; }
+  .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input {
+    margin-bottom: 1em; }
+    .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input select, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="week"] {
+      background: #fff;
+      width: 100%;
+      padding: .25em .67em;
+      font-family: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+      min-height: 2.5em;
+      margin: 0 0 .25em;
+      border: 2px solid #000; }
+      .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="week"]:focus {
+        border-style: dashed;
+        outline: none; }
+  .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons {
+    *zoom: 1; }
+    .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons:after {
+      content: "";
+      display: table;
+      clear: both; }
+  .vex.vex-theme-wireframe .vex-dialog-button {
+    border-radius: 0;
+    border: 0;
+    float: right;
+    margin: 0 0 0 .5em;
+    font-family: inherit;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    font-size: .8em;
+    line-height: 1em;
+    padding: .75em 2em; }
+    .vex.vex-theme-wireframe .vex-dialog-button.vex-last {
+      margin-left: 0; }
+    .vex.vex-theme-wireframe .vex-dialog-button:focus {
+      -webkit-animation: vex-pulse 1.1s infinite;
+      animation: vex-pulse 1.1s infinite;
+      outline: none; }
+      @media (max-width: 568px) {
+        .vex.vex-theme-wireframe .vex-dialog-button:focus {
+          -webkit-animation: none;
+          animation: none; } }
+    .vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-primary {
+      background: #000;
+      color: #fff;
+      border: 2px solid transparent; }
+    .vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-secondary {
+      background: #fff;
+      color: #000;
+      border: 2px solid #000; }
+
+.vex-loading-spinner.vex-theme-wireframe {
+  height: 2.5em;
+  width: 2.5em; }
diff --git a/BTCPayServer/wwwroot/vendor/vex/css/vex.css b/BTCPayServer/wwwroot/vendor/vex/css/vex.css
new file mode 100644
index 000000000..809da92fd
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/css/vex.css
@@ -0,0 +1,117 @@
+@-webkit-keyframes vex-fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@keyframes vex-fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@-webkit-keyframes vex-fadeout {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+@keyframes vex-fadeout {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+@-webkit-keyframes vex-rotation {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg); } }
+
+@keyframes vex-rotation {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg); } }
+
+.vex, .vex *, .vex *:before, .vex *:after {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+
+.vex {
+  position: fixed;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  z-index: 1111;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+
+.vex-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll; }
+
+.vex-overlay {
+  -webkit-animation: vex-fadein .5s;
+  animation: vex-fadein .5s;
+  position: fixed;
+  z-index: 1111;
+  background: rgba(0, 0, 0, 0.4);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+
+.vex-overlay.vex-closing {
+  -webkit-animation: vex-fadeout .5s forwards;
+  animation: vex-fadeout .5s forwards; }
+
+.vex-content {
+  -webkit-animation: vex-fadein .5s;
+  animation: vex-fadein .5s;
+  background: #fff; }
+
+.vex.vex-closing .vex-content {
+  -webkit-animation: vex-fadeout .5s forwards;
+  animation: vex-fadeout .5s forwards; }
+
+.vex-close:before {
+  font-family: Arial, sans-serif;
+  content: "\00D7"; }
+
+.vex-dialog-form {
+  margin: 0; }
+
+.vex-dialog-button {
+  text-rendering: optimizeLegibility;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent; }
+
+.vex-loading-spinner {
+  -webkit-animation: vex-rotation .7s linear infinite;
+  animation: vex-rotation .7s linear infinite;
+  box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
+  position: fixed;
+  z-index: 1112;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 2em;
+  width: 2em;
+  background: #fff; }
+
+body.vex-open {
+  overflow: hidden; }
diff --git a/BTCPayServer/wwwroot/vendor/vex/js/vex.combined.js b/BTCPayServer/wwwroot/vendor/vex/js/vex.combined.js
new file mode 100644
index 000000000..295c2c325
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/js/vex.combined.js
@@ -0,0 +1,1629 @@
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.vex = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/*
+ * classList.js: Cross-browser full element.classList implementation.
+ * 2014-07-23
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public Domain.
+ * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+ */
+
+/*global self, document, DOMException */
+
+/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
+
+/* Copied from MDN:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
+ */
+
+if ("document" in window.self) {
+
+  // Full polyfill for browsers with no classList support
+  // Including IE < Edge missing SVGElement.classList
+  if (!("classList" in document.createElement("_"))
+    || document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg","g"))) {
+
+  (function (view) {
+
+    "use strict";
+
+    if (!('Element' in view)) return;
+
+    var
+        classListProp = "classList"
+      , protoProp = "prototype"
+      , elemCtrProto = view.Element[protoProp]
+      , objCtr = Object
+      , strTrim = String[protoProp].trim || function () {
+        return this.replace(/^\s+|\s+$/g, "");
+      }
+      , arrIndexOf = Array[protoProp].indexOf || function (item) {
+        var
+            i = 0
+          , len = this.length
+        ;
+        for (; i < len; i++) {
+          if (i in this && this[i] === item) {
+            return i;
+          }
+        }
+        return -1;
+      }
+      // Vendors: please allow content code to instantiate DOMExceptions
+      , DOMEx = function (type, message) {
+        this.name = type;
+        this.code = DOMException[type];
+        this.message = message;
+      }
+      , checkTokenAndGetIndex = function (classList, token) {
+        if (token === "") {
+          throw new DOMEx(
+              "SYNTAX_ERR"
+            , "An invalid or illegal string was specified"
+          );
+        }
+        if (/\s/.test(token)) {
+          throw new DOMEx(
+              "INVALID_CHARACTER_ERR"
+            , "String contains an invalid character"
+          );
+        }
+        return arrIndexOf.call(classList, token);
+      }
+      , ClassList = function (elem) {
+        var
+            trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
+          , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
+          , i = 0
+          , len = classes.length
+        ;
+        for (; i < len; i++) {
+          this.push(classes[i]);
+        }
+        this._updateClassName = function () {
+          elem.setAttribute("class", this.toString());
+        };
+      }
+      , classListProto = ClassList[protoProp] = []
+      , classListGetter = function () {
+        return new ClassList(this);
+      }
+    ;
+    // Most DOMException implementations don't allow calling DOMException's toString()
+    // on non-DOMExceptions. Error's toString() is sufficient here.
+    DOMEx[protoProp] = Error[protoProp];
+    classListProto.item = function (i) {
+      return this[i] || null;
+    };
+    classListProto.contains = function (token) {
+      token += "";
+      return checkTokenAndGetIndex(this, token) !== -1;
+    };
+    classListProto.add = function () {
+      var
+          tokens = arguments
+        , i = 0
+        , l = tokens.length
+        , token
+        , updated = false
+      ;
+      do {
+        token = tokens[i] + "";
+        if (checkTokenAndGetIndex(this, token) === -1) {
+          this.push(token);
+          updated = true;
+        }
+      }
+      while (++i < l);
+
+      if (updated) {
+        this._updateClassName();
+      }
+    };
+    classListProto.remove = function () {
+      var
+          tokens = arguments
+        , i = 0
+        , l = tokens.length
+        , token
+        , updated = false
+        , index
+      ;
+      do {
+        token = tokens[i] + "";
+        index = checkTokenAndGetIndex(this, token);
+        while (index !== -1) {
+          this.splice(index, 1);
+          updated = true;
+          index = checkTokenAndGetIndex(this, token);
+        }
+      }
+      while (++i < l);
+
+      if (updated) {
+        this._updateClassName();
+      }
+    };
+    classListProto.toggle = function (token, force) {
+      token += "";
+
+      var
+          result = this.contains(token)
+        , method = result ?
+          force !== true && "remove"
+        :
+          force !== false && "add"
+      ;
+
+      if (method) {
+        this[method](token);
+      }
+
+      if (force === true || force === false) {
+        return force;
+      } else {
+        return !result;
+      }
+    };
+    classListProto.toString = function () {
+      return this.join(" ");
+    };
+
+    if (objCtr.defineProperty) {
+      var classListPropDesc = {
+          get: classListGetter
+        , enumerable: true
+        , configurable: true
+      };
+      try {
+        objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+      } catch (ex) { // IE 8 doesn't support enumerable:true
+        if (ex.number === -0x7FF5EC54) {
+          classListPropDesc.enumerable = false;
+          objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+        }
+      }
+    } else if (objCtr[protoProp].__defineGetter__) {
+      elemCtrProto.__defineGetter__(classListProp, classListGetter);
+    }
+
+    }(window.self));
+
+    } else {
+    // There is full or partial native classList support, so just check if we need
+    // to normalize the add/remove and toggle APIs.
+
+    (function () {
+      "use strict";
+
+      var testElement = document.createElement("_");
+
+      testElement.classList.add("c1", "c2");
+
+      // Polyfill for IE 10/11 and Firefox <26, where classList.add and
+      // classList.remove exist but support only one argument at a time.
+      if (!testElement.classList.contains("c2")) {
+        var createMethod = function(method) {
+          var original = DOMTokenList.prototype[method];
+
+          DOMTokenList.prototype[method] = function(token) {
+            var i, len = arguments.length;
+
+            for (i = 0; i < len; i++) {
+              token = arguments[i];
+              original.call(this, token);
+            }
+          };
+        };
+        createMethod('add');
+        createMethod('remove');
+      }
+
+      testElement.classList.toggle("c3", false);
+
+      // Polyfill for IE 10 and Firefox <24, where classList.toggle does not
+      // support the second argument.
+      if (testElement.classList.contains("c3")) {
+        var _toggle = DOMTokenList.prototype.toggle;
+
+        DOMTokenList.prototype.toggle = function(token, force) {
+          if (1 in arguments && !this.contains(token) === !force) {
+            return force;
+          } else {
+            return _toggle.call(this, token);
+          }
+        };
+
+      }
+
+      testElement = null;
+    }());
+  }
+}
+
+},{}],2:[function(require,module,exports){
+
+/**
+ * Expose `parse`.
+ */
+
+module.exports = parse;
+
+/**
+ * Tests for browser support.
+ */
+
+var innerHTMLBug = false;
+var bugTestDiv;
+if (typeof document !== 'undefined') {
+  bugTestDiv = document.createElement('div');
+  // Setup
+  bugTestDiv.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>';
+  // Make sure that link elements get serialized correctly by innerHTML
+  // This requires a wrapper element in IE
+  innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
+  bugTestDiv = undefined;
+}
+
+/**
+ * Wrap map from jquery.
+ */
+
+var map = {
+  legend: [1, '<fieldset>', '</fieldset>'],
+  tr: [2, '<table><tbody>', '</tbody></table>'],
+  col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
+  // for script/link/style tags to work in IE6-8, you have to wrap
+  // in a div with a non-whitespace character in front, ha!
+  _default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
+};
+
+map.td =
+map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
+
+map.option =
+map.optgroup = [1, '<select multiple="multiple">', '</select>'];
+
+map.thead =
+map.tbody =
+map.colgroup =
+map.caption =
+map.tfoot = [1, '<table>', '</table>'];
+
+map.polyline =
+map.ellipse =
+map.polygon =
+map.circle =
+map.text =
+map.line =
+map.path =
+map.rect =
+map.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
+
+/**
+ * Parse `html` and return a DOM Node instance, which could be a TextNode,
+ * HTML DOM Node of some kind (<div> for example), or a DocumentFragment
+ * instance, depending on the contents of the `html` string.
+ *
+ * @param {String} html - HTML string to "domify"
+ * @param {Document} doc - The `document` instance to create the Node for
+ * @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance
+ * @api private
+ */
+
+function parse(html, doc) {
+  if ('string' != typeof html) throw new TypeError('String expected');
+
+  // default to the global `document` object
+  if (!doc) doc = document;
+
+  // tag name
+  var m = /<([\w:]+)/.exec(html);
+  if (!m) return doc.createTextNode(html);
+
+  html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
+
+  var tag = m[1];
+
+  // body support
+  if (tag == 'body') {
+    var el = doc.createElement('html');
+    el.innerHTML = html;
+    return el.removeChild(el.lastChild);
+  }
+
+  // wrap map
+  var wrap = map[tag] || map._default;
+  var depth = wrap[0];
+  var prefix = wrap[1];
+  var suffix = wrap[2];
+  var el = doc.createElement('div');
+  el.innerHTML = prefix + html + suffix;
+  while (depth--) el = el.lastChild;
+
+  // one element
+  if (el.firstChild == el.lastChild) {
+    return el.removeChild(el.firstChild);
+  }
+
+  // several elements
+  var fragment = doc.createDocumentFragment();
+  while (el.firstChild) {
+    fragment.appendChild(el.removeChild(el.firstChild));
+  }
+
+  return fragment;
+}
+
+},{}],3:[function(require,module,exports){
+/**
+ * Code refactored from Mozilla Developer Network:
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+ */
+
+'use strict';
+
+function assign(target, firstSource) {
+  if (target === undefined || target === null) {
+    throw new TypeError('Cannot convert first argument to object');
+  }
+
+  var to = Object(target);
+  for (var i = 1; i < arguments.length; i++) {
+    var nextSource = arguments[i];
+    if (nextSource === undefined || nextSource === null) {
+      continue;
+    }
+
+    var keysArray = Object.keys(Object(nextSource));
+    for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
+      var nextKey = keysArray[nextIndex];
+      var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+      if (desc !== undefined && desc.enumerable) {
+        to[nextKey] = nextSource[nextKey];
+      }
+    }
+  }
+  return to;
+}
+
+function polyfill() {
+  if (!Object.assign) {
+    Object.defineProperty(Object, 'assign', {
+      enumerable: false,
+      configurable: true,
+      writable: true,
+      value: assign
+    });
+  }
+}
+
+module.exports = {
+  assign: assign,
+  polyfill: polyfill
+};
+
+},{}],4:[function(require,module,exports){
+// get successful control from form and assemble into object
+// http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
+
+// types which indicate a submit action and are not successful controls
+// these will be ignored
+var k_r_submitter = /^(?:submit|button|image|reset|file)$/i;
+
+// node names which could be successful controls
+var k_r_success_contrls = /^(?:input|select|textarea|keygen)/i;
+
+// Matches bracket notation.
+var brackets = /(\[[^\[\]]*\])/g;
+
+// serializes form fields
+// @param form MUST be an HTMLForm element
+// @param options is an optional argument to configure the serialization. Default output
+// with no options specified is a url encoded string
+//    - hash: [true | false] Configure the output type. If true, the output will
+//    be a js object.
+//    - serializer: [function] Optional serializer function to override the default one.
+//    The function takes 3 arguments (result, key, value) and should return new result
+//    hash and url encoded str serializers are provided with this module
+//    - disabled: [true | false]. If true serialize disabled fields.
+//    - empty: [true | false]. If true serialize empty fields
+function serialize(form, options) {
+    if (typeof options != 'object') {
+        options = { hash: !!options };
+    }
+    else if (options.hash === undefined) {
+        options.hash = true;
+    }
+
+    var result = (options.hash) ? {} : '';
+    var serializer = options.serializer || ((options.hash) ? hash_serializer : str_serialize);
+
+    var elements = form && form.elements ? form.elements : [];
+
+    //Object store each radio and set if it's empty or not
+    var radio_store = Object.create(null);
+
+    for (var i=0 ; i<elements.length ; ++i) {
+        var element = elements[i];
+
+        // ingore disabled fields
+        if ((!options.disabled && element.disabled) || !element.name) {
+            continue;
+        }
+        // ignore anyhting that is not considered a success field
+        if (!k_r_success_contrls.test(element.nodeName) ||
+            k_r_submitter.test(element.type)) {
+            continue;
+        }
+
+        var key = element.name;
+        var val = element.value;
+
+        // we can't just use element.value for checkboxes cause some browsers lie to us
+        // they say "on" for value when the box isn't checked
+        if ((element.type === 'checkbox' || element.type === 'radio') && !element.checked) {
+            val = undefined;
+        }
+
+        // If we want empty elements
+        if (options.empty) {
+            // for checkbox
+            if (element.type === 'checkbox' && !element.checked) {
+                val = '';
+            }
+
+            // for radio
+            if (element.type === 'radio') {
+                if (!radio_store[element.name] && !element.checked) {
+                    radio_store[element.name] = false;
+                }
+                else if (element.checked) {
+                    radio_store[element.name] = true;
+                }
+            }
+
+            // if options empty is true, continue only if its radio
+            if (!val && element.type == 'radio') {
+                continue;
+            }
+        }
+        else {
+            // value-less fields are ignored unless options.empty is true
+            if (!val) {
+                continue;
+            }
+        }
+
+        // multi select boxes
+        if (element.type === 'select-multiple') {
+            val = [];
+
+            var selectOptions = element.options;
+            var isSelectedOptions = false;
+            for (var j=0 ; j<selectOptions.length ; ++j) {
+                var option = selectOptions[j];
+                var allowedEmpty = options.empty && !option.value;
+                var hasValue = (option.value || allowedEmpty);
+                if (option.selected && hasValue) {
+                    isSelectedOptions = true;
+
+                    // If using a hash serializer be sure to add the
+                    // correct notation for an array in the multi-select
+                    // context. Here the name attribute on the select element
+                    // might be missing the trailing bracket pair. Both names
+                    // "foo" and "foo[]" should be arrays.
+                    if (options.hash && key.slice(key.length - 2) !== '[]') {
+                        result = serializer(result, key + '[]', option.value);
+                    }
+                    else {
+                        result = serializer(result, key, option.value);
+                    }
+                }
+            }
+
+            // Serialize if no selected options and options.empty is true
+            if (!isSelectedOptions && options.empty) {
+                result = serializer(result, key, '');
+            }
+
+            continue;
+        }
+
+        result = serializer(result, key, val);
+    }
+
+    // Check for all empty radio buttons and serialize them with key=""
+    if (options.empty) {
+        for (var key in radio_store) {
+            if (!radio_store[key]) {
+                result = serializer(result, key, '');
+            }
+        }
+    }
+
+    return result;
+}
+
+function parse_keys(string) {
+    var keys = [];
+    var prefix = /^([^\[\]]*)/;
+    var children = new RegExp(brackets);
+    var match = prefix.exec(string);
+
+    if (match[1]) {
+        keys.push(match[1]);
+    }
+
+    while ((match = children.exec(string)) !== null) {
+        keys.push(match[1]);
+    }
+
+    return keys;
+}
+
+function hash_assign(result, keys, value) {
+    if (keys.length === 0) {
+        result = value;
+        return result;
+    }
+
+    var key = keys.shift();
+    var between = key.match(/^\[(.+?)\]$/);
+
+    if (key === '[]') {
+        result = result || [];
+
+        if (Array.isArray(result)) {
+            result.push(hash_assign(null, keys, value));
+        }
+        else {
+            // This might be the result of bad name attributes like "[][foo]",
+            // in this case the original `result` object will already be
+            // assigned to an object literal. Rather than coerce the object to
+            // an array, or cause an exception the attribute "_values" is
+            // assigned as an array.
+            result._values = result._values || [];
+            result._values.push(hash_assign(null, keys, value));
+        }
+
+        return result;
+    }
+
+    // Key is an attribute name and can be assigned directly.
+    if (!between) {
+        result[key] = hash_assign(result[key], keys, value);
+    }
+    else {
+        var string = between[1];
+        // +var converts the variable into a number
+        // better than parseInt because it doesn't truncate away trailing
+        // letters and actually fails if whole thing is not a number
+        var index = +string;
+
+        // If the characters between the brackets is not a number it is an
+        // attribute name and can be assigned directly.
+        if (isNaN(index)) {
+            result = result || {};
+            result[string] = hash_assign(result[string], keys, value);
+        }
+        else {
+            result = result || [];
+            result[index] = hash_assign(result[index], keys, value);
+        }
+    }
+
+    return result;
+}
+
+// Object/hash encoding serializer.
+function hash_serializer(result, key, value) {
+    var matches = key.match(brackets);
+
+    // Has brackets? Use the recursive assignment function to walk the keys,
+    // construct any missing objects in the result tree and make the assignment
+    // at the end of the chain.
+    if (matches) {
+        var keys = parse_keys(key);
+        hash_assign(result, keys, value);
+    }
+    else {
+        // Non bracket notation can make assignments directly.
+        var existing = result[key];
+
+        // If the value has been assigned already (for instance when a radio and
+        // a checkbox have the same name attribute) convert the previous value
+        // into an array before pushing into it.
+        //
+        // NOTE: If this requirement were removed all hash creation and
+        // assignment could go through `hash_assign`.
+        if (existing) {
+            if (!Array.isArray(existing)) {
+                result[key] = [ existing ];
+            }
+
+            result[key].push(value);
+        }
+        else {
+            result[key] = value;
+        }
+    }
+
+    return result;
+}
+
+// urlform encoding serializer
+function str_serialize(result, key, value) {
+    // encode newlines as \r\n cause the html spec says so
+    value = value.replace(/(\r)?\n/g, '\r\n');
+    value = encodeURIComponent(value);
+
+    // spaces should be '+' rather than '%20'.
+    value = value.replace(/%20/g, '+');
+    return result + (result ? '&' : '') + encodeURIComponent(key) + '=' + value;
+}
+
+module.exports = serialize;
+
+},{}],5:[function(require,module,exports){
+(function (global){
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.vexDialog = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+
+/**
+ * Expose `parse`.
+ */
+
+module.exports = parse;
+
+/**
+ * Tests for browser support.
+ */
+
+var innerHTMLBug = false;
+var bugTestDiv;
+if (typeof document !== 'undefined') {
+  bugTestDiv = document.createElement('div');
+  // Setup
+  bugTestDiv.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>';
+  // Make sure that link elements get serialized correctly by innerHTML
+  // This requires a wrapper element in IE
+  innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
+  bugTestDiv = undefined;
+}
+
+/**
+ * Wrap map from jquery.
+ */
+
+var map = {
+  legend: [1, '<fieldset>', '</fieldset>'],
+  tr: [2, '<table><tbody>', '</tbody></table>'],
+  col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
+  // for script/link/style tags to work in IE6-8, you have to wrap
+  // in a div with a non-whitespace character in front, ha!
+  _default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
+};
+
+map.td =
+map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
+
+map.option =
+map.optgroup = [1, '<select multiple="multiple">', '</select>'];
+
+map.thead =
+map.tbody =
+map.colgroup =
+map.caption =
+map.tfoot = [1, '<table>', '</table>'];
+
+map.polyline =
+map.ellipse =
+map.polygon =
+map.circle =
+map.text =
+map.line =
+map.path =
+map.rect =
+map.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
+
+/**
+ * Parse `html` and return a DOM Node instance, which could be a TextNode,
+ * HTML DOM Node of some kind (<div> for example), or a DocumentFragment
+ * instance, depending on the contents of the `html` string.
+ *
+ * @param {String} html - HTML string to "domify"
+ * @param {Document} doc - The `document` instance to create the Node for
+ * @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance
+ * @api private
+ */
+
+function parse(html, doc) {
+  if ('string' != typeof html) throw new TypeError('String expected');
+
+  // default to the global `document` object
+  if (!doc) doc = document;
+
+  // tag name
+  var m = /<([\w:]+)/.exec(html);
+  if (!m) return doc.createTextNode(html);
+
+  html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
+
+  var tag = m[1];
+
+  // body support
+  if (tag == 'body') {
+    var el = doc.createElement('html');
+    el.innerHTML = html;
+    return el.removeChild(el.lastChild);
+  }
+
+  // wrap map
+  var wrap = map[tag] || map._default;
+  var depth = wrap[0];
+  var prefix = wrap[1];
+  var suffix = wrap[2];
+  var el = doc.createElement('div');
+  el.innerHTML = prefix + html + suffix;
+  while (depth--) el = el.lastChild;
+
+  // one element
+  if (el.firstChild == el.lastChild) {
+    return el.removeChild(el.firstChild);
+  }
+
+  // several elements
+  var fragment = doc.createDocumentFragment();
+  while (el.firstChild) {
+    fragment.appendChild(el.removeChild(el.firstChild));
+  }
+
+  return fragment;
+}
+
+},{}],2:[function(require,module,exports){
+// get successful control from form and assemble into object
+// http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
+
+// types which indicate a submit action and are not successful controls
+// these will be ignored
+var k_r_submitter = /^(?:submit|button|image|reset|file)$/i;
+
+// node names which could be successful controls
+var k_r_success_contrls = /^(?:input|select|textarea|keygen)/i;
+
+// Matches bracket notation.
+var brackets = /(\[[^\[\]]*\])/g;
+
+// serializes form fields
+// @param form MUST be an HTMLForm element
+// @param options is an optional argument to configure the serialization. Default output
+// with no options specified is a url encoded string
+//    - hash: [true | false] Configure the output type. If true, the output will
+//    be a js object.
+//    - serializer: [function] Optional serializer function to override the default one.
+//    The function takes 3 arguments (result, key, value) and should return new result
+//    hash and url encoded str serializers are provided with this module
+//    - disabled: [true | false]. If true serialize disabled fields.
+//    - empty: [true | false]. If true serialize empty fields
+function serialize(form, options) {
+    if (typeof options != 'object') {
+        options = { hash: !!options };
+    }
+    else if (options.hash === undefined) {
+        options.hash = true;
+    }
+
+    var result = (options.hash) ? {} : '';
+    var serializer = options.serializer || ((options.hash) ? hash_serializer : str_serialize);
+
+    var elements = form && form.elements ? form.elements : [];
+
+    //Object store each radio and set if it's empty or not
+    var radio_store = Object.create(null);
+
+    for (var i=0 ; i<elements.length ; ++i) {
+        var element = elements[i];
+
+        // ingore disabled fields
+        if ((!options.disabled && element.disabled) || !element.name) {
+            continue;
+        }
+        // ignore anyhting that is not considered a success field
+        if (!k_r_success_contrls.test(element.nodeName) ||
+            k_r_submitter.test(element.type)) {
+            continue;
+        }
+
+        var key = element.name;
+        var val = element.value;
+
+        // we can't just use element.value for checkboxes cause some browsers lie to us
+        // they say "on" for value when the box isn't checked
+        if ((element.type === 'checkbox' || element.type === 'radio') && !element.checked) {
+            val = undefined;
+        }
+
+        // If we want empty elements
+        if (options.empty) {
+            // for checkbox
+            if (element.type === 'checkbox' && !element.checked) {
+                val = '';
+            }
+
+            // for radio
+            if (element.type === 'radio') {
+                if (!radio_store[element.name] && !element.checked) {
+                    radio_store[element.name] = false;
+                }
+                else if (element.checked) {
+                    radio_store[element.name] = true;
+                }
+            }
+
+            // if options empty is true, continue only if its radio
+            if (!val && element.type == 'radio') {
+                continue;
+            }
+        }
+        else {
+            // value-less fields are ignored unless options.empty is true
+            if (!val) {
+                continue;
+            }
+        }
+
+        // multi select boxes
+        if (element.type === 'select-multiple') {
+            val = [];
+
+            var selectOptions = element.options;
+            var isSelectedOptions = false;
+            for (var j=0 ; j<selectOptions.length ; ++j) {
+                var option = selectOptions[j];
+                var allowedEmpty = options.empty && !option.value;
+                var hasValue = (option.value || allowedEmpty);
+                if (option.selected && hasValue) {
+                    isSelectedOptions = true;
+
+                    // If using a hash serializer be sure to add the
+                    // correct notation for an array in the multi-select
+                    // context. Here the name attribute on the select element
+                    // might be missing the trailing bracket pair. Both names
+                    // "foo" and "foo[]" should be arrays.
+                    if (options.hash && key.slice(key.length - 2) !== '[]') {
+                        result = serializer(result, key + '[]', option.value);
+                    }
+                    else {
+                        result = serializer(result, key, option.value);
+                    }
+                }
+            }
+
+            // Serialize if no selected options and options.empty is true
+            if (!isSelectedOptions && options.empty) {
+                result = serializer(result, key, '');
+            }
+
+            continue;
+        }
+
+        result = serializer(result, key, val);
+    }
+
+    // Check for all empty radio buttons and serialize them with key=""
+    if (options.empty) {
+        for (var key in radio_store) {
+            if (!radio_store[key]) {
+                result = serializer(result, key, '');
+            }
+        }
+    }
+
+    return result;
+}
+
+function parse_keys(string) {
+    var keys = [];
+    var prefix = /^([^\[\]]*)/;
+    var children = new RegExp(brackets);
+    var match = prefix.exec(string);
+
+    if (match[1]) {
+        keys.push(match[1]);
+    }
+
+    while ((match = children.exec(string)) !== null) {
+        keys.push(match[1]);
+    }
+
+    return keys;
+}
+
+function hash_assign(result, keys, value) {
+    if (keys.length === 0) {
+        result = value;
+        return result;
+    }
+
+    var key = keys.shift();
+    var between = key.match(/^\[(.+?)\]$/);
+
+    if (key === '[]') {
+        result = result || [];
+
+        if (Array.isArray(result)) {
+            result.push(hash_assign(null, keys, value));
+        }
+        else {
+            // This might be the result of bad name attributes like "[][foo]",
+            // in this case the original `result` object will already be
+            // assigned to an object literal. Rather than coerce the object to
+            // an array, or cause an exception the attribute "_values" is
+            // assigned as an array.
+            result._values = result._values || [];
+            result._values.push(hash_assign(null, keys, value));
+        }
+
+        return result;
+    }
+
+    // Key is an attribute name and can be assigned directly.
+    if (!between) {
+        result[key] = hash_assign(result[key], keys, value);
+    }
+    else {
+        var string = between[1];
+        // +var converts the variable into a number
+        // better than parseInt because it doesn't truncate away trailing
+        // letters and actually fails if whole thing is not a number
+        var index = +string;
+
+        // If the characters between the brackets is not a number it is an
+        // attribute name and can be assigned directly.
+        if (isNaN(index)) {
+            result = result || {};
+            result[string] = hash_assign(result[string], keys, value);
+        }
+        else {
+            result = result || [];
+            result[index] = hash_assign(result[index], keys, value);
+        }
+    }
+
+    return result;
+}
+
+// Object/hash encoding serializer.
+function hash_serializer(result, key, value) {
+    var matches = key.match(brackets);
+
+    // Has brackets? Use the recursive assignment function to walk the keys,
+    // construct any missing objects in the result tree and make the assignment
+    // at the end of the chain.
+    if (matches) {
+        var keys = parse_keys(key);
+        hash_assign(result, keys, value);
+    }
+    else {
+        // Non bracket notation can make assignments directly.
+        var existing = result[key];
+
+        // If the value has been assigned already (for instance when a radio and
+        // a checkbox have the same name attribute) convert the previous value
+        // into an array before pushing into it.
+        //
+        // NOTE: If this requirement were removed all hash creation and
+        // assignment could go through `hash_assign`.
+        if (existing) {
+            if (!Array.isArray(existing)) {
+                result[key] = [ existing ];
+            }
+
+            result[key].push(value);
+        }
+        else {
+            result[key] = value;
+        }
+    }
+
+    return result;
+}
+
+// urlform encoding serializer
+function str_serialize(result, key, value) {
+    // encode newlines as \r\n cause the html spec says so
+    value = value.replace(/(\r)?\n/g, '\r\n');
+    value = encodeURIComponent(value);
+
+    // spaces should be '+' rather than '%20'.
+    value = value.replace(/%20/g, '+');
+    return result + (result ? '&' : '') + encodeURIComponent(key) + '=' + value;
+}
+
+module.exports = serialize;
+
+},{}],3:[function(require,module,exports){
+var domify = require('domify')
+var serialize = require('form-serialize')
+
+// Build DOM elements for the structure of the dialog
+var buildDialogForm = function buildDialogForm (options) {
+  var form = document.createElement('form')
+  form.classList.add('vex-dialog-form')
+
+  var message = document.createElement('div')
+  message.classList.add('vex-dialog-message')
+  message.appendChild(options.message instanceof window.Node ? options.message : domify(options.message))
+
+  var input = document.createElement('div')
+  input.classList.add('vex-dialog-input')
+  input.appendChild(options.input instanceof window.Node ? options.input : domify(options.input))
+
+  form.appendChild(message)
+  form.appendChild(input)
+
+  return form
+}
+
+// Take an array of buttons (see the default buttons below) and turn them into DOM elements
+var buttonsToDOM = function buttonsToDOM (buttons) {
+  var domButtons = document.createElement('div')
+  domButtons.classList.add('vex-dialog-buttons')
+
+  for (var i = 0; i < buttons.length; i++) {
+    var button = buttons[i]
+    var domButton = document.createElement('button')
+    domButton.type = button.type
+    domButton.textContent = button.text
+    domButton.className = button.className
+    domButton.classList.add('vex-dialog-button')
+    if (i === 0) {
+      domButton.classList.add('vex-first')
+    } else if (i === buttons.length - 1) {
+      domButton.classList.add('vex-last')
+    }
+    // Attach click listener to button with closure
+    (function (button) {
+      domButton.addEventListener('click', function (e) {
+        if (button.click) {
+          button.click.call(this, e)
+        }
+      }.bind(this))
+    }.bind(this)(button))
+
+    domButtons.appendChild(domButton)
+  }
+
+  return domButtons
+}
+
+var plugin = function plugin (vex) {
+  // Define the API first
+  var dialog = {
+    // Plugin name
+    name: 'dialog',
+
+    // Open
+    open: function open (opts) {
+      var options = Object.assign({}, this.defaultOptions, opts)
+
+      // `message` is unsafe internally, so translate
+      // safe default: HTML-escape the message before passing it through
+      if (options.unsafeMessage && !options.message) {
+        options.message = options.unsafeMessage
+      } else if (options.message) {
+        options.message = vex._escapeHtml(options.message)
+      }
+
+      // Build the form from the options
+      var form = options.unsafeContent = buildDialogForm(options)
+
+      // Open the dialog
+      var dialogInstance = vex.open(options)
+
+      // Quick comment - these options and appending buttons and everything
+      // would preferably be done _before_ opening the dialog. However, since
+      // they rely on the context of the vex instance, we have to do them
+      // after. A potential future fix would be to differentiate between
+      // a "created" vex instance and an "opened" vex instance, so any actions
+      // that rely on the specific context of the instance can do their stuff
+      // before opening the dialog on the page.
+
+      // Override the before close callback to also pass the value of the form
+      var beforeClose = options.beforeClose && options.beforeClose.bind(dialogInstance)
+      dialogInstance.options.beforeClose = function dialogBeforeClose () {
+        // Only call the callback once - when the validation in beforeClose, if present, is true
+        var shouldClose = beforeClose ? beforeClose() : true
+        if (shouldClose) {
+          options.callback(this.value || false)
+        }
+        // Return the result of beforeClose() to vex
+        return shouldClose
+      }.bind(dialogInstance)
+
+      // Append buttons to form with correct context
+      form.appendChild(buttonsToDOM.call(dialogInstance, options.buttons))
+
+      // Attach form to instance
+      dialogInstance.form = form
+
+      // Add submit listener to form
+      form.addEventListener('submit', options.onSubmit.bind(dialogInstance))
+
+      // Optionally focus the first input in the form
+      if (options.focusFirstInput) {
+        var el = dialogInstance.contentEl.querySelector('button, input, select, textarea')
+        if (el) {
+          el.focus()
+        }
+      }
+
+      // For chaining
+      return dialogInstance
+    },
+
+    // Alert
+    alert: function (options) {
+      // Allow string as message
+      if (typeof options === 'string') {
+        options = {
+          message: options
+        }
+      }
+      options = Object.assign({}, this.defaultOptions, this.defaultAlertOptions, options)
+      return this.open(options)
+    },
+
+    // Confirm
+    confirm: function (options) {
+      if (typeof options !== 'object' || typeof options.callback !== 'function') {
+        throw new Error('dialog.confirm(options) requires options.callback.')
+      }
+      options = Object.assign({}, this.defaultOptions, this.defaultConfirmOptions, options)
+      return this.open(options)
+    },
+
+    // Prompt
+    prompt: function (options) {
+      if (typeof options !== 'object' || typeof options.callback !== 'function') {
+        throw new Error('dialog.prompt(options) requires options.callback.')
+      }
+      var defaults = Object.assign({}, this.defaultOptions, this.defaultPromptOptions)
+      var dynamicDefaults = {
+        unsafeMessage: '<label for="vex">' + vex._escapeHtml(options.label || defaults.label) + '</label>',
+        input: '<input name="vex" type="text" class="vex-dialog-prompt-input" placeholder="' + vex._escapeHtml(options.placeholder || defaults.placeholder) + '" value="' + vex._escapeHtml(options.value || defaults.value) + '" />'
+      }
+      options = Object.assign(defaults, dynamicDefaults, options)
+      // Pluck the value of the "vex" input field as the return value for prompt's callback
+      // More closely mimics "window.prompt" in that a single string is returned
+      var callback = options.callback
+      options.callback = function promptCallback (value) {
+        if (typeof value === 'object') {
+          var keys = Object.keys(value)
+          value = keys.length ? value[keys[0]] : ''
+        }
+        callback(value)
+      }
+      return this.open(options)
+    }
+  }
+
+  // Now define any additional data that's not the direct dialog API
+  dialog.buttons = {
+    YES: {
+      text: 'OK',
+      type: 'submit',
+      className: 'vex-dialog-button-primary',
+      click: function yesClick () {
+        this.value = true
+      }
+    },
+
+    NO: {
+      text: 'Cancel',
+      type: 'button',
+      className: 'vex-dialog-button-secondary',
+      click: function noClick () {
+        this.value = false
+        this.close()
+      }
+    }
+  }
+
+  dialog.defaultOptions = {
+    callback: function () {},
+    afterOpen: function () {},
+    message: '',
+    input: '',
+    buttons: [
+      dialog.buttons.YES,
+      dialog.buttons.NO
+    ],
+    showCloseButton: false,
+    onSubmit: function onDialogSubmit (e) {
+      e.preventDefault()
+      if (this.options.input) {
+        this.value = serialize(this.form, { hash: true })
+      }
+      return this.close()
+    },
+    focusFirstInput: true
+  }
+
+  dialog.defaultAlertOptions = {
+    buttons: [
+      dialog.buttons.YES
+    ]
+  }
+
+  dialog.defaultPromptOptions = {
+    label: 'Prompt:',
+    placeholder: '',
+    value: ''
+  }
+
+  dialog.defaultConfirmOptions = {}
+
+  return dialog
+}
+
+module.exports = plugin
+
+},{"domify":1,"form-serialize":2}]},{},[3])(3)
+});
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"domify":2,"form-serialize":4}],6:[function(require,module,exports){
+var vex = require('./vex')
+vex.registerPlugin(require('vex-dialog'))
+module.exports = vex
+
+},{"./vex":7,"vex-dialog":5}],7:[function(require,module,exports){
+// classList polyfill for old browsers
+require('classlist-polyfill')
+// Object.assign polyfill
+require('es6-object-assign').polyfill()
+
+// String to DOM function
+var domify = require('domify')
+
+// Use the DOM's HTML parsing to escape any dangerous strings
+var escapeHtml = function escapeHtml (str) {
+  if (typeof str !== 'undefined') {
+    var div = document.createElement('div')
+    div.appendChild(document.createTextNode(str))
+    return div.innerHTML
+  } else {
+    return ''
+  }
+}
+
+// Utility function to add space-delimited class strings to a DOM element's classList
+var addClasses = function addClasses (el, classStr) {
+  if (typeof classStr !== 'string' || classStr.length === 0) {
+    return
+  }
+  var classes = classStr.split(' ')
+  for (var i = 0; i < classes.length; i++) {
+    var className = classes[i]
+    if (className.length) {
+      el.classList.add(className)
+    }
+  }
+}
+
+// Detect CSS Animation End Support
+// https://github.com/limonte/sweetalert2/blob/99bd539f85e15ac170f69d35001d12e092ef0054/src/utils/dom.js#L194
+var animationEndEvent = (function detectAnimationEndEvent () {
+  var el = document.createElement('div')
+  var eventNames = {
+    'WebkitAnimation': 'webkitAnimationEnd',
+    'MozAnimation': 'animationend',
+    'OAnimation': 'oanimationend',
+    'msAnimation': 'MSAnimationEnd',
+    'animation': 'animationend'
+  }
+  for (var i in eventNames) {
+    if (el.style[i] !== undefined) {
+      return eventNames[i]
+    }
+  }
+  return false
+})()
+
+// vex base CSS classes
+var baseClassNames = {
+  vex: 'vex',
+  content: 'vex-content',
+  overlay: 'vex-overlay',
+  close: 'vex-close',
+  closing: 'vex-closing',
+  open: 'vex-open'
+}
+
+// Private lookup table of all open vex objects, keyed by id
+var vexes = {}
+var globalId = 1
+
+// Private boolean to assist the escapeButtonCloses option
+var isEscapeActive = false
+
+// vex itself is an object that exposes a simple API to open and close vex objects in various ways
+var vex = {
+  open: function open (opts) {
+    // Check for usage of deprecated options, and log a warning
+    var warnDeprecated = function warnDeprecated (prop) {
+      console.warn('The "' + prop + '" property is deprecated in vex 3. Use CSS classes and the appropriate "ClassName" options, instead.')
+      console.warn('See http://github.hubspot.com/vex/api/advanced/#options')
+    }
+    if (opts.css) {
+      warnDeprecated('css')
+    }
+    if (opts.overlayCSS) {
+      warnDeprecated('overlayCSS')
+    }
+    if (opts.contentCSS) {
+      warnDeprecated('contentCSS')
+    }
+    if (opts.closeCSS) {
+      warnDeprecated('closeCSS')
+    }
+
+    // The dialog instance
+    var vexInstance = {}
+
+    // Set id
+    vexInstance.id = globalId++
+
+    // Store internally
+    vexes[vexInstance.id] = vexInstance
+
+    // Set state
+    vexInstance.isOpen = true
+
+    // Close function on the vex instance
+    // This is how all API functions should close individual vexes
+    vexInstance.close = function instanceClose () {
+      // Check state
+      if (!this.isOpen) {
+        return true
+      }
+
+      var options = this.options
+
+      // escapeButtonCloses is checked first
+      if (isEscapeActive && !options.escapeButtonCloses) {
+        return false
+      }
+
+      // Allow the user to validate any info or abort the close with the beforeClose callback
+      var shouldClose = (function shouldClose () {
+        // Call before close callback
+        if (options.beforeClose) {
+          return options.beforeClose.call(this)
+        }
+        // Otherwise indicate that it's ok to continue with close
+        return true
+      }.bind(this)())
+
+      // If beforeClose() fails, abort the close
+      if (shouldClose === false) {
+        return false
+      }
+
+      // Update state
+      this.isOpen = false
+
+      // Detect if the content el has any CSS animations defined
+      var style = window.getComputedStyle(this.contentEl)
+      function hasAnimationPre (prefix) {
+        return style.getPropertyValue(prefix + 'animation-name') !== 'none' && style.getPropertyValue(prefix + 'animation-duration') !== '0s'
+      }
+      var hasAnimation = hasAnimationPre('') || hasAnimationPre('-webkit-') || hasAnimationPre('-moz-') || hasAnimationPre('-o-')
+
+      // Define the function that will actually close the instance
+      var close = function close () {
+        if (!this.rootEl.parentNode) {
+          return
+        }
+        // Run once
+        this.rootEl.removeEventListener(animationEndEvent, close)
+        this.overlayEl.removeEventListener(animationEndEvent, close)
+        // Remove from lookup table (prevent memory leaks)
+        delete vexes[this.id]
+        // Remove the dialog from the DOM
+        this.rootEl.parentNode.removeChild(this.rootEl)
+        // Remove the overlay from the DOM
+        this.bodyEl.removeChild(this.overlayEl);
+        // Call after close callback
+        if (options.afterClose) {
+          options.afterClose.call(this)
+        }
+        // Remove styling from the body, if no more vexes are open
+        if (Object.keys(vexes).length === 0) {
+          document.body.classList.remove(baseClassNames.open)
+        }
+      }.bind(this)
+
+      // Close the vex
+      if (animationEndEvent && hasAnimation) {
+        // Setup the end event listener, to remove the el from the DOM
+        this.rootEl.addEventListener(animationEndEvent, close)
+        this.overlayEl.addEventListener(animationEndEvent, close)
+        // Add the closing class to the dialog, showing the close animation
+        this.rootEl.classList.add(baseClassNames.closing)
+        this.overlayEl.classList.add(baseClassNames.closing)
+      } else {
+        close()
+      }
+
+      return true
+    }
+
+    // Allow strings as content
+    if (typeof opts === 'string') {
+      opts = {
+        content: opts
+      }
+    }
+
+    // `content` is unsafe internally, so translate
+    // safe default: HTML-escape the content before passing it through
+    if (opts.unsafeContent && !opts.content) {
+      opts.content = opts.unsafeContent
+    } else if (opts.content) {
+      opts.content = escapeHtml(opts.content)
+    }
+
+    // Store options on instance for future reference
+    var options = vexInstance.options = Object.assign({}, vex.defaultOptions, opts)
+
+    // Get Body Element
+    var bodyEl = vexInstance.bodyEl = document.getElementsByTagName('body')[0];
+
+    // vex root
+    var rootEl = vexInstance.rootEl = document.createElement('div')
+    rootEl.classList.add(baseClassNames.vex)
+    addClasses(rootEl, options.className)
+
+    // Overlay
+    var overlayEl = vexInstance.overlayEl = document.createElement('div')
+    overlayEl.classList.add(baseClassNames.overlay)
+    addClasses(overlayEl, options.overlayClassName)
+    if (options.overlayClosesOnClick) {
+      rootEl.addEventListener('click', function overlayClickListener (e) {
+        if (e.target === rootEl) {
+          vexInstance.close()
+        }
+      })
+    }
+    bodyEl.appendChild(overlayEl)
+
+    // Content
+    var contentEl = vexInstance.contentEl = document.createElement('div')
+    contentEl.classList.add(baseClassNames.content)
+    addClasses(contentEl, options.contentClassName)
+    contentEl.appendChild(options.content instanceof window.Node ? options.content : domify(options.content))
+    rootEl.appendChild(contentEl)
+
+    // Close button
+    if (options.showCloseButton) {
+      var closeEl = vexInstance.closeEl = document.createElement('div')
+      closeEl.classList.add(baseClassNames.close)
+      addClasses(closeEl, options.closeClassName)
+      closeEl.addEventListener('click', vexInstance.close.bind(vexInstance))
+      contentEl.appendChild(closeEl)
+    }
+
+    // Add to DOM
+    document.querySelector(options.appendLocation).appendChild(rootEl)
+
+    // Call after open callback
+    if (options.afterOpen) {
+      options.afterOpen.call(vexInstance)
+    }
+
+    // Apply styling to the body
+    document.body.classList.add(baseClassNames.open)
+
+    // Return the created vex instance
+    return vexInstance
+  },
+
+  // A top-level vex.close function to close dialogs by reference or id
+  close: function close (vexOrId) {
+    var id
+    if (vexOrId.id) {
+      id = vexOrId.id
+    } else if (typeof vexOrId === 'string') {
+      id = vexOrId
+    } else {
+      throw new TypeError('close requires a vex object or id string')
+    }
+    if (!vexes[id]) {
+      return false
+    }
+    return vexes[id].close()
+  },
+
+  // Close the most recently created/opened vex
+  closeTop: function closeTop () {
+    var ids = Object.keys(vexes)
+    if (!ids.length) {
+      return false
+    }
+    return vexes[ids[ids.length - 1]].close()
+  },
+
+  // Close every vex!
+  closeAll: function closeAll () {
+    for (var id in vexes) {
+      this.close(id)
+    }
+    return true
+  },
+
+  // A getter for the internal lookup table
+  getAll: function getAll () {
+    return vexes
+  },
+
+  // A getter for the internal lookup table
+  getById: function getById (id) {
+    return vexes[id]
+  }
+}
+
+// Close top vex on escape
+window.addEventListener('keyup', function vexKeyupListener (e) {
+  if (e.keyCode === 27) {
+    isEscapeActive = true
+    vex.closeTop()
+    isEscapeActive = false
+  }
+})
+
+// Close all vexes on history pop state (useful in single page apps)
+window.addEventListener('popstate', function () {
+  if (vex.defaultOptions.closeAllOnPopState) {
+    vex.closeAll()
+  }
+})
+
+vex.defaultOptions = {
+  content: '',
+  showCloseButton: true,
+  escapeButtonCloses: true,
+  overlayClosesOnClick: true,
+  appendLocation: 'body',
+  className: '',
+  overlayClassName: '',
+  contentClassName: '',
+  closeClassName: '',
+  closeAllOnPopState: true
+}
+
+// TODO Loading symbols?
+
+// Include escapeHtml function on the library object
+Object.defineProperty(vex, '_escapeHtml', {
+  configurable: false,
+  enumerable: false,
+  writable: false,
+  value: escapeHtml
+})
+
+// Plugin system!
+vex.registerPlugin = function registerPlugin (pluginFn, name) {
+  var plugin = pluginFn(vex)
+  var pluginName = name || plugin.name
+  if (vex[pluginName]) {
+    throw new Error('Plugin ' + name + ' is already registered.')
+  }
+  vex[pluginName] = plugin
+}
+
+module.exports = vex
+
+},{"classlist-polyfill":1,"domify":2,"es6-object-assign":3}]},{},[6])(6)
+});
\ No newline at end of file
diff --git a/BTCPayServer/wwwroot/vendor/vex/js/vex.combined.min.js b/BTCPayServer/wwwroot/vendor/vex/js/vex.combined.min.js
new file mode 100644
index 000000000..a40cda1d5
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/js/vex.combined.min.js
@@ -0,0 +1,2 @@
+/*! vex.combined.js: vex 4.0.1, vex-dialog 1.0.7 */
+!function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.vex=a()}}(function(){var a;return function b(a,c,d){function e(g,h){if(!c[g]){if(!a[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};a[g][0].call(k.exports,function(b){var c=a[g][1][b];return e(c?c:b)},k,k.exports,b,a,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){"document"in window.self&&("classList"in document.createElement("_")&&(!document.createElementNS||"classList"in document.createElementNS("http://www.w3.org/2000/svg","g"))?!function(){"use strict";var a=document.createElement("_");if(a.classList.add("c1","c2"),!a.classList.contains("c2")){var b=function(a){var b=DOMTokenList.prototype[a];DOMTokenList.prototype[a]=function(a){var c,d=arguments.length;for(c=0;c<d;c++)a=arguments[c],b.call(this,a)}};b("add"),b("remove")}if(a.classList.toggle("c3",!1),a.classList.contains("c3")){var c=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(a,b){return 1 in arguments&&!this.contains(a)==!b?b:c.call(this,a)}}a=null}():!function(a){"use strict";if("Element"in a){var b="classList",c="prototype",d=a.Element[c],e=Object,f=String[c].trim||function(){return this.replace(/^\s+|\s+$/g,"")},g=Array[c].indexOf||function(a){for(var b=0,c=this.length;b<c;b++)if(b in this&&this[b]===a)return b;return-1},h=function(a,b){this.name=a,this.code=DOMException[a],this.message=b},i=function(a,b){if(""===b)throw new h("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(b))throw new h("INVALID_CHARACTER_ERR","String contains an invalid character");return g.call(a,b)},j=function(a){for(var b=f.call(a.getAttribute("class")||""),c=b?b.split(/\s+/):[],d=0,e=c.length;d<e;d++)this.push(c[d]);this._updateClassName=function(){a.setAttribute("class",this.toString())}},k=j[c]=[],l=function(){return new j(this)};if(h[c]=Error[c],k.item=function(a){return this[a]||null},k.contains=function(a){return a+="",i(this,a)!==-1},k.add=function(){var a,b=arguments,c=0,d=b.length,e=!1;do a=b[c]+"",i(this,a)===-1&&(this.push(a),e=!0);while(++c<d);e&&this._updateClassName()},k.remove=function(){var a,b,c=arguments,d=0,e=c.length,f=!1;do for(a=c[d]+"",b=i(this,a);b!==-1;)this.splice(b,1),f=!0,b=i(this,a);while(++d<e);f&&this._updateClassName()},k.toggle=function(a,b){a+="";var c=this.contains(a),d=c?b!==!0&&"remove":b!==!1&&"add";return d&&this[d](a),b===!0||b===!1?b:!c},k.toString=function(){return this.join(" ")},e.defineProperty){var m={get:l,enumerable:!0,configurable:!0};try{e.defineProperty(d,b,m)}catch(n){n.number===-2146823252&&(m.enumerable=!1,e.defineProperty(d,b,m))}}else e[c].__defineGetter__&&d.__defineGetter__(b,l)}}(window.self))},{}],2:[function(a,b,c){function d(a,b){if("string"!=typeof a)throw new TypeError("String expected");b||(b=document);var c=/<([\w:]+)/.exec(a);if(!c)return b.createTextNode(a);a=a.replace(/^\s+|\s+$/g,"");var d=c[1];if("body"==d){var e=b.createElement("html");return e.innerHTML=a,e.removeChild(e.lastChild)}var f=g[d]||g._default,h=f[0],i=f[1],j=f[2],e=b.createElement("div");for(e.innerHTML=i+a+j;h--;)e=e.lastChild;if(e.firstChild==e.lastChild)return e.removeChild(e.firstChild);for(var k=b.createDocumentFragment();e.firstChild;)k.appendChild(e.removeChild(e.firstChild));return k}b.exports=d;var e,f=!1;"undefined"!=typeof document&&(e=document.createElement("div"),e.innerHTML='  <link/><table></table><a href="/a">a</a><input type="checkbox"/>',f=!e.getElementsByTagName("link").length,e=void 0);var g={legend:[1,"<fieldset>","</fieldset>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],_default:f?[1,"X<div>","</div>"]:[0,"",""]};g.td=g.th=[3,"<table><tbody><tr>","</tr></tbody></table>"],g.option=g.optgroup=[1,'<select multiple="multiple">',"</select>"],g.thead=g.tbody=g.colgroup=g.caption=g.tfoot=[1,"<table>","</table>"],g.polyline=g.ellipse=g.polygon=g.circle=g.text=g.line=g.path=g.rect=g.g=[1,'<svg xmlns="http://www.w3.org/2000/svg" version="1.1">',"</svg>"]},{}],3:[function(a,b,c){"use strict";function d(a,b){if(void 0===a||null===a)throw new TypeError("Cannot convert first argument to object");for(var c=Object(a),d=1;d<arguments.length;d++){var e=arguments[d];if(void 0!==e&&null!==e)for(var f=Object.keys(Object(e)),g=0,h=f.length;g<h;g++){var i=f[g],j=Object.getOwnPropertyDescriptor(e,i);void 0!==j&&j.enumerable&&(c[i]=e[i])}}return c}function e(){Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:d})}b.exports={assign:d,polyfill:e}},{}],4:[function(a,b,c){function d(a,b){"object"!=typeof b?b={hash:!!b}:void 0===b.hash&&(b.hash=!0);for(var c=b.hash?{}:"",d=b.serializer||(b.hash?g:h),e=a&&a.elements?a.elements:[],f=Object.create(null),k=0;k<e.length;++k){var l=e[k];if((b.disabled||!l.disabled)&&l.name&&j.test(l.nodeName)&&!i.test(l.type)){var m=l.name,n=l.value;if("checkbox"!==l.type&&"radio"!==l.type||l.checked||(n=void 0),b.empty){if("checkbox"!==l.type||l.checked||(n=""),"radio"===l.type&&(f[l.name]||l.checked?l.checked&&(f[l.name]=!0):f[l.name]=!1),!n&&"radio"==l.type)continue}else if(!n)continue;if("select-multiple"!==l.type)c=d(c,m,n);else{n=[];for(var o=l.options,p=!1,q=0;q<o.length;++q){var r=o[q],s=b.empty&&!r.value,t=r.value||s;r.selected&&t&&(p=!0,c=b.hash&&"[]"!==m.slice(m.length-2)?d(c,m+"[]",r.value):d(c,m,r.value))}!p&&b.empty&&(c=d(c,m,""))}}}if(b.empty)for(var m in f)f[m]||(c=d(c,m,""));return c}function e(a){var b=[],c=/^([^\[\]]*)/,d=new RegExp(k),e=c.exec(a);for(e[1]&&b.push(e[1]);null!==(e=d.exec(a));)b.push(e[1]);return b}function f(a,b,c){if(0===b.length)return a=c;var d=b.shift(),e=d.match(/^\[(.+?)\]$/);if("[]"===d)return a=a||[],Array.isArray(a)?a.push(f(null,b,c)):(a._values=a._values||[],a._values.push(f(null,b,c))),a;if(e){var g=e[1],h=+g;isNaN(h)?(a=a||{},a[g]=f(a[g],b,c)):(a=a||[],a[h]=f(a[h],b,c))}else a[d]=f(a[d],b,c);return a}function g(a,b,c){var d=b.match(k);if(d){var g=e(b);f(a,g,c)}else{var h=a[b];h?(Array.isArray(h)||(a[b]=[h]),a[b].push(c)):a[b]=c}return a}function h(a,b,c){return c=c.replace(/(\r)?\n/g,"\r\n"),c=encodeURIComponent(c),c=c.replace(/%20/g,"+"),a+(a?"&":"")+encodeURIComponent(b)+"="+c}var i=/^(?:submit|button|image|reset|file)$/i,j=/^(?:input|select|textarea|keygen)/i,k=/(\[[^\[\]]*\])/g;b.exports=d},{}],5:[function(b,c,d){(function(e){!function(b){if("object"==typeof d&&"undefined"!=typeof c)c.exports=b();else if("function"==typeof a&&a.amd)a([],b);else{var f;f="undefined"!=typeof window?window:"undefined"!=typeof e?e:"undefined"!=typeof self?self:this,f.vexDialog=b()}}(function(){return function a(c,d,e){function f(h,i){if(!d[h]){if(!c[h]){var j="function"==typeof b&&b;if(!i&&j)return j(h,!0);if(g)return g(h,!0);var k=new Error("Cannot find module '"+h+"'");throw k.code="MODULE_NOT_FOUND",k}var l=d[h]={exports:{}};c[h][0].call(l.exports,function(a){var b=c[h][1][a];return f(b?b:a)},l,l.exports,a,c,d,e)}return d[h].exports}for(var g="function"==typeof b&&b,h=0;h<e.length;h++)f(e[h]);return f}({1:[function(a,b,c){function d(a,b){if("string"!=typeof a)throw new TypeError("String expected");b||(b=document);var c=/<([\w:]+)/.exec(a);if(!c)return b.createTextNode(a);a=a.replace(/^\s+|\s+$/g,"");var d=c[1];if("body"==d){var e=b.createElement("html");return e.innerHTML=a,e.removeChild(e.lastChild)}var f=g[d]||g._default,h=f[0],i=f[1],j=f[2],e=b.createElement("div");for(e.innerHTML=i+a+j;h--;)e=e.lastChild;if(e.firstChild==e.lastChild)return e.removeChild(e.firstChild);for(var k=b.createDocumentFragment();e.firstChild;)k.appendChild(e.removeChild(e.firstChild));return k}b.exports=d;var e,f=!1;"undefined"!=typeof document&&(e=document.createElement("div"),e.innerHTML='  <link/><table></table><a href="/a">a</a><input type="checkbox"/>',f=!e.getElementsByTagName("link").length,e=void 0);var g={legend:[1,"<fieldset>","</fieldset>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],_default:f?[1,"X<div>","</div>"]:[0,"",""]};g.td=g.th=[3,"<table><tbody><tr>","</tr></tbody></table>"],g.option=g.optgroup=[1,'<select multiple="multiple">',"</select>"],g.thead=g.tbody=g.colgroup=g.caption=g.tfoot=[1,"<table>","</table>"],g.polyline=g.ellipse=g.polygon=g.circle=g.text=g.line=g.path=g.rect=g.g=[1,'<svg xmlns="http://www.w3.org/2000/svg" version="1.1">',"</svg>"]},{}],2:[function(a,b,c){function d(a,b){"object"!=typeof b?b={hash:!!b}:void 0===b.hash&&(b.hash=!0);for(var c=b.hash?{}:"",d=b.serializer||(b.hash?g:h),e=a&&a.elements?a.elements:[],f=Object.create(null),k=0;k<e.length;++k){var l=e[k];if((b.disabled||!l.disabled)&&l.name&&j.test(l.nodeName)&&!i.test(l.type)){var m=l.name,n=l.value;if("checkbox"!==l.type&&"radio"!==l.type||l.checked||(n=void 0),b.empty){if("checkbox"!==l.type||l.checked||(n=""),"radio"===l.type&&(f[l.name]||l.checked?l.checked&&(f[l.name]=!0):f[l.name]=!1),!n&&"radio"==l.type)continue}else if(!n)continue;if("select-multiple"!==l.type)c=d(c,m,n);else{n=[];for(var o=l.options,p=!1,q=0;q<o.length;++q){var r=o[q],s=b.empty&&!r.value,t=r.value||s;r.selected&&t&&(p=!0,c=b.hash&&"[]"!==m.slice(m.length-2)?d(c,m+"[]",r.value):d(c,m,r.value))}!p&&b.empty&&(c=d(c,m,""))}}}if(b.empty)for(var m in f)f[m]||(c=d(c,m,""));return c}function e(a){var b=[],c=/^([^\[\]]*)/,d=new RegExp(k),e=c.exec(a);for(e[1]&&b.push(e[1]);null!==(e=d.exec(a));)b.push(e[1]);return b}function f(a,b,c){if(0===b.length)return a=c;var d=b.shift(),e=d.match(/^\[(.+?)\]$/);if("[]"===d)return a=a||[],Array.isArray(a)?a.push(f(null,b,c)):(a._values=a._values||[],a._values.push(f(null,b,c))),a;if(e){var g=e[1],h=+g;isNaN(h)?(a=a||{},a[g]=f(a[g],b,c)):(a=a||[],a[h]=f(a[h],b,c))}else a[d]=f(a[d],b,c);return a}function g(a,b,c){var d=b.match(k);if(d){var g=e(b);f(a,g,c)}else{var h=a[b];h?(Array.isArray(h)||(a[b]=[h]),a[b].push(c)):a[b]=c}return a}function h(a,b,c){return c=c.replace(/(\r)?\n/g,"\r\n"),c=encodeURIComponent(c),c=c.replace(/%20/g,"+"),a+(a?"&":"")+encodeURIComponent(b)+"="+c}var i=/^(?:submit|button|image|reset|file)$/i,j=/^(?:input|select|textarea|keygen)/i,k=/(\[[^\[\]]*\])/g;b.exports=d},{}],3:[function(a,b,c){var d=a("domify"),e=a("form-serialize"),f=function(a){var b=document.createElement("form");b.classList.add("vex-dialog-form");var c=document.createElement("div");c.classList.add("vex-dialog-message"),c.appendChild(a.message instanceof window.Node?a.message:d(a.message));var e=document.createElement("div");return e.classList.add("vex-dialog-input"),e.appendChild(a.input instanceof window.Node?a.input:d(a.input)),b.appendChild(c),b.appendChild(e),b},g=function(a){var b=document.createElement("div");b.classList.add("vex-dialog-buttons");for(var c=0;c<a.length;c++){var d=a[c],e=document.createElement("button");e.type=d.type,e.textContent=d.text,e.className=d.className,e.classList.add("vex-dialog-button"),0===c?e.classList.add("vex-first"):c===a.length-1&&e.classList.add("vex-last"),function(a){e.addEventListener("click",function(b){a.click&&a.click.call(this,b)}.bind(this))}.bind(this)(d),b.appendChild(e)}return b},h=function(a){var b={name:"dialog",open:function(b){var c=Object.assign({},this.defaultOptions,b);c.unsafeMessage&&!c.message?c.message=c.unsafeMessage:c.message&&(c.message=a._escapeHtml(c.message));var d=c.unsafeContent=f(c),e=a.open(c),h=c.beforeClose&&c.beforeClose.bind(e);if(e.options.beforeClose=function(){var a=!h||h();return a&&c.callback(this.value||!1),a}.bind(e),d.appendChild(g.call(e,c.buttons)),e.form=d,d.addEventListener("submit",c.onSubmit.bind(e)),c.focusFirstInput){var i=e.contentEl.querySelector("button, input, select, textarea");i&&i.focus()}return e},alert:function(a){return"string"==typeof a&&(a={message:a}),a=Object.assign({},this.defaultOptions,this.defaultAlertOptions,a),this.open(a)},confirm:function(a){if("object"!=typeof a||"function"!=typeof a.callback)throw new Error("dialog.confirm(options) requires options.callback.");return a=Object.assign({},this.defaultOptions,this.defaultConfirmOptions,a),this.open(a)},prompt:function(b){if("object"!=typeof b||"function"!=typeof b.callback)throw new Error("dialog.prompt(options) requires options.callback.");var c=Object.assign({},this.defaultOptions,this.defaultPromptOptions),d={unsafeMessage:'<label for="vex">'+a._escapeHtml(b.label||c.label)+"</label>",input:'<input name="vex" type="text" class="vex-dialog-prompt-input" placeholder="'+a._escapeHtml(b.placeholder||c.placeholder)+'" value="'+a._escapeHtml(b.value||c.value)+'" />'};b=Object.assign(c,d,b);var e=b.callback;return b.callback=function(a){if("object"==typeof a){var b=Object.keys(a);a=b.length?a[b[0]]:""}e(a)},this.open(b)}};return b.buttons={YES:{text:"OK",type:"submit",className:"vex-dialog-button-primary",click:function(){this.value=!0}},NO:{text:"Cancel",type:"button",className:"vex-dialog-button-secondary",click:function(){this.value=!1,this.close()}}},b.defaultOptions={callback:function(){},afterOpen:function(){},message:"",input:"",buttons:[b.buttons.YES,b.buttons.NO],showCloseButton:!1,onSubmit:function(a){return a.preventDefault(),this.options.input&&(this.value=e(this.form,{hash:!0})),this.close()},focusFirstInput:!0},b.defaultAlertOptions={buttons:[b.buttons.YES]},b.defaultPromptOptions={label:"Prompt:",placeholder:"",value:""},b.defaultConfirmOptions={},b};b.exports=h},{domify:1,"form-serialize":2}]},{},[3])(3)})}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{domify:2,"form-serialize":4}],6:[function(a,b,c){var d=a("./vex");d.registerPlugin(a("vex-dialog")),b.exports=d},{"./vex":7,"vex-dialog":5}],7:[function(a,b,c){a("classlist-polyfill"),a("es6-object-assign").polyfill();var d=a("domify"),e=function(a){if("undefined"!=typeof a){var b=document.createElement("div");return b.appendChild(document.createTextNode(a)),b.innerHTML}return""},f=function(a,b){if("string"==typeof b&&0!==b.length)for(var c=b.split(" "),d=0;d<c.length;d++){var e=c[d];e.length&&a.classList.add(e)}},g=function(){var a=document.createElement("div"),b={WebkitAnimation:"webkitAnimationEnd",MozAnimation:"animationend",OAnimation:"oanimationend",msAnimation:"MSAnimationEnd",animation:"animationend"};for(var c in b)if(void 0!==a.style[c])return b[c];return!1}(),h={vex:"vex",content:"vex-content",overlay:"vex-overlay",close:"vex-close",closing:"vex-closing",open:"vex-open"},i={},j=1,k=!1,l={open:function(a){var b=function(a){console.warn('The "'+a+'" property is deprecated in vex 3. Use CSS classes and the appropriate "ClassName" options, instead.'),console.warn("See http://github.hubspot.com/vex/api/advanced/#options")};a.css&&b("css"),a.overlayCSS&&b("overlayCSS"),a.contentCSS&&b("contentCSS"),a.closeCSS&&b("closeCSS");var c={};c.id=j++,i[c.id]=c,c.isOpen=!0,c.close=function(){function a(a){return"none"!==d.getPropertyValue(a+"animation-name")&&"0s"!==d.getPropertyValue(a+"animation-duration")}if(!this.isOpen)return!0;var b=this.options;if(k&&!b.escapeButtonCloses)return!1;var c=function(){return!b.beforeClose||b.beforeClose.call(this)}.bind(this)();if(c===!1)return!1;this.isOpen=!1;var d=window.getComputedStyle(this.contentEl),e=a("")||a("-webkit-")||a("-moz-")||a("-o-"),f=function j(){this.rootEl.parentNode&&(this.rootEl.removeEventListener(g,j),this.overlayEl.removeEventListener(g,j),delete i[this.id],this.rootEl.parentNode.removeChild(this.rootEl),this.bodyEl.removeChild(this.overlayEl),b.afterClose&&b.afterClose.call(this),0===Object.keys(i).length&&document.body.classList.remove(h.open))}.bind(this);return g&&e?(this.rootEl.addEventListener(g,f),this.overlayEl.addEventListener(g,f),this.rootEl.classList.add(h.closing),this.overlayEl.classList.add(h.closing)):f(),!0},"string"==typeof a&&(a={content:a}),a.unsafeContent&&!a.content?a.content=a.unsafeContent:a.content&&(a.content=e(a.content));var m=c.options=Object.assign({},l.defaultOptions,a),n=c.bodyEl=document.getElementsByTagName("body")[0],o=c.rootEl=document.createElement("div");o.classList.add(h.vex),f(o,m.className);var p=c.overlayEl=document.createElement("div");p.classList.add(h.overlay),f(p,m.overlayClassName),m.overlayClosesOnClick&&o.addEventListener("click",function(a){a.target===o&&c.close()}),n.appendChild(p);var q=c.contentEl=document.createElement("div");if(q.classList.add(h.content),f(q,m.contentClassName),q.appendChild(m.content instanceof window.Node?m.content:d(m.content)),o.appendChild(q),m.showCloseButton){var r=c.closeEl=document.createElement("div");r.classList.add(h.close),f(r,m.closeClassName),r.addEventListener("click",c.close.bind(c)),q.appendChild(r)}return document.querySelector(m.appendLocation).appendChild(o),m.afterOpen&&m.afterOpen.call(c),document.body.classList.add(h.open),c},close:function(a){var b;if(a.id)b=a.id;else{if("string"!=typeof a)throw new TypeError("close requires a vex object or id string");b=a}return!!i[b]&&i[b].close()},closeTop:function(){var a=Object.keys(i);return!!a.length&&i[a[a.length-1]].close()},closeAll:function(){for(var a in i)this.close(a);return!0},getAll:function(){return i},getById:function(a){return i[a]}};window.addEventListener("keyup",function(a){27===a.keyCode&&(k=!0,l.closeTop(),k=!1)}),window.addEventListener("popstate",function(){l.defaultOptions.closeAllOnPopState&&l.closeAll()}),l.defaultOptions={content:"",showCloseButton:!0,escapeButtonCloses:!0,overlayClosesOnClick:!0,appendLocation:"body",className:"",overlayClassName:"",contentClassName:"",closeClassName:"",closeAllOnPopState:!0},Object.defineProperty(l,"_escapeHtml",{configurable:!1,enumerable:!1,writable:!1,value:e}),l.registerPlugin=function(a,b){var c=a(l),d=b||c.name;if(l[d])throw new Error("Plugin "+b+" is already registered.");l[d]=c},b.exports=l},{"classlist-polyfill":1,domify:2,"es6-object-assign":3}]},{},[6])(6)});
\ No newline at end of file
diff --git a/BTCPayServer/wwwroot/vendor/vex/js/vex.js b/BTCPayServer/wwwroot/vendor/vex/js/vex.js
new file mode 100644
index 000000000..9ba024873
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/js/vex.js
@@ -0,0 +1,754 @@
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.vex = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/*
+ * classList.js: Cross-browser full element.classList implementation.
+ * 2014-07-23
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public Domain.
+ * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+ */
+
+/*global self, document, DOMException */
+
+/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
+
+/* Copied from MDN:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
+ */
+
+if ("document" in window.self) {
+
+  // Full polyfill for browsers with no classList support
+  // Including IE < Edge missing SVGElement.classList
+  if (!("classList" in document.createElement("_"))
+    || document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg","g"))) {
+
+  (function (view) {
+
+    "use strict";
+
+    if (!('Element' in view)) return;
+
+    var
+        classListProp = "classList"
+      , protoProp = "prototype"
+      , elemCtrProto = view.Element[protoProp]
+      , objCtr = Object
+      , strTrim = String[protoProp].trim || function () {
+        return this.replace(/^\s+|\s+$/g, "");
+      }
+      , arrIndexOf = Array[protoProp].indexOf || function (item) {
+        var
+            i = 0
+          , len = this.length
+        ;
+        for (; i < len; i++) {
+          if (i in this && this[i] === item) {
+            return i;
+          }
+        }
+        return -1;
+      }
+      // Vendors: please allow content code to instantiate DOMExceptions
+      , DOMEx = function (type, message) {
+        this.name = type;
+        this.code = DOMException[type];
+        this.message = message;
+      }
+      , checkTokenAndGetIndex = function (classList, token) {
+        if (token === "") {
+          throw new DOMEx(
+              "SYNTAX_ERR"
+            , "An invalid or illegal string was specified"
+          );
+        }
+        if (/\s/.test(token)) {
+          throw new DOMEx(
+              "INVALID_CHARACTER_ERR"
+            , "String contains an invalid character"
+          );
+        }
+        return arrIndexOf.call(classList, token);
+      }
+      , ClassList = function (elem) {
+        var
+            trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
+          , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
+          , i = 0
+          , len = classes.length
+        ;
+        for (; i < len; i++) {
+          this.push(classes[i]);
+        }
+        this._updateClassName = function () {
+          elem.setAttribute("class", this.toString());
+        };
+      }
+      , classListProto = ClassList[protoProp] = []
+      , classListGetter = function () {
+        return new ClassList(this);
+      }
+    ;
+    // Most DOMException implementations don't allow calling DOMException's toString()
+    // on non-DOMExceptions. Error's toString() is sufficient here.
+    DOMEx[protoProp] = Error[protoProp];
+    classListProto.item = function (i) {
+      return this[i] || null;
+    };
+    classListProto.contains = function (token) {
+      token += "";
+      return checkTokenAndGetIndex(this, token) !== -1;
+    };
+    classListProto.add = function () {
+      var
+          tokens = arguments
+        , i = 0
+        , l = tokens.length
+        , token
+        , updated = false
+      ;
+      do {
+        token = tokens[i] + "";
+        if (checkTokenAndGetIndex(this, token) === -1) {
+          this.push(token);
+          updated = true;
+        }
+      }
+      while (++i < l);
+
+      if (updated) {
+        this._updateClassName();
+      }
+    };
+    classListProto.remove = function () {
+      var
+          tokens = arguments
+        , i = 0
+        , l = tokens.length
+        , token
+        , updated = false
+        , index
+      ;
+      do {
+        token = tokens[i] + "";
+        index = checkTokenAndGetIndex(this, token);
+        while (index !== -1) {
+          this.splice(index, 1);
+          updated = true;
+          index = checkTokenAndGetIndex(this, token);
+        }
+      }
+      while (++i < l);
+
+      if (updated) {
+        this._updateClassName();
+      }
+    };
+    classListProto.toggle = function (token, force) {
+      token += "";
+
+      var
+          result = this.contains(token)
+        , method = result ?
+          force !== true && "remove"
+        :
+          force !== false && "add"
+      ;
+
+      if (method) {
+        this[method](token);
+      }
+
+      if (force === true || force === false) {
+        return force;
+      } else {
+        return !result;
+      }
+    };
+    classListProto.toString = function () {
+      return this.join(" ");
+    };
+
+    if (objCtr.defineProperty) {
+      var classListPropDesc = {
+          get: classListGetter
+        , enumerable: true
+        , configurable: true
+      };
+      try {
+        objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+      } catch (ex) { // IE 8 doesn't support enumerable:true
+        if (ex.number === -0x7FF5EC54) {
+          classListPropDesc.enumerable = false;
+          objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+        }
+      }
+    } else if (objCtr[protoProp].__defineGetter__) {
+      elemCtrProto.__defineGetter__(classListProp, classListGetter);
+    }
+
+    }(window.self));
+
+    } else {
+    // There is full or partial native classList support, so just check if we need
+    // to normalize the add/remove and toggle APIs.
+
+    (function () {
+      "use strict";
+
+      var testElement = document.createElement("_");
+
+      testElement.classList.add("c1", "c2");
+
+      // Polyfill for IE 10/11 and Firefox <26, where classList.add and
+      // classList.remove exist but support only one argument at a time.
+      if (!testElement.classList.contains("c2")) {
+        var createMethod = function(method) {
+          var original = DOMTokenList.prototype[method];
+
+          DOMTokenList.prototype[method] = function(token) {
+            var i, len = arguments.length;
+
+            for (i = 0; i < len; i++) {
+              token = arguments[i];
+              original.call(this, token);
+            }
+          };
+        };
+        createMethod('add');
+        createMethod('remove');
+      }
+
+      testElement.classList.toggle("c3", false);
+
+      // Polyfill for IE 10 and Firefox <24, where classList.toggle does not
+      // support the second argument.
+      if (testElement.classList.contains("c3")) {
+        var _toggle = DOMTokenList.prototype.toggle;
+
+        DOMTokenList.prototype.toggle = function(token, force) {
+          if (1 in arguments && !this.contains(token) === !force) {
+            return force;
+          } else {
+            return _toggle.call(this, token);
+          }
+        };
+
+      }
+
+      testElement = null;
+    }());
+  }
+}
+
+},{}],2:[function(require,module,exports){
+
+/**
+ * Expose `parse`.
+ */
+
+module.exports = parse;
+
+/**
+ * Tests for browser support.
+ */
+
+var innerHTMLBug = false;
+var bugTestDiv;
+if (typeof document !== 'undefined') {
+  bugTestDiv = document.createElement('div');
+  // Setup
+  bugTestDiv.innerHTML = '  <link/><table></table><a href="/a">a</a><input type="checkbox"/>';
+  // Make sure that link elements get serialized correctly by innerHTML
+  // This requires a wrapper element in IE
+  innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
+  bugTestDiv = undefined;
+}
+
+/**
+ * Wrap map from jquery.
+ */
+
+var map = {
+  legend: [1, '<fieldset>', '</fieldset>'],
+  tr: [2, '<table><tbody>', '</tbody></table>'],
+  col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
+  // for script/link/style tags to work in IE6-8, you have to wrap
+  // in a div with a non-whitespace character in front, ha!
+  _default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
+};
+
+map.td =
+map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
+
+map.option =
+map.optgroup = [1, '<select multiple="multiple">', '</select>'];
+
+map.thead =
+map.tbody =
+map.colgroup =
+map.caption =
+map.tfoot = [1, '<table>', '</table>'];
+
+map.polyline =
+map.ellipse =
+map.polygon =
+map.circle =
+map.text =
+map.line =
+map.path =
+map.rect =
+map.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
+
+/**
+ * Parse `html` and return a DOM Node instance, which could be a TextNode,
+ * HTML DOM Node of some kind (<div> for example), or a DocumentFragment
+ * instance, depending on the contents of the `html` string.
+ *
+ * @param {String} html - HTML string to "domify"
+ * @param {Document} doc - The `document` instance to create the Node for
+ * @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance
+ * @api private
+ */
+
+function parse(html, doc) {
+  if ('string' != typeof html) throw new TypeError('String expected');
+
+  // default to the global `document` object
+  if (!doc) doc = document;
+
+  // tag name
+  var m = /<([\w:]+)/.exec(html);
+  if (!m) return doc.createTextNode(html);
+
+  html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
+
+  var tag = m[1];
+
+  // body support
+  if (tag == 'body') {
+    var el = doc.createElement('html');
+    el.innerHTML = html;
+    return el.removeChild(el.lastChild);
+  }
+
+  // wrap map
+  var wrap = map[tag] || map._default;
+  var depth = wrap[0];
+  var prefix = wrap[1];
+  var suffix = wrap[2];
+  var el = doc.createElement('div');
+  el.innerHTML = prefix + html + suffix;
+  while (depth--) el = el.lastChild;
+
+  // one element
+  if (el.firstChild == el.lastChild) {
+    return el.removeChild(el.firstChild);
+  }
+
+  // several elements
+  var fragment = doc.createDocumentFragment();
+  while (el.firstChild) {
+    fragment.appendChild(el.removeChild(el.firstChild));
+  }
+
+  return fragment;
+}
+
+},{}],3:[function(require,module,exports){
+/**
+ * Code refactored from Mozilla Developer Network:
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+ */
+
+'use strict';
+
+function assign(target, firstSource) {
+  if (target === undefined || target === null) {
+    throw new TypeError('Cannot convert first argument to object');
+  }
+
+  var to = Object(target);
+  for (var i = 1; i < arguments.length; i++) {
+    var nextSource = arguments[i];
+    if (nextSource === undefined || nextSource === null) {
+      continue;
+    }
+
+    var keysArray = Object.keys(Object(nextSource));
+    for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
+      var nextKey = keysArray[nextIndex];
+      var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+      if (desc !== undefined && desc.enumerable) {
+        to[nextKey] = nextSource[nextKey];
+      }
+    }
+  }
+  return to;
+}
+
+function polyfill() {
+  if (!Object.assign) {
+    Object.defineProperty(Object, 'assign', {
+      enumerable: false,
+      configurable: true,
+      writable: true,
+      value: assign
+    });
+  }
+}
+
+module.exports = {
+  assign: assign,
+  polyfill: polyfill
+};
+
+},{}],4:[function(require,module,exports){
+// classList polyfill for old browsers
+require('classlist-polyfill')
+// Object.assign polyfill
+require('es6-object-assign').polyfill()
+
+// String to DOM function
+var domify = require('domify')
+
+// Use the DOM's HTML parsing to escape any dangerous strings
+var escapeHtml = function escapeHtml (str) {
+  if (typeof str !== 'undefined') {
+    var div = document.createElement('div')
+    div.appendChild(document.createTextNode(str))
+    return div.innerHTML
+  } else {
+    return ''
+  }
+}
+
+// Utility function to add space-delimited class strings to a DOM element's classList
+var addClasses = function addClasses (el, classStr) {
+  if (typeof classStr !== 'string' || classStr.length === 0) {
+    return
+  }
+  var classes = classStr.split(' ')
+  for (var i = 0; i < classes.length; i++) {
+    var className = classes[i]
+    if (className.length) {
+      el.classList.add(className)
+    }
+  }
+}
+
+// Detect CSS Animation End Support
+// https://github.com/limonte/sweetalert2/blob/99bd539f85e15ac170f69d35001d12e092ef0054/src/utils/dom.js#L194
+var animationEndEvent = (function detectAnimationEndEvent () {
+  var el = document.createElement('div')
+  var eventNames = {
+    'WebkitAnimation': 'webkitAnimationEnd',
+    'MozAnimation': 'animationend',
+    'OAnimation': 'oanimationend',
+    'msAnimation': 'MSAnimationEnd',
+    'animation': 'animationend'
+  }
+  for (var i in eventNames) {
+    if (el.style[i] !== undefined) {
+      return eventNames[i]
+    }
+  }
+  return false
+})()
+
+// vex base CSS classes
+var baseClassNames = {
+  vex: 'vex',
+  content: 'vex-content',
+  overlay: 'vex-overlay',
+  close: 'vex-close',
+  closing: 'vex-closing',
+  open: 'vex-open'
+}
+
+// Private lookup table of all open vex objects, keyed by id
+var vexes = {}
+var globalId = 1
+
+// Private boolean to assist the escapeButtonCloses option
+var isEscapeActive = false
+
+// vex itself is an object that exposes a simple API to open and close vex objects in various ways
+var vex = {
+  open: function open (opts) {
+    // Check for usage of deprecated options, and log a warning
+    var warnDeprecated = function warnDeprecated (prop) {
+      console.warn('The "' + prop + '" property is deprecated in vex 3. Use CSS classes and the appropriate "ClassName" options, instead.')
+      console.warn('See http://github.hubspot.com/vex/api/advanced/#options')
+    }
+    if (opts.css) {
+      warnDeprecated('css')
+    }
+    if (opts.overlayCSS) {
+      warnDeprecated('overlayCSS')
+    }
+    if (opts.contentCSS) {
+      warnDeprecated('contentCSS')
+    }
+    if (opts.closeCSS) {
+      warnDeprecated('closeCSS')
+    }
+
+    // The dialog instance
+    var vexInstance = {}
+
+    // Set id
+    vexInstance.id = globalId++
+
+    // Store internally
+    vexes[vexInstance.id] = vexInstance
+
+    // Set state
+    vexInstance.isOpen = true
+
+    // Close function on the vex instance
+    // This is how all API functions should close individual vexes
+    vexInstance.close = function instanceClose () {
+      // Check state
+      if (!this.isOpen) {
+        return true
+      }
+
+      var options = this.options
+
+      // escapeButtonCloses is checked first
+      if (isEscapeActive && !options.escapeButtonCloses) {
+        return false
+      }
+
+      // Allow the user to validate any info or abort the close with the beforeClose callback
+      var shouldClose = (function shouldClose () {
+        // Call before close callback
+        if (options.beforeClose) {
+          return options.beforeClose.call(this)
+        }
+        // Otherwise indicate that it's ok to continue with close
+        return true
+      }.bind(this)())
+
+      // If beforeClose() fails, abort the close
+      if (shouldClose === false) {
+        return false
+      }
+
+      // Update state
+      this.isOpen = false
+
+      // Detect if the content el has any CSS animations defined
+      var style = window.getComputedStyle(this.contentEl)
+      function hasAnimationPre (prefix) {
+        return style.getPropertyValue(prefix + 'animation-name') !== 'none' && style.getPropertyValue(prefix + 'animation-duration') !== '0s'
+      }
+      var hasAnimation = hasAnimationPre('') || hasAnimationPre('-webkit-') || hasAnimationPre('-moz-') || hasAnimationPre('-o-')
+
+      // Define the function that will actually close the instance
+      var close = function close () {
+        if (!this.rootEl.parentNode) {
+          return
+        }
+        // Run once
+        this.rootEl.removeEventListener(animationEndEvent, close)
+        this.overlayEl.removeEventListener(animationEndEvent, close)
+        // Remove from lookup table (prevent memory leaks)
+        delete vexes[this.id]
+        // Remove the dialog from the DOM
+        this.rootEl.parentNode.removeChild(this.rootEl)
+        // Remove the overlay from the DOM
+        this.bodyEl.removeChild(this.overlayEl);
+        // Call after close callback
+        if (options.afterClose) {
+          options.afterClose.call(this)
+        }
+        // Remove styling from the body, if no more vexes are open
+        if (Object.keys(vexes).length === 0) {
+          document.body.classList.remove(baseClassNames.open)
+        }
+      }.bind(this)
+
+      // Close the vex
+      if (animationEndEvent && hasAnimation) {
+        // Setup the end event listener, to remove the el from the DOM
+        this.rootEl.addEventListener(animationEndEvent, close)
+        this.overlayEl.addEventListener(animationEndEvent, close)
+        // Add the closing class to the dialog, showing the close animation
+        this.rootEl.classList.add(baseClassNames.closing)
+        this.overlayEl.classList.add(baseClassNames.closing)
+      } else {
+        close()
+      }
+
+      return true
+    }
+
+    // Allow strings as content
+    if (typeof opts === 'string') {
+      opts = {
+        content: opts
+      }
+    }
+
+    // `content` is unsafe internally, so translate
+    // safe default: HTML-escape the content before passing it through
+    if (opts.unsafeContent && !opts.content) {
+      opts.content = opts.unsafeContent
+    } else if (opts.content) {
+      opts.content = escapeHtml(opts.content)
+    }
+
+    // Store options on instance for future reference
+    var options = vexInstance.options = Object.assign({}, vex.defaultOptions, opts)
+
+    // Get Body Element
+    var bodyEl = vexInstance.bodyEl = document.getElementsByTagName('body')[0];
+
+    // vex root
+    var rootEl = vexInstance.rootEl = document.createElement('div')
+    rootEl.classList.add(baseClassNames.vex)
+    addClasses(rootEl, options.className)
+
+    // Overlay
+    var overlayEl = vexInstance.overlayEl = document.createElement('div')
+    overlayEl.classList.add(baseClassNames.overlay)
+    addClasses(overlayEl, options.overlayClassName)
+    if (options.overlayClosesOnClick) {
+      rootEl.addEventListener('click', function overlayClickListener (e) {
+        if (e.target === rootEl) {
+          vexInstance.close()
+        }
+      })
+    }
+    bodyEl.appendChild(overlayEl)
+
+    // Content
+    var contentEl = vexInstance.contentEl = document.createElement('div')
+    contentEl.classList.add(baseClassNames.content)
+    addClasses(contentEl, options.contentClassName)
+    contentEl.appendChild(options.content instanceof window.Node ? options.content : domify(options.content))
+    rootEl.appendChild(contentEl)
+
+    // Close button
+    if (options.showCloseButton) {
+      var closeEl = vexInstance.closeEl = document.createElement('div')
+      closeEl.classList.add(baseClassNames.close)
+      addClasses(closeEl, options.closeClassName)
+      closeEl.addEventListener('click', vexInstance.close.bind(vexInstance))
+      contentEl.appendChild(closeEl)
+    }
+
+    // Add to DOM
+    document.querySelector(options.appendLocation).appendChild(rootEl)
+
+    // Call after open callback
+    if (options.afterOpen) {
+      options.afterOpen.call(vexInstance)
+    }
+
+    // Apply styling to the body
+    document.body.classList.add(baseClassNames.open)
+
+    // Return the created vex instance
+    return vexInstance
+  },
+
+  // A top-level vex.close function to close dialogs by reference or id
+  close: function close (vexOrId) {
+    var id
+    if (vexOrId.id) {
+      id = vexOrId.id
+    } else if (typeof vexOrId === 'string') {
+      id = vexOrId
+    } else {
+      throw new TypeError('close requires a vex object or id string')
+    }
+    if (!vexes[id]) {
+      return false
+    }
+    return vexes[id].close()
+  },
+
+  // Close the most recently created/opened vex
+  closeTop: function closeTop () {
+    var ids = Object.keys(vexes)
+    if (!ids.length) {
+      return false
+    }
+    return vexes[ids[ids.length - 1]].close()
+  },
+
+  // Close every vex!
+  closeAll: function closeAll () {
+    for (var id in vexes) {
+      this.close(id)
+    }
+    return true
+  },
+
+  // A getter for the internal lookup table
+  getAll: function getAll () {
+    return vexes
+  },
+
+  // A getter for the internal lookup table
+  getById: function getById (id) {
+    return vexes[id]
+  }
+}
+
+// Close top vex on escape
+window.addEventListener('keyup', function vexKeyupListener (e) {
+  if (e.keyCode === 27) {
+    isEscapeActive = true
+    vex.closeTop()
+    isEscapeActive = false
+  }
+})
+
+// Close all vexes on history pop state (useful in single page apps)
+window.addEventListener('popstate', function () {
+  if (vex.defaultOptions.closeAllOnPopState) {
+    vex.closeAll()
+  }
+})
+
+vex.defaultOptions = {
+  content: '',
+  showCloseButton: true,
+  escapeButtonCloses: true,
+  overlayClosesOnClick: true,
+  appendLocation: 'body',
+  className: '',
+  overlayClassName: '',
+  contentClassName: '',
+  closeClassName: '',
+  closeAllOnPopState: true
+}
+
+// TODO Loading symbols?
+
+// Include escapeHtml function on the library object
+Object.defineProperty(vex, '_escapeHtml', {
+  configurable: false,
+  enumerable: false,
+  writable: false,
+  value: escapeHtml
+})
+
+// Plugin system!
+vex.registerPlugin = function registerPlugin (pluginFn, name) {
+  var plugin = pluginFn(vex)
+  var pluginName = name || plugin.name
+  if (vex[pluginName]) {
+    throw new Error('Plugin ' + name + ' is already registered.')
+  }
+  vex[pluginName] = plugin
+}
+
+module.exports = vex
+
+},{"classlist-polyfill":1,"domify":2,"es6-object-assign":3}]},{},[4])(4)
+});
\ No newline at end of file
diff --git a/BTCPayServer/wwwroot/vendor/vex/js/vex.min.js b/BTCPayServer/wwwroot/vendor/vex/js/vex.min.js
new file mode 100644
index 000000000..e770d50b5
--- /dev/null
+++ b/BTCPayServer/wwwroot/vendor/vex/js/vex.min.js
@@ -0,0 +1,2 @@
+/*! vex.js 4.0.1 */
+!function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.vex=a()}}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){"document"in window.self&&("classList"in document.createElement("_")&&(!document.createElementNS||"classList"in document.createElementNS("http://www.w3.org/2000/svg","g"))?!function(){"use strict";var a=document.createElement("_");if(a.classList.add("c1","c2"),!a.classList.contains("c2")){var b=function(a){var b=DOMTokenList.prototype[a];DOMTokenList.prototype[a]=function(a){var c,d=arguments.length;for(c=0;c<d;c++)a=arguments[c],b.call(this,a)}};b("add"),b("remove")}if(a.classList.toggle("c3",!1),a.classList.contains("c3")){var c=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(a,b){return 1 in arguments&&!this.contains(a)==!b?b:c.call(this,a)}}a=null}():!function(a){"use strict";if("Element"in a){var b="classList",c="prototype",d=a.Element[c],e=Object,f=String[c].trim||function(){return this.replace(/^\s+|\s+$/g,"")},g=Array[c].indexOf||function(a){for(var b=0,c=this.length;b<c;b++)if(b in this&&this[b]===a)return b;return-1},h=function(a,b){this.name=a,this.code=DOMException[a],this.message=b},i=function(a,b){if(""===b)throw new h("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(b))throw new h("INVALID_CHARACTER_ERR","String contains an invalid character");return g.call(a,b)},j=function(a){for(var b=f.call(a.getAttribute("class")||""),c=b?b.split(/\s+/):[],d=0,e=c.length;d<e;d++)this.push(c[d]);this._updateClassName=function(){a.setAttribute("class",this.toString())}},k=j[c]=[],l=function(){return new j(this)};if(h[c]=Error[c],k.item=function(a){return this[a]||null},k.contains=function(a){return a+="",i(this,a)!==-1},k.add=function(){var a,b=arguments,c=0,d=b.length,e=!1;do a=b[c]+"",i(this,a)===-1&&(this.push(a),e=!0);while(++c<d);e&&this._updateClassName()},k.remove=function(){var a,b,c=arguments,d=0,e=c.length,f=!1;do for(a=c[d]+"",b=i(this,a);b!==-1;)this.splice(b,1),f=!0,b=i(this,a);while(++d<e);f&&this._updateClassName()},k.toggle=function(a,b){a+="";var c=this.contains(a),d=c?b!==!0&&"remove":b!==!1&&"add";return d&&this[d](a),b===!0||b===!1?b:!c},k.toString=function(){return this.join(" ")},e.defineProperty){var m={get:l,enumerable:!0,configurable:!0};try{e.defineProperty(d,b,m)}catch(n){n.number===-2146823252&&(m.enumerable=!1,e.defineProperty(d,b,m))}}else e[c].__defineGetter__&&d.__defineGetter__(b,l)}}(window.self))},{}],2:[function(a,b,c){function d(a,b){if("string"!=typeof a)throw new TypeError("String expected");b||(b=document);var c=/<([\w:]+)/.exec(a);if(!c)return b.createTextNode(a);a=a.replace(/^\s+|\s+$/g,"");var d=c[1];if("body"==d){var e=b.createElement("html");return e.innerHTML=a,e.removeChild(e.lastChild)}var f=g[d]||g._default,h=f[0],i=f[1],j=f[2],e=b.createElement("div");for(e.innerHTML=i+a+j;h--;)e=e.lastChild;if(e.firstChild==e.lastChild)return e.removeChild(e.firstChild);for(var k=b.createDocumentFragment();e.firstChild;)k.appendChild(e.removeChild(e.firstChild));return k}b.exports=d;var e,f=!1;"undefined"!=typeof document&&(e=document.createElement("div"),e.innerHTML='  <link/><table></table><a href="/a">a</a><input type="checkbox"/>',f=!e.getElementsByTagName("link").length,e=void 0);var g={legend:[1,"<fieldset>","</fieldset>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],_default:f?[1,"X<div>","</div>"]:[0,"",""]};g.td=g.th=[3,"<table><tbody><tr>","</tr></tbody></table>"],g.option=g.optgroup=[1,'<select multiple="multiple">',"</select>"],g.thead=g.tbody=g.colgroup=g.caption=g.tfoot=[1,"<table>","</table>"],g.polyline=g.ellipse=g.polygon=g.circle=g.text=g.line=g.path=g.rect=g.g=[1,'<svg xmlns="http://www.w3.org/2000/svg" version="1.1">',"</svg>"]},{}],3:[function(a,b,c){"use strict";function d(a,b){if(void 0===a||null===a)throw new TypeError("Cannot convert first argument to object");for(var c=Object(a),d=1;d<arguments.length;d++){var e=arguments[d];if(void 0!==e&&null!==e)for(var f=Object.keys(Object(e)),g=0,h=f.length;g<h;g++){var i=f[g],j=Object.getOwnPropertyDescriptor(e,i);void 0!==j&&j.enumerable&&(c[i]=e[i])}}return c}function e(){Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:d})}b.exports={assign:d,polyfill:e}},{}],4:[function(a,b,c){a("classlist-polyfill"),a("es6-object-assign").polyfill();var d=a("domify"),e=function(a){if("undefined"!=typeof a){var b=document.createElement("div");return b.appendChild(document.createTextNode(a)),b.innerHTML}return""},f=function(a,b){if("string"==typeof b&&0!==b.length)for(var c=b.split(" "),d=0;d<c.length;d++){var e=c[d];e.length&&a.classList.add(e)}},g=function(){var a=document.createElement("div"),b={WebkitAnimation:"webkitAnimationEnd",MozAnimation:"animationend",OAnimation:"oanimationend",msAnimation:"MSAnimationEnd",animation:"animationend"};for(var c in b)if(void 0!==a.style[c])return b[c];return!1}(),h={vex:"vex",content:"vex-content",overlay:"vex-overlay",close:"vex-close",closing:"vex-closing",open:"vex-open"},i={},j=1,k=!1,l={open:function(a){var b=function(a){console.warn('The "'+a+'" property is deprecated in vex 3. Use CSS classes and the appropriate "ClassName" options, instead.'),console.warn("See http://github.hubspot.com/vex/api/advanced/#options")};a.css&&b("css"),a.overlayCSS&&b("overlayCSS"),a.contentCSS&&b("contentCSS"),a.closeCSS&&b("closeCSS");var c={};c.id=j++,i[c.id]=c,c.isOpen=!0,c.close=function(){function a(a){return"none"!==d.getPropertyValue(a+"animation-name")&&"0s"!==d.getPropertyValue(a+"animation-duration")}if(!this.isOpen)return!0;var b=this.options;if(k&&!b.escapeButtonCloses)return!1;var c=function(){return!b.beforeClose||b.beforeClose.call(this)}.bind(this)();if(c===!1)return!1;this.isOpen=!1;var d=window.getComputedStyle(this.contentEl),e=a("")||a("-webkit-")||a("-moz-")||a("-o-"),f=function j(){this.rootEl.parentNode&&(this.rootEl.removeEventListener(g,j),this.overlayEl.removeEventListener(g,j),delete i[this.id],this.rootEl.parentNode.removeChild(this.rootEl),this.bodyEl.removeChild(this.overlayEl),b.afterClose&&b.afterClose.call(this),0===Object.keys(i).length&&document.body.classList.remove(h.open))}.bind(this);return g&&e?(this.rootEl.addEventListener(g,f),this.overlayEl.addEventListener(g,f),this.rootEl.classList.add(h.closing),this.overlayEl.classList.add(h.closing)):f(),!0},"string"==typeof a&&(a={content:a}),a.unsafeContent&&!a.content?a.content=a.unsafeContent:a.content&&(a.content=e(a.content));var m=c.options=Object.assign({},l.defaultOptions,a),n=c.bodyEl=document.getElementsByTagName("body")[0],o=c.rootEl=document.createElement("div");o.classList.add(h.vex),f(o,m.className);var p=c.overlayEl=document.createElement("div");p.classList.add(h.overlay),f(p,m.overlayClassName),m.overlayClosesOnClick&&o.addEventListener("click",function(a){a.target===o&&c.close()}),n.appendChild(p);var q=c.contentEl=document.createElement("div");if(q.classList.add(h.content),f(q,m.contentClassName),q.appendChild(m.content instanceof window.Node?m.content:d(m.content)),o.appendChild(q),m.showCloseButton){var r=c.closeEl=document.createElement("div");r.classList.add(h.close),f(r,m.closeClassName),r.addEventListener("click",c.close.bind(c)),q.appendChild(r)}return document.querySelector(m.appendLocation).appendChild(o),m.afterOpen&&m.afterOpen.call(c),document.body.classList.add(h.open),c},close:function(a){var b;if(a.id)b=a.id;else{if("string"!=typeof a)throw new TypeError("close requires a vex object or id string");b=a}return!!i[b]&&i[b].close()},closeTop:function(){var a=Object.keys(i);return!!a.length&&i[a[a.length-1]].close()},closeAll:function(){for(var a in i)this.close(a);return!0},getAll:function(){return i},getById:function(a){return i[a]}};window.addEventListener("keyup",function(a){27===a.keyCode&&(k=!0,l.closeTop(),k=!1)}),window.addEventListener("popstate",function(){l.defaultOptions.closeAllOnPopState&&l.closeAll()}),l.defaultOptions={content:"",showCloseButton:!0,escapeButtonCloses:!0,overlayClosesOnClick:!0,appendLocation:"body",className:"",overlayClassName:"",contentClassName:"",closeClassName:"",closeAllOnPopState:!0},Object.defineProperty(l,"_escapeHtml",{configurable:!1,enumerable:!1,writable:!1,value:e}),l.registerPlugin=function(a,b){var c=a(l),d=b||c.name;if(l[d])throw new Error("Plugin "+b+" is already registered.");l[d]=c},b.exports=l},{"classlist-polyfill":1,domify:2,"es6-object-assign":3}]},{},[4])(4)});
\ No newline at end of file

From 464ab30feacc6bf8e9d626e3ba8b3189c4a85dab Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Fri, 13 Jul 2018 22:35:34 -0500
Subject: [PATCH 02/12] Ordering currencies by name

---
 BTCPayServer/Controllers/InvoiceController.UI.cs | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/BTCPayServer/Controllers/InvoiceController.UI.cs b/BTCPayServer/Controllers/InvoiceController.UI.cs
index 86a94377e..7fd2ecd96 100644
--- a/BTCPayServer/Controllers/InvoiceController.UI.cs
+++ b/BTCPayServer/Controllers/InvoiceController.UI.cs
@@ -189,7 +189,7 @@ namespace BTCPayServer.Controllers
 
 
             _CSP.Add(new ConsentSecurityPolicy("script-src", "'unsafe-eval'")); // Needed by Vue
-            if(!string.IsNullOrEmpty(model.CustomCSSLink) && 
+            if (!string.IsNullOrEmpty(model.CustomCSSLink) &&
                 Uri.TryCreate(model.CustomCSSLink, UriKind.Absolute, out var uri))
             {
                 _CSP.Clear();
@@ -293,7 +293,8 @@ namespace BTCPayServer.Controllers
                                               CryptoImage = "/" + GetImage(kv.GetId(), kv.Network),
                                               Link = Url.Action(nameof(Checkout), new { invoiceId = invoiceId, paymentMethodId = kv.GetId().ToString() })
                                           }).Where(c => c.CryptoImage != "/")
-                .ToList()
+                                          .OrderBy(a => a.PaymentMethodName)
+                                          .ToList()
             };
 
             var expiration = TimeSpan.FromSeconds(model.ExpirationSeconds);
@@ -301,7 +302,7 @@ namespace BTCPayServer.Controllers
             return model;
         }
 
-        private static readonly Dictionary<string,string> CURRENCY_NAMES = new Dictionary<string, string>
+        private static readonly Dictionary<string, string> CURRENCY_NAMES = new Dictionary<string, string>
             {
                 {"BTC", "Bitcoin (BTC)" },
                 {"BTC_LightningLike", "Bitcoin (BTC) Lightning" },
@@ -353,7 +354,7 @@ namespace BTCPayServer.Controllers
                 provider = (NumberFormatInfo)provider.Clone();
                 provider.CurrencyDecimalDigits = divisibility;
             }
-            
+
             if (currencyData.Crypto)
                 return price.ToString("C", provider);
             else

From c75512303d2fa5bc396347b0c6e9e09f35f31f01 Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Mon, 16 Jul 2018 23:25:28 -0500
Subject: [PATCH 03/12] Getting display names directly from NetworkProvider

---
 BTCPayServer/BTCPayNetwork.cs                 |  1 +
 BTCPayServer/BTCPayNetworkProvider.Bitcoin.cs |  1 +
 .../BTCPayNetworkProvider.BitcoinGold.cs      |  1 +
 .../BTCPayNetworkProvider.Dogecoin.cs         |  1 +
 .../BTCPayNetworkProvider.Feathercoin.cs      |  1 +
 .../BTCPayNetworkProvider.Groestlcoin.cs      |  1 +
 .../BTCPayNetworkProvider.Litecoin.cs         |  1 +
 .../BTCPayNetworkProvider.Monacoin.cs         |  1 +
 BTCPayServer/BTCPayNetworkProvider.Polis.cs   |  1 +
 BTCPayServer/BTCPayNetworkProvider.Ufo.cs     |  1 +
 BTCPayServer/BTCPayNetworkProvider.Viacoin.cs |  1 +
 .../Controllers/InvoiceController.UI.cs       | 20 ++++---------------
 .../Models/InvoicingModels/PaymentModel.cs    |  4 ++--
 13 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/BTCPayServer/BTCPayNetwork.cs b/BTCPayServer/BTCPayNetwork.cs
index 00c222ab7..685215e6b 100644
--- a/BTCPayServer/BTCPayNetwork.cs
+++ b/BTCPayServer/BTCPayNetwork.cs
@@ -45,6 +45,7 @@ namespace BTCPayServer
         public string BlockExplorerLink { get; internal set; }
         public string UriScheme { get; internal set; }
         public Money MinFee { get; internal set; }
+        public string DisplayName { get; set; }
 
         [Obsolete("Should not be needed")]
         public bool IsBTC
diff --git a/BTCPayServer/BTCPayNetworkProvider.Bitcoin.cs b/BTCPayServer/BTCPayNetworkProvider.Bitcoin.cs
index 911edff2c..8cf59152f 100644
--- a/BTCPayServer/BTCPayNetworkProvider.Bitcoin.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.Bitcoin.cs
@@ -17,6 +17,7 @@ namespace BTCPayServer
             Add(new BTCPayNetwork()
             {
                 CryptoCode = nbxplorerNetwork.CryptoCode,
+                DisplayName = "Bitcoin",
                 BlockExplorerLink = NetworkType == NetworkType.Mainnet ? "https://www.smartbit.com.au/tx/{0}" : "https://testnet.smartbit.com.au/tx/{0}",
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
diff --git a/BTCPayServer/BTCPayNetworkProvider.BitcoinGold.cs b/BTCPayServer/BTCPayNetworkProvider.BitcoinGold.cs
index c75c3dd18..3a3256457 100644
--- a/BTCPayServer/BTCPayNetworkProvider.BitcoinGold.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.BitcoinGold.cs
@@ -10,6 +10,7 @@ namespace BTCPayServer
             Add(new BTCPayNetwork()
             {
                 CryptoCode = nbxplorerNetwork.CryptoCode,
+                DisplayName = "BGold",
                 BlockExplorerLink = NetworkType == NetworkType.Mainnet ? "https://explorer.bitcoingold.org/insight/tx/{0}/" : "https://test-explorer.bitcoingold.org/insight/tx/{0}",
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
diff --git a/BTCPayServer/BTCPayNetworkProvider.Dogecoin.cs b/BTCPayServer/BTCPayNetworkProvider.Dogecoin.cs
index be2918623..d583c20e2 100644
--- a/BTCPayServer/BTCPayNetworkProvider.Dogecoin.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.Dogecoin.cs
@@ -16,6 +16,7 @@ namespace BTCPayServer
             Add(new BTCPayNetwork()
             {
                 CryptoCode = nbxplorerNetwork.CryptoCode,
+                DisplayName = "Dogecoin",
                 BlockExplorerLink = NetworkType == NetworkType.Mainnet ? "https://dogechain.info/tx/{0}" : "https://dogechain.info/tx/{0}",
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
diff --git a/BTCPayServer/BTCPayNetworkProvider.Feathercoin.cs b/BTCPayServer/BTCPayNetworkProvider.Feathercoin.cs
index 2f48274b1..8f9642e2f 100644
--- a/BTCPayServer/BTCPayNetworkProvider.Feathercoin.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.Feathercoin.cs
@@ -16,6 +16,7 @@ namespace BTCPayServer
             Add(new BTCPayNetwork()
             {
                 CryptoCode = nbxplorerNetwork.CryptoCode,
+                DisplayName = "Feathercoin",
                 BlockExplorerLink = NetworkType == NetworkType.Mainnet ? "https://explorer.feathercoin.com/tx/{0}" : "https://explorer.feathercoin.com/tx/{0}",
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
diff --git a/BTCPayServer/BTCPayNetworkProvider.Groestlcoin.cs b/BTCPayServer/BTCPayNetworkProvider.Groestlcoin.cs
index 538975cd6..50ad0cf33 100644
--- a/BTCPayServer/BTCPayNetworkProvider.Groestlcoin.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.Groestlcoin.cs
@@ -15,6 +15,7 @@ namespace BTCPayServer
             Add(new BTCPayNetwork()
             {
                 CryptoCode = nbxplorerNetwork.CryptoCode,
+                DisplayName = "Groestlcoin",
                 BlockExplorerLink = NetworkType == NetworkType.Mainnet ? "https://chainz.cryptoid.info/grs/tx.dws?{0}.htm" : "https://chainz.cryptoid.info/grs-test/tx.dws?{0}.htm",
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
diff --git a/BTCPayServer/BTCPayNetworkProvider.Litecoin.cs b/BTCPayServer/BTCPayNetworkProvider.Litecoin.cs
index 42b3de248..026933d56 100644
--- a/BTCPayServer/BTCPayNetworkProvider.Litecoin.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.Litecoin.cs
@@ -16,6 +16,7 @@ namespace BTCPayServer
             Add(new BTCPayNetwork()
             {
                 CryptoCode = nbxplorerNetwork.CryptoCode,
+                DisplayName = "Litecoin",
                 BlockExplorerLink = NetworkType == NetworkType.Mainnet ? "https://live.blockcypher.com/ltc/tx/{0}/" : "http://explorer.litecointools.com/tx/{0}",
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
diff --git a/BTCPayServer/BTCPayNetworkProvider.Monacoin.cs b/BTCPayServer/BTCPayNetworkProvider.Monacoin.cs
index bb086132b..07798cd6e 100644
--- a/BTCPayServer/BTCPayNetworkProvider.Monacoin.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.Monacoin.cs
@@ -16,6 +16,7 @@ namespace BTCPayServer
             Add(new BTCPayNetwork()
             {
                 CryptoCode = nbxplorerNetwork.CryptoCode,
+                DisplayName = "Monacoin",
                 BlockExplorerLink = NetworkType == NetworkType.Mainnet ? "https://mona.insight.monaco-ex.org/insight/tx/{0}" : "https://testnet-mona.insight.monaco-ex.org/insight/tx/{0}",
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
diff --git a/BTCPayServer/BTCPayNetworkProvider.Polis.cs b/BTCPayServer/BTCPayNetworkProvider.Polis.cs
index 69640dab1..5379477c6 100644
--- a/BTCPayServer/BTCPayNetworkProvider.Polis.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.Polis.cs
@@ -16,6 +16,7 @@ namespace BTCPayServer
             Add(new BTCPayNetwork()
             {
                 CryptoCode = nbxplorerNetwork.CryptoCode,
+                DisplayName = "Polis",
                 BlockExplorerLink = NetworkType == NetworkType.Mainnet ? "https://insight.polispay.org/tx/{0}" : "https://insight.polispay.org/tx/{0}",
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
diff --git a/BTCPayServer/BTCPayNetworkProvider.Ufo.cs b/BTCPayServer/BTCPayNetworkProvider.Ufo.cs
index 45a3e6d6f..801bd7194 100644
--- a/BTCPayServer/BTCPayNetworkProvider.Ufo.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.Ufo.cs
@@ -16,6 +16,7 @@ namespace BTCPayServer
             Add(new BTCPayNetwork()
             {
                 CryptoCode = nbxplorerNetwork.CryptoCode,
+                DisplayName = "Ufo",
                 BlockExplorerLink = NetworkType == NetworkType.Mainnet ? "https://chainz.cryptoid.info/ufo/tx.dws?{0}" : "https://chainz.cryptoid.info/ufo/tx.dws?{0}",
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
diff --git a/BTCPayServer/BTCPayNetworkProvider.Viacoin.cs b/BTCPayServer/BTCPayNetworkProvider.Viacoin.cs
index 20116e188..58103a7cc 100644
--- a/BTCPayServer/BTCPayNetworkProvider.Viacoin.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.Viacoin.cs
@@ -16,6 +16,7 @@ namespace BTCPayServer
             Add(new BTCPayNetwork()
             {
                 CryptoCode = nbxplorerNetwork.CryptoCode,
+                DisplayName = "Viacoin",
                 BlockExplorerLink = NetworkType == NetworkType.Mainnet ? "https://explorer.viacoin.org/tx/{0}" : "https://explorer.viacoin.org/tx/{0}",
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
diff --git a/BTCPayServer/Controllers/InvoiceController.UI.cs b/BTCPayServer/Controllers/InvoiceController.UI.cs
index 7fd2ecd96..c9a93e7b7 100644
--- a/BTCPayServer/Controllers/InvoiceController.UI.cs
+++ b/BTCPayServer/Controllers/InvoiceController.UI.cs
@@ -248,7 +248,7 @@ namespace BTCPayServer.Controllers
             {
                 CryptoCode = network.CryptoCode,
                 PaymentMethodId = paymentMethodId.ToString(),
-                PaymentMethodName = GetPaymentMethodName(paymentMethodId.ToString()),
+                PaymentMethodName = network.DisplayName,
                 CryptoImage = "/" + GetImage(paymentMethodId, network),
                 IsLightning = paymentMethodId.PaymentType == PaymentTypes.LightningLike,
                 ServerUrl = HttpContext.Request.GetAbsoluteRoot(),
@@ -289,11 +289,12 @@ namespace BTCPayServer.Controllers
                                           .Select(kv => new PaymentModel.AvailableCrypto()
                                           {
                                               PaymentMethodId = kv.GetId().ToString(),
-                                              PaymentMethodName = GetPaymentMethodName(kv.GetId().ToString()),
+                                              PaymentMethodName = kv.Network.DisplayName,
+                                              LightningLike = kv.GetId().PaymentType == PaymentTypes.LightningLike,
                                               CryptoImage = "/" + GetImage(kv.GetId(), kv.Network),
                                               Link = Url.Action(nameof(Checkout), new { invoiceId = invoiceId, paymentMethodId = kv.GetId().ToString() })
                                           }).Where(c => c.CryptoImage != "/")
-                                          .OrderBy(a => a.PaymentMethodName)
+                                          .OrderBy(a => a.PaymentMethodName).ThenBy(a => a.LightningLike ? 1 : 0)
                                           .ToList()
             };
 
@@ -302,19 +303,6 @@ namespace BTCPayServer.Controllers
             return model;
         }
 
-        private static readonly Dictionary<string, string> CURRENCY_NAMES = new Dictionary<string, string>
-            {
-                {"BTC", "Bitcoin (BTC)" },
-                {"BTC_LightningLike", "Bitcoin (BTC) Lightning" },
-                {"LTC", "Litecoin (LTC)" },
-                {"LTC_LightningLike", "Litecoin (LTC) Lightning" },
-                {"DOGE", "Dogecoin (DOGE)" },
-            };
-        private string GetPaymentMethodName(string key)
-        {
-            return CURRENCY_NAMES[key];
-        }
-
         private string GetImage(PaymentMethodId paymentMethodId, BTCPayNetwork network)
         {
             return (paymentMethodId.PaymentType == PaymentTypes.BTCLike ? Url.Content(network.CryptoImagePath) : Url.Content(network.LightningImagePath));
diff --git a/BTCPayServer/Models/InvoicingModels/PaymentModel.cs b/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
index 4350726d2..23215f7b4 100644
--- a/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
+++ b/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
@@ -13,6 +13,7 @@ namespace BTCPayServer.Models.InvoicingModels
             public string CryptoImage { get; set; }
             public string Link { get; set; }
             public string PaymentMethodName { get; set; }
+            public bool LightningLike { get; set; }
         }
         public string HtmlTitle { get; set; }
         public string CustomCSSLink { get; set; }
@@ -31,8 +32,7 @@ namespace BTCPayServer.Models.InvoicingModels
         public string Status { get; set; }
         public string MerchantRefLink { get; set; }
         public int MaxTimeSeconds { get; set; }
-
-        // These properties are not used in client side code
+        
         public string StoreName { get; set; }
         public string ItemDesc { get; set; }
         public string TimeLeft { get; set; }

From c44132fd35a289c4dc5736556cc65db31d20c53e Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Mon, 16 Jul 2018 23:29:55 -0500
Subject: [PATCH 04/12] Using same icon for onchain and offchain per user
 feedback

---
 BTCPayServer/BTCPayNetworkProvider.Bitcoin.cs         |  4 ++--
 BTCPayServer/BTCPayNetworkProvider.Litecoin.cs        |  4 ++--
 ...c-lightning.svg => bitcoin-lightning-proposal.svg} |  0
 .../{bitcoin-symbol.svg => bitcoin-lightning.svg}     |  0
 BTCPayServer/wwwroot/imlegacy/bitcoin.svg             | 11 +++++++++++
 ...-lightning.svg => litecoin-lightning-proposal.svg} |  0
 .../{litecoin-symbol.svg => litecoin-lightning.svg}   |  0
 BTCPayServer/wwwroot/imlegacy/litecoin.svg            |  1 +
 8 files changed, 16 insertions(+), 4 deletions(-)
 rename BTCPayServer/wwwroot/imlegacy/{btc-lightning.svg => bitcoin-lightning-proposal.svg} (100%)
 rename BTCPayServer/wwwroot/imlegacy/{bitcoin-symbol.svg => bitcoin-lightning.svg} (100%)
 create mode 100644 BTCPayServer/wwwroot/imlegacy/bitcoin.svg
 rename BTCPayServer/wwwroot/imlegacy/{ltc-lightning.svg => litecoin-lightning-proposal.svg} (100%)
 rename BTCPayServer/wwwroot/imlegacy/{litecoin-symbol.svg => litecoin-lightning.svg} (100%)
 create mode 100644 BTCPayServer/wwwroot/imlegacy/litecoin.svg

diff --git a/BTCPayServer/BTCPayNetworkProvider.Bitcoin.cs b/BTCPayServer/BTCPayNetworkProvider.Bitcoin.cs
index 8cf59152f..b6752d0e2 100644
--- a/BTCPayServer/BTCPayNetworkProvider.Bitcoin.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.Bitcoin.cs
@@ -22,8 +22,8 @@ namespace BTCPayServer
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
                 UriScheme = "bitcoin",
-                CryptoImagePath = "imlegacy/bitcoin-symbol.svg",
-                LightningImagePath = "imlegacy/btc-lightning.svg",
+                CryptoImagePath = "imlegacy/bitcoin.svg",
+                LightningImagePath = "imlegacy/bitcoin-lightning.svg",
                 DefaultSettings = BTCPayDefaultSettings.GetDefaultSettings(NetworkType),
                 CoinType = NetworkType == NetworkType.Mainnet ? new KeyPath("0'") : new KeyPath("1'")
             });
diff --git a/BTCPayServer/BTCPayNetworkProvider.Litecoin.cs b/BTCPayServer/BTCPayNetworkProvider.Litecoin.cs
index 026933d56..c09692f49 100644
--- a/BTCPayServer/BTCPayNetworkProvider.Litecoin.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.Litecoin.cs
@@ -21,8 +21,8 @@ namespace BTCPayServer
                 NBitcoinNetwork = nbxplorerNetwork.NBitcoinNetwork,
                 NBXplorerNetwork = nbxplorerNetwork,
                 UriScheme = "litecoin",
-                CryptoImagePath = "imlegacy/litecoin-symbol.svg",
-                LightningImagePath = "imlegacy/ltc-lightning.svg",
+                CryptoImagePath = "imlegacy/litecoin.svg",
+                LightningImagePath = "imlegacy/litecoin-lightning.svg",
                 DefaultSettings = BTCPayDefaultSettings.GetDefaultSettings(NetworkType),
                 CoinType = NetworkType == NetworkType.Mainnet ? new KeyPath("2'") : new KeyPath("1'")
             });
diff --git a/BTCPayServer/wwwroot/imlegacy/btc-lightning.svg b/BTCPayServer/wwwroot/imlegacy/bitcoin-lightning-proposal.svg
similarity index 100%
rename from BTCPayServer/wwwroot/imlegacy/btc-lightning.svg
rename to BTCPayServer/wwwroot/imlegacy/bitcoin-lightning-proposal.svg
diff --git a/BTCPayServer/wwwroot/imlegacy/bitcoin-symbol.svg b/BTCPayServer/wwwroot/imlegacy/bitcoin-lightning.svg
similarity index 100%
rename from BTCPayServer/wwwroot/imlegacy/bitcoin-symbol.svg
rename to BTCPayServer/wwwroot/imlegacy/bitcoin-lightning.svg
diff --git a/BTCPayServer/wwwroot/imlegacy/bitcoin.svg b/BTCPayServer/wwwroot/imlegacy/bitcoin.svg
new file mode 100644
index 000000000..a61731438
--- /dev/null
+++ b/BTCPayServer/wwwroot/imlegacy/bitcoin.svg
@@ -0,0 +1,11 @@
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" width="64"  version="1.1"
+ x="0px" y="0px"
+ viewBox="0 0 64 64"
+ xml:space="preserve"
+ xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<g transform="translate(0.00630876,-0.00301984)">
+<path fill="#f7931a" d="m63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z"/>
+<path fill="#FFF" d="m46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z"/>
+</g>
+</svg>
diff --git a/BTCPayServer/wwwroot/imlegacy/ltc-lightning.svg b/BTCPayServer/wwwroot/imlegacy/litecoin-lightning-proposal.svg
similarity index 100%
rename from BTCPayServer/wwwroot/imlegacy/ltc-lightning.svg
rename to BTCPayServer/wwwroot/imlegacy/litecoin-lightning-proposal.svg
diff --git a/BTCPayServer/wwwroot/imlegacy/litecoin-symbol.svg b/BTCPayServer/wwwroot/imlegacy/litecoin-lightning.svg
similarity index 100%
rename from BTCPayServer/wwwroot/imlegacy/litecoin-symbol.svg
rename to BTCPayServer/wwwroot/imlegacy/litecoin-lightning.svg
diff --git a/BTCPayServer/wwwroot/imlegacy/litecoin.svg b/BTCPayServer/wwwroot/imlegacy/litecoin.svg
new file mode 100644
index 000000000..2c5275fc1
--- /dev/null
+++ b/BTCPayServer/wwwroot/imlegacy/litecoin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0.847 0.876 329.254 329.256"><title>Litecoin</title><path d="M330.102 165.503c0 90.922-73.705 164.629-164.626 164.629C74.554 330.132.848 256.425.848 165.503.848 74.582 74.554.876 165.476.876c90.92 0 164.626 73.706 164.626 164.627" fill="#bebebe"/><path d="M295.15 165.505c0 71.613-58.057 129.675-129.674 129.675-71.616 0-129.677-58.062-129.677-129.675 0-71.619 58.061-129.677 129.677-129.677 71.618 0 129.674 58.057 129.674 129.677" fill="#bebebe"/><path d="M155.854 209.482l10.693-40.264 25.316-9.249 6.297-23.663-.215-.587-24.92 9.104 17.955-67.608h-50.921l-23.481 88.23-19.605 7.162-6.478 24.395 19.59-7.156-13.839 51.998h135.521l8.688-32.362h-84.601" fill="#fff"/></svg>

From d49bbc95afff9f7e8392e7667aa97c18c8ce236a Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Mon, 16 Jul 2018 23:43:52 -0500
Subject: [PATCH 05/12] Tweaking display with display name and crypto code

---
 .../Controllers/InvoiceController.UI.cs       | 19 ++++++++++++++-----
 .../Models/InvoicingModels/PaymentModel.cs    |  1 +
 .../Views/Invoice/Checkout-Body.cshtml        |  1 +
 .../wwwroot/checkout/css/vex-extrastyles.css  | 17 +++++++++++------
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/BTCPayServer/Controllers/InvoiceController.UI.cs b/BTCPayServer/Controllers/InvoiceController.UI.cs
index c9a93e7b7..2d462bba2 100644
--- a/BTCPayServer/Controllers/InvoiceController.UI.cs
+++ b/BTCPayServer/Controllers/InvoiceController.UI.cs
@@ -248,8 +248,8 @@ namespace BTCPayServer.Controllers
             {
                 CryptoCode = network.CryptoCode,
                 PaymentMethodId = paymentMethodId.ToString(),
-                PaymentMethodName = network.DisplayName,
-                CryptoImage = "/" + GetImage(paymentMethodId, network),
+                PaymentMethodName = GetDisplayName(paymentMethodId, network),
+                CryptoImage = GetImage(paymentMethodId, network),
                 IsLightning = paymentMethodId.PaymentType == PaymentTypes.LightningLike,
                 ServerUrl = HttpContext.Request.GetAbsoluteRoot(),
                 OrderId = invoice.OrderId,
@@ -289,9 +289,10 @@ namespace BTCPayServer.Controllers
                                           .Select(kv => new PaymentModel.AvailableCrypto()
                                           {
                                               PaymentMethodId = kv.GetId().ToString(),
-                                              PaymentMethodName = kv.Network.DisplayName,
+                                              CryptoCode = kv.GetId().CryptoCode,
+                                              PaymentMethodName = GetDisplayName(kv.GetId(), kv.Network),
                                               LightningLike = kv.GetId().PaymentType == PaymentTypes.LightningLike,
-                                              CryptoImage = "/" + GetImage(kv.GetId(), kv.Network),
+                                              CryptoImage = GetImage(kv.GetId(), kv.Network),
                                               Link = Url.Action(nameof(Checkout), new { invoiceId = invoiceId, paymentMethodId = kv.GetId().ToString() })
                                           }).Where(c => c.CryptoImage != "/")
                                           .OrderBy(a => a.PaymentMethodName).ThenBy(a => a.LightningLike ? 1 : 0)
@@ -303,9 +304,17 @@ namespace BTCPayServer.Controllers
             return model;
         }
 
+        private string GetDisplayName(PaymentMethodId paymentMethodId, BTCPayNetwork network)
+        {
+            return paymentMethodId.PaymentType == PaymentTypes.BTCLike ?
+                network.DisplayName : network.DisplayName + " - Lightning Network";
+        }
+
         private string GetImage(PaymentMethodId paymentMethodId, BTCPayNetwork network)
         {
-            return (paymentMethodId.PaymentType == PaymentTypes.BTCLike ? Url.Content(network.CryptoImagePath) : Url.Content(network.LightningImagePath));
+            var res = paymentMethodId.PaymentType == PaymentTypes.BTCLike ?
+                Url.Content(network.CryptoImagePath) : Url.Content(network.LightningImagePath);
+            return "/" + res;
         }
 
         private string OrderAmountFromInvoice(string cryptoCode, ProductInformation productInformation)
diff --git a/BTCPayServer/Models/InvoicingModels/PaymentModel.cs b/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
index 23215f7b4..efa825352 100644
--- a/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
+++ b/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
@@ -14,6 +14,7 @@ namespace BTCPayServer.Models.InvoicingModels
             public string Link { get; set; }
             public string PaymentMethodName { get; set; }
             public bool LightningLike { get; set; }
+            public string CryptoCode { get; set; }
         }
         public string HtmlTitle { get; set; }
         public string CustomCSSLink { get; set; }
diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
index e24cb4675..e6356bfea 100644
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -54,6 +54,7 @@
                             <a href="@crypto.Link" onclick="return closeVexChangeCurrency('@crypto.PaymentMethodId');">
                                 <img style="height:24px;" alt="@crypto.PaymentMethodId" src="@crypto.CryptoImage" />
                                 @crypto.PaymentMethodName
+                                <span>@crypto.CryptoCode</span>
                             </a>
                         </li>
                     }
diff --git a/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
index a2a7bd9d2..d7cc5dd80 100644
--- a/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
+++ b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
@@ -19,13 +19,18 @@
         display: block;
     }
 
-    .vexmenuitem:hover {
-        background-color: #eee;
-    }
+        .vexmenuitem a span {
+            float: right;
+            color: gray;
+        }
 
-    .vexmenuitem:last-child {
-        border-bottom: none;
-    }
+.vexmenuitem:hover {
+    background-color: #eee;
+}
+
+.vexmenuitem:last-child {
+    border-bottom: none;
+}
 
 #vexPopupDialog {
     display: none;

From 203494e8095a2b390c8e04a1c69a7819d2d232bf Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Tue, 17 Jul 2018 00:14:56 -0500
Subject: [PATCH 06/12] Tweaking CSS styles and display of payment method
 selection

---
 .../Controllers/InvoiceController.UI.cs         |  2 +-
 BTCPayServer/Views/Invoice/Checkout-Body.cshtml | 13 ++++++++-----
 .../wwwroot/checkout/css/vex-extrastyles.css    | 17 +++++++++++++++++
 BTCPayServer/wwwroot/checkout/js/vexdialog.js   |  4 ++--
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/BTCPayServer/Controllers/InvoiceController.UI.cs b/BTCPayServer/Controllers/InvoiceController.UI.cs
index 2d462bba2..65083fe5f 100644
--- a/BTCPayServer/Controllers/InvoiceController.UI.cs
+++ b/BTCPayServer/Controllers/InvoiceController.UI.cs
@@ -307,7 +307,7 @@ namespace BTCPayServer.Controllers
         private string GetDisplayName(PaymentMethodId paymentMethodId, BTCPayNetwork network)
         {
             return paymentMethodId.PaymentType == PaymentTypes.BTCLike ?
-                network.DisplayName : network.DisplayName + " - Lightning Network";
+                network.DisplayName : network.DisplayName + " - Lightning";
         }
 
         private string GetImage(PaymentMethodId paymentMethodId, BTCPayNetwork network)
diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
index e6356bfea..143f3db48 100644
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -42,17 +42,20 @@
                 </div>
             </div>
             <div class="single-item-order__right">
-                <div class="payment__currencies" style="font-size: 14px; cursor:pointer;" onclick="bringupDialog()">
-                    <img style='height:32px;' v-bind:src="srvModel.cryptoImage" />
-                    <span style="color: #000000; border-bottom: 1px dotted gray;">{{srvModel.paymentMethodName}}</span>
+                <div class="payment__currencies" onclick="openPaymentMethodDialog()">
+                    <img v-bind:src="srvModel.cryptoImage" />
+                    <span>
+                        {{srvModel.paymentMethodName}}
+                        ({{srvModel.cryptoCode}})
+                    </span>
                 </div>
                 <div id="vexPopupDialog">
                     <ul class="vexmenu">
                     @foreach (var crypto in Model.AvailableCryptos)
                     {
                         <li class="vexmenuitem">
-                            <a href="@crypto.Link" onclick="return closeVexChangeCurrency('@crypto.PaymentMethodId');">
-                                <img style="height:24px;" alt="@crypto.PaymentMethodId" src="@crypto.CryptoImage" />
+                            <a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
+                                <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
                                 @crypto.PaymentMethodName
                                 <span>@crypto.CryptoCode</span>
                             </a>
diff --git a/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
index d7cc5dd80..fa6cf2446 100644
--- a/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
+++ b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
@@ -24,6 +24,10 @@
             color: gray;
         }
 
+        .vexmenuitem a img {
+            height: 24px;
+        }
+
 .vexmenuitem:hover {
     background-color: #eee;
 }
@@ -35,3 +39,16 @@
 #vexPopupDialog {
     display: none;
 }
+
+.payment__currencies {
+    font-size: 14px;
+    cursor: pointer;
+}
+
+    .payment__currencies img {
+        height: 32px;
+    }
+
+    .payment__currencies span {
+        border-bottom: 1px dotted gray;
+    }
diff --git a/BTCPayServer/wwwroot/checkout/js/vexdialog.js b/BTCPayServer/wwwroot/checkout/js/vexdialog.js
index ef4c98b10..f54ff04d8 100644
--- a/BTCPayServer/wwwroot/checkout/js/vexdialog.js
+++ b/BTCPayServer/wwwroot/checkout/js/vexdialog.js
@@ -1,11 +1,11 @@
-function bringupDialog() {
+function openPaymentMethodDialog() {
     var content = $("#vexPopupDialog").html();
     vex.open({
         unsafeContent: content
     });
 }
 
-function closeVexChangeCurrency(currencyId) {
+function closePaymentMethodDialog(currencyId) {
     vex.closeAll();
     return changeCurrency(currencyId);
 }

From a2d17bfa7e4ab031adb65c8dab385a0e28898705 Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Tue, 17 Jul 2018 22:30:02 -0500
Subject: [PATCH 07/12] Closing currency selection dialog once invoice expired
 or paid

---
 BTCPayServer/wwwroot/checkout/js/core.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/BTCPayServer/wwwroot/checkout/js/core.js b/BTCPayServer/wwwroot/checkout/js/core.js
index 1e5f2d225..2e327bbe4 100644
--- a/BTCPayServer/wwwroot/checkout/js/core.js
+++ b/BTCPayServer/wwwroot/checkout/js/core.js
@@ -16,6 +16,8 @@ function resetTabsSlider() {
 
     $("#altcoins").hide();
     $("#altcoins").removeClass("active");
+
+    closePaymentMethodDialog(null);
 }
 
 function onDataCallback(jsonData) {
@@ -69,7 +71,7 @@ function onDataCallback(jsonData) {
 }
 
 function changeCurrency(currency) {
-    if (srvModel.paymentMethodId !== currency) {
+    if (currency !== null && srvModel.paymentMethodId !== currency) {
         $(".payment__currencies").hide();
         $(".payment__spinner").show();
         srvModel.paymentMethodId = currency;

From c40b47b1ddd7ecd605c67ef8d5a5be7d3aa76f4e Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Tue, 17 Jul 2018 22:54:09 -0500
Subject: [PATCH 08/12] Hover indicator and handling case with only one
 currency

---
 .../Views/Invoice/Checkout-Body.cshtml        | 47 +++++++++++--------
 .../wwwroot/checkout/css/vex-extrastyles.css  | 31 ++++++++----
 2 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
index 143f3db48..04a32693a 100644
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -42,27 +42,36 @@
                 </div>
             </div>
             <div class="single-item-order__right">
-                <div class="payment__currencies" onclick="openPaymentMethodDialog()">
-                    <img v-bind:src="srvModel.cryptoImage" />
-                    <span>
+                @if (Model.AvailableCryptos.Count == 1)
+                {
+                    <div class="payment__currencies">
+                        <img v-bind:src="srvModel.cryptoImage" />
                         {{srvModel.paymentMethodName}}
                         ({{srvModel.cryptoCode}})
-                    </span>
-                </div>
-                <div id="vexPopupDialog">
-                    <ul class="vexmenu">
-                    @foreach (var crypto in Model.AvailableCryptos)
-                    {
-                        <li class="vexmenuitem">
-                            <a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
-                                <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
-                                @crypto.PaymentMethodName
-                                <span>@crypto.CryptoCode</span>
-                            </a>
-                        </li>
-                    }
-                    </ul>
-                </div>
+                    </div>
+                }
+                else
+                {
+                    <div class="payment__currencies" onclick="openPaymentMethodDialog()">
+                        <img v-bind:src="srvModel.cryptoImage" />
+                        <span class="clickable_underline">{{srvModel.paymentMethodName}} ({{srvModel.cryptoCode}})</span>
+                        <span class="clickable_indicator fa fa-angle-right"></span>
+                    </div>
+                    <div id="vexPopupDialog">
+                        <ul class="vexmenu">
+                            @foreach (var crypto in Model.AvailableCryptos)
+                            {
+                                <li class="vexmenuitem">
+                                    <a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
+                                        <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
+                                        @crypto.PaymentMethodName
+                                        <span>@crypto.CryptoCode</span>
+                                    </a>
+                                </li>
+                            }
+                        </ul>
+                    </div>
+                }
                 <div class="payment__spinner">
                     <partial name="Checkout-Spinner" />
                 </div>
diff --git a/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
index fa6cf2446..846d0b1a7 100644
--- a/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
+++ b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
@@ -28,13 +28,13 @@
             height: 24px;
         }
 
-.vexmenuitem:hover {
-    background-color: #eee;
-}
+    .vexmenuitem:hover {
+        background-color: #eee;
+    }
 
-.vexmenuitem:last-child {
-    border-bottom: none;
-}
+    .vexmenuitem:last-child {
+        border-bottom: none;
+    }
 
 #vexPopupDialog {
     display: none;
@@ -49,6 +49,19 @@
         height: 32px;
     }
 
-    .payment__currencies span {
-        border-bottom: 1px dotted gray;
-    }
+.clickable_underline {
+    border-bottom: 1px dotted #ccc;
+}
+
+.payment__currencies:hover .clickable_underline {
+    border-bottom: 1px dotted black;
+}
+
+.clickable_indicator {
+    margin-right: -10px;
+    opacity: 0.3;
+}
+
+.payment__currencies:hover .clickable_indicator {
+    opacity: 1;
+}

From 3cefbc89e49811d1e481e3234eb12dbafcfb9e40 Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Tue, 17 Jul 2018 23:10:54 -0500
Subject: [PATCH 09/12] Conditional display not necessary since whole block is
 hidden

---
 BTCPayServer/Views/Invoice/Checkout-Body.cshtml | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
index 04a32693a..052595ded 100644
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -42,15 +42,7 @@
                 </div>
             </div>
             <div class="single-item-order__right">
-                @if (Model.AvailableCryptos.Count == 1)
-                {
-                    <div class="payment__currencies">
-                        <img v-bind:src="srvModel.cryptoImage" />
-                        {{srvModel.paymentMethodName}}
-                        ({{srvModel.cryptoCode}})
-                    </div>
-                }
-                else
+                @if (Model.AvailableCryptos.Count > 1)
                 {
                     <div class="payment__currencies" onclick="openPaymentMethodDialog()">
                         <img v-bind:src="srvModel.cryptoImage" />

From 65916755b6745c8c2d3ddbc3833eaa56f8ba3eb2 Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Tue, 17 Jul 2018 23:29:40 -0500
Subject: [PATCH 10/12] Bitcoin always first selection in currency list

---
 BTCPayServer/Controllers/InvoiceController.UI.cs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/BTCPayServer/Controllers/InvoiceController.UI.cs b/BTCPayServer/Controllers/InvoiceController.UI.cs
index 65083fe5f..6a5b7bf6a 100644
--- a/BTCPayServer/Controllers/InvoiceController.UI.cs
+++ b/BTCPayServer/Controllers/InvoiceController.UI.cs
@@ -295,7 +295,7 @@ namespace BTCPayServer.Controllers
                                               CryptoImage = GetImage(kv.GetId(), kv.Network),
                                               Link = Url.Action(nameof(Checkout), new { invoiceId = invoiceId, paymentMethodId = kv.GetId().ToString() })
                                           }).Where(c => c.CryptoImage != "/")
-                                          .OrderBy(a => a.PaymentMethodName).ThenBy(a => a.LightningLike ? 1 : 0)
+                                          .OrderByDescending(a => a.CryptoCode == "BTC").ThenBy(a => a.PaymentMethodName).ThenBy(a => a.LightningLike ? 1 : 0)
                                           .ToList()
             };
 

From 2187e05a10b1551e0b3f19304811a710c4255b16 Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Tue, 17 Jul 2018 23:32:44 -0500
Subject: [PATCH 11/12] Renaming BTG image to conform to new naming scheme for
 onchain/offchain

---
 BTCPayServer/BTCPayNetworkProvider.BitcoinGold.cs         | 2 +-
 BTCPayServer/wwwroot/imlegacy/{btg-symbol.svg => btg.svg} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename BTCPayServer/wwwroot/imlegacy/{btg-symbol.svg => btg.svg} (100%)

diff --git a/BTCPayServer/BTCPayNetworkProvider.BitcoinGold.cs b/BTCPayServer/BTCPayNetworkProvider.BitcoinGold.cs
index 66bae5033..891483763 100644
--- a/BTCPayServer/BTCPayNetworkProvider.BitcoinGold.cs
+++ b/BTCPayServer/BTCPayNetworkProvider.BitcoinGold.cs
@@ -20,7 +20,7 @@ namespace BTCPayServer
                     "BTG_X = BTG_BTC * BTC_X",
                     "BTG_BTC = bitfinex(BTG_BTC)",
                 },
-                CryptoImagePath = "imlegacy/btg-symbol.svg",
+                CryptoImagePath = "imlegacy/btg.svg",
                 LightningImagePath = "imlegacy/btg-lightning.svg",
                 DefaultSettings = BTCPayDefaultSettings.GetDefaultSettings(NetworkType),
                 CoinType = NetworkType == NetworkType.Mainnet ? new KeyPath("156'") : new KeyPath("1'")
diff --git a/BTCPayServer/wwwroot/imlegacy/btg-symbol.svg b/BTCPayServer/wwwroot/imlegacy/btg.svg
similarity index 100%
rename from BTCPayServer/wwwroot/imlegacy/btg-symbol.svg
rename to BTCPayServer/wwwroot/imlegacy/btg.svg

From 8cb2c93abd38ad17b7d2f40f1108ff9232a350d5 Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Wed, 18 Jul 2018 23:53:00 -0500
Subject: [PATCH 12/12] Adding UTF8 lightning icon to Lightning payments
 methods

---
 BTCPayServer/Controllers/InvoiceController.UI.cs    | 4 ++--
 BTCPayServer/Models/InvoicingModels/PaymentModel.cs | 2 +-
 BTCPayServer/Views/Invoice/Checkout-Body.cshtml     | 2 ++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/BTCPayServer/Controllers/InvoiceController.UI.cs b/BTCPayServer/Controllers/InvoiceController.UI.cs
index 6a5b7bf6a..1bc736e99 100644
--- a/BTCPayServer/Controllers/InvoiceController.UI.cs
+++ b/BTCPayServer/Controllers/InvoiceController.UI.cs
@@ -291,11 +291,11 @@ namespace BTCPayServer.Controllers
                                               PaymentMethodId = kv.GetId().ToString(),
                                               CryptoCode = kv.GetId().CryptoCode,
                                               PaymentMethodName = GetDisplayName(kv.GetId(), kv.Network),
-                                              LightningLike = kv.GetId().PaymentType == PaymentTypes.LightningLike,
+                                              IsLightning = kv.GetId().PaymentType == PaymentTypes.LightningLike,
                                               CryptoImage = GetImage(kv.GetId(), kv.Network),
                                               Link = Url.Action(nameof(Checkout), new { invoiceId = invoiceId, paymentMethodId = kv.GetId().ToString() })
                                           }).Where(c => c.CryptoImage != "/")
-                                          .OrderByDescending(a => a.CryptoCode == "BTC").ThenBy(a => a.PaymentMethodName).ThenBy(a => a.LightningLike ? 1 : 0)
+                                          .OrderByDescending(a => a.CryptoCode == "BTC").ThenBy(a => a.PaymentMethodName).ThenBy(a => a.IsLightning ? 1 : 0)
                                           .ToList()
             };
 
diff --git a/BTCPayServer/Models/InvoicingModels/PaymentModel.cs b/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
index efa825352..78a13d50b 100644
--- a/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
+++ b/BTCPayServer/Models/InvoicingModels/PaymentModel.cs
@@ -13,7 +13,7 @@ namespace BTCPayServer.Models.InvoicingModels
             public string CryptoImage { get; set; }
             public string Link { get; set; }
             public string PaymentMethodName { get; set; }
-            public bool LightningLike { get; set; }
+            public bool IsLightning { get; set; }
             public string CryptoCode { get; set; }
         }
         public string HtmlTitle { get; set; }
diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
index 052595ded..e73067e82 100644
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -47,6 +47,7 @@
                     <div class="payment__currencies" onclick="openPaymentMethodDialog()">
                         <img v-bind:src="srvModel.cryptoImage" />
                         <span class="clickable_underline">{{srvModel.paymentMethodName}} ({{srvModel.cryptoCode}})</span>
+                        <span v-show="srvModel.isLightning">&#9889;</span>
                         <span class="clickable_indicator fa fa-angle-right"></span>
                     </div>
                     <div id="vexPopupDialog">
@@ -57,6 +58,7 @@
                                     <a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
                                         <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
                                         @crypto.PaymentMethodName
+                                        @(crypto.IsLightning ? Html.Raw("&#9889;") : null)
                                         <span>@crypto.CryptoCode</span>
                                     </a>
                                 </li>