Update Tooltips

Author: ShahanaFarooqui

apps/frontend/src/components/cln/ChannelDetails/ChannelDetails.tsx

@@ -4,7 +4,7 @@ import PerfectScrollbar from 'react-perfect-scrollbar';
 import { Spinner, Card, Row, Col, ProgressBar, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 import { copyTextToClipboard, formatCurrency, titleCase } from '../../../utilities/data-formatters';
-import { CallStatus, CLEAR_STATUS_ALERT_DELAY, Units } from '../../../utilities/constants';
+import { CallStatus, channelStateMap, CLEAR_STATUS_ALERT_DELAY, Units } from '../../../utilities/constants';
 import { ActionSVG } from '../../../svgs/Action';
 import { CloseSVG } from '../../../svgs/Close';
 import StatusAlert from '../../shared/StatusAlert/StatusAlert';
@@ -119,7 +119,7 @@ const ChannelDetails = (props) => {
                   <OverlayTrigger
                     placement='auto'
                     delay={{ show: 250, hide: 250 }}
-                    overlay={<Tooltip>{titleCase(props.selChannel.current_state)}</Tooltip>}
+                    overlay={<Tooltip>{titleCase(props.selChannel.current_state) + ' - ' + (channelStateMap[props.selChannel.state] ?? titleCase(props.selChannel.state?.replaceAll('_', ' ')))}</Tooltip>}
                   >
                     <span className='d-flex align-items-center justify-content-start fw-bold'>
                       <div className={'d-inline-block mx-1 dot ' + (props.selChannel.current_state?.toLowerCase() === 'active' ? 'bg-success' : props.selChannel.current_state?.toLowerCase() === 'pending' ? 'bg-warning' : 'bg-danger')}></div>

apps/frontend/src/components/cln/Channels/Channels.tsx

@@ -5,7 +5,7 @@ import { Spinner, Card, Row, Col, ListGroup, Alert, ProgressBar, OverlayTrigger,
 
 import { titleCase } from '../../../utilities/data-formatters';
 import { ActionSVG } from '../../../svgs/Action';
-import { STAGERRED_SPRING_VARIANTS_3 } from '../../../utilities/constants';
+import { channelStateMap, STAGERRED_SPRING_VARIANTS_3 } from '../../../utilities/constants';
 import { NoChannelLightSVG } from '../../../svgs/NoChannelLight';
 import { NoChannelDarkSVG } from '../../../svgs/NoChannelDark';
 import { useSelector } from 'react-redux';
@@ -45,7 +45,7 @@ const Channels = (props) => {
                             <OverlayTrigger
                               placement='auto'
                               delay={{ show: 250, hide: 250 }}
-                              overlay={<Tooltip>{titleCase(channel.current_state)}</Tooltip>}
+                              overlay={<Tooltip>{titleCase(channel.current_state) + ' - ' + (channelStateMap[channel.state] ?? titleCase(channel.state?.replaceAll('_', ' ')))}</Tooltip>}
                               >
                               <span data-testid='channel-node-alias'>
                                 <div className={'d-inline-block mx-1 dot ' + (channel.current_state?.toLowerCase() === 'active' ? 'bg-success' : channel.current_state?.toLowerCase() === 'pending' ? 'bg-warning' : 'bg-danger')}></div>