Some refactoring ahead of implementing the new designs. (IntersectMBO…

…#3455) * Combining Play and ContractHome into Dashboard. * Moving part of the dashboard contract box view into Contract.View.
sarvex · Jun 30, 2021 · 0596b79 · 0596b79
1 parent cfaa143
commit 0596b79
Show file tree

Hide file tree

Showing 21 changed files with 395 additions and 527 deletions.
diff --git a/marlowe-dashboard-client/src/Capability/Marlowe.purs b/marlowe-dashboard-client/src/Capability/Marlowe.purs
@@ -177,7 +177,7 @@ instance monadMarloweAppM :: ManageMarlowe AppM where
               -- and you can have several follower apps (with different PlutusAppIds) all following the same contract
               -- (identified by its MarloweParams). For the LocalStorage simlation we just have one follower app for
               -- each contract, and make its PlutusAppId a function of the MarloweParams. I thought this would be
-              -- simpler, but it turned out to lead to a complication (see note [PendingContracts] in Play.State).
+              -- simpler, but it turned out to lead to a complication (see note [PendingContracts] in Dashboard.State).
               -- I'm not going to change it now though, because this LocalStorage stuff is temporary anyway, and will
               -- be removed when the PAB is working fully.
               mUuid = parseUUID marloweParams.rolePayoutValidatorHash

diff --git a/marlowe-dashboard-client/src/Contract/State.purs b/marlowe-dashboard-client/src/Contract/State.purs
@@ -19,6 +19,7 @@ import Contract.Lenses (_executionState, _followerAppId, _mMarloweParams, _named
 import Contract.Types (Action(..), Input, PreviousStep, PreviousStepState(..), State, Tab(..), scrollContainerRef)
 import Control.Monad.Reader (class MonadAsk, asks)
 import Control.Monad.Reader.Class (ask)
+import Dashboard.Types (Action(..)) as Dashboard
 import Data.Array (difference, filter, foldl, index, length, mapMaybe, modifyAt)
 import Data.Either (Either(..))
 import Data.Foldable (foldMap, for_)
@@ -54,7 +55,6 @@ import Marlowe.HasParties (getParties)
 import Marlowe.PAB (ContractHistory, PlutusAppId(..), MarloweParams)
 import Marlowe.Semantics (Contract(..), Party(..), Slot, SlotInterval(..), TransactionInput(..), _minSlot)
 import Marlowe.Semantics (Input(..), State(..)) as Semantic
-import Play.Types (Action(..)) as Play
 import Toast.Types (ajaxErrorToast, successToast)
 import WalletData.Lenses (_assets, _pubKeyHash, _walletInfo)
 import WalletData.State (adaToken)
@@ -249,7 +249,7 @@ handleAction input@{ currentSlot, walletDetails } (ConfirmAction namedAction) =
         assign _pendingTransaction $ Just txInput
         addToast $ successToast "Transaction submitted, awating confirmation."
         { dataProvider } <- ask
-        when (dataProvider == LocalStorage) (callMainFrameAction $ MainFrame.PlayAction $ Play.UpdateFromStorage)
+        when (dataProvider == LocalStorage) (callMainFrameAction $ MainFrame.DashboardAction $ Dashboard.UpdateFromStorage)
 
 handleAction _ (ChangeChoice choiceId chosenNum) = modifying _namedActions (map changeChoice)
   where
@@ -266,9 +266,9 @@ handleAction _ (SelectTab stepNumber tab) = do
     -- otherwise we update the tab of the current step
     Nothing -> assign _tab tab
 
-handleAction _ (AskConfirmation action) = pure unit -- Managed by Play.State
+handleAction _ (AskConfirmation action) = pure unit -- Managed by Dashboard.State
 
-handleAction _ CancelConfirmation = pure unit -- Managed by Play.State
+handleAction _ CancelConfirmation = pure unit -- Managed by Dashboard.State
 
 handleAction _ (SelectStep stepNumber) = assign _selectedStep stepNumber
 

diff --git a/marlowe-dashboard-client/src/Contract/View.purs b/marlowe-dashboard-client/src/Contract/View.purs
@@ -1,10 +1,11 @@
 module Contract.View
-  ( contractDetailsCard
+  ( contractInnerBox
+  , contractDetailsCard
   , actionConfirmationCard
   ) where
 
 import Prelude hiding (div)
-import Contract.Lenses (_executionState, _metadata, _namedActions, _nickname, _participants, _pendingTransaction, _previousSteps, _selectedStep, _tab, _userParties)
+import Contract.Lenses (_executionState, _mMarloweParams, _metadata, _namedActions, _nickname, _participants, _pendingTransaction, _previousSteps, _selectedStep, _tab, _userParties)
 import Contract.State (currentStep, isContractClosed)
 import Contract.Types (Action(..), PreviousStep, PreviousStepState(..), State, Tab(..), scrollContainerRef)
 import Css (applyWhen, classNames, toggleWhen)
@@ -21,7 +22,7 @@ import Data.Map (keys, lookup, toUnfoldable) as Map
 import Data.Maybe (Maybe(..), isJust, maybe, maybe')
 import Data.Set (Set)
 import Data.Set as Set
-import Data.String (take, trim)
+import Data.String (null, take, trim)
 import Data.String.Extra (capitalize)
 import Data.Tuple (Tuple(..), fst, uncurry)
 import Data.Tuple.Nested ((/\))
@@ -40,6 +41,39 @@ import Marlowe.Slot (secondsDiff, slotToDateTime)
 import Material.Icons (Icon(..), icon)
 import WalletData.State (adaToken, getAda)
 
+-- I'm moving this view here so that we can easily call Contract.Actions from inside it. I'm not
+-- actually calling any Contract.Actions from here yet, but that's a TODO for the next PR...
+contractInnerBox :: forall p. Slot -> State -> HTML p Action
+contractInnerBox currentSlot state =
+  let
+    nickname = state ^. _nickname
+
+    mMarloweParams = state ^. _mMarloweParams
+
+    stepNumber = currentStep state + 1
+
+    mNextTimeout = state ^. (_executionState <<< _mNextTimeout)
+
+    timeoutStr =
+      maybe'
+        (\_ -> if isContractClosed state then "Contract closed" else "Timed out")
+        (\nextTimeout -> humanizeDuration $ secondsDiff nextTimeout currentSlot)
+        mNextTimeout
+  in
+    div_
+      [ div
+          [ classNames [ "flex-1", "px-4", "py-2", "text-lg" ] ]
+          -- TODO: make (new) nicknames editable directly from here
+          [ text if null nickname then "My new contract" else nickname ]
+      , div
+          [ classNames [ "bg-lightgray", "flex", "flex-col", "px-4", "py-2" ] ] case mMarloweParams of
+          Nothing -> [ text "pending confirmation" ]
+          _ ->
+            [ span [ classNames [ "text-xs", "font-semibold" ] ] [ text $ "Step " <> show stepNumber <> ":" ]
+            , span [ classNames [ "text-xl" ] ] [ text timeoutStr ]
+            ]
+      ]
+
 -- NOTE: Currently, the horizontal scrolling for this element does not match the exact desing. In the designs, the active card is always centered and you
 -- can change which card is active via scrolling or the navigation buttons. To implement this we would probably need to add snap scrolling to the center of the
 -- big container and create a smaller absolute positioned element of the size of a card (positioned in the middle), and with JS check that if a card enters

diff --git a/marlowe-dashboard-client/src/ContractHome/Lenses.purs b/marlowe-dashboard-client/src/ContractHome/Lenses.purs
diff --git a/marlowe-dashboard-client/src/ContractHome/State.purs b/marlowe-dashboard-client/src/ContractHome/State.purs
diff --git a/marlowe-dashboard-client/src/ContractHome/Types.purs b/marlowe-dashboard-client/src/ContractHome/Types.purs