Merge pull request #10 from michielpost/feature/mudblazor7

Feature/mudblazor7
michielpost · Jul 1, 2024 · 813fca8 · 813fca8
2 parents 1bd7ea6 + 62b30f4
commit 813fca8
Show file tree

Hide file tree

Showing 20 changed files with 33 additions and 29 deletions.
diff --git a/src/aoWebWallet/Layout/MainLayout.razor b/src/aoWebWallet/Layout/MainLayout.razor
@@ -5,6 +5,7 @@
 }
 
 <MudThemeProvider IsDarkMode="true" />
+<MudPopoverProvider />
 <MudDialogProvider CloseButton="true" CloseOnEscapeKey="true"/>
 <MudSnackbarProvider />
 

diff --git a/src/aoWebWallet/Pages/AddressBook.razor b/src/aoWebWallet/Pages/AddressBook.razor
@@ -34,7 +34,7 @@
                                 <WalletAvatar Address="@wallet.Address" />
                                 @if(BindingContext.ProcessesDataList?.Data?.Where(x => x.Data?.Address == wallet.Address && (x.Data?.Processes?.Any() ?? false)).Any() ?? false)
                                     {
-                                       <MudChip Class="aos-chip" Variant="Variant.Outlined" Color="Color.Dark">AOS</MudChip>
+                                    <MudChip T="string" Class="aos-chip" Variant="Variant.Outlined" Color="Color.Dark">AOS</MudChip>
                                     }
                             </div>
                             <MudStack Class="d-overflow-hidden" Justify="Justify.Center" Spacing="0">

diff --git a/src/aoWebWallet/Pages/MemeFrames.razor b/src/aoWebWallet/Pages/MemeFrames.razor
@@ -71,7 +71,7 @@
                         <CardHeaderAvatar>
                             @if (!string.IsNullOrEmpty(memeProcess.TokenProcess.Logo))
                             {
-                                <MudAvatar Class="mr-3" Image="@UrlHelper.GetArweaveUrl(memeProcess.TokenProcess.Logo)" Size="Size.Large" />
+                                <MudAvatar Class="mr-3" Size="Size.Large"><MudImage Src="@UrlHelper.GetArweaveUrl(memeProcess.TokenProcess.Logo)" /></MudAvatar>
                             }
                             else
                             {

diff --git a/src/aoWebWallet/Pages/ReceivePage.razor b/src/aoWebWallet/Pages/ReceivePage.razor
@@ -34,7 +34,7 @@
                     @if (BindingContext.Token?.TokenData != null)
                     {
                         <MudStack Row=true>
-                            <MudAvatar Image="@UrlHelper.GetArweaveUrl(BindingContext.Token.TokenData?.Logo)" Size="Size.Large" title="@BindingContext.Token.TokenId" />
+                            <MudAvatar Size="Size.Large" title="@BindingContext.Token.TokenId"><MudImage Src="@UrlHelper.GetArweaveUrl(BindingContext.Token.TokenData?.Logo)" /></MudAvatar>
                             <MudStack Justify="Justify.Center" Spacing="0">
                                 <MudText Typo="Typo.body1">@BindingContext.Token.TokenData?.Name</MudText>
                                 <MudText Typo="Typo.body2">@BindingContext.Token.TokenData?.Ticker</MudText>

diff --git a/src/aoWebWallet/Pages/TokenDetail.razor b/src/aoWebWallet/Pages/TokenDetail.razor
@@ -22,7 +22,7 @@
 
             <MudPaper Class="pa-4 mb-14 mt-4 d-overflow-hidden">
                 <MudStack Row="true">
-                    <MudAvatar Image="@UrlHelper.GetArweaveUrl(token.TokenData?.Logo)" Size="Size.Large" />
+                    <MudAvatar Size="Size.Large"><MudImage Src="@UrlHelper.GetArweaveUrl(token.TokenData?.Logo)" /></MudAvatar>
                     <MudStack Justify="Justify.Center" Spacing="0">
                         <MudText Typo="Typo.body1">@token.TokenData?.Name</MudText>
                         <MudText Typo="Typo.body2">@token.TokenData?.Ticker</MudText>

diff --git a/src/aoWebWallet/Pages/TransactionDetail.razor b/src/aoWebWallet/Pages/TransactionDetail.razor
@@ -29,7 +29,7 @@
             <MudTimeline TimelinePosition="TimelinePosition.Left">
                 <MudTimelineItem>
                     <ItemDot>
-                        <MudAvatar Image="@UrlHelper.GetArweaveUrl(tokenData?.Logo)" Size="Size.Medium" title="@tokenData?.TokenId" />
+                        <MudAvatar Size="Size.Medium" title="@tokenData?.TokenId"><MudImage Src="@UrlHelper.GetArweaveUrl(tokenData?.Logo)" /></MudAvatar>
                     </ItemDot>
                     <ItemContent>
                         @if (transfer.BlockHeight.HasValue)

diff --git a/src/aoWebWallet/Pages/WalletDetail.razor b/src/aoWebWallet/Pages/WalletDetail.razor
@@ -38,7 +38,7 @@
                         string ownerUrl = $"/wallet/{BindingContext.SelectedWallet.Wallet.OwnerAddress}";
 
                         <MudLink Href="@ownerUrl">
-                            <MudChip>owner: @BindingContext.SelectedWallet?.Wallet.OwnerAddress</MudChip>
+                            <MudChip T="string">owner: @BindingContext.SelectedWallet?.Wallet.OwnerAddress</MudChip>
                         </MudLink>
                     }
                 </MudStack>

diff --git a/src/aoWebWallet/Pages/Wallets.razor b/src/aoWebWallet/Pages/Wallets.razor
@@ -39,7 +39,7 @@
                                 <WalletAvatar Address="@wallet.Address" />
                                 @if(BindingContext.ProcessesDataList?.Data?.Where(x => x.Data?.Address == wallet.Address && (x.Data?.Processes?.Any() ?? false)).Any() ?? false)
                                     {
-                                       <MudChip Class="aos-chip" Variant="Variant.Outlined" Color="Color.Dark">AOS</MudChip>
+                                    <MudChip T="string" Class="aos-chip" Variant="Variant.Outlined" Color="Color.Dark">AOS</MudChip>
                                     }
                             </div>
 

diff --git a/src/aoWebWallet/Services/StorageService.cs b/src/aoWebWallet/Services/StorageService.cs
@@ -27,6 +27,7 @@ public async ValueTask<List<MemeFrameProcess>> GetMemeFrames()
             AddSystemMemeFrames(result,"2gM9n9QO6JG1_bZhCWr3fuEKJtzRgx1xvYUB92nVFAs", Constants.CredTokenId); //AORTA
             AddSystemMemeFrames(result,"-a4T7XLMDGTcu8_preKXdUT6__4sJkMhYLEJZkXUYd0", Constants.CredTokenId); //MEME
             AddSystemMemeFrames(result,"rik3eCayInKVNzSMdoxeSEfpxNd5U7tx1H8NAveg4o8", Constants.CredTokenId); //FINCH-MEME
+            //AddSystemMemeFrames(result, "kqvDWqWWJIaEWqarff3-Ux15sRG8sToh7X3b4SYh5Sc", "c2fBkprpp46V-PVn5ZdoevuKGz-Pt28EsqEkWMfnfrM"); //Test Meme
 
             return result;
 

diff --git a/src/aoWebWallet/Shared/ActionEditor.razor b/src/aoWebWallet/Shared/ActionEditor.razor
@@ -3,20 +3,20 @@
 
 <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
     <MudItem>
-        <MudChip>Token ID</MudChip> <MudChip Style="border-radius:0; margin-top:0;" Class="KodeMono tx-wrap" Variant="Variant.Text" Color="Color.Primary">@AoAction.Target?.Value?.ToShortAddress()</MudChip>
+        <MudChip T="string">Token ID</MudChip> <MudChip T="string" Style="border-radius:0; margin-top:0;" Class="KodeMono tx-wrap" Variant="Variant.Text" Color="Color.Primary">@AoAction.Target?.Value?.ToShortAddress()</MudChip>
     </MudItem>
 </MudHidden>
 <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
 	<MudItem>
-        <MudChip>Token ID</MudChip> <MudChip Style="border-radius:0; margin-top:0;" Class="KodeMono tx-wrap" Variant="Variant.Text" Color="Color.Primary">@AoAction.Target?.Value</MudChip>
+        <MudChip T="string">Token ID</MudChip> <MudChip T="string" Style="border-radius:0; margin-top:0;" Class="KodeMono tx-wrap" Variant="Variant.Text" Color="Color.Primary">@AoAction.Target?.Value</MudChip>
     </MudItem>
 </MudHidden>
 
 <MudStack>
     @foreach (var ActionParam in AoAction.Filled)
     {
         <MudItem>
-            <MudChip>@ActionParam.Key</MudChip> <MudChip Style="border-radius:0; margin-top:0;" Variant="Variant.Text" Color="Color.Success" SelectedColor="Color.Error">@ActionParam.Value</MudChip>
+            <MudChip T="string">@ActionParam.Key</MudChip> <MudChip T="string" Style="border-radius:0; margin-top:0;" Variant="Variant.Text" Color="Color.Success" SelectedColor="Color.Error">@ActionParam.Value</MudChip>
         </MudItem>
     }
 

diff --git a/src/aoWebWallet/Shared/AddUploadWalletComponent.razor b/src/aoWebWallet/Shared/AddUploadWalletComponent.razor
@@ -19,7 +19,7 @@
                                @ondragenter="@SetDragClass"
                                @ondragleave="@ClearDragClass"
                                @ondragend="@ClearDragClass">
-                    <ButtonTemplate>
+                <ActivatorContent>
                         <MudPaper Height="100%"
                                   Outlined="true"
                                   Class="@_dragClass">
@@ -31,15 +31,14 @@
                             </MudText>
                             @foreach (var file in _fileNames)
                             {
-                                <MudChip Color="Color.Dark" Text="@file.Name" />
+                            <MudChip T="string" Color="Color.Dark" Text="@file.Name" />
                             }
                         </MudPaper>
-                        <MudToolBar DisableGutters="true"
+                        <MudToolBar Gutters="false"
                                     Class="relative d-flex justify-center gap-4 z-30">
                                 <MudButton HtmlTag="label"
                                            Class="text-transform-none"
                                            Color="Color.Primary"
-                                           for="@context.Id"
                                            Variant="Variant.Filled">
                                     Load .json wallet
                                 </MudButton>
@@ -56,7 +55,7 @@
                                 Clear
                             </MudButton> *@
                         </MudToolBar>
-                    </ButtonTemplate>
+                    </ActivatorContent>
                 </MudFileUpload>
             </MudStack>
     </MudStack>

diff --git a/src/aoWebWallet/Shared/BalanceDataComponent.razor b/src/aoWebWallet/Shared/BalanceDataComponent.razor
@@ -12,7 +12,7 @@
 <MudPaper Class="py-2 pl-2">
     <MudStack Row="true">
         <div Class="d-custom-1">
-            <MudAvatar Image="@UrlHelper.GetArweaveUrl(BalanceDataVM.Token.TokenData?.Logo)" Size="Size.Medium" title="@BalanceDataVM.Token.TokenId" />
+            <MudAvatar Size="Size.Medium" title="@BalanceDataVM.Token.TokenId"><MudImage Src="@UrlHelper.GetArweaveUrl(BalanceDataVM.Token.TokenData?.Logo)" /></MudAvatar>
             <MudStack Class="ml-4" Justify="Justify.Center" Spacing="0">
                 <MudText Class="d-font-weight-500" Typo="Typo.body1"><span Class="d-none d-sm-flex">@BalanceDataVM.Token.TokenData?.Name</span></MudText>
                 <MudText Typo="Typo.body2">@BalanceDataVM.Token.TokenData?.Ticker</MudText>

diff --git a/src/aoWebWallet/Shared/Components/ActionInputComponent.razor b/src/aoWebWallet/Shared/Components/ActionInputComponent.razor
@@ -5,7 +5,7 @@
 <MudItem>
 @if(ReadOnly)
 {
-    <MudChip>@ActionParam.Key</MudChip> <MudChip Style="border-radius:0; margin-top:0;" Variant="Variant.Text" Color="Color.Primary">@ActionParam.Value</MudChip>
+        <MudChip T="string">@ActionParam.Key</MudChip> <MudChip T="string" Style="border-radius:0; margin-top:0;" Variant="Variant.Text" Color="Color.Primary">@ActionParam.Value</MudChip>
 }
 else
 {
@@ -40,10 +40,10 @@ else
 
 
             <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
-                <MudChip Style="border-radius:0; margin-top:0;" Class="KodeMono tx-wrap" Variant="Variant.Text" Color="Color.Primary">@(ActionParam.Value?.ToShortAddress() ?? "Not selected")</MudChip>
+                <MudChip T="string" Style="border-radius:0; margin-top:0;" Class="KodeMono tx-wrap" Variant="Variant.Text" Color="Color.Primary">@(ActionParam.Value?.ToShortAddress() ?? "Not selected")</MudChip>
             </MudHidden>
             <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
-                <MudChip Style="border-radius:0; margin-top:0;" Class="KodeMono tx-wrap" Variant="Variant.Text" Color="Color.Primary">@(ActionParam.Value ?? "Not selected")</MudChip>
+                <MudChip T="string" Style="border-radius:0; margin-top:0;" Class="KodeMono tx-wrap" Variant="Variant.Text" Color="Color.Primary">@(ActionParam.Value ?? "Not selected")</MudChip>
             </MudHidden>
         @* <MudTextField @ref="mudProcessField" T="string" MaxLength=43 Label="@ActionParam.Key" Validation="@(new Func<string, IEnumerable<string>>(ValidateProcess))" Variant="Variant.Text" ValueChanged="UpdateStringValue" /> *@
     }
@@ -165,7 +165,7 @@ else
         StateHasChanged();
     }
 
-    private async Task<IEnumerable<Wallet>> WalletSearch(string value)
+    private async Task<IEnumerable<Wallet>> WalletSearch(string value, CancellationToken cancellationToken)
     {
         // if text is null or empty, don't return values (drop-down will not open)
         if (string.IsNullOrEmpty(value))

diff --git a/src/aoWebWallet/Shared/Components/ActionQuantityComponent.razor b/src/aoWebWallet/Shared/Components/ActionQuantityComponent.razor
@@ -25,7 +25,7 @@
 
     @if (ReadOnly)
     {
-        <MudChip>@ActionParam.Key</MudChip> <MudChip Color="Color.Secondary"> @BalanceHelper.FormatBalance(long.Parse(ActionParam.Value ?? "0"), Token?.TokenData?.Denomination ?? 0) @Token?.TokenData?.Ticker</MudChip>
+        <MudChip T="string">@ActionParam.Key</MudChip> <MudChip T="string" Color="Color.Secondary"> @BalanceHelper.FormatBalance(long.Parse(ActionParam.Value ?? "0"), Token?.TokenData?.Denomination ?? 0) @Token?.TokenData?.Ticker</MudChip>
     }
     else
     {
@@ -41,7 +41,7 @@
 
             if (ActionParam.ParamType == ActionParamType.Balance)
             {
-                <MudChip style="border-radius:0;" Variant="Variant.Text" Color="Color.Success" OnClick="SetBalance">Balance available: <br /> @BalanceHelper.FormatBalance(BalanceData?.Balance, Token?.TokenData?.Denomination ?? 1) @Token?.TokenData?.Ticker</MudChip>
+                <MudChip T="string" style="border-radius:0;" Variant="Variant.Text" Color="Color.Success" OnClick="SetBalance">Balance available: <br /> @BalanceHelper.FormatBalance(BalanceData?.Balance, Token?.TokenData?.Denomination ?? 1) @Token?.TokenData?.Ticker</MudChip>
             }
         }
     }

diff --git a/src/aoWebWallet/Shared/Components/SelectActiveWalletComponent.razor b/src/aoWebWallet/Shared/Components/SelectActiveWalletComponent.razor
@@ -16,7 +16,6 @@
                 {
                     <MudSelectItem Value="@wallet.Address" Class="wallet-item-background">
                         <MudStack Row="true">
-                            @* <MudAvatar Image="@logoUrl" Size="Size.Large" Class="rounded-full" /> *@
                             <MudStack style="overflow: hidden;" Justify="Justify.Center" Spacing="0">
                                 <div style="display:flex; white-space: nowrap;">
                                     <MudText Class="KodeMono" style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden;" Typo="Typo.h6">

diff --git a/src/aoWebWallet/Shared/Components/TokenListComponent.razor b/src/aoWebWallet/Shared/Components/TokenListComponent.razor
@@ -7,7 +7,7 @@
     <MudPaper Class="pa-4 pt-5 pb-4 mb-0">
         <MudStack Row="true">
             <div style="display:flex; flex-direction: row; align-items:center; max-height: 70px;" Class=" d-overflow-hidden">
-                <MudAvatar Class="mr-3" Image="@UrlHelper.GetArweaveUrl(token.TokenData?.Logo)" Size="Size.Large" />
+                <MudAvatar Class="mr-3" Size="Size.Large"><MudImage Src="@UrlHelper.GetArweaveUrl(token.TokenData?.Logo)" /></MudAvatar>
                 <MudStack Justify="Justify.Center" Spacing="0">
                     <MudText style="font-weight: 500;" Typo="Typo.body1">@token.TokenData?.Name</MudText>
                     <MudText Typo="Typo.body2">@token.TokenData?.Ticker</MudText>

diff --git a/src/aoWebWallet/Shared/Components/TransactionComponent.razor b/src/aoWebWallet/Shared/Components/TransactionComponent.razor
@@ -11,7 +11,7 @@
     string txUrl = $"transaction/{transfer.Id}";
     <MudTimelineItem>
         <ItemDot>
-            <MudAvatar Image="@UrlHelper.GetArweaveUrl(tokenData?.Logo)" Size="Size.Medium" title="@tokenData?.TokenId" />
+            <MudAvatar Size="Size.Medium" title="@tokenData?.TokenId"><MudImage Src="@UrlHelper.GetArweaveUrl(tokenData?.Logo)" /></MudAvatar>
         </ItemDot>
         <ItemContent>
             @if (transfer.BlockHeight.HasValue)

diff --git a/src/aoWebWallet/Shared/NavMenu.razor b/src/aoWebWallet/Shared/NavMenu.razor
@@ -35,7 +35,7 @@
         </div>
         <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left:4px; padding:5px;">
             <MudLink Href="https://twitter.com/aoWebWallet" Target="_blank">
-                <MudChip Class="cursor-pointer">
+                <MudChip T="string" Class="cursor-pointer">
                     <AvatarContent >
                         <MudAvatar Class="custom-avatar-size">
                             <MudImage Class="twitter-image" Src="images/twitter.svg"></MudImage>
@@ -46,7 +46,7 @@
             </MudLink>
 
             <MudLink Href="https://discord.gg/bahdqzpNYW" Target="_blank">
-                <MudChip Class="cursor-pointer">
+                <MudChip T="string" Class="cursor-pointer">
                     <AvatarContent >
                         <MudAvatar Class="custom-avatar-size">
                             <MudImage Class="discord-image" Src="images/discord.svg"></MudImage>

diff --git a/src/aoWebWallet/aoWebWallet.csproj b/src/aoWebWallet/aoWebWallet.csproj
@@ -16,7 +16,7 @@
 		<PackageReference Include="ArweaveBlazor" Version="0.0.9" />
 		<PackageReference Include="ClipLazor" Version="2.1.1" />
 		<PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="6.9.2" />
-		<PackageReference Include="MudBlazor" Version="6.20.0" />
+		<PackageReference Include="MudBlazor" Version="7.0.0" />
 		<PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />
 		<PackageReference Include="BlazorWasmPreRendering.Build" Version="4.0.0" />
 		<PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />

diff --git a/src/aoWebWallet/wwwroot/css/app.css b/src/aoWebWallet/wwwroot/css/app.css
@@ -411,7 +411,7 @@ body {
     height: 24px !important;
 }
 
-.mud-paper, .mud-tabs-toolbar {
+.mud-paper, .mud-tabs-tabbar {
     background-color: rgba(16,16,67,0.33) !important;
 }
 
@@ -427,6 +427,10 @@ body {
     background-color: rgba(16,16,67,1) !important;
 }
 
+.mud-list {
+    background-color: rgba(16,16,67,1) !important;
+}
+
 .float-right {
     float:right;
 }