75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
import { useState } from "react";
|
|
import { startBuyFlow } from "../api/client";
|
|
import {
|
|
Button,
|
|
FormControlLabel,
|
|
Grid,
|
|
Paper,
|
|
Radio,
|
|
RadioGroup,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import { useNavigate } from "react-router";
|
|
|
|
export const Buy = () => {
|
|
const [quantity, setQuantity] = useState(0);
|
|
const navigate = useNavigate();
|
|
const handleBuyFlow = () =>
|
|
startBuyFlow(quantity).then(
|
|
(response) => (window.location.href = response.data.url),
|
|
);
|
|
|
|
return (
|
|
<Grid container direction="column" spacing={2} alignItems="center">
|
|
<Typography variant="h3">Buy tokens</Typography>
|
|
|
|
<Paper
|
|
variant="outlined"
|
|
sx={{
|
|
p: 5,
|
|
bgcolor: "aliceblue",
|
|
borderRadius: 4,
|
|
}}
|
|
>
|
|
<RadioGroup
|
|
value={quantity.toString()}
|
|
onChange={(e) => setQuantity(parseInt(e.target.value))}
|
|
>
|
|
<FormControlLabel
|
|
value="1"
|
|
control={<Radio />}
|
|
label="1 token - 4€"
|
|
/>
|
|
<FormControlLabel
|
|
value="5"
|
|
control={<Radio />}
|
|
label="5 tokens - 20€"
|
|
/>
|
|
<FormControlLabel
|
|
value="10"
|
|
control={<Radio />}
|
|
label="10 tokens - 40"
|
|
/>
|
|
</RadioGroup>
|
|
</Paper>
|
|
|
|
<Button
|
|
onClick={handleBuyFlow}
|
|
variant="contained"
|
|
color="primary"
|
|
sx={{ width: "100%" }}
|
|
>
|
|
Buy
|
|
</Button>
|
|
<Button
|
|
onClick={() => navigate("/signup")}
|
|
variant="contained"
|
|
color="secondary"
|
|
sx={{ width: "100%" }}
|
|
>
|
|
Back
|
|
</Button>
|
|
</Grid>
|
|
);
|
|
};
|