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

@@ -61,6 +61,19 @@ const Styled = {
   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 = () => {
@@ -137,7 +150,11 @@ const ChannelRow: React.FC<Props> = ({ channel, style }) => {
       <Column cols={1}>{channel.remoteFeeRate}</Column>
       <Column cols={1}>{channel.uptimePercent}</Column>
       <Column cols={2} ellipse>
-        <Tip overlay={channel.remotePubkey} placement="left" capitalize={false}>
+        <Tip
+          overlay={<ChannelAliasTip channel={channel} />}
+          placement="left"
+          capitalize={false}
+        >
           <span>{channel.aliasLabel}</span>
         </Tip>
       </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
    */