Fix UI for multiple bots and basic mm

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

@@ -1069,10 +1069,11 @@
         </tr>
       </tbody>
     </table>
-    <hr>
 
-    <div class="fs18 align-self-start"><img id="cexLogo" src="/img/binance.com.png" class="small-icon"><span class="ms-2" id="cexBalancesTitle"></span></div>
-    <table id="cexBalancesTable" class="table striped border mt-3 w-auto mx-auto">
+    <div id="cexSection">
+      <hr>
+      <div class="fs18 align-self-start"><img id="cexLogo" class="small-icon"><span class="ms-2" id="cexBalancesTitle"></span></div>
+      <table id="cexBalancesTable" class="table striped border mt-3 w-auto mx-auto">
       <thead>
         <tr>
           <th class="border text-center">[[[Asset]]]</th>
@@ -1097,11 +1098,12 @@
           <td id="cexRemaining" class="border text-center"></td>
           <td id="cexDeficiency" class="border text-center text-warning"></td>
           <td id="cexDeficiencyWithPending" class="border text-center"></td>
-        </tr>
-      </tbody>
-    </table>
-    <hr>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
+    <hr>
     <div class="fs18 align-self-start">Placements</div>
     <table id="placementsTable" class="table striped border mt-3 w-auto mx-auto">
       <thead>
@@ -1114,8 +1116,8 @@
           <th class="border text-center" id="counterTradeRateHeader">[[[Arb Rate]]]</th>
           <th class="border text-center">[[[Required DEX]]]</th>
           <th class="border text-center">[[[Used DEX]]]</th>
-          <th class="border text-center">[[[Required CEX]]]</th>
-          <th class="border text-center">[[[Used CEX]]]</th>
+          <th class="border text-center" id="requiredCEXHeader">[[[Required CEX]]]</th>
+          <th class="border text-center" id="usedCEXHeader">[[[Used CEX]]]</th>
           <th class="border text-center" id="errorHeader">[[[Error]]]</th>
         </tr>
       </thead>

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

@@ -69,6 +69,7 @@ interface FormsConfig {
 export class Forms {
   formsDiv: PageElement
   currentForm: PageElement | undefined
+  currentFormID: string | undefined
   keyup: (e: KeyboardEvent) => void
   closed?: () => void
 
@@ -94,8 +95,9 @@ export class Forms {
   }
 
   /* showForm shows a modal form with a little animation. */
-  async show (form: HTMLElement): Promise<void> {
+  async show (form: HTMLElement, id?: string): Promise<void> {
     this.currentForm = form
+    this.currentFormID = id
     Doc.hide(...Array.from(this.formsDiv.children))
     form.style.right = '10000px'
     Doc.show(this.formsDiv, form)
@@ -109,6 +111,7 @@ export class Forms {
   close (): void {
     Doc.hide(this.formsDiv)
     this.currentForm = undefined
+    this.currentFormID = undefined
     if (this.closed) this.closed()
   }
 

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

@@ -70,7 +70,7 @@ import {
   CEXProblemsNote
 } from './registry'
 import { setOptionTemplates } from './opts'
-import { RunningMarketMakerDisplay } from './mmutil'
+import { RunningMarketMakerDisplay, RunningMMDisplayElements } from './mmutil'
 
 const bind = Doc.bind
 
@@ -274,7 +274,14 @@ export default class MarketsPage extends BasePage {
       this.depositAddrForm = new DepositAddress(page.deposit)
     }
 
-    this.mm = new RunningMarketMakerDisplay(page.mmRunning, this.forms, page.orderReportForm, 'markets')
+    const runningMMDisplayElements: RunningMMDisplayElements = {
+      orderReportForm: page.orderReportForm,
+      dexBalancesRowTmpl: page.dexBalancesRowTmpl,
+      placementRowTmpl: page.placementRowTmpl,
+      placementAmtRowTmpl: page.placementAmtRowTmpl
+    }
+    Doc.cleanTemplates(page.dexBalancesRowTmpl, page.placementRowTmpl, page.placementAmtRowTmpl)
+    this.mm = new RunningMarketMakerDisplay(page.mmRunning, this.forms, runningMMDisplayElements, 'markets')
 
     this.reputationMeter = new ReputationMeter(page.reputationMeter)
 
@@ -283,6 +290,7 @@ export default class MarketsPage extends BasePage {
 
     // Prepare templates for the buy and sell tables and the user's order table.
     setOptionTemplates(page)
+
     Doc.cleanTemplates(
       page.orderRowTmpl, page.durBttnTemplate, page.booleanOptTmpl, page.rangeOptTmpl,
       page.orderOptTmpl, page.userOrderTmpl, page.recentMatchesTemplate

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

@@ -24,15 +24,15 @@ import {
   PlacementsChart,
   BotMarket,
   hostedMarketID,
-  RunningMarketMakerDisplay
+  RunningMarketMakerDisplay,
+  RunningMMDisplayElements
 } from './mmutil'
 import Doc, { MiniSlider } from './doc'
 import BasePage from './basepage'
 import * as OrderUtil from './orderutil'
 import { Forms, CEXConfigurationForm } from './forms'
 import * as intl from './locales'
 import { StatusBooked } from './orderutil'
-
 const mediumBreakpoint = 768
 
 interface FundingSlider {
@@ -184,6 +184,7 @@ export default class MarketMakerPage extends BasePage {
   sortedBots: Bot[]
   cexes: Record<string, CEXRow>
   twoColumn: boolean
+  runningMMDisplayElements: RunningMMDisplayElements
 
   constructor (main: HTMLElement) {
     super()
@@ -198,6 +199,13 @@ export default class MarketMakerPage extends BasePage {
 
     this.forms = new Forms(page.forms)
     this.cexConfigForm = new CEXConfigurationForm(page.cexConfigForm, (cexName: string) => this.cexConfigured(cexName))
+    this.runningMMDisplayElements = {
+      orderReportForm: page.orderReportForm,
+      dexBalancesRowTmpl: page.dexBalancesRowTmpl,
+      placementRowTmpl: page.placementRowTmpl,
+      placementAmtRowTmpl: page.placementAmtRowTmpl
+    }
+    Doc.cleanTemplates(page.dexBalancesRowTmpl, page.placementRowTmpl, page.placementAmtRowTmpl)
 
     Doc.bind(page.newBot, 'click', () => { this.newBot() })
     Doc.bind(page.archivedLogsBtn, 'click', () => { app().loadPage('mmarchives') })
@@ -306,7 +314,7 @@ export default class MarketMakerPage extends BasePage {
     const [baseSymbol, quoteSymbol] = [app().assets[baseID].symbol, app().assets[quoteID].symbol]
     const mktID = `${baseSymbol}_${quoteSymbol}`
     if (!app().exchanges[host]?.markets[mktID]) return
-    const bot = new Bot(this, botStatus, startupBalanceCache)
+    const bot = new Bot(this, this.runningMMDisplayElements, botStatus, startupBalanceCache)
     page.botRows.appendChild(bot.row.tr)
     sortedBots.push(bot)
     bots[bot.id] = bot
@@ -411,7 +419,7 @@ class Bot extends BotMarket {
   row: BotRow
   runDisplay: RunningMarketMakerDisplay
 
-  constructor (pg: MarketMakerPage, status: MMBotStatus, startupBalanceCache?: Record<number, Promise<ExchangeBalance>>) {
+  constructor (pg: MarketMakerPage, runningMMElements: RunningMMDisplayElements, status: MMBotStatus, startupBalanceCache?: Record<number, Promise<ExchangeBalance>>) {
     super(status.config)
     startupBalanceCache = startupBalanceCache ?? {}
     this.pg = pg
@@ -421,7 +429,7 @@ class Bot extends BotMarket {
     const div = this.div = pg.page.botTmpl.cloneNode(true) as PageElement
     const page = this.page = Doc.parseTemplate(div)
 
-    this.runDisplay = new RunningMarketMakerDisplay(page.onBox, pg.forms, pg.page.orderReportForm, 'mm')
+    this.runDisplay = new RunningMarketMakerDisplay(page.onBox, pg.forms, runningMMElements, 'mm')
 
     setMarketElements(div, baseID, quoteID, host)
     if (cexName) setCexElements(div, cexName)

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

@@ -766,6 +766,13 @@ export class BotMarket {
   }
 }
 
+export type RunningMMDisplayElements = {
+  orderReportForm: PageElement
+  dexBalancesRowTmpl: PageElement
+  placementRowTmpl: PageElement
+  placementAmtRowTmpl: PageElement
+}
+
 export class RunningMarketMakerDisplay {
   div: PageElement
   page: Record<string, PageElement>
@@ -783,14 +790,14 @@ export class RunningMarketMakerDisplay {
   placementRowTmpl: PageElement
   placementAmtRowTmpl: PageElement
 
-  constructor (div: PageElement, forms: Forms, orderReportForm: PageElement, page: string) {
+  constructor (div: PageElement, forms: Forms, elements: RunningMMDisplayElements, page: string) {
     this.div = div
     this.page = Doc.parseTemplate(div)
-    this.orderReportFormEl = orderReportForm
-    this.orderReportForm = Doc.idDescendants(orderReportForm)
-    this.dexBalancesRowTmpl = this.orderReportForm.dexBalancesRowTmpl
-    this.placementRowTmpl = this.orderReportForm.placementRowTmpl
-    this.placementAmtRowTmpl = this.orderReportForm.placementAmtRowTmpl
+    this.orderReportFormEl = elements.orderReportForm
+    this.orderReportForm = Doc.idDescendants(elements.orderReportForm)
+    this.dexBalancesRowTmpl = elements.dexBalancesRowTmpl
+    this.placementRowTmpl = elements.placementRowTmpl
+    this.placementAmtRowTmpl = elements.placementAmtRowTmpl
     Doc.cleanTemplates(this.dexBalancesRowTmpl, this.placementRowTmpl, this.placementAmtRowTmpl)
     this.forms = forms
     Doc.bind(this.page.stopBttn, 'click', () => this.stop())
@@ -880,7 +887,7 @@ export class RunningMarketMakerDisplay {
     if (n.baseID !== baseID || n.quoteID !== quoteID || n.host !== host) return
     if (!n.report) return
     this.latestEpoch = n.report
-    if (this.forms.currentForm === this.orderReportFormEl) {
+    if (this.forms.currentForm === this.orderReportFormEl && this.forms.currentFormID === this.mkt.id) {
       const orderReport = this.displayedOrderReportFormSide === 'buys' ? n.report.buysReport : n.report.sellsReport
       if (orderReport) this.updateOrderReport(orderReport, this.displayedOrderReportFormSide, n.report.epochNum)
       else this.forms.close()
@@ -1035,8 +1042,6 @@ export class RunningMarketMakerDisplay {
       return
     }
 
-    form.cexLogo.src = CEXDisplayInfos[this.mkt.cexName].logo
-    form.cexBalancesTitle.textContent = intl.prep(intl.ID_CEX_BALANCES, { cexName: CEXDisplayInfos[this.mkt.cexName].name })
     Doc.empty(form.dexBalancesBody, form.placementsBody)
     const createRow = (assetID: number): [PageElement, number] => {
       const row = this.dexBalancesRowTmpl.cloneNode(true) as HTMLElement
@@ -1085,9 +1090,16 @@ export class RunningMarketMakerDisplay {
     }
     setDeficiencyVisibility(totalDeficiency > 0, rows)
 
-    Doc.setVis(this.mkt.cexName, form.cexBalancesTable, form.counterTradeRateHeader)
+    Doc.setVis(this.mkt.cexName, form.cexSection, form.counterTradeRateHeader, form.requiredCEXHeader, form.usedCEXHeader)
     let cexAsset: SupportedAsset
     if (this.mkt.cexName) {
+      const cexDisplayInfo = CEXDisplayInfos[this.mkt.cexName]
+      if (cexDisplayInfo) {
+        form.cexLogo.src = cexDisplayInfo.logo
+        form.cexBalancesTitle.textContent = intl.prep(intl.ID_CEX_BALANCES, { cexName: cexDisplayInfo.name })
+      } else {
+        console.error(`CEXDisplayInfo not found for ${this.mkt.cexName}`)
+      }
       const cexAssetID = side === 'buys' ? this.mkt.baseID : this.mkt.quoteID
       cexAsset = app().assets[cexAssetID]
       form.cexAsset.textContent = cexAsset.symbol.toUpperCase()
@@ -1180,7 +1192,7 @@ export class RunningMarketMakerDisplay {
     if (!report) return
     this.updateOrderReport(report, side, this.latestEpoch.epochNum)
     this.displayedOrderReportFormSide = side
-    this.forms.show(this.orderReportFormEl)
+    this.forms.show(this.orderReportFormEl, this.mkt.id)
   }
 
   readBook () {