channels: cache aliases to reduce API requests

Author: jamaljsr

app/src/__stories__/LoopPage.stories.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import { observable, ObservableMap, values } from 'mobx';
 import { useStore } from 'store';
+import { Channel } from 'store/models';
 import { Layout } from 'components/layout';
 import LoopPage from 'components/loop/LoopPage';
 
@@ -9,10 +11,20 @@ export default {
   parameters: { contained: true },
 };
 
+const channelSubset = (channels: ObservableMap<string, Channel>) => {
+  const few = values(channels)
+    .slice(0, 20)
+    .reduce((result, c) => {
+      result[c.chanId] = c;
+      return result;
+    }, {} as Record<string, Channel>);
+  return observable.map(few);
+};
+
 export const Default = () => {
-  const store = useStore();
+  const { channelStore } = useStore();
   // only use a small set of channels
-  store.channelStore.sortedChannels.splice(10);
+  channelStore.channels = channelSubset(channelStore.channels);
 
   return <LoopPage />;
 };

app/src/__stories__/StoryWrapper.tsx

@@ -4,7 +4,6 @@ import { BalanceMode, Unit } from 'util/constants';
 import { AuthenticationError } from 'util/errors';
 import { sampleApiResponses } from 'util/tests/sampleData';
 import { createStore, StoreProvider } from 'store';
-import { PersistentSettings } from 'store/stores/settingsStore';
 import { Background } from 'components/base';
 import { ThemeProvider } from 'components/theme';
 
@@ -26,7 +25,7 @@ const grpc = {
 // fake the AppStorage dependency so that settings aren't shared across stories
 class StoryAppStorage {
   set = () => undefined;
-  get = (): PersistentSettings => ({
+  get = (): any => ({
     sidebarVisible: true,
     unit: Unit.sats,
     balanceMode: BalanceMode.receive,

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

@@ -3,10 +3,9 @@ import { waitFor } from '@testing-library/react';
 import AppStorage from 'util/appStorage';
 import { lndListChannels } from 'util/tests/sampleData';
 import { AuthStore, createStore, Store } from 'store';
-import { PersistentSettings } from 'store/stores/settingsStore';
 
 const grpcMock = grpc as jest.Mocked<typeof grpc>;
-const appStorageMock = AppStorage as jest.Mock<AppStorage<PersistentSettings>>;
+const appStorageMock = AppStorage as jest.Mock<AppStorage>;
 
 describe('AuthStore', () => {
   let rootStore: Store;

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

@@ -3,6 +3,7 @@ import * as LND from 'types/generated/lnd_pb';
 import { grpc } from '@improbable-eng/grpc-web';
 import { waitFor } from '@testing-library/react';
 import Big from 'big.js';
+import AppStorage from 'util/appStorage';
 import { BalanceMode } from 'util/constants';
 import {
   lndChannel,
@@ -15,6 +16,7 @@ import Channel from 'store/models/channel';
 import ChannelStore from 'store/stores/channelStore';
 
 const grpcMock = grpc as jest.Mocked<typeof grpc>;
+const appStorageMock = AppStorage as jest.Mock<AppStorage>;
 
 describe('ChannelStore', () => {
   let rootStore: Store;
@@ -135,6 +137,26 @@ describe('ChannelStore', () => {
     });
   });
 
+  it('should use cached aliases for channels', async () => {
+    const cache = {
+      lastUpdated: Date.now(),
+      aliases: {
+        [lndGetNodeInfo.node.pubKey]: lndGetNodeInfo.node.alias,
+      },
+    };
+    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.fetchAliases();
+    expect(channel.alias).toBe(lndGetNodeInfo.node.alias);
+    expect(grpcMock.unary).not.toBeCalled();
+  });
+
   describe('onChannelEvent', () => {
     const {
       OPEN_CHANNEL,

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

@@ -1,9 +1,8 @@
 import AppStorage from 'util/appStorage';
 import { BalanceMode, Unit } from 'util/constants';
 import { createStore, SettingsStore } from 'store';
-import { PersistentSettings } from 'store/stores/settingsStore';
 
-const appStorageMock = AppStorage as jest.Mock<AppStorage<PersistentSettings>>;
+const appStorageMock = AppStorage as jest.Mock<AppStorage>;
 
 describe('SettingsStore', () => {
   let store: SettingsStore;

app/src/__tests__/util/appStorage.spec.ts

@@ -9,7 +9,7 @@ describe('appStorage util', () => {
     someString: 'abc',
     someBool: false,
   };
-  const appStorage = new AppStorage<typeof settings>();
+  const appStorage = new AppStorage();
 
   it('should save an object to localStorage', () => {
     appStorage.set(key, settings);

app/src/store/models/channel.ts

@@ -28,10 +28,15 @@ export default class Channel {
   }
 
   /**
-   * The alias or remotePubkey shortened to ~20 chars with ellipses inside
+   * The alias or remotePubkey shortened to 12 chars with ellipses inside
    */
   @computed get aliasLabel() {
-    return this.alias || ellipseInside(this.remotePubkey);
+    // if the node does not specify an alias, it is set to a substring of
+    // the pubkey. we want to the display the ellipsed pubkey in this case
+    // instead of the substring.
+    return this.alias && !this.remotePubkey.includes(this.alias as string)
+      ? this.alias
+      : ellipseInside(this.remotePubkey);
   }
 
   /**

app/src/store/store.ts

@@ -13,7 +13,6 @@ import {
   SwapStore,
   UiStore,
 } from './stores';
-import { PersistentSettings } from './stores/settingsStore';
 
 /**
  * The store used to manage global app state
@@ -40,7 +39,7 @@ export class Store {
   log: Logger;
 
   /** the wrapper class around persistent storage */
-  storage: AppStorage<PersistentSettings>;
+  storage: AppStorage;
 
   /** the class to use for exporting lists of models to CSV */
   csv: CsvExporter;
@@ -54,7 +53,7 @@ export class Store {
   constructor(
     lnd: LndApi,
     loop: LoopApi,
-    storage: AppStorage<PersistentSettings>,
+    storage: AppStorage,
     csv: CsvExporter,
     log: Logger,
   ) {
@@ -149,10 +148,7 @@ export class Store {
  * @param grpcClient an alternate GrpcClient to use instead of the default
  * @param appStorage an alternate AppStorage to use instead of the default
  */
-export const createStore = (
-  grpcClient?: GrpcClient,
-  appStorage?: AppStorage<PersistentSettings>,
-) => {
+export const createStore = (grpcClient?: GrpcClient, appStorage?: AppStorage) => {
   const grpc = grpcClient || new GrpcClient();
   const storage = appStorage || new AppStorage();
   const lndApi = new LndApi(grpc);

app/src/store/stores/channelStore.ts

@@ -20,6 +20,14 @@ const {
   INACTIVE_CHANNEL,
 } = ChannelEventUpdate.UpdateType;
 
+interface AliasCache {
+  lastUpdated: number;
+  aliases: Record<string, string>;
+}
+
+/** cache alias data for 24 hours */
+const ALIAS_CACHE_TIMEOUT = 24 * 60 * 60 * 1000;
+
 export default class ChannelStore {
   private _store: Store;
 
@@ -110,26 +118,55 @@ export default class ChannelStore {
    */
   @action.bound
   async fetchAliases() {
-    const pubKeys = values(this.channels)
+    this._store.log.info('fetching aliases for channels');
+    // create an array of all channel pubkeys
+    let pubkeys = values(this.channels)
       .map(c => c.remotePubkey)
       .filter((r, i, a) => a.indexOf(r) === i); // remove duplicates
-    // call getNodeInfo for each pubkey and wait for all the requests to complete
-    const nodeInfos = await Promise.all(
-      pubKeys.map(pk => this._store.api.lnd.getNodeInfo(pk)),
-    );
 
-    // create a map of pubKey to alias
-    const aliases = nodeInfos.reduce((acc, { node }) => {
-      if (node) acc[node.pubKey] = node.alias;
-      return acc;
-    }, {} as Record<string, string>);
+    // create a map of pubkey to alias
+    let aliases: Record<string, string> = {};
+
+    // look up cached data in storage
+    let cachedAliases = this._store.storage.get<AliasCache>('aliases');
+    if (cachedAliases && cachedAliases.lastUpdated > Date.now() - ALIAS_CACHE_TIMEOUT) {
+      // there is cached data and it has not expired
+      aliases = cachedAliases.aliases;
+      // exclude pubkeys which we have aliases for already
+      pubkeys = pubkeys.filter(pk => !aliases[pk]);
+      this._store.log.info(`found aliases in cache. ${pubkeys.length} missing`, pubkeys);
+    }
+
+    // if there are any pubkeys that we do not have a cached alias for
+    if (pubkeys.length) {
+      // call getNodeInfo for each pubkey and wait for all the requests to complete
+      const nodeInfos = await Promise.all(
+        pubkeys.map(pk => this._store.api.lnd.getNodeInfo(pk)),
+      );
+
+      // add fetched aliases to the mapping
+      aliases = nodeInfos.reduce((acc, { node }) => {
+        if (node) acc[node.pubKey] = node.alias;
+        return acc;
+      }, aliases);
+
+      // save updated aliases to the cache in storage
+      cachedAliases = {
+        lastUpdated: Date.now(),
+        aliases,
+      };
+      this._store.storage.set('aliases', cachedAliases);
+      this._store.log.info(`updated cache with ${pubkeys.length} new aliases`);
+    }
 
     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];
         }
       });
+      this._store.log.info('updated channels with aliases', toJS(this.channels));
     });
   }
 

app/src/store/stores/settingsStore.ts

@@ -76,7 +76,7 @@ export default class SettingsStore {
   @action.bound
   load() {
     this._store.log.info('loading settings from localStorage');
-    const settings = this._store.storage.get('settings');
+    const settings = this._store.storage.get<PersistentSettings>('settings');
     if (settings) {
       this.sidebarVisible = settings.sidebarVisible;
       this.unit = settings.unit;