loop: prevent Loop In when multiple channels are selected

Author: jamaljsr

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

@@ -93,7 +93,7 @@ describe('LoopPage component', () => {
       const { getByText } = render();
       expect(getByText('Loop')).toBeInTheDocument();
       fireEvent.click(getByText('Loop'));
-      store.channelStore.sortedChannels.slice(0, 3).forEach(c => {
+      store.channelStore.sortedChannels.slice(0, 1).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
       fireEvent.click(getByText('Loop in'));
@@ -104,7 +104,7 @@ describe('LoopPage component', () => {
       const { getByText } = render();
       expect(getByText('Loop')).toBeInTheDocument();
       fireEvent.click(getByText('Loop'));
-      store.channelStore.sortedChannels.slice(0, 3).forEach(c => {
+      store.channelStore.sortedChannels.slice(0, 1).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
       fireEvent.click(getByText('Loop in'));

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

@@ -108,6 +108,11 @@ describe('BuildSwapStore', () => {
   });
 
   it('should perform 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(600);
     store.requestSwap();
@@ -120,6 +125,8 @@ describe('BuildSwapStore', () => {
   });
 
   it('should perform a loop out', async () => {
+    const channels = rootStore.channelStore.sortedChannels;
+    store.toggleSelectedChannel(channels[0].chanId);
     store.setDirection(SwapDirection.OUT);
     store.setAmount(600);
     store.requestSwap();

app/src/api/loop.ts

@@ -68,11 +68,16 @@ class LoopApi {
   /**
    * call the Loop `LoopIn` RPC and return the response
    */
-  async loopIn(amount: number, quote: Quote): Promise<LOOP.SwapResponse.AsObject> {
+  async loopIn(
+    amount: number,
+    quote: Quote,
+    lastHop?: string,
+  ): Promise<LOOP.SwapResponse.AsObject> {
     const req = new LOOP.LoopInRequest();
     req.setAmt(amount);
     req.setMaxSwapFee(quote.swapFee);
     req.setMaxMinerFee(quote.minerFee);
+    if (lastHop) req.setLastHop(Buffer.from(lastHop, 'hex').toString('base64'));
     const res = await this._grpc.request(SwapClient.LoopIn, req, this._meta);
     return res.toObject();
   }

app/src/components/loop/LoopActions.tsx

@@ -12,8 +12,10 @@ const Styled = {
     margin: 50px 0;
   `,
   Actions: styled.div`
-    display: inline-block;
     margin-top: -15px;
+  `,
+  ActionBar: styled.div`
+    display: inline-block;
     padding: 15px;
     background-color: ${props => props.theme.colors.darkBlue};
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5);
@@ -31,6 +33,12 @@ const Styled = {
     display: inline-block;
     margin-right: 50px;
   `,
+  Note: styled.span`
+    margin-left: 20px;
+    font-size: ${props => props.theme.sizes.s};
+    color: ${props => props.theme.colors.gray};
+    /* font-style: italic; */
+  `,
 };
 
 const LoopActions: React.FC = () => {
@@ -43,28 +51,34 @@ const LoopActions: React.FC = () => {
   const handleLoopIn = useCallback(() => setDirection(SwapDirection.IN), [setDirection]);
   const selectedCount = buildSwapStore.selectedChanIds.length;
 
-  const { Wrapper, Actions, CloseIcon, Selected } = Styled;
+  const { Wrapper, Actions, ActionBar, CloseIcon, Selected, Note } = Styled;
   return (
     <Wrapper>
       {buildSwapStore.showActions ? (
         <Actions>
-          <CloseIcon onClick={buildSwapStore.cancel} />
-          <Pill>{selectedCount}</Pill>
-          <Selected>{l('channelsSelected')}</Selected>
-          <Button
-            primary={inferredDirection === SwapDirection.OUT}
-            borderless
-            onClick={handleLoopOut}
-          >
-            Loop out
-          </Button>
-          <Button
-            primary={inferredDirection === SwapDirection.IN}
-            borderless
-            onClick={handleLoopIn}
-          >
-            Loop in
-          </Button>
+          <ActionBar>
+            <CloseIcon onClick={buildSwapStore.cancel} />
+            <Pill>{selectedCount}</Pill>
+            <Selected>{l('channelsSelected')}</Selected>
+            <Button
+              primary={inferredDirection === SwapDirection.OUT}
+              borderless
+              onClick={handleLoopOut}
+            >
+              Loop out
+            </Button>
+            <Button
+              primary={
+                buildSwapStore.loopInAllowed && inferredDirection === SwapDirection.IN
+              }
+              borderless
+              onClick={handleLoopIn}
+              disabled={!buildSwapStore.loopInAllowed}
+            >
+              Loop in
+            </Button>
+          </ActionBar>
+          {!buildSwapStore.loopInAllowed && <Note>{l('loopInNote')}</Note>}
         </Actions>
       ) : (
         <Button onClick={buildSwapStore.startSwap}>

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

@@ -18,6 +18,7 @@
   "cmps.loop.ChannelRowHeader.peer": "Peer/Alias",
   "cmps.loop.ChannelRowHeader.capacity": "Capacity",
   "cmps.loop.LoopActions.channelsSelected": "channels selected",
+  "cmps.loop.LoopActions.loopInNote": "For multi Loop In, all channels must use the same peer.",
   "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",

app/src/store/stores/buildSwapStore.ts

@@ -2,6 +2,7 @@ import { action, computed, observable, runInAction, toJS, values } from 'mobx';
 import { BuildSwapSteps, Quote, SwapDirection, SwapTerms } from 'types/state';
 import { formatSats } from 'util/formatters';
 import { Store } from 'store';
+import Channel from 'store/models/channel';
 
 // an artificial delay to allow the user to abort a swap before it executed
 export const SWAP_ABORT_DELAY = 3000;
@@ -122,6 +123,39 @@ class BuildSwapStore {
     return avgPct < 50 ? SwapDirection.IN : SwapDirection.OUT;
   }
 
+  /**
+   * determines if Loop In is allowed, which is only true when the selected
+   * channels are using a single peer. If multiple peers are chosen, then
+   * Loop in should not be allowed
+   */
+  @computed
+  get loopInAllowed() {
+    if (this.selectedChanIds.length > 0) {
+      return this.loopInLastHop !== undefined;
+    }
+
+    return true;
+  }
+
+  /**
+   * Returns the unique peer pubkey of the selected channels. If no channels
+   * are selected OR the selected channels are using more than one peer, then
+   * undefined is returned
+   */
+  @computed
+  get loopInLastHop(): string | undefined {
+    const channels = this.selectedChanIds
+      .map(id => this._store.channelStore.channels.get(id))
+      .filter(c => !!c) as Channel[];
+    const peers = channels.reduce((peers, c) => {
+      if (!peers.includes(c.remotePubkey)) {
+        peers.push(c.remotePubkey);
+      }
+      return peers;
+    }, [] as string[]);
+    return peers.length === 1 ? peers[0] : undefined;
+  }
+
   //
   // Actions
   //
@@ -193,10 +227,6 @@ class BuildSwapStore {
    */
   @action.bound
   goToPrevStep() {
-    if (this.currentStep === BuildSwapSteps.ChooseAmount) {
-      this.cancel();
-      return;
-    }
     if (this.currentStep === BuildSwapSteps.Processing) {
       // if back is clicked on the processing step
       this.abortSwap();
@@ -299,7 +329,7 @@ class BuildSwapStore {
         const chanIds = this.selectedChanIds.map(v => parseInt(v));
         const res =
           direction === SwapDirection.IN
-            ? await this._store.api.loop.loopIn(amount, quote)
+            ? await this._store.api.loop.loopIn(amount, quote, this.loopInLastHop)
             : await this._store.api.loop.loopOut(amount, quote, chanIds);
         this._store.log.info('completed loop', toJS(res));
         runInAction('requestSwapContinuation', () => {