import { useState } from "react";
import {
makeStyles,
Popover,
IconButton,
Typography,
Button,
TextField,
InputAdornment,
Switch,
FormControlLabel,
FormGroup,
} from "@material-ui/core";
import { SettingsOutlined as Settings } from "@material-ui/icons";
import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
import { useSwapContext, useSwapFair } from "../context/Swap";
import { useDexContext } from "../context/Dex";
import OpenOrdersDialog from "./OpenOrdersDialog";
const useStyles = makeStyles((theme) => ({
tab: {
width: "50%",
},
table: {},
settingsButton: {
padding: 0,
color: theme.palette.primary.main,
},
closeAccountSwitchLabel: {
color: theme.palette.text.secondary,
},
fairAutoSelected: {
backgroundColor: theme.palette.primary.main,
padding: "3px 5px",
borderRadius: "10px",
color: theme.palette.primary.contrastText,
fontWeight: 700,
},
fairAuto: {
backgroundColor:
theme.palette.type === "dark"
? theme.palette.secondary.light
: theme.palette.secondary.main,
padding: "3px 5px",
borderRadius: "10px",
boxShadow: "none",
},
}));
export function SettingsButton() {
const styles = useStyles();
return (
{
//@ts-ignore
(popupState) => (
)
}
);
}
function SettingsDetails() {
const styles = useStyles();
const { slippage, setSlippage, fairOverride, setFairOverride } =
useSwapContext();
const [showSettingsDialog, setShowSettingsDialog] = useState(false);
const fair = useSwapFair();
const { swapClient } = useDexContext();
const setSlippageHandler = (value?: number) => {
setSlippage(!value || value < 0 ? 0 : value);
};
return (
Settings
Slippage tolerance
setSlippageHandler(parseFloat(e.target.value))}
style={{
display: "flex",
justifyContent: "center",
flexDirection: "column",
}}
InputProps={{
endAdornment: %,
}}
/>
Fair price
setFairOverride(parseFloat(e.target.value))}
style={{
marginRight: "10px",
flex: 1,
display: "flex",
justifyContent: "center",
flexDirection: "column",
}}
disabled={fairOverride === null}
/>
setShowSettingsDialog(false)}
/>
);
}
function CloseNewAccountsSwitch() {
const styles = useStyles();
const { isClosingNewAccounts, setIsClosingNewAccounts } = useSwapContext();
return (
setIsClosingNewAccounts(!isClosingNewAccounts)}
color="primary"
/>
}
label="Close new accounts"
/>
);
}