Wallet Receive: Update address formatting (#5313)

* Wallet Receive: Update address formatting

Closes #5311.

* Fix tests

BTCPayServer.Tests/SeleniumTester.cs

@@ -565,7 +565,7 @@ namespace BTCPayServer.Tests
             walletId ??= WalletId;
             GoToWallet(walletId, WalletsNavPages.Receive);
             Driver.FindElement(By.Id("generateButton")).Click();
-            var addressStr = Driver.FindElement(By.Id("Address")).GetAttribute("value");
+            var addressStr = Driver.FindElement(By.Id("Address")).GetAttribute("data-text");
             var address = BitcoinAddress.Create(addressStr, ((BTCPayNetwork)Server.NetworkProvider.GetNetwork(walletId.CryptoCode)).NBitcoinNetwork);
             for (var i = 0; i < coins; i++)
             {

BTCPayServer.Tests/SeleniumTests.cs

@@ -1244,7 +1244,7 @@ namespace BTCPayServer.Tests
             var walletId = new WalletId(storeId, "BTC");
             s.GoToWallet(walletId, WalletsNavPages.Receive);
             s.Driver.FindElement(By.Id("generateButton")).Click();
-            var addressStr = s.Driver.FindElement(By.Id("Address")).GetAttribute("value");
+            var addressStr = s.Driver.FindElement(By.Id("Address")).GetAttribute("data-text");
             var address = BitcoinAddress.Create(addressStr,
                 ((BTCPayNetwork)s.Server.NetworkProvider.GetNetwork("BTC")).NBitcoinNetwork);
             await s.Server.ExplorerNode.GenerateAsync(1);
@@ -1460,7 +1460,7 @@ namespace BTCPayServer.Tests
             Assert.True(s.Driver.FindElement(By.CssSelector("#address-tab .qr-container")).Displayed);
             // no previous page in the wizard, hence no back button
             Assert.True(s.Driver.ElementDoesNotExist(By.Id("GoBack")));
-            var receiveAddr = s.Driver.FindElement(By.Id("Address")).GetAttribute("value");
+            var receiveAddr = s.Driver.FindElement(By.Id("Address")).GetAttribute("data-text");
 
             // Can add a label?
             await TestUtils.EventuallyAsync(async () =>
@@ -1483,7 +1483,7 @@ namespace BTCPayServer.Tests
             //generate it again, should be the same one as before as nothing got used in the meantime
             s.Driver.FindElement(By.CssSelector("button[value=generate-new-address]")).Click();
             Assert.True(s.Driver.FindElement(By.CssSelector("#address-tab .qr-container")).Displayed);
-            Assert.Equal(receiveAddr, s.Driver.FindElement(By.Id("Address")).GetAttribute("value"));
+            Assert.Equal(receiveAddr, s.Driver.FindElement(By.Id("Address")).GetAttribute("data-text"));
             TestUtils.Eventually(() =>
             {
                 Assert.Contains("test-label", s.Driver.PageSource);
@@ -1514,8 +1514,8 @@ namespace BTCPayServer.Tests
             await Task.Delay(200);
             s.Driver.Navigate().Refresh();
             s.Driver.FindElement(By.CssSelector("button[value=generate-new-address]")).Click();
-            Assert.NotEqual(receiveAddr, s.Driver.FindElement(By.Id("Address")).GetAttribute("value"));
-            receiveAddr = s.Driver.FindElement(By.Id("Address")).GetAttribute("value");
+            Assert.NotEqual(receiveAddr, s.Driver.FindElement(By.Id("Address")).GetAttribute("data-text"));
+            receiveAddr = s.Driver.FindElement(By.Id("Address")).GetAttribute("data-text");
             s.Driver.FindElement(By.Id("CancelWizard")).Click();
 
             // Check the label is applied to the tx
@@ -1526,7 +1526,7 @@ namespace BTCPayServer.Tests
             s.GenerateWallet(cryptoCode, "", true);
             s.GoToWallet(null, WalletsNavPages.Receive);
             s.Driver.FindElement(By.CssSelector("button[value=generate-new-address]")).Click();
-            Assert.NotEqual(receiveAddr, s.Driver.FindElement(By.Id("Address")).GetAttribute("value"));
+            Assert.NotEqual(receiveAddr, s.Driver.FindElement(By.Id("Address")).GetAttribute("data-text"));
 
             var invoiceId = s.CreateInvoice(storeId);
             var invoice = await s.Server.PayTester.InvoiceRepository.GetInvoice(invoiceId);

BTCPayServer/Components/TruncateCenter/Default.cshtml

@@ -5,7 +5,7 @@
     @if (Model.Copy) classes += " truncate-center--copy";
     @if (Model.Elastic) classes += " truncate-center--elastic";
 }
-<span class="truncate-center @classes">
+<span class="truncate-center @classes"@(!string.IsNullOrEmpty(Model.Id) ? $"id={Model.Id}" : null) data-text=@Safe.Json(Model.Text)>
     @if (Model.IsVue)
     {
         <span class="truncate-center-truncated" data-bs-toggle="tooltip" :title=@Safe.Json(Model.Text)>

BTCPayServer/Components/TruncateCenter/TruncateCenter.cs

@@ -15,7 +15,7 @@ namespace BTCPayServer.Components.TruncateCenter;
 /// <returns>HTML with truncated string</returns>
 public class TruncateCenter : ViewComponent
 {
-    public IViewComponentResult Invoke(string text, string link = null, string classes = null, int padding = 7, bool copy = true, bool elastic = false, bool isVue = false)
+    public IViewComponentResult Invoke(string text, string link = null, string classes = null, int padding = 7, bool copy = true, bool elastic = false, bool isVue = false, string id = null)
     {
         if (string.IsNullOrEmpty(text))
             return new HtmlContentViewComponentResult(new StringHtmlContent(string.Empty));
@@ -27,7 +27,8 @@ public class TruncateCenter : ViewComponent
             IsVue = isVue,
             Copy = copy,
             Text = text,
-            Link = link
+            Link = link,
+            Id = id
         };
         if (!isVue && text.Length > 2 * padding)
         {

BTCPayServer/Components/TruncateCenter/TruncateCenterViewModel.cs

@@ -5,6 +5,7 @@ namespace BTCPayServer.Components.TruncateCenter
         public string Text { get; set; }
         public string Start { get; set; }
         public string End { get; set; }
+        public string Id { get; set; }
         public string Classes { get; set; }
         public string Link { get; set; }
         public int Padding { get; set; }

BTCPayServer/Views/UIWallets/WalletReceive.cshtml

@@ -70,12 +70,9 @@
                     </div>
                     <div class="input-group mt-3">
                         <div class="form-floating">
-                            <input id="PaymentLink" class="form-control-plaintext" readonly="readonly" value="@Model.PaymentLink">
+                            <vc:truncate-center text="@Model.PaymentLink" padding="15" elastic="true" classes="form-control-plaintext" id="PaymentLink" />
                             <label for="PaymentLink">Payment Link</label>
                         </div>
-                        <button type="button" class="btn btn-link" data-clipboard-target="#PaymentLink">
-                            <vc:icon symbol="copy" />
-                        </button>
                     </div>
                 </div>
                 <div class="tab-pane payment-box show active" id="address-tab" role="tabpanel">
@@ -85,12 +82,9 @@
                     </div>
                     <div class="input-group mt-3">
                         <div class="form-floating">
-                            <input id="Address" class="form-control-plaintext" readonly="readonly" value="@Model.Address">
+                            <vc:truncate-center text="@Model.Address" padding="15" elastic="true" classes="form-control-plaintext" id="Address" />
                             <label for="Address">Address</label>
                         </div>
-                        <button type="button" class="btn btn-link" data-clipboard-target="#Address">
-                            <vc:icon symbol="copy" />
-                        </button>
                     </div>
                 </div>
             </div>
@@ -105,7 +99,7 @@
                 </div>
             </div>
     
-            <div class="d-grid gap-3 mt-5">
+            <div class="d-grid gap-3 mt-4">
                 <button type="submit" name="command" value="generate-new-address" class="btn btn-primary w-100">Generate another address</button>
                 <button type="submit" name="command" value="unreserve-current-address" class="btn btn-secondary w-100">Unreserve this address</button>
             </div>

BTCPayServer/wwwroot/main/site.css

@@ -805,7 +805,7 @@ a.store-powered-by:hover .logo-brand-dark {
 }
 
 .ts-wrapper.form-control:not(.ts-inline) .ts-control {
-    padding: .5rem !important;
+    padding: .5rem 1rem !important;
     border-radius: var(--btcpay-border-radius) !important;
 }
 
@@ -814,12 +814,16 @@ a.store-powered-by:hover .logo-brand-dark {
     box-shadow: 0 0 0 1px var(--btcpay-form-border-focus) inset;
 }
 
+.ts-wrapper.form-control,
+.ts-wrapper.form-control .ts-control {
+    min-height: auto !important;
+}
+
 .ts-wrapper.form-control.ts-inline,
 .ts-wrapper.form-control.ts-inline .ts-control {
     padding: 0 !important;
     border: none !important;
     box-shadow: none !important;
-    min-height: auto !important;
     background: transparent !important;
 }