swap: update "x channels selected" label

Author: jamaljsr

app/src/components/loop/LoopActions.tsx

@@ -4,18 +4,22 @@ import { SwapDirection } from 'types/state';
 import { usePrefixedTranslation } from 'hooks';
 import { formatSats } from 'util/formatters';
 import { useStore } from 'store';
-import { Button, Close, Pill, Refresh } from 'components/base';
+import { Button, Close, Refresh } from 'components/base';
 import { styled } from 'components/theme';
+import SelectedChannels from './SelectedChannels';
 
 const Styled = {
   Wrapper: styled.section`
     margin: 50px 0;
   `,
   Actions: styled.div`
+    display: flex;
+    align-items: center;
     margin-top: -15px;
   `,
   ActionBar: styled.div`
-    display: inline-block;
+    display: flex;
+    align-items: center;
     width: 595px;
     padding: 15px;
     background-color: ${props => props.theme.colors.darkBlue};
@@ -30,9 +34,8 @@ const Styled = {
   CloseIcon: styled(Close)`
     margin-right: 25px;
   `,
-  Selected: styled.span`
-    display: inline-block;
-    margin-right: 50px;
+  Selected: styled(SelectedChannels)`
+    flex: 1;
   `,
   Note: styled.span`
     display: inline-block;
@@ -64,8 +67,7 @@ const LoopActions: React.FC = () => {
         <Actions>
           <ActionBar>
             <CloseIcon onClick={buildSwapStore.cancel} />
-            <Pill>{selectedCount}</Pill>
-            <Selected>{l('channelsSelected')}</Selected>
+            <Selected count={selectedCount} />
             <Button
               primary={loopOutAllowed && inferredDirection === SwapDirection.OUT}
               borderless

app/src/components/loop/SelectedChannels.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { usePrefixedTranslation } from 'hooks';
+import { Pill } from 'components/base';
+import { styled } from 'components/theme';
+
+const Styled = {
+  Wrapper: styled.span`
+    /* display: flex;
+    justify-content: center; */
+  `,
+};
+
+interface Props {
+  count: number;
+  className?: string;
+}
+
+const SelectedChannels: React.FC<Props> = ({ count, className }) => {
+  const { l } = usePrefixedTranslation('cmps.loop.SelectedChannels');
+
+  const label =
+    count === 0
+      ? l('useAnyChannel')
+      : count === 1
+      ? l('channelSelected')
+      : l('channelsSelected');
+
+  const { Wrapper } = Styled;
+  return (
+    <Wrapper className={className}>
+      {count > 0 && <Pill>{count}</Pill>}
+      <span>{label}</span>
+    </Wrapper>
+  );
+};
+
+export default SelectedChannels;

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { usePrefixedTranslation } from 'hooks';
+
 import { useStore } from 'store';
-import { HeaderFive, HeaderFour, Pill, Small } from 'components/base';
+import { HeaderFive, HeaderFour, Small } from 'components/base';
 import { styled } from 'components/theme';
+import SelectedChannels from '../SelectedChannels';
 
 const Styled = {
   Wrapper: styled.div`
@@ -27,7 +28,6 @@ interface Props {
 }
 
 const StepSummary: React.FC<Props> = ({ title, heading, description }) => {
-  const { l } = usePrefixedTranslation('cmps.loop.swap.StepSummary');
   const { buildSwapStore } = useStore();
 
   const { Wrapper, Description } = Styled;
@@ -39,8 +39,7 @@ const StepSummary: React.FC<Props> = ({ title, heading, description }) => {
         <Description>{description}</Description>
       </div>
       <div>
-        <Pill>{buildSwapStore.selectedChanIds.length}</Pill>
-        {l('channelsSelected')}
+        <SelectedChannels count={buildSwapStore.selectedChanIds.length} />
       </div>
     </Wrapper>
   );

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

@@ -26,7 +26,9 @@
   "cmps.loop.ChannelRowHeader.upTime": "Up Time %",
   "cmps.loop.ChannelRowHeader.peer": "Peer/Alias",
   "cmps.loop.ChannelRowHeader.capacity": "Capacity",
-  "cmps.loop.LoopActions.channelsSelected": "channels selected",
+  "cmps.loop.SelectedChannels.channelSelected": "channel selected",
+  "cmps.loop.SelectedChannels.channelsSelected": "channels selected",
+  "cmps.loop.SelectedChannels.useAnyChannel": "Automatic channel selection",
   "cmps.loop.LoopActions.loopMinimumNote": "Minimum Loop amount is {{min}}",
   "cmps.loop.LoopActions.loopInNote": "For multi Loop In, all channels must use the same peer.",
   "cmps.loop.LoopPage.pageTitle": "Lightning Loop",
@@ -41,7 +43,6 @@
   "cmps.loop.swap.StepButtons.cancel": "Cancel",
   "cmps.loop.swap.StepButtons.next": "Next",
   "cmps.loop.swap.StepButtons.confirm": "Confirm",
-  "cmps.loop.swap.StepSummary.channelsSelected": "channels selected",
   "cmps.loop.swap.SwapConfigStep.title": "Step 1 of 2",
   "cmps.loop.swap.SwapConfigStep.heading": "Set Liquidity Parameters",
   "cmps.loop.swap.SwapConfigStep.description": "Use the slider to prevent errors receiving or forwarding payments on the channels selected below.",