pool+orders: display market state in order form

Author: jamaljsr

app/src/__tests__/components/pool/OrderFormSection.spec.tsx

@@ -109,7 +109,7 @@ describe('OrderFormSection', () => {
     changeInput('Bid Premium', '10000');
     changeInput('Minimum Channel Size', '100000');
     changeInput('Max Batch Fee Rate', '1');
-    await changeSelect('Channel Duration', '4032');
+    await changeSelect('Channel Duration', '4032 (open)');
     await changeSelect('Min Node Tier', 'T0 - All Nodes');
 
     let bid: Required<POOL.Bid.AsObject>;

app/src/i18n/locales/en-US.json

@@ -288,7 +288,11 @@
   "stores.orderFormView.errorMultiple": "must be a multiple of 100,000",
   "stores.orderFormView.premiumLowError": "per block fixed rate is too small",
   "stores.orderFormView.errorLiquidity": "must be less than liquidity amount",
-  "stores.orderFormView.inView": "Currently Viewing",
+  "stores.orderFormView.marketOpen": "open",
+  "stores.orderFormView.marketAccepting": "accepting orders",
+  "stores.orderFormView.marketClosed": "closed",
+  "stores.orderFormView.noMarket": "no market",
+  "stores.orderFormView.inView": "Viewing",
   "stores.orderFormView.feeRateErrorMin": "minimum {{min}} sats/vByte",
   "stores.orderFormView.placeOrderLabel": "Place {{action}} Order",
   "stores.settingsStore.required": "a valid url is required",

app/src/store/views/orderFormView.ts

@@ -88,19 +88,35 @@ export default class OrderFormView {
       .filter(({ state }) => state === MARKET_OPEN || state === ACCEPTING_ORDERS);
   }
 
+  /** the mapping of market states to user-friendly labels */
+  get marketStateLabels(): Record<number, string> {
+    return {
+      [DurationBucketState.MARKET_OPEN]: l('marketOpen'),
+      [DurationBucketState.ACCEPTING_ORDERS]: l('marketAccepting'),
+      [DurationBucketState.MARKET_CLOSED]: l('marketClosed'),
+      [DurationBucketState.NO_MARKET]: l('noMarket'),
+    };
+  }
+
   /** the available options for the lease duration field */
   get durationOptions() {
-    // add a default option with a value of zero to signify that the duration
-    // currently being displayed should be used
-    const current = {
-      label: `${l('inView')} (${this._store.batchStore.selectedLeaseDuration})`,
-      value: '0',
-    };
-    const durations = this.marketsAcceptingOrders.map(({ duration }) => ({
-      label: `${duration}`,
+    const labels = this.marketStateLabels;
+    const durations = this.marketsAcceptingOrders.map(({ duration, state }) => ({
+      label: `${duration} (${labels[state]})`,
       value: `${duration}`,
     }));
-    return [current, ...durations];
+
+    const selectedDuration = this._store.batchStore.selectedLeaseDuration;
+    const selectedState = this._store.batchStore.leaseDurations.get(selectedDuration);
+    if (selectedState) {
+      // add a default option with a value of zero to signify that the duration
+      // currently being displayed should be used
+      durations.unshift({
+        label: `${l('inView')} (${selectedDuration}, ${labels[selectedState]})`,
+        value: '0',
+      });
+    }
+    return durations;
   }
 
   /** determines if the lease duration field should be visible */