swaps: add Loop type (in/out) to Processing Loops section

Author: jamaljsr

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%');
   });

app/src/components/loop/processing/SwapProgress.tsx

@@ -33,10 +33,16 @@ const Styled = {
     border-radius: 2px;
   `,
   Status: styled.div<{ pct: number }>`
+    display: flex;
+    justify-content: space-between;
     width: ${props => props.pct}%;
     text-align: right;
     font-size: ${props => props.theme.sizes.xs};
     transition: all 1s;
+
+    > span:first-of-type {
+      color: ${props => props.theme.colors.gray};
+    }
   `,
   Fill: styled.div<{ state: number; pct: number }>`
     height: 1px;
@@ -58,7 +64,10 @@ const SwapProgress: React.FC<Props> = ({ swap }) => {
   const { Wrapper, Status, Track, Fill } = Styled;
   return (
     <Wrapper>
-      <Status pct={pct}>{swap.stateLabel}</Status>
+      <Status pct={pct}>
+        <span>{swap.typeName}</span>
+        <span>{swap.stateLabel}</span>
+      </Status>
       <Track>
         <Fill state={swap.state} pct={pct} title={swap.stateLabel} />
       </Track>