From 87158a43c5b9ea30853954b705ea09c9d6f56737 Mon Sep 17 00:00:00 2001
From: ShahanaFarooqui <shahana.farooqui@gmail.com>
Date: Thu, 5 Mar 2026 14:20:25 -0800
Subject: [PATCH 1/2] Change Custom Fee Rate Unit

---
 .../src/components/cln/ChannelOpen/ChannelOpen.test.tsx        | 2 +-
 apps/frontend/src/components/cln/ChannelOpen/ChannelOpen.tsx   | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/cln/ChannelOpen/ChannelOpen.test.tsx b/apps/frontend/src/components/cln/ChannelOpen/ChannelOpen.test.tsx
index 50a31ce0..090ff31d 100644
--- a/apps/frontend/src/components/cln/ChannelOpen/ChannelOpen.test.tsx
+++ b/apps/frontend/src/components/cln/ChannelOpen/ChannelOpen.test.tsx
@@ -171,7 +171,7 @@ describe('ChannelOpen component', () => {
     await waitFor(() => {
       expect(customFeeRateCheckbox).toBeChecked();
       expect(screen.getByTestId('fee-rate-input')).toBeInTheDocument();
-      expect(screen.getByTestId('fee-rate-unit')).toHaveTextContent('perkw');
+      expect(screen.getByTestId('fee-rate-unit')).toHaveTextContent('Sat/vB');
     });
   });
 
diff --git a/apps/frontend/src/components/cln/ChannelOpen/ChannelOpen.tsx b/apps/frontend/src/components/cln/ChannelOpen/ChannelOpen.tsx
index c8ff621c..fd7a8f20 100755
--- a/apps/frontend/src/components/cln/ChannelOpen/ChannelOpen.tsx
+++ b/apps/frontend/src/components/cln/ChannelOpen/ChannelOpen.tsx
@@ -236,7 +236,6 @@ const ChannelOpen = (props) => {
                   data-testid='show-custom-fee-rate'
                 />
               </Col>
-
               <AnimatePresence mode="wait">
                 {showCustomFeeRate ? (
                   <motion.div
@@ -267,7 +266,7 @@ const ChannelOpen = (props) => {
                           data-testid='fee-rate-input'
                         />
                         <InputGroup.Text data-testid='fee-rate-unit' id='Fee Rate Unit' className='form-control-addon form-control-addon-right text-light'>
-                          perkw
+                          Sat/vB
                         </InputGroup.Text>
                       </InputGroup>
                       {(feeRateHasError) ?

From 95aa11357f816b3bf20c3dcb0c682d12f7727996 Mon Sep 17 00:00:00 2001
From: ShahanaFarooqui <shahana.farooqui@gmail.com>
Date: Thu, 5 Mar 2026 14:20:53 -0800
Subject: [PATCH 2/2] Add Custom Fee Rate for Withdrawal

Closes #36
---
 .../cln/BTCWithdraw/BTCWithdraw.test.tsx      |  2 +-
 .../cln/BTCWithdraw/BTCWithdraw.tsx           | 29 ++++++++++---------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/apps/frontend/src/components/cln/BTCWithdraw/BTCWithdraw.test.tsx b/apps/frontend/src/components/cln/BTCWithdraw/BTCWithdraw.test.tsx
index f1edec04..cb20d5f4 100644
--- a/apps/frontend/src/components/cln/BTCWithdraw/BTCWithdraw.test.tsx
+++ b/apps/frontend/src/components/cln/BTCWithdraw/BTCWithdraw.test.tsx
@@ -66,7 +66,7 @@ describe('BTCWithdraw component', () => {
     await waitFor(() => {
       expect(checkbox).toBeChecked();
       expect(screen.getByLabelText('feeRate')).toBeInTheDocument();
-      expect(screen.getByTestId('fee-rate-unit')).toHaveTextContent('perkw');
+      expect(screen.getByTestId('fee-rate-unit')).toHaveTextContent('Sat/vB');
     });
   });
 
diff --git a/apps/frontend/src/components/cln/BTCWithdraw/BTCWithdraw.tsx b/apps/frontend/src/components/cln/BTCWithdraw/BTCWithdraw.tsx
index 03a2bf2e..7ed4d8d2 100755
--- a/apps/frontend/src/components/cln/BTCWithdraw/BTCWithdraw.tsx
+++ b/apps/frontend/src/components/cln/BTCWithdraw/BTCWithdraw.tsx
@@ -229,13 +229,14 @@ const BTCWithdraw = (props) => {
               <AnimatePresence mode="wait">
                 {showCustomFeeRate ? (
                   <motion.div
-                    key="custom"
-                    initial={{ opacity: 0, scale: 0.95 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0.9 }}
-                    transition={{ type: "spring", stiffness: 500, damping: 30 }}
+                    key="custom-fee-rate"
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: 10 }}
+                    transition={{ duration: 0.2 }}
+                    style={{ width: '100%' }}
                   >
-                    <Col xs={12} style={{ display: showCustomFeeRate ? 'block' : 'none' }}>
+                    <Col xs={12}>
                       <Form.Label className='text-dark'>Fee Rate*</Form.Label>
                       <InputGroup className={(feeRateHasError ? 'invalid ' : '')}>
                         <InputGroup.Text className='form-control-addon form-control-addon-left'>
@@ -252,9 +253,10 @@ const BTCWithdraw = (props) => {
                           value={feeRateValue}
                           onChange={feeRateChangeHandler}
                           onBlur={feeRateBlurHandler}
+                          data-testid='fee-rate-input'
                         />
                         <InputGroup.Text data-testid='fee-rate-unit' id='Fee Rate Unit' className='form-control-addon form-control-addon-right text-light'>
-                          perkw
+                          Sat/vB
                         </InputGroup.Text>
                       </InputGroup>
                       {(feeRateHasError) ?
@@ -264,13 +266,14 @@ const BTCWithdraw = (props) => {
                   </motion.div>
                 ) : (
                   <motion.div
-                    key="range"
-                    initial={{ opacity: 0, scale: 0.95 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0.9 }}
-                    transition={{ type: "spring", stiffness: 500, damping: 30 }}
+                    key="fee-rate-range"
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: 10 }}
+                    transition={{ duration: 0.2 }}
+                    style={{ width: '100%' }}
                   >
-                    <Col xs={12} style={{ display: showCustomFeeRate ? 'none' : 'block' }}>
+                    <Col xs={12}>
                       <FeerateRange tabIndex={4} selFeeRate={selFeeRate} selFeeRateChangeHandler={selFeeRateChangeHandler} />
                     </Col>
                   </motion.div>