Merge pull request #112 from jamaljsr/swap-addl-options

loop: add options for conf target and loop out address

Author: jamaljsr

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { values } from 'mobx';
 import { SwapDirection } from 'types/state';
 import { fireEvent } from '@testing-library/react';
 import Big from 'big.js';
@@ -69,6 +70,46 @@ describe('SwapWizard component', () => {
       expect(+build.amountForSelected).toEqual(575000);
       expect(getByText(`575,000 sats`)).toBeInTheDocument();
     });
+
+    it('should show additional options', () => {
+      const { getByText } = render();
+      fireEvent.click(getByText('Additional Options'));
+      expect(getByText('Hide Options')).toBeInTheDocument();
+    });
+
+    it('should store the specified conf target', () => {
+      const { getByText, getByPlaceholderText } = render();
+      fireEvent.click(getByText('Additional Options'));
+      fireEvent.change(getByPlaceholderText('number of blocks (ex: 6)'), {
+        target: { value: 20 },
+      });
+      expect(store.buildSwapStore.confTarget).toBeUndefined();
+      fireEvent.click(getByText('Next'));
+      expect(store.buildSwapStore.confTarget).toBe(20);
+    });
+
+    it('should store the specified destination address', () => {
+      const { getByText, getByPlaceholderText } = render();
+      fireEvent.click(getByText('Additional Options'));
+      fireEvent.change(getByPlaceholderText('segwit address'), {
+        target: { value: 'abcdef' },
+      });
+      expect(store.buildSwapStore.loopOutAddress).toBeUndefined();
+      fireEvent.click(getByText('Next'));
+      expect(store.buildSwapStore.loopOutAddress).toBe('abcdef');
+    });
+
+    it('should handle invalid conf target', () => {
+      const { getByText, getByPlaceholderText } = render();
+      fireEvent.click(getByText('Additional Options'));
+      fireEvent.change(getByPlaceholderText('number of blocks (ex: 6)'), {
+        target: { value: 'asdf' },
+      });
+      fireEvent.click(getByText('Next'));
+      expect(values(store.uiStore.alerts)[0].message).toBe(
+        'Confirmation target must be between 20 and 60.',
+      );
+    });
   });
 
   describe('Review Step', () => {

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

@@ -5,7 +5,7 @@ import { waitFor } from '@testing-library/react';
 import Big from 'big.js';
 import { BalanceMode } from 'util/constants';
 import { injectIntoGrpcUnary } from 'util/tests';
-import { lndChannel, loopInTerms } from 'util/tests/sampleData';
+import { lndChannel, loopInTerms, loopOutTerms } from 'util/tests/sampleData';
 import { BuildSwapStore, createStore, Store } from 'store';
 import { Channel } from 'store/models';
 import { SWAP_ABORT_DELAY } from 'store/stores/buildSwapStore';
@@ -83,7 +83,12 @@ describe('BuildSwapStore', () => {
     expect(store.terms.out).toEqual({ min: Big(0), max: Big(0) });
     await store.getTerms();
     expect(store.terms.in).toEqual({ min: Big(250000), max: Big(1000000) });
-    expect(store.terms.out).toEqual({ min: Big(250000), max: Big(1000000) });
+    expect(store.terms.out).toEqual({
+      min: Big(250000),
+      max: Big(1000000),
+      minCltv: 20,
+      maxCltv: 60,
+    });
   });
 
   it('should handle errors fetching loop terms', async () => {
@@ -116,6 +121,68 @@ describe('BuildSwapStore', () => {
     expect(+store.amountForSelected).toBe(loopInTerms.maxSwapAmount);
   });
 
+  it('should validate the conf target', async () => {
+    const { minCltvDelta, maxCltvDelta } = loopOutTerms;
+    expect(store.confTarget).toBeUndefined();
+
+    let target = maxCltvDelta - 10;
+    store.setConfTarget(target);
+    expect(store.confTarget).toBe(target);
+
+    store.setDirection(SwapDirection.OUT);
+    await store.getTerms();
+
+    store.setConfTarget(target);
+    expect(store.confTarget).toBe(target);
+
+    target = minCltvDelta - 10;
+    expect(() => store.setConfTarget(target)).toThrow();
+
+    target = maxCltvDelta + 10;
+    expect(() => store.setConfTarget(target)).toThrow();
+  });
+
+  it('should submit the Loop Out conf target', async () => {
+    const target = 23;
+    store.setDirection(SwapDirection.OUT);
+    store.setAmount(Big(500000));
+
+    expect(store.confTarget).toBeUndefined();
+    store.setConfTarget(target);
+    expect(store.confTarget).toBe(target);
+
+    let reqTarget = '';
+    // mock the grpc unary function in order to capture the supplied dest
+    // passed in with the API request
+    injectIntoGrpcUnary((desc, props) => {
+      reqTarget = (props.request.toObject() as any).sweepConfTarget;
+    });
+
+    store.requestSwap();
+    await waitFor(() => expect(reqTarget).toBe(target));
+  });
+
+  it('should submit the Loop Out address', async () => {
+    const addr = 'xyzabc';
+    store.setDirection(SwapDirection.OUT);
+    store.setAmount(Big(500000));
+
+    expect(store.loopOutAddress).toBeUndefined();
+    store.setLoopOutAddress(addr);
+    expect(store.loopOutAddress).toBe(addr);
+    // store.goToNextStep();
+
+    let reqAddr = '';
+    // mock the grpc unary function in order to capture the supplied dest
+    // passed in with the API request
+    injectIntoGrpcUnary((desc, props) => {
+      reqAddr = (props.request.toObject() as any).dest;
+    });
+
+    store.requestSwap();
+    await waitFor(() => expect(reqAddr).toBe(addr));
+  });
+
   it('should select all channels with the same peer for loop in', () => {
     const channels = rootStore.channelStore.sortedChannels;
     channels[1].remotePubkey = channels[0].remotePubkey;

app/src/api/loop.ts

@@ -51,19 +51,27 @@ class LoopApi extends BaseApi<LoopEvents> {
   /**
    * call the Loop `GetLoopInQuote` RPC and return the response
    */
-  async getLoopInQuote(amount: Big): Promise<LOOP.InQuoteResponse.AsObject> {
+  async getLoopInQuote(
+    amount: Big,
+    confTarget?: number,
+  ): Promise<LOOP.InQuoteResponse.AsObject> {
     const req = new LOOP.QuoteRequest();
     req.setAmt(+amount);
+    if (confTarget) req.setConfTarget(confTarget);
     const res = await this._grpc.request(SwapClient.GetLoopInQuote, req, this._meta);
     return res.toObject();
   }
 
   /**
    * call the Loop `LoopOutQuote` RPC and return the response
    */
-  async getLoopOutQuote(amount: Big): Promise<LOOP.OutQuoteResponse.AsObject> {
+  async getLoopOutQuote(
+    amount: Big,
+    confTarget?: number,
+  ): Promise<LOOP.OutQuoteResponse.AsObject> {
     const req = new LOOP.QuoteRequest();
     req.setAmt(+amount);
+    if (confTarget) req.setConfTarget(confTarget);
     const res = await this._grpc.request(SwapClient.LoopOutQuote, req, this._meta);
     return res.toObject();
   }
@@ -75,12 +83,14 @@ class LoopApi extends BaseApi<LoopEvents> {
     amount: Big,
     quote: Quote,
     lastHop?: string,
+    confTarget?: number,
   ): 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'));
+    if (confTarget) req.setHtlcConfTarget(confTarget);
     const res = await this._grpc.request(SwapClient.LoopIn, req, this._meta);
     return res.toObject();
   }
@@ -93,6 +103,8 @@ class LoopApi extends BaseApi<LoopEvents> {
     quote: Quote,
     chanIds: number[],
     deadline: number,
+    confTarget?: number,
+    destAddress?: string,
   ): Promise<LOOP.SwapResponse.AsObject> {
     const req = new LOOP.LoopOutRequest();
     req.setAmt(+amount);
@@ -103,6 +115,8 @@ class LoopApi extends BaseApi<LoopEvents> {
     req.setMaxPrepayRoutingFee(this._calcRoutingFee(+quote.prepayAmount));
     req.setOutgoingChanSetList(chanIds);
     req.setSwapPublicationDeadline(deadline);
+    if (confTarget) req.setSweepConfTarget(confTarget);
+    if (destAddress) req.setDest(destAddress);
 
     const res = await this._grpc.request(SwapClient.LoopOut, req, this._meta);
     return res.toObject();

app/src/assets/icons/settings.svg

@@ -18,6 +18,7 @@ import { ReactComponent as MaximizeIcon } from 'assets/icons/maximize.svg';
 import { ReactComponent as MenuIcon } from 'assets/icons/menu.svg';
 import { ReactComponent as MinimizeIcon } from 'assets/icons/minimize.svg';
 import { ReactComponent as RefreshIcon } from 'assets/icons/refresh-cw.svg';
+import { ReactComponent as SettingsIcon } from 'assets/icons/settings.svg';
 import { ReactComponent as CancelIcon } from 'assets/icons/slash.svg';
 import { styled } from 'components/theme';
 
@@ -92,3 +93,4 @@ export const Menu = Icon.withComponent(MenuIcon);
 export const Minimize = Icon.withComponent(MinimizeIcon);
 export const Maximize = Icon.withComponent(MaximizeIcon);
 export const Refresh = Icon.withComponent(RefreshIcon);
+export const Settings = Icon.withComponent(SettingsIcon);

app/src/components/base/icons.tsx

@@ -135,6 +135,11 @@ export const Input = styled.input`
   &:focus {
     outline: none;
     background-color: ${props => props.theme.colors.overlay};
+    border-bottom-color: ${props => props.theme.colors.white};
+  }
+
+  &::placeholder {
+    color: ${props => props.theme.colors.gray};
   }
 `;
 

app/src/components/base/shared.tsx

@@ -68,7 +68,8 @@ const TooltipWrapper: React.FC<Props> = ({
  * prop. So we basically proxy the className using the TooltipWrapper
  * above, then export this styled component for the rest of the app to use
  */
-const Tip = styled(TooltipWrapper)<{ capitalize?: boolean }>`
+const Tip = styled(TooltipWrapper)<{ capitalize?: boolean; maxWidth?: number }>`
+  max-width: ${props => (props.maxWidth ? `${props.maxWidth}px` : 'auto')};
   color: ${props => props.theme.colors.blue};
   font-family: ${props => props.theme.fonts.open.semiBold};
   font-size: ${props => props.theme.sizes.xs};

app/src/components/common/Tip.tsx

@@ -5,22 +5,28 @@ import { Button } from 'components/base';
 
 const Styled = {
   Wrapper: styled.div`
-    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+  `,
+  ExtraContent: styled.div`
+    flex: 1;
   `,
 };
 
 interface Props {
   confirm?: boolean;
   onCancel: () => void;
   onNext: () => void;
+  extra?: React.ReactNode;
 }
 
-const StepButtons: React.FC<Props> = ({ confirm, onCancel, onNext }) => {
+const StepButtons: React.FC<Props> = ({ confirm, onCancel, onNext, extra }) => {
   const { l } = usePrefixedTranslation('cmps.loop.swap.StepButtons');
 
-  const { Wrapper } = Styled;
+  const { Wrapper, ExtraContent } = Styled;
   return (
     <Wrapper>
+      <ExtraContent>{extra}</ExtraContent>
       <Button ghost borderless onClick={onCancel}>
         {l('cancel')}
       </Button>

app/src/components/loop/swap/StepButtons.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { SwapDirection } from 'types/state';
 import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
+import { Button, HeaderFour, HelpCircle, Input, Settings } from 'components/base';
 import Range from 'components/common/Range';
+import Tip from 'components/common/Tip';
 import StepButtons from './StepButtons';
 import StepSummary from './StepSummary';
 
@@ -27,13 +29,53 @@ const Styled = {
     flex-direction: column;
     justify-content: space-between;
   `,
+  Options: styled.div<{ visible: boolean }>`
+    padding: ${props => (props.visible ? '30px 0' : '0')};
+    margin: 30px 0;
+    background-color: #27273c;
+    box-shadow: inset rgba(0, 0, 0, 0.5) 0px 0px 5px 0px;
+    border-radius: 15px;
+    display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+    height: ${props => (props.visible ? '125px' : '0')};
+    transition: all 0.3s;
+
+    > div {
+      flex: 1;
+      margin: 0 30px;
+    }
+  `,
+  SmallInput: styled(Input)`
+    width: 100%;
+    font-size: ${props => props.theme.sizes.s};
+    text-align: left;
+    border-bottom-width: 1px;
+  `,
 };
 
 const SwapConfigStep: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.loop.swap.SwapConfigStep');
-  const { buildSwapStore } = useStore();
+  const { buildSwapStore, uiStore } = useStore();
+  const [confTarget, setConfTarget] = useState(
+    (buildSwapStore.confTarget || '').toString(),
+  );
+  const [destAddress, setDestAddress] = useState(buildSwapStore.loopOutAddress || '');
 
-  const { Wrapper, Summary, Config } = Styled;
+  const handleNext = useCallback(() => {
+    try {
+      if (buildSwapStore.addlOptionsVisible) {
+        const target = confTarget !== '' ? parseInt(confTarget) : undefined;
+        buildSwapStore.setConfTarget(target);
+        buildSwapStore.setLoopOutAddress(destAddress);
+      }
+      buildSwapStore.goToNextStep();
+    } catch (error) {
+      uiStore.handleError(error);
+    }
+  }, [buildSwapStore, confTarget, destAddress, uiStore]);
+
+  const { Wrapper, Summary, Config, Options, SmallInput } = Styled;
   return (
     <Wrapper data-tour="loop-amount">
       <Summary>
@@ -56,9 +98,45 @@ const SwapConfigStep: React.FC = () => {
           step={buildSwapStore.AMOUNT_INCREMENT}
           onChange={buildSwapStore.setAmount}
         />
+        <Options visible={buildSwapStore.addlOptionsVisible}>
+          <div>
+            <HeaderFour>
+              {l('confTargetLabel')}
+              <Tip overlay={l('confTargetTip')} capitalize={false} maxWidth={400}>
+                <HelpCircle />
+              </Tip>
+            </HeaderFour>
+            <SmallInput
+              placeholder={l('confTargetHint')}
+              value={confTarget}
+              onChange={e => setConfTarget(e.target.value)}
+            />
+          </div>
+          {buildSwapStore.direction === SwapDirection.OUT && (
+            <div>
+              <HeaderFour>
+                {l('destAddrLabel')}
+                <Tip overlay={l('destAddrTip')} capitalize={false} maxWidth={400}>
+                  <HelpCircle />
+                </Tip>
+              </HeaderFour>
+              <SmallInput
+                placeholder={l('destAddrHint')}
+                value={destAddress}
+                onChange={e => setDestAddress(e.target.value)}
+              />
+            </div>
+          )}
+        </Options>
         <StepButtons
           onCancel={buildSwapStore.cancel}
-          onNext={buildSwapStore.goToNextStep}
+          onNext={handleNext}
+          extra={
+            <Button ghost borderless onClick={buildSwapStore.toggleAddlOptions}>
+              <Settings />
+              {buildSwapStore.addlOptionsVisible ? l('hideOptions') : l('addlOptions')}
+            </Button>
+          }
         />
       </Config>
     </Wrapper>