diff --git a/client/webserver/site/src/html/forms.tmpl b/client/webserver/site/src/html/forms.tmpl
index 41cbfac3b3..38e3fc9352 100644
--- a/client/webserver/site/src/html/forms.tmpl
+++ b/client/webserver/site/src/html/forms.tmpl
@@ -1069,10 +1069,11 @@
-
-
-
+
+
+
+
[[[Asset]]] |
@@ -1097,11 +1098,12 @@
|
|
|
-
-
-
-
+
+
+
+
+
Placements
@@ -1114,8 +1116,8 @@
[[[Required DEX]]] |
[[[Used DEX]]] |
- [[[Required CEX]]] |
- [[[Used CEX]]] |
+
+
diff --git a/client/webserver/site/src/js/forms.ts b/client/webserver/site/src/js/forms.ts
index b2fbbe7d74..631f207d96 100644
--- a/client/webserver/site/src/js/forms.ts
+++ b/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 {
+ async show (form: HTMLElement, id?: string): Promise {
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()
}
diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts
index 8121cd0831..0c55b22a68 100644
--- a/client/webserver/site/src/js/markets.ts
+++ b/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
diff --git a/client/webserver/site/src/js/mm.ts b/client/webserver/site/src/js/mm.ts
index 31b8bdc3eb..a5b048239b 100644
--- a/client/webserver/site/src/js/mm.ts
+++ b/client/webserver/site/src/js/mm.ts
@@ -24,7 +24,8 @@ import {
PlacementsChart,
BotMarket,
hostedMarketID,
- RunningMarketMakerDisplay
+ RunningMarketMakerDisplay,
+ RunningMMDisplayElements
} from './mmutil'
import Doc, { MiniSlider } from './doc'
import BasePage from './basepage'
@@ -32,7 +33,6 @@ 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
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>) {
+ constructor (pg: MarketMakerPage, runningMMElements: RunningMMDisplayElements, status: MMBotStatus, startupBalanceCache?: Record>) {
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)
diff --git a/client/webserver/site/src/js/mmutil.ts b/client/webserver/site/src/js/mmutil.ts
index ee4936e608..e6c16fef3c 100644
--- a/client/webserver/site/src/js/mmutil.ts
+++ b/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
@@ -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 () {