fix saved grid layout and add formatting for some large nums

components/FeeDiscountsTable.tsx

@@ -5,6 +5,7 @@ import useMangoStore from '../stores/useMangoStore'
 import Button from './Button'
 import DepositSrmModal from './DepositSrmModal'
 import WithdrawSrmModal from './WithdrawSrmModal'
+import { SRM_DECIMALS } from '@project-serum/serum/lib/token-instructions'
 
 const FeeDiscountsTable = () => {
   const [showDeposit, setShowDeposit] = useState(false)
@@ -51,7 +52,11 @@ const FeeDiscountsTable = () => {
       >
         <div className="px-4">
           <div>Total SRM in Mango</div>
-          <div className="text-th-fgd-1 text-lg font-semibold">{totalSrm}</div>
+          <div className="text-th-fgd-1 text-lg font-semibold">
+            {totalSrm.toLocaleString(undefined, {
+              maximumFractionDigits: SRM_DECIMALS,
+            })}
+          </div>
         </div>
         <div className="px-4 mt-4 sm:mt-0">
           <div>Maker Fee</div>

components/TradePageGrid.tsx

@@ -5,6 +5,7 @@ const TVChartContainer = dynamic(
   () => import('../components/TradingView/index'),
   { ssr: false }
 )
+import { useEffect, useState } from 'react'
 import FloatingElement from '../components/FloatingElement'
 import Orderbook from '../components/Orderbook'
 import MarginInfo from './MarginInfo'
@@ -19,13 +20,13 @@ const ResponsiveGridLayout = WidthProvider(Responsive)
 
 const defaultLayouts = {
   xl: [
-    { i: 'tvChart', x: 0, y: 0, w: 3, h: 30 },
-    { i: 'orderbook', x: 3, y: 0, w: 1, h: 17 },
-    { i: 'tradeForm', x: 4, y: 0, w: 1, h: 17 },
-    { i: 'marginInfo', x: 4, y: 2, w: 1, h: 12 },
-    { i: 'marketTrades', x: 3, y: 1, w: 1, h: 13 },
-    { i: 'userInfo', x: 0, y: 2, w: 3, h: 17 },
-    { i: 'balanceInfo', x: 4, y: 1, w: 1, h: 13 },
+    { i: 'tvChart', x: 0, y: 0, w: 4, h: 30 },
+    { i: 'orderbook', x: 4, y: 0, w: 2, h: 17 },
+    { i: 'tradeForm', x: 6, y: 0, w: 2, h: 17 },
+    { i: 'marketTrades', x: 4, y: 1, w: 2, h: 13 },
+    { i: 'balanceInfo', x: 6, y: 1, w: 2, h: 13 },
+    { i: 'userInfo', x: 0, y: 2, w: 6, h: 17 },
+    { i: 'marginInfo', x: 6, y: 2, w: 2, h: 12 },
   ],
   lg: [
     { i: 'tvChart', x: 0, y: 0, w: 2, h: 24 },
@@ -51,12 +52,16 @@ const TradePageGrid = () => {
     }
   }
 
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return null
+
   return (
     <ResponsiveGridLayout
       className="layout"
       layouts={savedLayouts || defaultLayouts}
-      breakpoints={{ xl: 1600, lg: 1200, md: 996, sm: 768, xs: 0 }}
-      cols={{ xl: 5, lg: 3, md: 3, sm: 2, xs: 1 }}
+      breakpoints={{ xl: 1600, lg: 1200, md: 1110, sm: 768, xs: 0 }}
+      cols={{ xl: 8, lg: 3, md: 3, sm: 2, xs: 1 }}
       rowHeight={15}
       isDraggable={!uiLocked}
       isResizable={!uiLocked}

hooks/useLocalStorageState.tsx

@@ -30,6 +30,9 @@ export function useLocalStorageStringState(
 
   const setState = useCallback<(newState: string | null) => void>(
     (newState) => {
+      if (!localStorageListeners[key]) {
+        localStorageListeners[key] = []
+      }
       const changed = state !== newState
       if (!changed) {
         return

pages/stats.tsx

@@ -9,6 +9,7 @@ import FloatingElement from '../components/FloatingElement'
 import useConnection from '../hooks/useConnection'
 import TopBar from '../components/TopBar'
 import Select from '../components/Select'
+import { formatBalanceDisplay } from '../utils/index'
 
 const DECIMALS = {
   BTC: 4,
@@ -232,10 +233,20 @@ export default function StatsPage() {
                       </button>
                     </td>
                     <td className="text-left py-4">
-                      {stat.totalDeposits.toFixed(DECIMALS[stat.symbol])}
+                      {formatBalanceDisplay(
+                        stat.totalDeposits,
+                        DECIMALS[stat.symbol]
+                      ).toLocaleString(undefined, {
+                        maximumFractionDigits: DECIMALS[stat.symbol],
+                      })}
                     </td>
                     <td className="text-left py-4">
-                      {stat.totalBorrows.toFixed(DECIMALS[stat.symbol])}
+                      {formatBalanceDisplay(
+                        stat.totalBorrows,
+                        DECIMALS[stat.symbol]
+                      ).toLocaleString(undefined, {
+                        maximumFractionDigits: DECIMALS[stat.symbol],
+                      })}
                     </td>
                     <td className="text-left py-4">
                       {stat.depositInterest.toFixed(2)}%