copy button next to addresses

michielpost · Mar 26, 2024 · 66ad570 · 66ad570
1 parent 83fec41
commit 66ad570
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/src/aoWebWallet/Pages/Wallets.razor b/src/aoWebWallet/Pages/Wallets.razor
@@ -21,10 +21,10 @@
     <DataLoaderProgress DataLoader="BindingContext.TokenList.DataLoader" Title="tokens" />
     <DataLoaderProgress DataLoader="BindingContext.WalletList.DataLoader" Title="wallets" />
 
-    <MudContainer style="max-width: 100%;"  Width="100%" Class="d-flex justify-end mb-4 pr-4">
+    <MudContainer style="max-width: 100%;"  Width="100%" Class="d-flex justify-end mb-4 pr-3">
             @if (BindingContext.WalletList.Data != null && BindingContext.WalletList.Data.Any())
                 {
-                    <MudIconButton Icon="@Icons.Material.Filled.AddCircle" aria-label="add wallet" OnClick="OpenDialog"></MudIconButton>
+                    <MudIconButton Icon="@Icons.Material.Filled.AddCircle" aria-label="add wallet" Size="Size.Large" OnClick="OpenDialog"></MudIconButton>
                 }
     </MudContainer>
 
@@ -43,10 +43,13 @@
                             <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;">
+                                    <MudLink Class="KodeMono" style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden;" Href="@detailUrl" Typo="Typo.h6">
+                                        @wallet.Address
+                                    </MudLink>
+                                    <MudIcon Class="copy-clipboard" Icon="@Icons.Material.Filled.ContentCopy" Color="Color.Default" />
+                                </div>
 
-                                <MudLink Class="KodeMono" style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden;" Href="@detailUrl" Typo="Typo.h6">
-                                    @wallet.Address
-                                </MudLink>
                                 <div style="display:flex; flex-direction:row;">
                                     @if (wallet.IsReadOnly)
                                     {
@@ -61,7 +64,7 @@
                             </MudStack>
                             <MudSpacer />
 
-                            <MudIconButton Icon="@Icons.Material.Filled.Delete" aria-label="delete" OnClick="() => { DeleteWallet(wallet); }"></MudIconButton>
+                            <MudIconButton Class="delete-address" Icon="@Icons.Material.Filled.Delete" aria-label="delete" OnClick="() => { DeleteWallet(wallet); }"></MudIconButton>
 
                         </MudStack>
                     </MudPaper>

diff --git a/src/aoWebWallet/wwwroot/css/app.css b/src/aoWebWallet/wwwroot/css/app.css
@@ -152,4 +152,28 @@ a, .btn-link {
 .margin-rewards-button {
     margin-top:5px;
 }
+.copy-clipboard {
+    position:relative;
+    margin-left:7px;
+    top: 5px;
+    cursor: pointer;
+    transition: transform .2s;
+    opacity: 0.5;
+}
+
+.copy-clipboard:hover {
+    transform: scale(1.051);
+    opacity: 1;
+}
+
+.mud-icon-button.delete-address {
+    opacity: 0.5;
+    padding-top: 0;
+    margin-top:-10px;
+    font-size: 2rem;
+}
+.mud-icon-button.delete-address .mud-icon-size-medium {
+    font-size: 1.7rem;
+}
+
 
diff --git a/src/aoWebWallet/wwwroot/index.html b/src/aoWebWallet/wwwroot/index.html
@@ -60,14 +60,14 @@
 <body>
     <div id="app">
         <div class="all-together-loading">
-            <img style="margin-bottom: 22px;" width="252px" src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzExLjU4IDI0MC45MiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+CiAgICA8Zz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjAgMjQwLjQ1IDgwLjIgMjQwLjQ1IDk2LjU3IDE5Ni4xOSA1OS43NCAxMjAuNzkgMCAyNDAuNDUiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjEyMy41NyAxLjEyIDk2LjU3IDYyLjYgMTgwLjg2IDI0MC40NSAyNDEuNTggMjQwLjQ1IDIxMi43NyAxODAuNjIgMTIzLjU3IDEuMTIiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9Ijc4NS4wMSA0Ni44NSA4MjEuODQgMTIyLjI2IDg4MS41OCAyLjU5IDgwMS4zOCAyLjU5IDc4NS4wMSA0Ni44NSIvPgogICAgICA8cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iNDcyIDEuMTIgNTAwLjggNjAuOTYgNTkwIDI0MC40NSA2MTcuMDEgMTc4Ljk4IDUzMi43MiAxLjEyIDQ3MiAxLjEyIi8+CiAgICAgIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSI3MTMuMzQgMS41OSA3MTMuNTggMS4xMiA2MzMuMzggMS4xMiA2MTcuMDEgNDUuMzggNjUzLjg0IDEyMC43OSA2ODIuNjQgNjMuMSA3NzEgMjQwLjkyIDc5OC4wMSAxNzkuNDUgNzEzLjcyIDEuNTkgNzEzLjM0IDEuNTkiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjEyMzEuMzggMi41OSAxMjE1LjAxIDQ2Ljg1IDEyNTEuODQgMTIyLjI2IDEzMTEuNTggMi41OSAxMjMxLjM4IDIuNTkiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjkwMiAxLjEyIDkzMC44IDYwLjk2IDEwMjAgMjQwLjQ1IDEwNDcuMDEgMTc4Ljk4IDk2Mi43MiAxLjEyIDkwMiAxLjEyIi8+CiAgICAgIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIxMTQzLjM0IDEuNTkgMTE0My41OCAxLjEyIDEwNjMuMzggMS4xMiAxMDQ3LjAxIDQ1LjM4IDEwODMuODQgMTIwLjc5IDExMTIuNjQgNjMuMSAxMjAxIDI0MC45MiAxMjI4LjAxIDE3OS40NSAxMTQzLjcyIDEuNTkgMTE0My4zNCAxLjU5Ii8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTM2MS44LDBjLTY2LjQsMC0xMjAuMjMsNTMuODMtMTIwLjIzLDEyMC4yM3M1My44MywxMjAuMjMsMTIwLjIzLDEyMC4yMywxMjAuMjMtNTMuODMsMTIwLjIzLTEyMC4yM1M0MjguMiwwLDM2MS44LDBabTAsMTkzLjI2Yy00MC4zNCwwLTczLjAzLTMyLjctNzMuMDMtNzMuMDNzMzIuNy03My4wMyw3My4wMy03My4wMyw3My4wMywzMi43LDczLjAzLDczLjAzLTMyLjcsNzMuMDMtNzMuMDMsNzMuMDNaIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4='/>
             <div class="circle-text">
                 <svg class="loading-progress">
                     <circle r="40%" cx="50%" cy="50%" />
                     <circle r="40%" cx="50%" cy="50%" />
                 </svg>
                 <div class="loading-progress-text"></div>
             </div>
+            <img style="margin-top: 22px;" width="262px" src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzExLjU4IDI0MC45MiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+CiAgICA8Zz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjAgMjQwLjQ1IDgwLjIgMjQwLjQ1IDk2LjU3IDE5Ni4xOSA1OS43NCAxMjAuNzkgMCAyNDAuNDUiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjEyMy41NyAxLjEyIDk2LjU3IDYyLjYgMTgwLjg2IDI0MC40NSAyNDEuNTggMjQwLjQ1IDIxMi43NyAxODAuNjIgMTIzLjU3IDEuMTIiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9Ijc4NS4wMSA0Ni44NSA4MjEuODQgMTIyLjI2IDg4MS41OCAyLjU5IDgwMS4zOCAyLjU5IDc4NS4wMSA0Ni44NSIvPgogICAgICA8cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iNDcyIDEuMTIgNTAwLjggNjAuOTYgNTkwIDI0MC40NSA2MTcuMDEgMTc4Ljk4IDUzMi43MiAxLjEyIDQ3MiAxLjEyIi8+CiAgICAgIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSI3MTMuMzQgMS41OSA3MTMuNTggMS4xMiA2MzMuMzggMS4xMiA2MTcuMDEgNDUuMzggNjUzLjg0IDEyMC43OSA2ODIuNjQgNjMuMSA3NzEgMjQwLjkyIDc5OC4wMSAxNzkuNDUgNzEzLjcyIDEuNTkgNzEzLjM0IDEuNTkiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjEyMzEuMzggMi41OSAxMjE1LjAxIDQ2Ljg1IDEyNTEuODQgMTIyLjI2IDEzMTEuNTggMi41OSAxMjMxLjM4IDIuNTkiLz4KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjkwMiAxLjEyIDkzMC44IDYwLjk2IDEwMjAgMjQwLjQ1IDEwNDcuMDEgMTc4Ljk4IDk2Mi43MiAxLjEyIDkwMiAxLjEyIi8+CiAgICAgIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIxMTQzLjM0IDEuNTkgMTE0My41OCAxLjEyIDEwNjMuMzggMS4xMiAxMDQ3LjAxIDQ1LjM4IDEwODMuODQgMTIwLjc5IDExMTIuNjQgNjMuMSAxMjAxIDI0MC45MiAxMjI4LjAxIDE3OS40NSAxMTQzLjcyIDEuNTkgMTE0My4zNCAxLjU5Ii8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTM2MS44LDBjLTY2LjQsMC0xMjAuMjMsNTMuODMtMTIwLjIzLDEyMC4yM3M1My44MywxMjAuMjMsMTIwLjIzLDEyMC4yMywxMjAuMjMtNTMuODMsMTIwLjIzLTEyMC4yM1M0MjguMiwwLDM2MS44LDBabTAsMTkzLjI2Yy00MC4zNCwwLTczLjAzLTMyLjctNzMuMDMtNzMuMDNzMzIuNy03My4wMyw3My4wMy03My4wMyw3My4wMywzMi43LDczLjAzLDczLjAzLTMyLjcsNzMuMDMtNzMuMDMsNzMuMDNaIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4='/>
         </div>
     </div>