pool+batches: only display open markets in the UI

Author: jamaljsr

app/src/store/views/batchesView.ts

@@ -1,5 +1,5 @@
-import { keys, makeAutoObservable } from 'mobx';
-import { NodeTier } from 'types/generated/auctioneer_pb';
+import { entries, makeAutoObservable } from 'mobx';
+import { DurationBucketState, NodeTier } from 'types/generated/auctioneer_pb';
 import { toPercent } from 'util/bigmath';
 import { Store } from 'store';
 
@@ -80,17 +80,24 @@ export default class BatchesView {
     return `${this._store.batchStore.selectedLeaseDuration}`;
   }
 
+  /** the markets that are currently open (accepting & matching orders) */
+  get openMarkets() {
+    return entries(this._store.batchStore.leaseDurations)
+      .map(([duration, state]) => ({ duration, state }))
+      .filter(({ state }) => state === DurationBucketState.MARKET_OPEN);
+  }
+
   /** the list of markets to display as badges */
   get marketOptions() {
-    return keys(this._store.batchStore.leaseDurations).map(duration => ({
+    return this.openMarkets.map(({ duration }) => ({
       label: `${duration}`,
       value: `${duration}`,
     }));
   }
 
   /** determines if the market badges should be visible above the chart */
   get showMarketBadges() {
-    return this._store.batchStore.leaseDurations.size > 1;
+    return this.openMarkets.length > 1;
   }
 
   //

app/src/store/views/orderFormView.ts

@@ -1,5 +1,5 @@
-import { keys, makeAutoObservable, runInAction } from 'mobx';
-import { NodeTier } from 'types/generated/auctioneer_pb';
+import { entries, makeAutoObservable, runInAction } from 'mobx';
+import { DurationBucketState, NodeTier } from 'types/generated/auctioneer_pb';
 import { LeaseDuration } from 'types/state';
 import { annualPercentRate, toBasisPoints, toPercent } from 'util/bigmath';
 import { BLOCKS_PER_DAY } from 'util/constants';
@@ -80,6 +80,14 @@ export default class OrderFormView {
     return '';
   }
 
+  /** the markets currently open or accepting orders */
+  get marketsAcceptingOrders() {
+    const { MARKET_OPEN, ACCEPTING_ORDERS } = DurationBucketState;
+    return entries(this._store.batchStore.leaseDurations)
+      .map(([duration, state]) => ({ duration, state }))
+      .filter(({ state }) => state === MARKET_OPEN || state === ACCEPTING_ORDERS);
+  }
+
   /** the available options for the lease duration field */
   get durationOptions() {
     // add a default option with a value of zero to signify that the duration
@@ -88,7 +96,7 @@ export default class OrderFormView {
       label: `${l('inView')} (${this._store.batchStore.selectedLeaseDuration})`,
       value: '0',
     };
-    const durations = keys(this._store.batchStore.leaseDurations).map(duration => ({
+    const durations = this.marketsAcceptingOrders.map(({ duration }) => ({
       label: `${duration}`,
       value: `${duration}`,
     }));
@@ -97,7 +105,7 @@ export default class OrderFormView {
 
   /** determines if the lease duration field should be visible */
   get durationVisible() {
-    return this._store.batchStore.leaseDurations.size > 1;
+    return this.marketsAcceptingOrders.length > 1;
   }
 
   /** the chosen duration or the value selected in the batch store */

app/src/util/tests/sampleData.ts

@@ -654,9 +654,9 @@ export const poolLeaseDurations: POOL.LeaseDurationResponse.AsObject = {
   leaseDurationsMap: [], // deprecated
   leaseDurationBucketsMap: [
     [2016, AUCT.DurationBucketState.MARKET_OPEN],
-    [4032, AUCT.DurationBucketState.MARKET_CLOSED],
+    [4032, AUCT.DurationBucketState.MARKET_OPEN],
     [6048, AUCT.DurationBucketState.ACCEPTING_ORDERS],
-    [8064, AUCT.DurationBucketState.NO_MARKET],
+    [8064, AUCT.DurationBucketState.MARKET_CLOSED],
   ],
 };