pool+batches: display next fee rate in batch stats header

Author: jamaljsr

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

@@ -17,7 +17,7 @@ describe('BatchChart', () => {
     store = createStore();
     await store.orderStore.fetchOrders();
     await store.batchStore.fetchBatches();
-    await store.batchStore.fetchNextBatchTimestamp();
+    await store.batchStore.fetchNextBatchInfo();
   });
 
   const render = () => {

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

@@ -18,7 +18,7 @@ describe('BatchSection', () => {
     store = createStore();
     await store.orderStore.fetchOrders();
     await store.batchStore.fetchBatches();
-    await store.batchStore.fetchNextBatchTimestamp();
+    await store.batchStore.fetchNextBatchInfo();
     await store.batchStore.fetchNodeTier();
   });
 

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

@@ -14,7 +14,7 @@ describe('BatchStats', () => {
     store = createStore();
     await store.orderStore.fetchOrders();
     await store.batchStore.fetchBatches();
-    await store.batchStore.fetchNextBatchTimestamp();
+    await store.batchStore.fetchNextBatchInfo();
   });
 
   const render = () => {
@@ -41,14 +41,24 @@ describe('BatchStats', () => {
     jest.useRealTimers();
   });
 
+  it('should display the next fee rate', () => {
+    const { getByText } = render();
+    expect(getByText('Next Fee')).toBeInTheDocument();
+    expect(getByText(`${store.batchesView.nextFeeRate}`)).toBeInTheDocument();
+    runInAction(() => {
+      store.batchStore.nextFeeRate = 25;
+    });
+    expect(getByText('25')).toBeInTheDocument();
+  });
+
   it('should display the previous rate', () => {
-    const { getByText, getAllByText } = render();
+    const { getByText } = render();
     expect(getByText('Previous Rate')).toBeInTheDocument();
     expect(getByText(`${store.batchesView.currentRate}`)).toBeInTheDocument();
     runInAction(() => {
       store.batchStore.batches.clear();
     });
-    expect(getAllByText(`0`)).toHaveLength(2);
+    expect(getByText('0')).toBeInTheDocument();
   });
 
   it('should display the percent rate changed', () => {

app/src/components/pool/PoolPage.tsx

@@ -39,7 +39,7 @@ const PoolPage: React.FC = () => {
   useEffect(() => {
     accountStore.fetchAccounts();
     orderStore.fetchOrders();
-    batchStore.fetchNextBatchTimestamp();
+    batchStore.fetchNextBatchInfo();
     if (!batchStore.batches.size) {
       // fetch batches if there aren't any in the store
       batchStore.fetchBatches();

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

@@ -65,9 +65,9 @@ const BatchStats: React.FC = () => {
           tip={l('nextBatchTip')}
         />
         <Stat
-          label={l('prevFee')}
-          value={`${batchesView.currentFee}`}
-          tip={l('prevFeeTip')}
+          label={l('nextFeeRate')}
+          value={`${batchesView.nextFeeRate}`}
+          tip={l('nextFeeRateTip')}
           {...tipProps}
         />
         <Stat

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

@@ -160,8 +160,8 @@
   "cmps.pool.batches.BatchRowHeader.clearedRate": "Cleared Rate",
   "cmps.pool.batches.BatchStats.nextBatch": "Next Batch",
   "cmps.pool.batches.BatchStats.nextBatchTip": "Countdown until the next batch is attempted to be made",
-  "cmps.pool.batches.BatchStats.prevFee": "Previous Fee",
-  "cmps.pool.batches.BatchStats.prevFeeTip": "The fee used for the previous batch in sats/vbyte",
+  "cmps.pool.batches.BatchStats.nextFeeRate": "Next Fee",
+  "cmps.pool.batches.BatchStats.nextFeeRateTip": "The estimated fee rate (sats/vbyte) to use for the next batch",
   "cmps.pool.batches.BatchStats.prevRate": "Previous Rate",
   "cmps.pool.batches.BatchStats.prevRateTip": "The rate cleared in the previous batch ({{fixedRate}} per block)",
   "cmps.pool.batches.BatchStats.rateChange": "Change",

app/src/store/stores/batchStore.ts

@@ -37,6 +37,9 @@ export default class BatchStore {
   /** the timestamp of the next batch in seconds */
   nextBatchTimestamp = 0;
 
+  /** the fee rate (sats/vbyte) estimated by the auctioneer to use for the next batch */
+  nextFeeRate = 0;
+
   /** the tier of the current LND node */
   nodeTier?: Tier;
 
@@ -140,7 +143,7 @@ export default class BatchStore {
     try {
       const poolBatches = await this._store.api.pool.batchSnapshots(1);
       // update the timestamp of the next batch when fetching the latest batch
-      await this.fetchNextBatchTimestamp();
+      await this.fetchNextBatchInfo();
       runInAction(() => {
         // update the batches in all markets
         this.markets.forEach(m => m.update(poolBatches.batchesList, true));
@@ -156,26 +159,28 @@ export default class BatchStore {
   fetchLatestBatchThrottled = debounce(this.fetchLatestBatch, 2000);
 
   /**
-   * fetches the next batch timestamp from the API
+   * fetches the next batch info from the API and updates the next timestamp and fee rate
    */
-  async fetchNextBatchTimestamp() {
+  async fetchNextBatchInfo() {
     this._store.log.info('fetching next batch info');
     try {
-      const { clearTimestamp } = await this._store.api.pool.nextBatchInfo();
+      const res = await this._store.api.pool.nextBatchInfo();
       runInAction(() => {
-        this.setNextBatchTimestamp(clearTimestamp);
+        this.setNextBatchTimestamp(res.clearTimestamp);
         this._store.log.info(
           'updated batchStore.nextBatchTimestamp',
           this.nextBatchTimestamp,
         );
+        this.setNextFeeRate(res.feeRateSatPerKw);
+        this._store.log.info('updated batchStore.nextFeeRate', this.nextFeeRate);
       });
     } catch (error) {
-      this._store.appView.handleError(error, 'Unable to fetch the next batch timestamp');
+      this._store.appView.handleError(error, 'Unable to fetch the next batch info');
     }
   }
 
   /**
-   * fetches the next batch timestamp from the API
+   * fetches the current lnd node's tier from the API
    */
   async fetchNodeTier() {
     this._store.log.info('fetching node tier');
@@ -263,6 +268,14 @@ export default class BatchStore {
     this._nextBatchTimer = setTimeout(this.fetchLatestBatch, ms + 3000);
   }
 
+  /**
+   * sets the nextFeeRate by converting the provided sats/kw to sats/vbyte
+   */
+  setNextFeeRate(satsPerKWeight: number) {
+    const satsPerVbyte = this._store.api.pool.satsPerKWeightToVByte(satsPerKWeight);
+    this.nextFeeRate = Math.ceil(satsPerVbyte);
+  }
+
   startPolling() {
     if (IS_TEST) return;
     if (this._pollingInterval) this.stopPolling();

app/src/store/views/batchesView.ts

@@ -47,9 +47,9 @@ export default class BatchesView {
     return toPercent((currentRate - priorRate) / priorRate);
   }
 
-  /** the fee used for the last batch */
-  get currentFee() {
-    return this.batches.length ? this.batches[0].feeLabel : 0;
+  /** the fee rate (sats/vbyte) estimated by the auctioneer to use for the next batch */
+  get nextFeeRate() {
+    return this._store.batchStore.nextFeeRate;
   }
 
   /** the tier of the current LND node as a user-friendly string */