split deposit info line into separate cards

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 (
-    <Card
-      className={props.className}
-      bodyStyle={{ display: "flex", justifyContent: "space-around" }}
-    >
-      <div className="deposit-info-line-item ">
-        <div>Your balance in Oyster</div>
-        <div>
-          {formatNumber.format(collateralBalance)} {name}
-        </div>
-      </div>
-      <div className="deposit-info-line-item ">
-        <div>Your wallet balance</div>
-        <div>
-          {formatNumber.format(tokenBalance)} {name}
-        </div>
-      </div>
-      <div className="deposit-info-line-item ">
-        <div>Health factor</div>
-        <div>--</div>
-      </div>
-    </Card>
+    <Row gutter={GUTTER}>
+      <Col xs={24} xl={5}>
+        <Card className={props.className}>
+          <Statistic
+            title="Your balance in Oyster"
+            value={formatNumber.format(collateralBalance)}
+            suffix={name}
+          />
+        </Card>
+      </Col>
+      <Col xs={24} xl={5}>
+        <Card className={props.className}>
+          <Statistic
+            title="Your wallet balance"
+            value={formatNumber.format(tokenBalance)}
+            suffix={name}
+          />
+        </Card>
+      </Col>
+      <Col xs={24} xl={5}>
+        <Card className={props.className}>
+          <Statistic title="Health Factor" value="--" />
+        </Card>
+      </Col>
+      <Col xs={24} xl={9}>
+        <Card className={props.className}>
+          <Statistic title="APY" value={formatPct.format(depositAPY)} />
+        </Card>
+      </Col>
+    </Row>
   );
 };

src/views/depositReserve/index.tsx

@@ -9,6 +9,9 @@ import {
   SideReserveOverview,
   SideReserveOverviewMode,
 } from "../../components/SideReserveOverview";
+import { Col, Row } from "antd";
+import { GUTTER } from "../../constants";
+import { LiquidateInput } from "../../components/LiquidateInput";
 
 export const DepositReserveView = () => {
   const { id } = useParams<{ id: string }>();
@@ -20,24 +23,28 @@ export const DepositReserveView = () => {
   }
 
   return (
-    <div className="deposit-reserve">
+    <div className="borrow-reserve">
       <DepositInfoLine
-        className="deposit-reserve-item"
+        className="card-fill"
         reserve={reserve}
         address={lendingReserve.pubkey}
       />
-      <div className="deposit-reserve-container">
-        <DepositInput
-          className="deposit-reserve-item deposit-reserve-item-left"
-          reserve={reserve}
-          address={lendingReserve.pubkey}
-        />
-        <SideReserveOverview
-          className="deposit-reserve-item deposit-reserve-item-right"
-          reserve={lendingReserve}
-          mode={SideReserveOverviewMode.Deposit}
-        />
-      </div>
+      <Row gutter={GUTTER} style={{ flex: 1 }}>
+        <Col xs={24} xl={15}>
+          <DepositInput
+            className="card-fill"
+            reserve={reserve}
+            address={lendingReserve.pubkey}
+          />
+        </Col>
+        <Col xs={24} xl={9}>
+          <SideReserveOverview
+            className="card-fill"
+            reserve={lendingReserve}
+            mode={SideReserveOverviewMode.Deposit}
+          />
+        </Col>
+      </Row>
     </div>
   );
 };