Fair override setting

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.58",
     "@project-serum/anchor": "^0.5.1-beta.2",
     "@project-serum/serum": "^0.13.34",
     "@project-serum/sol-wallet-adapter": "^0.2.0",

src/components/Info.tsx

@@ -9,14 +9,9 @@ import { Info } from "@material-ui/icons";
 import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
 import { PublicKey } from "@solana/web3.js";
 import { useTokenList } from "./context/TokenList";
-import { useSwapContext } from "./context/Swap";
+import { useSwapContext, useSwapFair } from "./context/Swap";
 import { useMint } from "./context/Mint";
-import {
-  useDexContext,
-  useMarketName,
-  useFair,
-  useFairRoute,
-} from "./context/Dex";
+import { useDexContext, useMarketName, useFair } from "./context/Dex";
 
 const useStyles = makeStyles((theme) => ({
   infoLabel: {
@@ -44,7 +39,7 @@ export function InfoLabel() {
 
   const { fromMint, toMint } = useSwapContext();
   const fromMintInfo = useMint(fromMint);
-  const fair = useFairRoute(fromMint, toMint);
+  const fair = useSwapFair();
 
   const tokenList = useTokenList();
   let fromTokenInfo = tokenList.filter(

src/components/Settings.tsx

@@ -24,9 +24,10 @@ import {
   InputAdornment,
   Link,
 } from "@material-ui/core";
-import { SettingsOutlined as Settings } from "@material-ui/icons";
+import { ToggleButton } from "@material-ui/lab";
+import { SettingsOutlined as Settings, Close } from "@material-ui/icons";
 import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
-import { useSwapContext } from "./context/Swap";
+import { useSwapContext, useSwapFair } from "./context/Swap";
 import { useMarket, useOpenOrders } from "./context/Dex";
 import { useTokenList } from "./context/TokenList";
 import { useMint } from "./context/Mint";
@@ -78,29 +79,75 @@ export function SettingsButton() {
 }
 
 function SettingsDetails() {
-  const { slippage, setSlippage } = useSwapContext();
+  const { slippage, setSlippage, fairOverride, setFairOverride } =
+    useSwapContext();
   const [showSettingsDialog, setShowSettingsDialog] = useState(false);
+  const fair = useSwapFair();
   return (
     <div style={{ padding: "15px", width: "305px" }}>
       <Typography color="textSecondary" style={{ fontWeight: "bold" }}>
         Settings
       </Typography>
       <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>,
-          }}
-        />
+        <div>
+          <Typography color="textSecondary">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>,
+            }}
+          />
+        </div>
+        <div style={{ marginTop: "5px" }}>
+          <Typography color="textSecondary">Fair price</Typography>
+          <div style={{ display: "flex" }}>
+            <TextField
+              type="number"
+              placeholder="Fair price override"
+              value={fair}
+              onChange={(e) => setFairOverride(parseFloat(e.target.value))}
+              style={{
+                marginRight: "10px",
+                flex: 1,
+                display: "flex",
+                justifyContent: "center",
+                flexDirection: "column",
+              }}
+              disabled={fairOverride === null}
+            />
+            <ToggleButton
+              selected={fairOverride === null}
+              onClick={() => {
+                if (fair === undefined) {
+                  console.error("Fair is undefined");
+                  return;
+                }
+                if (fairOverride === null) {
+                  setFairOverride(fair);
+                } else {
+                  setFairOverride(null);
+                }
+              }}
+              style={{
+                paddingTop: "3px",
+                paddingBottom: "3px",
+                paddingLeft: "5px",
+                paddingRight: "5px",
+                borderRadius: "20px",
+              }}
+            >
+              Auto
+            </ToggleButton>
+          </div>
+        </div>
         <Button
           style={{
             width: "100%",
@@ -139,6 +186,30 @@ export function SettingsDialog({
       }}
     >
       <div>
+        <div
+          style={{
+            marginTop: "10px",
+            paddingLeft: "24px",
+            paddingRight: "24px",
+            display: "flex",
+            justifyContent: "space-between",
+          }}
+        >
+          <Typography
+            color="textSecondary"
+            variant="h6"
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              flexDirection: "column",
+            }}
+          >
+            Serum Accounts
+          </Typography>
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </div>
         <DialogContent style={{ paddingTop: 0 }}>
           <OpenOrdersAccounts />
         </DialogContent>

src/components/context/Swap.tsx

@@ -20,6 +20,8 @@ export type SwapContext = {
   toMintAccount?: MintInfo;
   slippage: number;
   setSlippage: (n: number) => void;
+  fairOverride: number | null;
+  setFairOverride: (n: number | null) => void;
 };
 const _SwapContext = React.createContext<null | SwapContext>(null);
 
@@ -30,7 +32,8 @@ export function SwapContextProvider(props: any) {
   const [toAmount, _setToAmount] = useState(0);
   // Percent units.
   const [slippage, setSlippage] = useState(DEFAULT_SLIPPAGE_PERCENT);
-  const fair = useFairRoute(fromMint, toMint);
+  const [fairOverride, setFairOverride] = useState<number | null>(null);
+  const fair = _useSwapFair(fromMint, toMint, fairOverride);
 
   const swapToFromMints = () => {
     const oldFrom = fromMint;
@@ -73,6 +76,8 @@ export function SwapContextProvider(props: any) {
         swapToFromMints,
         slippage,
         setSlippage,
+        fairOverride,
+        setFairOverride,
       }}
     >
       {props.children}
@@ -87,3 +92,18 @@ export function useSwapContext(): SwapContext {
   }
   return ctx;
 }
+
+export function useSwapFair(): number | undefined {
+  const { fairOverride, fromMint, toMint } = useSwapContext();
+  return _useSwapFair(fromMint, toMint, fairOverride);
+}
+
+function _useSwapFair(
+  fromMint: PublicKey,
+  toMint: PublicKey,
+  fairOverride: number | null
+): number | undefined {
+  const fairRoute = useFairRoute(fromMint, toMint);
+  const fair = fairOverride === null ? fairRoute : fairOverride;
+  return fair;
+}

yarn.lock

@@ -1435,6 +1435,17 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
+"@material-ui/lab@^4.0.0-alpha.58":
+  version "4.0.0-alpha.58"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.58.tgz#c7ebb66f49863c5acbb20817163737caa299fafc"
+  integrity sha512-GKHlJqLxUeHH3L3dGQ48ZavYrqGOTXkFkiEiuYMAnAvXAZP4rhMIqeHOPXSUQan4Bd8QnafDcpovOSLnadDmKw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@material-ui/styles@^4.11.4":
   version "4.11.4"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"