pool: display lease durations as human readable times

jamaljsr · jamaljsr · commit c6187dcaa980 · 2022-01-05T14:02:35.000-05:00
diff --git a/app/src/__tests__/components/pool/BatchSection.spec.tsx b/app/src/__tests__/components/pool/BatchSection.spec.tsx
@@ -38,8 +38,8 @@ describe('BatchSection', () => {
   it('should toggle between markets', async () => {
     const { getByText, findByText } = render();
     expect(store.batchStore.selectedLeaseDuration).toBe(2016);
-    expect(await findByText('4032')).toBeInTheDocument();
-    fireEvent.click(getByText('4032'));
+    expect(await findByText('1 month')).toBeInTheDocument();
+    fireEvent.click(getByText('1 month'));
     expect(store.batchStore.selectedLeaseDuration).toBe(4032);
   });
 });
diff --git a/app/src/__tests__/components/pool/OrderFormSection.spec.tsx b/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 (open)');
+    await changeSelect('Channel Duration', '1 month (open)');
     await changeSelect('Min Node Tier', 'T0 - All Nodes');
 
     let bid: Required<POOL.Bid.AsObject>;
diff --git a/app/src/__tests__/util/formatters.spec.ts b/app/src/__tests__/util/formatters.spec.ts
@@ -1,6 +1,6 @@
 import Big from 'big.js';
 import { Unit } from 'util/constants';
-import { formatSats, formatTime, formatUnit } from 'util/formatters';
+import { blocksToTime, formatSats, formatTime, formatUnit } from 'util/formatters';
 
 describe('formatters Util', () => {
   describe('formatSats', () => {
@@ -89,4 +89,18 @@ describe('formatters Util', () => {
       expect(formatTime(60 * 70 + 1)).toEqual('1h 10m 1s');
     });
   });
+
+  describe('blocksToTime', () => {
+    it('should convert block to time', () => {
+      expect(blocksToTime(432)).toEqual('3 days');
+      expect(blocksToTime(1008)).toEqual('1 week');
+      expect(blocksToTime(2016)).toEqual('2 weeks');
+      expect(blocksToTime(4032)).toEqual('1 month');
+      expect(blocksToTime(8064)).toEqual('2 months');
+      expect(blocksToTime(12096)).toEqual('3 months');
+      expect(blocksToTime(16128)).toEqual('4 months');
+      expect(blocksToTime(24192)).toEqual('6 months');
+      expect(blocksToTime(52416)).toEqual('1 year');
+    });
+  });
 });
diff --git a/app/src/components/common/BadgeList.tsx b/app/src/components/common/BadgeList.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import styled from '@emotion/styled';
 import { Badge } from 'components/base';
+import Tip from './Tip';
 
 const Styled = {
   Wrapper: styled.div<{ flex?: boolean }>`
@@ -30,6 +31,7 @@ const Styled = {
 export interface BadgeListOption {
   label: string;
   value: string;
+  tip?: string;
 }
 
 interface Props {
@@ -45,9 +47,11 @@ const BadgeList: React.FC<Props> = ({ options, value, onChange }) => {
   return (
     <Wrapper>
       {options.map(o => (
-        <Badge key={o.value} selected={o.value === value} onClick={handleClick(o.value)}>
-          {o.label}
-        </Badge>
+        <Tip key={o.value} overlay={o.tip}>
+          <Badge selected={o.value === value} onClick={handleClick(o.value)}>
+            {o.label}
+          </Badge>
+        </Tip>
       ))}
     </Wrapper>
   );
diff --git a/app/src/store/stores/batchStore.ts b/app/src/store/stores/batchStore.ts
@@ -1,4 +1,5 @@
 import {
+  entries,
   makeAutoObservable,
   observable,
   ObservableMap,
@@ -69,6 +70,13 @@ export default class BatchStore {
     );
   }
 
+  /** the collection of lease durations sorted by number of blocks */
+  get sortedDurations() {
+    return entries(this.leaseDurations)
+      .map(([duration, state]) => ({ duration, state }))
+      .sort((a, b) => a.duration - b.duration);
+  }
+
   /**
    * the collection of batches for the active market
    */
diff --git a/app/src/store/views/batchesView.ts b/app/src/store/views/batchesView.ts
@@ -1,9 +1,10 @@
-import { entries, makeAutoObservable } from 'mobx';
+import { makeAutoObservable } from 'mobx';
 import {
   DurationBucketState,
   NodeTier,
 } from 'types/generated/auctioneerrpc/auctioneer_pb';
 import { toPercent } from 'util/bigmath';
+import { blocksToTime } from 'util/formatters';
 import { Store } from 'store';
 
 export default class BatchesView {
@@ -85,16 +86,17 @@ export default class BatchesView {
 
   /** 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);
+    return this._store.batchStore.sortedDurations.filter(
+      ({ state }) => state === DurationBucketState.MARKET_OPEN,
+    );
   }
 
   /** the list of markets to display as badges */
   get marketOptions() {
     return this.openMarkets.map(({ duration }) => ({
-      label: `${duration}`,
+      label: blocksToTime(duration),
       value: `${duration}`,
+      tip: `${duration} blocks`,
     }));
   }
 
diff --git a/app/src/store/views/orderFormView.ts b/app/src/store/views/orderFormView.ts
@@ -1,4 +1,4 @@
-import { entries, makeAutoObservable, runInAction } from 'mobx';
+import { makeAutoObservable, runInAction } from 'mobx';
 import {
   DurationBucketState,
   NodeTier,
@@ -8,6 +8,7 @@ import Big from 'big.js';
 import debounce from 'lodash/debounce';
 import { annualPercentRate, toBasisPoints, toPercent } from 'util/bigmath';
 import { BLOCKS_PER_DAY } from 'util/constants';
+import { blocksToTime } from 'util/formatters';
 import { prefixTranslation } from 'util/translate';
 import { ONE_UNIT } from 'api/pool';
 import { Store } from 'store';
@@ -93,9 +94,9 @@ export default class OrderFormView {
   /** 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);
+    return this._store.batchStore.sortedDurations.filter(
+      ({ state }) => state === MARKET_OPEN || state === ACCEPTING_ORDERS,
+    );
   }
 
   /** the mapping of market states to user-friendly labels */
@@ -112,7 +113,7 @@ export default class OrderFormView {
   get durationOptions() {
     const labels = this.marketStateLabels;
     const durations = this.marketsAcceptingOrders.map(({ duration, state }) => ({
-      label: `${duration} (${labels[state]})`,
+      label: `${blocksToTime(duration)} (${labels[state]})`,
       value: `${duration}`,
     }));
 
@@ -122,7 +123,9 @@ export default class OrderFormView {
       // 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]})`,
+        label: `${l('inView')} (${blocksToTime(selectedDuration)}, ${
+          labels[selectedState]
+        })`,
         value: '0',
       });
     }
diff --git a/app/src/util/formatters.ts b/app/src/util/formatters.ts
@@ -1,5 +1,6 @@
 import Big from 'big.js';
-import { Unit, Units } from './constants';
+import { BLOCKS_PER_DAY, Unit, Units } from './constants';
+import { plural } from './strings';
 
 interface FormatSatsOptions {
   /** the units to convert the sats to (defaults to `sats`) */
@@ -65,3 +66,23 @@ export const formatTime = (totalSeconds: number) => {
 
   return parts.join(' ');
 };
+
+/**
+ * Converts a number of blocks to a human readable time in weeks, months, or years
+ * @param blocks the number of blocks
+ */
+export const blocksToTime = (blocks: number) => {
+  const days = Math.round(blocks / BLOCKS_PER_DAY);
+  if (days < 7) {
+    return `${days} ${plural(days, 'day')}`;
+  } else if (days < 28) {
+    const weeks = Math.round(days / 7);
+    return `${weeks} ${plural(weeks, 'week')}`;
+  } else if (days < 365 - 30) {
+    const months = Math.round(days / 30);
+    return `${months} ${plural(months, 'month')}`;
+  } else {
+    const years = Math.round(days / 365);
+    return `${years} ${plural(years, 'year')}`;
+  }
+};
diff --git a/app/src/util/strings.ts b/app/src/util/strings.ts
@@ -25,6 +25,97 @@ export const ellipseInside = (
   return `${firstChars}...${lastChars}`;
 };
 
+/**
+ * Returns the plural of an English word.
+ *
+ * @export
+ * @param {string} word
+ * @param {number} [amount]
+ * @returns {string}
+ */
+export const plural = (amount: number, word: string): string => {
+  if (amount === 1) {
+    return word;
+  }
+  const plural: { [key: string]: string } = {
+    '(quiz)$': '$1zes',
+    '^(ox)$': '$1en',
+    '([m|l])ouse$': '$1ice',
+    '(matr|vert|ind)ix|ex$': '$1ices',
+    '(x|ch|ss|sh)$': '$1es',
+    '([^aeiouy]|qu)y$': '$1ies',
+    '(hive)$': '$1s',
+    '(?:([^f])fe|([lr])f)$': '$1$2ves',
+    '(shea|lea|loa|thie)f$': '$1ves',
+    sis$: 'ses',
+    '([ti])um$': '$1a',
+    '(tomat|potat|ech|her|vet)o$': '$1oes',
+    '(bu)s$': '$1ses',
+    '(alias)$': '$1es',
+    '(octop)us$': '$1i',
+    '(ax|test)is$': '$1es',
+    '(us)$': '$1es',
+    '([^s]+)$': '$1s',
+  };
+  const irregular: { [key: string]: string } = {
+    move: 'moves',
+    foot: 'feet',
+    goose: 'geese',
+    sex: 'sexes',
+    child: 'children',
+    man: 'men',
+    tooth: 'teeth',
+    person: 'people',
+  };
+  const uncountable: string[] = [
+    'sheep',
+    'fish',
+    'deer',
+    'moose',
+    'series',
+    'species',
+    'money',
+    'rice',
+    'information',
+    'equipment',
+    'bison',
+    'cod',
+    'offspring',
+    'pike',
+    'salmon',
+    'shrimp',
+    'swine',
+    'trout',
+    'aircraft',
+    'hovercraft',
+    'spacecraft',
+    'sugar',
+    'tuna',
+    'you',
+    'wood',
+  ];
+  // save some time in the case that singular and plural are the same
+  if (uncountable.indexOf(word.toLowerCase()) >= 0) {
+    return word;
+  }
+  // check for irregular forms
+  for (const w in irregular) {
+    const pattern = new RegExp(`${w}$`, 'i');
+    const replace = irregular[w];
+    if (pattern.test(word)) {
+      return word.replace(pattern, replace);
+    }
+  }
+  // check for matches using regular expressions
+  for (const reg in plural) {
+    const pattern = new RegExp(reg, 'i');
+    if (pattern.test(word)) {
+      return word.replace(pattern, plural[reg]);
+    }
+  }
+  return word;
+};
+
 /**
  * Extracts the domain name from a full url
  */
