Merge branch 'main' into edit-orders

components/MangoProvider.tsx

@@ -34,6 +34,7 @@ const HydrateStore = () => {
   useEffect(() => {
     const connection = mangoStore.getState().connection
     const client = mangoStore.getState().client
+    const set = mangoStore.getState().set
 
     if (!mangoAccount) return
 
@@ -68,12 +69,9 @@ const HydrateStore = () => {
           // newMangoAccount.spotOpenOrdersAccounts =
           //   mangoAccount.spotOpenOrdersAccounts
           // newMangoAccount.advancedOrders = mangoAccount.advancedOrders
-          mangoStore.setState({
+          set((s) => {
-            mangoAccount: {
+            s.mangoAccount.current = newMangoAccount
-              ...mangoStore.getState().mangoAccount,
+            s.mangoAccount.lastSlot = context.slot
-              current: newMangoAccount,
-              lastSlot: context.slot,
-            },
           })
         }
       }

components/stats/TokenStats.tsx

@@ -132,7 +132,7 @@ const TokenStats = () => {
                 },
               ])}
               daysToShow={'999'}
-              heightClass="h-72"
+              heightClass="h-64"
               prefix="$"
               tickFormat={(x) => `$${x.toFixed(2)}`}
               title={t('total-deposit-value')}
@@ -158,7 +158,7 @@ const TokenStats = () => {
                 },
               ])}
               daysToShow={'999'}
-              heightClass="h-72"
+              heightClass="h-64"
               prefix="$"
               tickFormat={(x) => `$${x.toFixed(2)}`}
               title={t('total-borrow-value')}

components/token/ChartTabs.tsx

@@ -59,6 +59,7 @@ const ChartTabs = ({ token }: { token: string }) => {
               <DetailedAreaChart
                 data={statsHistory}
                 daysToShow={'999'}
+                heightClass="h-64"
                 // domain={[0, 'dataMax']}
                 loading={loadingTokenStats}
                 small
@@ -71,6 +72,7 @@ const ChartTabs = ({ token }: { token: string }) => {
               <DetailedAreaChart
                 data={statsHistory}
                 daysToShow={'999'}
+                heightClass="h-64"
                 // domain={[0, 'dataMax']}
                 loading={loadingTokenStats}
                 hideChange
@@ -101,6 +103,7 @@ const ChartTabs = ({ token }: { token: string }) => {
               <DetailedAreaChart
                 data={statsHistory}
                 daysToShow={'999'}
+                heightClass="h-64"
                 // domain={[0, 'dataMax']}
                 loading={loadingTokenStats}
                 small
@@ -113,6 +116,7 @@ const ChartTabs = ({ token }: { token: string }) => {
               <DetailedAreaChart
                 data={statsHistory}
                 daysToShow={'999'}
+                heightClass="h-64"
                 // domain={[0, 'dataMax']}
                 loading={loadingTokenStats}
                 small

components/trade/AdvancedTradeForm.tsx

@@ -207,8 +207,8 @@ const AdvancedTradeForm = () => {
       } else {
         tickSize = selectedMarket.tickSize
       }
-      if (tradeForm.baseSize) {
+      if (!isNaN(parseFloat(tradeForm.baseSize))) {
-        const baseSize = new Decimal(tradeForm.baseSize).toNumber()
+        const baseSize = new Decimal(tradeForm.baseSize)?.toNumber()
         const orderbook = mangoStore.getState().selectedMarket.orderbook
         const price = calculateMarketPrice(orderbook, baseSize, tradeForm.side)
         const quoteSize = baseSize * price

components/trade/UnsettledTrades.tsx

@@ -162,14 +162,14 @@ const UnsettledTrades = ({
                     <TableMarketName market={market} />
                   </Td>
                   <Td className="text-right font-mono">
-                    <div className="flex">
+                    <div className="flex justify-end">
                       <div>
                         {unsettledSpotBalances[mktAddress].base || 0.0}{' '}
                         <span className="font-body tracking-wide text-th-fgd-4">
                           {base}
                         </span>
                       </div>
-                      <div>
+                      <div className="ml-4">
                         {unsettledSpotBalances[mktAddress].quote || 0.0}{' '}
                         <span className="font-body tracking-wide text-th-fgd-4">
                           {quote}

pages/dashboard/mangoaccount.tsx

@@ -4,6 +4,7 @@ import type { NextPage } from 'next'
 import { ReactNode } from 'react'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import useMangoAccount from 'hooks/useMangoAccount'
+import { toUiDecimalsForQuote, HealthType } from '@blockworks-foundation/mango-v4';
 
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
@@ -53,9 +54,21 @@ const Dashboard: NextPage = () => {
                 label="Being Liquidated"
                 value={mangoAccount.beingLiquidated.toString()}
               />
+              <KeyValuePair
+                label="Init Health"
+                value={`$${toUiDecimalsForQuote(mangoAccount.getHealth(group, HealthType.init)).toFixed(4)}`}
+              />
+              <KeyValuePair
+                label="Maint Health"
+                value={`$${toUiDecimalsForQuote(mangoAccount.getHealth(group, HealthType.maint)).toFixed(4)}`}
+              />
+              <KeyValuePair
+                label="Perp Settle Health"
+                value={`$${toUiDecimalsForQuote(mangoAccount.getPerpSettleHealth(group)).toFixed(4)}`}
+              />
               <KeyValuePair
                 label="Net Deposits"
-                value={mangoAccount.netDeposits.toNumber()}
+                value={`$${toUiDecimalsForQuote(mangoAccount.netDeposits).toFixed(4)}`}
               />
               <KeyValuePair
                 label="Perp Spot Transfers"
@@ -73,12 +86,12 @@ const Dashboard: NextPage = () => {
                   <div key={token.tokenIndex} className="mt-6">
                     <KeyValuePair label="Token's Bank Name" value={bank.name} />
                     <KeyValuePair
-                      label="Deposits UI"
+                      label="Balance UI"
-                      value={token.depositsUi(bank)}
+                      value={token.balanceUi(bank)}
                     />
                     <KeyValuePair
-                      label="Borrows UI"
+                      label="Value at oracle price"
-                      value={token.borrowsUi(bank)}
+                      value={`$${token.balanceUi(bank) * bank.uiPrice}`}
                     />
                   </div>
                 )
@@ -140,8 +153,8 @@ const Dashboard: NextPage = () => {
                       value={perp.getBasePositionUi(market)}
                     />
                     <KeyValuePair
-                      label="Quote Position Native"
+                      label="Quote Position UI"
-                      value={perp.quotePositionNative.toNumber()}
+                      value={`$${toUiDecimalsForQuote(perp.quotePositionNative).toFixed(4)}`}
                     />
                     <KeyValuePair
                       label="Quote Running Native"

store/mangoStore.ts

@@ -939,6 +939,10 @@ const mangoStore = create<MangoStore>()(
 )
 
 mangoStore.subscribe((state) => state.mangoAccount.current, spotBalancesUpdater)
+mangoStore.subscribe(
+  (state) => state.mangoAccount.openOrderAccounts,
+  spotBalancesUpdater
+)
 mangoStore.subscribe(
   (state) => state.mangoAccount.current,
   perpPositionsUpdater

utils/tradeForm.ts

@@ -38,10 +38,13 @@ export const calculateSlippage = (
   const ba = orderBook?.asks?.length > 0 && Number(orderBook.asks[0][0])
   const referencePrice = bb && ba ? (bb + ba) / 2 : markPrice
 
-  const estimatedPrice = calculateMarketPrice(orderBook, Number(size), side)
+  if (Number(size)) {
+    const estimatedPrice = calculateMarketPrice(orderBook, Number(size), side)
 
-  const slippageAbs =
+    const slippageAbs =
-    Number(size) > 0 ? Math.abs(estimatedPrice - referencePrice) : 0
+      Number(size) > 0 ? Math.abs(estimatedPrice - referencePrice) : 0
-  const slippageRel = (slippageAbs / referencePrice) * 100
+    const slippageRel = (slippageAbs / referencePrice) * 100
-  return slippageRel
+    return slippageRel
+  }
+  return 0
 }