diff --git a/src/components/Info.tsx b/src/components/Info.tsx
new file mode 100644
index 0000000..0d1f3e9
--- /dev/null
+++ b/src/components/Info.tsx
@@ -0,0 +1,160 @@
+import { makeStyles, Typography, Link, Popover } from "@material-ui/core";
+import { Info } from "@material-ui/icons";
+import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
+import { useFair } from "./context/Dex";
+import { useTokenList } from "./context/TokenList";
+import { useSwapContext } from "./context/Swap";
+import { useMint } from "./context/Mint";
+import { useMarketRoute } from "./context/Dex";
+
+const useStyles = makeStyles((theme) => ({
+ infoLabel: {
+ marginTop: "10px",
+ marginBottom: "10px",
+ display: "flex",
+ justifyContent: "space-between",
+ marginLeft: "5px",
+ marginRight: "5px",
+ },
+ fairPriceLabel: {
+ marginRight: "10px",
+ display: "flex",
+ justifyContent: "center",
+ flexDirection: "column",
+ color: theme.palette.text.secondary,
+ },
+}));
+
+export function InfoLabel() {
+ const styles = useStyles();
+
+ const { fromMint, toMint } = useSwapContext();
+ const fromMintInfo = useMint(fromMint);
+ const fair = useFair(fromMint, toMint);
+
+ const tokenList = useTokenList();
+ let fromTokenInfo = tokenList.filter(
+ (t) => t.address === fromMint.toString()
+ )[0];
+ let toTokenInfo = tokenList.filter((t) => t.address === toMint.toString())[0];
+
+ return (
+
+
+
+
+ {fair !== undefined
+ ? `1 ${toTokenInfo.symbol} = ${fair.toFixed(
+ fromMintInfo?.decimals
+ )} ${fromTokenInfo.symbol}`
+ : `-`}
+
+
+
+
+ );
+}
+
+function InfoPopover() {
+ const { fromMint, toMint } = useSwapContext();
+ const route = useMarketRoute(fromMint, toMint);
+ const tokenList = useTokenList();
+ const fromMintTicker = tokenList
+ .filter((t) => t.address === fromMint.toString())
+ .map((t) => t.symbol)[0];
+ const toMintTicker = tokenList
+ .filter((t) => t.address === toMint.toString())
+ .map((t) => t.symbol)[0];
+ const addresses = [
+ { ticker: fromMintTicker, mint: fromMint },
+ { ticker: toMintTicker, mint: toMint },
+ ];
+ return (
+
+ {
+ //@ts-ignore
+ (popupState) => (
+
+
+
+
+
+
+ Trade Route
+
+ {route.map((market) => {
+ return (
+
+
+ {market.name}
+
+
+ {market.fair}
+
+
+ );
+ })}
+
+
+
+ Tokens
+
+ {addresses.map((address) => {
+ return (
+
+
+ {address.ticker}
+
+
+ {address.mint.toString()}
+
+
+ );
+ })}
+
+
+
+
+ )
+ }
+
+ );
+}
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 57f6d41..a8d0177 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -22,6 +22,7 @@ import {
MenuItem,
TextField,
InputAdornment,
+ Link,
} from "@material-ui/core";
import { SettingsOutlined as Settings } from "@material-ui/icons";
import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
@@ -154,12 +155,12 @@ function OpenOrdersAccounts() {
Market
- Base Used
- Base Free
- Quote Used
- Quote Free
- Open Orders Account
- Action
+ Open Orders Account
+ Base Used
+ Base Free
+ Quote Used
+ Quote Free
+ Action
@@ -212,24 +213,17 @@ function OpenOrdersRow({
return (
- {marketName}
+
+
+ {marketName}
+
+
-
- {toDisplay(base, ooAccount.baseTokenTotal.sub(ooAccount.baseTokenFree))}
-
-
- {toDisplay(base, ooAccount.baseTokenFree)}
-
-
- {toDisplay(
- quote,
- ooAccount.quoteTokenTotal.sub(ooAccount.quoteTokenFree)
- )}
-
-
- {toDisplay(quote, ooAccount.quoteTokenFree)}
-
-
+
-
+
+ {toDisplay(base, ooAccount.baseTokenTotal.sub(ooAccount.baseTokenFree))}
+
+
+ {toDisplay(base, ooAccount.baseTokenFree)}
+
+
+ {toDisplay(
+ quote,
+ ooAccount.quoteTokenTotal.sub(ooAccount.quoteTokenFree)
+ )}
+
+
+ {toDisplay(quote, ooAccount.quoteTokenFree)}
+
+