From da70de5f64f578cc6a66ab7d597c6949752920ff Mon Sep 17 00:00:00 2001
From: ShahanaFarooqui <shahana.farooqui@gmail.com>
Date: Thu, 18 Dec 2025 13:07:15 -0800
Subject: [PATCH] Add Fiat tooltip for channels and channel details card

Fixes #138
---
 .../components/cln/ChannelDetails/ChannelDetails.tsx |  5 +++--
 .../src/components/cln/Channels/Channels.tsx         | 12 ++++++------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/components/cln/ChannelDetails/ChannelDetails.tsx b/apps/frontend/src/components/cln/ChannelDetails/ChannelDetails.tsx
index 9802f6c0..ec41265d 100755
--- a/apps/frontend/src/components/cln/ChannelDetails/ChannelDetails.tsx
+++ b/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>
diff --git a/apps/frontend/src/components/cln/Channels/Channels.tsx b/apps/frontend/src/components/cln/Channels/Channels.tsx
index 9ed0b437..e69df8b3 100755
--- a/apps/frontend/src/components/cln/Channels/Channels.tsx
+++ b/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>
                         </>