diff --git a/src/components/DepositInfoLine/index.tsx b/src/components/DepositInfoLine/index.tsx
index c240198..4f99e08 100644
--- a/src/components/DepositInfoLine/index.tsx
+++ b/src/components/DepositInfoLine/index.tsx
@@ -1,14 +1,15 @@
-import React from "react";
+import React, { useMemo } from "react";
import {
useTokenName,
useUserBalance,
useUserCollateralBalance,
} from "./../../hooks";
-import { LendingReserve } from "../../models/lending";
-import { formatNumber } from "../../utils/utils";
-import { Card } from "antd";
+import { calculateDepositAPY, LendingReserve } from "../../models/lending";
+import { formatNumber, formatPct } from "../../utils/utils";
+import { Card, Col, Row, Statistic } from "antd";
import "./style.less";
import { PublicKey } from "@solana/web3.js";
+import { GUTTER } from "../../constants";
export const DepositInfoLine = (props: {
className?: string;
@@ -20,28 +21,40 @@ export const DepositInfoLine = (props: {
const { balance: collateralBalance } = useUserCollateralBalance(
props.reserve
);
+ const depositAPY = useMemo(() => calculateDepositAPY(props.reserve), [
+ props.reserve,
+ ]);
return (
-