From 15504f3aecd2bb8c8cc779b964fed40724e1a3ee Mon Sep 17 00:00:00 2001
From: martonp <marci93@gmail.com>
Date: Fri, 11 Oct 2024 17:12:25 +0200
Subject: [PATCH] app: Toggle trading tier/reputation UI

---
 client/webserver/locales/en-us.go           |  4 ++++
 client/webserver/site/src/html/markets.tmpl | 12 ++++++++++--
 client/webserver/site/src/js/markets.ts     | 21 +++++++++++++--------
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/client/webserver/locales/en-us.go b/client/webserver/locales/en-us.go
index cff6a9089e..8ab92d9a66 100644
--- a/client/webserver/locales/en-us.go
+++ b/client/webserver/locales/en-us.go
@@ -653,4 +653,8 @@ var EnUS = map[string]*intl.Translation{
 	"Transaction":                 {T: "Transaction"},
 	"Value":                       {T: "Value"},
 	"Prepaid bond redeemed":       {T: "Prepaid bond redeemed!"},
+	"Show trading tier info":      {T: "Show trading tier info"},
+	"Hide trading tier info":      {T: "Hide trading tier info"},
+	"Show reputation":             {T: "Show reputation"},
+	"Hide reputation":             {T: "Hide reputation"},
 }
diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
index dfec1b0799..120e6905b2 100644
--- a/client/webserver/site/src/html/markets.tmpl
+++ b/client/webserver/site/src/html/markets.tmpl
@@ -426,7 +426,11 @@
               <div id="reputationAndTradingTierBox">
                 <div id="showTradingTier" class="p-2 grey fs15 hoverbg pointer">
                   <span class="ico-plus fs10 me-2"></span>
-                  <span>Show trading tier info</span>
+                  <span>[[[Show trading tier info]]]</span>
+                </div>
+                <div id="hideTradingTier" class="p-2 grey fs15 hoverbg pointer d-hide">
+                  <span class="ico-minus fs10 me-2"></span>
+                  <span>[[[Hide trading tier info]]]</span>
                 </div>
                 <div id="tradingLimits" class="d-flex align-items-stretch fs15 mx-2 mb-2 border d-hide">
                   <div class="d-flex flex-column flex-grow-1 align-items-stretch p-2">
@@ -474,7 +478,11 @@
                 </div>
                 <div id="showTradingReputation" class="p-2 grey fs15 hoverbg pointer">
                   <span class="ico-plus fs10 me-2"></span>
-                  <span>Show reputation</span>
+                  <span>[[[Show reputation]]]</span>
+                </div>
+                <div id="hideTradingReputation" class="p-2 grey fs15 hoverbg pointer d-hide">
+                  <span class="ico-minus fs10 me-2"></span>
+                  <span>[[[Hide reputation]]]</span>
                 </div>
                 <div id="reputationMeter" class="px-3 mb-3 border-bottom d-hide">
                   {{template "reputationMeter"}}
diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts
index 9c196d6639..83f0666733 100644
--- a/client/webserver/site/src/js/markets.ts
+++ b/client/webserver/site/src/js/markets.ts
@@ -290,14 +290,19 @@ export default class MarketsPage extends BasePage {
     bind(page.approveBaseBttn, 'click', () => { this.showTokenApprovalForm(true) })
     bind(page.approveQuoteBttn, 'click', () => { this.showTokenApprovalForm(false) })
 
-    bind(page.showTradingTier, 'click', () => {
-      Doc.hide(page.showTradingTier)
-      Doc.show(page.tradingLimits)
-    })
-    bind(page.showTradingReputation, 'click', () => {
-      Doc.hide(page.showTradingReputation)
-      Doc.show(page.reputationMeter)
-    })
+    const toggleTradingTier = (show: boolean) => {
+      Doc.setVis(!show, page.showTradingTier)
+      Doc.setVis(show, page.tradingLimits, page.hideTradingTier)
+    }
+    bind(page.showTradingTier, 'click', () => { toggleTradingTier(true) })
+    bind(page.hideTradingTier, 'click', () => { toggleTradingTier(false) })
+
+    const toggleTradingReputation = (show: boolean) => {
+      Doc.setVis(!show, page.showTradingReputation)
+      Doc.setVis(show, page.reputationMeter, page.hideTradingReputation)
+    }
+    bind(page.showTradingReputation, 'click', () => { toggleTradingReputation(true) })
+    bind(page.hideTradingReputation, 'click', () => { toggleTradingReputation(false) })
 
     // Buttons to set order type and side.
     bind(page.buyBttn, 'click', () => { this.setBuy() })