update orders on account change and disconnect

components/MangoAccountsList.tsx

@@ -14,6 +14,7 @@ import { LAST_ACCOUNT_KEY } from '../utils/constants'
 import { useTranslation } from 'next-i18next'
 import { retryFn } from '../utils'
 import Loading from './shared/Loading'
+import ActionTokenList from './account/ActionTokenList'
 
 const MangoAccountsList = ({
   mangoAccount,
@@ -22,6 +23,7 @@ const MangoAccountsList = ({
 }) => {
   const { t } = useTranslation('common')
   const mangoAccounts = mangoStore((s) => s.mangoAccounts.accounts)
+  const actions = mangoStore((s) => s.actions)
   const loading = mangoStore((s) => s.mangoAccount.initialLoad)
   const [showNewAccountModal, setShowNewAccountModal] = useState(false)
   const [, setLastAccountViewed] = useLocalStorageStringState(LAST_ACCOUNT_KEY)
@@ -41,6 +43,7 @@ const MangoAccountsList = ({
         s.mangoAccount.lastUpdatedAt = new Date().toISOString()
       })
       setLastAccountViewed(acc.publicKey.toString())
+      actions.fetchSerumOpenOrders(acc)
     } catch (e) {
       console.warn('Error selecting account', e)
     }

components/shared/TabButtons.tsx

@@ -44,7 +44,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
               <div
                 className={`ml-1.5 rounded ${
                   label === activeValue ? 'bg-th-bkg-4' : 'bg-th-bkg-3'
-                } px-1.5 font-mono text-xxs`}
+                } px-1.5 font-mono text-xxs text-th-fgd-1`}
               >
                 {count}
               </div>

components/trade/OpenOrders.tsx

@@ -10,7 +10,7 @@ import mangoStore from '@store/mangoStore'
 import { useTranslation } from 'next-i18next'
 import { useCallback } from 'react'
 import { notify } from 'utils/notifications'
-import { formatFixedDecimals } from 'utils/numbers'
+import { formatFixedDecimals, getDecimalCount } from 'utils/numbers'
 import MarketLogos from './MarketLogos'
 
 const OpenOrders = () => {
@@ -107,14 +107,22 @@ const OpenOrders = () => {
                     <td className="text-right">
                       <SideBadge side={o.side} />
                     </td>
-                    <td className="text-right">{o.size}</td>
-                    <td className="text-right">
-                      <span>
-                        {o.price}{' '}
-                        <span className="text-th-fgd-4">{quoteSymbol}</span>
-                      </span>
+                    <td className="text-right font-mono">
+                      {o.size.toLocaleString(undefined, {
+                        maximumFractionDigits: getDecimalCount(o.size),
+                      })}
                     </td>
                     <td className="text-right">
+                      <span className="font-mono">
+                        {o.price.toLocaleString(undefined, {
+                          maximumFractionDigits: getDecimalCount(o.price),
+                        })}{' '}
+                        <span className="font-body tracking-wide text-th-fgd-4">
+                          {quoteSymbol}
+                        </span>
+                      </span>
+                    </td>
+                    <td className="text-right font-mono">
                       {formatFixedDecimals(o.size * o.price, true)}
                     </td>
                     <td>

components/wallet/ConnectedMenu.tsx

@@ -31,6 +31,7 @@ const ConnectedMenu = () => {
     set((state) => {
       state.mangoAccount.current = undefined
       state.connected = false
+      state.mangoAccount.openOrders = {}
     })
     disconnect()
     wallet?.adapter.disconnect()