combine quote currency balances now that we're showing all markets

components/BalancesTable.tsx

@@ -5,8 +5,8 @@ import useConnection from '../hooks/useConnection'
 import Button from '../components/Button'
 import { notify } from '../utils/notifications'
 import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
-// import { InformationCircleIcon } from '@heroicons/react/outline'
-// import Tooltip from './Tooltip'
+import { InformationCircleIcon } from '@heroicons/react/outline'
+import Tooltip from './Tooltip'
 import { sleep } from '../utils'
 import { PublicKey } from '@solana/web3.js'
 
@@ -56,11 +56,15 @@ const BalancesTable = () => {
     <div className={`flex flex-col py-4`}>
       <div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
         <div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
-          {balances.length > 0 ? (
+          {balances.length > 0 &&
+          (balances.find(({ unsettled }) => unsettled > 0) ||
+            balances.find(
+              ({ borrows, marginDeposits }) => borrows > 0 && marginDeposits > 0
+            )) ? (
             <div
               className={`flex items-center justify-between p-4 mb-2 rounded-md bg-th-bkg-1`}
             >
-              {/* <div className="flex items-center text-fgd-1 font-semibold pr-4">
+              <div className="flex items-center text-fgd-1 font-semibold pr-4">
                 You have unsettled funds
                 <Tooltip content="Use the Settle All button to move unsettled funds to your deposits. If you have borrows, settling will use deposits for that asset to reduce your borrows.">
                   <div>
@@ -69,7 +73,7 @@ const BalancesTable = () => {
                     />
                   </div>
                 </Tooltip>
-              </div> */}
+              </div>
               <Button onClick={handleSettleAll}>Settle All</Button>
             </div>
           ) : null}

components/TradePageGrid.tsx

@@ -25,7 +25,7 @@ export const defaultLayouts = {
     { i: 'tradeForm', x: 9, y: 0, w: 3, h: 12 },
     { i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 },
     { i: 'balanceInfo', x: 9, y: 1, w: 3, h: 15 },
-    { i: 'userInfo', x: 0, y: 2, w: 9, h: 17 },
+    { i: 'userInfo', x: 0, y: 2, w: 9, h: 18 },
     { i: 'marginInfo', x: 9, y: 2, w: 3, h: 13 },
   ],
   lg: [
@@ -35,7 +35,7 @@ export const defaultLayouts = {
     { i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
     { i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
     { i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 },
-    { i: 'userInfo', x: 0, y: 3, w: 12, h: 17, minW: 6 },
+    { i: 'userInfo', x: 0, y: 3, w: 12, h: 18, minW: 6 },
   ],
   md: [
     { i: 'tvChart', x: 0, y: 0, w: 8, h: 26, minW: 2 },
@@ -44,7 +44,7 @@ export const defaultLayouts = {
     { i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
     { i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
     { i: 'marketTrades', x: 8, y: 2, w: 4, h: 17, minW: 2 },
-    { i: 'userInfo', x: 0, y: 3, w: 12, h: 17, minW: 6 },
+    { i: 'userInfo', x: 0, y: 3, w: 12, h: 18, minW: 6 },
   ],
   sm: [
     { i: 'tvChart', x: 0, y: 0, w: 12, h: 25, minW: 6 },
@@ -53,7 +53,7 @@ export const defaultLayouts = {
     { i: 'tradeForm', x: 0, y: 2, w: 12, h: 13, minW: 3 },
     { i: 'orderbook', x: 0, y: 3, w: 6, h: 17, minW: 3 },
     { i: 'marketTrades', x: 6, y: 3, w: 6, h: 17, minW: 2 },
-    { i: 'userInfo', x: 0, y: 4, w: 12, h: 17, minW: 6 },
+    { i: 'userInfo', x: 0, y: 4, w: 12, h: 18, minW: 6 },
   ],
   xs: [
     { i: 'tvChart', x: 0, y: 0, w: 0, h: 0, minW: 6 },
@@ -62,11 +62,11 @@ export const defaultLayouts = {
     { i: 'tradeForm', x: 0, y: 3, w: 12, h: 13, minW: 3 },
     { i: 'orderbook', x: 0, y: 4, w: 6, h: 17, minW: 3 },
     { i: 'marketTrades', x: 0, y: 5, w: 6, h: 17, minW: 2 },
-    { i: 'userInfo', x: 0, y: 6, w: 12, h: 17, minW: 6 },
+    { i: 'userInfo', x: 0, y: 6, w: 12, h: 18, minW: 6 },
   ],
 }
 
-export const GRID_LAYOUT_KEY = 'mangoSavedLayouts-2.0'
+export const GRID_LAYOUT_KEY = 'mangoSavedLayouts-2.1'
 
 const TradePageGrid = () => {
   const { uiLocked } = useMangoStore((s) => s.settings)

hooks/useBalances.tsx

@@ -16,6 +16,10 @@ export function useBalances(): Balances[] {
   const marginAccount = useMangoStore((s) => s.selectedMarginAccount.current)
   const { symbols } = useMarketList()
 
+  let nativeQuoteFree = 0
+  let nativeQuoteLocked = 0
+  let nativeQuoteUnsettled = 0
+
   for (const { market, baseCurrency, quoteCurrency } of markets) {
     if (!marginAccount || !mangoGroup || !market) {
       return []
@@ -40,17 +44,18 @@ export function useBalances(): Balances[] {
     }
 
     const nativeBaseFree = openOrders?.baseTokenFree || 0
-    const nativeQuoteFree = openOrders?.quoteTokenFree || 0
+    nativeQuoteFree += openOrders?.quoteTokenFree || 0
 
     const nativeBaseLocked = openOrders
       ? openOrders.baseTokenTotal - nativeBaseFree
       : 0
-    const nativeQuoteLocked = openOrders
+    nativeQuoteLocked += openOrders
       ? openOrders?.quoteTokenTotal - nativeQuoteFree
       : 0
 
     const nativeBaseUnsettled = openOrders?.baseTokenFree || 0
-    const nativeQuoteUnsettled = openOrders?.quoteTokenFree || 0
+    nativeQuoteUnsettled += openOrders?.quoteTokenFree || 0
+
     const tokenIndex = marketIndex
 
     const net = (borrows, currencyIndex) => {
@@ -121,7 +126,8 @@ export function useBalances(): Balances[] {
   }
 
   balances.sort((a, b) => (a.coin > b.coin ? 1 : -1))
-  balances = balances.filter(function (elem, index, self) {
+
+  balances = balances.filter((elem, index, self) => {
     return index === self.map((a) => a.coin).indexOf(elem.coin)
   })