From 45a6ec6d12540e0209651eb67bfd38e29ba50bcd Mon Sep 17 00:00:00 2001
From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com>
Date: Tue, 22 Dec 2020 17:30:23 -0600
Subject: [PATCH] feat: add totals for overview pages

---
 src/components/LiquidateInput/index.tsx  |  2 +-
 src/constants/labels.ts                  |  1 +
 src/hooks/useUserObligations.ts          |  3 ++-
 src/models/index.ts                      |  1 +
 src/models/totals.ts                     | 13 +++++++++++++
 src/views/borrow/item.tsx                |  7 +++++--
 src/views/borrow/itemStyle.less          |  2 +-
 src/views/dashboard/deposit/index.tsx    |  2 +-
 src/views/dashboard/obligation/index.tsx |  2 +-
 src/views/dashboard/style.less           |  2 +-
 src/views/deposit/view/item.tsx          | 14 ++++++++++----
 src/views/deposit/view/itemStyle.less    |  2 +-
 src/views/home/index.tsx                 | 16 +++-------------
 src/views/home/item.tsx                  | 12 ++++++++++--
 src/views/home/itemStyle.less            |  2 +-
 src/views/liquidate/style.less           |  2 +-
 16 files changed, 53 insertions(+), 30 deletions(-)
 create mode 100644 src/models/totals.ts

diff --git a/src/components/LiquidateInput/index.tsx b/src/components/LiquidateInput/index.tsx
index ecaea5a..10ec210 100644
--- a/src/components/LiquidateInput/index.tsx
+++ b/src/components/LiquidateInput/index.tsx
@@ -87,7 +87,7 @@ export const LiquidateInput = (props: {
               disabled={true}
             />
             <Button type="primary" 
-              onClick={onLiquidate} 
+              onClick={onLiquidate}
               disabled={fromAccounts.length === 0}
               loading={pendingTx}>
               {LABELS.LIQUIDATE_ACTION}
diff --git a/src/constants/labels.ts b/src/constants/labels.ts
index 520cfec..0d2db11 100644
--- a/src/constants/labels.ts
+++ b/src/constants/labels.ts
@@ -51,4 +51,5 @@ export const LABELS = {
   DASHBOARD_ACTION: "Go to dashboard",
   GO_BACK_ACTION: "Go back",
   DEPOSIT_ACTION: "Deposit",
+  TOTAL_TITLE: "Total",
 };
diff --git a/src/hooks/useUserObligations.ts b/src/hooks/useUserObligations.ts
index d90579b..02c3262 100644
--- a/src/hooks/useUserObligations.ts
+++ b/src/hooks/useUserObligations.ts
@@ -29,7 +29,8 @@ export function useUserObligations() {
           obligation: ob,
           userAccounts: [...accountsByMint.get(ob.info.tokenMint.toBase58())],
         };
-      });
+      })
+      .sort((a, b) => b.obligation.info.borrowedInQuote - a.obligation.info.borrowedInQuote);
   }, [accountsByMint, obligations]);
 
   return {
diff --git a/src/models/index.ts b/src/models/index.ts
index f9259dc..76b3452 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -1,2 +1,3 @@
 export * from "./account";
 export * from "./lending";
+export * from "./totals";
diff --git a/src/models/totals.ts b/src/models/totals.ts
new file mode 100644
index 0000000..d97bb19
--- /dev/null
+++ b/src/models/totals.ts
@@ -0,0 +1,13 @@
+export interface TotalItem {
+  key: string;
+  marketSize: number;
+  borrowed: number;
+  name: string;
+}
+
+export interface Totals {
+  marketSize: number;
+  borrowed: number;
+  lentOutPct: number;
+  items: TotalItem[];
+}
diff --git a/src/views/borrow/item.tsx b/src/views/borrow/item.tsx
index 15c9ca9..9312c28 100644
--- a/src/views/borrow/item.tsx
+++ b/src/views/borrow/item.tsx
@@ -17,7 +17,7 @@ export const BorrowItem = (props: {
   const price = useMidPriceInUSD(props.reserve.liquidityMint.toBase58()).price;
 
   // TODO: calculate avilable amount... based on total owned collateral across all the reserves
-  const { balance: collateralBalance } = useUserCollateralBalance(
+  const { balance: collateralBalance, balanceInUSD: collateralBalanceInUSD } = useUserCollateralBalance(
     props.reserve
   );
 
@@ -32,7 +32,10 @@ export const BorrowItem = (props: {
         </span>
         <div>${formatNumber.format(price)}</div>
         <div>
-          {formatNumber.format(collateralBalance)} {name}
+          <div>
+            <div><em>{formatNumber.format(collateralBalance)}</em> {name}</div>
+            <div className="dashboard-amount-quote">${formatNumber.format(collateralBalanceInUSD)}</div>
+          </div>
         </div>
         <div>{formatPct.format(apr)}</div>
         <div>
diff --git a/src/views/borrow/itemStyle.less b/src/views/borrow/itemStyle.less
index f515a2f..da0d090 100644
--- a/src/views/borrow/itemStyle.less
+++ b/src/views/borrow/itemStyle.less
@@ -9,7 +9,7 @@
   & > :nth-child(n) {
     flex: 20%;
     text-align: right;
-    margin: 15px 0px;
+    margin: 10px 0px;
   }
 
   & > :first-child {
diff --git a/src/views/dashboard/deposit/index.tsx b/src/views/dashboard/deposit/index.tsx
index f76f6cb..fe4a4ca 100644
--- a/src/views/dashboard/deposit/index.tsx
+++ b/src/views/dashboard/deposit/index.tsx
@@ -12,7 +12,7 @@ export const DashboardDeposits = () => {
   return (<Card title={
     <div className="dashboard-title">
       <div>{LABELS.DASHBOARD_TITLE_DEPOSITS}</div>
-      <div><span>Total: </span>${formatNumber.format(totalInQuote)}</div>
+      <div><span>{LABELS.TOTAL_TITLE}: </span>${formatNumber.format(totalInQuote)}</div>
     </div>}>
     <BarChartStatistic
       items={userDeposits}
diff --git a/src/views/dashboard/obligation/index.tsx b/src/views/dashboard/obligation/index.tsx
index 2b8fecb..e00d684 100644
--- a/src/views/dashboard/obligation/index.tsx
+++ b/src/views/dashboard/obligation/index.tsx
@@ -13,7 +13,7 @@ export const DashboardObligations = () => {
     <Card title={
       <div className="dashboard-title">
         <div>{LABELS.DASHBOARD_TITLE_LOANS}</div>
-        <div><span>Total: </span>${formatNumber.format(totalInQuote)}</div>
+        <div><span>{LABELS.TOTAL_TITLE}: </span>${formatNumber.format(totalInQuote)}</div>
       </div>}>
       <BarChartStatistic
         items={userObligations}
diff --git a/src/views/dashboard/style.less b/src/views/dashboard/style.less
index ee18d70..496b127 100644
--- a/src/views/dashboard/style.less
+++ b/src/views/dashboard/style.less
@@ -10,7 +10,7 @@
     flex: 15%;
     text-align: right;
     white-space: nowrap;
-    margin: 15px 0px;
+    margin: 10px 0px;
   }
 
   & > :first-child {
diff --git a/src/views/deposit/view/item.tsx b/src/views/deposit/view/item.tsx
index 358fa17..d32336d 100644
--- a/src/views/deposit/view/item.tsx
+++ b/src/views/deposit/view/item.tsx
@@ -17,8 +17,8 @@ export const ReserveItem = (props: {
   address: PublicKey;
 }) => {
   const name = useTokenName(props.reserve.liquidityMint);
-  const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint);
-  const { balance: collateralBalance } = useUserCollateralBalance(
+  const { balance: tokenBalance, balanceInUSD: tokenBalanceInUSD } = useUserBalance(props.reserve.liquidityMint);
+  const { balance: collateralBalance, balanceInUSD: collateralBalanceInUSD } = useUserCollateralBalance(
     props.reserve
   );
 
@@ -32,10 +32,16 @@ export const ReserveItem = (props: {
           {name}
         </span>
         <div>
-          {formatNumber.format(tokenBalance)} {name}
+          <div>
+            <div><em>{formatNumber.format(tokenBalance)}</em> {name}</div>
+            <div className="dashboard-amount-quote">${formatNumber.format(tokenBalanceInUSD)}</div>
+          </div>
         </div>
         <div>
-          {formatNumber.format(collateralBalance)} {name}
+          <div>
+            <div><em>{formatNumber.format(collateralBalance)}</em> {name}</div>
+            <div className="dashboard-amount-quote">${formatNumber.format(collateralBalanceInUSD)}</div>
+          </div>
         </div>
         <div>{formatPct.format(apy)}</div>
         <div>
diff --git a/src/views/deposit/view/itemStyle.less b/src/views/deposit/view/itemStyle.less
index 675bb59..ba7c116 100644
--- a/src/views/deposit/view/itemStyle.less
+++ b/src/views/deposit/view/itemStyle.less
@@ -9,7 +9,7 @@
   & > :nth-child(n) {
     flex: 20%;
     text-align: right;
-    margin: 15px 0px;
+    margin: 10px 0px;
   }
 
   & > :first-child {
diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx
index 227c23e..781c72d 100644
--- a/src/views/home/index.tsx
+++ b/src/views/home/index.tsx
@@ -6,23 +6,12 @@ import { cache, ParsedAccount } from "../../contexts/accounts";
 import { useConnectionConfig } from "../../contexts/connection";
 import { useMarkets } from "../../contexts/market";
 import { useLendingReserves } from "../../hooks";
-import { reserveMarketCap } from "../../models";
+import { reserveMarketCap, Totals } from "../../models";
 import { fromLamports, getTokenName, wadToLamports } from "../../utils/utils";
 import { LendingReserveItem } from "./item";
 import { BarChartStatistic } from "./../../components/BarChartStatistic";
 import "./itemStyle.less";
 
-interface Totals {
-  marketSize: number;
-  borrowed: number;
-  lentOutPct: number;
-  items: {
-    marketSize: number;
-    borrowed: number;
-    name: string;
-  }[];
-}
-
 export const HomeView = () => {
   const { reserveAccounts } = useLendingReserves();
   const { marketEmitter, midPriceInUSD } = useMarkets();
@@ -56,6 +45,7 @@ export const HomeView = () => {
         }
 
         let leaf = {
+          key: item.pubkey.toBase58(),
           marketSize: fromLamports(marketCapLamports, liquidityMint?.info) *
             midPriceInUSD(liquidityMint?.pubkey.toBase58()),
           borrowed: fromLamports(
@@ -146,7 +136,7 @@ export const HomeView = () => {
         <div>{LABELS.TABLE_TITLE_BORROW_APY}</div>
       </div>
       {reserveAccounts.map((account) => (
-        <LendingReserveItem reserve={account.info} address={account.pubkey} />
+        <LendingReserveItem reserve={account.info} address={account.pubkey} item={totals.items.find(item => item.key === account.pubkey.toBase58())} />
       ))}
       </Card>
     </div>
diff --git a/src/views/home/item.tsx b/src/views/home/item.tsx
index a049dc7..f14adfa 100644
--- a/src/views/home/item.tsx
+++ b/src/views/home/item.tsx
@@ -15,10 +15,12 @@ import {
 import { Link } from "react-router-dom";
 import { PublicKey } from "@solana/web3.js";
 import { useMint } from "../../contexts/accounts";
+import { TotalItem } from "../../models";
 
 export const LendingReserveItem = (props: {
   reserve: LendingReserve;
   address: PublicKey;
+  item?: TotalItem;
 }) => {
   const name = useTokenName(props.reserve.liquidityMint);
 
@@ -56,10 +58,16 @@ export const LendingReserveItem = (props: {
           {name}
         </span>
         <div title={marketSize.toString()}>
-          {formatNumber.format(marketSize)} {name}
+          <div>
+            <div><em>{formatNumber.format(marketSize)}</em> {name}</div>
+            <div className="dashboard-amount-quote">${formatNumber.format(props.item?.marketSize)}</div>
+          </div>
         </div>
         <div title={totalBorrows.toString()}>
-          {formatNumber.format(totalBorrows)} {name}
+          <div>
+            <div><em>{formatNumber.format(totalBorrows)}</em> {name}</div>
+            <div className="dashboard-amount-quote">${formatNumber.format(props.item?.borrowed)}</div>
+          </div>
         </div>
         <div title={depositAPY.toString()}>
           {formatPct.format(depositAPY)}
diff --git a/src/views/home/itemStyle.less b/src/views/home/itemStyle.less
index b9b30d7..d07a32d 100644
--- a/src/views/home/itemStyle.less
+++ b/src/views/home/itemStyle.less
@@ -9,7 +9,7 @@
   & > :nth-child(n) {
     flex: 20%;
     text-align: right;
-    margin: 15px 0px;
+    margin: 10px 0px;
   }
 
   & > :first-child {
diff --git a/src/views/liquidate/style.less b/src/views/liquidate/style.less
index 420b61b..0cd4465 100644
--- a/src/views/liquidate/style.less
+++ b/src/views/liquidate/style.less
@@ -9,7 +9,7 @@
   & > :nth-child(n) {
     flex: 20%;
     text-align: right;
-    margin: 15px 0px;
+    margin: 10px 0px;
   }
 
   & > :first-child {