Slippage tolerance in settings popover

src/components/Context.tsx

@@ -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);

src/components/Settings.tsx

@@ -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>

src/components/Swap.tsx

@@ -23,7 +23,7 @@ import {
   useMint,
 } from "./Context";
 import TokenDialog from "./TokenDialog";
-import SettingsButton from "./SettingsDialog";
+import { SettingsButton } from "./Settings";
 
 const useStyles = makeStyles(() => ({
   card: {