feat: precache lending mints

src/components/UserLendingCard/index.tsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from "react";
-import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from './../../hooks';
+import { useCollateralBalance, useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from './../../hooks';
 import { LendingReserve, LendingReserveParser } from "../../models/lending";
 import { TokenIcon } from "../../components/TokenIcon";
 import { formatNumber, formatPct, fromLamports } from "../../utils/utils";
 import { Button, Card, Typography } from "antd";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { useAccount, useMint } from "../../contexts/accounts";
 import { PublicKey } from "@solana/web3.js";
 
@@ -16,9 +16,14 @@ export const UserLendingCard = (props: {
   address: PublicKey,
 }) => {
   const reserve = props.reserve;
+  const address = props.address;
+
   const name = useTokenName(reserve?.liquidityMint);
   const liquidityMint = useMint(props.reserve.liquidityMint);
 
+  const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint);
+  const { balance: collateralBalance } = useCollateralBalance(props.reserve);
+
   const totalLiquidity = fromLamports(props.reserve.totalLiquidity.toNumber(), liquidityMint);
 
   // TODO: calculate
@@ -78,7 +83,7 @@ export const UserLendingCard = (props: {
         Wallet balance:
         </Text>
       <div className="card-cell ">
-        {formatNumber.format(totalLiquidity)} {name}
+        {formatNumber.format(tokenBalance)} {name}
       </div>
     </div>
 
@@ -87,10 +92,25 @@ export const UserLendingCard = (props: {
         You already deposited:
         </Text>
       <div className="card-cell ">
-        {formatNumber.format(totalLiquidity)} {name}
+        {formatNumber.format(collateralBalance)} {name}
       </div>
     </div>
 
+    <div className="card-row" style={{ marginTop: 20, justifyContent: 'space-evenly' }}>
+      <Link to={`/deposit/${address}`}>
+        <Button>Deposit</Button>
+      </Link>
+      <Link to={`/borrow/${address}`}>
+        <Button disabled={true}>Borrow</Button>
+      </Link>
+      <Link to={`/withdraw/${address}`}>
+        <Button disabled={true}>Withdraw</Button>
+      </Link>
+      <Link to={`/repay/${address}`}>
+        <Button disabled={true}>Repay</Button>
+      </Link>
+    </div>
+
  
   </Card>;
 }

src/contexts/lending.tsx

@@ -54,7 +54,10 @@ export const useLending = () => {
 
       const toQuery = [
         ...accounts.filter(acc => (acc?.info as LendingReserve).lendingMarket !== undefined)
-        .map(acc => (acc?.info as LendingReserve).collateralMint.toBase58())
+        .map(acc => [
+          (acc?.info as LendingReserve).collateralMint.toBase58(),
+          (acc?.info as LendingReserve).liquidityMint.toBase58(),
+        ])
       ].flat().filter((p) => p) as string[];
 
       // This will pre-cache all accounts used by pools