Create a component

src/Angor/Client/Components/ShowQrCode.razor

@@ -0,0 +1,58 @@
+@using Angor.Shared.Services
+@using Angor.Client.Models
+@using Nostr.Client.Messages
+@using Nostr.Client.Messages.Metadata
+@using QRCoder
+
+
+<div class="col-lg-6">
+    <h4 class="card-title">QR Code</h4>
+    @if (!string.IsNullOrEmpty(base64qrcode))
+    {
+        <img src="data:image /png;base64,@base64qrcode" class="card-img-top qrcode" alt="QR Code"/>
+    }
+</div>
+
+@code {
+
+    [Parameter]
+    public string Data { get; set; }
+
+    private static string lastqrcode;
+    private static string lastaddress;
+    private string base64qrcode;
+
+    protected override async Task OnInitializedAsync()
+    {
+        GenerateQRCode(Data);
+    }
+
+    public Task GenerateQRCode(string newData)
+    {
+        Data = newData;
+
+        if (lastaddress == Data)
+        {
+            base64qrcode = lastqrcode;
+            return Task.CompletedTask;
+        }
+
+        return Task.Run(() =>
+        {
+            base64qrcode = GenerateQRCodeInternal(Data);
+            lastqrcode = base64qrcode;
+            lastaddress = Data;
+
+            StateHasChanged();
+
+        });
+    }
+
+    public static string GenerateQRCodeInternal(string content)
+    {
+        using QRCodeGenerator qrGenerator = new QRCodeGenerator();
+        using QRCodeData qrCodeData = qrGenerator.CreateQrCode(content, QRCodeGenerator.ECCLevel.Q);
+        using PngByteQRCode pngByteQRCode = new PngByteQRCode(qrCodeData);
+        return Convert.ToBase64String(pngByteQRCode.GetGraphic(10));
+    }
+}

src/Angor/Client/Pages/Wallet.razor

@@ -5,6 +5,7 @@
 @using Angor.Client.Services
 @using Angor.Client.Storage
 @using Angor.Shared.Models
+@using Angor.Client.Components
 
 @inject HttpClient Http
 @inject IClientStorage storage;
@@ -25,8 +26,7 @@
 
     <NotificationComponent @ref="notificationComponent" />
 
-
-    <!-- This part of the page is visible only if the wallet is found -->
+<!-- This part of the page is visible only if the wallet is found -->
     @if (!hasWallet)
     {
         <!-- No Wallet found -->
@@ -163,14 +163,12 @@
                         <div class="row">
                             <div class="col-lg-6">
                                 <h4 class="card-title">Receive Address</h4>
-                                <p id="receive-address" class="card-text">@localAccountInfo.GetNextReceiveAddress()</p>
+                                <p id="receive-address" class="card-text">@nextReceiveAddress</p>
                                 <button class="btn btn-primary" onclick="@CopyNextReceiveAddress">Copy Address</button>
                             </div>
-                            <div class="col-lg-6">
-                                <h4 class="card-title">QR Code</h4>
-                                <!-- Replace the src with your actual QR code -->
-                                <img src="data:image /png;base64,@base64qrcode" class="card-img-top qrcode" alt="QR Code" />
-                            </div>
+
+                            <ShowQrCode @ref="showQrCode" Data="@nextReceiveAddress" />
+
                         </div>
                     </div>
                 </div>
@@ -389,7 +387,9 @@
     private int _feeMax = 3;
     DateTime _lastFeeRefresh = DateTime.MinValue;
 
-    private string base64qrcode;
+    string? nextReceiveAddress = string.Empty;
+
+    ShowQrCode showQrCode;
 
     protected override Task OnInitializedAsync()
     {
@@ -398,10 +398,9 @@
         if (hasWallet)
         {
             localAccountInfo = GetAccountInfoFromStorage();
+            nextReceiveAddress = localAccountInfo.GetNextReceiveAddress();
         }
 
-        GenerateQRCode();
-
         return Task.CompletedTask;
     }
 
@@ -419,7 +418,11 @@
             storage.SetAccountInfo(network.Name, accountInfo);
 
             localAccountInfo = accountInfo;
-
+
+            nextReceiveAddress = localAccountInfo.GetNextReceiveAddress();
+
+            showQrCode.GenerateQRCode(nextReceiveAddress);
+
             return new OperationResult { Success = true };
         });
 
@@ -513,38 +516,13 @@
 
     public  async Task CopyNextReceiveAddress()
     {
-        var address = localAccountInfo.GetNextReceiveAddress();
-
-        if (string.IsNullOrEmpty(address))
+        if (string.IsNullOrEmpty(nextReceiveAddress))
         {
             notificationComponent.ShowErrorMessage("New address was not created");
             return;
         }
 
-        await _clipboardService.WriteTextAsync(address);
-    }
-
-    private static string lastqrcode;
-    private static string lastaddress;
-
-    private void GenerateQRCode()
-    {
-        if (lastaddress == localAccountInfo.GetNextReceiveAddress())
-        {
-            base64qrcode = lastqrcode;
-            return;
-        }
-
-        Task.Run(() =>
-        {
-            var address = localAccountInfo.GetNextReceiveAddress();
-
-            base64qrcode = Util.GenerateQRCode(address);
-            lastqrcode = base64qrcode;
-            lastaddress = address;
-
-            StateHasChanged();
-        });
+        await _clipboardService.WriteTextAsync(nextReceiveAddress);
     }
 
     private async Task RefreshFee()