fix saved grid layout and add formatting for some large nums
This commit is contained in:
parent
2ce9d53b7c
commit
ea015a4dc9
|
@ -5,6 +5,7 @@ import useMangoStore from '../stores/useMangoStore'
|
||||||
import Button from './Button'
|
import Button from './Button'
|
||||||
import DepositSrmModal from './DepositSrmModal'
|
import DepositSrmModal from './DepositSrmModal'
|
||||||
import WithdrawSrmModal from './WithdrawSrmModal'
|
import WithdrawSrmModal from './WithdrawSrmModal'
|
||||||
|
import { SRM_DECIMALS } from '@project-serum/serum/lib/token-instructions'
|
||||||
|
|
||||||
const FeeDiscountsTable = () => {
|
const FeeDiscountsTable = () => {
|
||||||
const [showDeposit, setShowDeposit] = useState(false)
|
const [showDeposit, setShowDeposit] = useState(false)
|
||||||
|
@ -51,7 +52,11 @@ const FeeDiscountsTable = () => {
|
||||||
>
|
>
|
||||||
<div className="px-4">
|
<div className="px-4">
|
||||||
<div>Total SRM in Mango</div>
|
<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>
|
||||||
<div className="px-4 mt-4 sm:mt-0">
|
<div className="px-4 mt-4 sm:mt-0">
|
||||||
<div>Maker Fee</div>
|
<div>Maker Fee</div>
|
||||||
|
|
|
@ -5,6 +5,7 @@ const TVChartContainer = dynamic(
|
||||||
() => import('../components/TradingView/index'),
|
() => import('../components/TradingView/index'),
|
||||||
{ ssr: false }
|
{ ssr: false }
|
||||||
)
|
)
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
import FloatingElement from '../components/FloatingElement'
|
import FloatingElement from '../components/FloatingElement'
|
||||||
import Orderbook from '../components/Orderbook'
|
import Orderbook from '../components/Orderbook'
|
||||||
import MarginInfo from './MarginInfo'
|
import MarginInfo from './MarginInfo'
|
||||||
|
@ -19,13 +20,13 @@ const ResponsiveGridLayout = WidthProvider(Responsive)
|
||||||
|
|
||||||
const defaultLayouts = {
|
const defaultLayouts = {
|
||||||
xl: [
|
xl: [
|
||||||
{ i: 'tvChart', x: 0, y: 0, w: 3, h: 30 },
|
{ i: 'tvChart', x: 0, y: 0, w: 4, h: 30 },
|
||||||
{ i: 'orderbook', x: 3, y: 0, w: 1, h: 17 },
|
{ i: 'orderbook', x: 4, y: 0, w: 2, h: 17 },
|
||||||
{ i: 'tradeForm', x: 4, y: 0, w: 1, h: 17 },
|
{ i: 'tradeForm', x: 6, y: 0, w: 2, h: 17 },
|
||||||
{ i: 'marginInfo', x: 4, y: 2, w: 1, h: 12 },
|
{ i: 'marketTrades', x: 4, y: 1, w: 2, h: 13 },
|
||||||
{ i: 'marketTrades', x: 3, y: 1, w: 1, h: 13 },
|
{ i: 'balanceInfo', x: 6, y: 1, w: 2, h: 13 },
|
||||||
{ i: 'userInfo', x: 0, y: 2, w: 3, h: 17 },
|
{ i: 'userInfo', x: 0, y: 2, w: 6, h: 17 },
|
||||||
{ i: 'balanceInfo', x: 4, y: 1, w: 1, h: 13 },
|
{ i: 'marginInfo', x: 6, y: 2, w: 2, h: 12 },
|
||||||
],
|
],
|
||||||
lg: [
|
lg: [
|
||||||
{ i: 'tvChart', x: 0, y: 0, w: 2, h: 24 },
|
{ 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 (
|
return (
|
||||||
<ResponsiveGridLayout
|
<ResponsiveGridLayout
|
||||||
className="layout"
|
className="layout"
|
||||||
layouts={savedLayouts || defaultLayouts}
|
layouts={savedLayouts || defaultLayouts}
|
||||||
breakpoints={{ xl: 1600, lg: 1200, md: 996, sm: 768, xs: 0 }}
|
breakpoints={{ xl: 1600, lg: 1200, md: 1110, sm: 768, xs: 0 }}
|
||||||
cols={{ xl: 5, lg: 3, md: 3, sm: 2, xs: 1 }}
|
cols={{ xl: 8, lg: 3, md: 3, sm: 2, xs: 1 }}
|
||||||
rowHeight={15}
|
rowHeight={15}
|
||||||
isDraggable={!uiLocked}
|
isDraggable={!uiLocked}
|
||||||
isResizable={!uiLocked}
|
isResizable={!uiLocked}
|
||||||
|
|
|
@ -30,6 +30,9 @@ export function useLocalStorageStringState(
|
||||||
|
|
||||||
const setState = useCallback<(newState: string | null) => void>(
|
const setState = useCallback<(newState: string | null) => void>(
|
||||||
(newState) => {
|
(newState) => {
|
||||||
|
if (!localStorageListeners[key]) {
|
||||||
|
localStorageListeners[key] = []
|
||||||
|
}
|
||||||
const changed = state !== newState
|
const changed = state !== newState
|
||||||
if (!changed) {
|
if (!changed) {
|
||||||
return
|
return
|
||||||
|
|
|
@ -9,6 +9,7 @@ import FloatingElement from '../components/FloatingElement'
|
||||||
import useConnection from '../hooks/useConnection'
|
import useConnection from '../hooks/useConnection'
|
||||||
import TopBar from '../components/TopBar'
|
import TopBar from '../components/TopBar'
|
||||||
import Select from '../components/Select'
|
import Select from '../components/Select'
|
||||||
|
import { formatBalanceDisplay } from '../utils/index'
|
||||||
|
|
||||||
const DECIMALS = {
|
const DECIMALS = {
|
||||||
BTC: 4,
|
BTC: 4,
|
||||||
|
@ -232,10 +233,20 @@ export default function StatsPage() {
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
<td className="text-left py-4">
|
<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>
|
||||||
<td className="text-left py-4">
|
<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>
|
||||||
<td className="text-left py-4">
|
<td className="text-left py-4">
|
||||||
{stat.depositInterest.toFixed(2)}%
|
{stat.depositInterest.toFixed(2)}%
|
||||||
|
|
Loading…
Reference in New Issue