channels: indicate channels currently being used in a swap

Author: jamaljsr

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 });
+};

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', () => {
@@ -121,4 +122,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();
+    });
+  });
 });

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

@@ -15,18 +15,6 @@ describe('BuildSwapStore', () => {
   let rootStore: Store;
   let store: BuildSwapStore;
 
-  const addChannel = (capacity: number, localBalance: number) => {
-    const remoteBalance = capacity - localBalance;
-    const lndChan = { ...lndChannel, capacity, localBalance, remoteBalance };
-    const channel = new Channel(rootStore, lndChan);
-    channel.chanId = `${channel.chanId}${rootStore.channelStore.channels.size}`;
-    rootStore.channelStore.channels.set(channel.chanId, channel);
-  };
-
-  const round = (amount: number) => {
-    return Math.floor(amount / store.AMOUNT_INCREMENT) * store.AMOUNT_INCREMENT;
-  };
-
   beforeEach(async () => {
     rootStore = createStore();
     await rootStore.fetchAllData();
@@ -96,6 +84,16 @@ describe('BuildSwapStore', () => {
     expect(+store.amountForSelected).toBe(loopTerms.maxSwapAmount);
   });
 
+  it('should select all channels with the same peer for loop in', () => {
+    const channels = rootStore.channelStore.sortedChannels;
+    channels[1].remotePubkey = channels[0].remotePubkey;
+    channels[2].remotePubkey = channels[0].remotePubkey;
+    expect(store.selectedChanIds).toHaveLength(0);
+    store.toggleSelectedChannel(channels[0].chanId);
+    store.setDirection(SwapDirection.IN);
+    expect(store.selectedChanIds).toHaveLength(3);
+  });
+
   it('should fetch a loop in quote', async () => {
     expect(+store.quote.swapFee).toEqual(0);
     expect(+store.quote.minerFee).toEqual(0);
@@ -166,6 +164,31 @@ describe('BuildSwapStore', () => {
     });
   });
 
+  it('should store swapped channels after a loop in', async () => {
+    const channels = rootStore.channelStore.sortedChannels;
+    // the pubkey in the sampleData is not valid, so hard-code this valid one
+    channels[0].remotePubkey =
+      '035c82e14eb74d2324daa17eebea8c58b46a9eabac87191cc83ee26275b514e6a0';
+    store.toggleSelectedChannel(channels[0].chanId);
+    store.setDirection(SwapDirection.IN);
+    store.setAmount(Big(600));
+    expect(rootStore.swapStore.swappedChannels.size).toBe(0);
+    store.requestSwap();
+    await waitFor(() => expect(store.currentStep).toBe(BuildSwapSteps.Closed));
+    expect(rootStore.swapStore.swappedChannels.size).toBe(1);
+  });
+
+  it('should store swapped channels after a loop out', async () => {
+    const channels = rootStore.channelStore.sortedChannels;
+    store.toggleSelectedChannel(channels[0].chanId);
+    store.setDirection(SwapDirection.OUT);
+    store.setAmount(Big(600));
+    expect(rootStore.swapStore.swappedChannels.size).toBe(0);
+    store.requestSwap();
+    await waitFor(() => expect(store.currentStep).toBe(BuildSwapSteps.Closed));
+    expect(rootStore.swapStore.swappedChannels.size).toBe(1);
+  });
+
   it('should set the correct swap deadline in production', async () => {
     store.setDirection(SwapDirection.OUT);
     store.setAmount(Big(600));
@@ -245,6 +268,19 @@ describe('BuildSwapStore', () => {
   });
 
   describe('min/max swap limits', () => {
+    const addChannel = (capacity: number, localBalance: number) => {
+      const remoteBalance = capacity - localBalance;
+      const lndChan = { ...lndChannel, capacity, localBalance, remoteBalance };
+      const channel = new Channel(rootStore, lndChan);
+      channel.chanId = `${channel.chanId}${rootStore.channelStore.channels.size}`;
+      channel.remotePubkey = `${channel.remotePubkey}${rootStore.channelStore.channels.size}`;
+      rootStore.channelStore.channels.set(channel.chanId, channel);
+    };
+
+    const round = (amount: number) => {
+      return Math.floor(amount / store.AMOUNT_INCREMENT) * store.AMOUNT_INCREMENT;
+    };
+
     beforeEach(() => {
       rootStore.channelStore.channels.clear();
       [

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

@@ -133,6 +133,7 @@ describe('ChannelStore', () => {
     // the alias is fetched from the API and should be updated after a few ticks
     await waitFor(() => {
       expect(channel.alias).toBe(lndGetNodeInfo.node.alias);
+      expect(channel.aliasLabel).toBe(lndGetNodeInfo.node.alias);
     });
   });
 

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

@@ -17,6 +17,41 @@ describe('SwapStore', () => {
     store = rootStore.swapStore;
   });
 
+  it('should add swapped channels', () => {
+    expect(store.swappedChannels.size).toBe(0);
+    store.addSwappedChannels('s1', ['c1', 'c2']);
+    expect(store.swappedChannels.size).toBe(2);
+    expect(store.swappedChannels.get('c1')).toEqual(['s1']);
+    expect(store.swappedChannels.get('c2')).toEqual(['s1']);
+    store.addSwappedChannels('s2', ['c2']);
+    expect(store.swappedChannels.size).toBe(2);
+    expect(store.swappedChannels.get('c2')).toEqual(['s1', 's2']);
+  });
+
+  it('should prune the swapped channels list', async () => {
+    await rootStore.channelStore.fetchChannels();
+    await store.fetchSwaps();
+    const swaps = store.sortedSwaps;
+    // make these swaps pending
+    swaps[0].state = LOOP.SwapState.HTLC_PUBLISHED;
+    swaps[1].state = LOOP.SwapState.INITIATED;
+    const channels = rootStore.channelStore.sortedChannels;
+    const [c1, c2, c3] = channels.map(c => c.chanId);
+    store.addSwappedChannels(swaps[0].id, [c1, c2]);
+    store.addSwappedChannels(swaps[1].id, [c2, c3]);
+    // confirm swapped channels are set
+    expect(store.swappedChannels.size).toBe(3);
+    expect(store.swappedChannels.get(c2)).toHaveLength(2);
+    // change one swap to complete
+    swaps[1].state = LOOP.SwapState.SUCCESS;
+    store.pruneSwappedChannels();
+    // confirm swap1 removed
+    expect(store.swappedChannels.size).toBe(2);
+    expect(store.swappedChannels.get(c1)).toHaveLength(1);
+    expect(store.swappedChannels.get(c2)).toHaveLength(1);
+    expect(store.swappedChannels.get(c3)).toBeUndefined();
+  });
+
   it('should fetch list of swaps', async () => {
     expect(store.sortedSwaps).toHaveLength(0);
     await store.fetchSwaps();

app/src/assets/icons/chevrons-left.svg

@@ -3,6 +3,8 @@ import { ReactComponent as ArrowRightIcon } from 'assets/icons/arrow-right.svg';
 import { ReactComponent as BitcoinIcon } from 'assets/icons/bitcoin.svg';
 import { ReactComponent as BoltIcon } from 'assets/icons/bolt.svg';
 import { ReactComponent as CheckIcon } from 'assets/icons/check.svg';
+import { ReactComponent as ChevronsLeftIcon } from 'assets/icons/chevrons-left.svg';
+import { ReactComponent as ChevronsRightIcon } from 'assets/icons/chevrons-right.svg';
 import { ReactComponent as ChevronsIcon } from 'assets/icons/chevrons.svg';
 import { ReactComponent as ClockIcon } from 'assets/icons/clock.svg';
 import { ReactComponent as CloseIcon } from 'assets/icons/close.svg';
@@ -65,6 +67,8 @@ export const Bolt = Icon.withComponent(BoltIcon);
 export const Bitcoin = Icon.withComponent(BitcoinIcon);
 export const Check = Icon.withComponent(CheckIcon);
 export const Chevrons = Icon.withComponent(ChevronsIcon);
+export const ChevronsLeft = Icon.withComponent(ChevronsLeftIcon);
+export const ChevronsRight = Icon.withComponent(ChevronsRightIcon);
 export const Close = Icon.withComponent(CloseIcon);
 export const Dot = Icon.withComponent(DotIcon);
 export const Menu = Icon.withComponent(MenuIcon);

app/src/assets/icons/chevrons-right.svg

@@ -0,0 +1,38 @@
+import React from 'react';
+import { styled } from 'components/theme';
+import { Chevrons, ChevronsLeft, ChevronsRight } from '../base';
+
+const BaseIcon = styled.span`
+  padding: 0;
+
+  &.success {
+    color: ${props => props.theme.colors.green};
+  }
+  &.warn {
+    color: ${props => props.theme.colors.yellow};
+  }
+  &.error {
+    color: ${props => props.theme.colors.pink};
+  }
+  &.idle {
+    color: ${props => props.theme.colors.gray};
+  }
+`;
+
+interface Props {
+  status: 'success' | 'warn' | 'error' | 'idle';
+  direction: 'in' | 'out' | 'both';
+}
+
+const DirectionIcons: Record<Props['direction'], any> = {
+  both: BaseIcon.withComponent(Chevrons),
+  in: BaseIcon.withComponent(ChevronsRight),
+  out: BaseIcon.withComponent(ChevronsLeft),
+};
+
+const StatusArrow: React.FC<Props> = ({ status, direction }) => {
+  const Icon = DirectionIcons[direction];
+  return <Icon size="small" className={status} aria-label={`${status} ${direction}`} />;
+};
+
+export default StatusArrow;

app/src/components/base/icons.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { usePrefixedTranslation } from 'hooks';
+import { BalanceStatus } from 'util/constants';
+import { Channel } from 'store/models';
+import StatusArrow from 'components/common/StatusArrow';
+import StatusDot from 'components/common/StatusDot';
+import Tip from 'components/common/Tip';
+
+type Status = 'success' | 'warn' | 'error' | 'idle';
+
+const StatusMap: Record<BalanceStatus, Status> = {
+  [BalanceStatus.ok]: 'success',
+  [BalanceStatus.warn]: 'warn',
+  [BalanceStatus.danger]: 'error',
+};
+
+interface Props {
+  channel: Channel;
+}
+
+const ChannelIcon: React.FC<Props> = ({ channel }) => {
+  const { l } = usePrefixedTranslation('cmps.loop.ChannelIcon.processing');
+  let status = StatusMap[channel.balanceStatus];
+  if (!channel.active) status = 'idle';
+
+  if (channel.processingSwapsDirection !== 'none') {
+    return (
+      <Tip
+        overlay={l(channel.processingSwapsDirection)}
+        capitalize={false}
+        placement="right"
+      >
+        <span>
+          <StatusArrow status={status} direction={channel.processingSwapsDirection} />
+        </span>
+      </Tip>
+    );
+  }
+
+  return <StatusDot status={status} />;
+};
+
+export default observer(ChannelIcon);