fix(gui): Formatting of new approval dialog

This commit is contained in:
Binarybaron 2025-06-25 19:07:26 +02:00
parent 1587f63232
commit a48652328c
2 changed files with 154 additions and 110 deletions

View file

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

View file

@ -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>
<BitcoinMainBox btc_lock_amount={btc_lock_amount} />
<Box sx={{ height: "100%" }}>
<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>
);
};