pool+orders: add channel duration option to order form

Author: jamaljsr

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

@@ -13,6 +13,7 @@ describe('OrderFormSection', () => {
     store = createStore();
     await store.accountStore.fetchAccounts();
     await store.orderStore.fetchOrders();
+    await store.batchStore.fetchLeaseDurations();
   });
 
   const render = () => {
@@ -101,6 +102,31 @@ describe('OrderFormSection', () => {
     expect(ask!.details.maxBatchFeeRateSatPerKw).toBe(253);
   });
 
+  it('should submit an order with a different lease duration', async () => {
+    const { getByText, changeInput, changeSelect } = render();
+
+    changeInput('Desired Inbound Liquidity', '1000000');
+    changeInput('Bid Premium', '10000');
+    changeInput('Minimum Channel Size', '100000');
+    changeInput('Max Batch Fee Rate', '1');
+    await changeSelect('Channel Duration', '4032');
+    await changeSelect('Min Node Tier', 'T0 - All Nodes');
+
+    let bid: Required<POOL.Bid.AsObject>;
+    // capture the rate that is sent to the API
+    injectIntoGrpcUnary((_, props) => {
+      bid = (props.request.toObject() as any).bid;
+    });
+
+    fireEvent.click(getByText('Place Bid Order'));
+    expect(bid!.details.amt).toBe(1000000);
+    expect(bid!.details.rateFixed).toBe(2480);
+    expect(bid!.details.minUnitsMatch).toBe(1);
+    expect(bid!.leaseDurationBlocks).toBe(4032);
+    expect(bid!.minNodeTier).toBe(1);
+    expect(bid!.details.maxBatchFeeRateSatPerKw).toBe(253);
+  });
+
   it('should reset the form after placing an order', async () => {
     const { getByText, getByLabelText, changeInput } = render();
     changeInput('Desired Inbound Liquidity', '1000000');
@@ -202,10 +228,10 @@ describe('OrderFormSection', () => {
   });
 
   it('should display the channel duration', () => {
-    const { getByText } = render();
-    expect(getByText('Channel Duration')).toBeInTheDocument();
+    const { getByText, getAllByText } = render();
+    expect(getAllByText('Channel Duration')).toHaveLength(2);
     expect(getByText('2016 blocks')).toBeInTheDocument();
-    expect(getByText('(~2 wks)')).toBeInTheDocument();
+    expect(getByText('(~2 weeks)')).toBeInTheDocument();
   });
 
   it('should calculate the per block rate', () => {

app/src/api/pool.ts

@@ -15,15 +15,12 @@ export const FEE_RATE_TOTAL_PARTS = 1e9;
 // The amount of satoshis in one unit
 export const ONE_UNIT = 100000;
 
-// The duration of each order. This value is temporarily constant in the initial
-// release of Pool
-export const DURATION = 2016;
-
 // The minimum batch fee rate in sats/kw
 export const MIN_FEE_RATE_KW = 253;
 
 // The latest order version. This should be updated along with pool CLI
-export const ORDER_VERSION = 1;
+// see: https://github.com/lightninglabs/pool/blob/master/order/interface.go#L35
+export const ORDER_VERSION = 2;
 
 /** the names and argument types for the subscription events */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -303,7 +300,7 @@ class PoolApi extends BaseApi<PoolEvents> {
    * @param amount the amount of the order
    * @param premium the premium being paid
    */
-  calcFixedRate(amount: number, premium: number) {
+  calcFixedRate(amount: number, premium: number, duration: number) {
     const ratePct = (premium * 100) / amount;
     // rate = % / 100
     // rate = rateFixed / totalParts
@@ -312,15 +309,15 @@ class PoolApi extends BaseApi<PoolEvents> {
     const rateFixedFloat = interestRate * FEE_RATE_TOTAL_PARTS;
     // We then take this rate fixed, and divide it by the number of blocks
     // as the user wants this rate to be the final lump sum they pay.
-    return Math.floor(rateFixedFloat / DURATION);
+    return Math.floor(rateFixedFloat / duration);
   }
 
   /**
    * Calculates the percentage interest rate for a given fixed rate
    * @param fixedRate the per block fixed rate
    */
-  calcPctRate(fixedRate: number) {
-    return (fixedRate * DURATION) / FEE_RATE_TOTAL_PARTS;
+  calcPctRate(fixedRate: number, duration: number) {
+    return (fixedRate * duration) / FEE_RATE_TOTAL_PARTS;
   }
 }
 

app/src/components/pool/OrderFormSection.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { LeaseDuration } from 'types/state';
 import { usePrefixedTranslation } from 'hooks';
 import { Unit, Units } from 'util/constants';
 import { useStore } from 'store';
@@ -13,6 +14,7 @@ import {
   Small,
   SummaryItem,
 } from 'components/base';
+import BlockTime from 'components/common/BlockTime';
 import FormField from 'components/common/FormField';
 import FormInputNumber from 'components/common/FormInputNumber';
 import FormSelect from 'components/common/FormSelect';
@@ -40,7 +42,7 @@ const Styled = {
   `,
   Options: styled.div<{ visible: boolean }>`
     overflow: hidden;
-    max-height: ${props => (props.visible ? '300px' : '0')};
+    max-height: ${props => (props.visible ? '360px' : '0')};
     transition: max-height 0.3s linear;
   `,
   OptionsButton: styled(Button)`
@@ -127,6 +129,14 @@ 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>
           <FormField label={l('minChanSizeLabel')} error={orderFormView.minChanSizeError}>
             <FormInputNumber
               label={l('minChanSizeLabel')}
@@ -168,9 +178,11 @@ const OrderFormSection: React.FC = () => {
         <SummaryItem>
           <span>{l('durationLabel')}</span>
           <span className="text-right">
-            2016 blocks
+            {orderFormView.derivedDuration} blocks
             <br />
-            <Small>(~{l('durationWeeks')})</Small>
+            <Small>
+              (<BlockTime blocks={orderFormView.derivedDuration} />)
+            </Small>
           </span>
         </SummaryItem>
         <SummaryItem>

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

@@ -196,15 +196,14 @@
   "cmps.pool.OrderFormSection.premiumLabelAsk": "Ask Premium",
   "cmps.pool.OrderFormSection.premiumPlaceholder": "5,000",
   "cmps.pool.OrderFormSection.premiumSuggested": "Suggested",
+  "cmps.pool.OrderFormSection.durationLabel": "Channel Duration",
   "cmps.pool.OrderFormSection.minChanSizeLabel": "Minimum Channel Size",
   "cmps.pool.OrderFormSection.minChanSizePlaceholder": "100,000",
   "cmps.pool.OrderFormSection.viewOptions": "View Additional Options",
   "cmps.pool.OrderFormSection.hideOptions": "Hide Additional Options",
   "cmps.pool.OrderFormSection.feeLabel": "Max Batch Fee Rate",
   "cmps.pool.OrderFormSection.feePlaceholder": "100",
   "cmps.pool.OrderFormSection.tierLabel": "Min Node Tier",
-  "cmps.pool.OrderFormSection.durationLabel": "Channel Duration",
-  "cmps.pool.OrderFormSection.durationWeeks": "2 wks",
   "cmps.pool.OrderFormSection.fixedRateLabel": "Per Block Fixed Rate",
   "cmps.pool.OrderFormSection.interestLabel": "Interest Rate",
   "cmps.pool.OrderFormSection.aprLabel": "Annual Rate (APR)",
@@ -288,6 +287,7 @@
   "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.feeRateErrorMin": "minimum {{min}} sats/vByte",
   "stores.orderFormView.placeOrderLabel": "Place {{action}} Order",
   "stores.settingsStore.required": "a valid url is required",

app/src/store/models/batch.ts

@@ -100,7 +100,10 @@ export default class Batch {
 
   /** the total amount of sats earned in this batch */
   get earnedSats() {
-    const pctRate = this._store.api.pool.calcPctRate(this.clearingPriceRate);
+    const pctRate = this._store.api.pool.calcPctRate(
+      this.clearingPriceRate,
+      this.leaseDuration,
+    );
     return this.volume.mul(pctRate);
   }
 
@@ -141,7 +144,10 @@ export default class Batch {
 
   /** the batch clearing rate expressed as basis points */
   get basisPoints() {
-    const pct = this._store.api.pool.calcPctRate(this.clearingPriceRate);
+    const pct = this._store.api.pool.calcPctRate(
+      this.clearingPriceRate,
+      this.leaseDuration,
+    );
     return Math.round(pct * 100 * 100);
   }
 

app/src/store/models/order.ts

@@ -54,7 +54,7 @@ export default class Order {
 
   /** the order fixed rate expressed as basis points */
   get basisPoints() {
-    const pct = this._store.api.pool.calcPctRate(this.rateFixed);
+    const pct = this._store.api.pool.calcPctRate(this.rateFixed, this.duration);
     return Math.round(pct * 100 * 100);
   }
 

app/src/store/views/orderFormView.ts

@@ -1,9 +1,10 @@
-import { makeAutoObservable, runInAction } from 'mobx';
+import { keys, makeAutoObservable, runInAction } from 'mobx';
 import { 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';
 import { prefixTranslation } from 'util/translate';
-import { DURATION, ONE_UNIT } from 'api/pool';
+import { ONE_UNIT } from 'api/pool';
 import { Store } from 'store';
 import { NODE_TIERS, OrderType, Tier } from 'store/models/order';
 
@@ -19,6 +20,7 @@ export default class OrderFormView {
   orderType: OrderType = OrderType.Bid;
   amount = 0;
   premium = 0;
+  duration = 0;
   minChanSize = DEFAULT_MIN_CHAN_SIZE;
   maxBatchFeeRate = DEFAULT_MAX_BATCH_FEE;
   minNodeTier: Tier = NodeTier.TIER_DEFAULT;
@@ -78,6 +80,26 @@ export default class OrderFormView {
     return '';
   }
 
+  /** 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 = keys(this._store.batchStore.leaseDurations).map(duration => ({
+      label: `${duration}`,
+      value: `${duration}`,
+    }));
+    return [current, ...durations];
+  }
+
+  /** the chosen duration or the value selected in the batch store */
+  get derivedDuration() {
+    return this.duration || this._store.batchStore.selectedLeaseDuration;
+  }
+
   /** the available options for the minNodeTier field */
   get nodeTierOptions() {
     return Object.entries(NODE_TIERS).map(([value, label]) => ({ label, value }));
@@ -87,7 +109,11 @@ export default class OrderFormView {
   get perBlockFixedRate() {
     if ([this.amount, this.premium].includes(0)) return 0;
 
-    return this._store.api.pool.calcFixedRate(this.amount, this.premium);
+    return this._store.api.pool.calcFixedRate(
+      this.amount,
+      this.premium,
+      this.derivedDuration,
+    );
   }
 
   /** the premium interest of the amount in basis points */
@@ -99,7 +125,7 @@ export default class OrderFormView {
   /** the APR given the amount and premium */
   get apr() {
     if ([this.amount, this.premium].includes(0)) return 0;
-    const termInDays = DURATION / BLOCKS_PER_DAY;
+    const termInDays = this.derivedDuration / BLOCKS_PER_DAY;
     const apr = annualPercentRate(this.amount, this.premium, termInDays);
     return toPercent(apr);
   }
@@ -132,6 +158,10 @@ export default class OrderFormView {
     this.premium = premium;
   }
 
+  setDuration(duration: LeaseDuration) {
+    this.duration = duration;
+  }
+
   setMinChanSize(minChanSize: number) {
     this.minChanSize = minChanSize;
   }
@@ -151,7 +181,10 @@ export default class OrderFormView {
       if (!prevBatch) throw new Error('Previous batch not found');
       const prevFixedRate = prevBatch.clearingPriceRate;
       // get the percentage rate of the previous batch and apply to the current amount
-      const prevPctRate = this._store.api.pool.calcPctRate(prevFixedRate);
+      const prevPctRate = this._store.api.pool.calcPctRate(
+        prevFixedRate,
+        this.derivedDuration,
+      );
       const suggested = this.amount * prevPctRate;
       // round to the nearest 10 to offset lose of precision in calculating percentages
       this.premium = Math.round(suggested / 10) * 10;
@@ -174,7 +207,7 @@ export default class OrderFormView {
       this.orderType,
       this.amount,
       this.perBlockFixedRate,
-      DURATION,
+      this.derivedDuration,
       minUnitsMatch,
       satsPerKWeight,
       this.minNodeTier,
@@ -183,6 +216,7 @@ export default class OrderFormView {
       if (nonce) {
         this.amount = 0;
         this.premium = 0;
+        this.duration = 0;
         // persist the additional options so they can be used for future orders
         this._store.settingsStore.setOrderSettings(
           this.minChanSize,