tour: add in-app walk through

Author: jamaljsr

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/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/assets/icons/help-circle.svg

@@ -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/NodeStatus.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);