ui: add message in Loop History when there are no past swaps

Author: jamaljsr

app/src/__stories__/LoopHistory.stories.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { observable } from 'mobx';
+import { useStore } from 'store';
 import Tile from 'components/common/Tile';
 import LoopHistory from 'components/loop/LoopHistory';
 
@@ -19,3 +21,13 @@ export const InsideTile = () => {
     </Tile>
   );
 };
+
+export const Empty = () => {
+  const { swapStore } = useStore();
+  swapStore.swaps = observable.map();
+  return (
+    <Tile title="Loop History" onMaximizeClick={() => null}>
+      <LoopHistory />
+    </Tile>
+  );
+};

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { observable } from 'mobx';
 import * as LOOP from 'types/generated/loop_pb';
 import { renderWithProviders } from 'util/tests';
 import { createStore, Store } from 'store';
@@ -39,4 +40,12 @@ describe('LoopHistory component', () => {
     const { getByText } = render();
     expect(getByText('dot.svg')).toHaveClass('warn');
   });
+
+  it('should display the empty message', async () => {
+    store.swapStore.swaps = observable.map();
+    const { getByText } = render();
+    expect(
+      getByText('After performing swaps, you will see ongoing loops and history here.'),
+    ).toBeInTheDocument();
+  });
 });

app/src/components/loop/LoopHistory.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Column, Row } from 'components/common/grid';
 import { Small } from 'components/common/text';
@@ -20,12 +21,14 @@ const Styled = {
 };
 
 const LoopHistory: React.FC = () => {
-  const store = useStore();
+  const { l } = usePrefixedTranslation('cmps.loop.LoopHistory');
+  const { swapStore } = useStore();
 
   const { RightColumn, SmallText } = Styled;
   return (
     <>
-      {store.swapStore.lastTwoSwaps.map(swap => (
+      {swapStore.lastTwoSwaps.length === 0 && <Small>{l('emptyMsg')}</Small>}
+      {swapStore.lastTwoSwaps.map(swap => (
         <Row key={swap.id}>
           <Column cols={6}>
             <SwapDot swap={swap} />

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

@@ -19,6 +19,7 @@
   "cmps.loop.ChannelRowHeader.capacity": "Capacity",
   "cmps.loop.LoopActions.channelsSelected": "channels selected",
   "cmps.loop.LoopPage.pageTitle": "Lightning Loop",
+  "cmps.loop.LoopHistory.emptyMsg": "After performing swaps, you will see ongoing loops and history here.",
   "cmps.loop.LoopTiles.history": "Loop History",
   "cmps.loop.LoopTiles.inbound": "Total Inbound Liquidity",
   "cmps.loop.LoopTiles.outbound": "Total Outbound Liquidity",