From 491824d6a8340240b6bb68b04014989578fc4c43 Mon Sep 17 00:00:00 2001
From: paolino <paolo.veronelli@gmail.com>
Date: Fri, 20 Sep 2024 20:23:24 +0000
Subject: [PATCH] Deposit UI random embellishments

---
 lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Lib.hs      | 7 +++++++
 .../Cardano/Wallet/UI/Common/Html/Pages/Template/Head.hs   | 7 ++++++-
 lib/ui/src/Cardano/Wallet/UI/Deposit/Html/Pages/Wallet.hs  | 3 ++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Lib.hs b/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Lib.hs
index 701dc51923d..d4da2030248 100644
--- a/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Lib.hs
+++ b/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Lib.hs
@@ -21,6 +21,7 @@ module Cardano.Wallet.UI.Common.Html.Pages.Lib
     , showAda
     , showAdaOfLoveLace
     , showThousandDots
+    , fadeInId
     )
 where
 
@@ -58,6 +59,7 @@ import Lucid
     , id_
     , role_
     , scope_
+    , style_
     , table_
     , td_
     , tr_
@@ -132,6 +134,10 @@ fieldHtml as = field as . toHtml
 fieldShow :: (Show a, Monad m) => [Attribute] -> Text -> a -> ListOf (AssocRow m)
 fieldShow attrs key val = field attrs (toHtml key) (toHtml $ show val)
 
+fadeInId :: Monad m => HtmlT m ()
+fadeInId = style_ [] $ toHtml @Text
+    ".smooth.htmx-added { opacity: 0; } .smooth { opacity: 1; transition: opacity 1s ease-out; }"
+
 -- | A tag that can self populate with data that is fetched as GET from a link
 -- whenever some specific events are received from an SSE endpoint.
 -- It also self populate on load.
@@ -156,6 +162,7 @@ sseH link target events = do
                 [ id_ target
                 , hxGet_ $ linkText link
                 , hxTrigger_ "load"
+                , class_ "smooth"
                 ]
                 ""
   where
diff --git a/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Template/Head.hs b/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Template/Head.hs
index 8def455ed15..e56131cf4cf 100644
--- a/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Template/Head.hs
+++ b/lib/ui/src/Cardano/Wallet/UI/Common/Html/Pages/Template/Head.hs
@@ -16,6 +16,9 @@ import Cardano.Wallet.UI.Common.Html.Htmx
 import Cardano.Wallet.UI.Common.Html.Lib
     ( linkText
     )
+import Cardano.Wallet.UI.Common.Html.Pages.Lib
+    ( fadeInId
+    )
 import Data.Text
     ( Text
     )
@@ -109,7 +112,9 @@ pageFromBodyH faviconLink PageConfig{..} body =
                 favicon faviconLink
                 useHtmxVersion (1, 9, 12)
                 useHtmxExtension "json-enc"
-            body_ body
+            body_ $ do
+                fadeInId
+                body
 
 data PageConfig = PageConfig
     { prefix :: Text
diff --git a/lib/ui/src/Cardano/Wallet/UI/Deposit/Html/Pages/Wallet.hs b/lib/ui/src/Cardano/Wallet/UI/Deposit/Html/Pages/Wallet.hs
index 5ed2f185202..448850f03d2 100644
--- a/lib/ui/src/Cardano/Wallet/UI/Deposit/Html/Pages/Wallet.hs
+++ b/lib/ui/src/Cardano/Wallet/UI/Deposit/Html/Pages/Wallet.hs
@@ -130,7 +130,8 @@ instance Show WalletPresent where
     show WalletClosing = "WalletClosing"
 
 walletH :: WHtml ()
-walletH = sseH walletLink "wallet" ["wallet"]
+walletH = do
+    sseH walletLink "wallet" ["wallet"]
 
 base64 :: ByteString -> ByteString
 base64 = convertToBase Base64