From 3b276a2d9415e1b37732ba48a0edb11638f8f64f Mon Sep 17 00:00:00 2001 From: martonp Date: Thu, 31 Oct 2024 16:19:43 +0100 Subject: [PATCH] Fix UI for multiple bots and basic mm --- client/webserver/site/src/html/forms.tmpl | 20 +++++++------ client/webserver/site/src/js/forms.ts | 5 +++- client/webserver/site/src/js/markets.ts | 12 ++++++-- client/webserver/site/src/js/mm.ts | 18 ++++++++---- client/webserver/site/src/js/mmutil.ts | 34 +++++++++++++++-------- 5 files changed, 61 insertions(+), 28 deletions(-) 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 @@ -
-
- +
+
+
+
@@ -1097,11 +1098,12 @@ - - -
[[[Asset]]]
-
+ + + + +
Placements
@@ -1114,8 +1116,8 @@ - - + + 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 () {
[[[Arb Rate]]] [[[Required DEX]]] [[[Used DEX]]][[[Required CEX]]][[[Used CEX]]][[[Required CEX]]][[[Used CEX]]] [[[Error]]]