Skip to content

Commit c1d31b0

Browse files
jamaljsrjamaljsr
authored
Merge pull request #79 from lightninglabs/misc-feedback
multi: minor improvements based on team feedback
2 parents 6870982 + fa85257 commit c1d31b0

24 files changed

+241
-111
lines changed

‎README.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@ only need to download one executable and run one command to get LiT up and runni
3636
include the CLI binaries `lncli`, `loop` and `frcli` for convenience in the downloadable
3737
archives as well.
3838

39+
## Usage
40+
41+
Read the [Walkthrough](doc/WALKTHROUGH.md) document to learn more about how to use
42+
Lightning Terminal.
43+
3944
## Installation
4045

4146
There are two options for installing LiT: download the published binaries for your
@@ -53,25 +58,20 @@ on your computer.
5358
To compile from source code, you'll need to have some prerequisite developer tooling
5459
installed on your machine.
5560

56-
- **Go**: LiT's backend web server is written in Go. Instructions for installing Go for
57-
your operating system can be found on the
58-
[golang install](https://golang.org/doc/install) page. The minimum version supported is
59-
Go v1.13.
60-
- **NodeJS**: LiT's frontend is written in TypeScript and built on top of the React JS web
61-
framework. To bundle the assets into Javascript & CSS compatible with web browsers,
62-
NodeJS is required. It can be downloaded and installed by following the instructions on
63-
the [NodeJS download](https://nodejs.org/en/download/) page.
64-
- **Yarn**: a popular package manager for NodeJS application dependencies. Installation
65-
information can be found on the
66-
[Yarn Installation](https://classic.yarnpkg.com/en/docs/install) page.
61+
| Dependency | Description |
62+
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
63+
| [golang](https://golang.org/doc/install) | LiT's backend web server is written in Go. The minimum version supported is Go v1.13. |
64+
| [protoc](https://grpc.io/docs/protoc-installation/) | Required to compile LND & Loop gRPC proto files at build time |
65+
| [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. |
66+
| [yarn](https://classic.yarnpkg.com/en/docs/install) | a popular package manager for NodeJS application dependencies |
6767

6868
Once you have the necessary prerequisites, LiT can be compiled by running the following
6969
commands:
7070

7171
```
7272
git clone https://github.com/lightninglabs/lightning-terminal.git
7373
cd lightning-terminal
74-
make && make install
74+
make install
7575
```
7676

7777
This will produce the `litd` executable and add it to your `GOPATH`.

‎app/src/__tests__/Routes.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ describe('Routes Component', () => {
2727
it('should display the History page', async () => {
2828
const { findByText, store } = await render();
2929
store.uiStore.goToHistory();
30-
expect(await findByText('Loop History')).toBeInTheDocument();
30+
expect(await findByText('History')).toBeInTheDocument();
3131
expect(store.router.location.pathname).toBe('/history');
3232
});
3333

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

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,7 @@ describe('HistoryPage', () => {
1818

1919
it('should display the title', () => {
2020
const { getByText } = render();
21-
expect(getByText('Loop History')).toBeInTheDocument();
22-
});
23-
24-
it('should display the back link', () => {
25-
const { getByText } = render();
26-
expect(getByText('Lightning Loop')).toBeInTheDocument();
27-
});
28-
29-
it('should display the back icon', () => {
30-
const { getByText } = render();
31-
expect(getByText('arrow-left.svg')).toBeInTheDocument();
21+
expect(getByText('History')).toBeInTheDocument();
3222
});
3323

3424
it('should display the export icon', () => {
@@ -45,12 +35,6 @@ describe('HistoryPage', () => {
4535
expect(getByText('Updated')).toBeInTheDocument();
4636
});
4737

48-
it('should navigate back to the Loop Page', () => {
49-
const { getByText } = render();
50-
fireEvent.click(getByText('arrow-left.svg'));
51-
expect(store.router.location.pathname).toBe('/loop');
52-
});
53-
5438
it('should export channels', () => {
5539
const { getByText } = render();
5640
fireEvent.click(getByText('download.svg'));

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ describe('Layout component', () => {
3939
fireEvent.click(getByText('History'));
4040
expect(store.router.location.pathname).toBe('/history');
4141
expect(getByText('History').parentElement).toHaveClass('active');
42-
fireEvent.click(getByText('Lightning Loop'));
42+
fireEvent.click(getByText('Lightning Terminal'));
4343
expect(store.router.location.pathname).toBe('/loop');
44-
expect(getByText('Lightning Loop').parentElement).toHaveClass('active');
44+
expect(getByText('Lightning Terminal').parentElement).toHaveClass('active');
4545
});
4646

4747
it('should navigate to the Settings page', () => {
@@ -50,8 +50,8 @@ describe('Layout component', () => {
5050
fireEvent.click(getByText('Settings'));
5151
expect(store.router.location.pathname).toBe('/settings');
5252
expect(getByText('Settings').parentElement).toHaveClass('active');
53-
fireEvent.click(getByText('Lightning Loop'));
53+
fireEvent.click(getByText('Lightning Terminal'));
5454
expect(store.router.location.pathname).toBe('/loop');
55-
expect(getByText('Lightning Loop').parentElement).toHaveClass('active');
55+
expect(getByText('Lightning Terminal').parentElement).toHaveClass('active');
5656
});
5757
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ describe('LoopPage component', () => {
146146
fireEvent.click(getByText('Next'));
147147
expect(getByText('Step 2 of 2')).toBeInTheDocument();
148148
fireEvent.click(getByText('Confirm'));
149-
expect(getByText('Configuring Loops')).toBeInTheDocument();
149+
expect(getByText('Submitting Loop')).toBeInTheDocument();
150150
await waitFor(() => {
151151
expect(grpcMock.unary).toHaveBeenCalledWith(
152152
expect.objectContaining({ methodName: 'LoopOut' }),
@@ -167,7 +167,7 @@ describe('LoopPage component', () => {
167167
fireEvent.click(getByText('Next'));
168168
expect(getByText('Step 2 of 2')).toBeInTheDocument();
169169
fireEvent.click(getByText('Confirm'));
170-
expect(getByText('Configuring Loops')).toBeInTheDocument();
170+
expect(getByText('Submitting Loop')).toBeInTheDocument();
171171
expect(store.buildSwapStore.processingTimeout).toBeDefined();
172172
fireEvent.click(getByText('arrow-left.svg'));
173173
expect(getByText('Review Loop amount and fee')).toBeInTheDocument();

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,11 @@ describe('ProcessingSwaps component', () => {
8484
});
8585

8686
it('should display an FAILED Loop In', () => {
87-
const { getByText } = render();
87+
const { getByText, getAllByText } = render();
8888
const swap = addSwap(LOOP_IN, FAILED);
8989
expect(getByText(swap.ellipsedId)).toBeInTheDocument();
9090
expect(getByText(swap.stateLabel)).toBeInTheDocument();
91-
expect(getByText('close.svg')).toBeInTheDocument();
91+
expect(getAllByText('close.svg')).toHaveLength(2);
9292
});
9393

9494
it('should display an INITIATED Loop Out', () => {
@@ -122,18 +122,18 @@ describe('ProcessingSwaps component', () => {
122122
});
123123

124124
it('should display an FAILED Loop Out', () => {
125-
const { getByText } = render();
125+
const { getByText, getAllByText } = render();
126126
const swap = addSwap(LOOP_OUT, FAILED);
127127
expect(getByText(swap.ellipsedId)).toBeInTheDocument();
128128
expect(getByText(swap.stateLabel)).toBeInTheDocument();
129-
expect(getByText('close.svg')).toBeInTheDocument();
129+
expect(getAllByText('close.svg')).toHaveLength(2);
130130
});
131131

132132
it('should dismiss a failed Loop', () => {
133-
const { getByText } = render();
133+
const { getAllByText } = render();
134134
addSwap(LOOP_OUT, FAILED);
135135
expect(store.swapStore.dismissedSwapIds).toHaveLength(0);
136-
fireEvent.click(getByText('close.svg'));
136+
fireEvent.click(getAllByText('close.svg')[1]);
137137
expect(store.swapStore.dismissedSwapIds).toHaveLength(1);
138138
});
139139
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ describe('SwapWizard component', () => {
3838
fireEvent.click(getByText('Next'));
3939
expect(getByText('Step 2 of 2')).toBeInTheDocument();
4040
fireEvent.click(getByText('Confirm'));
41-
expect(getByText('Configuring Loops')).toBeInTheDocument();
41+
expect(getByText('Submitting Loop')).toBeInTheDocument();
4242
fireEvent.click(getByText('arrow-left.svg'));
4343
expect(getByText('Step 2 of 2')).toBeInTheDocument();
4444
fireEvent.click(getByText('arrow-left.svg'));
@@ -106,7 +106,7 @@ describe('SwapWizard component', () => {
106106

107107
it('should display the description label', () => {
108108
const { getByText } = render();
109-
expect(getByText('Configuring Loops')).toBeInTheDocument();
109+
expect(getByText('Submitting Loop')).toBeInTheDocument();
110110
});
111111
});
112112
});

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ describe('TourHost component', () => {
4646
expect(getByText('Welcome to Lightning Terminal!')).toBeInTheDocument();
4747

4848
fireEvent.click(getByText("Yes! Let's Go"));
49+
fireEvent.click(getByText('Next'));
4950
expect(store.settingsStore.sidebarVisible).toBe(true);
5051

5152
fireEvent.click(getByText('Next'));
@@ -60,13 +61,16 @@ describe('TourHost component', () => {
6061
expect(getByText('Welcome to Lightning Terminal!')).toBeInTheDocument();
6162

6263
fireEvent.click(getByText("Yes! Let's Go"));
64+
expect(getByText('New to Loop?')).toBeInTheDocument();
65+
66+
fireEvent.click(getByText('Next'));
6367
expect(getByText(l('nodeStatus'))).toBeInTheDocument();
6468

6569
// sample data is fetch after step #1 and we need to wait for it
6670
await waitFor(() => expect(store.swapStore.sortedSwaps).toHaveLength(7));
6771

6872
fireEvent.click(getByText('Next'));
69-
expect(getByText(l('history'))).toBeInTheDocument();
73+
expect(getByText(firstLine(l('history')))).toBeInTheDocument();
7074

7175
fireEvent.click(getByText('Next'));
7276
expect(getByText(l('inbound'))).toBeInTheDocument();
@@ -75,7 +79,7 @@ describe('TourHost component', () => {
7579
expect(getByText(l('outbound'))).toBeInTheDocument();
7680

7781
fireEvent.click(getByText('Next'));
78-
expect(getByText(l('channelList'))).toBeInTheDocument();
82+
expect(getByText('channel needs your immediate attention')).toBeInTheDocument();
7983

8084
fireEvent.click(getByText('Next'));
8185
expect(getByText(l('channelListReceive'))).toBeInTheDocument();
@@ -84,13 +88,13 @@ describe('TourHost component', () => {
8488
expect(getByText(l('channelListSend'))).toBeInTheDocument();
8589

8690
fireEvent.click(getByText('Next'));
87-
expect(getByText(l('channelListFee'))).toBeInTheDocument();
91+
expect(getByText(firstLine(l('channelListFee')))).toBeInTheDocument();
8892

8993
fireEvent.click(getByText('Next'));
9094
expect(getByText(l('channelListUptime'))).toBeInTheDocument();
9195

9296
fireEvent.click(getByText('Next'));
93-
expect(getByText(l('channelListPeer'))).toBeInTheDocument();
97+
expect(getByText(firstLine(l('channelListPeer')))).toBeInTheDocument();
9498

9599
fireEvent.click(getByText('Next'));
96100
expect(getByText(l('channelListCapacity'))).toBeInTheDocument();
@@ -99,10 +103,10 @@ describe('TourHost component', () => {
99103
expect(getByText(l('export'))).toBeInTheDocument();
100104

101105
fireEvent.click(getByText('Next'));
102-
expect(getByText(firstLine(l('loop')))).toBeInTheDocument();
106+
expect(getByText("Let's perform a Loop!")).toBeInTheDocument();
103107

104108
fireEvent.click(getByText('Loop', { selector: 'button' }));
105-
expect(getByText(l('loopActions'))).toBeInTheDocument();
109+
expect(getByText(firstLine(l('loopActions')))).toBeInTheDocument();
106110

107111
fireEvent.click(getByText('Next'));
108112
expect(getByText(firstLine(l('channelListSelect')))).toBeInTheDocument();
@@ -126,10 +130,7 @@ describe('TourHost component', () => {
126130
fireEvent.click(getByText('Next'));
127131
expect(getByText(l('swapProgress'))).toBeInTheDocument();
128132

129-
fireEvent.click(getByText('Next'));
130-
expect(getByText(firstLine(l('swapMinimize')))).toBeInTheDocument();
131-
132-
fireEvent.click(getByText('minimize.svg'));
133+
fireEvent.click(getByText('close.svg'));
133134
expect(getByText('Congratulations!')).toBeInTheDocument();
134135

135136
fireEvent.click(getByText('Close'));

‎app/src/assets/images/screenshot.png

-339 KB
Loading

‎app/src/components/common/PageHeader.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { ReactNode } from 'react';
22
import { observer } from 'mobx-react-lite';
33
import { usePrefixedTranslation } from 'hooks';
4-
import { useStore } from 'store';
54
import { styled } from 'components/theme';
65
import { ArrowLeft, Download, HeaderThree, HelpCircle } from '../base';
76
import Tip from './Tip';
@@ -11,10 +10,9 @@ const Styled = {
1110
display: flex;
1211
justify-content: space-between;
1312
`,
14-
Left: styled.span<{ sidebar?: boolean }>`
13+
Left: styled.span`
1514
flex: 1;
1615
text-align: left;
17-
padding-left: ${props => (props.sidebar ? '0' : '40px')};
1816
`,
1917
Center: styled.span`
2018
flex: 1;
@@ -56,12 +54,11 @@ const PageHeader: React.FC<Props> = ({
5654
onExportClick,
5755
}) => {
5856
const { l } = usePrefixedTranslation('cmps.common.PageHeader');
59-
const { settingsStore } = useStore();
6057

6158
const { Wrapper, Left, Center, Right, BackLink } = Styled;
6259
return (
6360
<Wrapper>
64-
<Left sidebar={settingsStore.sidebarVisible}>
61+
<Left>
6562
{onBackClick && (
6663
<BackLink onClick={onBackClick}>
6764
<ArrowLeft />

‎app/src/components/history/HistoryPage.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,12 @@ const Styled = {
1414

1515
const HistoryPage: React.FC = () => {
1616
const { l } = usePrefixedTranslation('cmps.history.HistoryPage');
17-
const { uiStore, swapStore } = useStore();
17+
const { swapStore } = useStore();
1818

1919
const { Wrapper } = Styled;
2020
return (
2121
<Wrapper>
22-
<PageHeader
23-
title={l('pageTitle')}
24-
backText={l('backText')}
25-
onBackClick={uiStore.goToLoop}
26-
onExportClick={swapStore.exportSwaps}
27-
/>
22+
<PageHeader title={l('pageTitle')} onExportClick={swapStore.exportSwaps} />
2823
<HistoryList />
2924
</Wrapper>
3025
);

‎app/src/components/layout/Layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const Styled = {
4242
4343
/* change sidebar dimensions based on collapsed toggle */
4444
width: ${props => (props.collapsed ? '0' : '285px')};
45-
padding: ${props => (props.collapsed ? '0' : '15px')};
45+
padding: ${props => (props.collapsed ? '0' : '0 15px')};
4646
transition: all 0.2s;
4747
4848
/* set a width on the child to improve the collapse animation */

‎app/src/components/loop/LoopPage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ const LoopPage: React.FC = () => {
2525
<>
2626
{l('pageTitle')}
2727
{nodeStore.network !== 'mainnet' && (
28-
<sup>
28+
<div>
2929
<Badge>{nodeStore.network}</Badge>
30-
</sup>
30+
</div>
3131
)}
3232
</>
3333
);

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
33
import confirmJson from 'assets/animations/confirm.json';
44
import { usePrefixedTranslation } from 'hooks';
55
import { useStore } from 'store';
6-
import { HeaderFour, Minimize } from 'components/base';
6+
import { Close, HeaderFour } from 'components/base';
77
import Animation from 'components/common/Animation';
88
import Tip from 'components/common/Tip';
99
import { styled } from 'components/theme';
@@ -49,8 +49,8 @@ const ProcessingSwaps: React.FC = () => {
4949
<Wrapper sidebar={settingsStore.sidebarVisible}>
5050
<Header>
5151
<HeaderFour>{l('title')}</HeaderFour>
52-
<Tip overlay={l('minimizeTip')}>
53-
<Minimize data-tour="swap-minimize" onClick={uiStore.toggleProcessingSwaps} />
52+
<Tip overlay={l('closeTip')}>
53+
<Close data-tour="swap-close" onClick={uiStore.toggleProcessingSwaps} />
5454
</Tip>
5555
</Header>
5656
<Content data-tour="processing-swaps">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Styled = {
1010
display: flex;
1111
flex-direction: column;
1212
justify-content: space-between;
13-
max-width: 265px;
13+
max-width: 300px;
1414
`,
1515
Description: styled(Small)`
1616
opacity: 0.5;

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { observer } from 'mobx-react-lite';
3+
import { SwapDirection } from 'types/state';
34
import styled from '@emotion/styled';
45
import { usePrefixedTranslation } from 'hooks';
56
import { useStore } from 'store';
@@ -39,7 +40,11 @@ const SwapConfigStep: React.FC = () => {
3940
<StepSummary
4041
title={l('title')}
4142
heading={l('heading', { type: buildSwapStore.direction })}
42-
description={l('description')}
43+
description={
44+
buildSwapStore.direction === SwapDirection.IN
45+
? l('loopInDesc')
46+
: l('loopOutDesc')
47+
}
4348
/>
4449
</Summary>
4550
<Config>

0 commit comments

Comments
 (0)