2nd go through review comments

client/webserver/site/src/html/order.tmpl

@@ -148,7 +148,7 @@
           </div>
 
           <div class="pt-3">
-            <div class="px-3 pb-3" data-tmpl="makerSwap">
+            <div class="px-3 pb-3 d-hide" data-tmpl="makerSwap">
               <div class="d-inline-block">
                 <div class="d-flex align-items-center justify-content-between">
                   <span class="match-data-label">1. [[[Maker Swap]]] (<span data-tmpl="makerSwapAsset"></span>, <span data-tmpl="makerSwapYou">[[[you]]]</span><span data-tmpl="makerSwapThem">[[[them]]]</span>)</span>
@@ -158,7 +158,7 @@
                 <a target="_blank" class="mono plainlink" data-tmpl="makerSwapCoin"></a>
               </div>
             </div>
-            <div class="px-3 pb-3" data-tmpl="takerSwap">
+            <div class="px-3 pb-3 d-hide" data-tmpl="takerSwap">
               <div class="d-inline-block">
                 <div class="d-flex align-items-center justify-content-between">
                   <span class="match-data-label">2. [[[Taker Swap]]] (<span data-tmpl="takerSwapAsset"></span>, <span data-tmpl="takerSwapYou">[[[you]]]</span><span data-tmpl="takerSwapThem">[[[them]]]</span>)</span>
@@ -168,7 +168,7 @@
                 <a target="_blank" class="mono plainlink" data-tmpl="takerSwapCoin"></a>
               </div>
             </div>
-            <div class="px-3 pb-3" data-tmpl="makerRedeem">
+            <div class="px-3 pb-3 d-hide" data-tmpl="makerRedeem">
               <div class="d-inline-block">
                 <div class="d-flex align-items-center justify-content-between">
                   <span class="match-data-label">3. [[[Maker Redemption]]] (<span data-tmpl="makerRedeemAsset"></span>, <span data-tmpl="makerRedeemYou">[[[you]]]</span><span data-tmpl="makerRedeemThem">[[[them]]]</span>)</span>
@@ -178,7 +178,7 @@
                 <a target="_blank" class="mono plainlink" data-tmpl="makerRedeemCoin"></a>
               </div>
             </div>
-            <div class="px-3 pb-3" data-tmpl="takerRedeem">
+            <div class="px-3 pb-3 d-hide" data-tmpl="takerRedeem">
               <div class="d-inline-block">
                 <div class="d-flex align-items-center justify-content-between">
                   <span class="match-data-label">4. [[[Taker Redemption]]] (<span data-tmpl="takerRedeemAsset"></span>, <span data-tmpl="takerRedeemYou">[[[you]]]</span><span data-tmpl="takerRedeemThem">[[[them]]]</span>)</span>
@@ -188,14 +188,14 @@
                 <a target="_blank" class="mono plainlink" data-tmpl="takerRedeemCoin"></a>
               </div>
             </div>
-            <div class="px-3 pb-3" data-tmpl="refund">
+            <div class="px-3 pb-3 d-hide" data-tmpl="refund">
               <span class="match-data-label red">[[[Refund]]] (<span data-tmpl="refundAsset"></span>, [[[you]]])</span><br>
               <span data-tmpl="refundPending"></span>
               <a target="_blank" class="mono plainlink" data-tmpl="refundCoin"></a>
             </div>
           </div>
         </div>
-      </div>    
+      </div>
     </div>
 
     {{- /* FUNDING COINS */ -}}

client/webserver/site/src/js/order.ts

@@ -332,41 +332,42 @@ export default class OrderPage extends BasePage {
       Doc.show(tmpl.takerRedeemMsg)
     } else {
       Doc.hide(tmpl.makerSwapMsg, tmpl.takerSwapMsg, tmpl.makerRedeemMsg, tmpl.takerRedeemMsg)
+      if (m.isCancel) return
     }
 
     if (!m.revoked) {
       // Match is still following the usual success-path, it is desirable for the
       // user to see it in full (even if to learn how atomic swap is supposed to
       // work).
 
-      Doc.setVis(!m.isCancel && (makerSwapCoin(m) || m.active), tmpl.makerSwap)
-      Doc.setVis(!m.isCancel && (takerSwapCoin(m) || m.active), tmpl.takerSwap)
-      Doc.setVis(!m.isCancel && (makerRedeemCoin(m) || m.active), tmpl.makerRedeem)
+      Doc.setVis(makerSwapCoin(m) || m.active, tmpl.makerSwap)
+      Doc.setVis(takerSwapCoin(m) || m.active, tmpl.takerSwap)
+      Doc.setVis(makerRedeemCoin(m) || m.active, tmpl.makerRedeem)
       // When maker isn't aware of taker redeem coin, once the match becomes inactive
       // (nothing else maker is expected to do in this match) just hide taker redeem.
-      Doc.setVis(!m.isCancel && (takerRedeemCoin(m) || m.active), tmpl.takerRedeem)
+      Doc.setVis(takerRedeemCoin(m) || m.active, tmpl.takerRedeem)
       // Refunding isn't a usual part of success-path, but don't rule it out.
-      Doc.setVis(!m.isCancel && m.refund, tmpl.refund)
+      Doc.setVis(m.refund, tmpl.refund)
     } else {
       // Match diverged from the usual success-path, since this could have happened
       // at any step it is hard (maybe impossible) to predict the final state this
       // match will end up in, so show only steps that already happened plus all
       // the possibilities on the next step ahead.
 
       // If we don't have swap coins after revocation, we won't show the pending message.
-      Doc.setVis(!m.isCancel && (makerSwapCoin(m)), tmpl.makerSwap)
-      Doc.setVis(!m.isCancel && (takerSwapCoin(m)), tmpl.takerSwap)
+      Doc.setVis(makerSwapCoin(m), tmpl.makerSwap)
+      Doc.setVis(takerSwapCoin(m), tmpl.takerSwap)
       // When match is revoked and both swaps are present, maker redeem might still show up:
       // - as maker, we'll try to redeem until it isn't possible due to refund by taker,
       //   so we'll have to show redeem row until we either redeem or refund
       //   because there isn't enough data in Match m to figure out whether taker
       //   refunded already
       // - as taker, we should expect maker redeeming any time, so we'll have to show
       //   redeem pending element until maker redeem shows up, or until we refund.
-      Doc.setVis(!m.isCancel && (makerRedeemCoin(m) || (takerSwapCoin(m) && m.active && !m.refund)), tmpl.makerRedeem)
+      Doc.setVis(makerRedeemCoin(m) || (takerSwapCoin(m) && m.active && !m.refund), tmpl.makerRedeem)
       // When maker isn't aware of taker redeem coin, once the match becomes inactive
       // (nothing else maker is expected to do in this match) just hide taker redeem.
-      Doc.setVis(!m.isCancel && (takerRedeemCoin(m) || (makerRedeemCoin(m) && m.active && !m.refund)), tmpl.takerRedeem)
+      Doc.setVis(takerRedeemCoin(m) || (makerRedeemCoin(m) && m.active && !m.refund), tmpl.takerRedeem)
       // As taker, show refund placeholder only if we have outstanding swap to refund.
       // There is no need to wait for anything else, we can show refund placeholder
       // (to inform the user that it is likely to happen) right after match revocation.
@@ -386,7 +387,7 @@ export default class OrderPage extends BasePage {
           expectingRefund = expectingRefund && Date.now() > takerRefundsAfter.getTime()
         }
       }
-      Doc.setVis(!m.isCancel && (m.refund || (m.active && !m.redeem && !m.counterRedeem && expectingRefund)), tmpl.refund)
+      Doc.setVis(m.refund || (m.active && !m.redeem && !m.counterRedeem && expectingRefund), tmpl.refund)
     }
   }