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

@@ -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">

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} />
                 </>
               )}
             </>

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