feat: show serum dex market price

src/components/BorrowInput/index.tsx

@@ -126,6 +126,13 @@ export const BorrowInput = (props: {
             justifyContent: "space-around",
           }}
         >
+          <div className="borrow-input-title">{LABELS.SELECT_COLLATERAL}</div>
+          <CollateralSelector
+            reserve={borrowReserve.info}
+            mint={collateralReserveMint}
+            onMintChange={setCollateralReserveMint}
+          />
+
           <div className="borrow-input-title">{LABELS.BORROW_QUESTION}</div>
           <div className="token-input">
             <TokenIcon mintAddress={borrowReserve?.info.liquidityMint} />
@@ -134,7 +141,6 @@ export const BorrowInput = (props: {
               onChange={(val: any) => {
                 setValue(val);
               }}
-              autoFocus={true}
               style={{
                 fontSize: 20,
                 boxShadow: "none",
@@ -145,13 +151,6 @@ export const BorrowInput = (props: {
             />
             <div>{name}</div>
           </div>
-          <div className="borrow-input-title">{LABELS.SELECT_COLLATERAL}</div>
-          <CollateralSelector
-            reserve={borrowReserve.info}
-            mint={collateralReserveMint}
-            onMintChange={setCollateralReserveMint}
-          />
-
           <Button
             type="primary"
             onClick={onBorrow}

src/components/BorrowInput/style.less

@@ -1,3 +1,5 @@
 .borrow-input-title {
   font-size: 1.05rem;
+  margin-top: 15px;
+  margin-bottom: 5px;
 }

src/constants/labels.ts

@@ -20,7 +20,7 @@ export const LABELS = {
   CONNECT_BUTTON: "Connect",
   WALLET_TOOLTIP: "Wallet public key",
   SETTINGS_TOOLTIP: "Settings",
-  SELECT_COLLATERAL: "Select collateral account?",
+  SELECT_COLLATERAL: "Select collateral",
   BORROW_QUESTION: "How much would you like to borrow?",
   BORROW_ACTION: "Borrow",
   TABLE_TITLE_ASSET: "Asset",

src/contexts/lending.tsx

@@ -19,6 +19,7 @@ import {
 import { PublicKey } from "@solana/web3.js";
 import { DexMarketParser } from "../models/dex";
 import { usePrecacheMarket } from "./market";
+import { useLendingReserves } from "../hooks";
 
 export interface LendingContextState {}
 
@@ -40,6 +41,7 @@ export function LendingProvider({ children = null as any }) {
 export const useLending = () => {
   const connection = useConnection();
   const [lendingAccounts, setLendingAccounts] = useState<any[]>([]);
+  const { reserveAccounts } = useLendingReserves();
   const precacheMarkets = usePrecacheMarket();
 
   // TODO: query for all the dex from reserves
@@ -68,6 +70,14 @@ export const useLending = () => {
     }
   }, []);
 
+  useEffect(() => {
+    if (reserveAccounts.length > 0) {
+      precacheMarkets(
+        reserveAccounts.map((reserve) => reserve.info.liquidityMint.toBase58())
+      );
+    }
+  }, [reserveAccounts]);
+
   // initial query
   useEffect(() => {
     setLendingAccounts([]);

src/contexts/market.tsx

@@ -30,7 +30,7 @@ const marketEmitter = new EventEmitter();
 export function MarketProvider({ children = null as any }) {
   const { endpoint } = useConnectionConfig();
   const accountsToObserve = useMemo(() => new Map<string, number>(), []);
-  const [marketMints, setMarketMints] = useState<string[]>();
+  const [marketMints, setMarketMints] = useState<string[]>([]);
 
   const connection = useMemo(() => new Connection(endpoint, "recent"), [
     endpoint,

src/views/borrow/index.tsx

@@ -10,6 +10,7 @@ export const BorrowView = () => {
     <div className="flexColumn">
       <div className="borrow-item deposit-header">
         <div>{LABELS.TABLE_TITLE_ASSET}</div>
+        <div>Serum Dex Price</div>
         <div>{LABELS.TABLE_TITLE_MAX_BORROW}</div>
         <div>{LABELS.TABLE_TITLE_APY}</div>
         <div>{LABELS.TABLE_TITLE_ACTION}</div>

src/views/borrow/item.tsx

@@ -1,5 +1,9 @@
-import React from "react";
-import { useCollateralBalance, useTokenName } from "../../hooks";
+import React, { useMemo } from "react";
+import {
+  useCollateralBalance,
+  useLendingReserves,
+  useTokenName,
+} from "../../hooks";
 import { calculateBorrowAPY, LendingReserve } from "../../models/lending";
 import { TokenIcon } from "../../components/TokenIcon";
 import { formatNumber, formatPct } from "../../utils/utils";
@@ -7,12 +11,14 @@ import { Button, Card } from "antd";
 import { Link } from "react-router-dom";
 import { PublicKey } from "@solana/web3.js";
 import { LABELS } from "../../constants";
+import { useMidPriceInUSD } from "../../contexts/market";
 
 export const BorrowItem = (props: {
   reserve: LendingReserve;
   address: PublicKey;
 }) => {
   const name = useTokenName(props.reserve.liquidityMint);
+  const price = useMidPriceInUSD(props.reserve.liquidityMint.toBase58()).price;
 
   // TODO: calculate avilable amount... based on total owned collateral across all the reserves
   const { balance: collateralBalance } = useCollateralBalance(props.reserve);
@@ -27,6 +33,7 @@ export const BorrowItem = (props: {
             <TokenIcon mintAddress={props.reserve.liquidityMint} />
             {name}
           </span>
+          <div>{formatNumber.format(price)} USDC</div>
           <div>
             {formatNumber.format(collateralBalance)} {name}
           </div>