From 05a46993bab81f5a082068d31ba1585ea99a378c Mon Sep 17 00:00:00 2001
From: Tyler Shipe <tjshipe@gmail.com>
Date: Wed, 21 Jul 2021 17:26:18 -0400
Subject: [PATCH] add basic stats page

---
 components/stats-page/StatsTotals.tsx | 40 ++++++------------------
 hooks/useMangoStats.tsx               | 44 +++++++++++++++++----------
 pages/stats.tsx                       |  4 +--
 3 files changed, 39 insertions(+), 49 deletions(-)

diff --git a/components/stats-page/StatsTotals.tsx b/components/stats-page/StatsTotals.tsx
index 2531c290..93adabb2 100644
--- a/components/stats-page/StatsTotals.tsx
+++ b/components/stats-page/StatsTotals.tsx
@@ -1,25 +1,13 @@
 import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
-import { formatBalanceDisplay, tokenPrecision } from '../../utils/index'
+import { I80F48 } from '@blockworks-foundation/mango-client'
 import useMangoStats from '../../hooks/useMangoStats'
 import useHistoricPrices from '../../hooks/useHistoricPrices'
 import useMarketList from '../../hooks/useMarketList'
-import useMangoStore from '../../stores/useMangoStore'
 import Chart from '../Chart'
 
-const icons = {
-  BTC: '/assets/icons/btc.svg',
-  ETH: '/assets/icons/eth.svg',
-  SOL: '/assets/icons/sol.svg',
-  SRM: '/assets/icons/srm.svg',
-  USDT: '/assets/icons/usdt.svg',
-  USDC: '/assets/icons/usdc.svg',
-  WUSDT: '/assets/icons/usdt.svg',
-}
-
 export default function StatsTotals() {
   const { latestStats, stats } = useMangoStats()
   const { prices } = useHistoricPrices()
-  // const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   // TODO: fix this
   const backupPrices = [0, 0]
   const { getTokenIndex, symbols } = useMarketList()
@@ -173,39 +161,29 @@ export default function StatsTotals() {
                 <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
                   <div className="flex items-center">
                     <img
-                      src={icons[stat.symbol]}
-                      alt={icons[stat.symbol]}
+                      alt=""
                       width="20"
                       height="20"
-                      className="mr-2.5"
+                      src={`/assets/icons/${stat.symbol.toLowerCase()}.svg`}
+                      className={`mr-2.5`}
                     />
                     {stat.symbol}
                   </div>
                 </Td>
                 <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
-                  {formatBalanceDisplay(
-                    stat.totalDeposits,
-                    tokenPrecision[stat.symbol]
-                  ).toLocaleString(undefined, {
-                    maximumFractionDigits: tokenPrecision[stat.symbol],
-                  })}
+                  {stat.totalDeposits}
                 </Td>
                 <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
-                  {formatBalanceDisplay(
-                    stat.totalBorrows,
-                    tokenPrecision[stat.symbol]
-                  ).toLocaleString(undefined, {
-                    maximumFractionDigits: tokenPrecision[stat.symbol],
-                  })}
+                  {stat.totalBorrows}
                 </Td>
                 <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
-                  {stat.depositInterest.toFixed(2)}%
+                  {stat.depositInterest.toString()}%
                 </Td>
                 <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
-                  {stat.borrowInterest.toFixed(2)}%
+                  {stat.borrowInterest.toString()}%
                 </Td>
                 <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
-                  {(parseFloat(stat.utilization) * 100).toFixed(2)}%
+                  {stat.utilization.mul(I80F48.fromNumber(100)).toFixed(3)}%
                 </Td>
               </Tr>
             ))}
diff --git a/hooks/useMangoStats.tsx b/hooks/useMangoStats.tsx
index 167ba2fc..f225dc76 100644
--- a/hooks/useMangoStats.tsx
+++ b/hooks/useMangoStats.tsx
@@ -20,8 +20,8 @@ const useMangoStats = () => {
   const { cluster } = useConnection()
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const mangoGroupName = useMangoStore((s) => s.selectedMangoGroup.name)
-  const connection = useMangoStore((s) => s.connection.current);
-  const config = useMangoGroupConfig();
+  const connection = useMangoStore((s) => s.connection.current)
+  const config = useMangoGroupConfig()
 
   useEffect(() => {
     const fetchStats = async () => {
@@ -31,36 +31,48 @@ const useMangoStats = () => {
       const stats = await response.json()
       setStats(stats)
     }
-    fetchStats()
+    // fetchStats()
   }, [])
 
   useEffect(() => {
     const getLatestStats = async () => {
       if (mangoGroup) {
-        const rootBanks = await mangoGroup.loadRootBanks(connection);
+        const rootBanks = await mangoGroup.loadRootBanks(connection)
         const latestStats = config.tokens.map((token) => {
           const rootBank = rootBanks.find((bank) => {
             if (!bank) {
-              return false;
-          
+              return false
             }
-            return bank.publicKey.toBase58() == token.rootKey.toBase58();
+            return bank.publicKey.toBase58() == token.rootKey.toBase58()
           })
-          const totalDeposits = rootBank.getUiTotalDeposit(mangoGroup);
-          const totalBorrows = rootBank.getUiTotalBorrow(mangoGroup);
+          const totalDeposits = rootBank.getUiTotalDeposit(mangoGroup)
+          console.log(
+            `total deposits for ${token.symbol}: `,
+            totalDeposits.toFixed(),
+            totalDeposits
+          )
+
+          const totalBorrows = rootBank.getUiTotalBorrow(mangoGroup)
 
           return {
             time: new Date(),
             symbol: token.symbol,
-            totalDeposits: totalDeposits,
-            totalBorrows: totalBorrows,
-            depositInterest: rootBank.getDepositRate(mangoGroup).mul(I80F48.fromNumber(100)),
-            borrowInterest: rootBank.getBorrowRate(mangoGroup).mul(I80F48.fromNumber(100)),
-            utilization: totalDeposits > I80F48.fromNumber(0) ? totalBorrows.div(totalDeposits) : I80F48.fromNumber(0),
+            totalDeposits: totalDeposits.toFixed(),
+            totalBorrows: totalBorrows.toFixed(),
+            depositInterest: rootBank
+              .getDepositRate(mangoGroup)
+              .mul(I80F48.fromNumber(100)),
+            borrowInterest: rootBank
+              .getBorrowRate(mangoGroup)
+              .mul(I80F48.fromNumber(100)),
+            utilization:
+              totalDeposits > I80F48.fromNumber(0)
+                ? totalBorrows.div(totalDeposits)
+                : I80F48.fromNumber(0),
           }
-        });
+        })
         setLatestStats(latestStats)
-      }      
+      }
     }
 
     getLatestStats()
diff --git a/pages/stats.tsx b/pages/stats.tsx
index ad3fb463..744a3a22 100644
--- a/pages/stats.tsx
+++ b/pages/stats.tsx
@@ -7,8 +7,8 @@ import StatsPerps from '../components/stats-page/StatsPerps'
 
 const TABS = [
   'Totals',
-  'Assets',
-  'Perps',
+  // 'Assets',
+  // 'Perps',
   // 'Markets',
   // 'Liquidations',
 ]