feat: reverse display price

src/components/Info.tsx

@@ -5,11 +5,11 @@ import {
   Popover,
   IconButton,
 } from "@material-ui/core";
-import { Info } from "@material-ui/icons";
+import { Info, SwapHorizRounded } from "@material-ui/icons";
 import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
 import { PublicKey } from "@solana/web3.js";
 import { useTokenMap } from "../context/TokenList";
-import { useSwapContext, useSwapFair } from "../context/Swap";
+import { getSwapFair, useSwapContext, useSwapFair } from "../context/Swap";
 import { useMint } from "../context/Token";
 import { useRoute, useMarketName, useBbo } from "../context/Dex";
 
@@ -31,9 +31,11 @@ const useStyles = makeStyles(() => ({
 export function InfoLabel() {
   const styles = useStyles();
 
-  const { fromMint, toMint } = useSwapContext();
+  const { fromMint, toMint, showReversePrices, setShowReversePrices } =
+    useSwapContext();
   const fromMintInfo = useMint(fromMint);
-  const fair = useSwapFair();
+  const toMintInfo = useMint(toMint);
+  const fair = getSwapFair(showReversePrices);
 
   const tokenMap = useTokenMap();
   let fromTokenInfo = tokenMap.get(fromMint.toString());
@@ -41,9 +43,21 @@ export function InfoLabel() {
 
   return (
     <div className={styles.infoLabel}>
+      <IconButton
+        color={showReversePrices ? "primary" : "default"}
+        className={styles.infoButton}
+        onClick={() => setShowReversePrices((p: any) => !p)}
+      >
+        <SwapHorizRounded />
+      </IconButton>
+      &nbsp;
       <Typography color="textSecondary" style={{ fontSize: "14px" }}>
         {fair !== undefined && toTokenInfo && fromTokenInfo
-          ? `1 ${toTokenInfo.symbol} = ${fair.toFixed(
+          ? showReversePrices
+            ? `1 ${fromTokenInfo.symbol} = ${fair.toFixed(
+                toMintInfo?.decimals
+              )} ${toTokenInfo.symbol}`
+            : `1 ${toTokenInfo.symbol} = ${fair.toFixed(
                 fromMintInfo?.decimals
               )} ${fromTokenInfo.symbol}`
           : `-`}

src/context/Swap.tsx

@@ -72,6 +72,13 @@ export type SwapContext = {
   setIsStrict: (isStrict: boolean) => void;
 
   setIsClosingNewAccounts: (b: boolean) => void;
+
+  // A button state to reverse denominator of prices. Eg. if swap show
+  // price of SOL/USDC, then show USDC/SOL price when reverse is true.
+  showReversePrices: boolean;
+  setShowReversePrices: (
+    b: boolean | ((prevState: boolean) => boolean)
+  ) => void;
 };
 const _SwapContext = React.createContext<null | SwapContext>(null);
 
@@ -80,6 +87,7 @@ export function SwapContextProvider(props: any) {
   const [toMint, setToMint] = useState(props.toMint ?? USDC_MINT);
   const [fromAmount, _setFromAmount] = useState(props.fromAmount ?? 0);
   const [toAmount, _setToAmount] = useState(props.toAmount ?? 0);
+  const [showReversePrices, setShowReversePrices] = useState(false);
   const [isClosingNewAccounts, setIsClosingNewAccounts] = useState(false);
   const [isStrict, setIsStrict] = useState(false);
   const [slippage, setSlippage] = useState(DEFAULT_SLIPPAGE_PERCENT);
@@ -146,6 +154,8 @@ export function SwapContextProvider(props: any) {
         setIsStrict,
         setIsClosingNewAccounts,
         referral,
+        showReversePrices,
+        setShowReversePrices,
       }}
     >
       {props.children}
@@ -166,6 +176,14 @@ export function useSwapFair(): number | undefined {
   return _useSwapFair(fromMint, toMint, fairOverride);
 }
 
+// get reverse price for pair  (diff fn to prevent side-effects)
+export function getSwapFair(reversed: boolean = false): number | undefined {
+  const { fairOverride, fromMint, toMint } = useSwapContext();
+  return reversed
+    ? _useSwapFair(toMint, fromMint, fairOverride)
+    : _useSwapFair(fromMint, toMint, fairOverride);
+}
+
 function _useSwapFair(
   fromMint: PublicKey,
   toMint: PublicKey,