ui(FB): mining fee added

joinmarket-webui · Oct 3, 2024 · a293651 · a293651
1 parent 82175ea
commit a293651
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/src/components/PaymentConfirmModal.tsx b/src/components/PaymentConfirmModal.tsx
@@ -24,7 +24,7 @@ const feeRange: (txFee: TxFee, txFeeFactor: number) => [number, number] = (txFee
   return [minFeeSatsPerVByte, maxFeeSatsPerVByte]
 }
 
-const useMiningFeeText = ({ tx_fees, tx_fees_factor }: Pick<FeeValues, 'tx_fees' | 'tx_fees_factor'>) => {
+export const useMiningFeeText = ({ tx_fees, tx_fees_factor }: Pick<FeeValues, 'tx_fees' | 'tx_fees_factor'>) => {
   const { t } = useTranslation()
 
   return useMemo(() => {

diff --git a/src/components/fb2/CreateFidelityBond.tsx b/src/components/fb2/CreateFidelityBond.tsx
@@ -19,6 +19,7 @@ import { jarName } from '../jars/Jar'
 import { spendUtxosWithDirectSend, errorResolver } from './SpendFidelityBondModal'
 import Balance from '../Balance'
 import { useSettings } from '../../context/SettingsContext'
+import { useFeeConfigValues } from '../../hooks/Fees'
 
 export const LockInfoAlert = ({ lockDate, className }: { lockDate: Api.Lockdate; className?: string }) => {
   const { t, i18n } = useTranslation()
@@ -61,6 +62,8 @@ interface CreateFidelityBondProps {
 const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDone }: CreateFidelityBondProps) => {
   const { t } = useTranslation()
   const reloadCurrentWalletInfo = useReloadCurrentWalletInfo()
+  const feeConfigValues = useFeeConfigValues()[0]
+
   const [showCreateFidelityBondModal, setShowCreateFidelityBondModal] = useState(false)
   const [creatingFidelityBond, setCreatingFidelityBond] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
@@ -528,6 +531,7 @@ const CreateFidelityBond2 = ({ otherFidelityBondExists, wallet, walletInfo, onDo
                       jar={selectedJar!}
                       selectedUtxos={selectedUtxos}
                       timelockedAddress={timelockedAddress!}
+                      feeConfigValues={feeConfigValues}
                     />
                     <LockInfoAlert className="text-start mt-4" lockDate={lockDate!} />
                   </div>

diff --git a/src/components/fb2/FidelityBondSteps.tsx b/src/components/fb2/FidelityBondSteps.tsx
@@ -13,6 +13,8 @@ import * as fb from './utils'
 import styles from './FidelityBondSteps.module.css'
 import { UtxoListDisplay } from '../Send/ShowUtxos'
 import Divider from '../Divider'
+import { FeeValues } from '../../hooks/Fees'
+import { useMiningFeeText } from '../PaymentConfirmModal'
 
 type SelectDateProps = {
   description: string
@@ -41,6 +43,7 @@ interface ConfirmationProps {
   jar: JarIndex
   selectedUtxos: Utxo[]
   timelockedAddress: Api.BitcoinAddress
+  feeConfigValues?: FeeValues
 }
 
 const SelectDate = ({ description, yearsRange, lockdate, disabled, onChange }: SelectDateProps) => {
@@ -150,29 +153,28 @@ const SelectUtxos = ({ selectedUtxos, utxos, onUtxoSelected, onUtxoDeselected }:
   return (
     <>
       <div className="d-flex flex-column gap-4">
-        <UtxoListDisplay utxos={upperUtxos} onToggle={handleToggle} settings={settings} showBackgroundColor={true} />
+        <UtxoListDisplay utxos={upperUtxos} onToggle={handleToggle} settings={settings} />
         {upperUtxos.length > 0 && lowerUtxos.length > 0 && (
           <Divider
             toggled={showFrozenUtxos}
             onToggle={() => setShowFrozenUtxos((current) => !current)}
             className={`mt-4 ${showFrozenUtxos && 'mb-4'}`}
           />
         )}
-        {showFrozenUtxos && (
-          <UtxoListDisplay utxos={lowerUtxos} onToggle={handleToggle} settings={settings} showBackgroundColor={true} />
-        )}
+        {showFrozenUtxos && <UtxoListDisplay utxos={lowerUtxos} onToggle={handleToggle} settings={settings} />}
       </div>
     </>
   )
 }
 
-const Confirmation = ({ lockDate, jar, selectedUtxos, timelockedAddress }: ConfirmationProps) => {
+const Confirmation = ({ lockDate, jar, selectedUtxos, timelockedAddress, feeConfigValues }: ConfirmationProps) => {
   useEffect(() => {
     console.log('lockDate', lockDate)
     console.log('jar', jar)
     console.log('selected', selectedUtxos)
   }, [jar, lockDate, selectedUtxos])
 
+  const miningFeeText = useMiningFeeText({ ...feeConfigValues })
   const settings = useSettings()
   const { t, i18n } = useTranslation()
 
@@ -229,6 +231,14 @@ const Confirmation = ({ lockDate, jar, selectedUtxos, timelockedAddress }: Confi
               </div>
             </div>
           ))}
+          {miningFeeText && (
+            <div>
+              <div className={styles.confirmationStepLabel}>
+                <strong>{t('send.confirm_send_modal.label_miner_fee')}</strong>
+              </div>
+              <div className={styles.confirmationStepContent}>{miningFeeText}</div>
+            </div>
+          )}
         </div>
       </div>
     </>