transaction details responsiveness

michielpost · May 29, 2024 · 05b603a · 05b603a
1 parent 2e9be3a
commit 05b603a
Showing 1 changed file with 46 additions and 41 deletions.
diff --git a/src/aoWebWallet/Pages/TransactionDetail.razor b/src/aoWebWallet/Pages/TransactionDetail.razor
@@ -13,6 +13,8 @@
     <MudStack>
         <DataLoaderProgress DataLoader="BindingContext.SelectedTransaction.DataLoader" Title="transaction" />
 
+
+
         @if (BindingContext.SelectedTransaction.Data != null)
         {
             var transfer = BindingContext.SelectedTransaction.Data;
@@ -24,47 +26,50 @@
 
             var tokenData = dataService.TokenList.Where(x => x.TokenId == transfer.TokenId).Select(x => x.TokenData).FirstOrDefault();
 
-            <MudPaper Class="pa-4">
-                <MudStack Row=true>
-                    @if (transfer.BlockHeight.HasValue)
-                    {
-                        <MudText Typo="Typo.caption">@transfer.Timestamp.ToString("s")</MudText>
-                    }
-                    else
-                    {
-                        <MudText Typo="Typo.caption">unconfirmed</MudText>
-                    }
-
-                    @if (tokenData != null)
-                    {
-                        <MudAvatar Image="@UrlHelper.GetArweaveUrl(tokenData.Logo)" Size="Size.Large" title="@tokenData.TokenId" />
-                        <MudStack Justify="Justify.Center" Spacing="0">
-                            <MudText Typo="Typo.body1">@tokenData.Name</MudText>
-                            <MudText Typo="Typo.body2">@tokenData.Ticker</MudText>
-                        </MudStack>
-                    }
-
-                    @{
-                    string detailUrlFrom = $"wallet/{transfer.From}";
-                    string detailUrlTo = $"wallet/{transfer.To}";
-                    }
-
-                    <MudLink Class="KodeMono" style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden;" Href="@detailUrlFrom" Typo="Typo.h6">
-                        @transfer.From
-                    </MudLink>
-                    <MudIcon Icon="@Icons.Material.Filled.ArrowRight" aria-label="Receive"></MudIcon>
-
-                    <MudLink Class="KodeMono" style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden;" Href="@detailUrlTo" Typo="Typo.h6">
-                        @transfer.To
-                    </MudLink>
-
-                    @if (tokenData != null)
-                    {
-                        <MudText Typo="Typo.h5">@BalanceHelper.FormatBalance(transfer.Quantity, tokenData.Denomination ?? 0)</MudText>
-                    }
-
-                </MudStack>
-            </MudPaper>
+            <MudTimeline TimelinePosition="TimelinePosition.Left">
+                <MudTimelineItem>
+                    <ItemDot>
+                        <MudAvatar Image="@UrlHelper.GetArweaveUrl(tokenData?.Logo)" Size="Size.Medium" title="@tokenData?.TokenId" />
+                    </ItemDot>
+                    <ItemContent>
+                        @if (transfer.BlockHeight.HasValue)
+                        {
+                            <MudText Typo="Typo.caption">@transfer.Timestamp.ToString("s")</MudText>
+                        }
+                        else
+                        {
+                            <MudText Typo="Typo.caption">unconfirmed</MudText>
+                        }
+
+                        @if (tokenData != null)
+                        {
+                            <MudStack Justify="Justify.Center" Spacing="0">
+                                <MudText Typo="Typo.body1">@tokenData.Name</MudText>
+                                <MudText Typo="Typo.body2">@tokenData.Ticker</MudText>
+                            </MudStack>
+                        }
+
+                        @{
+                            string detailUrlFrom = $"wallet/{transfer.From}";
+                            string detailUrlTo = $"wallet/{transfer.To}";
+                        }
+
+                        <MudLink Class="KodeMono" style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden;" Href="@detailUrlFrom" Typo="Typo.h6">
+                            @transfer.From.ToShortAddress()
+                        </MudLink>
+                        <MudIcon Icon="@Icons.Material.Filled.ArrowRight" aria-label="Receive"></MudIcon>
+
+                        <MudLink Class="KodeMono" style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden;" Href="@detailUrlTo" Typo="Typo.h6">
+                            @transfer.To.ToShortAddress()
+                        </MudLink>
+
+                        @if (tokenData != null)
+                        {
+                            <MudText Typo="Typo.h5">@BalanceHelper.FormatBalance(transfer.Quantity, tokenData.Denomination ?? 0)</MudText>
+                        }
+                    </ItemContent>
+                </MudTimelineItem>
+            </MudTimeline>
         }
 
     </MudStack>