fix(gui): Formatting of new approval dialog

monero-harness/tests/wallet.rs

@@ -35,7 +35,6 @@ async fn fund_transfer_and_check_tx_key() {
         .await
         .unwrap();
     monero.start_miner().await.unwrap();
-    let miner_address = monero.wallet("miner").unwrap().address().await.unwrap();
 
     tracing::info!("Waiting for Alice to catch up");
 

src-gui/src/renderer/components/modal/swap/pages/in_progress/SwapSetupInflightPage.tsx

@@ -64,7 +64,16 @@ export default function SwapSetupInflightPage({
     request.content.details.content;
 
   return (
-    <>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "space-between",
+        justifyContent: "space-between",
+        height: "100%",
+        flex: 1,
+      }}
+    >
       {/* Grid layout for perfect alignment */}
       <Box
         sx={{
@@ -76,8 +85,11 @@ export default function SwapSetupInflightPage({
         }}
       >
         {/* Row 1: Bitcoin box */}
-        <Box>
+        <Box sx={{ height: "100%" }}>
-          <BitcoinMainBox btc_lock_amount={btc_lock_amount} />
+          <BitcoinMainBox
+            btc_lock_amount={btc_lock_amount}
+            btc_network_fee={btc_network_fee}
+          />
         </Box>
 
         {/* Row 1: Animated arrow */}
@@ -98,20 +110,6 @@ export default function SwapSetupInflightPage({
             xmr_receive_amount={xmr_receive_amount}
           />
         </Box>
-
-        {/* Row 2: Empty space */}
-        <Box />
-
-        {/* Row 2: Empty space */}
-        <Box />
-
-        {/* Row 2: Secondary content */}
-        <Box>
-          <MoneroSecondaryContent
-            monero_receive_pool={monero_receive_pool}
-            xmr_receive_amount={xmr_receive_amount}
-          />
-        </Box>
       </Box>
 
       <Box
@@ -145,7 +143,7 @@ export default function SwapSetupInflightPage({
           {`Confirm (${timeLeft}s)`}
         </PromiseInvokeButton>
       </Box>
-    </>
+    </Box>
   );
 }
 
@@ -162,7 +160,14 @@ interface BitcoinSendSectionProps {
   btc_network_fee: number;
 }
 
-const BitcoinMainBox = ({ btc_lock_amount }: { btc_lock_amount: number }) => (
+const BitcoinMainBox = ({
+  btc_lock_amount,
+  btc_network_fee,
+}: {
+  btc_lock_amount: number;
+  btc_network_fee: number;
+}) => (
+  <Box sx={{ position: "relative", height: "100%" }}>
     <Box
       sx={{
         display: "flex",
@@ -176,7 +181,6 @@ const BitcoinMainBox = ({ btc_lock_amount }: { btc_lock_amount: number }) => (
         backgroundColor: (theme) => theme.palette.warning.light + "10",
         background: (theme) =>
           `linear-gradient(135deg, ${theme.palette.warning.light}20, ${theme.palette.warning.light}05)`,
-      flex: "1 1 0",
         height: "100%", // Match the height of the Monero box
       }}
     >
@@ -189,7 +193,7 @@ const BitcoinMainBox = ({ btc_lock_amount }: { btc_lock_amount: number }) => (
         You send
       </Typography>
       <Typography
-      variant="body1"
+        variant="h5"
         sx={(theme) => ({
           fontWeight: "bold",
           color: theme.palette.warning.dark,
@@ -199,6 +203,28 @@ const BitcoinMainBox = ({ btc_lock_amount }: { btc_lock_amount: number }) => (
         <SatsAmount amount={btc_lock_amount} />
       </Typography>
     </Box>
+
+    {/* Network fee box attached to the bottom */}
+    <Box
+      sx={{
+        position: "absolute",
+        bottom: "calc(-50%)",
+        left: "50%",
+        transform: "translateX(-50%)",
+        padding: "0.25rem 0.75rem",
+        backgroundColor: (theme) => theme.palette.warning.main,
+        color: (theme) => theme.palette.warning.contrastText,
+        borderRadius: "4px",
+        fontSize: "0.75rem",
+        fontWeight: 600,
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        whiteSpace: "nowrap",
+        zIndex: 1,
+      }}
+    >
+      Network fee: <SatsAmount amount={btc_network_fee} />
+    </Box>
+  </Box>
 );
 
 interface PoolBreakdownProps {
@@ -357,6 +383,7 @@ const MoneroMainBox = ({
   );
 
   return (
+    <Box sx={{ position: "relative" }}>
       <Box
         sx={{
           display: "flex",
@@ -415,13 +442,31 @@ const MoneroMainBox = ({
           >
             <PiconeroAmount
               amount={
-              (highestPercentagePool.percentage * Number(xmr_receive_amount)) /
+                (highestPercentagePool.percentage *
+                  Number(xmr_receive_amount)) /
                 100
               }
             />
           </Typography>
         </Box>
       </Box>
+
+      {/* Secondary Monero content attached to the bottom */}
+      <Box
+        sx={{
+          position: "absolute",
+          bottom: "calc(-100%)",
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 1,
+        }}
+      >
+        <MoneroSecondaryContent
+          monero_receive_pool={monero_receive_pool}
+          xmr_receive_amount={xmr_receive_amount}
+        />
+      </Box>
+    </Box>
   );
 };