Add Fiat tooltip for channels and channel details card

Fixes #138

Author: ShahanaFarooqui

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

@@ -16,6 +16,7 @@ import { CLNService } from '../../../services/http.service';
 import { setShowToast } from '../../../store/rootSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectNodeInfo, selectShowToast, selectUIConfigUnit } from '../../../store/rootSelectors';
+import CurrencyBox from '../../shared/CurrencyBox/CurrencyBox';
 
 const ChannelDetails = (props) => {
   const dispatch = useDispatch();
@@ -128,10 +129,10 @@ const ChannelDetails = (props) => {
                   </ProgressBar>
                   <Row className='text-light d-flex align-items-end justify-content-between'>
                     <Col xs={6} className='fs-7 fw-bold d-flex justify-content-start text-primary'>
-                      {formatCurrency(props.selChannel.to_us_sat, Units.SATS, uiConfigUnit, false, 5, 'string')} {uiConfigUnit}
+                      <CurrencyBox value={props.selChannel.to_us_sat} shorten={false} rootClasses='d-inline-flex flex-row' currencyClasses='fs-7' unitClasses='ms-1 fs-7'></CurrencyBox>
                     </Col>
                     <Col xs={6} className='fs-7 fw-bold d-flex justify-content-end'>
-                      {formatCurrency(props.selChannel.to_them_sat, Units.SATS, uiConfigUnit, false, 5, 'string')} {uiConfigUnit}
+                      <CurrencyBox value={props.selChannel.to_them_sat} shorten={false} rootClasses='d-inline-flex flex-row' currencyClasses='fs-7' unitClasses='ms-1 fs-7'></CurrencyBox>
                     </Col>
                   </Row>
                 </Col>

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

@@ -3,18 +3,18 @@ import { motion } from 'framer-motion';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import { Spinner, Card, Row, Col, ListGroup, Alert, ProgressBar, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
-import { formatCurrency, titleCase } from '../../../utilities/data-formatters';
+import { titleCase } from '../../../utilities/data-formatters';
 import { ActionSVG } from '../../../svgs/Action';
-import { STAGERRED_SPRING_VARIANTS_3, Units } from '../../../utilities/constants';
+import { STAGERRED_SPRING_VARIANTS_3 } from '../../../utilities/constants';
 import { NoChannelLightSVG } from '../../../svgs/NoChannelLight';
 import { NoChannelDarkSVG } from '../../../svgs/NoChannelDark';
 import { useSelector } from 'react-redux';
-import { selectIsAuthenticated, selectIsDarkMode, selectListChannels, selectUIConfigUnit } from '../../../store/rootSelectors';
+import { selectIsAuthenticated, selectIsDarkMode, selectListChannels } from '../../../store/rootSelectors';
+import CurrencyBox from '../../shared/CurrencyBox/CurrencyBox';
 
 const Channels = (props) => {
   const isDarkMode = useSelector(selectIsDarkMode);
   const isAuthenticated = useSelector(selectIsAuthenticated);
-  const uiConfigUnit = useSelector(selectUIConfigUnit);
   const listChannels = useSelector(selectListChannels);
 
   return (
@@ -59,10 +59,10 @@ const Channels = (props) => {
                           </ProgressBar>
                           <Row className='text-light d-flex align-items-end justify-content-between'>
                             <Col xs={6} className='fs-7 fw-bold d-flex justify-content-start text-primary'>
-                              {formatCurrency(channel.to_us_sat, Units.SATS, uiConfigUnit, false, 5, 'string')} {uiConfigUnit}
+                              <CurrencyBox value={channel.to_us_sat} shorten={false} rootClasses='d-inline-flex flex-row' currencyClasses='fs-7' unitClasses='ms-1 fs-7'></CurrencyBox>
                             </Col>
                             <Col xs={6} className='fs-7 fw-bold d-flex justify-content-end'>
-                              {formatCurrency(channel.to_them_sat, Units.SATS, uiConfigUnit, false, 5, 'string')} {uiConfigUnit}
+                              <CurrencyBox value={channel.to_them_sat} shorten={false} rootClasses='d-inline-flex flex-row' currencyClasses='fs-7' unitClasses='ms-1 fs-7'></CurrencyBox>
                             </Col>
                           </Row>
                         </>