add new wallet UI to tabs

michielpost · May 1, 2024 · c15d019 · c15d019
1 parent dab3743
commit c15d019
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 68 deletions.
diff --git a/src/aoWebWallet/Layout/MainLayout.razor b/src/aoWebWallet/Layout/MainLayout.razor
@@ -5,7 +5,7 @@
 }
 
 <MudThemeProvider IsDarkMode="MainViewModel.IsDarkMode" />
-<MudDialogProvider />
+<MudDialogProvider CloseButton="true" CloseOnEscapeKey="true"/>
 <MudSnackbarProvider />
 
 <MudLayout Class="d-flex flex-column d-min-h-vh-100">

diff --git a/src/aoWebWallet/Pages/Wallets.razor b/src/aoWebWallet/Pages/Wallets.razor
@@ -85,11 +85,21 @@
             else
             {
                 <MudGrid Row="true" Justify="Justify.Center" Class="p-2">
-                    <MudItem lg="6" xs="12">
-                        <AddArConnectComponent IsExpanded="true"></AddArConnectComponent>
-                        <AddUploadWalletComponent IsExpanded="true"></AddUploadWalletComponent>
-                        <AddGenerateWalletComponent IsExpanded="true"></AddGenerateWalletComponent>
-                        <AddWalletComponent IsExpanded="true"></AddWalletComponent>
+                    <MudItem sm="12" xs="12">
+                        <MudTabs Class="mud-width-full" Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
+                            <MudTabPanel Text="Create new">
+                                <AddGenerateWalletComponent IsExpanded="true"></AddGenerateWalletComponent>
+                            </MudTabPanel>
+                            <MudTabPanel Text="ArConnect">
+                                <AddArConnectComponent IsExpanded="true"></AddArConnectComponent>
+                            </MudTabPanel>
+                            <MudTabPanel Text="Load .json">
+                                <AddUploadWalletComponent IsExpanded="true"></AddUploadWalletComponent>
+                            </MudTabPanel>
+                            <MudTabPanel Text="Read-only" >
+                                <AddWalletComponent IsExpanded="true"></AddWalletComponent>
+                            </MudTabPanel>
+                        </MudTabs>
                     </MudItem>
                 </MudGrid>
 

diff --git a/src/aoWebWallet/Shared/AddArConnectComponent.razor b/src/aoWebWallet/Shared/AddArConnectComponent.razor
@@ -6,9 +6,9 @@
 
 <MudPaper Class="pa-8 mb-4">
     <MudStack Spacing="2">
-        <MudButton OnClick="OnExpandCollapseClick">@(IsExpanded ? "Connect wallet" : "Connect wallet")</MudButton>
+        <MudText Typo="Typo.button">Connect Wallet</MudText>
         <MudDivider />
-        <MudCollapse Expanded="IsExpanded">
+        <MudStack>
 
             @if (!BindingContext.HasArConnectExtension.HasValue)
             {
@@ -17,20 +17,20 @@
             else if (!BindingContext.HasArConnectExtension.Value)
             {
                 <MudButton Href="https://www.arconnect.io/" style="cursor:pointer;">
-                    <div style="width:100%; margin-left:5px; display: flex;  align-items:center; padding:8px;">
-                        <MudImage style="width:31px; height:31px;" Src="images/arconnect.webp" Alt="arconnect logo" Elevation="25" Class="rounded-lg" />
-                        <MudText Typo="Typo.subtitle2" style="margin-left:10px;">Download ArConnect</MudText>
+                    <div Class="d-custom-4">
+                        <MudImage Class="d-custom-5 rounded-lg" Src="images/arconnect.webp" Alt="arconnect logo" Elevation="25" />
+                        <MudText Typo="Typo.subtitle2" Class="ml-3">Download ArConnect</MudText>
                     </div>
                 </MudButton>
             }
             else if (BindingContext.HasArConnectExtension.Value)
             {
                 if (string.IsNullOrEmpty(BindingContext.ActiveArConnectAddress))
                 {
-                    <MudButton style="border-radius:22px;width:100%; margin-top:5px; display: flex;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.09);" OnClick="Connect" Elevation="3">
-                        <div style="width:100%; margin-left:5px; display: flex;  align-items:center; padding:8px;">
-                            <MudImage style="width:31px; height:31px;" Src="images/arconnect.webp" Alt="arconnect logo" Elevation="25" Class="rounded-lg" />
-                            <MudText Typo="Typo.subtitle2" style="margin-left:10px;">Connect with ArConnect</MudText>
+                    <MudButton Class="d-custom-6" OnClick="Connect" Elevation="3">
+                        <div Class="d-custom-4">
+                            <MudImage Class="d-custom-5 rounded-lg" Src="images/arconnect.webp" Alt="arconnect logo" Elevation="25" />
+                            <MudText Typo="Typo.subtitle2" Class="ml-3">Connect with ArConnect</MudText>
                         </div>
                     </MudButton>
 
@@ -40,17 +40,12 @@
                     var wallet = BindingContext.WalletList.Data?.Where(x => x.Source == WalletTypes.ArConnect && x.Address == BindingContext.ActiveArConnectAddress).FirstOrDefault();
                     if (wallet == null)
                     {
-
-
-                        <MudButton style="border-radius:22px;width:100%; margin-top:5px; display: flex;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.09);" OnClick="Connect" Elevation="3">
-                            <div style="width:100%; margin-left:5px; display: flex;  align-items:center; padding:8px;">
-                                <MudImage style="width:31px; height:31px;" Src="images/arconnect.webp" Alt="arconnect logo" Elevation="25" Class="rounded-lg" />
-                                <MudText Typo="Typo.subtitle2" style="margin-left:10px;">Connect with ArConnect</MudText>
+                        <MudButton Class="d-custom-6" OnClick="Connect" Elevation="3">
+                            <div Class="d-custom-4">
+                                <MudImage Class="d-custom-5 rounded-lg" Src="images/arconnect.webp" Alt="arconnect logo" Elevation="25" />
+                                <MudText Typo="Typo.subtitle2" Class="ml-3">Connect with ArConnect</MudText>
                             </div>
                         </MudButton>
-
-
-
                     }
                     else
                     {
@@ -64,7 +59,7 @@
             {
             <MudButton Color="Color.Primary" OnClick="Submit">Add</MudButton>
             } *@
-        </MudCollapse>
+        </MudStack>
     </MudStack>
 </MudPaper>
 

diff --git a/src/aoWebWallet/Shared/AddGenerateWalletComponent.razor b/src/aoWebWallet/Shared/AddGenerateWalletComponent.razor
@@ -6,20 +6,16 @@
 
 <MudPaper Class="pa-8">
     <MudStack Spacing="2">
-        <MudButton OnClick="OnExpandCollapseClick">@(IsExpanded ? "Create a new wallet" : "Create a new wallet")</MudButton>
-        <MudDivider />
-        <MudCollapse Expanded="IsExpanded">
-            <MudTextField @bind-Value="Name" Label="Name (optional)" Variant="Variant.Text"></MudTextField>
+            <MudTextField @bind-Value="Name" Label="Wallet Name" Variant="Variant.Text"></MudTextField>
             <MudText Color="Color.Secondary">@Progress</MudText>
-            <div style="width:100%;">
-                <MudButton style="margin-top:10px; display:flex; margin-left:auto;" Color="Color.Primary" OnClick="Submit">Create</MudButton>
+            <div Class="d-w-100 d-flex justify-end mt-2">
+                <MudButton  Color="Color.Primary" Variant="Variant.Filled" OnClick="Submit">
+                    Create AOWW Wallet
+                </MudButton>
             </div>
-        </MudCollapse>
     </MudStack>
 </MudPaper>
 
-
-
 @code {
     [Parameter]
     public bool HideAddButton { get; set; }

diff --git a/src/aoWebWallet/Shared/AddUploadWalletComponent.razor b/src/aoWebWallet/Shared/AddUploadWalletComponent.razor
@@ -6,11 +6,9 @@
 
 <MudPaper Class="pa-8">
     <MudStack Spacing="2">
-        <MudButton OnClick="OnExpandCollapseClick">@(IsExpanded ? "Load .json wallet" : "Load .json wallet")</MudButton>
-        <MudDivider />
-        <MudCollapse Expanded="IsExpanded">
-
-            <MudStack Style="width: 100%">
+        @* <MudText Class="d-flex justify-center" Typo="Typo.button">Load .json wallet</MudText>
+            <MudDivider /> *@
+            <MudStack Class="d-w-100">
                 <MudFileUpload T="IReadOnlyList<IBrowserFile>"
                                Accept=".json"
                                OnFilesChanged="OnInputFileChanged"
@@ -25,7 +23,7 @@
                                   Outlined="true"
                                   Class="@_dragClass">
                             <MudText Typo="Typo.h6">
-                                Drag and drop wallet file or click here. 
+                                Drag and drop wallet file or click here.
                             </MudText>
                             <MudText Typo="Typo.subtitle1">
                                 Your files won't be uploaded and are only read by the local app.
@@ -59,8 +57,6 @@
                     </ButtonTemplate>
                 </MudFileUpload>
             </MudStack>
-
-        </MudCollapse>
     </MudStack>
 </MudPaper>
 

diff --git a/src/aoWebWallet/Shared/AddWalletComponent.razor b/src/aoWebWallet/Shared/AddWalletComponent.razor
@@ -5,19 +5,15 @@
 
 <MudPaper Class="pa-8">
     <MudStack Spacing="2">
-        <MudButton OnClick="OnExpandCollapseClick">@(IsExpanded ? "Add read-only wallet" : "Add read-only wallet")</MudButton>
-        <MudDivider />
-        <MudCollapse Expanded="IsExpanded">
-            <MudTextField @bind-Value="Address" MaxLength=43 Label="Wallet Address" Variant="Variant.Text"></MudTextField>
-            <MudTextField @bind-Value="Name" Label="Name (optional)" Variant="Variant.Text"></MudTextField>
-            <MudText Color="Color.Secondary">@Progress</MudText>
-            @if (!HideAddButton)
-            {
-                <div style="width:100%;">
-                    <MudButton style="margin-top:10px; display:flex; margin-left:auto;" Color="Color.Primary" OnClick="Submit">Add</MudButton>
-                </div>
-            }
-        </MudCollapse>
+        <MudTextField @bind-Value="Address" MaxLength=43 Label="Wallet Address" Variant="Variant.Text"></MudTextField>
+        <MudTextField @bind-Value="Name" Label="Wallet Name" Variant="Variant.Text"></MudTextField>
+        <MudText Color="Color.Secondary">@Progress</MudText>
+
+        <div Class="d-w-100 d-flex justify-end mt-2">
+            <MudButton OnClick="Submit"  Color="Color.Primary" Variant="Variant.Filled">
+                Add Custom Wallet
+            </MudButton>
+        </div>
     </MudStack>
 </MudPaper>
 

diff --git a/src/aoWebWallet/Shared/AddWalletDialog.razor b/src/aoWebWallet/Shared/AddWalletDialog.razor
@@ -6,15 +6,22 @@
 
 <MudDialog>
     <DialogContent>
-        <AddArConnectComponent></AddArConnectComponent>
-        <AddUploadWalletComponent></AddUploadWalletComponent>
-        <AddGenerateWalletComponent></AddGenerateWalletComponent>
-        <AddWalletComponent @ref="addWalletRef" HideAddButton="true"></AddWalletComponent>
+        <MudDivider Class="mb-5" />
+        <MudTabs Elevation="0" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
+            <MudTabPanel Text="New wallet">
+                <AddGenerateWalletComponent></AddGenerateWalletComponent>
+            </MudTabPanel>
+            <MudTabPanel Text="ArConnect">
+                <AddArConnectComponent></AddArConnectComponent>
+            </MudTabPanel>
+            <MudTabPanel Text="Load .json">
+                <AddUploadWalletComponent></AddUploadWalletComponent>
+            </MudTabPanel>
+            <MudTabPanel Text="Read-only" >
+                <AddWalletComponent @ref="addWalletRef" HideAddButton="true"></AddWalletComponent>
+            </MudTabPanel>
+        </MudTabs>
     </DialogContent>
-    <DialogActions>
-        <MudButton OnClick="Cancel">Cancel</MudButton>
-        <MudButton Color="Color.Primary" OnClick="Submit">Ok</MudButton>
-    </DialogActions>
 </MudDialog>
 @code {
     [CascadingParameter] MudDialogInstance MudDialog { get; set; } = default!;
@@ -40,4 +47,4 @@
 
     //void Submit() => MudDialog.Close(DialogResult.Ok(true));
     void Cancel() => MudDialog.Cancel();
-}
+}
diff --git a/src/aoWebWallet/wwwroot/css/app.css b/src/aoWebWallet/wwwroot/css/app.css
@@ -211,12 +211,24 @@ button.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.copy-clipboard
     max-width: 100%;
 }
 
+.d-w-100 {
+    width: 100%;
+}
+
 .d-icon-wallet {
     margin-left:2px;
     width:20px;
     padding-bottom:4px;
 }
 
+.d-font-weight-500 {
+    font-weight: 500 !important;
+}
+
+.d-overflow-hidden {
+    overflow: hidden;
+}
+
 .d-custom-1 {
     width:222px;
     display:flex;
@@ -230,11 +242,29 @@ button.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.copy-clipboard
     white-space: nowrap;
 }
 
-.d-font-weight-500 {
-    font-weight: 500 !important;
+.d-custom-3 {
+    margin-top:10px;
+    display:flex;
+    margin-left:auto;
 }
 
-.d-overflow-hidden {
-    overflow: hidden;
+.d-custom-4 {
+    width:100%;
+    margin-left:5px;
+    display: flex;
+    align-items:center;
+    padding:8px;
 }
 
+.d-custom-5 {
+    width:31px;
+    height:31px;
+}
+
+.d-custom-6 {
+    border-radius:22px;
+    width:100%;
+    margin-top:5px;
+    display: flex;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
+}