multi: minor improvements based on team feedback

README.md

@@ -36,6 +36,11 @@ only need to download one executable and run one command to get LiT up and runni
 include the CLI binaries `lncli`, `loop` and `frcli` for convenience in the downloadable
 archives as well.
 
+## Usage
+
+Read the [Walkthrough](doc/WALKTHROUGH.md) document to learn more about how to use
+Lightning Terminal.
+
 ## Installation
 
 There are two options for installing LiT: download the published binaries for your
@@ -53,25 +58,20 @@ on your computer.
 To compile from source code, you'll need to have some prerequisite developer tooling
 installed on your machine.
 
-- **Go**: LiT's backend web server is written in Go. Instructions for installing Go for
-  your operating system can be found on the
-  [golang install](https://golang.org/doc/install) page. The minimum version supported is
-  Go v1.13.
-- **NodeJS**: LiT's frontend is written in TypeScript and built on top of the React JS web
-  framework. To bundle the assets into Javascript & CSS compatible with web browsers,
-  NodeJS is required. It can be downloaded and installed by following the instructions on
-  the [NodeJS download](https://nodejs.org/en/download/) page.
-- **Yarn**: a popular package manager for NodeJS application dependencies. Installation
-  information can be found on the
-  [Yarn Installation](https://classic.yarnpkg.com/en/docs/install) page.
+| Dependency                                          | Description                                                                                                                                                                          |
+| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [golang](https://golang.org/doc/install)            | LiT's backend web server is written in Go. The minimum version supported is Go v1.13.                                                                                                |
+| [protoc](https://grpc.io/docs/protoc-installation/) | Required to compile LND & Loop gRPC proto files at build time                                                                                                                        |
+| [nodejs](https://nodejs.org/en/download/)           | LiT's frontend is written in TypeScript and built on top of the React JS web framework. To bundle the assets into Javascript & CSS compatible with web browsers, NodeJS is required. |
+| [yarn](https://classic.yarnpkg.com/en/docs/install) | a popular package manager for NodeJS application dependencies                                                                                                                        |
 
 Once you have the necessary prerequisites, LiT can be compiled by running the following
 commands:
 
 ```
 git clone https://github.com/lightninglabs/lightning-terminal.git
 cd lightning-terminal
-make && make install
+make install
 ```
 
 This will produce the `litd` executable and add it to your `GOPATH`.

app/src/__tests__/Routes.spec.tsx

@@ -27,7 +27,7 @@ describe('Routes Component', () => {
   it('should display the History page', async () => {
     const { findByText, store } = await render();
     store.uiStore.goToHistory();
-    expect(await findByText('Loop History')).toBeInTheDocument();
+    expect(await findByText('History')).toBeInTheDocument();
     expect(store.router.location.pathname).toBe('/history');
   });
 

app/src/__tests__/components/history/HistoryPage.spec.tsx

@@ -18,17 +18,7 @@ describe('HistoryPage', () => {
 
   it('should display the title', () => {
     const { getByText } = render();
-    expect(getByText('Loop History')).toBeInTheDocument();
-  });
-
-  it('should display the back link', () => {
-    const { getByText } = render();
-    expect(getByText('Lightning Loop')).toBeInTheDocument();
-  });
-
-  it('should display the back icon', () => {
-    const { getByText } = render();
-    expect(getByText('arrow-left.svg')).toBeInTheDocument();
+    expect(getByText('History')).toBeInTheDocument();
   });
 
   it('should display the export icon', () => {
@@ -45,12 +35,6 @@ describe('HistoryPage', () => {
     expect(getByText('Updated')).toBeInTheDocument();
   });
 
-  it('should navigate back to the Loop Page', () => {
-    const { getByText } = render();
-    fireEvent.click(getByText('arrow-left.svg'));
-    expect(store.router.location.pathname).toBe('/loop');
-  });
-
   it('should export channels', () => {
     const { getByText } = render();
     fireEvent.click(getByText('download.svg'));

app/src/__tests__/components/layout/Layout.spec.tsx

@@ -39,9 +39,9 @@ describe('Layout component', () => {
     fireEvent.click(getByText('History'));
     expect(store.router.location.pathname).toBe('/history');
     expect(getByText('History').parentElement).toHaveClass('active');
-    fireEvent.click(getByText('Lightning Loop'));
+    fireEvent.click(getByText('Lightning Terminal'));
     expect(store.router.location.pathname).toBe('/loop');
-    expect(getByText('Lightning Loop').parentElement).toHaveClass('active');
+    expect(getByText('Lightning Terminal').parentElement).toHaveClass('active');
   });
 
   it('should navigate to the Settings page', () => {
@@ -50,8 +50,8 @@ describe('Layout component', () => {
     fireEvent.click(getByText('Settings'));
     expect(store.router.location.pathname).toBe('/settings');
     expect(getByText('Settings').parentElement).toHaveClass('active');
-    fireEvent.click(getByText('Lightning Loop'));
+    fireEvent.click(getByText('Lightning Terminal'));
     expect(store.router.location.pathname).toBe('/loop');
-    expect(getByText('Lightning Loop').parentElement).toHaveClass('active');
+    expect(getByText('Lightning Terminal').parentElement).toHaveClass('active');
   });
 });

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

@@ -146,7 +146,7 @@ describe('LoopPage component', () => {
       fireEvent.click(getByText('Next'));
       expect(getByText('Step 2 of 2')).toBeInTheDocument();
       fireEvent.click(getByText('Confirm'));
-      expect(getByText('Configuring Loops')).toBeInTheDocument();
+      expect(getByText('Submitting Loop')).toBeInTheDocument();
       await waitFor(() => {
         expect(grpcMock.unary).toHaveBeenCalledWith(
           expect.objectContaining({ methodName: 'LoopOut' }),
@@ -167,7 +167,7 @@ describe('LoopPage component', () => {
       fireEvent.click(getByText('Next'));
       expect(getByText('Step 2 of 2')).toBeInTheDocument();
       fireEvent.click(getByText('Confirm'));
-      expect(getByText('Configuring Loops')).toBeInTheDocument();
+      expect(getByText('Submitting Loop')).toBeInTheDocument();
       expect(store.buildSwapStore.processingTimeout).toBeDefined();
       fireEvent.click(getByText('arrow-left.svg'));
       expect(getByText('Review Loop amount and fee')).toBeInTheDocument();

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

@@ -84,11 +84,11 @@ describe('ProcessingSwaps component', () => {
   });
 
   it('should display an FAILED Loop In', () => {
-    const { getByText } = render();
+    const { getByText, getAllByText } = render();
     const swap = addSwap(LOOP_IN, FAILED);
     expect(getByText(swap.ellipsedId)).toBeInTheDocument();
     expect(getByText(swap.stateLabel)).toBeInTheDocument();
-    expect(getByText('close.svg')).toBeInTheDocument();
+    expect(getAllByText('close.svg')).toHaveLength(2);
   });
 
   it('should display an INITIATED Loop Out', () => {
@@ -122,18 +122,18 @@ describe('ProcessingSwaps component', () => {
   });
 
   it('should display an FAILED Loop Out', () => {
-    const { getByText } = render();
+    const { getByText, getAllByText } = render();
     const swap = addSwap(LOOP_OUT, FAILED);
     expect(getByText(swap.ellipsedId)).toBeInTheDocument();
     expect(getByText(swap.stateLabel)).toBeInTheDocument();
-    expect(getByText('close.svg')).toBeInTheDocument();
+    expect(getAllByText('close.svg')).toHaveLength(2);
   });
 
   it('should dismiss a failed Loop', () => {
-    const { getByText } = render();
+    const { getAllByText } = render();
     addSwap(LOOP_OUT, FAILED);
     expect(store.swapStore.dismissedSwapIds).toHaveLength(0);
-    fireEvent.click(getByText('close.svg'));
+    fireEvent.click(getAllByText('close.svg')[1]);
     expect(store.swapStore.dismissedSwapIds).toHaveLength(1);
   });
 });

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

@@ -38,7 +38,7 @@ describe('SwapWizard component', () => {
       fireEvent.click(getByText('Next'));
       expect(getByText('Step 2 of 2')).toBeInTheDocument();
       fireEvent.click(getByText('Confirm'));
-      expect(getByText('Configuring Loops')).toBeInTheDocument();
+      expect(getByText('Submitting Loop')).toBeInTheDocument();
       fireEvent.click(getByText('arrow-left.svg'));
       expect(getByText('Step 2 of 2')).toBeInTheDocument();
       fireEvent.click(getByText('arrow-left.svg'));
@@ -106,7 +106,7 @@ describe('SwapWizard component', () => {
 
     it('should display the description label', () => {
       const { getByText } = render();
-      expect(getByText('Configuring Loops')).toBeInTheDocument();
+      expect(getByText('Submitting Loop')).toBeInTheDocument();
     });
   });
 });

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

@@ -46,6 +46,7 @@ describe('TourHost component', () => {
     expect(getByText('Welcome to Lightning Terminal!')).toBeInTheDocument();
 
     fireEvent.click(getByText("Yes! Let's Go"));
+    fireEvent.click(getByText('Next'));
     expect(store.settingsStore.sidebarVisible).toBe(true);
 
     fireEvent.click(getByText('Next'));
@@ -60,13 +61,16 @@ describe('TourHost component', () => {
     expect(getByText('Welcome to Lightning Terminal!')).toBeInTheDocument();
 
     fireEvent.click(getByText("Yes! Let's Go"));
+    expect(getByText('New to Loop?')).toBeInTheDocument();
+
+    fireEvent.click(getByText('Next'));
     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();
+    expect(getByText(firstLine(l('history')))).toBeInTheDocument();
 
     fireEvent.click(getByText('Next'));
     expect(getByText(l('inbound'))).toBeInTheDocument();
@@ -75,7 +79,7 @@ describe('TourHost component', () => {
     expect(getByText(l('outbound'))).toBeInTheDocument();
 
     fireEvent.click(getByText('Next'));
-    expect(getByText(l('channelList'))).toBeInTheDocument();
+    expect(getByText('channel needs your immediate attention')).toBeInTheDocument();
 
     fireEvent.click(getByText('Next'));
     expect(getByText(l('channelListReceive'))).toBeInTheDocument();
@@ -84,13 +88,13 @@ describe('TourHost component', () => {
     expect(getByText(l('channelListSend'))).toBeInTheDocument();
 
     fireEvent.click(getByText('Next'));
-    expect(getByText(l('channelListFee'))).toBeInTheDocument();
+    expect(getByText(firstLine(l('channelListFee')))).toBeInTheDocument();
 
     fireEvent.click(getByText('Next'));
     expect(getByText(l('channelListUptime'))).toBeInTheDocument();
 
     fireEvent.click(getByText('Next'));
-    expect(getByText(l('channelListPeer'))).toBeInTheDocument();
+    expect(getByText(firstLine(l('channelListPeer')))).toBeInTheDocument();
 
     fireEvent.click(getByText('Next'));
     expect(getByText(l('channelListCapacity'))).toBeInTheDocument();
@@ -99,10 +103,10 @@ describe('TourHost component', () => {
     expect(getByText(l('export'))).toBeInTheDocument();
 
     fireEvent.click(getByText('Next'));
-    expect(getByText(firstLine(l('loop')))).toBeInTheDocument();
+    expect(getByText("Let's perform a Loop!")).toBeInTheDocument();
 
     fireEvent.click(getByText('Loop', { selector: 'button' }));
-    expect(getByText(l('loopActions'))).toBeInTheDocument();
+    expect(getByText(firstLine(l('loopActions')))).toBeInTheDocument();
 
     fireEvent.click(getByText('Next'));
     expect(getByText(firstLine(l('channelListSelect')))).toBeInTheDocument();
@@ -126,10 +130,7 @@ describe('TourHost component', () => {
     fireEvent.click(getByText('Next'));
     expect(getByText(l('swapProgress'))).toBeInTheDocument();
 
-    fireEvent.click(getByText('Next'));
-    expect(getByText(firstLine(l('swapMinimize')))).toBeInTheDocument();
-
-    fireEvent.click(getByText('minimize.svg'));
+    fireEvent.click(getByText('close.svg'));
     expect(getByText('Congratulations!')).toBeInTheDocument();
 
     fireEvent.click(getByText('Close'));

app/src/components/common/PageHeader.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
-import { useStore } from 'store';
 import { styled } from 'components/theme';
 import { ArrowLeft, Download, HeaderThree, HelpCircle } from '../base';
 import Tip from './Tip';
@@ -11,10 +10,9 @@ const Styled = {
     display: flex;
     justify-content: space-between;
   `,
-  Left: styled.span<{ sidebar?: boolean }>`
+  Left: styled.span`
     flex: 1;
     text-align: left;
-    padding-left: ${props => (props.sidebar ? '0' : '40px')};
   `,
   Center: styled.span`
     flex: 1;
@@ -56,12 +54,11 @@ const PageHeader: React.FC<Props> = ({
   onExportClick,
 }) => {
   const { l } = usePrefixedTranslation('cmps.common.PageHeader');
-  const { settingsStore } = useStore();
 
   const { Wrapper, Left, Center, Right, BackLink } = Styled;
   return (
     <Wrapper>
-      <Left sidebar={settingsStore.sidebarVisible}>
+      <Left>
         {onBackClick && (
           <BackLink onClick={onBackClick}>
             <ArrowLeft />

app/src/components/history/HistoryPage.tsx

@@ -14,17 +14,12 @@ const Styled = {
 
 const HistoryPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.history.HistoryPage');
-  const { uiStore, swapStore } = useStore();
+  const { swapStore } = useStore();
 
   const { Wrapper } = Styled;
   return (
     <Wrapper>
-      <PageHeader
-        title={l('pageTitle')}
-        backText={l('backText')}
-        onBackClick={uiStore.goToLoop}
-        onExportClick={swapStore.exportSwaps}
-      />
+      <PageHeader title={l('pageTitle')} onExportClick={swapStore.exportSwaps} />
       <HistoryList />
     </Wrapper>
   );

app/src/components/layout/Layout.tsx

@@ -42,7 +42,7 @@ const Styled = {
 
     /* change sidebar dimensions based on collapsed toggle */
     width: ${props => (props.collapsed ? '0' : '285px')};
-    padding: ${props => (props.collapsed ? '0' : '15px')};
+    padding: ${props => (props.collapsed ? '0' : '0 15px')};
     transition: all 0.2s;
 
     /* set a width on the child to improve the collapse animation */

app/src/components/loop/LoopPage.tsx

@@ -25,9 +25,9 @@ const LoopPage: React.FC = () => {
     <>
       {l('pageTitle')}
       {nodeStore.network !== 'mainnet' && (
-        <sup>
+        <div>
           <Badge>{nodeStore.network}</Badge>
-        </sup>
+        </div>
       )}
     </>
   );

app/src/components/loop/processing/ProcessingSwaps.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import confirmJson from 'assets/animations/confirm.json';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { HeaderFour, Minimize } from 'components/base';
+import { Close, HeaderFour } from 'components/base';
 import Animation from 'components/common/Animation';
 import Tip from 'components/common/Tip';
 import { styled } from 'components/theme';
@@ -49,8 +49,8 @@ const ProcessingSwaps: React.FC = () => {
     <Wrapper sidebar={settingsStore.sidebarVisible}>
       <Header>
         <HeaderFour>{l('title')}</HeaderFour>
-        <Tip overlay={l('minimizeTip')}>
-          <Minimize data-tour="swap-minimize" onClick={uiStore.toggleProcessingSwaps} />
+        <Tip overlay={l('closeTip')}>
+          <Close data-tour="swap-close" onClick={uiStore.toggleProcessingSwaps} />
         </Tip>
       </Header>
       <Content data-tour="processing-swaps">

app/src/components/loop/swap/StepSummary.tsx

@@ -10,7 +10,7 @@ const Styled = {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    max-width: 265px;
+    max-width: 300px;
   `,
   Description: styled(Small)`
     opacity: 0.5;

app/src/components/loop/swap/SwapConfigStep.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { SwapDirection } from 'types/state';
 import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
@@ -39,7 +40,11 @@ const SwapConfigStep: React.FC = () => {
         <StepSummary
           title={l('title')}
           heading={l('heading', { type: buildSwapStore.direction })}
-          description={l('description')}
+          description={
+            buildSwapStore.direction === SwapDirection.IN
+              ? l('loopInDesc')
+              : l('loopOutDesc')
+          }
         />
       </Summary>
       <Config>