chore: improve channel view

src/components/generic/helpers.tsx

@@ -31,6 +31,23 @@ export const shorten = (text: string): string => {
   return `${beginning}...${end}`;
 };
 
+export const addEllipsis = (
+  text: string | null | undefined,
+  length: number = 14
+): string => {
+  if (!text) return '';
+
+  const textLength = text.length;
+
+  if (textLength <= length) {
+    return text;
+  }
+
+  const beginning = text.slice(0, length);
+
+  return `${beginning}...`;
+};
+
 export const copyLink = (text: string) => (
   <CopyToClipboard text={text} onCopy={() => toast.success('Copied')}>
     <CopyIcon>

src/context/ConfigContext.tsx

@@ -27,7 +27,7 @@ export type channelSortTypes =
   | 'partnerName'
   | 'size';
 export type sortDirectionTypes = 'increase' | 'decrease';
-export type subBarType = 'fees' | 'none';
+export type extraColumnsType = 'outgoing' | 'incoming' | 'both' | 'none';
 export type maxSatValueType = 'auto' | 1000000 | 5000000 | 10000000 | 16000000;
 
 type State = {
@@ -47,7 +47,7 @@ type State = {
   channelBarType: channelBarTypeTypes;
   channelSort: channelSortTypes;
   sortDirection: sortDirectionTypes;
-  subBar: subBarType;
+  extraColumns: extraColumnsType;
   maxSatValue: maxSatValueType;
 };
 
@@ -74,7 +74,7 @@ type ActionType =
       channelBarType?: channelBarTypeTypes;
       channelSort?: channelSortTypes;
       sortDirection?: sortDirectionTypes;
-      subBar?: subBarType;
+      extraColumns?: extraColumnsType;
       maxSatValue?: maxSatValueType;
     }
   | { type: 'themeChange'; theme: string };
@@ -108,7 +108,7 @@ const initialState: State = {
   channelBarType: 'balance',
   channelSort: 'none',
   sortDirection: 'decrease',
-  subBar: 'none',
+  extraColumns: 'none',
   maxSatValue: 'auto',
   useSatWord: false,
 };

src/layouts/navigation/nodeInfo/NodeInfo.tsx

@@ -4,7 +4,7 @@ import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
 import { getPrice, Price } from 'src/components/price/Price';
 import { AnimatedNumber } from 'src/components/animated/AnimatedNumber';
-import { renderLine } from 'src/components/generic/helpers';
+import { addEllipsis, renderLine } from 'src/components/generic/helpers';
 import { useNodeInfo } from 'src/hooks/UseNodeInfo';
 import { unSelectedNavButton } from '../../../styles/Themes';
 import {
@@ -87,15 +87,13 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
   const formatCCB = format({ amount: channelBalance });
   const formatPCB = format({ amount: channelPending });
 
-  if (!alias) {
-    return null;
-  }
+  if (!alias) return null;
 
   if (isBurger) {
     return (
       <>
         <SingleLine>
-          <SubTitle>{alias}</SubTitle>
+          <SubTitle>{addEllipsis(alias)}</SubTitle>
           <Circle
             size={18}
             strokeWidth={'0'}
@@ -196,7 +194,7 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
     <>
       <Title>
         <Alias bottomColor={color} data-tip={`Version: ${version}`}>
-          {alias}
+          {addEllipsis(alias)}
         </Alias>
       </Title>
       <Separation lineColor={unSelectedNavButton} />

src/views/channels/channels/Channel.style.ts

@@ -26,12 +26,10 @@ export const ChannelStatsLine = styled.div`
 `;
 
 export const ChannelBarSide = styled.div`
-  width: 50%;
   display: flex;
   align-items: center;
 
   @media (${mediaWidths.mobile}) {
-    width: 100%;
     flex-direction: column;
   }
 `;
@@ -127,3 +125,13 @@ export const WumboTag = styled.div`
   text-align: center;
   padding: 2px 0;
 `;
+
+export const LineGrid = styled.div<{ template?: string }>`
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: ${({ template }) => template || '1fr 3fr'};
+
+  @media (${mediaWidths.mobile}) {
+    grid-template-columns: 1fr;
+  }
+`;

src/views/channels/channels/ChannelBars.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { BalanceBars, SingleBar, SumBar } from 'src/components/balance';
+import { BalanceBars, SumBar } from 'src/components/balance';
 import { ProgressBar } from 'src/components/generic/CardGeneric';
 import { FormatFnType } from 'src/components/price/Price';
 import { useConfigState } from 'src/context/ConfigContext';
@@ -57,7 +57,7 @@ export const ChannelBars: FC<ChannelBarsProps> = ({
   const { base_fee_mtokens: node_base, fee_rate: node_rate } =
     partner_fee_info?.node_policies || {};
 
-  const { channelBarType, subBar } = useConfigState();
+  const { channelBarType } = useConfigState();
 
   const maxRate = Math.min(fee_rate || 0, 10000);
   const maxNodeRate = Math.min(node_rate || 0, 10000);
@@ -122,9 +122,6 @@ export const ChannelBars: FC<ChannelBarsProps> = ({
     case 'proportional':
       return (
         <ChannelStatsColumn>
-          {subBar === 'fees' && (
-            <SingleBar value={getBar(maxRate, 2000)} height={4} />
-          )}
           <BalanceBars
             local={getBar(local_balance, biggest)}
             remote={getBar(remote_balance, biggest)}
@@ -137,9 +134,6 @@ export const ChannelBars: FC<ChannelBarsProps> = ({
     case 'htlcs':
       return (
         <ChannelStatsColumn>
-          {subBar === 'fees' && (
-            <SingleBar value={getBar(maxRate, 2000)} height={4} />
-          )}
           <SumBar
             values={[
               getPercent(incoming_amount, MAX_HTLCS - incoming_amount),
@@ -151,9 +145,6 @@ export const ChannelBars: FC<ChannelBarsProps> = ({
     default:
       return (
         <ChannelStatsColumn>
-          {subBar === 'fees' && (
-            <SingleBar value={getBar(maxRate, 2000)} height={4} />
-          )}
           <BalanceBars
             local={getPercent(local_balance, remote_balance)}
             remote={getPercent(remote_balance, local_balance)}

src/views/channels/channels/ChannelCard.tsx

@@ -15,13 +15,9 @@ import {
 } from 'src/context/RebalanceContext';
 import differenceInDays from 'date-fns/differenceInDays';
 import { MainInfo } from '../../../components/generic/CardGeneric';
-import {
-  SubCard,
-  ResponsiveLine,
-  DarkSubTitle,
-} from '../../../components/generic/Styled';
+import { SubCard, DarkSubTitle } from '../../../components/generic/Styled';
 import { useConfigState } from '../../../context/ConfigContext';
-import { renderLine } from '../../../components/generic/helpers';
+import { addEllipsis, renderLine } from '../../../components/generic/helpers';
 import { getPrice } from '../../../components/price/Price';
 import { usePriceState } from '../../../context/PriceContext';
 import {
@@ -32,8 +28,9 @@ import {
   ChannelBalanceRow,
   ChannelBalanceButton,
   ChannelAlias,
+  LineGrid,
 } from './Channel.style';
-import { getTitleColor } from './helpers';
+import { getColumnTemplate, getTitleColor } from './helpers';
 import { ChannelDetails } from './ChannelDetails';
 import { ChannelBars } from './ChannelBars';
 import { ChannelBarsInfo } from './ChannelBarsInfo';
@@ -72,7 +69,12 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
   const dispatch = useRebalanceDispatch();
   const { inChannel, outChannel } = useRebalanceState();
 
-  const { channelBarStyle } = useConfigState();
+  const { channelBarStyle, extraColumns } = useConfigState();
+
+  const showIncoming = extraColumns === 'incoming' || extraColumns === 'both';
+  const showOutgoing = extraColumns === 'outgoing' || extraColumns === 'both';
+
+  const template = getColumnTemplate(extraColumns);
 
   const { currency, displayValues } = useConfigState();
   const priceContext = usePriceState();
@@ -88,9 +90,14 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
     is_private,
     partner_public_key,
     partner_node_info,
+    partner_fee_info,
     bosScore,
   } = channelInfo;
 
+  const fee_rate = partner_fee_info?.partner_node_policies?.fee_rate;
+
+  const node_rate = partner_fee_info?.node_policies?.fee_rate;
+
   const barDetails = {
     biggestRateFee,
     biggestBaseFee,
@@ -147,7 +154,7 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
         disabled={channelBarStyle === 'balancing'}
         onClick={() => channelBarStyle !== 'balancing' && handleClick()}
       >
-        <ResponsiveLine>
+        <LineGrid template={template}>
           <ChannelNodeTitle
             style={{ flexGrow: 2 }}
             data-tip
@@ -161,7 +168,7 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
                 isBosNode
               )}
             >
-              {alias || partner_public_key?.substring(0, 6)}
+              {addEllipsis(alias || partner_public_key)}
             </ChannelAlias>
             {!(
               channelBarStyle === 'ultracompact' ||
@@ -176,6 +183,11 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
               </ChannelSingleLine>
             )}
           </ChannelNodeTitle>
+          {showOutgoing ? (
+            <ChannelSingleLine>
+              <DarkSubTitle>{`${node_rate || '-'} ppm`}</DarkSubTitle>
+            </ChannelSingleLine>
+          ) : null}
           <ChannelBarSide data-tip data-for={`node_balance_tip_${index}`}>
             <ChannelBars
               info={channelInfo}
@@ -209,7 +221,12 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
               </ChannelBalanceRow>
             )}
           </ChannelBarSide>
-        </ResponsiveLine>
+          {showIncoming ? (
+            <ChannelSingleLine>
+              <DarkSubTitle>{`${fee_rate || '-'} ppm`}</DarkSubTitle>
+            </ChannelSingleLine>
+          ) : null}
+        </LineGrid>
       </MainInfo>
       {index === indexOpen && (
         <ChannelDetails info={channelInfo} format={format} />

src/views/channels/channels/ChannelManage.tsx

@@ -10,7 +10,7 @@ import {
   channelBarTypeTypes,
   channelSortTypes,
   sortDirectionTypes,
-  subBarType,
+  extraColumnsType,
   maxSatValueType,
 } from 'src/context/ConfigContext';
 import {
@@ -37,7 +37,7 @@ export const ChannelManage = () => {
     channelBarStyle,
     channelSort,
     sortDirection,
-    subBar,
+    extraColumns,
     maxSatValue,
   } = useConfigState();
   const dispatch = useConfigDispatch();
@@ -46,8 +46,8 @@ export const ChannelManage = () => {
     dispatch({ type: 'change', channelBarStyle: style });
   const changeType = (type: channelBarTypeTypes) =>
     dispatch({ type: 'change', channelBarType: type });
-  const changeSub = (type: subBarType) =>
-    dispatch({ type: 'change', subBar: type });
+  const changeSub = (type: extraColumnsType) =>
+    dispatch({ type: 'change', extraColumns: type });
   const changeSort = (type: channelSortTypes) =>
     dispatch({ type: 'change', channelSort: type });
   const changeDirection = (type: sortDirectionTypes) =>
@@ -212,16 +212,28 @@ export const ChannelManage = () => {
             {(channelBarType === 'proportional' ||
               channelBarType === 'balance') && (
               <MarginLine>
-                <Sub4Title>Sub Bar</Sub4Title>
+                <Sub4Title>Fee Rate</Sub4Title>
                 <MultiButton>
                   <SingleButton
-                    selected={subBar === 'fees'}
-                    onClick={() => changeSub('fees')}
+                    selected={extraColumns === 'outgoing'}
+                    onClick={() => changeSub('outgoing')}
                   >
-                    Fee Rate
+                    Outgoing
                   </SingleButton>
                   <SingleButton
-                    selected={subBar === 'none'}
+                    selected={extraColumns === 'incoming'}
+                    onClick={() => changeSub('incoming')}
+                  >
+                    Incoming
+                  </SingleButton>
+                  <SingleButton
+                    selected={extraColumns === 'both'}
+                    onClick={() => changeSub('both')}
+                  >
+                    Both
+                  </SingleButton>
+                  <SingleButton
+                    selected={extraColumns === 'none'}
                     onClick={() => changeSub('none')}
                   >
                     None

src/views/channels/channels/helpers.ts

@@ -1,3 +1,4 @@
+import { extraColumnsType } from 'src/context/ConfigContext';
 import { chartColors, themeColors } from 'src/styles/Themes';
 
 export const getTitleColor = (
@@ -18,3 +19,16 @@ export const getTitleColor = (
       return undefined;
   }
 };
+
+export const getColumnTemplate = (extraColumns: extraColumnsType) => {
+  switch (extraColumns) {
+    case 'incoming':
+      return '1fr 2fr 80px';
+    case 'outgoing':
+      return '1fr 80px 2fr';
+    case 'both':
+      return '1fr 80px 2fr 80px';
+    default:
+      return undefined;
+  }
+};