channels: display remote fee rates on Loop page

Author: jamaljsr

app/src/__tests__/store/channelStore.spec.ts

@@ -8,6 +8,7 @@ import { BalanceMode } from 'util/constants';
 import {
   lndChannel,
   lndChannelEvent,
+  lndGetChanInfo,
   lndGetNodeInfo,
   lndListChannels,
 } from 'util/tests/sampleData';
@@ -132,7 +133,7 @@ describe('ChannelStore', () => {
     const channel = store.channels.get(lndChannel.chanId) as Channel;
     expect(channel.alias).toBeUndefined();
     // the alias is fetched from the API and should be updated after a few ticks
-    waitFor(() => {
+    await waitFor(() => {
       expect(channel.alias).toBe(lndGetNodeInfo.node.alias);
     });
   });
@@ -157,6 +158,40 @@ describe('ChannelStore', () => {
     expect(grpcMock.unary).not.toBeCalled();
   });
 
+  it('should fetch fee rates for channels', async () => {
+    await store.fetchChannels();
+    const channel = store.channels.get(lndChannel.chanId) as Channel;
+    expect(channel.remoteFeeRate).toBe(0);
+    // the alias is fetched from the API and should be updated after a few ticks
+    await waitFor(() => {
+      const rate = +Big(lndGetChanInfo.node1Policy.feeRateMilliMsat)
+        .div(1000000)
+        .mul(100);
+      expect(channel.remoteFeeRate).toBe(rate);
+    });
+  });
+
+  it('should use cached fee rates for channels', async () => {
+    const rate = +Big(lndGetChanInfo.node1Policy.feeRateMilliMsat).div(1000000).mul(100);
+    const cache = {
+      lastUpdated: Date.now(),
+      feeRates: {
+        [lndGetChanInfo.channelId]: rate,
+      },
+    };
+    const getMock = appStorageMock.mock.instances[0].get as jest.Mock;
+    getMock.mockImplementationOnce(() => cache);
+
+    const channel = new Channel(rootStore, lndChannel);
+    store.channels = observable.map({
+      [channel.chanId]: channel,
+    });
+
+    await store.fetchFeeRates();
+    expect(channel.remoteFeeRate).toBe(rate);
+    expect(grpcMock.unary).not.toBeCalled();
+  });
+
   describe('onChannelEvent', () => {
     const {
       OPEN_CHANNEL,

app/src/api/lnd.ts

@@ -66,6 +66,16 @@ class LndApi extends BaseApi<LndEvents> {
     return res.toObject();
   }
 
+  /**
+   * call the LND `GetChanInfo` RPC and return the response
+   */
+  async getChannelInfo(id: string): Promise<LND.ChannelEdge.AsObject> {
+    const req = new LND.ChanInfoRequest();
+    req.setChanId(id);
+    const res = await this._grpc.request(Lightning.GetChanInfo, req, this._meta);
+    return res.toObject();
+  }
+
   /**
    * Connect to the LND streaming endpoints
    */

app/src/components/loop/ChannelBalance.tsx

@@ -9,6 +9,7 @@ const Styled = {
   Wrapper: styled.div<{ pct: number; status: BalanceStatus; active: boolean }>`
     display: flex;
     width: 100%;
+    padding: 0 5%;
 
     > div {
       min-width: 6px;

app/src/components/loop/ChannelRow.tsx

@@ -39,6 +39,10 @@ const Styled = {
   Column: styled(Column)<{ last?: boolean }>`
     white-space: nowrap;
     line-height: ${ROW_HEIGHT}px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-left: 5px;
+    padding-right: ${props => (props.last ? '15' : '5')}px;
   `,
   StatusIcon: styled.span`
     float: left;
@@ -58,6 +62,7 @@ const Styled = {
 
 export const ChannelRowHeader: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.loop.ChannelRowHeader');
+  const { Column } = Styled;
   return (
     <Row>
       <Column right>
@@ -67,13 +72,16 @@ export const ChannelRowHeader: React.FC = () => {
       <Column>
         <HeaderFour>{l('canSend')}</HeaderFour>
       </Column>
-      <Column>
+      <Column cols={1}>
+        <HeaderFour>{l('feeRate')}</HeaderFour>
+      </Column>
+      <Column cols={1}>
         <HeaderFour>{l('upTime')}</HeaderFour>
       </Column>
-      <Column>
+      <Column cols={2}>
         <HeaderFour>{l('peer')}</HeaderFour>
       </Column>
-      <Column right>
+      <Column right last>
         <HeaderFour>{l('capacity')}</HeaderFour>
       </Column>
     </Row>
@@ -134,8 +142,9 @@ const ChannelRow: React.FC<Props> = ({ channel, style }) => {
       <Column>
         <Unit sats={channel.localBalance} suffix={false} />
       </Column>
-      <Column>{channel.uptimePercent}</Column>
-      <Column>
+      <Column cols={1}>{channel.remoteFeeRate}</Column>
+      <Column cols={1}>{channel.uptimePercent}</Column>
+      <Column cols={2}>
         <Tip overlay={channel.remotePubkey} placement="left">
           <span>{channel.aliasLabel}</span>
         </Tip>

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

@@ -21,6 +21,7 @@
   "cmps.history.HistoryRowHeader.updated": "Updated",
   "cmps.loop.ChannelRowHeader.canReceive": "Can Receive",
   "cmps.loop.ChannelRowHeader.canSend": "Can Send",
+  "cmps.loop.ChannelRowHeader.feeRate": "In Fee %",
   "cmps.loop.ChannelRowHeader.upTime": "Up Time %",
   "cmps.loop.ChannelRowHeader.peer": "Peer/Alias",
   "cmps.loop.ChannelRowHeader.capacity": "Capacity",

app/src/store/models/channel.ts

@@ -18,6 +18,7 @@ export default class Channel {
   @observable capacity = Big(0);
   @observable localBalance = Big(0);
   @observable remoteBalance = Big(0);
+  @observable remoteFeeRate = 0;
   @observable active = false;
   @observable uptime = Big(0);
   @observable lifetime = Big(0);

app/src/store/stores/channelStore.ts

@@ -22,11 +22,18 @@ const {
 
 interface AliasCache {
   lastUpdated: number;
+  /** mapping from remove pubkey to alias */
   aliases: Record<string, string>;
 }
 
+interface FeeCache {
+  lastUpdated: number;
+  /** mapping form channel id to fee rate */
+  feeRates: Record<string, number>;
+}
+
 /** cache alias data for 24 hours */
-const ALIAS_CACHE_TIMEOUT = 24 * 60 * 60 * 1000;
+const CACHE_TIMEOUT = 24 * 60 * 60 * 1000;
 
 export default class ChannelStore {
   private _store: Store;
@@ -103,6 +110,8 @@ export default class ChannelStore {
         this._store.log.info('updated channelStore.channels', toJS(this.channels));
         // fetch the aliases for each of the channels
         this.fetchAliases();
+        // fetch the remote fee rates for each of the channels
+        this.fetchFeeRates();
       });
     } catch (error) {
       this._store.uiStore.handleError(error, 'Unable to fetch Channels');
@@ -129,7 +138,7 @@ export default class ChannelStore {
 
     // look up cached data in storage
     let cachedAliases = this._store.storage.get<AliasCache>('aliases');
-    if (cachedAliases && cachedAliases.lastUpdated > Date.now() - ALIAS_CACHE_TIMEOUT) {
+    if (cachedAliases && cachedAliases.lastUpdated > Date.now() - CACHE_TIMEOUT) {
       // there is cached data and it has not expired
       aliases = cachedAliases.aliases;
       // exclude pubkeys which we have aliases for already
@@ -162,11 +171,75 @@ export default class ChannelStore {
     runInAction('fetchAliasesContinuation', () => {
       // set the alias on each channel in the store
       values(this.channels).forEach(c => {
-        if (aliases[c.remotePubkey]) {
-          c.alias = aliases[c.remotePubkey];
+        const alias = aliases[c.remotePubkey];
+        if (alias) {
+          c.alias = alias;
+          this._store.log.info(`updated channel ${c.chanId} with alias ${alias}`);
+        }
+      });
+    });
+  }
+
+  /**
+   * queries the LND api to fetch the fees for all of the peers we have
+   * channels opened with
+   */
+  @action.bound
+  async fetchFeeRates() {
+    this._store.log.info('fetching fees for channels');
+    // create an array of all channel ids
+    let chanIds = values(this.channels)
+      .map(c => c.chanId)
+      .filter((r, i, a) => a.indexOf(r) === i); // remove duplicates
+
+    // create a map of chan id to fee rate
+    let feeRates: Record<string, number> = {};
+
+    // look up cached data in storage
+    let cachedFees = this._store.storage.get<FeeCache>('fee-rates');
+    if (cachedFees && cachedFees.lastUpdated > Date.now() - CACHE_TIMEOUT) {
+      // there is cached data and it has not expired
+      feeRates = cachedFees.feeRates;
+      // exclude chanIds which we have feeRates for already
+      chanIds = chanIds.filter(id => !feeRates[id]);
+      this._store.log.info(`found feeRates in cache. ${chanIds.length} missing`, chanIds);
+    }
+
+    // if there are any chanIds that we do not have a cached fee rate for
+    if (chanIds.length) {
+      // call getNodeInfo for each chan id and wait for all the requests to complete
+      const chanInfos = await Promise.all(
+        chanIds.map(id => this._store.api.lnd.getChannelInfo(id)),
+      );
+
+      // add fetched feeRates to the mapping
+      feeRates = chanInfos.reduce((acc, info) => {
+        const { channelId, node1Pub, node1Policy, node2Policy } = info;
+        const localPubkey = this._store.nodeStore.pubkey;
+        const policy = node1Pub === localPubkey ? node2Policy : node1Policy;
+        if (policy) {
+          acc[channelId] = +Big(policy.feeRateMilliMsat).div(1000000).mul(100);
+        }
+        return acc;
+      }, feeRates);
+
+      // save updated feeRates to the cache in storage
+      cachedFees = {
+        lastUpdated: Date.now(),
+        feeRates,
+      };
+      this._store.storage.set('fee-rates', cachedFees);
+      this._store.log.info(`updated cache with ${chanIds.length} new feeRates`);
+    }
+
+    runInAction('fetchFeesContinuation', () => {
+      // set the fee on each channel in the store
+      values(this.channels).forEach(c => {
+        if (feeRates[c.chanId]) {
+          c.remoteFeeRate = feeRates[c.chanId];
         }
       });
-      this._store.log.info('updated channels with aliases', toJS(this.channels));
+      this._store.log.info('updated channels with feeRates', toJS(this.channels));
     });
   }
 
@@ -206,6 +279,8 @@ export default class ChannelStore {
       this._store.nodeStore.fetchBalancesThrottled();
       // fetch the alias for the added channel
       this.fetchAliases();
+      // fetch the remote fee rates for the added channel
+      this.fetchFeeRates();
     }
   }
 

app/src/util/tests/sampleData.ts

@@ -175,6 +175,33 @@ export const lndTransaction: LND.Transaction.AsObject = {
   txHash: '1f765f45f2a6d33837a203e3fc911915c891e9b86f9c9d91a1931b92efdedf5b',
 };
 
+export const lndGetChanInfo: Required<LND.ChannelEdge.AsObject> = {
+  channelId: lndChannel.chanId,
+  chanPoint: lndChannel.channelPoint,
+  lastUpdate: 1591622793,
+  node1Pub: lndGetInfo.identityPubkey,
+  node2Pub: '021626ad63f6876f2baa6000739312690b027ec289b9d1bf9184f3194e8c923dad',
+  capacity: 1800000,
+  node1Policy: {
+    timeLockDelta: 3000,
+    minHtlc: 1000,
+    feeBaseMsat: 3000,
+    feeRateMilliMsat: 300,
+    disabled: false,
+    maxHtlcMsat: 1782000000,
+    lastUpdate: 1591622793,
+  },
+  node2Policy: {
+    timeLockDelta: 40,
+    minHtlc: 1000,
+    feeBaseMsat: 1000,
+    feeRateMilliMsat: 1,
+    disabled: false,
+    maxHtlcMsat: 1782000000,
+    lastUpdate: 1591622772,
+  },
+};
+
 //
 // Loop API Responses
 //
@@ -214,6 +241,7 @@ export const loopQuote: LOOP.QuoteResponse.AsObject = {
 export const sampleApiResponses: Record<string, any> = {
   'lnrpc.Lightning.GetInfo': lndGetInfo,
   'lnrpc.Lightning.GetNodeInfo': lndGetNodeInfo,
+  'lnrpc.Lightning.GetChanInfo': lndGetChanInfo,
   'lnrpc.Lightning.ChannelBalance': lndChannelBalance,
   'lnrpc.Lightning.WalletBalance': lndWalletBalance,
   'lnrpc.Lightning.ListChannels': lndListChannels,