chore: integrate choose fee dialog actions into footer

src/app/features/dialogs/increase-fee-dialog/components/increase-fee-actions.tsx

@@ -1,5 +1,4 @@
 import { useFormikContext } from 'formik';
-import { Flex } from 'leather-styles/jsx';
 
 import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading';
 import { useWalletType } from '@app/common/use-wallet-type';
@@ -19,8 +18,8 @@ export function IncreaseFeeActions(props: IncreaseFeeActionsProps) {
   const actionText = whenWallet({ ledger: 'Confirm on Ledger', software: 'Submit' });
 
   return (
-    <Flex gap="space.02">
-      <Button onClick={onCancel} variant="outline" flex="1">
+    <>
+      <Button onClick={onCancel} variant="outline" flexGrow={1}>
         Cancel
       </Button>
       <Button
@@ -30,9 +29,10 @@ export function IncreaseFeeActions(props: IncreaseFeeActionsProps) {
         aria-busy={isLoading}
         borderRadius="sm"
         aria-disabled={isDisabled}
+        flexGrow={1}
       >
         {actionText}
       </Button>
-    </Flex>
+    </>
   );
 }

src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx

@@ -1,29 +1,110 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { Suspense } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+
+import { Formik } from 'formik';
+import { Flex, Stack } from 'leather-styles/jsx';
 
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 import { RouteUrls } from '@shared/route-urls';
 
+import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balance';
 import { useLocationStateWithCache } from '@app/common/hooks/use-location-state';
+import { formatMoney } from '@app/common/money/format-money';
+import { btcToSat } from '@app/common/money/unit-conversion';
+import { getBitcoinTxValue } from '@app/common/transactions/bitcoin/utils';
+import { BitcoinCustomFeeInput } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee-input';
+import { BitcoinTransactionItem } from '@app/components/bitcoin-transaction-item/bitcoin-transaction-item';
+import { LoadingSpinner } from '@app/components/loading-spinner';
+import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
+import { Dialog } from '@app/ui/components/containers/dialog/dialog';
+import { Footer } from '@app/ui/components/containers/footers/footer';
+import { Header } from '@app/ui/components/containers/headers/header';
+import { Spinner } from '@app/ui/components/spinner';
+import { Caption } from '@app/ui/components/typography/caption';
 
-import { IncreaseBtcFeeForm } from './components/increase-btc-fee-form';
-import { IncreaseFeeDialog } from './increase-fee-dialog';
+import { IncreaseFeeActions } from './components/increase-fee-actions';
+import { useBtcIncreaseFee } from './hooks/use-btc-increase-fee';
 
 export function IncreaseBtcFeeDialog() {
   const tx = useLocationStateWithCache('btcTx') as BitcoinTx;
   const navigate = useNavigate();
   const location = useLocation();
 
+  const btcTx = tx;
+  const nativeSegwitSigner = useCurrentAccountNativeSegwitIndexZeroSigner();
+  const currentBitcoinAddress = nativeSegwitSigner.address;
+  const { btcAvailableAssetBalance } = useBtcAssetBalance(currentBitcoinAddress);
+  const { isBroadcasting, sizeInfo, onSubmit, validationSchema, recipient } =
+    useBtcIncreaseFee(btcTx);
+
+  const balance = formatMoney(btcAvailableAssetBalance.balance);
+
   const onClose = () => {
     navigate(RouteUrls.Home);
   };
 
   if (!tx) return null;
 
+  const initialFeeRate = `${(tx.fee / sizeInfo.txVBytes).toFixed(0)}`;
+
   return (
-    <IncreaseFeeDialog
-      feeForm={<IncreaseBtcFeeForm btcTx={tx} />}
-      onClose={onClose}
-      isShowing={location.pathname === RouteUrls.IncreaseBtcFee}
-    />
+    <>
+      <Formik
+        initialValues={{ feeRate: initialFeeRate }}
+        onSubmit={onSubmit}
+        validateOnChange={false}
+        validateOnBlur={false}
+        validateOnMount={false}
+        validationSchema={validationSchema}
+      >
+        <>
+          <Dialog
+            isShowing={location.pathname === RouteUrls.IncreaseBtcFee}
+            onClose={onClose}
+            header={<Header variant="dialog" title="Increase fee" />}
+            footer={
+              <Footer flexDirection="row">
+                <IncreaseFeeActions isDisabled={false} onCancel={() => navigate(RouteUrls.Home)} />
+              </Footer>
+            }
+          >
+            <Stack gap="space.05" px="space.05" pb="space.05">
+              <Suspense
+                fallback={
+                  <Flex alignItems="center" justifyContent="center" p="space.06">
+                    <Spinner />
+                  </Flex>
+                }
+              >
+                <Caption>
+                  If your transaction is pending for a long time, its fee might not be high enough
+                  to be included in a block. Update the fee for a higher value and try again.
+                </Caption>
+                <Stack gap="space.06">
+                  {btcTx && <BitcoinTransactionItem transaction={btcTx} />}
+                  {isBroadcasting && <LoadingSpinner />}
+                  <Stack gap="space.04">
+                    <Stack gap="space.01">
+                      <BitcoinCustomFeeInput
+                        amount={Math.abs(
+                          btcToSat(getBitcoinTxValue(currentBitcoinAddress, btcTx)).toNumber()
+                        )}
+                        isSendingMax={false}
+                        recipient={recipient}
+                        hasInsufficientBalanceError={false}
+                        customFeeInitialValue={initialFeeRate}
+                      />
+                    </Stack>
+
+                    {btcAvailableAssetBalance && <Caption>Balance: {balance}</Caption>}
+                  </Stack>
+                </Stack>
+              </Suspense>
+            </Stack>
+          </Dialog>
+          <Outlet />
+        </>
+      </Formik>
+    </>
   );
 }