pool+orders: hide lease durations when there's only one available

Author: jamaljsr

app/src/components/pool/OrderFormSection.tsx

@@ -129,14 +129,16 @@ const OrderFormSection: React.FC = () => {
           />
         </FormField>
         <Options visible={orderFormView.addlOptionsVisible}>
-          <FormField label={l('durationLabel')}>
-            <FormSelect
-              label={l('durationLabel')}
-              value={orderFormView.duration.toString()}
-              onChange={v => orderFormView.setDuration(parseInt(v) as LeaseDuration)}
-              options={orderFormView.durationOptions}
-            />
-          </FormField>
+          {orderFormView.durationVisible && (
+            <FormField label={l('durationLabel')}>
+              <FormSelect
+                label={l('durationLabel')}
+                value={orderFormView.duration.toString()}
+                onChange={v => orderFormView.setDuration(parseInt(v) as LeaseDuration)}
+                options={orderFormView.durationOptions}
+              />
+            </FormField>
+          )}
           <FormField label={l('minChanSizeLabel')} error={orderFormView.minChanSizeError}>
             <FormInputNumber
               label={l('minChanSizeLabel')}

app/src/components/pool/batches/BatchControls.tsx

@@ -34,12 +34,16 @@ const BatchControls: React.FC = () => {
   return (
     <Wrapper>
       <div>
-        <Title>{l('markets')}</Title>
-        <BadgeList
-          options={batchesView.marketOptions}
-          value={batchesView.selectedMarket}
-          onChange={batchesView.changeMarket}
-        />
+        {batchesView.showMarketBadges && (
+          <>
+            <Title>{l('markets')}</Title>
+            <BadgeList
+              options={batchesView.marketOptions}
+              value={batchesView.selectedMarket}
+              onChange={batchesView.changeMarket}
+            />
+          </>
+        )}
       </div>
       <ViewMode>
         <BarChart size="large" onClick={handleViewChart} />

app/src/store/views/batchesView.ts

@@ -88,6 +88,11 @@ export default class BatchesView {
     }));
   }
 
+  /** determines if the market badges should be visible above the chart */
+  get showMarketBadges() {
+    return this._store.batchStore.leaseDurations.size > 1;
+  }
+
   //
   // Actions
   //

app/src/store/views/orderFormView.ts

@@ -95,6 +95,11 @@ export default class OrderFormView {
     return [current, ...durations];
   }
 
+  /** determines if the lease duration field should be visible */
+  get durationVisible() {
+    return this._store.batchStore.leaseDurations.size > 1;
+  }
+
   /** the chosen duration or the value selected in the batch store */
   get derivedDuration() {
     return this.duration || this._store.batchStore.selectedLeaseDuration;