Slippage tolerance in settings popover
This commit is contained in:
parent
4a239d8a08
commit
265ee7f720
|
@ -35,6 +35,7 @@ export function SwapContextProvider(props: any) {
|
|||
const [toBalance, setToBalance] = useState(undefined);
|
||||
const [minExpectedAmount, setMinExpectedAmount] = useState(0);
|
||||
const [ownedTokenAccounts, setOwnedTokenAccounts] = useState(undefined);
|
||||
const [slippage, setSlippage] = useState(0.5);
|
||||
|
||||
// Fetch all the owned token accounts for the wallet.
|
||||
useEffect(() => {
|
||||
|
@ -75,6 +76,8 @@ export function SwapContextProvider(props: any) {
|
|||
fromBalance,
|
||||
toBalance,
|
||||
ownedTokenAccounts,
|
||||
slippage,
|
||||
setSlippage,
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
|
@ -109,6 +112,8 @@ export type SwapContext = {
|
|||
ownedTokenAccounts:
|
||||
| { publicKey: PublicKey; account: TokenAccount }[]
|
||||
| undefined;
|
||||
slippage: number;
|
||||
setSlippage: (n: number) => void;
|
||||
};
|
||||
|
||||
const TokenListContext = React.createContext<null | TokenListContext>(null);
|
||||
|
|
|
@ -20,10 +20,18 @@ import {
|
|||
Button,
|
||||
Select,
|
||||
MenuItem,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
} from "@material-ui/core";
|
||||
import { SettingsOutlined as Settings } from "@material-ui/icons";
|
||||
import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
|
||||
import { useOpenOrders, useMarket, useMint, useTokenList } from "./Context";
|
||||
import {
|
||||
useOpenOrders,
|
||||
useMarket,
|
||||
useMint,
|
||||
useTokenList,
|
||||
useSwapContext,
|
||||
} from "./Context";
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
tab: {
|
||||
|
@ -35,9 +43,11 @@ const useStyles = makeStyles(() => ({
|
|||
},
|
||||
}));
|
||||
|
||||
export default function SettingsButton() {
|
||||
export function SettingsButton() {
|
||||
const styles = useStyles();
|
||||
const { slippage, setSlippage } = useSwapContext();
|
||||
const [showSettingsDialog, setShowSettingsDialog] = useState(false);
|
||||
|
||||
return (
|
||||
<PopupState variant="popover">
|
||||
{
|
||||
|
@ -62,16 +72,39 @@ export default function SettingsButton() {
|
|||
}}
|
||||
PaperProps={{ style: { borderRadius: "10px" } }}
|
||||
>
|
||||
<div style={{ padding: "15px", width: "305px", height: "285px" }}>
|
||||
<div style={{ padding: "15px", width: "305px" }}>
|
||||
<Typography
|
||||
color="textSecondary"
|
||||
style={{ fontWeight: "bold" }}
|
||||
>
|
||||
Swap Settings
|
||||
Settings
|
||||
</Typography>
|
||||
<div>
|
||||
<div>Slippage</div>
|
||||
<Button onClick={() => setShowSettingsDialog(true)}>
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
<Typography>Slippage tolerance</Typography>
|
||||
<TextField
|
||||
type="number"
|
||||
placeholder="Error tolerance percentage"
|
||||
value={slippage}
|
||||
onChange={(e) => setSlippage(parseFloat(e.target.value))}
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">%</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
style={{
|
||||
width: "100%",
|
||||
marginTop: "10px",
|
||||
background: "#e0e0e0",
|
||||
}}
|
||||
onClick={() => setShowSettingsDialog(true)}
|
||||
>
|
||||
Manage Dex Accounts
|
||||
</Button>
|
||||
</div>
|
|
@ -23,7 +23,7 @@ import {
|
|||
useMint,
|
||||
} from "./Context";
|
||||
import TokenDialog from "./TokenDialog";
|
||||
import SettingsButton from "./SettingsDialog";
|
||||
import { SettingsButton } from "./Settings";
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
card: {
|
||||
|
|
Loading…
Reference in New Issue