Skip to content

Commit

Permalink
[ADP-3456] Move address query UI in a separate page (#4788)
Browse files Browse the repository at this point in the history
This PR separates out the address query from the wallet details. This
makes the navigation bar depends on the resource state.

ADP-3456
  • Loading branch information
paolino authored Sep 26, 2024
2 parents cc68d3f + 2191cf2 commit 79830a3
Show file tree
Hide file tree
Showing 10 changed files with 288 additions and 114 deletions.
2 changes: 2 additions & 0 deletions lib/ui/cardano-wallet-ui.cabal
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,11 @@ library
Cardano.Wallet.UI.Common.Layer
Cardano.Wallet.UI.Cookies
Cardano.Wallet.UI.Deposit.API
Cardano.Wallet.UI.Deposit.Handlers.Addresses
Cardano.Wallet.UI.Deposit.Handlers.Lib
Cardano.Wallet.UI.Deposit.Handlers.Wallet
Cardano.Wallet.UI.Deposit.Html.Pages.About
Cardano.Wallet.UI.Deposit.Html.Pages.Addresses
Cardano.Wallet.UI.Deposit.Html.Pages.Page
Cardano.Wallet.UI.Deposit.Html.Pages.Wallet
Cardano.Wallet.UI.Deposit.Server
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ bodyH
-- ^ Body content
-> HtmlT m ()
bodyH sseLink header body = do
header
div_ [hxSse_ $ sseConnectFromLink sseLink] $
div_ [hxSse_ $ sseConnectFromLink sseLink] $ do
header
div_ [class_ "container-fluid"] $ do
div_ [class_ "main"] body
initClipboardScript
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Cardano.Wallet.UI.Common.Html.Lib
)
import Cardano.Wallet.UI.Deposit.API
( faviconLink
, homePageLink
)
import Control.Monad
( forM_
Expand Down Expand Up @@ -54,7 +55,7 @@ navElem
navElem prefix c p = a_ ([href_ $ prefix <> linkText p, class_ class'])
where
class' = baseClass <> " " <> if c then "active" else ""
baseClass = "nav-link ms-auto fs-3"
baseClass = "nav-link ms-auto fs-4 fs-5-md"

-- | Navigation bar definition.

Expand All @@ -70,7 +71,7 @@ navigationH prefix pages = do
nav_ [class_ "navbar navbar-expand-lg bg-body-tertiary mb-2"]
$ div_ [class_ "container-fluid"]
$ do
a_ [class_ "navbar-brand", href_ "/"]
a_ [class_ "navbar-brand", href_ $ linkText homePageLink]
$ img_ [src_ $ linkText faviconLink
, alt_ "Cardano Deposit Wallet"
, class_ "img-fluid"
Expand Down
47 changes: 43 additions & 4 deletions lib/ui/src/Cardano/Wallet/UI/Deposit/API.hs
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
{-# LANGUAGE DataKinds #-}
{-# LANGUAGE DuplicateRecordFields #-}
{-# LANGUAGE FlexibleContexts #-}
{-# LANGUAGE FlexibleInstances #-}
{-# LANGUAGE MultiParamTypeClasses #-}
{-# LANGUAGE NoMonomorphismRestriction #-}
{-# LANGUAGE PolyKinds #-}
{-# LANGUAGE RankNTypes #-}
{-# LANGUAGE ScopedTypeVariables #-}
{-# LANGUAGE TemplateHaskell #-}
{-# LANGUAGE TypeApplications #-}
{-# LANGUAGE TypeFamilies #-}
{-# LANGUAGE TypeOperators #-}
{-# OPTIONS_GHC -Wno-orphans #-}
{-# LANGUAGE FlexibleInstances #-}

module Cardano.Wallet.UI.Deposit.API where

Expand All @@ -36,15 +36,20 @@ import Cardano.Wallet.UI.Common.Handlers.SSE
import Cardano.Wallet.UI.Cookies
( CookieRequest
)
import Control.Lens
( makePrisms
)
import Servant
( Delete
, FormUrlEncoded
, FromHttpApiData (..)
, Get
, Link
, Post
, Proxy (..)
, QueryParam
, ReqBody
, ToHttpApiData (..)
, allLinks
, (:<|>) (..)
, (:>)
Expand All @@ -60,12 +65,37 @@ instance FromForm PostWalletViaMenmonic

instance FromForm PostWalletViaXPub

data Page
= About
| Network
| Settings
| Wallet
| Addresses

makePrisms ''Page

instance ToHttpApiData Page where
toUrlPiece About = "about"
toUrlPiece Network = "network"
toUrlPiece Settings = "settings"
toUrlPiece Wallet = "wallet"
toUrlPiece Addresses = "addresses"

instance FromHttpApiData Page where
parseUrlPiece "about" = Right About
parseUrlPiece "network" = Right Network
parseUrlPiece "settings" = Right Settings
parseUrlPiece "wallet" = Right Wallet
parseUrlPiece "addresses" = Right Addresses
parseUrlPiece _ = Left "Invalid page"

-- | Pages endpoints
type Pages =
"about" :> SessionedHtml Get
:<|> "network" :> SessionedHtml Get
:<|> "settings" :> SessionedHtml Get
:<|> "wallet" :> SessionedHtml Get
:<|> "addresses" :> SessionedHtml Get

-- | Data endpoints
type Data =
Expand All @@ -89,8 +119,12 @@ type Data =
:> SessionedHtml Post
:<|> "wallet" :> SessionedHtml Delete
:<|> "wallet" :> "delete" :> "modal" :> SessionedHtml Get
:<|> "customer" :> "address" :> ReqBody '[FormUrlEncoded] Customer
:<|> "customer"
:> "address"
:> ReqBody '[FormUrlEncoded] Customer
:> SessionedHtml Post
:<|> "addresses" :> SessionedHtml Get
:<|> "navigation" :> QueryParam "page" Page :> SessionedHtml Get

instance FromForm Customer where
fromForm form = fromIntegral @Int <$> parseUnique "customer" form
Expand All @@ -109,6 +143,7 @@ homePageLink :: Link
aboutPageLink :: Link
networkPageLink :: Link
settingsPageLink :: Link
addressesPageLink :: Link
networkInfoLink :: Link
settingsGetLink :: Link
settingsSseToggleLink :: Link
Expand All @@ -122,11 +157,14 @@ walletPostXPubLink :: Link
walletDeleteLink :: Link
walletDeleteModalLink :: Link
customerAddressLink :: Link
addressesLink :: Link
navigationLink :: Maybe Page -> Link
homePageLink
:<|> aboutPageLink
:<|> networkPageLink
:<|> settingsPageLink
:<|> walletPageLink
:<|> addressesPageLink
:<|> networkInfoLink
:<|> settingsGetLink
:<|> settingsSseToggleLink
Expand All @@ -139,5 +177,6 @@ homePageLink
:<|> walletDeleteLink
:<|> walletDeleteModalLink
:<|> customerAddressLink
=
:<|> addressesLink
:<|> navigationLink =
allLinks (Proxy @UI)
52 changes: 52 additions & 0 deletions lib/ui/src/Cardano/Wallet/UI/Deposit/Handlers/Addresses.hs
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{-# LANGUAGE LambdaCase #-}

module Cardano.Wallet.UI.Deposit.Handlers.Addresses
where

import Prelude

import Cardano.Wallet.Deposit.Pure
( Customer
)
import Cardano.Wallet.Deposit.Read
( Address
)
import Cardano.Wallet.Deposit.REST
( WalletResource
, customerAddress
)
import Cardano.Wallet.UI.Common.Layer
( SessionLayer (..)
)
import Cardano.Wallet.UI.Deposit.Handlers.Lib
( catchRunWalletResourceHtml
, walletPresence
)
import Cardano.Wallet.UI.Deposit.Html.Pages.Wallet
( WalletPresent
)
import Servant
( Handler
)

import qualified Data.ByteString.Lazy.Char8 as BL

getAddresses
:: SessionLayer WalletResource
-> (WalletPresent -> html) -- success report
-> Handler html
getAddresses layer render = render <$> walletPresence layer

getCustomerAddress
:: SessionLayer WalletResource
-> (Address -> html)
-> (BL.ByteString -> html)
-> Customer
-> Handler html
getCustomerAddress layer render alert customer = do
catchRunWalletResourceHtml layer alert render'
$ customerAddress customer
where
render' = \case
Just a -> render a
Nothing -> alert "Address not discovered"
19 changes: 0 additions & 19 deletions lib/ui/src/Cardano/Wallet/UI/Deposit/Handlers/Wallet.hs
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
{-# LANGUAGE LambdaCase #-}
{-# LANGUAGE NamedFieldPuns #-}

module Cardano.Wallet.UI.Deposit.Handlers.Wallet
Expand All @@ -12,13 +11,9 @@ import Cardano.Address.Derivation
import Cardano.Wallet.Deposit.Pure
( Customer
)
import Cardano.Wallet.Deposit.Read
( Address
)
import Cardano.Wallet.Deposit.REST
( WalletResource
, WalletResourceM
, customerAddress
)
import Cardano.Wallet.Deposit.REST.Wallet.Create
( PostWalletViaMenmonic (..)
Expand Down Expand Up @@ -122,17 +117,3 @@ deleteWalletHandler
-> Handler html
deleteWalletHandler layer deleteWallet alert render =
catchRunWalletResourceHtml layer alert render deleteWallet

getCustomerAddress
:: SessionLayer WalletResource
-> (Address -> html)
-> (BL.ByteString -> html)
-> Customer
-> Handler html
getCustomerAddress layer render alert customer = do
catchRunWalletResourceHtml layer alert render'
$ customerAddress customer
where
render' = \case
Just a -> render a
Nothing -> alert "Address not discovered"
114 changes: 114 additions & 0 deletions lib/ui/src/Cardano/Wallet/UI/Deposit/Html/Pages/Addresses.hs
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
{-# LANGUAGE FlexibleContexts #-}
{-# LANGUAGE LambdaCase #-}
{-# LANGUAGE ScopedTypeVariables #-}

module Cardano.Wallet.UI.Deposit.Html.Pages.Addresses
where

import Prelude

import Cardano.Wallet.Deposit.IO
( WalletPublicIdentity (..)
)
import Cardano.Wallet.Deposit.Read
( Address
)
import Cardano.Wallet.UI.Common.Html.Copy
( copyButton
, copyableHidden
)
import Cardano.Wallet.UI.Common.Html.Htmx
( hxPost_
, hxTarget_
, hxTrigger_
)
import Cardano.Wallet.UI.Common.Html.Lib
( linkText
)
import Cardano.Wallet.UI.Common.Html.Pages.Lib
( record
, simpleField
, sseH
)
import Cardano.Wallet.UI.Deposit.API
( addressesLink
, customerAddressLink
)
import Cardano.Wallet.UI.Deposit.Html.Pages.Wallet
( WalletPresent (..)
)
import Cardano.Wallet.UI.Lib.Address
( encodeMainnetAddress
)
import Cardano.Wallet.UI.Type
( WHtml
)
import Data.Text.Class
( ToText (..)
)
import Lucid
( Html
, HtmlT
, ToHtml (..)
, class_
, div_
, id_
, input_
, min_
, name_
, type_
, value_
)
import Lucid.Html5
( max_
, step_
)

import qualified Data.ByteString.Lazy.Char8 as BL
import qualified Data.Text as T

addressesH :: WHtml ()
addressesH = do
sseH addressesLink "addresses" ["wallet"]

customerAddressH :: Monad m => Address -> HtmlT m ()
customerAddressH addr = div_ [class_ "d-flex justify-content-end"] $ do
div_ (copyableHidden "address") $ toHtml encodedAddr
div_ [class_ "d-block d-md-none"] $ toHtml addrShortened
div_ [class_ "d-none d-md-block"] $ toHtml encodedAddr
div_ [class_ "ms-1"] $ copyButton "address"
where
encodedAddr = encodeMainnetAddress addr
addrShortened =
T.take 10 (T.drop 5 encodedAddr)
<> " .. "
<> T.takeEnd 10 encodedAddr

addressElementH :: (BL.ByteString -> Html ()) -> WalletPresent -> Html ()
addressElementH alert = \case
WalletPresent (WalletPublicIdentity _xpub customers) -> do
div_ [class_ "row mt-5"] $ do
div_ [class_ "col"] $ record $ do
simpleField "Customer Number"
$ input_
[ type_ "number"
, hxTarget_ "#customer-address"
, class_ "form-control"
, hxTrigger_ "load, change"
, hxPost_ $ linkText customerAddressLink
, min_ "0"
, max_ $ toText $ customers - 1
, step_ "1"
, name_ "customer"
, value_ "0"
, class_ "w-3"
]
simpleField "Address" $ div_ [id_ "customer-address"] mempty
WalletAbsent -> alert "Wallet is absent"
WalletFailedToInitialize err ->
alert
$ "Failed to initialize wallet"
<> BL.pack (show err)
WalletVanished e -> alert $ "Wallet vanished " <> BL.pack (show e)
WalletInitializing -> alert "Wallet is initializing"
WalletClosing -> alert "Wallet is closing"
Loading

0 comments on commit 79830a3

Please sign in to comment.