Skip to content

Commit a66bbae

Browse files
author
norwnd
committed
use age instead of time column for recent matches (since time is hard to make sense of when matches aren't happening constantly all the time), but format it slightly differently from how it was
1 parent b011042 commit a66bbae

7 files changed

Lines changed: 65 additions & 66 deletions

File tree

client/asset/eth/multirpc.go

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,9 @@ func (p *provider) subscribeHeaders(ctx context.Context, sub ethereum.Subscripti
279279
// will never return because geth does not use a timeout.
280280
doneUnsubbing := make(chan struct{})
281281
go func() {
282-
sub.Unsubscribe()
282+
if sub != nil {
283+
sub.Unsubscribe()
284+
}
283285
close(doneUnsubbing)
284286
}()
285287
select {

client/webserver/site/src/css/utilities.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,10 @@ sup.token-parent {
131131
white-space: pre-line;
132132
}
133133

134+
.preserve-spaces {
135+
white-space:pre;
136+
}
137+
134138
.vscroll {
135139
@extend .stylish-overflow;
136140

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -413,17 +413,17 @@
413413
<span class="ico-arrowdown"></span>
414414
<span id="qtyHdr"></span>
415415
</th>
416-
<th data-ordercol="time" class="text-end text-nowrap grey">
416+
<th data-ordercol="age" class="text-end text-nowrap grey">
417417
<span class="ico-arrowdown"></span>
418-
<span id="timeHdr"></span>
418+
<span id="ageHdr"></span>
419419
</th>
420420
</tr>
421421
</thead>
422422
<tbody id="recentMatchesLiveList">
423423
<tr id="recentMatchesTemplate">
424424
<td data-tmpl="price" class="text-start fs17"></td>
425425
<td data-tmpl="qty" class="text-end fs17"></td>
426-
<td data-tmpl="time" class="text-end fs17"></td>
426+
<td data-tmpl="age" class="preserve-spaces text-end fs17"></td>
427427
</tr>
428428
</tbody>
429429
</table>

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -91,14 +91,6 @@
9191
<div class="d-flex justify-content-start align-items-stretch flex-column border-start col-sm-24 col-md-12 p-2" id="walletInfo">
9292
<table id="walletInfoTable" class="w-100">
9393
<tbody>
94-
<tr id="statusLocked">
95-
<td class="grey">[[[Status]]]</td>
96-
<td><span class="ico-locked fs14 me-2"></span class="demi">[[[:title:locked]]]</td>
97-
</tr>
98-
<tr id="statusReady">
99-
<td class="grey">[[[Status]]]</td>
100-
<td class="demi"><span class="ico-unlocked fs14 me-2"></span>[[[:title:ready]]]</td>
101-
</tr>
10294
<tr id="statusOff">
10395
<td class="grey">[[[Status]]]</td>
10496
<td><span class="ico-sleeping fs14 me-2"></span class="demi">[[[:title:off]]]</td>

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

Lines changed: 45 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -671,8 +671,8 @@ export default class Doc {
671671
* ageSinceFromMs returns a string representation of the duration since the
672672
* specified unix timestamp (milliseconds).
673673
*/
674-
static ageSinceFromMs (ms: number): string {
675-
return Doc.formatDuration((new Date().getTime()) - ms)
674+
static ageSinceFromMs (ms: number, trimSeconds?: boolean): string {
675+
return Doc.formatDuration((new Date().getTime()) - ms, trimSeconds)
676676
}
677677

678678
/*
@@ -696,9 +696,9 @@ export default class Doc {
696696
}
697697

698698
/*
699-
* hmsSinceFromS returns a time duration since the specified unix timestamp
700-
* formatted as YYYY/MM/DD hh:mm.
701-
*/
699+
* hmsSinceFromS returns a time duration since the specified unix timestamp
700+
* formatted as YYYY/MM/DD hh:mm.
701+
*/
702702
static ymdhmSinceFromMS (ms: number): string {
703703
const date = new Date(ms)
704704
const year = String(date.getFullYear())
@@ -710,29 +710,54 @@ export default class Doc {
710710
}
711711

712712
/* formatDuration returns a string representation of the duration */
713-
static formatDuration (dur: number): string {
713+
static formatDuration (dur: number, trimSeconds?: boolean): string {
714714
let seconds = Math.floor(dur)
715715
let result = ''
716-
let count = 0
717-
const add = (n: number, s: string) => {
718-
if (n > 0 || count > 0) count++
719-
if (n > 0) result += `${n}${s} `
720-
return count >= 2
716+
// significantChunkCnt counts how many chunks (year, month, day, hour, minute) we've added to the result.
717+
let significantChunkCnt = 0
718+
const add = (n: number, s: string): boolean => {
719+
if (n === 0 && significantChunkCnt === 0) {
720+
// we haven't started building the result, so we aren't done yet
721+
return false
722+
}
723+
significantChunkCnt++
724+
let chunk = `${n}${s} `
725+
if (n < 10) {
726+
// gotta pad 1-digit number chunk so that it occupies the same amount of space as 2-digit chunk
727+
chunk = ' ' + chunk // use a space that's of the same size as a digit
728+
}
729+
result += chunk
730+
return significantChunkCnt >= 2 // we want to show 2 chunks (year, month, day, hour, minute) at most
721731
}
722-
let y, mo, d, h, m, s
723-
[y, seconds] = timeMod(seconds, aYear)
724-
if (add(y, 'y')) { return result }
725-
[mo, seconds] = timeMod(seconds, aMonth)
726-
if (add(mo, 'mo')) { return result }
727-
[d, seconds] = timeMod(seconds, aDay)
728-
if (add(d, 'd')) { return result }
732+
733+
const aYear = 31536000000
734+
const aMonth = 2592000000
735+
const aDay = 86400000
736+
const anHour = 3600000
737+
const aMinute = 60000
738+
const aSecond = 1000
739+
740+
let Y, M, D, h, m, s
741+
[Y, seconds] = timeMod(seconds, aYear)
742+
if (add(Y, 'y')) { return result }
743+
[M, seconds] = timeMod(seconds, aMonth)
744+
if (add(M, 'm')) { return result }
745+
[D, seconds] = timeMod(seconds, aDay)
746+
if (add(D, 'd')) { return result }
729747
[h, seconds] = timeMod(seconds, anHour)
730748
if (add(h, 'h')) { return result }
749+
if (trimSeconds) {
750+
// show minutes chunk and be done with it
751+
[m, seconds] = timeMod(seconds, aMinute)
752+
add(m, 'm')
753+
return result || '0m'
754+
}
755+
// show both minutes and seconds chunks then
731756
[m, seconds] = timeMod(seconds, aMinute)
732757
if (add(m, 'm')) { return result }
733-
[s, seconds] = timeMod(seconds, 1000)
758+
[s, seconds] = timeMod(seconds, aSecond)
734759
add(s, 's')
735-
return result.trimEnd() || '0s'
760+
return result || '0s'
736761
}
737762

738763
// showFormError can be used to set and display error message on forms.
@@ -875,12 +900,6 @@ function sleep (ms: number) {
875900
return new Promise(resolve => setTimeout(resolve, ms))
876901
}
877902

878-
const aYear = 31536000000
879-
const aMonth = 2592000000
880-
const aDay = 86400000
881-
const anHour = 3600000
882-
const aMinute = 60000
883-
884903
/* timeMod returns the quotient and remainder of t / dur. */
885904
function timeMod (t: number, dur: number) {
886905
const n = Math.floor(t / dur)

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export default class MarketsPage extends BasePage {
202202
this.recentMatches = []
203203
this.hovers = []
204204
// 'Recent Matches' list sort key and direction.
205-
this.recentMatchesSortKey = 'time'
205+
this.recentMatchesSortKey = 'age'
206206
this.recentMatchesSortDirection = -1
207207
// store original title so we can re-append it when updating market value.
208208
this.ogTitle = document.title
@@ -449,8 +449,8 @@ export default class MarketsPage extends BasePage {
449449
for (const mord of Object.values(this.recentlyActiveUserOrders)) {
450450
mord.details.age.textContent = Doc.ageSinceFromMs(mord.ord.submitTime)
451451
}
452-
for (const td of Doc.applySelector(page.recentMatchesLiveList, '[data-tmpl=time]')) {
453-
td.textContent = Doc.timeFromMs(parseFloat(td.dataset.timestampMs ?? '0'))
452+
for (const td of Doc.applySelector(page.recentMatchesLiveList, '[data-tmpl=age]')) {
453+
td.textContent = Doc.ageSinceFromMs(parseFloat(td.dataset.timestampMs ?? '0'), true)
454454
}
455455
}, 1000)
456456

@@ -572,7 +572,7 @@ export default class MarketsPage extends BasePage {
572572
return
573573
}
574574

575-
const recentMatches = this.recentMatchesSorted('time', -1) // freshest first
575+
const recentMatches = this.recentMatchesSorted('age', -1) // freshest first
576576
if (recentMatches.length === 0) {
577577
// not enough info to display current market price
578578
setDummyValues()
@@ -1280,7 +1280,7 @@ export default class MarketsPage extends BasePage {
12801280

12811281
// update header for "matches" section
12821282
page.priceHdr.textContent = `Price (${Doc.shortSymbol(this.market.quote.symbol)})`
1283-
page.timeHdr.textContent = 'Time'
1283+
page.ageHdr.textContent = 'Age'
12841284
page.qtyHdr.textContent = `Size (${Doc.shortSymbol(this.market.base.symbol)})`
12851285
}
12861286

@@ -2661,7 +2661,7 @@ export default class MarketsPage extends BasePage {
26612661
return this.recentMatches.sort((a: RecentMatch, b: RecentMatch) => direction * (a.rate - b.rate))
26622662
case 'qty':
26632663
return this.recentMatches.sort((a: RecentMatch, b: RecentMatch) => direction * (a.qty - b.qty))
2664-
case 'time':
2664+
case 'age':
26652665
return this.recentMatches.sort((a: RecentMatch, b:RecentMatch) => direction * (a.stamp - b.stamp))
26662666
default:
26672667
return []
@@ -2691,8 +2691,8 @@ export default class MarketsPage extends BasePage {
26912691
tmpl.price.classList.add(match.sell ? 'sellcolor' : 'buycolor')
26922692
tmpl.qty.textContent = Doc.formatCoinAtomToLotSizeBaseCurrency(match.qty, mkt.baseUnitInfo, mkt.cfg.lotsize)
26932693
tmpl.qty.classList.add(match.sell ? 'sellcolor' : 'buycolor')
2694-
tmpl.time.textContent = Doc.timeFromMs(match.stamp)
2695-
tmpl.time.dataset.timestampMs = String(match.stamp)
2694+
tmpl.age.textContent = Doc.ageSinceFromMs(match.stamp, true)
2695+
tmpl.age.dataset.timestampMs = String(match.stamp)
26962696
page.recentMatchesLiveList.append(row)
26972697
}
26982698
}

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

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -990,7 +990,7 @@ export default class WalletsPage extends BasePage {
990990
page.assetLogo.src = Doc.logoPath(symbol)
991991
Doc.hide(
992992
page.balanceBox, page.fiatBalanceBox, page.createWallet, page.walletDetails,
993-
page.sendReceive, page.connectBttnBox, page.statusLocked, page.statusReady,
993+
page.sendReceive, page.connectBttnBox,
994994
page.statusOff, page.connectBttnBox, page.peerCountBox, page.syncProgressBox,
995995
page.statusDisabled, page.tokenInfoBox, page.needsProviderBox, page.feeStateBox,
996996
page.txSyncBox, page.txProgress, page.txFindingAddrs
@@ -1021,14 +1021,11 @@ export default class WalletsPage extends BasePage {
10211021
updateSyncAndPeers (assetID: number) {
10221022
const { page, selectedAssetID } = this
10231023
if (assetID !== selectedAssetID) return
1024-
const { peerCount, syncProgress, syncStatus, open, running } = app().walletMap[assetID]
1024+
const { peerCount, syncProgress, syncStatus, running } = app().walletMap[assetID]
10251025
if (!running) return
10261026
Doc.show(page.sendReceive, page.peerCountBox, page.syncProgressBox)
10271027
page.peerCount.textContent = String(peerCount)
10281028
page.syncProgress.textContent = `${(syncProgress * 100).toFixed(1)}%`
1029-
if (open) {
1030-
Doc.show(page.statusReady)
1031-
} else Doc.show(page.statusLocked) // wallet not unlocked
10321029
Doc.setVis(syncStatus.txs !== undefined, page.txSyncBox)
10331030
if (syncStatus.txs !== undefined) {
10341031
Doc.hide(page.txProgress, page.txFindingAddrs)
@@ -2007,21 +2004,6 @@ export default class WalletsPage extends BasePage {
20072004
this.showForm(this.page.recoverWalletConfirm)
20082005
}
20092006

2010-
/* Show the open wallet form if the password is not cached, and otherwise
2011-
* attempt to open the wallet.
2012-
*/
2013-
async openWallet (assetID: number) {
2014-
const open = {
2015-
assetID: assetID
2016-
}
2017-
const res = await postJSON('/api/openwallet', open)
2018-
if (!app().checkResponse(res)) {
2019-
console.error('openwallet error', res)
2020-
return
2021-
}
2022-
this.assetUpdated(assetID, undefined, intl.prep(intl.ID_WALLET_UNLOCKED))
2023-
}
2024-
20252007
/* Show the form used to change wallet configuration settings. */
20262008
async showReconfig (assetID: number, cfg?: reconfigSettings) {
20272009
const page = this.page

0 commit comments

Comments
 (0)