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 .await
.unwrap(); .unwrap();
monero.start_miner().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"); tracing::info!("Waiting for Alice to catch up");

View file

@ -64,7 +64,16 @@ export default function SwapSetupInflightPage({
request.content.details.content; request.content.details.content;
return ( return (
<> <Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "space-between",
justifyContent: "space-between",
height: "100%",
flex: 1,
}}
>
{/* Grid layout for perfect alignment */} {/* Grid layout for perfect alignment */}
<Box <Box
sx={{ sx={{
@ -76,8 +85,11 @@ export default function SwapSetupInflightPage({
}} }}
> >
{/* Row 1: Bitcoin box */} {/* 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> </Box>
{/* Row 1: Animated arrow */} {/* Row 1: Animated arrow */}
@ -98,20 +110,6 @@ export default function SwapSetupInflightPage({
xmr_receive_amount={xmr_receive_amount} xmr_receive_amount={xmr_receive_amount}
/> />
</Box> </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>
<Box <Box
@ -145,7 +143,7 @@ export default function SwapSetupInflightPage({
{`Confirm (${timeLeft}s)`} {`Confirm (${timeLeft}s)`}
</PromiseInvokeButton> </PromiseInvokeButton>
</Box> </Box>
</> </Box>
); );
} }
@ -162,42 +160,70 @@ interface BitcoinSendSectionProps {
btc_network_fee: number; btc_network_fee: number;
} }
const BitcoinMainBox = ({ btc_lock_amount }: { btc_lock_amount: number }) => ( const BitcoinMainBox = ({
<Box btc_lock_amount,
sx={{ btc_network_fee,
display: "flex", }: {
justifyContent: "space-between", btc_lock_amount: number;
alignItems: "center", btc_network_fee: number;
padding: 1.5, }) => (
border: 1, <Box sx={{ position: "relative", height: "100%" }}>
gap: "0.5rem 1rem", <Box
borderColor: "warning.main", sx={{
borderRadius: 1, display: "flex",
backgroundColor: (theme) => theme.palette.warning.light + "10", justifyContent: "space-between",
background: (theme) => alignItems: "center",
`linear-gradient(135deg, ${theme.palette.warning.light}20, ${theme.palette.warning.light}05)`, padding: 1.5,
flex: "1 1 0", border: 1,
height: "100%", // Match the height of the Monero box gap: "0.5rem 1rem",
}} borderColor: "warning.main",
> borderRadius: 1,
<Typography backgroundColor: (theme) => theme.palette.warning.light + "10",
variant="body1" background: (theme) =>
sx={(theme) => ({ `linear-gradient(135deg, ${theme.palette.warning.light}20, ${theme.palette.warning.light}05)`,
color: theme.palette.text.primary, height: "100%", // Match the height of the Monero box
})} }}
> >
You send <Typography
</Typography> variant="body1"
<Typography sx={(theme) => ({
variant="body1" color: theme.palette.text.primary,
sx={(theme) => ({ })}
fontWeight: "bold", >
color: theme.palette.warning.dark, You send
textShadow: "0 1px 2px rgba(0,0,0,0.1)", </Typography>
})} <Typography
variant="h5"
sx={(theme) => ({
fontWeight: "bold",
color: theme.palette.warning.dark,
textShadow: "0 1px 2px rgba(0,0,0,0.1)",
})}
>
<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,
}}
> >
<SatsAmount amount={btc_lock_amount} /> Network fee: <SatsAmount amount={btc_network_fee} />
</Typography> </Box>
</Box> </Box>
); );
@ -357,69 +383,88 @@ const MoneroMainBox = ({
); );
return ( return (
<Box <Box sx={{ position: "relative" }}>
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: 1.5,
border: 1,
gap: "0.5rem 1rem",
borderColor: "success.main",
borderRadius: 1,
backgroundColor: (theme) => theme.palette.success.light + "10",
background: (theme) =>
`linear-gradient(135deg, ${theme.palette.success.light}20, ${theme.palette.success.light}05)`,
flex: "1 1 0",
}}
>
<Box sx={{ display: "flex", flexDirection: "column", gap: 0.25 }}>
<Typography
variant="body1"
sx={(theme) => ({
color: theme.palette.text.primary,
fontWeight: 700,
letterSpacing: 0.5,
})}
>
{highestPercentagePool.label}
</Typography>
<Typography
variant="caption"
sx={{
fontFamily: "monospace",
fontSize: "0.65rem",
color: (theme) => theme.palette.text.secondary,
}}
>
<TruncatedText truncateMiddle limit={15}>
{highestPercentagePool.address}
</TruncatedText>
</Typography>
</Box>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column", justifyContent: "space-between",
alignItems: "flex-end", alignItems: "center",
justifyContent: "center", padding: 1.5,
border: 1,
gap: "0.5rem 1rem",
borderColor: "success.main",
borderRadius: 1,
backgroundColor: (theme) => theme.palette.success.light + "10",
background: (theme) =>
`linear-gradient(135deg, ${theme.palette.success.light}20, ${theme.palette.success.light}05)`,
flex: "1 1 0",
}} }}
> >
<Typography <Box sx={{ display: "flex", flexDirection: "column", gap: 0.25 }}>
variant="h5" <Typography
sx={(theme) => ({ variant="body1"
fontWeight: "bold", sx={(theme) => ({
color: theme.palette.success.dark, color: theme.palette.text.primary,
textShadow: "0 1px 2px rgba(0,0,0,0.1)", fontWeight: 700,
})} letterSpacing: 0.5,
})}
>
{highestPercentagePool.label}
</Typography>
<Typography
variant="caption"
sx={{
fontFamily: "monospace",
fontSize: "0.65rem",
color: (theme) => theme.palette.text.secondary,
}}
>
<TruncatedText truncateMiddle limit={15}>
{highestPercentagePool.address}
</TruncatedText>
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "flex-end",
justifyContent: "center",
}}
> >
<PiconeroAmount <Typography
amount={ variant="h5"
(highestPercentagePool.percentage * Number(xmr_receive_amount)) / sx={(theme) => ({
100 fontWeight: "bold",
} color: theme.palette.success.dark,
/> textShadow: "0 1px 2px rgba(0,0,0,0.1)",
</Typography> })}
>
<PiconeroAmount
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>
</Box> </Box>
); );