feat: display paylock icon for private channels

LN-Zap · Mar 26, 2020 · ef16141 · ef16141
1 parent 0512292
commit ef16141
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/renderer/components/Channels/ChannelCardListItem.js b/renderer/components/Channels/ChannelCardListItem.js
@@ -12,6 +12,7 @@ import ChannelData from './ChannelData'
 import ChannelCapacity from './ChannelCapacity'
 import ChannelMoreButton from './ChannelMoreButton'
 import ChannelStatus from './ChannelStatus'
+import Padlock from 'components/Icon/Padlock'
 import messages from './messages'
 
 const ClippedHeading = withEllipsis(Heading.h1)
@@ -31,6 +32,7 @@ const ChannelCardListItem = React.memo(
       remote_balance,
       display_status,
       active,
+      private: isPrivate,
     } = channel
     const opacity = active ? 1 : 0.3
 
@@ -43,7 +45,14 @@ const ChannelCardListItem = React.memo(
                 {display_name}
               </ClippedHeading>
 
-              <ChannelStatus mb="auto" status={display_status} />
+              <Flex>
+                {isPrivate && (
+                  <Box color="gray" fontSize="s" mr={1}>
+                    <Padlock />
+                  </Box>
+                )}
+                <ChannelStatus mb="auto" status={display_status} />
+              </Flex>
             </Flex>
             <Flex justifyContent="space-between" opacity={opacity}>
               <Text fontWeight="normal">

diff --git a/renderer/components/Channels/ChannelSummaryListItem.js b/renderer/components/Channels/ChannelSummaryListItem.js
@@ -7,6 +7,7 @@ import { withEllipsis } from 'hocs'
 import ChannelCapacity from './ChannelCapacity'
 import ChannelMoreButton from './ChannelMoreButton'
 import ChannelStatus from './ChannelStatus'
+import Padlock from 'components/Icon/Padlock'
 
 const ClippedHeading = withEllipsis(Heading.h1)
 const ClippedText = withEllipsis(Text)
@@ -24,14 +25,22 @@ const ChannelSummaryListItem = React.memo(props => {
     remote_balance,
     display_status,
     active,
+    private: isPrivate,
   } = channel
   const opacity = active ? 1 : 0.3
 
   return (
     <Card {...rest}>
       <Flex alignItems="center">
         <Box width={8 / 20}>
-          <ChannelStatus status={display_status} />
+          <Flex>
+            <ChannelStatus status={display_status} />
+            {isPrivate && (
+              <Box color="gray" fontSize="s" ml={1}>
+                <Padlock />
+              </Box>
+            )}
+          </Flex>
           <ClippedHeading my={1} opacity={opacity}>
             {display_name}
           </ClippedHeading>