Merge pull request #53 from lightninglabs/socket-streaming

Implement server-side streaming to update UI

Author: guggero

app/package.json

@@ -16,7 +16,6 @@
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public"
   },
-  "proxy": "https://localhost:8443",
   "dependencies": {
     "@emotion/core": "10.0.28",
     "@emotion/styled": "10.0.27",
@@ -28,8 +27,10 @@
     "debug": "4.1.1",
     "emotion-theming": "10.0.27",
     "file-saver": "2.0.2",
+    "http-proxy-middleware": "1.0.4",
     "i18next": "19.4.4",
     "i18next-browser-languagedetector": "4.1.1",
+    "lodash": "4.17.15",
     "lottie-web": "5.6.8",
     "mobx": "5.15.4",
     "mobx-react-lite": "2.0.6",
@@ -55,6 +56,7 @@
     "@types/debug": "4.1.5",
     "@types/google-protobuf": "3.7.2",
     "@types/jest": "^25.2.1",
+    "@types/lodash": "4.14.155",
     "@types/node": "^13.13.5",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
@@ -88,6 +90,7 @@
       "!src/types/**/*.{js,ts}",
       "!src/i18n/**/*.{js,ts}",
       "!src/util/tests/**/*.{ts,tsx}",
+      "!src/setupProxy.js",
       "!src/index.tsx"
     ]
   },

app/src/__mocks__/@improbable-eng/grpc-web.ts

@@ -9,6 +9,7 @@ export const grpc = {
     OK: 0,
     Canceled: 1,
   },
+  WebsocketTransport: jest.fn(),
   // mock unary function to simulate GRPC requests
   unary: jest
     .fn()
@@ -31,4 +32,14 @@ export const grpc = {
         });
       },
     ),
+  // mock client function to simulate server-side streaming
+  client: jest.fn().mockImplementation(() => {
+    return {
+      onHeaders: jest.fn(func => func()),
+      onMessage: jest.fn(func => func({ toObject: jest.fn() })),
+      onEnd: jest.fn(func => func()),
+      start: jest.fn(),
+      send: jest.fn(),
+    };
+  }),
 };

app/src/__stories__/ChannelBalance.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { lndListChannelsOne } from 'util/tests/sampleData';
+import { lndChannel } from 'util/tests/sampleData';
 import { Store, useStore } from 'store';
 import { Channel } from 'store/models';
 import ChannelBalance from 'components/loop/ChannelBalance';
@@ -11,7 +11,7 @@ export default {
 };
 
 const getChannel = (store: Store, ratio: number) => {
-  const channel = new Channel(store, lndListChannelsOne.channelsList[0]);
+  const channel = new Channel(store, lndChannel);
   channel.localBalance = channel.capacity.mul(ratio);
   channel.remoteBalance = channel.capacity.mul(1 - ratio);
   return channel;

app/src/__stories__/HistoryPage.stories.tsx

@@ -23,15 +23,13 @@ const updateSwapsStatus = (swaps: Swap[]) => {
 
 export const Default = () => {
   const store = useStore();
-  store.swapStore.stopAutoPolling();
   updateSwapsStatus(store.swapStore.sortedSwaps);
   return <HistoryPage />;
 };
 
 export const InsideLayout = () => {
   const store = useStore();
   store.uiStore.page = 'history';
-  store.swapStore.stopAutoPolling();
   updateSwapsStatus(store.swapStore.sortedSwaps);
   return (
     <Layout>

app/src/__stories__/ProcessingSwaps.stories.tsx

@@ -66,14 +66,12 @@ const delay = (timeout: number) =>
 
 export const AllSwapStates = () => {
   const store = useStore();
-  store.swapStore.stopAutoPolling();
   store.swapStore.swaps = createSwaps();
   return <ProcessingSwaps />;
 };
 
 export const LoopInProgress = () => {
   const store = useStore();
-  store.swapStore.stopAutoPolling();
   const swap = mockSwap(LOOP_IN, INITIATED);
   store.swapStore.swaps = observable.map({ [swap.id]: swap });
 
@@ -98,7 +96,6 @@ export const LoopInProgress = () => {
 
 export const LoopOutProgress = () => {
   const store = useStore();
-  store.swapStore.stopAutoPolling();
   const swap = mockSwap(LOOP_OUT, INITIATED);
   store.swapStore.swaps = observable.map({ [swap.id]: swap });
 

app/src/__stories__/StoryWrapper.tsx

@@ -20,6 +20,7 @@ const grpc = {
     const response: any = { toObject: () => data };
     return Promise.resolve(response);
   },
+  subscribe: () => undefined,
 };
 
 // fake the AppStorage dependency so that settings aren't shared across stories

app/src/__tests__/components/loop/ChannelBalance.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderWithProviders } from 'util/tests';
-import { lndListChannelsOne } from 'util/tests/sampleData';
+import { lndChannel } from 'util/tests/sampleData';
 import { createStore } from 'store';
 import { Channel } from 'store/models';
 import ChannelBalance from 'components/loop/ChannelBalance';
@@ -13,7 +13,7 @@ describe('ChannelBalance component', () => {
 
   const render = (ratio: number, active = true) => {
     const store = createStore();
-    channel = new Channel(store, lndListChannelsOne.channelsList[0]);
+    channel = new Channel(store, lndChannel);
     channel.localBalance = channel.capacity.mul(ratio);
     channel.remoteBalance = channel.capacity.mul(1 - ratio);
     channel.active = active;

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

@@ -1,5 +1,7 @@
 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';
 
@@ -65,4 +67,16 @@ describe('AuthStore', () => {
     await store.init();
     expect(store.credentials).toBe('');
   });
+
+  it('should fetch data after authentication succeeds', async () => {
+    await rootStore.init();
+    expect(rootStore.channelStore.channels.size).toBe(0);
+    await store.login('test-pw');
+    expect(store.authenticated).toBe(true);
+    await waitFor(() => {
+      expect(rootStore.channelStore.channels.size).toBe(
+        lndListChannels.channelsList.length,
+      );
+    });
+  });
 });

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

@@ -1,9 +1,10 @@
 import { observable, ObservableMap, values } from 'mobx';
+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 { BalanceMode } from 'util/constants';
-import { lndListChannels } from 'util/tests/sampleData';
+import { lndChannelEvent, lndListChannels } from 'util/tests/sampleData';
 import { createStore, Store } from 'store';
 import Channel from 'store/models/channel';
 import ChannelStore from 'store/stores/channelStore';
@@ -118,4 +119,60 @@ describe('ChannelStore', () => {
 
     expect(+store.totalOutbound).toBe(outbound);
   });
+
+  describe('onChannelEvent', () => {
+    const {
+      OPEN_CHANNEL,
+      CLOSED_CHANNEL,
+      ACTIVE_CHANNEL,
+      INACTIVE_CHANNEL,
+    } = LND.ChannelEventUpdate.UpdateType;
+
+    beforeEach(async () => {
+      await store.fetchChannels();
+    });
+
+    it('should handle inactive channel event', async () => {
+      const event = { ...lndChannelEvent, type: INACTIVE_CHANNEL };
+      const len = lndListChannels.channelsList.length;
+      expect(store.activeChannels).toHaveLength(len);
+      store.onChannelEvent(event);
+      expect(store.activeChannels).toHaveLength(len - 1);
+    });
+
+    it('should handle active channel event', async () => {
+      await store.fetchChannels();
+      const chan = store.channels.get(lndListChannels.channelsList[0].chanId) as Channel;
+      chan.active = false;
+      const event = { ...lndChannelEvent, type: ACTIVE_CHANNEL };
+      const len = lndListChannels.channelsList.length;
+      expect(store.activeChannels).toHaveLength(len - 1);
+      store.onChannelEvent(event);
+      expect(store.activeChannels).toHaveLength(len);
+    });
+
+    it('should handle open channel event', async () => {
+      const event = { ...lndChannelEvent, type: OPEN_CHANNEL };
+      event.openChannel.chanId = '12345';
+      expect(store.channels.get('12345')).toBeUndefined();
+      store.onChannelEvent(event);
+      expect(store.channels.get('12345')).toBeDefined();
+    });
+
+    it('should handle close channel event', async () => {
+      const event = { ...lndChannelEvent, type: CLOSED_CHANNEL };
+      const chanId = event.closedChannel.chanId;
+      expect(store.channels.get(chanId)).toBeDefined();
+      store.onChannelEvent(event);
+      expect(store.channels.get(chanId)).toBeUndefined();
+    });
+
+    it('should do nothing for unknown channel event type', async () => {
+      const event = { ...lndChannelEvent, type: 99 };
+      const len = lndListChannels.channelsList.length;
+      expect(store.activeChannels).toHaveLength(len);
+      store.onChannelEvent(event as any);
+      expect(store.activeChannels).toHaveLength(len);
+    });
+  });
 });

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

@@ -1,7 +1,12 @@
 import { values } from 'mobx';
 import { grpc } from '@improbable-eng/grpc-web';
 import { waitFor } from '@testing-library/react';
-import { lndChannelBalance, lndGetInfo, lndWalletBalance } from 'util/tests/sampleData';
+import {
+  lndChannelBalance,
+  lndGetInfo,
+  lndTransaction,
+  lndWalletBalance,
+} from 'util/tests/sampleData';
 import { createStore, NodeStore, Store } from 'store';
 
 const grpcMock = grpc as jest.Mocked<typeof grpc>;
@@ -60,4 +65,18 @@ describe('NodeStore', () => {
       expect(values(rootStore.uiStore.alerts)[0].message).toBe('test-err');
     });
   });
+
+  it('should handle a transaction event', () => {
+    expect(+store.wallet.walletBalance).toBe(0);
+    store.onTransaction(lndTransaction);
+    expect(+store.wallet.walletBalance).toBe(lndTransaction.amount);
+  });
+
+  it('should handle duplicate transaction events', () => {
+    expect(+store.wallet.walletBalance).toBe(0);
+    store.onTransaction(lndTransaction);
+    expect(+store.wallet.walletBalance).toBe(lndTransaction.amount);
+    store.onTransaction(lndTransaction);
+    expect(+store.wallet.walletBalance).toBe(lndTransaction.amount);
+  });
 });