add interest rates

components/MarginBalances.tsx

@@ -8,8 +8,9 @@ import useMangoStore from '../stores/useMangoStore'
 // import useMarketList from '../hooks/useMarketList'
 import {
   abbreviateAddress,
+  i80f48ToPercent,
   // floorToDecimal,
-  // tokenPrecision,
+  tokenPrecision,
 } from '../utils/index'
 import DepositModal from './DepositModal'
 import WithdrawModal from './WithdrawModal'
@@ -20,8 +21,11 @@ import Tooltip from './Tooltip'
 
 export default function MarginBalances() {
   const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
-  const selectedMangoGroupTokens = useMangoStore(
-    (s) => s.selectedMangoGroup.tokens
+  const selectedMangoGroupConfig = useMangoStore(
+    (s) => s.selectedMangoGroup.config
+  )
+  const selectedMangoGroupCache = useMangoStore(
+    (s) => s.selectedMangoGroup.cache
   )
   const selectedMarginAccount = useMangoStore(
     (s) => s.selectedMarginAccount.current
@@ -148,47 +152,60 @@ export default function MarginBalances() {
               </tr>
             </thead>
             <tbody>
-              {selectedMangoGroupTokens.map((token) => (
-                <tr key={token.symbol} className={`text-th-fgd-1`}>
-                  <td className={`flex items-center py-2`}>
-                    <img
-                      alt=""
-                      width="20"
-                      height="20"
-                      src={`/assets/icons/${token.symbol.toLowerCase()}.svg`}
-                      className={`mr-2.5`}
-                    />
-                    <span>{token.symbol}</span>
-                  </td>
-                  <td className={`text-right px-2`}>
-                    {/* {selectedMarginAccount
-                      ? floorToDecimal(
-                          selectedMarginAccount.getUiDeposit(
-                            selectedMangoGroup,
-                            i
-                          ),
-                          tokenPrecision[name]
-                        ).toFixed(tokenPrecision[name])
-                      : (0).toFixed(tokenPrecision[name])} */}
-                  </td>
-                  <td className={`text-right px-2`}>
-                    {/* {selectedMarginAccount
-                      ? selectedMarginAccount
-                          .getUiBorrow(selectedMangoGroup, i)
-                          .toFixed(tokenPrecision[name])
-                      : (0).toFixed(tokenPrecision[name])} */}
-                  </td>
-                  <td className={`text-right`}>
-                    <span className={`text-th-green`}>
-                      {/* {(selectedMangoGroup.getDepositRate(i) * 100).toFixed(2)}% */}
-                    </span>
-                    <span className={`text-th-fgd-4`}>{'  /  '}</span>
-                    <span className={`text-th-red`}>
-                      {/* {(selectedMangoGroup.getBorrowRate(i) * 100).toFixed(2)}% */}
-                    </span>
-                  </td>
-                </tr>
-              ))}
+              {selectedMangoGroupConfig.tokens.map(({ symbol, mint_key }) => {
+                const tokenIndex = selectedMangoGroup.getTokenIndex(mint_key)
+                return (
+                  <tr key={symbol} className={`text-th-fgd-1`}>
+                    <td className={`flex items-center py-2`}>
+                      <img
+                        alt=""
+                        width="20"
+                        height="20"
+                        src={`/assets/icons/${symbol.toLowerCase()}.svg`}
+                        className={`mr-2.5`}
+                      />
+                      <span>{symbol}</span>
+                    </td>
+                    <td className={`text-right px-2`}>
+                      {selectedMarginAccount
+                        ? selectedMarginAccount
+                            .getUiDeposit(
+                              selectedMangoGroupCache.rootBankCache[tokenIndex],
+                              selectedMangoGroup,
+                              tokenIndex
+                            )
+                            .toFixed(tokenPrecision[symbol])
+                        : (0).toFixed(tokenPrecision[symbol])}
+                    </td>
+                    <td className={`text-right px-2`}>
+                      {selectedMarginAccount
+                        ? selectedMarginAccount
+                            .getUiBorrow(
+                              selectedMangoGroupCache.rootBankCache[tokenIndex],
+                              selectedMangoGroup,
+                              tokenIndex
+                            )
+                            .toFixed(tokenPrecision[symbol])
+                        : (0).toFixed(tokenPrecision[symbol])}
+                    </td>
+                    <td className={`text-right`}>
+                      <span className={`text-th-green`}>
+                        {i80f48ToPercent(
+                          selectedMangoGroup.getDepositRate(tokenIndex)
+                        ).toFixed(2)}
+                        %
+                      </span>
+                      <span className={`text-th-fgd-4`}>{'  /  '}</span>
+                      <span className={`text-th-red`}>
+                        {i80f48ToPercent(
+                          selectedMangoGroup.getBorrowRate(tokenIndex)
+                        ).toFixed(2)}
+                        %
+                      </span>
+                    </td>
+                  </tr>
+                )
+              })}
             </tbody>
           </table>
         ) : null}

hooks/useHydrateStore.tsx

@@ -13,7 +13,7 @@ const SECONDS = 1000
 
 // const mangoGroupMarketsSelector = (s) => s.selectedMangoGroup.markets
 // const websocketConnectionSelector = (s) => s.connection.websocket
-const selectedMarketKindSelector = (s) => s.selectedMarket.kind
+// const selectedMarketKindSelector = (s) => s.selectedMarket.kind
 const selectedMarketAddressSelector = (s) => s.selectedMarket.address
 
 const useHydrateStore = () => {

stores/useMangoStore.tsx

@@ -16,6 +16,7 @@ import {
   getTokenByMint,
   TokenAccount,
   nativeToUi,
+  MerpsCache,
 } from '@blockworks-foundation/mango-client'
 // import { SRM_DECIMALS } from '@project-serum/serum/lib/token-instructions'
 import { AccountInfo, Connection, PublicKey, TokenAmount } from '@solana/web3.js'
@@ -47,8 +48,11 @@ const DEFAULT_CONNECTION = new Connection(ENDPOINT.url, 'recent')
 const WEBSOCKET_CONNECTION = new Connection(ENDPOINT.websocket, 'recent')
 
 const DEFAULT_MANGO_GROUP_NAME = 'merps_test_v1'
-const DEFAULT_MANGO_GROUP_CONFIG = Config.ids().getGroup(CLUSTER, DEFAULT_MANGO_GROUP_NAME)
-console.log(DEFAULT_MANGO_GROUP_CONFIG);
+const DEFAULT_MANGO_GROUP_CONFIG = Config.ids().getGroup(
+  CLUSTER,
+  DEFAULT_MANGO_GROUP_NAME
+)
+console.log(DEFAULT_MANGO_GROUP_CONFIG)
 
 const defaultMangoGroupIds = IDS['groups'].find(
   (group) => group.name === DEFAULT_MANGO_GROUP_NAME
@@ -99,7 +103,7 @@ interface MangoStore extends State {
     endpoint: string
   }
   selectedMarket: {
-    config: MarketConfig,
+    config: MarketConfig
     name: string
     address: string
     current: Market | null
@@ -110,15 +114,14 @@ interface MangoStore extends State {
   mangoClient: MangoClient
   mangoGroups: Array<MangoGroup>
   selectedMangoGroup: {
-    config: GroupConfig,
+    config: GroupConfig
     name: string
     current: MangoGroup | null
     markets: {
       [address: string]: Market
     }
-    ids: any
-    tokens: any[]
     rootBanks: any[]
+    cache: MerpsCache | null
   }
   marginAccounts: MarginAccount[]
   selectedMarginAccount: {
@@ -164,12 +167,15 @@ const useMangoStore = create<MangoStore>((set, get) => ({
     name: DEFAULT_MANGO_GROUP_NAME,
     current: null,
     markets: {},
-    ids: defaultMangoGroupIds,
-    tokens: defaultMangoGroupIds.tokens,
     rootBanks: [],
+    cache: null,
   },
   selectedMarket: {
-    config: getMarketByBaseSymbolAndKind(DEFAULT_MANGO_GROUP_CONFIG, 'BTC', 'spot') as MarketConfig,
+    config: getMarketByBaseSymbolAndKind(
+      DEFAULT_MANGO_GROUP_CONFIG,
+      'BTC',
+      'spot'
+    ) as MarketConfig,
     kind: 'spot',
     name: 'BTC/USDC',
     address: defaultMangoGroupIds.spot_markets[0].key,
@@ -322,13 +328,15 @@ const useMangoStore = create<MangoStore>((set, get) => ({
       const set = get().set
 
       if (!mangoClient) return
-
       const mangoGroupPk = merpsGroupPk
 
       return mangoClient
         .getMerpsGroup(mangoGroupPk)
         .then(async (mangoGroup) => {
           console.log('we have a mango group', mangoGroup)
+          const rootBanks = await mangoGroup.loadRootBanks(DEFAULT_CONNECTION)
+          const merpsCache = await mangoGroup.loadCache(DEFAULT_CONNECTION)
+          console.log('we have merps cache::', merpsCache)
 
           // const srmAccountInfoPromise = connection.getAccountInfo(
           //   mangoGroup.srmVault
@@ -341,6 +349,8 @@ const useMangoStore = create<MangoStore>((set, get) => ({
           // Set the mango group
           set((state) => {
             state.selectedMangoGroup.current = mangoGroup
+            state.selectedMangoGroup.rootBanks = rootBanks
+            state.selectedMangoGroup.cache = merpsCache
             // state.selectedMangoGroup.srmAccount = srmAccountInfo
             // state.selectedMangoGroup.mintDecimals = mangoGroup.mintDecimals // TODO store "tokens" from merps group ids
             // state.selectedMangoGroup.prices = prices

utils/index.ts

@@ -1,3 +1,4 @@
+import { I80F48 } from '@blockworks-foundation/mango-client/lib/src/fixednum'
 import { TOKEN_MINTS } from '@project-serum/serum'
 import { PublicKey } from '@solana/web3.js'
 import BN from 'bn.js'
@@ -216,3 +217,6 @@ export const trimDecimals = (n, digits) => {
 
   return temp / step
 }
+
+export const i80f48ToPercent = (value: I80F48) =>
+  value.mul(I80F48.fromNumber(100))

yarn.lock

@@ -995,7 +995,7 @@
 
 "@blockworks-foundation/mango-client@git+ssh://git@github.com/blockworks-foundation/merps-ts#ts/ui-exports":
   version "0.0.0"
-  resolved "git+ssh://git@github.com/blockworks-foundation/merps-ts#b9f5fcd9ad9fa572ee30be00e1f6e6d66b8ae285"
+  resolved "git+ssh://git@github.com/blockworks-foundation/merps-ts#62854b395fa6eee3c4092dfd90e892fa8ae52517"
   dependencies:
     "@project-serum/serum" "^0.13.38"
     "@project-serum/sol-wallet-adapter" "^0.2.0"