add token currencies to stats page (#382)

graphsense · Dec 7, 2023 · 7c799ed · 7c799ed
1 parent 42168c5
commit 7c799ed
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 18 deletions.
diff --git a/src/Css/Stats.elm b/src/Css/Stats.elm
@@ -1,5 +1,6 @@
 module Css.Stats exposing (..)
 
+import Color exposing (black)
 import Config.View exposing (Config)
 import Css exposing (..)
 
@@ -68,6 +69,20 @@ statsTableCellKey vc =
         ++ vc.theme.stats.tableCellKey
 
 
+statsBadge : Config -> List Style
+statsBadge vc =
+    [ px 5 |> marginRight
+    , px 2 |> paddingLeft
+    , px 2 |> paddingRight
+    , px 1 |> paddingTop
+    , px 1 |> paddingBottom
+
+    --, px 3 |> borderRadius
+    , textAlign center
+    ]
+        ++ vc.theme.stats.tokenBadgeStyle vc.lightmode
+
+
 currencyBackground : Config -> List Style
 currencyBackground vc =
     [ position absolute

diff --git a/src/Theme/Stats.elm b/src/Theme/Stats.elm
@@ -17,6 +17,7 @@ type alias Stats =
     , currencyBackground : List Style
     , currencyBackgroundPath : List Style
     , loadingSpinner : List Style
+    , tokenBadgeStyle : Bool -> List Style
     }
 
 
@@ -35,4 +36,5 @@ default =
     , currencyBackground = []
     , currencyBackgroundPath = []
     , loadingSpinner = []
+    , tokenBadgeStyle = \_ -> []
     }
diff --git a/src/View/Main.elm b/src/View/Main.elm
@@ -26,7 +26,7 @@ view plugins vc model =
                 |> main_ vc
 
         Stats ->
-            Stats.stats vc model.stats
+            Stats.stats vc model.stats model.supportedTokens
 
         Graph ->
             Graph.view plugins model.plugins vc model.graph

diff --git a/src/View/Stats.elm b/src/View/Stats.elm
@@ -4,7 +4,7 @@ import Api.Data
 import Config.View exposing (Config)
 import Css.Stats as Css
 import Css.View
-import Dict
+import Dict exposing (Dict)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (..)
 import Http
@@ -19,8 +19,8 @@ import View.CurrencyMeta exposing (currencies)
 import View.Locale as Locale
 
 
-stats : Config -> WebData Api.Data.Stats -> Html msg
-stats vc sts =
+stats : Config -> WebData Api.Data.Stats -> Dict String Api.Data.TokenConfigs -> Html msg
+stats vc sts tokens =
     div
         [ Css.root vc |> css ]
         [ h2
@@ -33,7 +33,7 @@ stats vc sts =
                 { onFailure = statsLoadFailure vc
                 , onNotAsked = text ""
                 , onLoading = statsLoading vc
-                , onSuccess = statsLoaded vc
+                , onSuccess = statsLoaded vc tokens
                 }
         ]
 
@@ -48,16 +48,26 @@ statsLoading vc =
     Util.View.loadingSpinner vc Css.loadingSpinner
 
 
-statsLoaded : Config -> Api.Data.Stats -> Html msg
-statsLoaded vc sts =
+statsLoaded : Config -> Dict String Api.Data.TokenConfigs -> Api.Data.Stats -> Html msg
+statsLoaded vc tokens sts =
     sts.currencies
-        |> List.map (currency vc)
+        |> List.map (\v -> currency vc v (Dict.get v.name tokens))
         |> div
             [ Css.stats vc |> css ]
 
 
-currency : Config -> Api.Data.CurrencyStats -> Html msg
-currency vc cs =
+supportedTokens : Api.Data.TokenConfigs -> List String
+supportedTokens configs =
+    configs.tokenConfigs |> List.map (.ticker >> String.toUpper)
+
+
+supportedTokensRow : Config -> Maybe Api.Data.TokenConfigs -> List (Html msg)
+supportedTokensRow vc tokens =
+    tokens |> Maybe.map (supportedTokens >> statsRowBadge vc "Supported tokens" >> List.singleton) |> Maybe.withDefault []
+
+
+currency : Config -> Api.Data.CurrencyStats -> Maybe Api.Data.TokenConfigs -> Html msg
+currency vc cs tokens =
     div
         [ Css.currency vc |> css
         ]
@@ -78,21 +88,23 @@ currency vc cs =
                 [ div
                     [ Css.statsTable vc |> css
                     ]
-                    [ Locale.timestamp vc.locale cs.timestamp
+                    ([ Locale.timestamp vc.locale cs.timestamp
                         |> statsRow vc "Last update"
-                    , Locale.intWithoutValueDetailFormatting vc.locale (cs.noBlocks - 1)
+                     , Locale.intWithoutValueDetailFormatting vc.locale (cs.noBlocks - 1)
                         |> statsRow vc "Latest block"
-                    , Locale.intWithoutValueDetailFormatting vc.locale cs.noTxs
+                     , Locale.intWithoutValueDetailFormatting vc.locale cs.noTxs
                         |> statsRow vc "Transactions"
-                    , Locale.intWithoutValueDetailFormatting vc.locale cs.noAddresses
+                     , Locale.intWithoutValueDetailFormatting vc.locale cs.noAddresses
                         |> statsRow vc "Addresses"
-                    , Locale.intWithoutValueDetailFormatting vc.locale cs.noEntities
+                     , Locale.intWithoutValueDetailFormatting vc.locale cs.noEntities
                         |> statsRow vc "Entities"
-                    , Locale.intWithoutValueDetailFormatting vc.locale cs.noLabels
+                     , Locale.intWithoutValueDetailFormatting vc.locale cs.noLabels
                         |> statsRow vc "Labels"
-                    , taggedAddressesWithPercentage vc cs
+                     , taggedAddressesWithPercentage vc cs
                         |> statsRow vc "Tagged addresses"
-                    ]
+                     ]
+                        ++ supportedTokensRow vc tokens
+                    )
                 ]
             , div
                 [ Css.currencyBackground vc |> css
@@ -136,6 +148,23 @@ statsRow vc label value =
         ]
 
 
+statsRowBadge : Config -> String -> List String -> Html msg
+statsRowBadge vc label values =
+    div
+        [ Css.statsTableRow vc |> css
+        ]
+        [ span
+            [ Css.statsTableCellKey vc |> css
+            ]
+            [ Locale.text vc.locale label
+            ]
+        , span
+            [ Css.statsTableCellValue vc |> css
+            ]
+            (values |> List.map (\x -> span [ Css.statsBadge vc |> css ] [ text x ]))
+        ]
+
+
 taggedAddressesWithPercentage : Config -> Api.Data.CurrencyStats -> String
 taggedAddressesWithPercentage vc cs =
     Locale.intWithoutValueDetailFormatting vc.locale cs.noTaggedAddresses

diff --git a/themes/Iknaio.elm b/themes/Iknaio.elm
@@ -296,6 +296,21 @@ theme =
                         , borderRadiusSm
                         ]
                     )
+                |> s_tokenBadgeStyle
+                    (\lightmode ->
+                        [ 
+                        --backgroundColorWithLightmode lightmode colors.brandLightest
+                        borderColorWithLightmode lightmode colors.brandDark
+                        , borderRadius <| px 5
+                        , borderStyle solid
+                        , borderWidth (px 1)
+                        , px 5 |> marginRight
+                        , px 2 |> paddingLeft
+                        , px 2 |> paddingRight
+                        , px 1 |> paddingTop
+                        , px 1 |> paddingBottom
+                        ]
+                    )
                 |> s_currencyHeading
                     (\lightmode ->
                         [ backgroundColorWithLightmode lightmode colors.brandLight