Merge pull request #55 from lightninglabs/alias-fees

jamaljsr · web-flow · commit 11ba8a7236f5 · 2020-06-12T10:15:18.000-04:00
Add alias and fees to channel list
diff --git a/app/src/__stories__/LoopPage.stories.tsx b/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 />;
 };
diff --git a/app/src/__stories__/StoryWrapper.tsx b/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,13 +25,14 @@ 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,
   });
   setSession = () => undefined;
   getSession = () => '';
+  getCached = () => Promise.resolve({});
 }
 
 // Create a store that pulls data from the mock GRPC and doesn't use
diff --git a/app/src/__tests__/components/loop/ChannelRow.spec.tsx b/app/src/__tests__/components/loop/ChannelRow.spec.tsx
@@ -49,9 +49,9 @@ describe('ChannelRow component', () => {
     expect(getByText(channel.uptime.toString())).toBeInTheDocument();
   });
 
-  it('should display the peer pubkey', () => {
+  it('should display the peer pubkey or alias', () => {
     const { getByText } = render();
-    expect(getByText(channel.ellipsedPubkey)).toBeInTheDocument();
+    expect(getByText(channel.aliasLabel)).toBeInTheDocument();
   });
 
   it('should display the capacity', () => {
diff --git a/app/src/__tests__/store/authStore.spec.ts b/app/src/__tests__/store/authStore.spec.ts
@@ -1,12 +1,9 @@
 import { grpc } from '@improbable-eng/grpc-web';
 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>>;
 
 describe('AuthStore', () => {
   let rootStore: Store;
@@ -47,8 +44,9 @@ describe('AuthStore', () => {
   });
 
   it('should load credentials from session storage', async () => {
-    const getMock = appStorageMock.mock.instances[0].getSession as jest.Mock;
-    getMock.mockReturnValue('test-creds');
+    jest
+      .spyOn(window.sessionStorage.__proto__, 'getItem')
+      .mockReturnValueOnce('test-creds');
     await store.init();
     expect(store.credentials).toBe('test-creds');
   });
@@ -62,8 +60,9 @@ describe('AuthStore', () => {
       }
       return undefined as any;
     });
-    const getMock = appStorageMock.mock.instances[0].getSession as jest.Mock;
-    getMock.mockReturnValue('test-creds');
+    jest
+      .spyOn(window.sessionStorage.__proto__, 'getItem')
+      .mockReturnValueOnce('test-creds');
     await store.init();
     expect(store.credentials).toBe('');
   });
diff --git a/app/src/__tests__/store/channelStore.spec.ts b/app/src/__tests__/store/channelStore.spec.ts
@@ -4,7 +4,13 @@ import { grpc } from '@improbable-eng/grpc-web';
 import { waitFor } from '@testing-library/react';
 import Big from 'big.js';
 import { BalanceMode } from 'util/constants';
-import { lndChannelEvent, lndListChannels } from 'util/tests/sampleData';
+import {
+  lndChannel,
+  lndChannelEvent,
+  lndGetChanInfo,
+  lndGetNodeInfo,
+  lndListChannels,
+} from 'util/tests/sampleData';
 import { createStore, Store } from 'store';
 import Channel from 'store/models/channel';
 import ChannelStore from 'store/stores/channelStore';
@@ -120,6 +126,72 @@ describe('ChannelStore', () => {
     expect(+store.totalOutbound).toBe(outbound);
   });
 
+  it('should fetch aliases for channels', async () => {
+    await store.fetchChannels();
+    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
+    await waitFor(() => {
+      expect(channel.alias).toBe(lndGetNodeInfo.node.alias);
+    });
+  });
+
+  it('should use cached aliases for channels', async () => {
+    const cache = {
+      expires: Date.now() + 60 * 1000,
+      data: {
+        [lndGetNodeInfo.node.pubKey]: lndGetNodeInfo.node.alias,
+      },
+    };
+    jest
+      .spyOn(window.sessionStorage.__proto__, 'getItem')
+      .mockReturnValue(JSON.stringify(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();
+  });
+
+  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 = {
+      expires: Date.now() + 60 * 1000,
+      data: {
+        [lndGetChanInfo.channelId]: rate,
+      },
+    };
+    jest
+      .spyOn(window.sessionStorage.__proto__, 'getItem')
+      .mockReturnValue(JSON.stringify(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,
diff --git a/app/src/__tests__/store/settingsStore.spec.ts b/app/src/__tests__/store/settingsStore.spec.ts
@@ -1,9 +1,5 @@
-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>>;
 
 describe('SettingsStore', () => {
   let store: SettingsStore;
@@ -13,12 +9,13 @@ describe('SettingsStore', () => {
   });
 
   it('should load settings', async () => {
-    const getMock = appStorageMock.mock.instances[0].get as jest.Mock;
-    getMock.mockImplementation(() => ({
-      sidebarVisible: false,
-      unit: Unit.bits,
-      balanceMode: BalanceMode.routing,
-    }));
+    jest.spyOn(window.localStorage.__proto__, 'getItem').mockReturnValueOnce(
+      JSON.stringify({
+        sidebarVisible: false,
+        unit: Unit.bits,
+        balanceMode: BalanceMode.routing,
+      }),
+    );
 
     store.load();
 
@@ -28,9 +25,6 @@ describe('SettingsStore', () => {
   });
 
   it('should do nothing if nothing is saved in storage', () => {
-    const getMock = appStorageMock.mock.instances[0].get as jest.Mock;
-    getMock.mockReturnValue(undefined as any);
-
     store.load();
 
     expect(store.sidebarVisible).toEqual(true);
diff --git a/app/src/__tests__/util/appStorage.spec.ts b/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);
diff --git a/app/src/api/lnd.ts b/app/src/api/lnd.ts
@@ -56,6 +56,26 @@ class LndApi extends BaseApi<LndEvents> {
     return res.toObject();
   }
 
+  /**
+   * call the LND `GetNodeInfo` RPC and return the response
+   */
+  async getNodeInfo(pubkey: string): Promise<LND.NodeInfo.AsObject> {
+    const req = new LND.NodeInfoRequest();
+    req.setPubKey(pubkey);
+    const res = await this._grpc.request(Lightning.GetNodeInfo, req, this._meta);
+    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
    */
diff --git a/app/src/components/loop/ChannelBalance.tsx b/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;
diff --git a/app/src/components/loop/ChannelRow.tsx b/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,10 +142,11 @@ 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.ellipsedPubkey}</span>
+          <span>{channel.aliasLabel}</span>
         </Tip>
       </Column>
       <Column right>
diff --git a/app/src/i18n/locales/en-US.json b/app/src/i18n/locales/en-US.json
@@ -21,8 +21,9 @@
   "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 Pubkey",
+  "cmps.loop.ChannelRowHeader.peer": "Peer/Alias",
   "cmps.loop.ChannelRowHeader.capacity": "Capacity",
   "cmps.loop.LoopActions.channelsSelected": "channels selected",
   "cmps.loop.LoopActions.loopInNote": "For multi Loop In, all channels must use the same peer.",
diff --git a/app/src/setupTests.ts b/app/src/setupTests.ts
@@ -10,8 +10,11 @@ import './i18n';
 // adds support for lottie-web animations in unit test env
 import 'jest-canvas-mock';
 
-// don't use the real localStorage in unit tests
-jest.mock('util/appStorage');
+// mock localStorage & sessionStorage in unit tests
+jest.spyOn(window.localStorage.__proto__, 'setItem');
+jest.spyOn(window.localStorage.__proto__, 'getItem');
+jest.spyOn(window.sessionStorage.__proto__, 'setItem');
+jest.spyOn(window.sessionStorage.__proto__, 'getItem');
 
 beforeEach(() => {
   jest.clearAllMocks();
diff --git a/app/src/store/models/channel.ts b/app/src/store/models/channel.ts
@@ -13,10 +13,12 @@ export default class Channel {
 
   @observable chanId = '';
   @observable remotePubkey = '';
+  @observable alias: string | undefined;
   @observable channelPoint = '';
   @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);
@@ -27,10 +29,15 @@ export default class Channel {
   }
 
   /**
-   * The remotePubkey shortened to ~20 chars with ellipses inside
+   * The alias or remotePubkey shortened to 12 chars with ellipses inside
    */
-  @computed get ellipsedPubkey() {
-    return ellipseInside(this.remotePubkey);
+  @computed get aliasLabel() {
+    // 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);
   }
 
   /**
diff --git a/app/src/store/store.ts b/app/src/store/store.ts
diff --git a/app/src/store/stores/channelStore.ts b/app/src/store/stores/channelStore.ts
diff --git a/app/src/store/stores/settingsStore.ts b/app/src/store/stores/settingsStore.ts
diff --git a/app/src/util/appStorage.ts b/app/src/util/appStorage.ts
diff --git a/app/src/util/tests/sampleData.ts b/app/src/util/tests/sampleData.ts
