mirror of
https://github.com/comit-network/xmr-btc-swap.git
synced 2025-08-24 14:15:55 -04:00
fix(gui): Formatting of new approval dialog
This commit is contained in:
parent
1587f63232
commit
a48652328c
2 changed files with 154 additions and 110 deletions
|
@ -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");
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue