Deposit UI random embellishments

cardano-foundation · Sep 20, 2024 · 491824d · 491824d
1 parent 53723c3
commit 491824d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 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
@@ -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
@@ -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
@@ -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