loop: add additional options to swap wizard

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/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>

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

@@ -52,6 +52,14 @@
   "cmps.loop.swap.SwapConfigStep.heading": "{{type}} Amount",
   "cmps.loop.swap.SwapConfigStep.loopInDesc": "Loop In moves funds onto the Lightning Network from an on-chain wallet to provide outbound capacity to send funds over Lightning. Use the slider to select the amount to Loop In or Loop Out of the Lightning Network",
   "cmps.loop.swap.SwapConfigStep.loopOutDesc": "Loop Out moves funds off of the Lightning Network into an on-chain address while providing inbound capacity to receive funds on Lightning. Use the slider to select the amount to Loop In or Loop Out of the Lightning Network",
+  "cmps.loop.swap.SwapConfigStep.confTargetLabel": "Confirmation Target",
+  "cmps.loop.swap.SwapConfigStep.confTargetTip": "The number of blocks to target for confirmation of the on-chain swap transaction. Specify a larger number to reduce fees.",
+  "cmps.loop.swap.SwapConfigStep.confTargetHint": "number of blocks (ex: 6)",
+  "cmps.loop.swap.SwapConfigStep.destAddrLabel": "Destination",
+  "cmps.loop.swap.SwapConfigStep.destAddrTip": "The optional address that the looped out funds should be sent to. If left blank the funds will go to LND's wallet.",
+  "cmps.loop.swap.SwapConfigStep.destAddrHint": "segwit address",
+  "cmps.loop.swap.SwapConfigStep.addlOptions": "Additional Options",
+  "cmps.loop.swap.SwapConfigStep.hideOptions": "Hide Options",
   "cmps.loop.swap.SwapProcessingStep.loadingMsg": "Submitting Loop",
   "cmps.loop.swap.SwapReviewStep.title": "Step 2 of 2",
   "cmps.loop.swap.SwapReviewStep.heading": "Review Loop amount and fee",

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

@@ -35,6 +35,9 @@ class BuildSwapStore {
   /** the amount to swap */
   @observable amount: Big = Big(0);
 
+  /** determines whether to show the swap advanced options */
+  @observable addlOptionsVisible = false;
+
   /** the confirmation target of the on-chain txn used in the swap */
   @observable confTarget?: number;
 
@@ -308,6 +311,18 @@ class BuildSwapStore {
     this.amount = amount;
   }
 
+  /**
+   * toggles the advanced options section in the swap config step
+   */
+  @action.bound
+  toggleAddlOptions() {
+    this.addlOptionsVisible = !this.addlOptionsVisible;
+    this._store.log.info(
+      `updated buildSwapStore.addlOptionsVisible`,
+      this.addlOptionsVisible,
+    );
+  }
+
   /**
    * Set the confirmation target for the swap
    */
@@ -348,6 +363,11 @@ class BuildSwapStore {
     if (this.currentStep === BuildSwapSteps.ChooseAmount) {
       this.amount = this.amountForSelected;
       this.getQuote();
+      // clear the advanced options if values were set, then hidden
+      if (!this.addlOptionsVisible) {
+        this.confTarget = undefined;
+        this.loopOutAddress = undefined;
+      }
     } else if (this.currentStep === BuildSwapSteps.ReviewQuote) {
       this.requestSwap();
     }
@@ -378,6 +398,7 @@ class BuildSwapStore {
     this.currentStep = BuildSwapSteps.Closed;
     this.selectedChanIds = [];
     this.amount = Big(0);
+    this.addlOptionsVisible = false;
     this.confTarget = undefined;
     this.loopOutAddress = undefined;
     this.quote.swapFee = Big(0);