Merge pull request #3 from michielpost/feature/addressbook

Feature/addressbook

src/aoWebWallet/Pages/AddressBook.razor

@@ -0,0 +1,132 @@
+@page "/address-book"
+@using aoWebWallet.Models
+@inherits MvvmComponentBase<MainViewModel>
+@inject IDialogService DialogService
+@inject ISnackbar Snackbar
+@inject ClipboardService ClipboardService
+
+<PageTitle>Address Book - @Program.PageTitlePostFix</PageTitle>
+
+
+<MudContainer Class="mt-16 px-8" MaxWidth="MaxWidth.False">
+
+
+     <MudText Typo="Typo.h5">Address Book</MudText>
+
+    <MudContainer Width="100%" Class="d-flex justify-end mb-4 pr-3 d-max-w-100">
+            @if (BindingContext.WalletList.Data != null && BindingContext.WalletList.Data.Any())
+                {
+                    <MudTooltip Text="Add contact" Arrow="true" Placement="Placement.Left">
+                        <MudIconButton Icon="@Icons.Material.Filled.AddCircle" aria-label="add contact" Size="Size.Large" OnClick="OpenDialog"></MudIconButton>
+                    </MudTooltip>
+                }
+    </MudContainer>
+
+    <MudStack>
+        @if (BindingContext.WalletList.Data != null)
+        {
+            if(BindingContext.WalletList.Data.Where(x => x.IsReadOnly).Any())
+            {
+                int logoCount = 1;
+                foreach (var wallet in BindingContext.WalletList.Data.Where(x => x.IsReadOnly))
+                {
+                    string logoUrl = $"images/account--{logoCount}.svg";
+                    string detailUrl = $"wallet/{wallet.Address}";
+                    <MudPaper Class="pa-4">
+                        <MudStack Row="true">
+                            <MudAvatar Image="@logoUrl" Size="Size.Large" Class="rounded-full" />
+
+                            <MudStack Class="d-overflow-hidden" Justify="Justify.Center" Spacing="0">
+                                <div Class="d-custom-2">
+                                    <MudLink Class="KodeMono tx-wrap" Href="@detailUrl" Typo="Typo.h6">
+                                        @wallet.Address
+                                    </MudLink>
+                                    <MudIconButton Class="copy-clipboard" Icon="@Icons.Material.Filled.ContentCopy" Color="Color.Default" OnClick="async () => { await ClipboardService.CopyToClipboard(wallet.Address); }" />
+                                </div>
+                                <div Class="d-flex flex-row">
+                                    <MudText Typo="Typo.body2">@wallet.Name</MudText>
+                                </div>
+                            </MudStack>
+                            <MudSpacer />
+                            @if(BindingContext.ProcessesDataList?.Data?.Where(x => x.Data?.Address == wallet.Address && (x.Data?.Processes?.Any() ?? false)).Any() ?? false)
+                            {
+                                <MudChip>AOS</MudChip>
+                            }
+
+                            <MudIconButton Class="delete-address" Icon="@Icons.Material.Filled.Edit" aria-label="edit" OnClick="() => { EditWallet(wallet); }"></MudIconButton>
+                            <MudIconButton Class="delete-address" Icon="@Icons.Material.Filled.Delete" aria-label="delete" OnClick="() => { DeleteWallet(wallet); }"></MudIconButton>
+                        </MudStack>
+                    </MudPaper>
+
+                    logoCount++;
+                    if (logoCount > 5)
+                        logoCount = 1;
+                }
+            }
+            else
+            {
+                <MudGrid Row="true" Justify="Justify.Center" Class="p-2">
+                    <MudItem sm="12" xs="12">
+                        <AddWalletComponent IsExpanded="true"></AddWalletComponent>
+                    </MudItem>
+                </MudGrid>
+
+            }
+        }
+        else
+        {
+            <MudText Typo="Typo.h6">Loading address book...</MudText>
+
+            <DataLoaderProgress DataLoader="BindingContext.WalletList.DataLoader" Title="wallets" />
+        }
+
+    </MudStack>
+</MudContainer>
+
+
+@code
+{
+    private void OpenDialog()
+    {
+        var tempWallet = new Wallet()
+            {
+                Address = string.Empty,
+                IsReadOnly = true,
+                AddedDate = DateTimeOffset.UtcNow,
+                Source = WalletTypes.Manual
+            };
+
+        var parameters = new DialogParameters<EditWalletComponent> { { x => x.Wallet, tempWallet } };
+
+        var options = new DialogOptions { CloseOnEscapeKey = true, MaxWidth = MaxWidth.Small, FullWidth = true };
+        DialogService.Show<EditWalletComponent>("Add Contact", parameters, options);
+    }
+
+    private async void EditWallet(Wallet wallet)
+    {
+        var parameters = new DialogParameters<EditWalletComponent> { { x => x.Wallet, wallet } };
+
+        var options = new DialogOptions { CloseOnEscapeKey = true, MaxWidth = MaxWidth.Small, FullWidth = true };
+        DialogService.Show<EditWalletComponent>("Edit Contact", parameters, options);
+
+        StateHasChanged();
+    }
+
+    private async void DeleteWallet(Wallet wallet)
+    {
+        bool? result = await DialogService.ShowMessageBox(
+            "Warning",
+            $"Are you sure you want to delete this contact? {wallet.Address}?",
+            yesText: "Delete!", cancelText: "Cancel");
+
+        if (result != null)
+        {
+            await BindingContext.DeleteWallet(wallet);
+
+            Snackbar.Add($"Contact deleted ({wallet.Address})", Severity.Info);
+        }
+        StateHasChanged();
+    }
+
+
+}

src/aoWebWallet/Pages/AddressBook.razor.cs

@@ -0,0 +1,27 @@
+using aoWebWallet.ViewModels;
+
+namespace aoWebWallet.Pages
+{
+    public partial class AddressBook : MvvmComponentBase<MainViewModel>
+    {
+        protected override void OnInitialized()
+        {
+            //WatchDataLoaderVM(BindingContext.TokenList);
+            WatchDataLoaderVM(BindingContext.WalletList);
+            WatchDataLoaderVM(BindingContext.ProcessesDataList);
+
+            base.OnInitialized();
+        }
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                await BindingContext.LoadWalletList();
+            }
+
+            await base.OnAfterRenderAsync(firstRender);
+        }
+
+    }
+}

src/aoWebWallet/Pages/WalletDetail.razor

@@ -51,8 +51,14 @@
             </MudTooltip>
             @if (BindingContext.SelectedWallet?.Wallet.Source == WalletTypes.Explorer)
             {
-                <MudTooltip Text="Add as readonly wallet" Arrow="true" Placement="Placement.Left">
-                    <MudIconButton Icon="@Icons.Material.Outlined.Grade" aria-label="add to wallets" OnClick="BindingContext.AddWalletAsReadonly"></MudIconButton>
+                <MudTooltip Text="Save wallet" Arrow="true" Placement="Placement.Left">
+                    <MudIconButton Icon="@Icons.Material.Outlined.Star" aria-label="add to wallets" OnClick="BindingContext.SaveExplorerWallet"></MudIconButton>
+                </MudTooltip>
+            }
+            else if(BindingContext.SelectedWallet?.Wallet != null)
+            {
+                <MudTooltip Text="Edit" Arrow="true" Placement="Placement.Left">
+                    <MudIconButton Icon="@Icons.Material.Outlined.Edit" aria-label="edit wallet" OnClick="() => EditWallet(BindingContext.SelectedWallet.Wallet)"></MudIconButton>
                 </MudTooltip>
             }
         </MudStack>
@@ -227,6 +233,16 @@
         DialogService.Show<AddTokenDialog>("Add Token", options);
     }
 
+    private async void EditWallet(Wallet wallet)
+    {
+        var parameters = new DialogParameters<EditWalletComponent> { { x => x.Wallet, wallet } };
+
+        var options = new DialogOptions { CloseOnEscapeKey = true, MaxWidth = MaxWidth.Small, FullWidth = true };
+        DialogService.Show<EditWalletComponent>("Edit Wallet", parameters, options);
+
+        StateHasChanged();
+    }
+
     private void Receive(BalanceDataViewModel? balanceDataVM)
     {
         var parameters = new DialogParameters<ReceiveTokenDialog> { { x => x.SelectedBalanceDataVM, balanceDataVM } };

src/aoWebWallet/Pages/Wallets.razor

@@ -11,7 +11,7 @@
 
 <MudContainer Class="mt-16 px-8" MaxWidth="MaxWidth.False">
 
-    @if (BindingContext.WalletList.Data == null || BindingContext.WalletList.Data.Count > 1)
+    @if (BindingContext.WalletList.Data == null || BindingContext.WalletList.Data.Where(x => !x.IsReadOnly).Count() > 1)
     {
         <MudText Typo="Typo.h5">Wallets</MudText>
     }
@@ -34,10 +34,10 @@
     <MudStack>
         @if (BindingContext.WalletList.Data != null)
         {
-            if(BindingContext.WalletList.Data.Any())
+            if (BindingContext.WalletList.Data.Where(x => !x.IsReadOnly).Any())
             {
                 int logoCount = 1;
-                foreach (var wallet in BindingContext.WalletList.Data)
+                foreach (var wallet in BindingContext.WalletList.Data.Where(x => !x.IsReadOnly))
                 {
                     string logoUrl = $"images/account--{logoCount}.svg";
                     string detailUrl = $"wallet/{wallet.Address}";
@@ -53,10 +53,6 @@
                                     <MudIconButton Class="copy-clipboard" Icon="@Icons.Material.Filled.ContentCopy" Color="Color.Default" OnClick="async () => { await ClipboardService.CopyToClipboard(wallet.Address); }" />
                                 </div>
                                 <div Class="d-flex flex-row">
-                                    @if (wallet.IsReadOnly)
-                                    {
-                                        <MudText Typo="Typo.body2">read-only &nbsp;</MudText>
-                                    }
                                     <MudText Typo="Typo.body2">@wallet.Name</MudText>
 
                                     @if (wallet.NeedsBackup)
@@ -75,6 +71,7 @@
                             {
                                 <MudIconButton Class="delete-address" Icon="@Icons.Material.Filled.Save" aria-label="backup" OnClick="() => { DownloadWallet(wallet); }"></MudIconButton>
                             }
+                            <MudIconButton Class="delete-address" Icon="@Icons.Material.Filled.Edit" aria-label="edit" OnClick="() => { EditWallet(wallet); }"></MudIconButton>
                             <MudIconButton Class="delete-address" Icon="@Icons.Material.Filled.Delete" aria-label="delete" OnClick="() => { DeleteWallet(wallet); }"></MudIconButton>
                         </MudStack>
                     </MudPaper>
@@ -98,9 +95,6 @@
                             <MudTabPanel Text="Load .json">
                                 <AddUploadWalletComponent IsExpanded="true"></AddUploadWalletComponent>
                             </MudTabPanel>
-                            <MudTabPanel Text="Read-only" >
-                                <AddWalletComponent IsExpanded="true"></AddWalletComponent>
-                            </MudTabPanel>
                         </MudTabs>
                     </MudItem>
                 </MudGrid>
@@ -126,6 +120,16 @@
         DialogService.Show<AddWalletDialog>("Add Wallet", options);
     }
 
+    private async void EditWallet(Wallet wallet)
+    {
+        var parameters = new DialogParameters<EditWalletComponent> { { x => x.Wallet, wallet } };
+
+        var options = new DialogOptions { CloseOnEscapeKey = true, MaxWidth = MaxWidth.Small, FullWidth = true };
+        DialogService.Show<EditWalletComponent>("Edit Wallet", parameters, options);
+
+        StateHasChanged();
+    }
+
     private async void DeleteWallet(Wallet wallet)
     {
         bool? result = await DialogService.ShowMessageBox(

src/aoWebWallet/Pages/Wallets.razor.cs

@@ -26,12 +26,5 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             await base.OnAfterRenderAsync(firstRender);
         }
 
-        //protected override async Task LoadDataAsync()
-        //{
-
-
-        //    //BindingContext.LoadStats();
-        //}
-
     }
 }

src/aoWebWallet/Services/StorageService.cs

@@ -107,11 +107,12 @@ public async ValueTask<List<Wallet>> GetWallets()
             return result ?? new();
         }
 
+
         public async ValueTask SaveWallet (Wallet wallet)
         {
             var list = await GetWallets();
 
-            var existing = list.Where(x => x.Address == wallet.Address).FirstOrDefault();
+            var existing = list.Where(x => x.Address == wallet.Address && x.IsReadOnly == wallet.IsReadOnly).FirstOrDefault();
             if(existing != null)
                list.Remove(existing);
 

src/aoWebWallet/Shared/AddTokenDialog.razor

@@ -5,7 +5,7 @@
     <DialogContent>
         Add a token to view your balance. Provide a process-id that implements the token standard.
         <MudFocusTrap DefaultFocus="DefaultFocus.FirstChild">
-            <MudTextField @bind-Value="TokenId" Label="Token Id" Variant="Variant.Text"></MudTextField>
+            <MudTextField @bind-Value="TokenId" Label="Token Id" Mask="@(new RegexMask("^[a-zA-Z0-9_\\-]{0,43}$"))" MaxLength="43" Variant="Variant.Text"></MudTextField>
         </MudFocusTrap>
         <MudText Color="Color.Secondary">@Progress</MudText>
     </DialogContent>

src/aoWebWallet/Shared/AddWalletDialog.razor

@@ -15,32 +15,15 @@
             <MudTabPanel Text="Load .json">
                 <AddUploadWalletComponent></AddUploadWalletComponent>
             </MudTabPanel>
-            <MudTabPanel Text="Read-only" >
-                <AddWalletComponent @ref="addWalletRef" HideAddButton="true"></AddWalletComponent>
-            </MudTabPanel>
         </MudTabs>
     </DialogContent>
 </MudDialog>
 @code {
     [CascadingParameter] MudDialogInstance MudDialog { get; set; } = default!;
 
-    private AddWalletComponent? addWalletRef;
-
     public async Task Submit()
     {
-        // Call a function in AddWalletComponent
-        if (addWalletRef != null)
-        {
-            var result = await addWalletRef.Submit();
-            if(result)
-            {
-                MudDialog.Close(DialogResult.Ok(true));
-            }
-        }
-        else
-        {
-            MudDialog.Close(DialogResult.Ok(true));
-        }
+        MudDialog.Close(DialogResult.Ok(true));
     }
 
     //void Submit() => MudDialog.Close(DialogResult.Ok(true));