lightninglabs · jamaljsr · Jun 18, 2020 · Jun 9, 2020 · Jun 10, 2020 · Jun 11, 2020
diff --git a/app/.prettierrc → .prettierrc b/app/.prettierrc → .prettierrc
@@ -8,6 +8,7 @@
     }
   ],
   "printWidth": 90,
+  "proseWrap": "always",
   "singleQuote": true,
   "useTabs": false,
   "semi": true,
@@ -16,4 +17,4 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "arrowParens": "avoid"
-}
+}
diff --git a/README.md b/README.md
diff --git a/app/README.md b/app/README.md
diff --git a/app/public/index.html b/app/public/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/icons/favicon-32x32.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" sizes="48x48" href="%PUBLID_URL%/icons/icon-48x48.png" />
     <link rel="apple-touch-icon" sizes="72x72" href="%PUBLID_URL%/icons/icon-72x72.png" />

diff --git a/app/src/App.scss b/app/src/App.scss
@@ -75,4 +75,5 @@ body,
 #root {
   min-height: 100vh;
   width: 100%;
+  min-width: 1024px;
 }
diff --git a/app/src/__stories__/ChannelRow.stories.tsx b/app/src/__stories__/ChannelRow.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useObserver } from 'mobx-react-lite';
+import { SwapState, SwapType } from 'types/generated/loop_pb';
 import { SwapDirection } from 'types/state';
 import { lndListChannels } from 'util/tests/sampleData';
 import { useStore } from 'store';
@@ -87,3 +88,37 @@ export const Dimmed = () => {
   store.buildSwapStore.setDirection(SwapDirection.OUT);
   return renderStory(channel);
 };
+
+export const LoopingIn = () => {
+  const store = useStore();
+  const channel = new Channel(store, lndListChannels.channelsList[0]);
+  const swap = store.swapStore.sortedSwaps[0];
+  swap.type = SwapType.LOOP_IN;
+  swap.state = SwapState.INITIATED;
+  store.swapStore.addSwappedChannels(swap.id, [channel.chanId]);
+  return renderStory(channel, { ratio: 0.3 });
+};
+
+export const LoopingOut = () => {
+  const store = useStore();
+  const channel = new Channel(store, lndListChannels.channelsList[0]);
+  const swap = store.swapStore.sortedSwaps[0];
+  swap.type = SwapType.LOOP_OUT;
+  swap.state = SwapState.INITIATED;
+  store.swapStore.addSwappedChannels(swap.id, [channel.chanId]);
+  return renderStory(channel, { ratio: 0.3 });
+};
+
+export const LoopingInAndOut = () => {
+  const store = useStore();
+  const channel = new Channel(store, lndListChannels.channelsList[0]);
+  const swap1 = store.swapStore.sortedSwaps[0];
+  swap1.type = SwapType.LOOP_IN;
+  swap1.state = SwapState.INITIATED;
+  store.swapStore.addSwappedChannels(swap1.id, [channel.chanId]);
+  const swap2 = store.swapStore.sortedSwaps[1];
+  swap2.type = SwapType.LOOP_OUT;
+  swap2.state = SwapState.INITIATED;
+  store.swapStore.addSwappedChannels(swap2.id, [channel.chanId]);
+  return renderStory(channel, { ratio: 0.3 });
+};
diff --git a/app/src/__tests__/components/loop/ChannelBalance.spec.tsx b/app/src/__tests__/components/loop/ChannelBalance.spec.tsx
@@ -40,8 +40,8 @@ describe('ChannelBalance component', () => {
     const { el, remote, local } = render(0.52);
     expect(el.children.length).toBe(3);
     expect(width(local)).toBe('52%');
-    expect(bgColor(local)).toBe('rgb(246, 107, 28)');
-    expect(bgColor(remote)).toBe('rgb(246, 107, 28)');
+    expect(bgColor(local)).toBe('rgb(255, 249, 23)');
+    expect(bgColor(remote)).toBe('rgb(255, 249, 23)');
   });
 
   it('should display a bad balance', () => {

diff --git a/app/src/__tests__/components/loop/ChannelRow.spec.tsx b/app/src/__tests__/components/loop/ChannelRow.spec.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import { SwapState, SwapType } from 'types/generated/loop_pb';
 import { SwapDirection } from 'types/state';
 import { fireEvent } from '@testing-library/react';
 import { formatSats } from 'util/formatters';
 import { renderWithProviders } from 'util/tests';
 import { createStore, Store } from 'store';
-import { Channel } from 'store/models';
+import { Channel, Swap } from 'store/models';
 import ChannelRow from 'components/loop/ChannelRow';
 
 describe('ChannelRow component', () => {
@@ -54,6 +55,16 @@ describe('ChannelRow component', () => {
     expect(getByText(channel.aliasLabel)).toBeInTheDocument();
   });
 
+  it('should display the peer pubkey & alias tooltip', () => {
+    const { getByText, getAllByText } = render();
+    channel.alias = 'test-alias';
+    fireEvent.mouseEnter(getByText(channel.aliasLabel));
+    expect(getByText(channel.remotePubkey)).toBeInTheDocument();
+    expect(getAllByText(channel.alias)).toHaveLength(2);
+    channel.alias = channel.remotePubkey.substring(12);
+    expect(getByText(channel.remotePubkey)).toBeInTheDocument();
+  });
+
   it('should display the capacity', () => {
     const { getByText } = render();
     expect(
@@ -121,4 +132,44 @@ describe('ChannelRow component', () => {
     fireEvent.click(getByRole('checkbox'));
     expect(store.buildSwapStore.selectedChanIds).toEqual([]);
   });
+
+  describe('pending swaps', () => {
+    let swap1: Swap;
+    let swap2: Swap;
+
+    beforeEach(() => {
+      swap1 = store.swapStore.sortedSwaps[0];
+      swap2 = store.swapStore.sortedSwaps[1];
+      swap1.state = swap2.state = SwapState.INITIATED;
+    });
+
+    it('should display the pending Loop In icon', () => {
+      swap1.type = SwapType.LOOP_IN;
+      store.swapStore.addSwappedChannels(swap1.id, [channel.chanId]);
+      const { getByText } = render();
+      expect(getByText('chevrons-right.svg')).toBeInTheDocument();
+      fireEvent.mouseEnter(getByText('chevrons-right.svg'));
+      expect(getByText('Loop In currently in progress')).toBeInTheDocument();
+    });
+
+    it('should display the pending Loop Out icon', () => {
+      swap1.type = SwapType.LOOP_OUT;
+      store.swapStore.addSwappedChannels(swap1.id, [channel.chanId]);
+      const { getByText } = render();
+      expect(getByText('chevrons-left.svg')).toBeInTheDocument();
+      fireEvent.mouseEnter(getByText('chevrons-left.svg'));
+      expect(getByText('Loop Out currently in progress')).toBeInTheDocument();
+    });
+
+    it('should display the pending Loop In and Loop Out icon', () => {
+      swap1.type = SwapType.LOOP_IN;
+      swap2.type = SwapType.LOOP_OUT;
+      store.swapStore.addSwappedChannels(swap1.id, [channel.chanId]);
+      store.swapStore.addSwappedChannels(swap2.id, [channel.chanId]);
+      const { getByText } = render();
+      expect(getByText('chevrons.svg')).toBeInTheDocument();
+      fireEvent.mouseEnter(getByText('chevrons.svg'));
+      expect(getByText('Loop In and Loop Out currently in progress')).toBeInTheDocument();
+    });
+  });
 });
diff --git a/app/src/__tests__/components/loop/LoopPage.spec.tsx b/app/src/__tests__/components/loop/LoopPage.spec.tsx
@@ -17,6 +17,7 @@ describe('LoopPage component', () => {
   beforeEach(async () => {
     store = createStore();
     await store.fetchAllData();
+    await store.buildSwapStore.getTerms();
   });
 
   const render = () => {
@@ -106,7 +107,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 1).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop In'));
+      fireEvent.click(getByText('Loop Out'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
     });
 
@@ -117,7 +118,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 1).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop In'));
+      fireEvent.click(getByText('Loop Out'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
       fireEvent.click(getByText('arrow-left.svg'));
       expect(getByText('Loop History')).toBeInTheDocument();

diff --git a/app/src/__tests__/components/loop/ProcessingSwaps.spec.tsx b/app/src/__tests__/components/loop/ProcessingSwaps.spec.tsx
@@ -49,6 +49,7 @@ describe('ProcessingSwaps component', () => {
     const swap = addSwap(LOOP_IN, INITIATED);
     expect(getByText('dot.svg')).toHaveClass('warn');
     expect(getByText(swap.ellipsedId)).toBeInTheDocument();
+    expect(getByText(swap.typeName)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('25%');
   });
@@ -58,6 +59,7 @@ describe('ProcessingSwaps component', () => {
     const swap = addSwap(LOOP_IN, HTLC_PUBLISHED);
     expect(getByText('dot.svg')).toHaveClass('warn');
     expect(getByText(swap.ellipsedId)).toBeInTheDocument();
+    expect(getByText(swap.typeName)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('50%');
   });
@@ -67,6 +69,7 @@ describe('ProcessingSwaps component', () => {
     const swap = addSwap(LOOP_IN, INVOICE_SETTLED);
     expect(getByText('dot.svg')).toHaveClass('warn');
     expect(getByText(swap.ellipsedId)).toBeInTheDocument();
+    expect(getByText(swap.typeName)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('75%');
   });
@@ -75,6 +78,7 @@ describe('ProcessingSwaps component', () => {
     const { getByText, getByTitle } = render();
     const swap = addSwap(LOOP_IN, SUCCESS);
     expect(getByText(swap.ellipsedId)).toBeInTheDocument();
+    expect(getByText(swap.typeName)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('100%');
   });
@@ -92,6 +96,7 @@ describe('ProcessingSwaps component', () => {
     const swap = addSwap(LOOP_OUT, INITIATED);
     expect(getByText('dot.svg')).toHaveClass('warn');
     expect(getByText(swap.ellipsedId)).toBeInTheDocument();
+    expect(getByText(swap.typeName)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('33%');
   });
@@ -101,6 +106,7 @@ describe('ProcessingSwaps component', () => {
     const swap = addSwap(LOOP_OUT, PREIMAGE_REVEALED);
     expect(getByText('dot.svg')).toHaveClass('warn');
     expect(getByText(swap.ellipsedId)).toBeInTheDocument();
+    expect(getByText(swap.typeName)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('66%');
   });
@@ -110,6 +116,7 @@ describe('ProcessingSwaps component', () => {
     const swap = addSwap(LOOP_OUT, SUCCESS);
     expect(getByText('dot.svg')).toHaveClass('success');
     expect(getByText(swap.ellipsedId)).toBeInTheDocument();
+    expect(getByText(swap.typeName)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('100%');
   });

diff --git a/app/src/__tests__/components/loop/SwapWizard.spec.tsx b/app/src/__tests__/components/loop/SwapWizard.spec.tsx
@@ -29,7 +29,7 @@ describe('SwapWizard component', () => {
     it('should display the description labels', () => {
       const { getByText } = render();
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
-      expect(getByText('Set Liquidity Parameters')).toBeInTheDocument();
+      expect(getByText('Loop Out Amount')).toBeInTheDocument();
     });
 
     it('should navigate forward and back through each step', async () => {
@@ -63,10 +63,10 @@ describe('SwapWizard component', () => {
     it('should update the amount when the slider changes', () => {
       const { getByText, getByLabelText } = render();
       const build = store.buildSwapStore;
-      expect(+build.amount).toEqual(625000);
+      expect(+build.amountForSelected).toEqual(625000);
       expect(getByText(`625,000 sats`)).toBeInTheDocument();
       fireEvent.change(getByLabelText('range-slider'), { target: { value: '575000' } });
-      expect(+build.amount).toEqual(575000);
+      expect(+build.amountForSelected).toEqual(575000);
       expect(getByText(`575,000 sats`)).toBeInTheDocument();
     });
   });
@@ -84,7 +84,7 @@ describe('SwapWizard component', () => {
       expect(getByText('Review the quote')).toBeInTheDocument();
       expect(getByText('Loop Out Amount')).toBeInTheDocument();
       expect(getByText('Fees')).toBeInTheDocument();
-      expect(getByText('Invoice Total')).toBeInTheDocument();
+      expect(getByText('Total')).toBeInTheDocument();
     });
 
     it('should display the correct values', () => {