From 643db8570b5d4849b4ff67897ff57183306af14e Mon Sep 17 00:00:00 2001
From: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>
Date: Thu, 14 Dec 2023 11:38:16 +0100
Subject: [PATCH] chore(send): align unit in collaborators fee breakdown (#708)

* fix(send): fix destination jar selector icon position

* ui(send): display collaborator fees in user preferred unit
---
 src/components/Send/DestinationInputField.tsx |  7 +--
 src/components/Send/FeeBreakdown.tsx          |  4 +-
 src/components/Send/SendForm.tsx              | 43 +++++++++++--------
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/Send/DestinationInputField.tsx b/src/components/Send/DestinationInputField.tsx
index 72537906..8141840d 100644
--- a/src/components/Send/DestinationInputField.tsx
+++ b/src/components/Send/DestinationInputField.tsx
@@ -146,12 +146,7 @@ export const DestinationInputField = ({
                     disabled={disabled || !walletInfo}
                   >
                     <div className="d-flex justify-content-center align-items-center">
-                      <Sprite
-                        symbol="jar-closed-empty"
-                        width="28px"
-                        height="28px"
-                        style={{ paddingBottom: '0.2rem' }}
-                      />
+                      <Sprite symbol="jar-closed-empty" width="28px" height="28px" style={{ marginTop: '-3px' }} />
                     </div>
                   </rb.Button>
                   <rb.Form.Control.Feedback type="invalid">
diff --git a/src/components/Send/FeeBreakdown.tsx b/src/components/Send/FeeBreakdown.tsx
index 0b6cb46c..f4167a27 100644
--- a/src/components/Send/FeeBreakdown.tsx
+++ b/src/components/Send/FeeBreakdown.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import Balance from '../Balance'
 import * as rb from 'react-bootstrap'
 import { useSettings } from '../../context/SettingsContext'
-import { SATS, factorToPercentage, formatSats } from '../../utils'
+import { factorToPercentage, formatSats } from '../../utils'
 import { FeeValues } from '../../hooks/Fees'
 import { AmountSats } from '../../libs/JmWalletApi'
 
@@ -47,7 +47,7 @@ const FeeCard = ({ amount, feeConfigValue, highlight, subtitle, onClick }: FeeCa
               ) : (
                 <>
                   &le;
-                  <Balance convertToUnit={SATS} valueString={amount.toString()} showBalance={true} />
+                  <Balance convertToUnit={settings.unit} valueString={amount.toString()} showBalance={true} />
                 </>
               )}
             </>
diff --git a/src/components/Send/SendForm.tsx b/src/components/Send/SendForm.tsx
index 0941999f..33ed560a 100644
--- a/src/components/Send/SendForm.tsx
+++ b/src/components/Send/SendForm.tsx
@@ -13,10 +13,10 @@ import CollaboratorsSelector from './CollaboratorsSelector'
 import { SweepBreakdown } from './SweepBreakdown'
 import FeeBreakdown from './FeeBreakdown'
 import Accordion from '../Accordion'
+import Balance from '../Balance'
 import FeeConfigModal, { FeeConfigSectionKey } from '../settings/FeeConfigModal'
 import { useEstimatedMaxCollaboratorFee, FeeValues } from '../../hooks/Fees'
 import { buildCoinjoinRequirementSummary } from '../../hooks/CoinjoinRequirements'
-import { formatSats } from '../../utils'
 import {
   MAX_NUM_COLLABORATORS,
   isValidAddress,
@@ -26,6 +26,7 @@ import {
 } from './helpers'
 import { AccountBalanceSummary } from '../../context/BalanceSummary'
 import { WalletInfo } from '../../context/WalletContext'
+import { useSettings } from '../../context/SettingsContext'
 import styles from './SendForm.module.css'
 
 type CollaborativeTransactionOptionsProps = {
@@ -51,6 +52,7 @@ function CollaborativeTransactionOptions({
   feeConfigValues,
   reloadFeeConfigValues,
 }: CollaborativeTransactionOptionsProps) {
+  const settings = useSettings()
   const { t } = useTranslation()
 
   const [activeFeeConfigModalSection, setActiveFeeConfigModalSection] = useState<FeeConfigSectionKey>()
@@ -78,10 +80,15 @@ function CollaborativeTransactionOptions({
       <rb.Form.Group className="mt-4">
         <rb.Form.Label className="mb-0">
           {t('send.fee_breakdown.title', {
-            maxCollaboratorFee: estimatedMaxCollaboratorFee
-              ? `≤${formatSats(estimatedMaxCollaboratorFee)} sats`
-              : '...',
+            maxCollaboratorFee: estimatedMaxCollaboratorFee !== null ? '≤' : '...',
           })}
+          {estimatedMaxCollaboratorFee !== null && (
+            <Balance
+              valueString={String(estimatedMaxCollaboratorFee)}
+              convertToUnit={settings.unit}
+              showBalance={true}
+            />
+          )}
         </rb.Form.Label>
         <rb.Form.Text className="d-block text-secondary mb-2">
           <Trans
@@ -118,21 +125,19 @@ function CollaborativeTransactionOptions({
           />
         </rb.Form.Text>
 
-        {sourceJarBalance && (
-          <FeeBreakdown
-            feeConfigValues={feeConfigValues}
-            numCollaborators={selectedNumCollaborators ?? null}
-            amount={
-              selectedAmount?.isSweep
-                ? sourceJarBalance.calculatedAvailableBalanceInSats
-                : selectedAmount?.value ?? null
-            }
-            onClick={() => {
-              setActiveFeeConfigModalSection('cj_fee')
-              setShowFeeConfigModal(true)
-            }}
-          />
-        )}
+        <FeeBreakdown
+          feeConfigValues={feeConfigValues}
+          numCollaborators={selectedNumCollaborators ?? null}
+          amount={
+            selectedAmount?.isSweep
+              ? sourceJarBalance?.calculatedAvailableBalanceInSats ?? null
+              : selectedAmount?.value ?? null
+          }
+          onClick={() => {
+            setActiveFeeConfigModalSection('cj_fee')
+            setShowFeeConfigModal(true)
+          }}
+        />
 
         {showFeeConfigModal && (
           <FeeConfigModal