loop: add in-app tour of the Loop process

app/package.json

@@ -43,7 +43,9 @@
     "react-router": "5.2.0",
     "react-scripts": "3.4.1",
     "react-toastify": "6.0.6",
-    "react-virtualized": "9.21.2"
+    "react-virtualized": "9.21.2",
+    "reactour": "1.18.0",
+    "styled-components": "5.1.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "5.3.19",
@@ -67,6 +69,7 @@
     "@types/react-dom": "16.9.8",
     "@types/react-router": "5.1.8",
     "@types/react-virtualized": "9.21.10",
+    "@types/reactour": "1.17.1",
     "@typescript-eslint/eslint-plugin": "3.5.0",
     "@typescript-eslint/parser": "3.5.0",
     "cross-env": "7.0.2",

app/src/App.tsx

@@ -3,6 +3,7 @@ import './App.scss';
 import { createStore, StoreProvider } from 'store';
 import AlertContainer from 'components/common/AlertContainer';
 import { ThemeProvider } from 'components/theme';
+import TourHost from 'components/tour/TourHost';
 import Routes from './Routes';
 
 const App = () => {
@@ -13,6 +14,7 @@ const App = () => {
       <ThemeProvider>
         <Routes />
         <AlertContainer />
+        <TourHost />
       </ThemeProvider>
     </StoreProvider>
   );

app/src/__stories__/LoopPage.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
-import { observable, ObservableMap, values } from 'mobx';
+import { observable } from 'mobx';
+import { lndListChannelsMany } from 'util/tests/sampleData';
 import { useStore } from 'store';
 import { Channel } from 'store/models';
 import { Layout } from 'components/layout';
@@ -11,35 +12,23 @@ 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 = () => {
+  return <LoopPage />;
 };
 
-export const Default = () => {
-  const { channelStore } = useStore();
+export const ManyChannels = () => {
+  const store = useStore();
   useEffect(() => {
-    // only use a small set of channels
-    channelStore.channels = channelSubset(channelStore.channels);
-  }, [channelStore]);
-
+    store.channelStore.channels = observable.map();
+    lndListChannelsMany.channelsList.forEach(c => {
+      const chan = new Channel(store, c);
+      store.channelStore.channels.set(chan.chanId, chan);
+    });
+  });
   return <LoopPage />;
 };
 
-export const ManyChannels = () => <LoopPage />;
-
 export const InsideLayout = () => {
-  const { channelStore } = useStore();
-  useEffect(() => {
-    // only use a small set of channels
-    channelStore.channels = channelSubset(channelStore.channels);
-  }, [channelStore]);
-
   return (
     <Layout>
       <LoopPage />

app/src/__stories__/StoryWrapper.tsx

@@ -11,6 +11,7 @@ import { ThemeProvider } from 'components/theme';
 
 // mock the GRPC client to return sample data instead of making an actual request
 const grpc = {
+  useSampleData: true,
   request: (methodDescriptor: any, opts: any, metadata: any) => {
     // fail any authenticated requests to simulate incorrect login attempts
     if (metadata && metadata.authorization) throw new AuthenticationError();

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

@@ -79,6 +79,11 @@ describe('LoopPage component', () => {
     expect(getByText('download.svg')).toBeInTheDocument();
   });
 
+  it('should display the help icon', () => {
+    const { getByText } = render();
+    expect(getByText('help-circle.svg')).toBeInTheDocument();
+  });
+
   it('should export channels', () => {
     const { getByText } = render();
     fireEvent.click(getByText('download.svg'));

app/src/__tests__/components/tour/TourHost.spec.tsx

@@ -0,0 +1,138 @@
+import React, { Suspense } from 'react';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { renderWithProviders } from 'util/tests';
+import { prefixTranslation } from 'util/translate';
+import { createStore, Store } from 'store';
+import { Layout } from 'components/layout/Layout';
+import LoopPage from 'components/loop/LoopPage';
+import TourHost from 'components/tour/TourHost';
+
+describe('TourHost component', () => {
+  let store: Store;
+
+  beforeEach(async () => {
+    store = createStore();
+    await store.fetchAllData();
+  });
+
+  const firstLine = (text: string) => text.split('\n')[0];
+
+  const render = () => {
+    const cmp = (
+      <Suspense fallback={null}>
+        <Layout>
+          <LoopPage />
+        </Layout>
+        <TourHost />
+      </Suspense>
+    );
+    return renderWithProviders(cmp, store);
+  };
+
+  it('should open and dismiss the tour', () => {
+    const { getByText, queryByText } = render();
+    fireEvent.click(getByText('help-circle.svg'));
+    expect(getByText('Welcome to Lightning Terminal!')).toBeInTheDocument();
+    fireEvent.click(getByText('No Thanks'));
+    expect(queryByText('Welcome to Lightning Terminal!')).not.toBeInTheDocument();
+  });
+
+  it('should open the sidebar if it is collapsed', () => {
+    const { getByText } = render();
+    store.settingsStore.sidebarVisible = false;
+    store.settingsStore.autoCollapse = true;
+
+    fireEvent.click(getByText('help-circle.svg'));
+    expect(getByText('Welcome to Lightning Terminal!')).toBeInTheDocument();
+
+    fireEvent.click(getByText("Yes! Let's Go"));
+    expect(store.settingsStore.sidebarVisible).toBe(true);
+
+    fireEvent.click(getByText('Next'));
+    expect(store.settingsStore.sidebarVisible).toBe(false);
+  });
+
+  it('should walk through the full tour', async () => {
+    const { getByText } = render();
+    const { l } = prefixTranslation('cmps.tour.TextStep');
+
+    fireEvent.click(getByText('help-circle.svg'));
+    expect(getByText('Welcome to Lightning Terminal!')).toBeInTheDocument();
+
+    fireEvent.click(getByText("Yes! Let's Go"));
+    expect(getByText(l('nodeStatus'))).toBeInTheDocument();
+
+    // sample data is fetch after step #1 and we need to wait for it
+    await waitFor(() => expect(store.swapStore.sortedSwaps).toHaveLength(7));
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('history'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('inbound'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('outbound'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('channelList'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('channelListReceive'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('channelListSend'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('channelListFee'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('channelListUptime'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('channelListPeer'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('channelListCapacity'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('export'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(firstLine(l('loop')))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Loop', { selector: 'button' }));
+    expect(getByText(l('loopActions'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(firstLine(l('channelListSelect')))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(firstLine(l('loopOut')))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Loop Out', { selector: 'button' }));
+    expect(getByText(firstLine(l('loopAmount')))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next', { selector: 'button' }));
+    expect(getByText(firstLine(l('loopReview')))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Confirm', { selector: 'button' }));
+    expect(getByText(firstLine(l('loopProgress')))).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(getByText(firstLine(l('processingSwaps')))).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(l('swapProgress'))).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
+    expect(getByText(firstLine(l('swapMinimize')))).toBeInTheDocument();
+
+    fireEvent.click(getByText('minimize.svg'));
+    expect(getByText('Congratulations!')).toBeInTheDocument();
+
+    fireEvent.click(getByText('Close'));
+    expect(() => getByText('Congratulations!')).toThrow();
+  });
+});

app/src/api/grpc.ts

@@ -8,8 +8,14 @@ import {
 import { DEV_HOST } from 'config';
 import { AuthenticationError } from 'util/errors';
 import { grpcLog as log } from 'util/log';
+import { sampleApiResponses } from 'util/tests/sampleData';
 
 class GrpcClient {
+  /**
+   * Indicates if the API should return sample data instead of making real GRPC requests
+   */
+  useSampleData = false;
+
   /**
    * Executes a single GRPC request and returns a promise which will resolve with the response
    * @param methodDescriptor the GRPC method to call on the service
@@ -22,6 +28,15 @@ class GrpcClient {
     metadata?: Metadata.ConstructorArg,
   ): Promise<TRes> {
     return new Promise((resolve, reject) => {
+      if (this.useSampleData) {
+        const endpoint = `${methodDescriptor.service.serviceName}.${methodDescriptor.methodName}`;
+        const data = sampleApiResponses[endpoint] || {};
+        // the calling function expects the return value to have a `toObject` function
+        const response: any = { toObject: () => data };
+        resolve(response);
+        return;
+      }
+
       const method = `${methodDescriptor.methodName}`;
       log.debug(`${method} request`, request.toObject());
       grpc.unary(methodDescriptor, {
@@ -59,6 +74,8 @@ class GrpcClient {
     onMessage: (res: TRes) => void,
     metadata?: Metadata.ConstructorArg,
   ) {
+    if (this.useSampleData) return;
+
     const method = `${methodDescriptor.methodName}`;
     const client = grpc.client(methodDescriptor, {
       host: DEV_HOST,

app/src/api/lnd.ts

@@ -13,7 +13,7 @@ interface LndEvents {
  * An API wrapper to communicate with the LND node via GRPC
  */
 class LndApi extends BaseApi<LndEvents> {
-  private _grpc: GrpcClient;
+  _grpc: GrpcClient;
 
   constructor(grpc: GrpcClient) {
     super();

app/src/api/loop.ts

@@ -14,7 +14,7 @@ interface LoopEvents {
  * An API wrapper to communicate with the Loop daemon via GRPC
  */
 class LoopApi extends BaseApi<LoopEvents> {
-  private _grpc: GrpcClient;
+  _grpc: GrpcClient;
 
   constructor(grpc: GrpcClient) {
     super();

app/src/components/NodeStatus.tsx

@@ -30,7 +30,7 @@ const NodeStatus: React.FC = () => {
 
   const { Wrapper, Balance, Divider } = Styled;
   return (
-    <Wrapper>
+    <Wrapper data-tour="node-status">
       <HeaderFour>{l('title')}</HeaderFour>
       <Tip overlay={l('offchainTip')}>
         <Jumbo>

app/src/components/base/icons.tsx

@@ -11,6 +11,7 @@ import { ReactComponent as CloseIcon } from 'assets/icons/close.svg';
 import { ReactComponent as CopyIcon } from 'assets/icons/copy.svg';
 import { ReactComponent as DotIcon } from 'assets/icons/dot.svg';
 import { ReactComponent as DownloadIcon } from 'assets/icons/download.svg';
+import { ReactComponent as HelpCircleIcon } from 'assets/icons/help-circle.svg';
 import { ReactComponent as MaximizeIcon } from 'assets/icons/maximize.svg';
 import { ReactComponent as MenuIcon } from 'assets/icons/menu.svg';
 import { ReactComponent as MinimizeIcon } from 'assets/icons/minimize.svg';
@@ -73,6 +74,7 @@ export const ChevronsRight = Icon.withComponent(ChevronsRightIcon);
 export const Close = Icon.withComponent(CloseIcon);
 export const Copy = Icon.withComponent(CopyIcon);
 export const Dot = Icon.withComponent(DotIcon);
+export const HelpCircle = Icon.withComponent(HelpCircleIcon);
 export const Menu = Icon.withComponent(MenuIcon);
 export const Minimize = Icon.withComponent(MinimizeIcon);
 export const Maximize = Icon.withComponent(MaximizeIcon);

app/src/components/common/PageHeader.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { styled } from 'components/theme';
-import { ArrowLeft, Download, HeaderThree } from '../base';
+import { ArrowLeft, Download, HeaderThree, HelpCircle } from '../base';
 import Tip from './Tip';
 
 const Styled = {
@@ -25,7 +25,7 @@ const Styled = {
     text-align: right;
 
     svg {
-      margin-left: 50px;
+      margin-left: 20px;
     }
   `,
   BackLink: styled.a`
@@ -44,10 +44,17 @@ interface Props {
   title: ReactNode;
   onBackClick?: () => void;
   backText?: string;
+  onHelpClick?: () => void;
   onExportClick?: () => void;
 }
 
-const PageHeader: React.FC<Props> = ({ title, onBackClick, backText, onExportClick }) => {
+const PageHeader: React.FC<Props> = ({
+  title,
+  onBackClick,
+  backText,
+  onHelpClick,
+  onExportClick,
+}) => {
   const { l } = usePrefixedTranslation('cmps.common.PageHeader');
   const { settingsStore } = useStore();
 
@@ -63,12 +70,17 @@ const PageHeader: React.FC<Props> = ({ title, onBackClick, backText, onExportCli
         )}
       </Left>
       <Center>
-        <HeaderThree>{title}</HeaderThree>
+        <HeaderThree data-tour="welcome">{title}</HeaderThree>
       </Center>
       <Right>
+        {onHelpClick && (
+          <Tip placement="bottomRight" overlay={l('helpTip')}>
+            <HelpCircle size="large" onClick={onHelpClick} />
+          </Tip>
+        )}
         {onExportClick && (
           <Tip placement="bottomRight" overlay={l('exportTip')}>
-            <Download size="large" onClick={onExportClick} />
+            <Download data-tour="export" size="large" onClick={onExportClick} />
           </Tip>
         )}
       </Right>