Merge pull request #52 from lightninglabs/ui-fixes

Additional UI fixes

Author: jamaljsr

app/src/__stories__/HistoryPage.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SwapState, SwapType } from 'types/generated/loop_pb';
 import { useStore } from 'store';
+import { Swap } from 'store/models';
 import HistoryPage from 'components/history/HistoryPage';
 import { Layout } from 'components/layout';
 
@@ -10,24 +11,28 @@ export default {
   parameters: { contained: true },
 };
 
+const updateSwapsStatus = (swaps: Swap[]) => {
+  swaps.forEach((s, i) => {
+    if (s.typeName === 'Unknown') s.type = SwapType.LOOP_IN;
+    if (i === 0) s.state = SwapState.INITIATED;
+    if (i === 1) s.state = SwapState.PREIMAGE_REVEALED;
+    if (i === 2) s.state = SwapState.HTLC_PUBLISHED;
+    if (i === 3) s.state = SwapState.INVOICE_SETTLED;
+  });
+};
+
 export const Default = () => {
   const store = useStore();
   store.swapStore.stopAutoPolling();
-  store.swapStore.sortedSwaps.forEach((s, i) => {
-    if (s.typeName === 'Unknown') s.type = SwapType.LOOP_IN;
-    if (i === 0) s.state = SwapState.INVOICE_SETTLED;
-  });
+  updateSwapsStatus(store.swapStore.sortedSwaps);
   return <HistoryPage />;
 };
 
 export const InsideLayout = () => {
   const store = useStore();
   store.uiStore.page = 'history';
   store.swapStore.stopAutoPolling();
-  store.swapStore.sortedSwaps.forEach((s, i) => {
-    if (s.typeName === 'Unknown') s.type = SwapType.LOOP_IN;
-    if (i === 0) s.state = SwapState.INVOICE_SETTLED;
-  });
+  updateSwapsStatus(store.swapStore.sortedSwaps);
   return (
     <Layout>
       <HistoryPage />

app/src/__stories__/Layout.stories.tsx

@@ -8,17 +8,27 @@ export default {
   component: Layout,
 };
 
-export const Default = () => <Layout />;
+export const Default = () => {
+  const { uiStore } = useStore();
+  uiStore.goToLoop();
 
-export const WithContent = () => (
-  <Layout>
-    <LoopPage />
-  </Layout>
-);
+  return <Layout />;
+};
+
+export const WithContent = () => {
+  const { uiStore } = useStore();
+  uiStore.goToLoop();
+  return (
+    <Layout>
+      <LoopPage />
+    </Layout>
+  );
+};
 
 export const Collapsed = () => {
-  const store = useStore();
-  store.settingsStore.sidebarVisible = false;
+  const { uiStore, settingsStore } = useStore();
+  uiStore.goToLoop();
+  settingsStore.sidebarVisible = false;
 
   return (
     <Layout>

app/src/__stories__/LoopPage.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useStore } from 'store';
 import { Layout } from 'components/layout';
 import LoopPage from 'components/loop/LoopPage';
@@ -11,23 +11,20 @@ export default {
 
 export const Default = () => {
   const store = useStore();
-  useEffect(() => {
-    // only use a small set of channels
-    store.channelStore.sortedChannels.splice(10);
-
-    // change back to sample data when the component is unmounted
-    return () => {
-      store.channelStore.fetchChannels();
-    };
-  }, []);
+  // only use a small set of channels
+  store.channelStore.sortedChannels.splice(10);
 
   return <LoopPage />;
 };
 
 export const ManyChannels = () => <LoopPage />;
 
-export const InsideLayout = () => (
-  <Layout>
-    <LoopPage />
-  </Layout>
-);
+export const InsideLayout = () => {
+  const store = useStore();
+  store.uiStore.goToLoop();
+  return (
+    <Layout>
+      <LoopPage />
+    </Layout>
+  );
+};

app/src/__stories__/SettingsPage.stories.tsx

@@ -26,6 +26,8 @@ export const BalanceMode = () => {
 };
 
 export const InsideLayout = () => {
+  const { uiStore } = useStore();
+  uiStore.goToSettings();
   return (
     <Layout>
       <SettingsPage />

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { SwapDirection } from 'types/state';
 import { fireEvent } from '@testing-library/react';
 import { formatSats } from 'util/formatters';
-import { ellipseInside } from 'util/strings';
 import { renderWithProviders } from 'util/tests';
 import { createStore, Store } from 'store';
 import { Channel } from 'store/models';
@@ -14,6 +13,7 @@ describe('ChannelRow component', () => {
 
   beforeEach(async () => {
     store = createStore();
+    await store.fetchAllData();
     channel = new Channel(store, {
       chanId: '150633093070848',
       remotePubkey: '02ac59099da6d4bd818e6a81098f5d54580b7c3aa8255c707fa0f95ca89b02cb8c',
@@ -51,7 +51,7 @@ describe('ChannelRow component', () => {
 
   it('should display the peer pubkey', () => {
     const { getByText } = render();
-    expect(getByText(ellipseInside(channel.remotePubkey))).toBeInTheDocument();
+    expect(getByText(channel.ellipsedPubkey)).toBeInTheDocument();
   });
 
   it('should display the capacity', () => {

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

@@ -28,6 +28,16 @@ describe('LoopPage component', () => {
     expect(getByText('Lightning Loop')).toBeInTheDocument();
   });
 
+  it('should display the network badge', () => {
+    const { getByText, queryByText } = render();
+    store.nodeStore.network = 'regtest';
+    expect(getByText('regtest')).toBeInTheDocument();
+    store.nodeStore.network = 'testnet';
+    expect(getByText('testnet')).toBeInTheDocument();
+    store.nodeStore.network = 'mainnet';
+    expect(queryByText('mainnet')).not.toBeInTheDocument();
+  });
+
   it('should display the three tiles', () => {
     const { getByText } = render();
     expect(getByText('Loop History')).toBeInTheDocument();

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import * as LOOP from 'types/generated/loop_pb';
 import { fireEvent } from '@testing-library/react';
-import { ellipseInside } from 'util/strings';
 import { renderWithProviders } from 'util/tests';
 import { loopListSwaps } from 'util/tests/sampleData';
 import { createStore, Store } from 'store';
@@ -49,7 +48,7 @@ describe('ProcessingSwaps component', () => {
     const { getByText, getByTitle } = render();
     const swap = addSwap(LOOP_IN, INITIATED);
     expect(getByText('dot.svg')).toHaveClass('warn');
-    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByText(swap.ellipsedId)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('25%');
   });
@@ -58,7 +57,7 @@ describe('ProcessingSwaps component', () => {
     const { getByText, getByTitle } = render();
     const swap = addSwap(LOOP_IN, HTLC_PUBLISHED);
     expect(getByText('dot.svg')).toHaveClass('warn');
-    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByText(swap.ellipsedId)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('50%');
   });
@@ -67,23 +66,23 @@ describe('ProcessingSwaps component', () => {
     const { getByText, getByTitle } = render();
     const swap = addSwap(LOOP_IN, INVOICE_SETTLED);
     expect(getByText('dot.svg')).toHaveClass('warn');
-    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByText(swap.ellipsedId)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('75%');
   });
 
   it('should display an SUCCESS Loop In', () => {
     const { getByText, getByTitle } = render();
     const swap = addSwap(LOOP_IN, SUCCESS);
-    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByText(swap.ellipsedId)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('100%');
   });
 
   it('should display an FAILED Loop In', () => {
     const { getByText } = render();
     const swap = addSwap(LOOP_IN, FAILED);
-    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByText(swap.ellipsedId)).toBeInTheDocument();
     expect(getByText(swap.stateLabel)).toBeInTheDocument();
     expect(getByText('close.svg')).toBeInTheDocument();
   });
@@ -92,7 +91,7 @@ describe('ProcessingSwaps component', () => {
     const { getByText, getByTitle } = render();
     const swap = addSwap(LOOP_OUT, INITIATED);
     expect(getByText('dot.svg')).toHaveClass('warn');
-    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByText(swap.ellipsedId)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('33%');
   });
@@ -101,7 +100,7 @@ describe('ProcessingSwaps component', () => {
     const { getByText, getByTitle } = render();
     const swap = addSwap(LOOP_OUT, PREIMAGE_REVEALED);
     expect(getByText('dot.svg')).toHaveClass('warn');
-    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByText(swap.ellipsedId)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('66%');
   });
@@ -110,15 +109,15 @@ describe('ProcessingSwaps component', () => {
     const { getByText, getByTitle } = render();
     const swap = addSwap(LOOP_OUT, SUCCESS);
     expect(getByText('dot.svg')).toHaveClass('success');
-    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByText(swap.ellipsedId)).toBeInTheDocument();
     expect(getByTitle(swap.stateLabel)).toBeInTheDocument();
     expect(width(getByTitle(swap.stateLabel))).toBe('100%');
   });
 
   it('should display an FAILED Loop Out', () => {
     const { getByText } = render();
     const swap = addSwap(LOOP_OUT, FAILED);
-    expect(getByText(ellipseInside(swap.id))).toBeInTheDocument();
+    expect(getByText(swap.ellipsedId)).toBeInTheDocument();
     expect(getByText(swap.stateLabel)).toBeInTheDocument();
     expect(getByText('close.svg')).toBeInTheDocument();
   });

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

@@ -12,7 +12,7 @@ describe('SwapWizard component', () => {
 
   beforeEach(async () => {
     store = createStore();
-    await store.init();
+    await store.fetchAllData();
 
     await store.buildSwapStore.startSwap();
     store.channelStore.sortedChannels.slice(0, 3).forEach(c => {

app/src/__tests__/store/buildSwapStore.spec.ts

@@ -1,5 +1,5 @@
 import { values } from 'mobx';
-import { SwapDirection } from 'types/state';
+import { BuildSwapSteps, SwapDirection } from 'types/state';
 import { grpc } from '@improbable-eng/grpc-web';
 import { waitFor } from '@testing-library/react';
 import Big from 'big.js';
@@ -19,6 +19,15 @@ describe('BuildSwapStore', () => {
     store = rootStore.buildSwapStore;
   });
 
+  it('should not start a swap if there are no channels', async () => {
+    rootStore.channelStore.channels.clear();
+    expect(store.currentStep).toBe(BuildSwapSteps.Closed);
+    expect(rootStore.uiStore.alerts.size).toBe(0);
+    await store.startSwap();
+    expect(store.currentStep).toBe(BuildSwapSteps.Closed);
+    expect(rootStore.uiStore.alerts.size).toBe(1);
+  });
+
   it('should toggle the selected channels', () => {
     expect(store.selectedChanIds).toHaveLength(0);
     store.toggleSelectedChannel('test');

app/src/components/base/shared.tsx

@@ -25,6 +25,20 @@ export const Pill = styled.span`
   border-radius: 40px;
 `;
 
+export const Badge = styled.span`
+  display: inline-block;
+  margin-left: 10px;
+  font-family: ${props => props.theme.fonts.open.light};
+  font-size: ${props => props.theme.sizes.xxs};
+  color: ${props => props.theme.colors.orange};
+  border: 1px solid ${props => props.theme.colors.orange};
+  border-radius: 4px;
+  padding: 3px 5px 5px;
+  text-transform: lowercase;
+  line-height: 1;
+  letter-spacing: 1.8px;
+`;
+
 //
 // Button
 //