channels: add full alias to the pubkey tooltip

Author: jamaljsr

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

@@ -55,6 +55,16 @@ describe('ChannelRow component', () => {
     expect(getByText(channel.aliasLabel)).toBeInTheDocument();
   });
 
+  it('should display the peer pubkey & alias tooltip', () => {
+    const { getByText, getAllByText } = render();
+    channel.alias = 'test-alias';
+    fireEvent.mouseEnter(getByText(channel.aliasLabel));
+    expect(getByText(channel.remotePubkey)).toBeInTheDocument();
+    expect(getAllByText(channel.alias)).toHaveLength(2);
+    channel.alias = channel.remotePubkey.substring(12);
+    expect(getByText(channel.remotePubkey)).toBeInTheDocument();
+  });
+
   it('should display the capacity', () => {
     const { getByText } = render();
     expect(

app/src/components/loop/ChannelRow.tsx

@@ -17,6 +17,13 @@ import ChannelIcon from './ChannelIcon';
  */
 export const ROW_HEIGHT = 60;
 
+const BaseColumn = styled(Column)`
+  white-space: nowrap;
+  line-height: ${ROW_HEIGHT}px;
+  padding-left: 5px;
+  padding-right: 5px;
+`;
+
 const Styled = {
   Row: styled(Row)<{ dimmed?: boolean; selectable?: boolean }>`
     border-bottom: 0.5px solid ${props => props.theme.colors.darkGray};
@@ -35,43 +42,55 @@ const Styled = {
       }
     `}
   `,
-  Column: styled(Column)<{ last?: boolean; ellipse?: boolean }>`
-    white-space: nowrap;
-    line-height: ${ROW_HEIGHT}px;
-    padding-left: 5px;
+  Column: styled(BaseColumn)<{ last?: boolean }>`
     padding-right: ${props => (props.last ? '15' : '5')}px;
-    ${props =>
-      props.ellipse &&
-      `
-      overflow: hidden;
-      text-overflow: ellipsis;
-    `}
+  `,
+  ActionColumn: styled(BaseColumn)`
+    max-width: 50px;
+    padding-left: 24px;
+  `,
+  WideColumn: styled(BaseColumn)`
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @media (min-width: 1200px) and (max-width: 1300px) {
+      max-width: 20%;
+    }
   `,
   StatusIcon: styled.span`
-    float: left;
-    margin-top: -1px;
-    margin-left: 15px;
     color: ${props => props.theme.colors.pink};
   `,
   Check: styled(Checkbox)`
-    float: left;
-    margin-top: 18px;
-    margin-left: 10px;
+    margin-top: 17px;
   `,
   Balance: styled(ChannelBalance)`
     margin-top: ${ROW_HEIGHT / 2 - 2}px;
   `,
+  AliasTip: styled.div`
+    text-align: right;
+  `,
+};
+
+const ChannelAliasTip: React.FC<{ channel: Channel }> = ({ channel }) => {
+  return (
+    <Styled.AliasTip>
+      {channel.aliasDetail.split('\n').map(text => (
+        <div key={text}>{text}</div>
+      ))}
+    </Styled.AliasTip>
+  );
 };
 
 export const ChannelRowHeader: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.loop.ChannelRowHeader');
-  const { Column } = Styled;
+  const { Column, ActionColumn, WideColumn } = Styled;
   return (
     <Row>
+      <ActionColumn></ActionColumn>
       <Column right>
         <HeaderFour>{l('canReceive')}</HeaderFour>
       </Column>
-      <Column cols={2} colsXl={3}></Column>
+      <WideColumn cols={2} colsXl={3}></WideColumn>
       <Column>
         <HeaderFour>{l('canSend')}</HeaderFour>
       </Column>
@@ -83,9 +102,9 @@ export const ChannelRowHeader: React.FC = () => {
       <Column cols={1}>
         <HeaderFour>{l('upTime')}</HeaderFour>
       </Column>
-      <Column cols={2}>
+      <WideColumn cols={2}>
         <HeaderFour>{l('peer')}</HeaderFour>
-      </Column>
+      </WideColumn>
       <Column right last>
         <HeaderFour>{l('capacity')}</HeaderFour>
       </Column>
@@ -110,37 +129,43 @@ const ChannelRow: React.FC<Props> = ({ channel, style }) => {
     store.buildSwapStore.toggleSelectedChannel(channel.chanId);
   };
 
-  const { Row, Column, StatusIcon, Check, Balance } = Styled;
+  const { Row, Column, ActionColumn, WideColumn, StatusIcon, Check, Balance } = Styled;
   return (
     <Row
       dimmed={dimmed}
       style={style}
       selectable={editable && !disabled}
       onClick={editable && !disabled ? handleRowChecked : undefined}
     >
-      <Column right>
+      <ActionColumn>
         {editable ? (
           <Check checked={checked} disabled={disabled} />
         ) : (
           <StatusIcon>
             <ChannelIcon channel={channel} />
           </StatusIcon>
         )}
+      </ActionColumn>
+      <Column right>
         <Unit sats={channel.remoteBalance} suffix={false} />
       </Column>
-      <Column cols={2} colsXl={3}>
+      <WideColumn cols={2} colsXl={3}>
         <Balance channel={channel} />
-      </Column>
+      </WideColumn>
       <Column>
         <Unit sats={channel.localBalance} suffix={false} />
       </Column>
       <Column cols={1}>{channel.remoteFeeRate}</Column>
       <Column cols={1}>{channel.uptimePercent}</Column>
-      <Column cols={2} ellipse>
-        <Tip overlay={channel.remotePubkey} placement="left" capitalize={false}>
+      <WideColumn cols={2}>
+        <Tip
+          overlay={<ChannelAliasTip channel={channel} />}
+          placement="left"
+          capitalize={false}
+        >
           <span>{channel.aliasLabel}</span>
         </Tip>
-      </Column>
+      </WideColumn>
       <Column right>
         <Unit sats={channel.capacity} suffix={false} />
       </Column>

app/src/store/models/channel.ts

@@ -37,13 +37,25 @@ export default class Channel {
    */
   @computed get aliasLabel() {
     // if the node does not specify an alias, it is set to a substring of
-    // the pubkey. we want to the display the ellipsed pubkey in this case
+    // the pubkey, we want to the display the ellipsed pubkey in this case
     // instead of the substring.
     return this.alias && !this.remotePubkey.includes(this.alias as string)
       ? this.alias
       : ellipseInside(this.remotePubkey);
   }
 
+  /**
+   * The remotePubkey and alias if one is defined
+   */
+  @computed get aliasDetail() {
+    // if the node does not specify an alias, it is set to a substring of
+    // the pubkey, we want to the display just the pubkey. Otherwise,
+    // display both
+    return this.alias && !this.remotePubkey.includes(this.alias as string)
+      ? `${this.alias}\n${this.remotePubkey}`
+      : this.remotePubkey;
+  }
+
   /**
    * The uptime of the channel as a percentage of lifetime
    */