Merge branch 'main' of https://github.com/block-core/angor

src/Angor/Avalonia/AngorApp/AngorApp.csproj

@@ -23,6 +23,7 @@
             <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
         </PackageReference>
         <PackageReference Include="Avalonia.Xaml.Behaviors"/>
+        <PackageReference Include="Humanizer.Core" />
         <PackageReference Include="Projektanker.Icons.Avalonia.FontAwesome"/>
         <PackageReference Include="ReactiveUI"/>
         <PackageReference Include="ReactiveUI.SourceGenerators">
@@ -33,5 +34,4 @@
 
     </ItemGroup>
 
-
 </Project>

src/Angor/Avalonia/AngorApp/App.axaml

@@ -2,7 +2,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:local="using:AngorApp"
              x:Class="AngorApp.App"
-             RequestedThemeVariant="Default">
+             RequestedThemeVariant="Light">
     <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
 
     <Application.DataTemplates>
@@ -13,10 +13,11 @@
 
     <Application.Styles>
         <FluentTheme />
+        <StyleInclude Source="avares://Zafiro.Avalonia/Styles.axaml" />
         <StyleInclude Source="Styles.axaml" />
         <StyleInclude Source="avares://AsyncImageLoader.Avalonia/AdvancedImage.axaml" />
         <StyleInclude Source="Controls/Pane.axaml" />
-        <StyleInclude Source="avares://Zafiro.Avalonia/Styles.axaml" />
+
     </Application.Styles>
 
     <Application.Resources>

src/Angor/Avalonia/AngorApp/Controls/MiscConverters.cs

@@ -1,6 +1,8 @@
 using AngorApp.Sections.Shell;
 using Avalonia;
 using Avalonia.Data.Converters;
+using Humanizer;
+using Humanizer.DateTimeHumanizeStrategy;
 using Projektanker.Icons.Avalonia;
 using Separator = AngorApp.Sections.Shell.Separator;
 
@@ -33,4 +35,9 @@ public static class MiscConverters
     public static readonly FuncValueConverter<SectionBase, bool> IsActivatable = new(sectionBase => sectionBase is not Separator);
 
     public static readonly FuncValueConverter<bool, Dock> IsPrimaryToDock = new(isPrimary => isPrimary ? Dock.Top : Dock.Bottom);
+    public static readonly FuncValueConverter<DateTimeOffset, string> TimeLeft = new(offset =>
+    {
+        Humanizer.Configuration.Configurator.DateTimeHumanizeStrategy = new DefaultDateTimeHumanizeStrategy();
+        return offset.Humanize(dateToCompareAgainst: DateTimeOffset.Now);
+    });
 }

src/Angor/Avalonia/AngorApp/Sections/Browse/Details/IProjectDetailsViewModel.cs

@@ -6,4 +6,13 @@ public interface IProjectDetailsViewModel : IProject
     string ShortDescription { get; }
     object Icon { get; }
     object Picture { get; }
+    public IEnumerable<Stage> Stages { get; }
+}
+
+public class Stage
+{
+    public int Index { get; set; }
+    public double Weight { get; set; }
+    public DateTimeOffset ReleaseDate { get; set; }
+    public decimal Amount { get; set; }
 }

src/Angor/Avalonia/AngorApp/Sections/Browse/Details/ProjectDetailsView.axaml

@@ -3,28 +3,22 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:details="clr-namespace:AngorApp.Sections.Browse.Details"
-             xmlns:angorApp="clr-namespace:AngorApp"
              xmlns:controls="clr-namespace:AngorApp.Controls"
              xmlns:a="https://github.com/projektanker/icons.avalonia"
+             xmlns:z="clr-namespace:Zafiro.Avalonia.Controls.SlimDataGrid;assembly=Zafiro.Avalonia"
              mc:Ignorable="d" d:DesignWidth="1200"
              x:Class="AngorApp.Sections.Browse.Details.ProjectDetailsView" x:DataType="details:IProjectDetailsViewModel" ClipToBounds="False">
 
     <Design.DataContext>
         <details:ProjectDetailsViewModelDesign />
     </Design.DataContext>
 
-    <UserControl.Styles>
-        <!-- <Style Selector="controls|SectionItem.Accent /template/ContentPresenter#PART_Content TextBlock"> -->
-        <!--     <Setter Property="Theme" Value="{StaticResource Highlighted}" /> -->
-        <!-- </Style> -->
-    </UserControl.Styles>
-
     <Grid ColumnDefinitions="1* 5* 1*">
         <StackPanel Grid.Column="1" Spacing="20">
             <controls:Pane IsHeaderVisible="True" IsTitleVisible="True"
                            HeaderHeight="300"
                            HeaderIcon="{Binding Icon}"
-                           HeaderBackground="{Binding Picture}" 
+                           HeaderBackground="{Binding Picture}"
                            Title="{Binding Name}">
                 <controls:Pane.TitleIcon>
                     <a:Icon Value="fa-solid fa-tarp" />
@@ -50,6 +44,17 @@
                 <controls:Pane.TitleIcon>
                     <a:Icon Value="fa-solid fa-timeline" />
                 </controls:Pane.TitleIcon>
+
+                <z:SlimDataGrid ItemsSource="{Binding Stages}">
+                    <z:SlimDataGrid.Columns>
+                        <z:Column Header="STAGE" Binding="{Binding Index}" />
+                        <z:Column Header="STAGE %" Binding="{Binding Weight, StringFormat={}{0:P0}}" />
+                        <z:Column Header="RELEASE DATE" Binding="{Binding ReleaseDate, StringFormat=d}" />
+                        <z:Column Header="DAYS UNTIL STAGE" Binding="{Binding ReleaseDate, Converter={x:Static controls:MiscConverters.TimeLeft}}" />
+                        <z:Column Header="AMOUNT PER STAGE" Binding="{Binding Amount, StringFormat={}{0} TBTC}" />
+                    </z:SlimDataGrid.Columns>
+                </z:SlimDataGrid>
+
             </controls:Pane>
         </StackPanel>
     </Grid>

src/Angor/Avalonia/AngorApp/Sections/Browse/Details/ProjectDetailsViewModel.cs

@@ -6,4 +6,5 @@ public class ProjectDetailsViewModel(Project project) : ReactiveObject, IProject
     public string ShortDescription => project.ShortDescription;
     public object Icon => project.Icon;
     public object Picture => project.Picture;
+    public IEnumerable<Stage> Stages { get; }
 }

src/Angor/Avalonia/AngorApp/Sections/Browse/Details/ProjectDetailsViewModelDesign.cs

@@ -12,4 +12,12 @@ public ProjectDetailsViewModelDesign()
     public string ShortDescription { get; } = "Test Project";
     public object Icon { get; }
     public object Picture { get; }
+
+    public IEnumerable<Stage> Stages { get; } =
+    [
+        new() { ReleaseDate = DateTimeOffset.Now.Date.AddDays(1), Amount = new decimal(0.1), Index = 1, Weight = 0.25d },
+        new() { ReleaseDate = DateTimeOffset.Now.Add(TimeSpan.FromDays(20)), Amount = new decimal(0.4), Index = 2, Weight = 0.25d },
+        new() { ReleaseDate = DateTimeOffset.Now.Add(TimeSpan.FromDays(40)), Amount = new decimal(0.3), Index = 3, Weight = 0.25d },
+        new() { ReleaseDate = DateTimeOffset.Now.Add(TimeSpan.FromDays(60)), Amount = new decimal(0.2), Index = 4, Weight = 0.25d },
+    ];
 }

src/Angor/Avalonia/AngorApp/Sections/Wallet/WalletView.axaml

@@ -4,19 +4,26 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:i="https://github.com/projektanker/icons.avalonia"
              xmlns:controls="clr-namespace:AngorApp.Controls"
+             xmlns:wallet="clr-namespace:AngorApp.Sections.Wallet"
+             xmlns:z="clr-namespace:Zafiro.Avalonia.Controls.SlimDataGrid;assembly=Zafiro.Avalonia"
              mc:Ignorable="d" d:DesignWidth="800"
-             x:Class="AngorApp.Sections.Wallet.WalletView" ClipToBounds="False">
+             x:Class="AngorApp.Sections.Wallet.WalletView" ClipToBounds="False" x:DataType="wallet:IWalletViewModel">
+
+    <Design.DataContext>
+        <wallet:WalletViewModelDesign />
+    </Design.DataContext>
+
+    <UserControl.DataContext>
+        <wallet:WalletViewModelDesign />
+    </UserControl.DataContext>
 
     <UserControl.Styles>
-        
+
         <Style Selector="TextBox">
             <Setter Property="BorderThickness" Value="1" />
             <Setter Property="BorderBrush" Value="{StaticResource Level3}" />
         </Style>
-
-        <Style Selector="i|Icon">
-            <Setter Property="FontSize" Value="25" />
-        </Style>
+
         <Style Selector="Button">
             <Setter Property="CornerRadius" Value="10" />
             <Setter Property="Padding" Value="10" />
@@ -31,12 +38,12 @@
     </UserControl.Styles>
 
     <DockPanel>
-        
+
         <!-- Main Content Area -->
         <StackPanel Spacing="20">
 
             <!-- Wallet Section -->
-            <controls:Pane IsTitleVisible="True" Title="Wallet" 
+            <controls:Pane IsTitleVisible="True" Title="Wallet"
                            Subtitle="Wallet and balances">
                 <controls:Pane.TitleRightContent>
                     <Button Content="Wallet Words" DockPanel.Dock="Right" />
@@ -46,15 +53,17 @@
                 </controls:Pane.TitleIcon>
             </controls:Pane>
 
-            <controls:Pane>
-                <DockPanel>
-                    <i:Icon Value="fa-database" Margin="10"></i:Icon>
-                    <Button DockPanel.Dock="Right" i:Attached.Icon="fa-rotate" />
-                    <StackPanel Orientation="Horizontal" Spacing="10">
-                        <TextBlock  Text="0 TBTC" FontSize="18" FontWeight="Bold" />
+            <controls:Pane IsTitleVisible="True" Title="0 TBTC">
+                <controls:Pane.TitleRightContent>
+                    <StackPanel Orientation="Horizontal" Spacing="20">
                         <Button Content="Get Some Test Coins" />
+                        <Button DockPanel.Dock="Right" i:Attached.Icon="fa-rotate" />
                     </StackPanel>
-                </DockPanel>
+                </controls:Pane.TitleRightContent>
+                <controls:Pane.TitleIcon>
+                    <i:Icon Value="fa-database" Margin="10"></i:Icon>
+                </controls:Pane.TitleIcon>
+
             </controls:Pane>
 
             <!-- Actions (Send/Receive) -->
@@ -79,9 +88,11 @@
 
 
             <!-- Send Section -->
-            <controls:Pane>
+            <controls:Pane IsTitleVisible="True" Title="Send">
+                <controls:Pane.TitleIcon>
+                    <i:Icon Value="fa-solid fa-angle-right" />
+                </controls:Pane.TitleIcon>
                 <StackPanel Spacing="10">
-                    <TextBlock  Text="Send" />
                     <StackPanel Spacing="10">
                         <TextBox Classes="clearButton" Watermark="Enter address" MaxWidth="300" AcceptsReturn="False">
                             <TextBox.InnerLeftContent>
@@ -96,31 +107,33 @@
                     </StackPanel>
                 </StackPanel>
             </controls:Pane>
-            <controls:Pane>
-                <DockPanel>
-                    <DockPanel DockPanel.Dock="Top">
-                        <i:Icon Value="fa-solid fa-cube" Margin="10" />
-                        <TextBlock >Addresses and amounts</TextBlock>
-                    </DockPanel>
-                    <Border Padding="15" Margin="10" BorderBrush="{StaticResource Level3}" BorderThickness="1" CornerRadius="8">
-                        <Border.Styles>
-                            <Style Selector="TextBlock">
-                                <Setter Property="Foreground" Value="Gray"></Setter>
-                                <Setter Property="FontSize" Value="16" />
-                                <Setter Property="TextAlignment" Value="Left" />
-                                <Setter Property="FontWeight" Value="Bold" />
-                            </Style>
-                        </Border.Styles>
-                        <Grid ColumnDefinitions="* * * * *">
-                            <TextBlock>ADDRESS</TextBlock>
-                            <TextBlock Grid.Column="1">AMOUNT</TextBlock>
-                            <TextBlock Grid.Column="2">PATH</TextBlock>
-                            <TextBlock Grid.Column="3">UTXO COUNT</TextBlock>
-                            <TextBlock Grid.Column="4">VIEW RAW JSON</TextBlock>
-                        </Grid>
-                    </Border>
-                </DockPanel>
+
+            <controls:Pane IsTitleVisible="True" Title="Addresses and amounts">
+                <controls:Pane.TitleIcon>
+                    <i:Icon Value="fa-solid fa-cube" />
+                </controls:Pane.TitleIcon>
+
+                <z:SlimDataGrid Margin="10" ItemsSource="{Binding Wallet.History}">
+                    <z:SlimDataGrid.Columns>
+                        <z:Column Header="ADDRESS" Binding="{Binding Address}" />
+                    </z:SlimDataGrid.Columns>
+                    <z:SlimDataGrid.Columns>
+                        <z:Column Header="AMOUNT" Binding="{Binding Amount}" />
+                    </z:SlimDataGrid.Columns>
+                    <z:SlimDataGrid.Columns>
+                        <z:Column Header="PATH" Binding="{Binding Path}" />
+                    </z:SlimDataGrid.Columns>
+                    <z:SlimDataGrid.Columns>
+                        <z:Column Header="UTXO COUNT" Binding="{Binding UtxoCount}" />
+                    </z:SlimDataGrid.Columns>
+                    <z:SlimDataGrid.Columns>
+                        <z:Column Header="VIEW RAW JSON" Binding="{Binding ViewRawJson}" />
+                    </z:SlimDataGrid.Columns>
+
+
+                </z:SlimDataGrid>
             </controls:Pane>
+
         </StackPanel>
     </DockPanel>
 

src/Angor/Avalonia/AngorApp/Sections/Wallet/WalletViewModel.cs

@@ -1,5 +1,57 @@
+using System.Collections.ObjectModel;
+
 namespace AngorApp.Sections.Wallet;
 
-public class WalletViewModel : ReactiveObject
+public class WalletViewModel : ReactiveObject, IWalletViewModel
+{
+    public IWallet Wallet { get; set; }
+}
+
+public interface IWalletViewModel
+{
+    public IWallet Wallet { get; set; }
+}
+
+public class WalletViewModelDesign : IWalletViewModel
+{
+    public IWallet Wallet { get; set; } = new WalletDesign();
+}
+
+public class WalletDesign : IWallet
+{
+    public IEnumerable<ITransaction> History { get; } =
+    [
+        new TransactionDesign() { Address = "someaddress1", Amount = 0.0001m, UtxoCount = 12, Path = "path", ViewRawJson = "json"}, 
+        new TransactionDesign() { Address = "someaddress2", Amount = 0.0003m, UtxoCount = 15, Path = "path", ViewRawJson = "json"},
+        new TransactionDesign() { Address = "someaddress3", Amount = 0.0042m, UtxoCount = 15, Path = "path", ViewRawJson = "json"},
+        new TransactionDesign() { Address = "someaddress4", Amount = 0.00581m, UtxoCount = 15, Path = "path", ViewRawJson = "json"},
+    ];
+}
+
+public class TransactionDesign : ITransaction
+{
+    public string Address { get; set; }
+    public decimal Amount { get; set; }
+    public string Path { get; set; }
+    public int UtxoCount { get; set; }
+    public string ViewRawJson { get; set; }
+}
+
+public interface IWallet
+{
+    public IEnumerable<ITransaction> History { get; }
+}
+
+public class WalletModel : IWallet
+{
+    public IEnumerable<ITransaction> History { get; }
+}
+
+public interface ITransaction
 {
+    public string Address { get; }
+    public decimal Amount { get; }
+    public string Path { get; }
+    public int UtxoCount { get; }
+    public string ViewRawJson { get; }
 }

src/Angor/Avalonia/AngorApp/Styles.axaml

@@ -1,7 +1,7 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:c="clr-namespace:AngorApp.Controls"
-        xmlns:avalonia="https://github.com/projektanker/icons.avalonia">
+        xmlns:avalonia="https://github.com/projektanker/icons.avalonia"
+        xmlns:z="clr-namespace:Zafiro.Avalonia.Controls.SlimDataGrid;assembly=Zafiro.Avalonia">
 
     <Styles.Resources>
         <Color x:Key="Level1">#F5FDFF</Color>
@@ -24,6 +24,21 @@
         <ControlTheme x:Key="Highlighted" TargetType="TextBlock" BasedOn="{StaticResource Regular}">
             <Setter Property="Foreground" Value="Orange" />
         </ControlTheme>
+
+        <ControlTheme x:Key="{x:Type z:SlimDataGrid}" TargetType="z:SlimDataGrid" BasedOn="{StaticResource {x:Type z:SlimDataGrid}}">
+            <Setter Property="Background" Value="{StaticResource Level1}" />
+            <Setter Property="HeaderPadding" Value="10" />
+            <Setter Property="CornerRadius" Value="10" />
+            <Setter Property="BorderThickness" Value="1" />
+            <Setter Property="BorderBrush" Value="{StaticResource Level3}" />
+            <Setter Property="RowTheme">
+                <ControlTheme TargetType="z:Row" BasedOn="{StaticResource {x:Type z:Row}}">
+                    <Setter Property="BorderThickness" Value="0 1 0 0" />
+                    <Setter Property="BorderBrush" Value="{StaticResource Level3}" />
+                    <Setter Property="Padding" Value="10 10" />
+                </ControlTheme>
+            </Setter>
+        </ControlTheme>
 
     </Styles.Resources>
 
@@ -36,8 +51,6 @@
         <Setter Property="Foreground" Value="{StaticResource Level5}" />
     </Style>
 
-
-
     <Design.PreviewWith>
         <Border Padding="20">
             <StackPanel>