tour: update tour descriptions based on feedback

Author: jamaljsr

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/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

@@ -99,7 +99,7 @@ describe('TourHost component', () => {
     expect(getByText(l('export'))).toBeInTheDocument();
 
     fireEvent.click(getByText('Next'));
-    expect(getByText(firstLine(l('loop')))).toBeInTheDocument();
+    expect(getByText('Lightning Loop')).toBeInTheDocument();
 
     fireEvent.click(getByText('Loop', { selector: 'button' }));
     expect(getByText(l('loopActions'))).toBeInTheDocument();
@@ -126,9 +126,6 @@ describe('TourHost component', () => {
     fireEvent.click(getByText('Next'));
     expect(getByText(l('swapProgress'))).toBeInTheDocument();
 
-    fireEvent.click(getByText('Next'));
-    expect(getByText(firstLine(l('swapClose')))).toBeInTheDocument();
-
     fireEvent.click(getByText('close.svg'));
     expect(getByText('Congratulations!')).toBeInTheDocument();
 

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>

app/src/components/tour/TourHost.tsx

@@ -66,6 +66,7 @@ const tourSteps: ReactourStep[] = [
   {
     selector: '[data-tour="loop"]',
     content: createTextStep('loop', false),
+    style: { maxWidth: 500 },
   },
   {
     selector: '[data-tour="loop-actions"]',
@@ -104,10 +105,6 @@ const tourSteps: ReactourStep[] = [
     selector: '[data-tour="swap-progress"]',
     content: createTextStep('swapProgress'),
   },
-  {
-    selector: '[data-tour="swap-close"]',
-    content: createTextStep('swapClose', false),
-  },
   {
     // eslint-disable-next-line react/display-name
     content: p => <SuccessStep {...p} />,

app/src/i18n/locales/en-US.json

@@ -49,8 +49,9 @@
   "cmps.loop.swap.StepButtons.confirm": "Confirm",
   "cmps.loop.swap.SwapConfigStep.title": "Step 1 of 2",
   "cmps.loop.swap.SwapConfigStep.heading": "{{type}} Amount",
-  "cmps.loop.swap.SwapConfigStep.description": "Loop moves funds in and out of the Lightning Network, simplifying the sending and receiving of payments via Lightning. Use the slider to select the amount to Loop In or Loop Out of the Lightning Network",
-  "cmps.loop.swap.SwapProcessingStep.loadingMsg": "Configuring Loops",
+  "cmps.loop.swap.SwapConfigStep.loopInDesc": "Loop In moves funds onto the Lightning Network from an on-chain wallet to provide outbound capacity to send funds over Lightning. Use the slider to select the amount to Loop In or Loop Out of the Lightning Network",
+  "cmps.loop.swap.SwapConfigStep.loopOutDesc": "Loop Out moves funds off of the Lightning Network into an on-chain address while providing inbound capacity to receive funds on Lightning. Use the slider to select the amount to Loop In or Loop Out of the Lightning Network",
+  "cmps.loop.swap.SwapProcessingStep.loadingMsg": "Submitting Loop",
   "cmps.loop.swap.SwapReviewStep.title": "Step 2 of 2",
   "cmps.loop.swap.SwapReviewStep.heading": "Review Loop amount and fee",
   "cmps.loop.swap.SwapReviewStep.description": "Confirm the fee for improving your channel liquidity. If you'd like to make adjustments, click the back arrow above.",
@@ -82,25 +83,24 @@
   "cmps.tour.TextStep.next": "Next",
   "cmps.tour.TextStep.nodeStatus": "Here are the confirmed balances on the Lightning Network and on-chain",
   "cmps.tour.TextStep.export": "Click here if you want to export your channels as a CSV file",
-  "cmps.tour.TextStep.history": "This tile displays the two most recent swaps that have been initiated",
+  "cmps.tour.TextStep.history": "This tile displays the two most recent loops that have been initiated. It is perfectly safe to perform multiple loops at one time.",
   "cmps.tour.TextStep.inbound": "This tile displays the amount of Bitcoin that this node can receive over your Lightning channels",
   "cmps.tour.TextStep.outbound": "This tile displays the amount of Bitcoin that this node can send over your Lightning channels",
   "cmps.tour.TextStep.channelList": "This is the list of open channels that this node has with other peers on the Lightning Network",
   "cmps.tour.TextStep.channelListReceive": "The amount that can be received over the channel",
   "cmps.tour.TextStep.channelListSend": "The amount that can be sent over this channel",
-  "cmps.tour.TextStep.channelListFee": "The routing fee rate charged by the peer to receive payments over the channel. The percent is rounded to two decimal places. Hover over the value to see the exact rate expressed as parts-per-million",
+  "cmps.tour.TextStep.channelListFee": "The routing fee rate charged by the peer to receive payments over the channel. The percent is rounded to two decimal places. Hover over the value to see the exact rate expressed as parts-per-million.",
   "cmps.tour.TextStep.channelListUptime": "The uptime percentage of the channel peer",
-  "cmps.tour.TextStep.channelListPeer": "The alias of the channel peer. Hover over this field to see the peer's pubkey",
+  "cmps.tour.TextStep.channelListPeer": "The alias of the channel peer. Hover over this field to see the peer's pubkey.",
   "cmps.tour.TextStep.channelListCapacity": "The total capacity of the channel",
-  "cmps.tour.TextStep.loop": "Let's perform a Loop!\n Click on the <strong>Loop</strong> button to start.",
+  "cmps.tour.TextStep.loop": "<strong>Lightning Loop</strong> can be used to transfer your Bitcoin balance between the Lightning Network and the on-chain Bitcoin network. This allows you to easily alter the balances of your channels without needing to close and reopen them, which extends the lifetime of your channels, and also enables operations to be batched as well.\n Let's perform a Loop!\n Click on the <strong>Loop</strong> button to start.",
   "cmps.tour.TextStep.channelListSelect": "Optionally, you can select one or more channels if you want the swap to only transfer funds over those chosen channels. This is helpful if you want to only adjust the balance of specific channels.\n If you choose more than one, there is no guarantee how much funds will be transferred over each channel. LND will use its knowledge of the network to determine how to best split up the payment, if necessary. It is possible that only one of the channels will be used if the payment can be successfully routed through it.\n If you do not care which channels to use, then do not select any. The Lightning payment will be routed through any channel(s) with enough balance to allow it to succeed.",
   "cmps.tour.TextStep.loopActions": "The action bar displays information about the selected channels and the buttons to Loop Out or Loop In.",
   "cmps.tour.TextStep.loopOut": "We will use Loop Out to transfer funds from your channel balances to your on-chain wallet.\n Click on the <strong>Loop Out</strong> button to continue.",
   "cmps.tour.TextStep.loopAmount": "You now need to specify the amount you would like to Loop Out. Drag the slider to adjust the amount.\n Click the <strong>Next</strong> button to continue.",
   "cmps.tour.TextStep.loopReview": "Review the Loop amount and the fee. Keep in mind that you will only be charged the fee. The Loop amount will remain on your node once the swap completes. The balance will just be shifted from your channel balance to your on-chain wallet balance.\n Click the <strong>Confirm</strong> button to continue.",
   "cmps.tour.TextStep.loopProgress": "Wait for the swap to be submitted to the server",
   "cmps.tour.TextStep.processingSwaps": "Your swap will now be displayed in the Processing Loops section. It shows you the swap id, amount, and current status as a progress bar.\n Swaps require on-chain transactions, so you will need to wait for confirmations before they will complete successfully.",
-  "cmps.tour.TextStep.swapClose": "You can close the Processing Loops section any time by clicking on this close icon.\n It is perfectly safe to perform multiple swaps at one time.\n Click in the icon to continue.",
   "cmps.tour.TextStep.swapProgress": "Once the progress bar turns green, your swap has been completed successfully.",
   "cmps.tour.TextStep.congrats": "Congratulations!\n You have completed the tour.\n Happy Looping!",
   "cmps.tour.WelcomeStep.header": "Welcome to Lightning Terminal!",

app/src/store/stores/uiStore.ts

@@ -131,11 +131,18 @@ export default class UiStore {
       // #3 is the history step
       // change the most recent swap to be pending
       this._store.swapStore.sortedSwaps[0].state = SwapState.INITIATED;
-      this._store.swapStore.sortedSwaps[0].lastUpdateTime = Date.now() * 1000 * 1000;
+      // set the timestamp far in the future so it doesn't automatically disappear
+      // from the Processing Loops list after 5 mins
+      const tomorrow = Date.now() + 24 * 60 * 60 * 1000;
+      this._store.swapStore.sortedSwaps[0].lastUpdateTime = tomorrow * 1000 * 1000;
     } else if (step === 21 /* swap-progress */) {
       // #21 is the swap-progress step
       // force the swap to be 100% complete
       this._store.swapStore.sortedSwaps[0].state = SwapState.SUCCESS;
+    } else if (step === 22 /* congrats */) {
+      // #22 is the congrats step
+      // hide the processing swaps section
+      this.processingSwapsVisible = false;
     }
   }